uihtml

Создайте HTML компонент пользовательского интерфейса

свернуть все на странице

Синтаксис

h = uihtml
h = uihtml(parent)
h = uihtml(___,Name,Value)

Описание

h = uihtml создает HTML компонент пользовательского интерфейса на новом рисунке и возвращает HTML Объект компонента пользовательского интерфейса. MATLAB® вызывает uifigure функция, чтобы создать фигуру.

С uihtml функция, можно встроить HTML, JavaScript® или содержимое файла CSS в приложении и интерфейсе со сторонними библиотеками, чтобы отобразить содержимое как визуализация данных или виджеты. Все вспомогательные файлы (включая HTML, JavaScript, CSS, изображения) должны быть сохранены в месте, к которому может получить доступ ваша локальная файловая система.

пример

h = uihtml(parent) создает HTML компонент пользовательского интерфейса в заданном родительском контейнере. Родительским элементом может быть Figure объект, созданный с uifigure функция или один из ее дочерних контейнеров.

пример

h = uihtml(___,Name,Value) задает HTML свойства компонентов пользовательского интерфейса с помощью одного или нескольких аргументов пары "имя-значение". Например, 'HTMLSource','timepicker.html' устанавливает источник HTML на заданный файл HTML.

Примеры

свернуть все

Скрипт Open Live Script

Создайте компонент 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>';

Скрипт Open Live Script

Создайте файл 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');

Скрипт Open Live Script

Создайте 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!";

Скрипт Open Live Script

Создайте 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);

Входные параметры

свернуть все

Родительский контейнер в виде Figure объект создал использование uifigure функция или один из ее дочерних контейнеров: TabПанельГруппа кнопок, или GridLayout. Если вы не задаете родительский контейнер, MATLAB вызывает uifigure функция, чтобы создать новый Figure объект, который служит родительским контейнером.

Аргументы в виде пар имя-значение

Задайте дополнительные разделенные запятой пары Name,Value аргументы. Name имя аргумента и Value соответствующее значение. Name должен появиться в кавычках. Вы можете задать несколько аргументов в виде пар имен и значений в любом порядке, например: Name1, Value1, ..., NameN, ValueN.

Пример: h = uihtml(uifigure,'HTMLSource','C:\Work\expenses.html');

Примечание

Перечисленные здесь свойства являются только подмножеством. Для полного списка смотрите HTML Properties.

Разметка HTML или файл в виде вектора символов или строкового скаляра, который содержит или разметку HTML или путь к файлу HTML. Вся разметка HTML и файлы должны быть хорошо сформированы. Если заданный вектор символов или строковый скаляр заканчиваются .html, затем это принято, чтобы быть путем к файлу HTML.

При встраивании разметки HTML вы не должны задавать <html> или <body> теги. Если разметка, которую вы задаете, поддерживается в браузере Хрома, используемом фигурами MATLAB, созданными с uifigure функция, затем это представит. Если вы нуждаетесь в большем количестве структуры к своему коду, то рассматриваете использование файла HTML вместо этого.

Если вы устанавливаете HTMLSource свойство к пути к файлу HTML, файл HTML должен быть расположен в месте, к которому может получить доступ ваша локальная файловая система. Если вы используете вспомогательные файлы, такие как JavaScript, CSS, библиотеки или изображения, то помещенный файлы в местоположение, к которому может получить доступ ваша локальная файловая система, ссылаются на них в файле HTML и устанавливают HTMLSource свойство к пути к файлу HTML. Вспомогательные файлы не могут быть в относительной директории, смежной с или выше файла HTML.

Пример: h = uihtml('HTMLSource','CustomCharts.html') задает файл HTML.

Пример: h = uihtml('HTMLSource','<p>This is <span style="color:red">red</span> text.</p>') задает разметку.

Данные MATLAB в виде любого типа данных MATLAB. Используйте этот аргумент когда значение HTMLSource путь к файлу HTML, задающему объект JavaScript. Затем эти данные могут синхронизироваться между HTML MATLAB компонент пользовательского интерфейса и объектом JavaScript.

