16 343
правки
SVG-Dashboards/en: различия между версиями
Новая страница: «To associate an image svg element with values or events, select it with the mouse, after which fields for setting the element's behavior will appear next to the image. {{SupportedSinceRelease | release = wb-2307 |content= In addition to selecting a single element, you can select a group. To do this, hold down the Alt key on your keyboard and click on one of the elements of the group. The group containing the element will be highlighted. Clicking again while...»
(Новая страница: «Once uploaded, the image will be displayed on the open page: # Specify links and behavior of svg elements using link editor. # Save the changes and see the result by clicking on the '''Demo''' button.») |
(Новая страница: «To associate an image svg element with values or events, select it with the mouse, after which fields for setting the element's behavior will appear next to the image. {{SupportedSinceRelease | release = wb-2307 |content= In addition to selecting a single element, you can select a group. To do this, hold down the Alt key on your keyboard and click on one of the elements of the group. The group containing the element will be highlighted. Clicking again while...») |
||
| Строка 121: | Строка 121: | ||
The image is prepared in an external vector editor, but the assignment of links to elements is done in the controller web interface. | The image is prepared in an external vector editor, but the assignment of links to elements is done in the controller web interface. | ||
To associate an image svg element with values or events, select it with the mouse, after which fields for setting the element's behavior will appear next to the image. | |||
{{SupportedSinceRelease | {{SupportedSinceRelease | ||
| release = wb-2307 | | release = wb-2307 | ||
|content= | |content= | ||
In addition to selecting a single element, you can select a group. To do this, hold down the Alt key on your keyboard and click on one of the elements of the group. The group containing the element will be highlighted. Clicking again while holding down the Alt key will select the group one level higher and so on up to the very top of the hierarchy. | |||
Groups are convenient to use for creating buttons: we combined a rectangle and an icon in the editor and got a button. | |||
}} | }} | ||
After setting up all connections, click the '''Save''' button. | |||
=== Read === | |||
Display values from the source in a text field. | |||
The value from the source selected in the '''Channel''' field is placed in the '''val''' variable, which must be specified in the '''Value''' field. | |||
To display the value, just specify the variable: | |||
<syntaxhighlight lang="javascript"> | |||
<syntaxhighlight lang="javascript"> | |||
val | val | ||
</syntaxhighlight> | </syntaxhighlight> | ||
You can add arbitrary text to the value, for example, the unit of measure: | |||
<syntaxhighlight lang="javascript"> | |||
<syntaxhighlight lang="javascript"> | val + '°C' | ||
val + ' °C' | |||
</syntaxhighlight> | </syntaxhighlight> | ||
You can also change the received value, for example, replace it with a human-readable status: | |||
<syntaxhighlight lang="javascript"> | |||
<syntaxhighlight lang="javascript"> | (val == 1) ? 'ON' : 'OFF' | ||
(val | |||
</syntaxhighlight> | </syntaxhighlight> | ||
=== Write to channel === | |||
With this setting you can write a value to the topic when the user clicks on the element. | |||
There are two states ON and OFF. When a user clicks on an element, the value in the MQTT topic will change to the opposite. | |||
In the '''Channel''' field, select the MQTT topic for writing values, and in the '''On State Value''' and '''Off State Value''' fields specify which values correspond to the states. | |||
<div lang="ru" dir="ltr" class="mw-content-ltr"> | <div lang="ru" dir="ltr" class="mw-content-ltr"> | ||