Можно включать стороннюю визуализацию или виджеты в приложении путем создания HTML компонент пользовательского интерфейса в нем, который отображает HTML, JavaScript®, или содержимое файла CSS из файла HTML. Когда вы добавляете HTML компонент пользовательского интерфейса в ваше приложение, чтобы позволить компоненту установить данные или ответить на изменения данных между MATLAB® и JavaScript, включайте setup функционируйте в своем файле HTML. В setup функция можно соединить содержимое HTML с HTML компонент пользовательского интерфейса в MATLAB.
Чтобы соединить HTML MATLAB компонент пользовательского интерфейса в вашем приложении к содержимому в вашем файле 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 методы, см. EventTarget.addEventListener () и EventTarget.removeEventListener () на Mozilla® Веб-документы MDN.
Этот пример показывает файл 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 в своем системном браузере. Используя ваши Инструменты Разработчика браузера (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 метод, чтобы преобразовать JSON представляет в виде строки, вы только сгенерировали в MATLAB к объекту 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.