Экраны/en — различия между версиями

Материал из WebHMI Wiki
Перейти к: навигация, поиск
(Новая страница: «== Creating dashboards == In WEBHMI, screens or dashboards (Dashboards) are analogous to screens for operator panels or graphic screens in SCADA systems. You can…»)
 
(не показано 17 промежуточных версий этого же участника)
Строка 1: Строка 1:
 +
<languages/>
 
== Creating dashboards ==
 
== Creating dashboards ==
 
 
In WEBHMI, screens or dashboards (Dashboards) are analogous to screens for operator panels or graphic screens in SCADA systems. You can create multiple screens that will be available after you create the '''Dashboard''' menu. For example, create the 'Dashboard 1' screen, using the menu item 'Configuration / Screens Setup / Dashboards'.<br>
 
In WEBHMI, screens or dashboards (Dashboards) are analogous to screens for operator panels or graphic screens in SCADA systems. You can create multiple screens that will be available after you create the '''Dashboard''' menu. For example, create the 'Dashboard 1' screen, using the menu item 'Configuration / Screens Setup / Dashboards'.<br>
 
[[Файл:Создать панель.png|800px]]
 
[[Файл:Создать панель.png|800px]]
 
<br>
 
<br>
  
Перейти к визуальному редактору экрана можно двумя способами: нажав кнопку в списке приборных панелей, либо нажав кнопку, находясь на ее странице.<br>
+
Go to the visual editor of the screen in two ways: by clicking the button in the list of dashboards, or by clicking the button, while on its page.<br>
 
[[Файл:Edit via list.png|600px]]<br>
 
[[Файл:Edit via list.png|600px]]<br>
  
или так:<br>
+
or so:<br>
 
[[Файл:Edit option 2.png|800px]]<br> <br>
 
[[Файл:Edit option 2.png|800px]]<br> <br>
  
Внешний вид новой панели в режиме редактирования:<br>
+
Appearance of the new dashboard panel in the editing mode:<br>
 
[[Файл:Empty dash.png|800px]]<br><br>
 
[[Файл:Empty dash.png|800px]]<br><br>
После этого можно приступить к компоновке элементов визуализации на приборной панели. Необходимые элементы помещаются на поле их "перетаскиванием" c панели инструментов.  
+
After that, you can proceed with the layout of the visualization elements on the dashboard. The necessary elements are placed on the field by 'dragging' them from the toolbar.
<p>Панель инструментов имеет 3 вкладки:  
+
<p>The toolbar has 3 tabs:  
::'''Controls''' - список элементов управления
+
::'''Controls''' - list of controls
::'''Properties''' - свойства текущего редактируемого элемента
+
::'''Properties''' - properties of the currently edited item
::'''Group''' - групповые операции, активируется при выборе более двух элементов 
+
::'''Group''' - group operations, is activated when more than two items are selected
 
</p>
 
</p>
После выделения группы, доступны следующие виды операций через вкладку ''Group'':<br>
+
After selecting a group, the following operations are available through the tab ''Group'':<br>
 
[[Файл:Выравнивание.png|400 px]] <br>
 
[[Файл:Выравнивание.png|400 px]] <br>
Доступны следующие виды элементов визуализации:  
+
The following kinds of visualization elements are available:
::'''Индикатор - светодиод'''
+
::'''Indicator - LED'''
::'''Текст'''
+
::'''Text'''
::'''Поле редактирования текста'''  
+
::'''Text edit box'''  
::'''Изображения'''
+
::'''Images'''
::'''Видео-потоки'''  
+
::'''Video - streams'''  
::'''Кнопки'''  
+
::'''Buttons'''  
::'''Индикатор прогресса'''  
+
::'''Progress indicators'''  
::'''Датчик'''  
+
::'''Gauge'''  
::'''Слайдер'''
+
::'''Slider'''
::'''Группа'''  
+
::'''Group'''  
::'''Таблица сообщений'''  
+
::'''Message table'''  
::'''Тренд'''
+
::'''Trends'''
Поле редактирования имеет сетку с шагом 40 пикселей (шаг можно переопределить в свойствах экрана), по которой будут выравниваться элементы. При необходимости выровнять объект более точно, это можно сделать удерживая ''Shift''.
+
The editing field has a grid with a step of 40 pixels (the grid step can be redefined in the properties of the screen), by which the elements will be aligned. If necessary, align the object more accurately, this can be done by holding '' Shift ''.
<p> При редактировании поддерживаются следующие "горячие клавиши" - <br>
+
''Ctrl+A'' (выделить все), ''Ctrl+C'' (копировать), ''Ctrl+V'' (вставить), ''Ctrl+X'' (вырезать), ''Ctrl+D'' (отмена выбора). Также  можно выделять произвольные элементы с помощью щелчка по нужным элементам с зажатой клавишей ''Ctrl''. </p>
+
  
