Total Kontrol/TKT/Формат XML файла: различия между версиями

Материал из KONANlabs
Перейти к: навигация, поиск
Строка 27: Строка 27:
  
 
== Настройки ==
 
== Настройки ==
 +
 +
=== Протокол 1.0 ===
  
 
Элемент '''settings''', включает в себя элементы:
 
Элемент '''settings''', включает в себя элементы:
 
*'''resolution''' - обязательный, определяет вьюпорт браузера, атрибуты:
 
*'''resolution''' - обязательный, определяет вьюпорт браузера, атрибуты:
 
**''width'' и ''height'' - обязательные, размер вьюпорта в пикселях;
 
**''width'' и ''height'' - обязательные, размер вьюпорта в пикселях;
**<span style="color: red">2.0</span> ''fullscreen'' - необязательный, при старте развернуть браузер в полноэкранный режим;
 
 
*'''browsertitle''' - заголовок браузера, один атрибут ''value'';
 
*'''browsertitle''' - заголовок браузера, один атрибут ''value'';
 
*'''baseurl''' - ссылка на интерфейс, один атрибут ''src'';
 
*'''baseurl''' - ссылка на интерфейс, один атрибут ''src'';
 
*'''daemon''' - обязательный, адрес и порт контроллера, атрибуты ''ip'', ''port'' и ''eventrate'' (минимальная пауза между событиями в мс, необязателен, по умолчанию 100);
 
*'''daemon''' - обязательный, адрес и порт контроллера, атрибуты ''ip'', ''port'' и ''eventrate'' (минимальная пауза между событиями в мс, необязателен, по умолчанию 100);
 
*'''update''' - настройки связи с контроллером, параметры ''refresh'' (период обновления данных в миллисекундах, 0 - не обновлять), ''reconnect'' (период повторной попытки связи при неответе контроллера), ''quiet'' (1 - не пытаться связаться с контроллером при активации видимых элементов);
 
*'''update''' - настройки связи с контроллером, параметры ''refresh'' (период обновления данных в миллисекундах, 0 - не обновлять), ''reconnect'' (период повторной попытки связи при неответе контроллера), ''quiet'' (1 - не пытаться связаться с контроллером при активации видимых элементов);
*'''defaults''' - атрибуты, присваиваемые по умолчанию всем страницам (напр., фоновый рисунок).
+
*'''defaults''' - атрибуты, присваиваемые по умолчанию всем страницам (напр., фоновый рисунок);
 +
 
 +
=== Протокол 2.0 ===
 +
 
 +
В протоколе 2.0 существенно изменён механизм работы сервера. Для корректной работы нескольких веб-интерфейсов на одном сервере один из них должен быть назначен мастером, его открытие запускает веб-сервер (т. е., пока не откроется хотя бы один мастер-интерфейс, все остальные интерфейсы на этом сервере будут выдавать ошибку соединения). Кроме того, веб-интерфейсы могут работать с базой данных. Соединение между клиентом и сервером поддерживается постоянно, т. о. параметры частоты обновления теряют смысл.
 +
 
 +
Элемент '''settings''', включает в себя элементы:
 +
*'''resolution''' - обязательный, определяет вьюпорт браузера, атрибуты:
 +
**''width'' и ''height'' - обязательные, размер вьюпорта в пикселях;
 +
**''fullscreen'' - необязательный, при старте развернуть браузер в полноэкранный режим;
 +
*server - необязательный (по умолчанию localhost/44480/1000), определяет доступ к web-серверу, атрибуты:
 +
**''host'' - IP адрес или URL;
 +
**''port'' - порт TCP;
 +
**''start'' - запуск сервера (мастер-интерфейс), должен быть "1" только у одного интерфейса на сервере (либо у интерфейсов, которые гарантированно не будут запущены одновременно);
 +
**''ping'' - интервал пингования в миллисекундах для контроля соединения;
 +
*'''daemon''' - обязателен только для мастер-интерфейса, в прочих игнорируется, атрибуты:
 +
**''host'' - IP или URL демона;
 +
**''port'' - TCP порт демона;
 +
*'''mysql''' - данные доступа к серверу базы данных, атрибуты:
 +
**''host'' - IP или URL сервера;
 +
**''database'' - имя базы данных;
 +
**''user'' - имя пользователя;
 +
