Создание компонента пользовательского интерфейса 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-файл.
<!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.mp4" type="video/mp4"> <source src="./xylophone_video.oga" type="video/ogg"> 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" и создает функцию обратного вызова прослушивателя. При возникновении события 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. Нажмите кнопку «Создать случайное число», чтобы увидеть значение 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 используйте браузер Chromium и запустите HTML5. Новые версии Chromium выпускаются часто и могут различаться в разных операционных системах. Для получения информации о поддерживаемых функциях и функциях обратитесь к внешним ресурсам Chromium. Учтите этот фактор, если вы планируете поделиться своим приложением или использовать его в разных средах.
Проверьте внешние ресурсы, такие как https://caniuse.com/, на наличие функций, поддерживаемых в различных настольных компьютерах и веб-браузерах.
MathWorks ® не продвигает библиотеки сторонних производителей.