Экраны — различия между версиями
(→Создание экрана) |
|||
| (не показано 26 промежуточных версий этого же участника) | |||
| Строка 1: | Строка 1: | ||
| − | == Создание экрана == | + | <languages/> |
| + | <translate> | ||
| + | == Создание экрана == <!--T:5--> | ||
В WEBHMI экраны или приборные панели (Dashboards) являютcя аналогом экранов для операторских панелей или мнемосхем в SCADA системах. Можно создавать несколько экранов, которые будут доступны после создания в меню '''Экраны (Dashboard)'''. Для примера создадим экран "Приборная панель 1", использую п. меню '''Конфигурация / Экраны Setup/Dashboards'''.<br> | В WEBHMI экраны или приборные панели (Dashboards) являютcя аналогом экранов для операторских панелей или мнемосхем в SCADA системах. Можно создавать несколько экранов, которые будут доступны после создания в меню '''Экраны (Dashboard)'''. Для примера создадим экран "Приборная панель 1", использую п. меню '''Конфигурация / Экраны Setup/Dashboards'''.<br> | ||
[[Файл:Создать панель.png|800px]] | [[Файл:Создать панель.png|800px]] | ||
<br> | <br> | ||
| − | Перейти к | + | <!--T:6--> |
| − | [[Файл:Edit via list.png| | + | Перейти к визуальному редактору экрана можно двумя способами: нажав кнопку в списке приборных панелей, либо нажав кнопку, находясь на ее странице.<br> |
| + | [[Файл:Edit via list.png|600px]]<br> | ||
| + | <!--T:7--> | ||
или так:<br> | или так:<br> | ||
| − | [[Файл:Edit option 2.png| | + | [[Файл:Edit option 2.png|800px]]<br> <br> |
| + | <!--T:8--> | ||
Внешний вид новой панели в режиме редактирования:<br> | Внешний вид новой панели в режиме редактирования:<br> | ||
[[Файл:Empty dash.png|800px]]<br><br> | [[Файл:Empty dash.png|800px]]<br><br> | ||
| Строка 33: | Строка 38: | ||
::'''Таблица сообщений''' | ::'''Таблица сообщений''' | ||
::'''Тренд''' | ::'''Тренд''' | ||
| − | Поле редактирования имеет сетку с шагом 40 пикселей, по которой будут выравниваться элементы. При необходимости выровнять объект более точно, это можно сделать удерживая ''Shift''. | + | Поле редактирования имеет сетку с шагом 40 пикселей (шаг можно переопределить в свойствах экрана), по которой будут выравниваться элементы. При необходимости выровнять объект более точно, это можно сделать удерживая ''Shift''. |
<p> При редактировании поддерживаются следующие "горячие клавиши" - <br> | <p> При редактировании поддерживаются следующие "горячие клавиши" - <br> | ||
''Ctrl+A'' (выделить все), ''Ctrl+C'' (копировать), ''Ctrl+V'' (вставить), ''Ctrl+X'' (вырезать), ''Ctrl+D'' (отмена выбора). Также можно выделять произвольные элементы с помощью щелчка по нужным элементам с зажатой клавишей ''Ctrl''. </p> | ''Ctrl+A'' (выделить все), ''Ctrl+C'' (копировать), ''Ctrl+V'' (вставить), ''Ctrl+X'' (вырезать), ''Ctrl+D'' (отмена выбора). Также можно выделять произвольные элементы с помощью щелчка по нужным элементам с зажатой клавишей ''Ctrl''. </p> | ||
| − | == Элементы текста == | + | == Элементы текста == <!--T:9--> |
| − | Элементы текста позволяют разместить на поле приборной панели статический текст, либо значение регистра, либо составляющую их строку. Если в свойствах регистра были определены единицы измерения, то они также отобразятся после значения регистра. Установка атрибута "Allow change value" превращает текст в поле для ввода значения в регистр. Элемент текста также может наследовать цветовую сигнализацию состояния регистра. Имеется 5 вариантов размера шрифта (в относительных единицах) и 5 слоев (слой с большим номером находится ближе к пользователю смотрящему на экран). Текст может также быть удобной ссылкой на другую приборную панель, тренд или график. См. рис.: <br> | + | Элементы текста позволяют разместить на поле приборной панели статический текст, либо значение регистра, либо составляющую их строку. Если в свойствах регистра были определены единицы измерения, то они также отобразятся после значения регистра. Установка атрибута "Разрешить изменять значение (Allow change value)" превращает текст в поле для ввода значения в регистр. Элемент текста также может наследовать цветовую сигнализацию состояния регистра. Имеется 5 вариантов размера шрифта (в относительных единицах) и 5 слоев (слой с большим номером находится ближе к пользователю смотрящему на экран). Текст может также быть удобной ссылкой на другую приборную панель, тренд или график. См. рис.: <br> |
[[Файл:Текст редактирвоание .png|800px]]<br><br> | [[Файл:Текст редактирвоание .png|800px]]<br><br> | ||
| − | == Индикаторы - светодиоды (LED)== | + | == Индикаторы - светодиоды (LED)== <!--T:10--> |
| − | Индикаторы типа LED являются удобным готовым элементом индикации дискретного состояния регистра. Ниже приведено описание его настройки | + | Индикаторы типа LED являются удобным готовым элементом индикации дискретного состояния регистра. Ниже приведено описание его настройки.<br> |
[[Файл:Led .png | 800 px]] | [[Файл:Led .png | 800 px]] | ||
| − | == Поле | + | == Поле ввода == <!--T:11--> |
| − | Поле | + | Хотя значения параметров, выведенных на экран в виде текста можно менять с помощью атрибута "разрешить менять значение", иногда пользователю удобнее выделить значения параметров только просмотра и те, значения которых можно менять. |
| + | Поле ввода (Edit box) позволяет задать рамку, фон для таких параметров и высвечивает кнопки записи значения и отмены | ||
| + | <br clear=all> | ||
[[Файл:Edit box.png | 800 px]] | [[Файл:Edit box.png | 800 px]] | ||
| − | == Изображения (Images)== | + | == Изображения (Images)== <!--T:12--> |
На приборную панель может быть помещено изображение, содержащееся в библиотеке изображений. Изображение может выполнять несколько основных функций - | На приборную панель может быть помещено изображение, содержащееся в библиотеке изображений. Изображение может выполнять несколько основных функций - | ||
*просто изображение как элемент визуализации | *просто изображение как элемент визуализации | ||
| Строка 56: | Строка 63: | ||
*динамический элемент - перемещение по координатам, либо изменение видимости | *динамический элемент - перемещение по координатам, либо изменение видимости | ||
| + | <!--T:13--> | ||
Для добавление изображения в библиотеку их надо предварительно загрузить через меню '''Setup/Image library'''.<br> | Для добавление изображения в библиотеку их надо предварительно загрузить через меню '''Setup/Image library'''.<br> | ||
[[Файл:Image adding.png|800px]]<br> | [[Файл:Image adding.png|800px]]<br> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | === Изображения | + | === Изображения в роли индикаторов === <!--T:14--> |
<p> | <p> | ||
Одной из функций изображения может быть отображение цветовой сигнализации состояний регистра (states), </p> | Одной из функций изображения может быть отображение цветовой сигнализации состояний регистра (states), </p> | ||
Для того, чтобы все состояния выглядели одинаково во всем проекте, желательно использовать цвета по умолчанию, которые предлагаются при описании состояний (хотя их можно и переопределить). Также желательно производить нормализацию изображений для индикаторов (см. описание опции в разделе "Изображения"). | Для того, чтобы все состояния выглядели одинаково во всем проекте, желательно использовать цвета по умолчанию, которые предлагаются при описании состояний (хотя их можно и переопределить). Также желательно производить нормализацию изображений для индикаторов (см. описание опции в разделе "Изображения"). | ||
Пример использования индикатора приведен ниже. | Пример использования индикатора приведен ниже. | ||
| − | <p>Индикатором в данном случае является пиктограмма термометра (см. раздел изображения), привязанная регистру, имеющему | + | <p>Индикатором в данном случае является пиктограмма термометра (см. раздел изображения), привязанная к регистру, имеющему настроенные состояния предупреждения. </p> |
[[Файл:Индикатор температура 2.png|800px]] <br> <br> | [[Файл:Индикатор температура 2.png|800px]] <br> <br> | ||
| − | Изображение становится индикатором после привязки регистра с цветовой сигнализацией | + | Изображение становится индикатором после привязки регистра с настроенной цветовой сигнализацией. |
| − | == Видео-потоки == | + | == Видео-потоки == <!--T:15--> |
На приборной панели можно разместить объект видеопотока, который предварительно должен быть настроен в меню Setup/Video Stream. См. рис. ниже:<br> | На приборной панели можно разместить объект видеопотока, который предварительно должен быть настроен в меню Setup/Video Stream. См. рис. ниже:<br> | ||
[[Файл:Видеопоток.png | 800px]] | [[Файл:Видеопоток.png | 800px]] | ||
| − | == Кнопки == | + | == Кнопки == <!--T:16--> |
Функции кнопок - | Функции кнопок - | ||
*ссылка на другую страницу | *ссылка на другую страницу | ||
| − | *запуск скриптов по нажатию отпусканию | + | *запуск скриптов или применение рецептов по нажатию/отпусканию |
*изменение значения связанного с кнопкой регистра | *изменение значения связанного с кнопкой регистра | ||
| − | Ниже приведено описание полей для настройки кнопки | + | Ниже приведено описание полей для настройки кнопки: |
| + | <br clear = all> | ||
[[Файл:3Д кнопка без привязки к регистру .png | 800px]] <br> | [[Файл:3Д кнопка без привязки к регистру .png | 800px]] <br> | ||
| − | |||
| − | |||
| − | == Индикатор прогресса == | + | == Индикатор прогресса == <!--T:17--> |
Значения отображаемые этими элементами представляются в виде столбиковых индикаторов, являющихся удобным графическим представлением величины параметра, позволяющим быстро оценить его текущее значение оператору. | Значения отображаемые этими элементами представляются в виде столбиковых индикаторов, являющихся удобным графическим представлением величины параметра, позволяющим быстро оценить его текущее значение оператору. | ||
| + | <br clear = all> | ||
[[Файл:Progrerss bar1.png|800px]] | [[Файл:Progrerss bar1.png|800px]] | ||
| − | == Датчики (Gauges)== | + | == Датчики (Gauges)== <!--T:18--> |
Датчики в целом аналогичны прогресс-бару со следующим отличием - величина в связанном с датчиком регистре влияет на положение ползунка, который находится рядом с основной фигурой. При включении опции ''Colorize'' будет окрашиваться тот участок шкалы, который определен как состояние. | Датчики в целом аналогичны прогресс-бару со следующим отличием - величина в связанном с датчиком регистре влияет на положение ползунка, который находится рядом с основной фигурой. При включении опции ''Colorize'' будет окрашиваться тот участок шкалы, который определен как состояние. | ||
Настройки датчика аналогичны настройкам элементам прогресс-бара, за исключением одного поля (размер указателя). | Настройки датчика аналогичны настройкам элементам прогресс-бара, за исключением одного поля (размер указателя). | ||
Датчик не отобразит значений, находящихся вне этого диапазона. | Датчик не отобразит значений, находящихся вне этого диапазона. | ||
| + | <br clear = all> | ||
[[Файл:Датчик создание.png|800px]] | [[Файл:Датчик создание.png|800px]] | ||
| − | == Слайдеры == | + | == Слайдеры == <!--T:19--> |
Слайдер позволяет ввести значение в регистр, двигая ползунок. Настройки приведены на рис.: | Слайдер позволяет ввести значение в регистр, двигая ползунок. Настройки приведены на рис.: | ||
| + | <br clear = all> | ||
[[Файл:Slider.png | 800 px ]] | [[Файл:Slider.png | 800 px ]] | ||
| − | == Группа== | + | == Группа== <!--T:20--> |
Группа позволяет выделить рамкой несколько элементов связанных общей функцией , местом или иным образом. Группе также можно задать заголовок, фон, толщину и цвет границы и др. См. рис.: <br> | Группа позволяет выделить рамкой несколько элементов связанных общей функцией , местом или иным образом. Группе также можно задать заголовок, фон, толщину и цвет границы и др. См. рис.: <br> | ||
[[Файл:Группа.png | 800px]] | [[Файл:Группа.png | 800px]] | ||
| − | == Таблица сообщений == | + | == Таблица сообщений == <!--T:21--> |
| − | Таблица сообщений позволяет выводить на приборной панели сообщения | + | Таблица сообщений позволяет выводить на приборной панели сообщения, вывод которых инициируется из скриптов с помощью функций AddInfoMessage, AddWariningMessage, AddAlertMessage (см. [http://wiki.webhmi.com.ua/index.php/Скрипты#AddInfoMessage.28message.2C_userId.29 описание здесь]). |
Настройка таблицы приведена на след. рис.:<br> | Настройка таблицы приведена на след. рис.:<br> | ||
[[Файл:Таблица сообщений.png | 800px]] <br> | [[Файл:Таблица сообщений.png | 800px]] <br> | ||
Примечание: прокомментированы только свойства, специфичные для таблицы сообщений. Остальные поля описаны в предыдущих разделах. | Примечание: прокомментированы только свойства, специфичные для таблицы сообщений. Остальные поля описаны в предыдущих разделах. | ||
| − | == Тренд == | + | == Тренд для экранов == <!--T:22--> |
Тренд можно также разместить на приборной панели. Данный вид тренда имеет ограничение на количество отображаемых параметров (3 для версии 1.11.0.3491). Панель настройки тренда для дешборда : | Тренд можно также разместить на приборной панели. Данный вид тренда имеет ограничение на количество отображаемых параметров (3 для версии 1.11.0.3491). Панель настройки тренда для дешборда : | ||
| + | <br clear = all> | ||
[[Файл:Тренд.png | 800 px]] | [[Файл:Тренд.png | 800 px]] | ||
| + | </translate> | ||
Текущая версия на 11:15, 23 ноября 2017
Содержание
Создание экрана
В WEBHMI экраны или приборные панели (Dashboards) являютcя аналогом экранов для операторских панелей или мнемосхем в SCADA системах. Можно создавать несколько экранов, которые будут доступны после создания в меню Экраны (Dashboard). Для примера создадим экран "Приборная панель 1", использую п. меню Конфигурация / Экраны Setup/Dashboards.
Перейти к визуальному редактору экрана можно двумя способами: нажав кнопку в списке приборных панелей, либо нажав кнопку, находясь на ее странице.
или так:
Внешний вид новой панели в режиме редактирования:
После этого можно приступить к компоновке элементов визуализации на приборной панели. Необходимые элементы помещаются на поле их "перетаскиванием" c панели инструментов.
Панель инструментов имеет 3 вкладки:
- Controls - список элементов управления
- Properties - свойства текущего редактируемого элемента
- Group - групповые операции, активируется при выборе более двух элементов
После выделения группы, доступны следующие виды операций через вкладку Group:
Доступны следующие виды элементов визуализации:
- Индикатор - светодиод
- Текст
- Поле редактирования текста
- Изображения
- Видео-потоки
- Кнопки
- Индикатор прогресса
- Датчик
- Слайдер
- Группа
- Таблица сообщений
- Тренд
Поле редактирования имеет сетку с шагом 40 пикселей (шаг можно переопределить в свойствах экрана), по которой будут выравниваться элементы. При необходимости выровнять объект более точно, это можно сделать удерживая Shift.
При редактировании поддерживаются следующие "горячие клавиши" -
Ctrl+A (выделить все), Ctrl+C (копировать), Ctrl+V (вставить), Ctrl+X (вырезать), Ctrl+D (отмена выбора). Также можно выделять произвольные элементы с помощью щелчка по нужным элементам с зажатой клавишей Ctrl.
Элементы текста
Элементы текста позволяют разместить на поле приборной панели статический текст, либо значение регистра, либо составляющую их строку. Если в свойствах регистра были определены единицы измерения, то они также отобразятся после значения регистра. Установка атрибута "Разрешить изменять значение (Allow change value)" превращает текст в поле для ввода значения в регистр. Элемент текста также может наследовать цветовую сигнализацию состояния регистра. Имеется 5 вариантов размера шрифта (в относительных единицах) и 5 слоев (слой с большим номером находится ближе к пользователю смотрящему на экран). Текст может также быть удобной ссылкой на другую приборную панель, тренд или график. См. рис.:
Индикаторы - светодиоды (LED)
Индикаторы типа LED являются удобным готовым элементом индикации дискретного состояния регистра. Ниже приведено описание его настройки.
Поле ввода
Хотя значения параметров, выведенных на экран в виде текста можно менять с помощью атрибута "разрешить менять значение", иногда пользователю удобнее выделить значения параметров только просмотра и те, значения которых можно менять.
Поле ввода (Edit box) позволяет задать рамку, фон для таких параметров и высвечивает кнопки записи значения и отмены
Изображения (Images)
На приборную панель может быть помещено изображение, содержащееся в библиотеке изображений. Изображение может выполнять несколько основных функций -
- просто изображение как элемент визуализации
- индикатор состояния объекта - вкл. выкл., отображение цветовой сигнализаци
- быть элементом управления (кнопкой), когда по нажатию на изображение можно изменить состояние регистра
- динамический элемент - перемещение по координатам, либо изменение видимости
Для добавление изображения в библиотеку их надо предварительно загрузить через меню Setup/Image library.
Изображения в роли индикаторов
Одной из функций изображения может быть отображение цветовой сигнализации состояний регистра (states),
Для того, чтобы все состояния выглядели одинаково во всем проекте, желательно использовать цвета по умолчанию, которые предлагаются при описании состояний (хотя их можно и переопределить). Также желательно производить нормализацию изображений для индикаторов (см. описание опции в разделе "Изображения"). Пример использования индикатора приведен ниже.
Индикатором в данном случае является пиктограмма термометра (см. раздел изображения), привязанная к регистру, имеющему настроенные состояния предупреждения.
Изображение становится индикатором после привязки регистра с настроенной цветовой сигнализацией.
Видео-потоки
На приборной панели можно разместить объект видеопотока, который предварительно должен быть настроен в меню Setup/Video Stream. См. рис. ниже:
Кнопки
Функции кнопок -
- ссылка на другую страницу
- запуск скриптов или применение рецептов по нажатию/отпусканию
- изменение значения связанного с кнопкой регистра
Ниже приведено описание полей для настройки кнопки:
Индикатор прогресса
Значения отображаемые этими элементами представляются в виде столбиковых индикаторов, являющихся удобным графическим представлением величины параметра, позволяющим быстро оценить его текущее значение оператору.
Датчики (Gauges)
Датчики в целом аналогичны прогресс-бару со следующим отличием - величина в связанном с датчиком регистре влияет на положение ползунка, который находится рядом с основной фигурой. При включении опции Colorize будет окрашиваться тот участок шкалы, который определен как состояние.
Настройки датчика аналогичны настройкам элементам прогресс-бара, за исключением одного поля (размер указателя).
Датчик не отобразит значений, находящихся вне этого диапазона.
Слайдеры
Слайдер позволяет ввести значение в регистр, двигая ползунок. Настройки приведены на рис.:
Группа
Группа позволяет выделить рамкой несколько элементов связанных общей функцией , местом или иным образом. Группе также можно задать заголовок, фон, толщину и цвет границы и др. См. рис.:
Таблица сообщений
Таблица сообщений позволяет выводить на приборной панели сообщения, вывод которых инициируется из скриптов с помощью функций AddInfoMessage, AddWariningMessage, AddAlertMessage (см. описание здесь).
Настройка таблицы приведена на след. рис.:
Примечание: прокомментированы только свойства, специфичные для таблицы сообщений. Остальные поля описаны в предыдущих разделах.
Тренд для экранов
Тренд можно также разместить на приборной панели. Данный вид тренда имеет ограничение на количество отображаемых параметров (3 для версии 1.11.0.3491). Панель настройки тренда для дешборда :