**''pass'' - пароль;
 +
 
 +
 
  
 
Пример:
 
Пример:

Версия 18:59, 4 сентября 2019

Терминология и форматирование:

  • элемент - элемент XML (<element> ... </element>)
  • атрибут - атрибут элемента XML (attribute="value")
  • (видимое) состояние - целое число, обозначающее изображение видимого элемента
  • управляющий модуль - TCP сервер, принимающий информацию от веб-интерфейса
  • событие - пакет данных, который веб-интерфейс отправляет управляющему модулю при любом действии пользователя
  • параметр - целое число, информация, которую веб-интерфейс передаёт управляющему модулю
  • бинарный атрибут (параметр) - атрибут (параметр), принимающий значения только "0" и "1" (напр., кнопка)
  • числовой атрибут (параметр) - атрибут (параметр), принимающий значения от 0 до 65535 (напр., слайдер)


Структура

Файл описания веб-интерфейса содержит один корневой элемент webface. Внутри этого элемента должны быть обязательные элементы settings и pages. Элемент settings содержит вложенные элементы, задающие общую информацию об интерфейсе: разрешение экрана, параметры связи с контроллером и т. п. Элемент pages содержит описание страниц и навигации между страницами. Общий вид файла выглядит так:

<?xml version="1.0" encoding="UTF-8"?>
<webface>
  <settings>
    (элементы настроек)
  </settings>
  <pages>
    (элементы страниц)
  </pages>
</webface>

Настройки

Протокол 1.0

Элемент settings, включает в себя элементы:

  • resolution - обязательный, определяет вьюпорт браузера, атрибуты:
    • width и height - обязательные, размер вьюпорта в пикселях;
  • browsertitle - заголовок браузера, один атрибут value;
  • baseurl - ссылка на интерфейс, один атрибут src;
  • daemon - обязательный, адрес и порт контроллера, атрибуты ip, port и eventrate (минимальная пауза между событиями в мс, необязателен, по умолчанию 100);
  • update - настройки связи с контроллером, параметры refresh (период обновления данных в миллисекундах, 0 - не обновлять), reconnect (период повторной попытки связи при неответе контроллера), quiet (1 - не пытаться связаться с контроллером при активации видимых элементов);
  • defaults - атрибуты, присваиваемые по умолчанию всем страницам (напр., фоновый рисунок);

Протокол 2.0

В протоколе 2.0 существенно изменён механизм работы сервера. Для корректной работы нескольких веб-интерфейсов на одном сервере один из них должен быть назначен мастером, его открытие запускает веб-сервер (т. е., пока не откроется хотя бы один мастер-интерфейс, все остальные интерфейсы на этом сервере будут выдавать ошибку соединения). Кроме того, веб-интерфейсы могут работать с базой данных. Соединение между клиентом и сервером поддерживается постоянно, т. о. параметры частоты обновления теряют смысл.

Элемент settings, включает в себя элементы:

  • resolution - обязательный, определяет вьюпорт браузера, атрибуты:
    • width и height - обязательные, размер вьюпорта в пикселях;
    • fullscreen - необязательный, при старте развернуть браузер в полноэкранный режим;
  • server - необязательный (по умолчанию localhost/44480/1000), определяет доступ к web-серверу, атрибуты:
    • host - IP адрес или URL;
    • port - порт TCP;
    • start - запуск сервера (мастер-интерфейс), должен быть "1" только у одного интерфейса на сервере (либо у интерфейсов, которые гарантированно не будут запущены одновременно);
    • ping - интервал пингования в миллисекундах для контроля соединения;
  • daemon - обязателен только для мастер-интерфейса, в прочих игнорируется, атрибуты:
    • host - IP или URL демона;
    • port - TCP порт демона;
  • mysql - данные доступа к серверу базы данных, атрибуты:
    • host - IP или URL сервера;
    • database - имя базы данных;
    • user - имя пользователя;
    • pass - пароль;


Пример:

<settings>
  <resolution width="1280" height="720" />
  <browsertitle value="WEB MORDA" />
  <baseurl src="http://192.168.1.1/webface" />
  <daemon ip="192.168.1.110" port="44440" eventrate="150" />
  <update refresh="250" reconnect="2000" />
  <defaults background-image-url="img/back.png" />
</settings>

Страницы

