Создайте HTML компонент пользовательского интерфейса
h = uihtml создает HTML компонент пользовательского интерфейса на новом рисунке и возвращает HTML Объект компонента пользовательского интерфейса. MATLAB® вызывает uifigure функция, чтобы создать фигуру.
С uihtml функция, можно встроить HTML, JavaScript®, или содержимое файла CSS в вашем приложении и интерфейсе со сторонними библиотеками, чтобы отобразить содержимое как виджеты или визуализация данных. Все вспомогательные файлы (включая HTML, JavaScript, CSS, изображения) должны быть сохранены в месте, к которому может получить доступ ваша локальная файловая система.
h = uihtml( создает HTML компонент пользовательского интерфейса в заданном родительском контейнере. Родительским элементом может быть parent)Figure объект, созданный с uifigure функция или один из ее дочерних контейнеров.
h = uihtml(___, задает HTML свойства компонентов пользовательского интерфейса с помощью одного или нескольких аргументов пары "имя-значение". Например, Name,Value)'HTMLSource','timepicker.html' устанавливает источник HTML на заданный файл HTML.
Создайте компонент HTML и отобразите форматированный текст в нем с помощью разметки HTML.
fig = uifigure('Position',[561 497 333 239]); h = uihtml(fig); h.HTMLSource = '<p style="font-family:arial;"><b><span style="color:red;">Hello</span> <u>World</u>!</b></p>';
Создайте файл HTML, чтобы встроить аудио и видео элементы в ваше приложение и исходные файлы справочных изданий.
Во-первых, создайте пустой HTML компонент пользовательского интерфейса на рисунке.
fig = uifigure; fig.Position = [500 500 380 445]; h = uihtml(fig); h.Position = [10 10 360 420];
Затем создайте файл HTML под названием audio_videoplayers.html. В файле добавьте аудио и видео элементы и задайте их источники файла относительно пути файла HTML. В этом примере медиа-файлы находятся в той же директории как файл HTML.
Хорошая практика должна задать несколько источников файла для каждого элемента, потому что не все контексты поддерживают те же типы файлов. Например, в видео элементе, задайте файл OGA как первое видео для приложения, чтобы попытаться вопроизвести. Затем задайте файл MP4 как нейтрализацию, если первый файл не поддерживается.
<!DOCTYPE html>
<html>
<body style="background-color:white;font-family:arial;">
<p style="padding-left:20px">
Play audio file:
</p>
<audio controls style="padding-left:20px">
<source src="./handel_audio.wav" type="audio/wav">
<source src="./handel_audio.oga" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
<p style="padding-left:20px">
Play video file:
</p>
<video width="320" height="240" controls style="padding-left:20px">
<source src="./xylophone_video.oga" type="video/ogg">
<source src="./xylophone_video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Теперь встройте файл HTML в свое приложение путем установки HTMLSource свойство к полному пути к файлу.
h.HTMLSource = fullfile(pwd,'audio_videoplayers.html');
Создайте htmlComponent Объект JavaScript®, который отображает данные, которые установлены на HTML компонент пользовательского интерфейса в MATLAB®.
Во-первых, создайте пустой HTML компонент пользовательского интерфейса и расположите его в фигуре.
fig = uifigure; fig.Position = [500 500 490 180]; h = uihtml(fig); h.Position = [20 20 450 130];
Затем создайте файл HTML под названием displayDataFromMATLAB.html. В файле,
Используйте style пометьте, чтобы задать внутренние стили CSS для <div> элементы тот текст отображения.
Запишите setup функционируйте в <script> пометьте, чтобы соединить ваш объект JavaScript, названный htmlComponent, в HTML компонент пользовательского интерфейса вы создали в MATLAB.
Добавьте прослушиватель события в setup функция. Прослушиватель события прислушивается к "DataChanged" события на htmlComponent Объект JavaScript и создает функцию обратного вызова прослушивателя. Когда "DataChanged" событие имеет место, функция обратного вызова прослушивателя обновляет "dataDisplay" <div> element со значением, которое установлено к Data свойство в MATLAB.
<!DOCTYPE html>
<html>
<head>
<style>
#prompt {
font-family: sans-serif;
text-align:center;
border-radius: 5px;
background-color: lightblue;
padding: 20px;
}
#dataDisplay {
border-radius: 5px;
height: 10vh;
padding: 12px 20px;
}
</style>
<script type="text/javascript">
function setup(htmlComponent) {
htmlComponent.addEventListener("DataChanged", function(event) {
document.getElementById("dataDisplay").innerHTML = htmlComponent.Data;
});
}
</script>
</head>
<body>
<div id="prompt">
<span><label for="prompt"><strong>Data from MATLAB will display here:</strong></label></span>
<br/><br/>
<div id ="dataDisplay">
Please set data in MATLAB...
</div>
</div>
</body>
</html>
Теперь в MATLAB, установленном значение HTMLSource свойство к пути к файлу HTML.
h.HTMLSource = fullfile(pwd,'displayDataFromMATLAB.html');
Установите значение Data свойство для HTML компонент пользовательского интерфейса. Заметьте как htmlComponent Обновления объекта JavaScript в вашем HTML компонент пользовательского интерфейса.
h.Data = "Hello World!";
Создайте htmlComponent Объект JavaScript®, который генерирует случайное число, когда кнопка нажата, и отображают номер в MATLAB®.
Во-первых, создайте пустой HTML компонент пользовательского интерфейса и расположите его в фигуре.
fig = uifigure; fig.Position = [500 500 490 180]; h = uihtml(fig); h.Position = [20 20 450 130];
Затем создайте файл HTML под названием generateJSRandomNumber.html. В файле,
Используйте style пометьте, чтобы задать внутренние стили CSS для элемента кнопки.
Запишите setup функционируйте в <script> пометьте, чтобы соединить ваш объект JavaScript, названный htmlComponent, в HTML компонент пользовательского интерфейса вы создали в MATLAB.
Добавьте прослушиватель события в setup функция. Прослушиватель события прислушивается к "click" события на кнопке и создают функцию обратного вызова прослушивателя. Когда событие нажатия кнопки имеет место, функция обратного вызова прослушивателя устанавливает Data свойство htmlComponent Объект JavaScript до случайным образом сгенерированного целого числа между 1 и 100.
<!DOCTYPE html>
<html>
<head>
<style>
button {
width: 100%;
font-family: sans-serif;
background-color: #4CAF50;
color: white;
font-size: 1rem;
text-shadow: 1px 1px 1px #000;
padding: 5px 20px;
margin: 8px 0;
border: none;
border-radius: 10px;
line-height: 2.5;
cursor: pointer;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, .2),
rgba(0, 0, 0, .2) 30%,
rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
inset -2px -2px 3px rgba(0, 0, 0, .6);
}
button:hover {
background-color: #45a049;
}
button:focus {
outline: 0;
}
button:active {
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
inset 2px 2px 3px rgba(0, 0, 0, .6);
}
</style>
<script type="text/javascript">
function setup(htmlComponent) {
document.getElementById("generateRandomNumber").addEventListener("click", function(event) {
htmlComponent.Data = Math.floor(Math.random() * 100) + 1;
});
}
</script>
</head>
<body>
<button id="generateRandomNumber">Generate Random Number</button><br/>
</body>
</html>
Теперь в MATLAB, установленном значение HTMLSource свойство к пути к файлу HTML. Создайте DataChangedFcn функция обратного вызова, которая отображает случайное число ваш код JavaScript, генерирует. Нажмите кнопку Generate Random Number, чтобы видеть значение Data отображение свойства в командном окне MATLAB.
h.HTMLSource = fullfile(pwd,'generateJSRandomNumber.html');
h.DataChangedFcn = @(src,event)disp(h.Data);
Вы не можете соединиться с веб-ресурсами URL или встроить приложения от внешних веб-страниц с помощью uihtml функция.
Файлы HTML, которые вы задаете для HTMLSource свойство не может получить доступ к сторонним библиотекам JavaScript посредством Сети доставки контента (CDN). Сохраните библиотеки в месте, к которому может получить доступ ваша локальная файловая система.
На общие веб-типы файлов, как JavaScript и CSS, можно сослаться из файла HTML, который вы задаете для HTMLSource свойство, но другие веб-типы файлов не может поддерживаться.
Содержимое не может переполнить границ HTML компонент пользовательского интерфейса. Если вы создаете динамический контент, как раскрывающиеся виджеты, сделайте размер своего HTML компонентом пользовательского интерфейса достаточно большой, чтобы отобразить виджет, когда всплывающее окно находится в своем открытом состоянии.
На MATLAB не поддерживаются настольные, определенные функции HTML, такие как веб-плагины и доступ к веб-камерам или микрофонам.
Вы не можете установить HTMLSource свойство к файлу HTML, которому добавили параметры запроса к его имени файла. Как обходное решение, установленное эти параметры в htmlComponent.Data.
Гиперссылки с matlab: операции не поддерживаются.
Если вы создаете файл HTML, чтобы встроить в ваше приложение, сначала проверить, что статический HTML представляет правильно в браузере. Для получения дополнительной информации смотрите, Создают Файл HTML, Который Может Инициировать или Ответить на Изменения Данных.
Если вы хотите обновить значение HTMLSource свойство, используйте это обходное решение, чтобы сохранить исходное значение HTMLSource к переменному, сбросу HTMLSource к пустому значению и обновлению фигура, чтобы очистить его содержимое, и наконец установить HTMLSource назад к его исходному значению.
oldValue = h.HTMLSource;
h.HTMLSource = '';
drawnow
h.HTMLSource = oldValue;Фигуры MATLAB, созданные с uifigure функционируйте используют браузер Хрома и запускают HTML5. Новые версии Хрома часто выпускаются и могут варьироваться между операционными системами. Консультируйтесь с внешними ресурсами Хрома для поддерживавших функций и функциональности. Примите этот фактор во внимание, если вы планируете совместно использовать свое приложение или использовать его в различных средах.
Проверяйте внешние ресурсы, как https://caniuse.com/, для типов функций, которые поддерживаются через различный рабочий стол и веб-браузеры.
MathWorks® не продвигает сторонних библиотек.