Можно включать стороннюю визуализацию или виджеты в приложении путем создания HTML компонент пользовательского интерфейса в нем, который отображает HTML, JavaScript® или содержимое файла CSS из файла HTML. Чтобы встроить содержимое этого типа в ваше приложение и позволить ему установить данные или ответить на изменения данных между MATLAB® и JavaScript, включайте функцию настройки в свой файл HTML. В функции настройки можно соединить содержимое 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.