Все видимые элементы группируются в страницы (элементы page). У элемента page один обязательный атрибут id, необязательный 2.0 nonav (установленный в 1 отключает на странице область навигации, установка в 0 не имеет смысла). Для переключения страниц служит (необязательная) область навигации (элемент navigation), описывается до всех страниц. Область навигации и страницы группируются в элемент pages. Область навигации отображается всегда, элементы, принадлежащие страницам, меняют видимость в зависимости от выбранной страницы. Область навигации может содержать кнопки переключения на предыдущую/следующую страницы (элементы pageleft и pageright), может содержать кнопки прямого выбора страницы (элемент bookmark). Описание элементов pageleft, pageright и bookmark аналогично элементам lightbox (см. ниже). Элементы bookmark содержат также обязательный атрибут link, значением которого определяется id страницы, на которую ведёт кнопка.

Пример области навигации:

  <navigation>
    <pageleft width="140" height="210" left="125" top="1100">
      <label text="ПРЕД" style="pagesel" />
      <image state="0" src="img/pn.left.inact.png" />
      <image state="1" src="img/pn.left.act.png" />
      <image state="unavailable" src="img/pn.right.unav.png" />
    </pageright>
    <bookmark link="page_power" width="140" height="210" left="335" top="1100">
      <label text="" style="pagesel" />
      <image state="0" src="img/obs.surf.power.inact.png" />
      <image state="1" src="img/obs.surf.power.act.png" />
    </bookmark>
    <bookmark link="page_preset" width="140" height="210" left="545" top="1100">
      <label text="" style="pagesel" />
      <image state="0" src="img/obs.surf.picture.inact.png" />
      <image state="1" src="img/obs.surf.picture.act.png" />
    </bookmark>
    <pageright width="140" height="210" left="755" top="1100">
      <label text="СЛЕД" style="pagesel" />
      <image state="0" src="img/pn.right.inact.png" />
      <image state="1" src="img/pn.right.act.png" />
      <image state="unavailable" src="img/pn.right.unav.png" />
    </pageright>
  </navigation>

Видимые элементы

Каждый ВЭ описывается элементом XML, имеющим минимальный (обязательный) набор атрибутов:

  • уникальный идентификатор (текстовый атрибут id);
  • размеры (целочисленные атрибуты width и height);
  • положение (целочисленные атрибуты left и top);
  • подсказка (текстовый атрибут hint) - текст, всплывающий при наведении мыши на видимый элемент.

Каждый ВЭ должен включать в себя как минимум один вложенный элемент, определяющий изображение нулевого видимого состояния, в этом состоянии элемент отображается при загрузке. Изображения описываются пустым элементом image с двумя атрибутами: целочисленным значением видимого состояния и текстовой ссылкой на соответствующее ему изображение:

<image state="0" src="/assets/images/but1_rel.jpg" /> 

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

ВЭ может включать в себя элементы других видимых состояний. Максимальное количество видимых состояний - 256 (для большинства видимых элементов определение более трёх видимых состояний не имеет смысла, см. ниже).

Все видимые элементы могут иметь необязательные атрибуты:

  • visible: установленный в 0 он приводит к тому, что видимый элемент не отображается на странице до тех пор, пока не будет получено обновление с иным состоянием, по умолчанию все элементы видимы, установка атрибута visible="1" не имеет смысла, но не запрещена;
  • state: определяет состояние видимого элемента при загрузке страницы (до получения первого обновления состояния от управляющего модуля), валидные значения - числа, соответствующие наборе состояний, или unavailable для управляющих ВЭ (см. ниже).

Управляющие ВЭ

Видимые элементы, при нажатии на которые происходят какие-то события, называются управляющими (кнопки и т. п.). Некоторые ВЭ могут принимать недоступное состояние, единственное его отличие от остальных - в недоступном состоянии элемент не реагирует на нажатия. Изображение недоступного состояния определяется вложенным элементом image с атрибутом state="unavailable":

<image state="unavailable" src="/assets/images/but1_unav.jpg" />

При его отсутствии для недоступного состояния будет использовано изображение состояния 0, что категорически не рекомендуется, т. к. в этом случае пользователь не будет знать о том, что элемент недоступен, и с его точки зрения интерфейс будет "глючить" (он нажимает на кнопку, и ничего не происходит).