== Элементы текста ==
+
<p> When editing, the following 'hot keys' are supported - <br>
Элементы текста позволяют разместить на поле приборной панели статический текст, либо значение регистра, либо составляющую их строку. Если в свойствах регистра были определены единицы измерения, то они также отобразятся после значения регистра. Установка атрибута "Разрешить изменять значение (Allow change value)" превращает текст в поле для ввода значения в регистр. Элемент текста также может наследовать цветовую сигнализацию состояния регистра. Имеется 5 вариантов размера шрифта (в относительных единицах) и 5 слоев (слой с большим номером находится ближе к пользователю смотрящему на экран). Текст может также быть удобной ссылкой на другую приборную панель, тренд или график. См. рис.: <br>
+
''Ctrl+A'' (select all), ''Ctrl+C'' (copy), ''Ctrl+V'' (paste), ''Ctrl+X'' (cut), ''Ctrl+D'' (cancel selection). Also, you may select control elements with the clicking on desired elements with ''Ctrl'' pressed.</p>
 +
 
 +
== Text elements ==
 +
Elements of the text allow placing them on the dashboard either as a static text (or register value), or the line that makes up them. If there are units of measurement in register properties, they will also be displayed after the value of the register. Setting the 'Allow change value' attribute turns the text into a field for entering a value into the register. A text element can also inherit color signaling of the state of the register. There are 5 variants of font size (in relative units) and 5 layers (the layer with the larger number is closer to the user looking at the screen). Text can also be a convenient reference to another dashboard, trend or graph. See Fig .: <br>
 
[[Файл:Текст редактирвоание .png|800px]]<br><br>
 
[[Файл:Текст редактирвоание .png|800px]]<br><br>
  
== Индикаторы - светодиоды (LED)==
+
== Indicators - LED==  
Индикаторы типа LED являются удобным готовым элементом индикации дискретного состояния регистра. Ниже приведено описание его настройки.<br>
+
LED indicators are a convenient ready-made element for indicating the discrete state of the register. Below is a description of its settings.<br>
 
[[Файл:Led .png | 800 px]]
 
[[Файл:Led .png | 800 px]]
  
== Поле ввода ==
+
== Edit box ==
Хотя значения параметров, выведенных на экран в виде текста можно менять с помощью атрибута "разрешить менять значение", иногда пользователю удобнее выделить значения параметров только просмотра и те, значения которых можно менять.  
+
Although the values ​​of parameters displayed on the screen in the form of text can be changed using the attribute 'allow to change the value', sometimes it is more convenient for the user to differentiate the values ​​of the parameters viewed only and those whose values ​​can be changed.  
Поле ввода (Edit box) позволяет задать рамку, фон для таких параметров и высвечивает кнопки записи значения и отмены
+
The edit box allows you to specify a frame, a background for such parameters, and highlights the value and undo buttons.
 
<br clear=all>
 
<br clear=all>
 
[[Файл:Edit box.png | 800 px]]
 
[[Файл:Edit box.png | 800 px]]
  
== Изображения (Images)==
+
== Images==
На приборную панель может быть помещено изображение, содержащееся  в библиотеке изображений. Изображение может выполнять несколько основных функций -  
+
It is possible to put images from the image library onto the dashboard. Image may serve for several functoins -
*просто изображение как элемент визуализации
+
*just an image as visual element
*индикатор состояния объекта - вкл. выкл., отображение цветовой сигнализаци
+
*object state indicator - ON/OFF, color state signalling
*быть элементом управления (кнопкой), когда по нажатию на изображение можно изменить состояние регистра
+
*as a control element, like button, which after being pressed can change register value
*динамический элемент - перемещение по координатам, либо изменение видимости
+
*dynamic element - moving along axis or change visibility
  
