uihtml
Создание компонента HTML UI
Описание
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, чтобы встраивать аудио и видео элементов в ваши приложения и ссылку исходные файлы носителя.
Сначала создайте пустой компонент пользовательского интерфейса 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');
Кодируйте реакцию JavaScript на изменение данных в MATLAB
Создайте 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 UI. Заметьте, как htmlComponent Обновление объекта JavaScript в компоненте пользовательского интерфейса HTML.
h.Data = "Hello World!";
Код MATLAB Ответ на изменение данных в JavaScript
Создайте 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. Нажмите кнопку «Сгенерировать случайное число», чтобы увидеть значение 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® не продвигает сторонние библиотеки.