При установке атрибута visible="0" управляющие ВЭ также не реагируют на нажатия в своей области экрана.

Управляющие ВЭ могут иметь атрибут available, определяющий доступность элемента при загрузке страницы. По умолчанию все элементы доступны, установка в 1 не имеет смысла, но не запрещена.

Все управляющие ВЭ при их активации (нажатие/перетаскивание) формируют события для управляющего модуля. В событии передаётся как минимум один параметр - текущее состояние ВЭ. Управляющий модуль может самостоятельно менять состояние видимых элементов.

Возвратная кнопка (pushbutton)

Кнопка, меняющее своё видимое состояние и параметр только пока сохраняется нажатие. Элемент pushbutton. Формирует события с одним бинарным параметром при нажатии и отпускании кнопки. Вложенные элементы - изображения состояний. Недоступное состояние поддерживается. Для кнопок (как залипающих, так и возвратных) могут быть определены дополнительные изображения видимых состояний, которые может активировать управляющий модуль (напр., для конференц-системы - мигающий микрофон, сигнализирующий о поступлении запроса на выступление).

Может иметь атрибут behavoir, принимающий единственное валидное значение store. Атрибут влияет на поведение кнопки в случаях, когда у неё может быть более двух активных состояний. При установке этого атрибута кнопка после нажатия вернётся не в состояние 0, а в то, которое было до нажатия. Пример:

<pushbutton id="but1" available="0" width="30" height="30" left="10" top="60" behavior="store">
  <image state="0" src="/assets/images/but1_rel.jpg" />
  <image state="1" src="/assets/images/but1_prs.jpg" />
  <image state="unavailable" src="/assets/images/but1_unav.jpg" />
</pushbutton>

Параметр события один - состояние нажатости (1/0).

Параметр состояния один - видимое состояние либо unavailable либо invisible.

Залипающая кнопка (checkbox)

Кнопка, меняющее своё видимое состояние и параметр при каждом нажатии. Элемент checkbox. Формирует событие с одним бинарным параметром только при нажатии. Вложенные элементы - изображения состояний. Недоступное состояние поддерживается. Для кнопок (как залипающих, так и возвратных) могут быть определены дополнительные изображения видимых состояний, которые может активировать управляющий модуль (напр., для конференц-системы - мигающий микрофон, сигнализирующий о поступлении запроса на выступление).

Может иметь атрибут behavoir, валидные значения - 0, 1 и store. Атрибут влияет на поведение кнопки в случаях, когда у неё может быть более двух активных состояний. Установка этого атрибута в 0 или 1 определяет, в какое состояние перейдёт кнопка после нажатия в состояниях, отличных от 0/1. При установка атрибута в store кнопка запоминает предыдущее "физическое" состояние (0 или 1), которое было у неё до получения нового состояния от управляющего модуля, и при нажатии реагирует соответственно этому состоянию (если было 0, переходит в 1). Таким образом, при нажатии залипающая кнопка в любом случае переходит в состояния 0/1, вернуть её в другое состояние можно только принудительно через управляющий модуль. Пример:

<checkbox id="but1" width="30" height="30" left="10" top="60" state="1" behavior="1">
  <image state="0" src="/assets/images/but1_rel.jpg" />
  <image state="1" src="/assets/images/but1_prs.jpg" />
  <image state="2" src="/assets/images/but1_blnk.jpg" />
  <image state="unavailable" src="/assets/images/but1_unav.jpg" />
</checkbox>

Параметр события один - состояние нажатости (1/0).

Параметр состояния один - видимое состояние либо unavailable либо invisible.

Группа радиокнопок (radiogroup/radiobutton)

Группа кнопок, из которых нажатой может быть только одна (либо ни одной). Элемент radiogroup сам по себе не является видимым элементом, поэтому не имеет атрибутов размера и положения, но имеет необязательные дополнительные атрибуты:

  • default - кнопка, нажатая по умолчанию (целое число), при отсутствии по умолчанию будет нажата кнопка 1, чтобы при загрузке ни одна кнопка не была нажата - установить default="0" и не определять кнопку с значением 0
  • alloff - числовой, определяет возможность состояния, когда ни одна кнопка не нажата; значение параметра определяет значение группы кнопок в состоянии, когда ни одна кнопка не нажата

