创建HTML文件，可以触发或响应数据变化- MATLAB和Simulink金宝app - 金宝app,下载188bet金宝搏,金宝搏官方网站

创建HTML文件，可以触发或响应数据变化

你可以通过在应用中创建一个HTML UI组件来显示HTML, JavaScript，从而在应用中包含第三方可视化或小部件^®或HTML文件中的CSS内容。当你添加一个HTML UI组件到你的应用程序，使组件可以在MATLAB之间设置数据或响应数据变化^®和JavaScript，包括一个设置函数在HTML文件中。在设置函数可以将HTML内容连接到MATLAB中的HTML UI组件。

在HTML文件中包含设置函数

要将应用程序中的MATLAB HTML UI组件连接到HTML文件中的内容，创建一个设置定义并初始化局部变量的htmlComponentJavaScript对象。HTML UI组件在MATLAB和htmlComponentJavaScript对象有数据相互同步的属性。的设置如果您想从MATLAB或JavaScript设置数据，并对发生在另一边的数据变化作出响应，则需要函数。

的设置函数在以下事件之一发生时被调用:

HTML UI组件在图中创建，内容已经完全加载。
的HTMLSource属性更改为新值。

的设置函数只有在定义后才会被调用。的htmlComponent对象的内部可访问设置函数。

的htmlComponentJavaScript对象也有addEventListener和removeEventListener属性。使用这些属性来监听DataChanged从MATLAB事件。的事件数据DataChanged事件提供源htmlComponent使用新旧数据的JavaScript对象。的详细信息addEventListener和removeEventListener方法,请参阅EventTarget.addEventListener ()和EventTarget.removeEventListener ()在Mozilla^®MDN web文档。

示例HTML文件

打开生活的脚本

这个例子显示了一个HTML文件设置函数，使MATLAB和JavaScript能够对彼此的数据变化作出响应。

在设置功能,一旦htmlComponentJavaScript对象已经初始化，你定义组件的行为。例如:

的初始值数据属性从HTML UI组件在MATLAB。
通过更新DOM元素或JavaScript小部件来初始化HTML或JavaScript。
监听“DataChanged”事件，并编写一个JavaScript响应。例如，您可以使用触发事件的新数据更新HTML或JavaScript。
创建一个函数来设置数据财产的htmlComponent对象并触发DataChangedFcn在MATLAB的回调。

后设置函数，您可以使用第三方JavaScript库，如库文档所推荐的。

下面是一个示例HTML文件，sampleHTMLFile.html．

<！DOCTYPE html>        The data from MATLAB will display here:

调试HTML文件

如果您创建的HTML组件没有按预期工作，或者如果您想知道在MATLAB和JavaScript之间完成转换后数据是什么样子的，请在系统浏览器中打开HTML文件。使用浏览器开发工具(DevTools)，您可以设置断点来测试您的设置函数。当您通过系统浏览器调试HTML文件时，您必须模拟MATLAB和JavaScript之间的连接设置提供的函数。

模拟从MATLAB发送数据到JavaScript

这个例子展示了如何模拟MATLAB向JavaScript发送数据的方式，以便您可以调试HTML文件。

在MATLAB中打开这个例子。从当前文件夹浏览器，右键单击文件调用sampleHTMLFile.html并选择外开放的MATLAB．HTML文件在系统浏览器中打开。

在MATLAB中，运行此代码将字符向量的MATLAB单元数组转换为JSON字符串。将返回的字符串值复制到剪贴板。
```
值= {“一个”；“两个”；“三”};jsontxt = jsonencode(值)
```
```
jsontxt = '(“1”,“2”,“3”)”
```
在系统浏览器的DevTools中，打开该文件以查看代码。在行中创建一个断点16,在那里dom。textContent = initialData;．
打开DevTools控制台并创建htmlComponentJavaScript对象。使用JSON.parse方法将刚才在MATLAB中生成的JSON字符串转换为JavaScript对象，并将其存储在数据财产的htmlComponent对象。
```
var htmlComponent = {Data: JSON.parse('["one"，"two"，"three"]')， // JSON格式的文本从MATLAB数据addEventListener: function() {console.log("addEventListener called with: "， arguments)}};
```
当仍然在DevTools控制台中时，调用设置函数。当您恢复执行设置函数，数据将出现在DevTools中的HTML页面中。
```
设置(htmlComponent)
```

您还可以模拟“DataChanged”侦听器回调的JSON编码和解析数据从MATLAB到您的JavaScript代码。

模拟从JavaScript发送数据到MATLAB

如果您想调试数据是如何从JavaScript发送到MATLAB的，请使用JSON.stringify方法将JavaScript对象转换为json格式的字符串。然后，在MATLAB中，使用jsondecode函数将该字符串转换为MATLAB数据。