创建HTML文件,可以触发或响应数据变化- MATLAB和Simulink MathWorks意大利金宝app

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

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

设置函数包含在您的HTML文件

MATLAB的HTML UI组件连接在你的应用程序在您的HTML文件的内容,创建一个设置函数定义和初始化一个地方htmlComponentJavaScript对象。在MATLAB和HTML UI组件htmlComponentJavaScript对象有数据属性相互同步。的设置功能是必需的,如果你想设置数据从MATLAB或JavaScript和应对变化的数据出现在另一侧。

的设置函数被调用时,其中一个事件发生:

中创建的HTML UI组件图和内容已满载。
的HTMLSource更改一个新值的属性。

的设置只有定义函数被调用。的htmlComponent只能在JavaScript对象设置函数。

的htmlComponentJavaScript对象也addEventListener和removeEventListener属性。使用这些属性来倾听DataChanged从MATLAB事件。的事件数据DataChanged事件提供了来源htmlComponentJavaScript对象与新老数据。更多的信息addEventListener和removeEventListener方法,请参阅EventTarget.addEventListener ()和EventTarget.removeEventListener ()在Mozilla^®MDN web文档。

示例HTML文件

打开生活的脚本

这个例子显示了一个与所需的HTML文件设置JavaScript函数使MATLAB和响应数据变化。

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

得到的初始值数据从MATLAB中的HTML UI组件属性。
通过更新DOM元素初始化您的HTML或JavaScript或JavaScript小部件。
监听“DataChanged”MATLAB和代码一个JavaScript事件响应。例如,您可以更新您的HTML或JavaScript触发事件的新数据。
创建一个函数,该函数集数据财产的htmlComponentJavaScript对象和触发器DataChangedFcn在MATLAB的回调。

后设置功能,你可以用你的第三方JavaScript库库文档建议。

这是一个示例HTML文件,sampleHTMLFile.html。

< !DOCTYPE html > < html > <头> < script type = " text / javascript " >函数设置(htmlComponent){控制台。日志(“设置称:“htmlComponent);/ /获得初始数据的价值从MATLAB var initialData = htmlComponent.Data;控制台。日志(“初始MATLAB数据”,initialData);/ /初始化您的HTML或JavaScript / /更新DOM元素或JavaScript小部件var DOM = . getelementbyid(“内容”);dom。textContent = initialData;/ / MATLAB htmlComponent代码对数据变化。addEventListener("DataChanged", function (event) { var changedData = htmlComponent.Data; console.log("New Data from MATLAB", changedData); // Update your HTML or JavaScript with the new data var dom = document.getElementById("Content"); dom.textContent = changedData; }); // Update 'Data' in MATLAB and trigger // the 'DataChangedFcn' callback function function updateData(newData) { htmlComponent.Data = newData; console.log("Changing Data in HTML", newData) } }      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 ={数据:JSON.parse(“(“1”,“2”,“3”)”),从MATLAB数据addEventListener: / / JSON格式化文本函数(){控制台。日志(“addEventListener称:“参数)}};
```
虽然仍在DevTools控制台,调用设置函数。当你恢复执行设置函数,在DevTools出现在HTML页面的数据。
```
设置(htmlComponent)
```

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

从JavaScript MATLAB模拟发送数据

如果你想调试从JavaScript MATLAB数据被发送,如何使用JSON.stringify方法将一个JavaScript对象转换为json格式的字符串。然后,在MATLAB中,使用jsondecode函数将字符串转换为MATLAB数据。