Если не определён атрибут alloff, одна из радиокнопок будет нажата всегда (исключение - при загрузке с default="0"). Если атрибут alloff определён, при нажатии на активную кнопку она перейдёт в ненажатое состояние, и группа сформирует событие с значением этого атрибута. Если определить радиокнопку с значением, совпадающим с значением атрибута alloff, при нажатии на активную радиокнопку будет активирована эта кнопка (alloff).

Элемент radiogroup может содержать неограниченное (ограничение архитектуры - 65535) количество элементов radiobutton (радиокнопок). Нажатой может быть только одна кнопка из группы, при нажатии любой другой все остальные принимают ненажатое видимое состояние. Кнопки радиогруппы принимают 3 видимых состояния (0/1/unavailable). При нажатии на уже нажатую кнопку либо ничего не происходит (в случае когда alloff не определён), либо группа передаёт событие с значением атрибута alloff. Радиокнопки описываются аналогично залипающим, только не имеют собственного id, вместо него — атрибут value, определяющий значение параметра группы. Формирует событие с одним числовым параметром только при нажатии на какую-либо из кнопок.

Пример:

<radiogroup id="radio1" default="2">
  <radiobutton value="1" width="25" height="25" left="250" top="60">
    <image state="0" src="/assets/images/rad1_rel.jpg" />
    <image state="1" src="/assets/images/rad1_prs.jpg" />
  </radiobutton>
  <radiobutton value="2" width="25" height="25" left="250" top="100">
    <image state="0" src="/assets/images/rad2_rel.jpg" />
    <image state="1" src="/assets/images/rad2_prs.jpg" />
  </radiobutton>
  <radiobutton value="3" width="25" height="25" left="250" top="140">
    <image state="0" src="/assets/images/rad3_rel.jpg" />
    <image state="1" src="/assets/images/rad3_prs.jpg" />
  </radiobutton>
</radiogroup>

Параметр события один - значение нажатой кнопки или атрибута alloff.

Параметр состояния один - значение нажатой кнопки. Если значение совпадает с alloff - все кнопки будут выключены, если кнопки с таким значением нет - ничего не произойдёт.

Изменить видимое состояние отдельной радиокнопки можно кадром обновления, в котором после id группы радиокнопок через двоеточие будет добавлено значение кнопки, с одним параметром - номером состояния либо unavailable либо invisible:

radio1:2
unavailable

Слайдер (slider)

Движковый регулятор. Элемент slider. Должен содержать описание изображения состояния "0", определяющее видимое состояние слайдера при значении параметра 0. Должен содержать как минимум один из вложенных элементов, описывающих изображение состояния "1" (state="1"), и изображение-спрайт, помещаемое в точку, соответствующую текущему значению параметра (state="sprite"). На странице слайдер представляется в виде "нарезки" изображений в зависимости от значения параметра слайдера. Например, при значении 19660 (30%) в одной части слайдера отображается треть изображения состояния "0", в оставшейся части отображается часть изображения состояния "1", при наличии спрайта он отображается в точке пересечения изображений "0" и "1" (см. ниже). Формирует событие с одним параметром при нажатии либо движении (перетаскивании). Недоступное состояние не поддерживается. 2.0 Поддерживается недоступное состояние, в нём отображается только фоновое изображение, спрайт (если был) исчезает.

Может иметь атрибуты min и max, определяющий диапазон значений слайдера (по умолчанию 0-65535).

Может иметь атрибут value, определяющий положение спрайта при загрузке страницы (до получения первого обновления от управляющего модуля).

Может иметь атрибут step, задающий шаг изменения значения слайдера. Используется, например, в случаях, если слайдер управляет каналом DMX, принимающим значения 0-255. В этом случае установка step="255" не повлияет на точность управления, но позволит существенно сократить нагрузку на каналы передачи данных и процессора за счёт уменьшения количества сообщений от веб-интерфейса.

Может содержать атрибут orient, принимающий значения "horizontal" и "vertical". Определяет ориентацию (вертикальный/горизонтальный) слайдера. Значение атрибута по умолчанию - "horizontal", т. е., при изменении значения параметра от 0 до 65535 спрайт будет двигаться от крайнего левого до крайнего правого положения, соответственно, левее спрайта будет отображена часть изображения состояния "0", правее спрайта - часть изображения состояния "1". Слайдер с orient="horizontal" будет выглядеть так:

Изображение слайдера в состоянии "0": Sl0.jpg

Изображение слайдера в состоянии "1": Sl1.jpg

Изображение спрайта: Slf.jpg

Визуальное представление слайдера c двумя состояниями без спрайта при значении параметра 19660 (30%): Slwof.jpg

Визуальное представление слайдера c одним состоянием и спрайтом при значении параметра 19660 (30%): Slwf.jpg

Визуальное представление слайдера c двумя состояниями и спрайтом при значении параметра 19660 (30%): Slwf2.jpg

Пример описания слайдера:

<slider id="slider1" width="320" height="82" left="100" top="100">
  <image state="0" src="assets/images/sl0.jpg" />
  <image state="1" src="assets/images/sl1.jpg" />
  <image state="sprite" src="assets/images/slf.jpg" />
</slider>

Рокер (rocker)

Слайдер, после отпускания возвращающийся в среднюю позицию (значение параметра 32767). Элемент rocker, описание полностью аналогично slider.

Пэд (pad)

Элемент pad, фактически - двухмерный слайдер. Прямоугольная область дисплея, при нажатии/движении передающая 2 параметра: X и Y в диапазоне 0-65535. Только одно видимое состояние (фон пэда), может быть определён спрайт (отображается центрированным по текущим значениям параметров). Дополнительных атрибутов нет. Недоступное состояние не поддерживается. Пример описания пэда:

<pad id="pad1" width="320" height="320" left="100" top="100">
  <image state="0" src="assets/images/pad.jpg" />
  <image state="sprite" src="assets/images/slf.jpg" />
</pad>

Джойстик (joystick)

Пэд, после отпускания возвращающийся в центральную позицию (32768/32768). Элемент joystick, описание полностью аналогично pad.

Поле ввода (input)

Лайтбокс с дополнительным функционалом: ввод текстовой информации. При нажатии на него в нём появляется курсор, с аппаратной или экранной клавиатуры можно ввести любой текст. При нажатии Enter передаёт событие с введённой строкой, любые другие варианты перемещения фокуса с элемента (ESC, TAB, нажатие за пределами) считаются отменой, в поле возвращается прежний текст, событие не инициируется.

Информационные видимые элементы

Надпись (lightbox)

Элемент lightbox, универсальный информационный элемент. Может иметь несколько видимых состояний, может отображать динамически обновляемый текст (вложенный элемент label) на фоне изображения. Атрибуты элемента label:

  • text - текст, отображаемый при запуске интерфейса
  • align - выравнивание по горизонтали, значения "left"/"center"/"right", по умолчанию "center"
  • valign - выравнивание по вертикали, значения "top"/"middle"/"bottom", по умолчанию "middle"

Лайтбокс может иметь атрибут popup, значение атрибута - id модального окна для ввода значения в лайтбокс (см. метаэлементы).

Пример описания:

<lightbox id="label1" width="180" height="30" left="10" top="150">
  <image state="0" src="/assets/images/lbl1_blu.jpg" />
  <image state="1" src="/assets/images/lbl1_red.jpg" />
  <image state="2" src="/assets/images/lbl1_yel.jpg" />
  <label text="Label" align="left" valign="middle" />
</lightbox>

Уровень (gauge)

Элемент gauge. Графическое отображение значения в диапазоне 0-65535. Описание и функционирование полностью аналогично слайдеру, за исключением того, что не генерирует событие при нажатии.

Видео

Элемент movie, отображает видеопоток по URI. Может иметь несколько видимых состояний. Состояние 0 желательно использовать для индикации отсутствия видео, назначив ему статичное изображение вложенным элементом с атрибутом state="0", при его отсутствии в состоянии 0 будет отображается чёрный прямоугольник. Различные изображения либо URI могут быть привязаны к различным видимым состояниям вложенными элементами source, для каждого из них задаётся атрибут player, обозначающий тип модуля воспроизведения. Пример описания:

<movie id="stream1" width="180" height="90" left="300" top="150">
  <source state="0" player="picture" src="/assets/images/novideo.jpg" />
  <source state="1" player="http264" src="http://192.168.1.112:7770" />
  <source state="2" player="rtsp264" src="rtsp://192.168.1.112:7770" />
</movie>

В настоящее время поддерживаются модули воспроизведения "picture" (файлы hpg/png/gif/bmp), "http264" и "rtsp264" (потоки в кодировке H.264 по протоколам HTTP и RTSP).