Для добавление изображения в библиотеку их надо предварительно загрузить через меню '''Setup/Image library'''.<br>
+
To add an image to the library, they must first be downloaded there via the menu '''Setup/Image library'''.<br>
 
[[Файл:Image adding.png|800px]]<br>
 
[[Файл:Image adding.png|800px]]<br>
  
=== Изображения в роли индикаторов ===
+
=== Images as indicators ===
 
<p>
 
<p>
Одной из функций изображения может быть отображение цветовой сигнализации состояний регистра (states), </p>
+
One of the image functions can be the display of the color signaling of register states(states), </p>
Для того, чтобы все состояния выглядели одинаково во всем проекте, желательно использовать цвета по умолчанию, которые предлагаются при описании состояний (хотя их можно и переопределить). Также желательно производить нормализацию изображений для индикаторов (см. описание опции в разделе "Изображения").  
+
In order for all states to look the same throughout the project, it is desirable to use the default colors that are offered when describing states (although they can also be redefined). It is also desirable to perform normalization of images for indicators (see the description of the option in the 'Images' section).
Пример использования индикатора приведен ниже.  
+
An example of using the indicator is given below.
<p>Индикатором в данном случае является пиктограмма термометра (см. раздел изображения), привязанная к регистру, имеющему настроенные состояния предупреждения. </p>
+
<p>The indicator in this case is the thermometer icon (see the image section), which is tied to a register that has configured alert states. </p>
 +
 
 
[[Файл:Индикатор температура 2.png|800px]] <br> <br>
 
[[Файл:Индикатор температура 2.png|800px]] <br> <br>
Изображение становится индикатором после привязки регистра с настроенной цветовой сигнализацией.
+
The image becomes an indicator after the register is associated with the color alarm set.
  
== Видео-потоки ==
+
== Video streams ==
На приборной панели можно разместить объект видеопотока, который предварительно должен быть настроен в меню Setup/Video Stream. См. рис. ниже:<br>
+
On the dashboard, you can place a video stream object that must previously be configured in the Setup / Video Stream menu. See Fig. below:
 +
<br>
 
[[Файл:Видеопоток.png | 800px]]
 
[[Файл:Видеопоток.png | 800px]]
  
== Кнопки ==
+
== Buttons ==  
Функции кнопок -
+
Button fuctions
*ссылка на другую страницу
+
*link to another page
*запуск скриптов или применение рецептов по нажатию/отпусканию
+
*programs (script) or recipe activation upon press/release
*изменение значения связанного с кнопкой регистра
+
*register value associated with the button
Ниже приведено описание полей для настройки кнопки:
+
Below is a description of the fields for setting the button:
 
<br clear = all>
 
<br clear = all>
 
[[Файл:3Д кнопка без привязки к регистру .png | 800px]] <br>
 
[[Файл:3Д кнопка без привязки к регистру .png | 800px]] <br>
  
== Индикатор прогресса ==
+
== Progress indicators ==
Значения отображаемые этими элементами представляются  в виде столбиковых индикаторов, являющихся удобным графическим представлением величины параметра, позволяющим быстро оценить его текущее значение оператору.
+
The values ​​displayed by these elements are represented in the form of bar indicators, which are a convenient graphical representation of the parameter value, allowing to quickly estimate its current value to the operator.
 
<br clear = all>
 
<br clear = all>
 
[[Файл:Progrerss bar1.png|800px]]
 
[[Файл:Progrerss bar1.png|800px]]
  
