В приложение можно включить сторонние визуализации или виджеты, создав в нем компонент пользовательского интерфейса HTML, отображающий содержимое HTML, JavaScript ® или CSS из HTML-файла. При добавлении компонента пользовательского интерфейса HTML в приложение, чтобы компонент мог задавать данные или реагировать на изменения данных между MATLAB ® и JavaScript, включите setup в файле HTML. В пределах setup можно связать содержимое HTML с компонентом пользовательского интерфейса HTML в MATLAB.
Чтобы подключить компонент интерфейса пользователя MATLAB HTML в приложении к содержимому в файле HTML, создайте setup функция, которая определяет и инициализирует локальный htmlComponent Объект JavaScript. Компонент интерфейса пользователя HTML в MATLAB и htmlComponent Объект JavaScript имеет Data свойства, которые синхронизируются друг с другом. setup требуется для установки данных из MATLAB или JavaScript и реагирования на изменения в данных, происходящие на противоположной стороне.
setup функция вызывается, когда происходит одно из следующих событий:
На рисунке создается компонент пользовательского интерфейса HTML, и содержимое полностью загружено.
HTMLSource свойство изменяется на новое значение.
setup вызывается только в том случае, если она определена. htmlComponent Объект JavaScript доступен только из setup функция.
htmlComponent Объект JavaScript также имеет addEventListener и removeEventListener свойства. Используйте эти свойства для прослушивания DataChanged события из MATLAB. Данные о событии из DataChanged события обеспечивают источник htmlComponent объект JavaScript со старыми и новыми данными. Для получения дополнительной информации о addEventListener и removeEventListener в веб-документах Mozilla ® MDN см. методы EventTarget.addEventListener () и EventTarget.remaseEventListener ().
В этом примере показан HTML-файл с требуемым setup функция, позволяющая MATLAB и JavaScript реагировать на изменения данных друг от друга.
В пределах setup функция, один раз 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 и выберите Открыть снаружи MATLAB (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 данные отображаются на HTML-странице в DevTools.
setup(htmlComponent)
Можно также смоделировать "DataChanged" обратный вызов прослушивателя посредством кодирования JSON и синтаксического анализа данных из MATLAB в код JavaScript.
Для отладки отправки данных из JavaScript в MATLAB используйте JSON.stringify метод преобразования объекта JavaScript в строку в формате JSON. Затем в MATLAB используйте jsondecode для преобразования этой строки в данные MATLAB.