Метаэлементы

Видимые элементы, включающие в себя другие видимые элементы.

Модальное окно

Элемент popup. Мини-страница, отображаемая поверх основной страницы, и блокирующая элементы основной страницы до своего закрытия. Внутри модального окна располагаются видимые элементы, их координаты считаются от левого верхнего угла модального окна. Практическое применение - диалоги ввода. Пример модального окна для выбора режима работы конференц-системы:

<popup id=”pu_mode” width=”150” height=”350”>
	<radiogroup id="/~conference/mode" default="2" modal=”close”>
		<radiobutton value="1" width="190" height="64" left="10" top="10">
			<image state="0" src="img/bt.free.inact.png" />
			<image state="1" src="img/bt.free.act.png" />
		</radiobutton>
		<radiobutton value="2" width="190" height="64" left="10" top="74">
			<image state="0" src="img/bt.fifo.inact.png" />
			<image state="1" src="img/bt.fifo.act.png" />
		</radiobutton>
		<radiobutton value="3" width="190" height="64" left="10" top="138">
			<image state="0" src="img/bt.lim.inact.png" />
			<image state="1" src="img/bt.lim.act.png" />
		</radiobutton>
		<radiobutton value="4" width="190" height="64" left="10" top="202">
			<image state="0" src="img/bt.req.inact.png" />
			<image state="1" src="img/bt.req.act.png" />
		</radiobutton>
	</radiogroup>
</popup>

Открытие модального окна осуществляется только нажатием на лайтбокс с заданным атрибутом popup, окно запоминает id вызвавшего элемента. Видимые элементы модального окна не передают событий, за исключениями, описанными ниже.

Закрытие модального окна осуществляется:

  • нажатием мышью/пальцем в любом месте за пределами окна, либо клавиша ESC, либо активация видимого элемента, у которого определен атрибут modal=”cancel” - без передачи какого-либо события;
  • активацией видимого элемента, у которого определен атрибут modal=”close”, в этом случае передаётся событие c id вызвавшего popup элемента (запомненным) вместо id активированного видимого элемента.

Таблица (table)

Элемент table. Отображается в прямоугольнике заданных размеров, при необходимости появляется вертикальная полоса прокрутки внутри прямоугольника. Атрибуты:

  • rowheight - высота строки таблицы в пикселях;
  • rowcount - количество строк в таблице;
  • 2.0 rowstatic - статичный диапазон таблицы;
  • 2.0 rowdefault - количество строк динамического диапазона, отображаемый при загрузке.

Реально отображаемое количество строк может варьироваться в реальном времени. Атрибут rowcount="n" определяет максимальное количество строк динамического диапазона таблицы (динамический диапазон 1 - n). 2.0 Атрибут rowstatic="s" определяет количество строк статичного диапазона таблицы (статичный диапазон n+1 - s). Например, при установке rowcount="160" rowstatic="180" rowdefault="32" при загрузке страницы в таблице будут отображаться строки 1-32 и 161-180.

Строка таблицы описывается как мини-страница, вложенная в элемент table, с расположением внутри размеров одной строки всех видимых элементов строки. Размеры строки - ширина как у элемента 'table' (минус ширина полосы прокрутки), высота задаётся атрибутом rowheight. Атрибуты расположения элементов строки считаются от левого верхнего угла строки. Пример синтаксиса (для веб-морды TKR-E):