== Датчики (Gauges)==
+
== Gauges==
Датчики в целом аналогичны прогресс-бару со следующим отличием - величина в связанном с датчиком регистре влияет на положение ползунка, который находится рядом с основной фигурой. При включении опции ''Colorize'' будет окрашиваться тот участок шкалы, который определен как состояние.  
+
The gauges(sensors) are generally similar to the progress bar with the following difference: the value in the register associated with the sensor affects the position of the slider that is next to the main figure. When the '' Colorize '' option is turned on, the portion of the scale that is defined as the state will be painted.
Настройки датчика аналогичны настройкам элементам прогресс-бара, за исключением одного поля (размер указателя).
+
Sensor settings are similar to the settings for the elements of the progress bar, except for one field (the size of the pointer).
Датчик не отобразит значений, находящихся вне этого диапазона.
+
The sensor will not display values ​​outside this range.
 
<br clear = all>
 
<br clear = all>
 
[[Файл:Датчик создание.png|800px]]
 
[[Файл:Датчик создание.png|800px]]
  
== Слайдеры ==
+
== Sliders==
Слайдер позволяет ввести значение в регистр, двигая ползунок. Настройки приведены на рис.:
+
The slider allows you to enter a value into the register by moving the slider. The settings are shown in Fig.
 
<br clear = all>
 
<br clear = all>
 
[[Файл:Slider.png | 800 px ]]
 
[[Файл:Slider.png | 800 px ]]
  
== Группа==
+
== Group ==  
Группа позволяет выделить рамкой несколько элементов связанных общей функцией , местом или иным образом. Группе также можно задать заголовок, фон, толщину и цвет границы и др. См. рис.: <br>
+
The group allows you to select several elements bound by a common function, place, or otherwise. The group can also specify the title, background, border thickness and color, etc. See Fig .:<br>
 
[[Файл:Группа.png | 800px]]
 
[[Файл:Группа.png | 800px]]
  
