16 281
правка
SVG-Dashboards: различия между версиями
м
→Редактор связей
м (Переделал структуру) |
|||
| Строка 42: | Строка 42: | ||
=== Read === | === Read === | ||
Отображение значений из источника в текстовом поле. | |||
Полученное из выбранного в поле '''Channel''' источника помещается в переменную '''val''', которую нужно указать в поле '''Value'''. | |||
Чтобы вывести значение, просто укажите переменную: | |||
<pre> | |||
val | |||
</pre> | |||
К значению можно добавить произвольный текст, например, единицу измерения: | |||
<pre> | |||
val + ' °C' | |||
</pre> | |||
Также можно подменить полученное значение, например, заменить его на понятный человеку статус: | |||
<pre> | |||
(val == 1) ? 'ВКЛ' : 'ОТКЛ' | |||
</pre> | |||
=== Write === | === Write === | ||
Реакция на клик пользователя по элементу изображения. Доступно два состояния ON и OFF. | |||
Выберите в поле '''Channel''' MQTT топик, куда нужно записывать значения, а в полях '''Value on''' и '''Value off''' укажите какие значения нужно записывать в зависимости от состояния. | |||
Например, для переключения реле нужно указать: | |||
<pre> | |||
Value on = 1 | |||
Value on = 0 | |||
</pre> | |||
=== Visible === | === Visible === | ||
Здесь можно указать при каком условии показывать элемент изображения. | |||
Выберите в поле Channel MQTT-топик, на информацию из которого мы будем реагировать, в поле '''Condition''' укажите условие, а в поле '''Value''' — значение. | |||
=== Style === | === Style === | ||
Позволяет изменять стиль элементов изображения. Можно использовать для создания обратной связи на действия, оповещения пользователя о событии т.п. | |||
Доступные для стилизации свойства элемента: | |||
* fill — цвет заливки; | |||
* fill-opacity — непрозрачность заливки, значения от 0.0 до 1.0 или в процентах; | |||
* stroke — цвет обводки; | |||
* stroke-width — толщина обводки; | |||
* stroke-dasharray — вид пунктирной обводки, задается в единицах длины или процентах. | |||
* stroke-opacity — непрозрачность обводки, значения от 0.0 до 1.0 или в процентах. | |||
Цвета можно задавать словами <code>black, red, yellow и т.п.</code> или шестнадцатеричными значениями <code>#ffe680ff, #4f4f4dff и т.п.</code>. | |||
Изменим цвет элемента в зависимости от состояния реле: | |||
<pre> | |||
(val == 1) ? ';fill: yellow' : ';fill: gray' | |||
</pre> | |||
== Редактирование == | == Редактирование == | ||
== Полезные ссылки и материалы == | == Полезные ссылки и материалы == | ||