Создание компонента 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 на рисунке.
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 UI. Заметьте, как 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. Нажмите кнопку «Сгенерировать случайное число», чтобы увидеть значение 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® не продвигает сторонние библиотеки.