== Таблица сообщений ==
+
== Message table ==
Таблица сообщений позволяет выводить на приборной панели сообщения, вывод которых инициируется из скриптов с помощью функций AddInfoMessage, AddWariningMessage, AddAlertMessage (см. [http://wiki.webhmi.com.ua/index.php/Скрипты#AddInfoMessage.28message.2C_userId.29 описание здесь]).
+
The message table allows to output messages generated with the AddInfoMessage, AddWariningMessage, AddAlertMessage (see [http://wiki.webhmi.com.ua/index.php/Скрипты#AddInfoMessage.28message.2C_userId.29 description link]) onto the dashboard.
Настройка таблицы приведена на след. рис.:<br>
+
The table settings are below:<br>
 
[[Файл:Таблица сообщений.png | 800px]] <br>
 
[[Файл:Таблица сообщений.png | 800px]] <br>
Примечание: прокомментированы только свойства, специфичные для таблицы сообщений. Остальные поля описаны в предыдущих разделах.
 
  
== Тренд  для экранов ==
+
== Trend for dashboard ==
Тренд можно также разместить на приборной панели. Данный вид тренда имеет ограничение на количество отображаемых параметров (3 для версии 1.11.0.3491). Панель настройки тренда для дешборда :
+
The trend can also be placed on the dashboard. This type of trend has a limit on the number of displayed parameters (3 for version 1.11.0.3491). Trending panel for the dashboard:
 
<br clear = all>
 
<br clear = all>
 
[[Файл:Тренд.png | 800 px]]
 
[[Файл:Тренд.png | 800 px]]

Текущая версия на 11:19, 23 ноября 2017

Другие языки:
English • ‎русский

Creating dashboards

In WEBHMI, screens or dashboards (Dashboards) are analogous to screens for operator panels or graphic screens in SCADA systems. You can create multiple screens that will be available after you create the Dashboard menu. For example, create the 'Dashboard 1' screen, using the menu item 'Configuration / Screens Setup / Dashboards'.
Создать панель.png

Go to the visual editor of the screen in two ways: by clicking the button in the list of dashboards, or by clicking the button, while on its page.
Edit via list.png

or so:
Edit option 2.png

Appearance of the new dashboard panel in the editing mode:
Empty dash.png

After that, you can proceed with the layout of the visualization elements on the dashboard. The necessary elements are placed on the field by 'dragging' them from the toolbar.

The toolbar has 3 tabs:

Controls - list of controls
Properties - properties of the currently edited item
Group - group operations, is activated when more than two items are selected

After selecting a group, the following operations are available through the tab Group:
Выравнивание.png
The following kinds of visualization elements are available:

Indicator - LED
Text
Text edit box
Images
Video - streams
Buttons
Progress indicators
Gauge
Slider
Group
Message table
Trends

The editing field has a grid with a step of 40 pixels (the grid step can be redefined in the properties of the screen), by which the elements will be aligned. If necessary, align the object more accurately, this can be done by holding Shift .

When editing, the following 'hot keys' are supported -
Ctrl+A (select all), Ctrl+C (copy), Ctrl+V (paste), Ctrl+X (cut), Ctrl+D (cancel selection). Also, you may select control elements with the clicking on desired elements with Ctrl pressed.

Text elements

Elements of the text allow placing them on the dashboard either as a static text (or register value), or the line that makes up them. If there are units of measurement in register properties, they will also be displayed after the value of the register. Setting the 'Allow change value' attribute turns the text into a field for entering a value into the register. A text element can also inherit color signaling of the state of the register. There are 5 variants of font size (in relative units) and 5 layers (the layer with the larger number is closer to the user looking at the screen). Text can also be a convenient reference to another dashboard, trend or graph. See Fig .:
Текст редактирвоание .png

Indicators - LED

LED indicators are a convenient ready-made element for indicating the discrete state of the register. Below is a description of its settings.
Led .png

Edit box

Although the values ​​of parameters displayed on the screen in the form of text can be changed using the attribute 'allow to change the value', sometimes it is more convenient for the user to differentiate the values ​​of the parameters viewed only and those whose values ​​can be changed. The edit box allows you to specify a frame, a background for such parameters, and highlights the value and undo buttons.
Edit box.png

Images

It is possible to put images from the image library onto the dashboard. Image may serve for several functoins -

  • just an image as visual element
  • object state indicator - ON/OFF, color state signalling
  • as a control element, like button, which after being pressed can change register value
  • dynamic element - moving along axis or change visibility

To add an image to the library, they must first be downloaded there via the menu Setup/Image library.
Image adding.png

Images as indicators

One of the image functions can be the display of the color signaling of register states(states),

In order for all states to look the same throughout the project, it is desirable to use the default colors that are offered when describing states (although they can also be redefined). It is also desirable to perform normalization of images for indicators (see the description of the option in the 'Images' section). An example of using the indicator is given below.

The indicator in this case is the thermometer icon (see the image section), which is tied to a register that has configured alert states.

Индикатор температура 2.png

The image becomes an indicator after the register is associated with the color alarm set.

Video streams

On the dashboard, you can place a video stream object that must previously be configured in the Setup / Video Stream menu. See Fig. below:
Видеопоток.png

Buttons

Button fuctions

  • link to another page
  • programs (script) or recipe activation upon press/release
  • register value associated with the button

Below is a description of the fields for setting the button:
3Д кнопка без привязки к регистру .png

Progress indicators

The values ​​displayed by these elements are represented in the form of bar indicators, which are a convenient graphical representation of the parameter value, allowing to quickly estimate its current value to the operator.
Progrerss bar1.png

Gauges

The gauges(sensors) are generally similar to the progress bar with the following difference: the value in the register associated with the sensor affects the position of the slider that is next to the main figure. When the Colorize option is turned on, the portion of the scale that is defined as the state will be painted. Sensor settings are similar to the settings for the elements of the progress bar, except for one field (the size of the pointer). The sensor will not display values ​​outside this range.
Датчик создание.png

Sliders

The slider allows you to enter a value into the register by moving the slider. The settings are shown in Fig.
Slider.png

Group

The group allows you to select several elements bound by a common function, place, or otherwise. The group can also specify the title, background, border thickness and color, etc. See Fig .:
Группа.png

Message table

The message table allows to output messages generated with the AddInfoMessage, AddWariningMessage, AddAlertMessage (see description link) onto the dashboard. The table settings are below:
Таблица сообщений.png

Trend for dashboard

The trend can also be placed on the dashboard. This type of trend has a limit on the number of displayed parameters (3 for version 1.11.0.3491). Trending panel for the dashboard:
Тренд.png