Синхронизировать значение Data свойство между MATLAB и сторонним содержимым, которое вы встраиваете в свое приложение, создайте setup функция в файле HTML, который соединяет объект JavaScript под названием htmlComponent в HTML компонент пользовательского интерфейса в MATLAB. Затем установите HTMLSource значение свойства к пути к файлу.

Изменения в значении Data триггерные события коллбэка свойства только в одном направлении. А именно,

  • Когда Data свойство установлено в MATLAB, Data свойство htmlComponent Объект JavaScript также обновляет и инициировал прослушиватели события JavaScript 'DataChanged' событие.

  • Когда htmlComponent.Data установлен в JavaScript, Data свойство HTML компонент пользовательского интерфейса в MATLAB также обновляет и инициировало DataChangedFcn 'callback'.

Если у вас есть данные как вложенные массивы ячеек, массивы структур или табличные данные массива MATLAB, вам может быть нужно больше информации о том, как данные преобразованы между MATLAB и JavaScript. Когда Data свойство HTML, компонент пользовательского интерфейса установлен в MATLAB, данные, преобразовано с помощью jsonencode функция, синхронизируемая с JavaScript, проанализировала использование JSON.parse (), и наконец установила на Data свойство htmlComponent Объект JavaScript. Преобразования происходят в противоположном направлении также посредством JSON.stringify () и jsondecode функция. Data свойство является единственным свойством, которое синхронизируется с JavaScript.

Обратитесь к jsonencode функционируйте для получения дополнительной информации о типах данных, которые это поддерживает. Если jsonencode функция не поддерживает ваш тип данных, затем использует функцию преобразования типа данных, как num2str, преобразовывать ваши данные в поддерживаемый тип. Затем установите его как значение Data свойство.

Для получения дополнительной информации о том, как записать файл HTML, который включает синхронизацию данных и свойства htmlComponent Объект JavaScript, смотрите, Создают Файл HTML, Который Может Инициировать или Ответить на Изменения Данных.

Коллбэк, когда данные изменяются в виде одного из этих значений:

  • Указатель на функцию.

  • Массив ячеек, в котором первым элементом является указатель на функцию. Последующие элементы массива ячеек являются аргументами, которые передаются в функцию обратного вызова.

  • Вектор символов, содержащий допустимое выражение MATLAB (не рекомендуемый). MATLAB оценивает это выражение в базовом рабочем пространстве.

Когда значение Data свойство изменяется в htmlComponent Объект JavaScript, Data свойство HTML MATLAB, компонент пользовательского интерфейса обновляется, и этот коллбэк, выполняется.

Эта функция обратного вызова может получить доступ к определенной информации об изменениях в данных в объекте JavaScript. MATLAB передает информацию в DataChangedData возразите в качестве второго аргумента против своей функции обратного вызова. В App Designer аргумент называется событием. Можно запросить DataChangedData свойства объектов с помощью записи через точку. Например, event.PreviousData возвращает предыдущее значение Data прежде чем это обновилось или изменилось. DataChangedData объект не доступен для функций обратного вызова, заданных как векторы символов.

Эта таблица приводит свойства DataChangedData объект.

СвойствоОписание
DataНовые данные, следующие из последнего DataChanged событие
PreviousDataДанные перед последним DataChanged событие
Source

Компонент пользовательского интерфейса HTML MATLAB, который выполняет коллбэк

EventName'DataChanged'

Для получения дополнительной информации о записи коллбэков, смотрите Коллбэки Записи в App Designer.

Местоположение и размер HTML компонент пользовательского интерфейса относительно родительского контейнера в виде четырехэлементного вектора из формы [left bottom width height]В этой таблице описываются каждый элемент в векторе.

ЭлементОписание
leftРасстояние от внутреннего левого края родительского контейнера к внешнему левому краю HTML компонент пользовательского интерфейса
bottomРасстояние от внутреннего базового края родительского контейнера к внешнему базовому краю HTML компонент пользовательского интерфейса
widthРасстояние между правыми и левыми внешними краями HTML компонент пользовательского интерфейса
heightРасстояние между верхними и нижними внешними краями HTML компонент пользовательского интерфейса

