创建可以触发或响应数据更改的HTML文件-MATLAB和SIMULINK万博1manbetx

创建可以触发或响应数据更改的HTML文件

您可以通过在其中创建显示HTML，JavaScript的HTML UI组件来在应用中包含第三方可视化或小部件。^®或来自HTML文件的CSS内容。当您在应用中添加HTML UI组件时，启用组件设置数据或响应MATLAB之间的数据更改^®和JavaScript, include a设置function in your HTML file. Within the设置功能您可以将HTML内容连接到MATLAB中的HTML UI组件。

Include Setup Function in Your HTML File

To connect the MATLAB HTML UI component in your app to the content in your HTML file, create a设置function that defines and initializes a localhtmlcomponentJavaScript对象。MATLAB和htmlcomponentJavaScript对象具有数据properties that synchronize with each other. The设置function is required if you want to set data from either MATLAB or JavaScript and respond to changes in data that occur on the opposite side.

The设置当这些事件之一发生时，调用功能：

HTML UI组件是在图中创建的，并且内容已充分加载。
Thehtmlsourceproperty changes to a new value.

The设置function is called only if it is defined. ThehtmlcomponentJavaScript object is accessible only from within the设置功能。

ThehtmlcomponentJavaScript对象也有AddEventListener和RemoveEventListenerproperties. Use these properties to listen for数据ChangedMATLAB的活动。来自数据Changed事件提供来源htmlcomponentJavaScript object with the old and new data. For more information about theAddEventListener和RemoveEventListenermethods, seeEventTarget.AddeventListener（）和EventTarget.removeEventListener()在Mozilla上^®MDN Web文档。

示例HTML文件

打开实时脚本

This example shows an HTML file with the required设置function for enabling MATLAB and JavaScript to respond to data changes from one another.

Within the设置功能，一旦htmlcomponentJavaScript对象已初始化，您可以定义组件的行为。例如：

Get the initial value of the数据MATLAB中HTML UI组件的属性。
通过更新DOM元素或JavaScript小部件来初始化HTML或JavaScript。
听“ datachanged”MATLAB中的事件和编码JavaScript响应。例如，您可以使用触发事件的新数据更新HTML或JavaScript。
创建一个设置的函数数据属性htmlcomponentJavaScript object and triggers a数据ChangedFcn在MATLAB中回调。

After the设置功能，您可以按照库文档的建议使用第三方JavaScript库。

Here is a sample HTML file,sampleHTMLFile.html。

        The data from MATLAB will display here:

Debug an HTML File

If you create an HTML component that is not working as expected, or if you want to know what your data looks like after conversion is complete between MATLAB and JavaScript, open the HTML file in your system browser. Using your browser Developer Tools (DevTools), you can set breakpoints to test portions of your设置功能。当您通过系统浏览器调试HTML文件时，必须模拟MATLAB和JAVASCRIPT之间的连接设置功能提供。

模拟从MATLAB到JavaScript的发送数据

此示例显示了如何模拟MATLAB将数据发送到JavaScript的方式，以便您可以调试HTML文件。

Open this example in MATLAB. From the当前文件夹browser, right-click the file calledsampleHTMLFile.html和selectOpen Outside MATLAB。HTML文件在系统浏览器中打开。

In MATLAB, run this code to convert a MATLAB cell array of character vectors to a JSON string. Copy the returned string value to your clipboard.
```
value = {'一';'two';'三'};jsontxt = jsonencode（value）
```
```
jsontxt = '["one","two","three"]'
```
在系统浏览器的DevTools中，打开文件以查看代码。在线创建断点16，在哪里dom.textContent = initiaLdata;。
打开DevTools控制台并创建htmlcomponentJavaScript对象。Use theJSON.parsemethod to convert the JSON string you just generated in MATLAB to a JavaScript object and store it in the数据属性htmlcomponent目的。
```
var htmlComponent = { Data: JSON.parse('["one","two","three"]'), // JSON formatted text from MATLAB data addEventListener: function() {console.log("addEventListener called with: ", arguments)} };
```
While still in the DevTools console, call the设置功能。当您恢复执行设置功能，数据出现在DevTools内的HTML页面中。
```
设置(htmlComponent)
```

您也可以模拟“ datachanged”listener callback by JSON encoding and parsing data from MATLAB into your JavaScript code.

模拟从JavaScript发送到MATLAB的数据

If you want to debug how data is sent from JavaScript to MATLAB, use thejson.stringifymethod to convert a JavaScript object into a JSON-formatted string. Then, in MATLAB, use thejsondecode功能可将该字符串转换为MATLAB数据。