<table id=“tab1” width= height= left= top= rowheight=”20” rowcount=”50”>
	<lightbox id=”number” width=”30” height=”16” left=”0” top=”2”>
	</lightbox>
	<checkbox id="mvip" width="20" height="20" left=”30” top=”0”>
		<image state="0" src="img/mvip_unact.png" />
		<image state="1" src="img/mvip_act.png" />
	</checkbox>
	<inputd id=”mlink” each=”0” width=”40” height=”20” left=”50” top=”0”>
		<image state="0" src="img/minp_unact.png" />
		<image state="1" src="img/minp_act.png" />
	</input>
	<inputd id=”mpreset” each=”0” width=”40” height=”20” left=”90” top=”0”>
		<image state="0" src="img/minp_unact.png" />
		<image state="1" src="img/minp_act.png" />
	</input>
	<radiogroup id=”mcam” default=“1”>
		<radiobutton value="1" width="20" height="20" left="130" top="0">
			<image state="0" src="img/mcam1_unact.png" />
			<image state="1" src="img/mcam1_act.png" />
		</radiobutton>
		<radiobutton value="2" width="20" height="20" left="150" top="0">
			<image state="0" src="img/mcam2_unact.png" />
			<image state="1" src="img/mcam2_act.png" />
		</radiobutton>
		<radiobutton value="3" width="20" height="20" left="170" top="0">
			<image state="0" src="img/mcam3_unact.png" />
			<image state="1" src="img/mcam3_act.png" />
		</radiobutton>
		<radiobutton value="4" width="20" height="20" left="190" top="0">
			<image state="0" src="img/mcam4_unact.png" />
			<image state="1" src="img/mcam4_act.png" />
		</radiobutton>
	</radiogroup>
</table>

EVENT для элемента строки выглядит так же, как обычного элемента, только вторая строка вместо ID элемента представляет собой OSC-путь из ID таблицы, ID элемента и номера строки, разделённых “/” и начинающийся с “~table” (аналогичным образом формируются id для обновлений):

EVENT
/~table/tab1/mvip/6
1
1
<CRLF>

Параметров состояния таблицы два: первая и последняя строка отображаемого динамического диапазона.

2.0 Предусмотрена возможность автоматического вывода в лайтбоксе номера строки, для этого значением атрибута text элемента label лайтбокса нужно указать $linenum. Это не отменяет функционал лайтбокса, при поступлении обновления текста он заменяется.

Сервисные метаэлементы

Метаэлементы, вложенные элементы которых:

  • имеют предопределённые id
  • не формируют событий
  • осуществляют некие предопределённые действия внутри метаэлемента.

Экранная клавиатура

Частный случай модального окна - экранная клавиатура. Видимым элементам рекомендуется задавать id вида ”/~kbd/<имя клавиатуры>/<идентификатор>”. <имя клавиатуры> не должно совпадать с id модального окна, это как бы текстовый идентификатор фильтра (digital, time и т. п.). id видимых элементов ни на что не влияет и нигде не участвует, такая форма упростит чтение кода и поможет избежать путаницы.

Клавиатура должна содержать поле ввода - лайтбокс с заданным атрибутом modal=”result”, в этом лайтбоксе отображаются введённые символы. При активации элемента с заданным атрибутом modal=”ok” модальное окно формирует событие с id вызвавшего его элемента (запомненным) и текстом этого лайтбокса.

Клавиатура содержит кнопки, которые вводят значения в поле ввода, этим кнопкам задаются атрибуты modal=”<символ>”. Разрешённые символы: 0-9, точка, минус. Такие кнопки не передают событий, а только меняют значение предопределённого input. Фильтр-шаблон реализуется плагином masked input, задаётся опциональными свойствами модального окна mask и placeholder. Кнопка с заданным атрибутом modal=”bs” удаляет последний введённый символ.

Видимые элементы, у которых не определён атрибут modal, работают как обычные видимые элементы.

Пример цифровой клавиатуры для ввода времени (размеры и координаты для простоты не указаны):

<popup id=”popup_time” mask=”99:99” placeholder=”чч:мм”>
	<pushbutton id=”/~kbd/time/0” modal=”0”>
		<image state="0" src="img/digits/0.png" />
		<image state="1" src="img/digits/0.act.png" />
	</pushbutton>
	…
	<pushbutton id=”/~kbd/time/9” modal=”9”>
		<image state="0" src="img/digits/9.png" />
		<image state="1" src="img/digits/9.act.png" />
	</pushbutton>
	<pushbutton id=”/~kbd/digital/bs” modal=”bs”>
		<image state="0" src="img/digits/backspace.png" />
		<image state="1" src="img/digits/backspace.act.png" />
	</pushbutton>
	<pushbutton id=”/~kbd/digital/ok” modal=”ok”>
		<image state="0" src="img/digits/ok.png" />
		<image state="1" src="img/digits/ok.act.png" />
	</pushbutton>
	<lightbox id="/~kbd/digital/result"  modal=”result”>
		<image state="0" src="img/kbd/input.png" />
		<label text="чч:мм" align="left" valign="middle" />
		<style state="0" style="label" />
	</lightbox>
</popup>