Position значения относительно drawable area родительского контейнера. Область векторной и растровой графики является областью в границах контейнера и не включает область, занятую художественными оформлениями, такими как панель меню или заголовок.

Все измерения указаны в пикселях.

Ограничения

  • Вы не можете соединиться с веб-ресурсами URL или встроить приложения от внешних веб-страниц с помощью uihtml функция.

  • Файлы HTML, которые вы задаете для HTMLSource свойство не может получить доступ к сторонним библиотекам JavaScript посредством Сети доставки контента (CDN). Сохраните библиотеки в месте, к которому может получить доступ ваша локальная файловая система.

  • На общие веб-типы файлов, как JavaScript и CSS, можно сослаться из файла HTML, который вы задаете для HTMLSource свойство, но другие веб-типы файлов не может поддерживаться.

  • Содержимое не может переполнить границ HTML компонент пользовательского интерфейса. Если вы создаете динамический контент, как раскрывающиеся виджеты, сделайте размер своего HTML компонентом пользовательского интерфейса достаточно большой, чтобы отобразить виджет, когда всплывающее окно находится в своем открытом состоянии.

  • На MATLAB не поддерживаются настольные, определенные функции HTML, такие как веб-плагины и доступ к веб-камерам или микрофонам.

  • Вы не можете установить HTMLSource свойство к файлу HTML, которому добавили параметры запроса к его имени файла. Как обходное решение, установленное эти параметры в htmlComponent.Data.

  • Гиперссылки с matlab: операции не поддерживаются.

Больше о

свернуть все

Потенциальные угрозы безопасности

Примечание

Этот список не предназначается, чтобы быть всесторонним. Консультируйтесь с внешними ресурсами для дополнительных рисков и факторов безопасности при взаимодействии через интерфейс со сторонними библиотеками.

Приложения, которые взаимодействуют через интерфейс со сторонними библиотеками JavaScript, потенциально уязвимы для данных или нападений инжекции кода.

  • MATLAB показывает как eval функция может увеличить риск инжекционных нападений. Как контрмера, подтвердите недоверяемый вход перед использованием его в MATLAB.

  • Любая функция MATLAB, что процессы подобный коду вход (XML, JSON, SQL, и т.д.) потенциально уязвимы для инжекции кода.

  • Приложения, которые получают доступ к операционной системе с помощью system MATLABDOS, или unix функции могут быть уязвимы для инжекции кода.

Для получения информации о том, как снизить потенциальный риск для ваших развернутых веб-приложений, см. Авторские Безопасные Веб-приложения (MATLAB Compiler).

Советы

  • Если вы создаете файл HTML, чтобы встроить в ваше приложение, сначала проверить, что статический HTML представляет правильно в браузере. Для получения дополнительной информации смотрите, Создают Файл HTML, Который Может Инициировать или Ответить на Изменения Данных.

  • Если вы хотите обновить значение HTMLSource свойство, используйте это обходное решение, чтобы сохранить исходное значение HTMLSource к переменному, сбросу HTMLSource к пустому значению и обновлению фигура, чтобы очистить его содержимое, и наконец установить HTMLSource назад к его исходному значению.

    oldValue = h.HTMLSource;
h.HTMLSource = '';
drawnow()
h.HTMLSource = oldValue;

  • Фигуры MATLAB, созданные с uifigure функционируйте используют браузер Хрома и запускают HTML5. Новые версии Хрома часто выпускаются и могут варьироваться между операционными системами. Консультируйтесь с внешними ресурсами Хрома для поддерживавших функций и функциональности. Примите этот фактор во внимание, если вы планируете совместно использовать свое приложение или использовать его в различных средах.

  • Проверяйте внешние ресурсы, как https://caniuse.com/, для типов функций, которые поддерживаются через различный рабочий стол и веб-браузеры.

  • MathWorks® не продвигает сторонних библиотек.

Смотрите также

Функции

Свойства

Темы

Введенный в R2019b

Документация MATLAB

Поддержка

Для просмотра документации необходимо авторизоваться на сайте