Вы можете включить визуализацию или виджеты сторонних производителей в свое приложение, создав в нем компонент HTML UI, который отображает HTML, JavaScript®, или содержимое CSS из HTML файла. Когда вы добавляете компонент HTML UI к своему приложению, чтобы позволить компоненту задать данные или ответить на изменения данных между MATLAB® и JavaScript, включите setup функция в вашем HTML файл. В пределах setup можно подключить HTML- содержимое к компоненту пользовательского интерфейса HTML в MATLAB.
Чтобы подключить компонент HTML UI MATLAB в вашем приложении к содержимому в HTML- файле, создайте setup функция, которая определяет и инициализирует локальное htmlComponent Объект JavaScript. Компонент пользовательского интерфейса HTML в MATLAB и htmlComponent Объект JavaScript имеет Data свойства, которые синхронизируются друг с другом. The setup функция требуется, если вы хотите задать данные из MATLAB или JavaScript и ответить на изменения в данных, которые происходят на противоположной стороне.
The setup функция вызывается, когда происходит одно из следующих событий:
Компонент пользовательского интерфейса HTML создается на рисунке, и содержимое полностью загружено.
The HTMLSource свойство изменяется на новое значение.
The setup функция вызывается только в том случае, если она задана. The htmlComponent Объект JavaScript доступен только из setup функция.
The htmlComponent Объект JavaScript также имеет addEventListener и removeEventListener свойства. Используйте эти свойства для прослушивания DataChanged события из MATLAB. Значение данных о событиях от DataChanged события обеспечивают исходный код htmlComponent Объект JavaScript со старыми и новыми данными. Для получения дополнительной информации о addEventListener и removeEventListener методы, см. EventTarget.addEventListener () и EventTarget.removeEventListener () на Mozilla® Веб-документы MDN.
Этот пример показывает HTML файла с необходимой setup функция, позволяющая MATLAB и JavaScript реагировать на изменения данных друг от друга.
В пределах setup function, один раз, htmlComponent Объект JavaScript был инициализирован, вы задаете поведение компонента. Для примера:
Получите начальное значение Data свойство из компонента пользовательского интерфейса HTML в MATLAB.
Инициализируйте HTML или JavaScript путем обновления элементов DOM или виджетов JavaScript.
Слушайте "DataChanged" события в MATLAB и кодируйте ответ JavaScript. Например, вы можете обновить свой HTML или JavaScript новыми данными, которые инициировали событие.
Создайте функцию, которая устанавливает Data свойство htmlComponent Объект JavaScript и запускает DataChangedFcn коллбэк в MATLAB.
После setup вы можете использовать свои сторонние библиотеки JavaScript, как рекомендует библиотечная документация.
Вот пример HTML файла, sampleHTMLFile.html.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function setup(htmlComponent) {
console.log("Setup called:", htmlComponent);
// Get the initial 'Data' value from MATLAB
var initialData = htmlComponent.Data;
console.log("Initial MATLAB Data", initialData);
// Initialize your HTML or JavaScript here
// Update things like DOM elements or JavaScript widgets
var dom = document.getElementById("Content");
dom.textContent = initialData;
// Code response to data changes in 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)
}
}
</script>
</head>
<body>
<div style="font-family:sans-serif;">
<span style="font-weight:bold;"> The data from MATLAB will display here:</span><br />
<div id ="Content"></div>
</div>
<!Reference supporting files here>
<script src=""></script>
<link rel="stylesheet" type="text/css" href="">
<link rel="icon" type="image/png" href="">
</body>
</html>
Если вы создаете HTML компонента, который работает не так, как ожидалось, или хотите знать, как выглядят ваши данные после завершения преобразования между MATLAB и JavaScript, откройте HTML файла в вашем системном браузере. Используя ваш браузер Developer Tools (DevTools), можно задать точки останова, чтобы протестировать фрагменты своего setup функция. Когда вы отлаживаете HTML файла через системный браузер, необходимо симулировать соединение между MATLAB и JavaScript, что setup функция обеспечивает.
В этом примере показов, как симулировать, как MATLAB отправляет данные на JavaScript, чтобы вы могли отлаживать HTML файла.
Откройте этот пример в MATLAB. В браузере Текущей папки щелкните правой кнопкой мыши файл с именем sampleHTMLFile.html и выберите Open Outside MATLAB. Откроется HTML файла в вашем системном браузере.
В MATLAB запустите этот код, чтобы преобразовать массив ячеек MATLAB из векторов символов в строку JSON. Скопируйте возвращенное строковое значение в буфер обмена.
value = {'one';'two';'three'};
jsontxt = jsonencode(value)jsontxt = '["one","two","three"]'
В DevTools вашего системного браузера откройте файл, чтобы просмотреть код. Создайте точку прерывания в линейном 16, где dom.textContent = initialData;.
Откройте консоль DevTools и создайте htmlComponent Объект JavaScript. Используйте JSON.parse метод для преобразования только что сгенерированной в MATLAB строки JSON в объект JavaScript и хранения ее в Data свойство htmlComponent объект.
var htmlComponent = {
Data: JSON.parse('["one","two","three"]'), // JSON formatted text from MATLAB data
addEventListener: function() {console.log("addEventListener called with: ", arguments)}
};
Находясь в консоли DevTools, вызовите setup функция. Когда вы возобновляете выполнение setup function, данные появляются на странице HTML в DevTools.
setup(htmlComponent)
Можно также симулировать "DataChanged" коллбэк прослушивателя посредством кодирования JSON и анализа данных из MATLAB в код JavaScript.
Если вы хотите отлажить, как данные отправляются из JavaScript в MATLAB, используйте JSON.stringify метод для преобразования объекта JavaScript в JSON-форматированную строку. Затем в MATLAB используйте jsondecode функция для преобразования этой строки в данные MATLAB.