Перейти к содержанию

Навигация

SVG-Dashboards/en: различия между версиями

SVG-Dashboards/en (просмотреть исходный код)

Версия 12:54, 4 августа 2023

1942 байта убрано ,  9 месяцев назад
Новая страница: «Events available: single and long press, as well as swipe left and right.»
(Новая страница: «For example, if the value of the MQTT topic is equal to <code>1</code> , then print the value <code>ВКЛ</code> , otherwise — <code>ОТКЛ</code> : <syntaxhighlight lang="javascript"> (val == 1) ? 'ON' : 'OFF' </syntaxhighlight>»)
(Новая страница: «Events available: single and long press, as well as swipe left and right.»)
Метки: правка с мобильного устройства правка из мобильной версии
Строка 184: Строка 184:
Here you can specify under what condition to show the image element. By default, the element will be hidden and displayed only while the condition is met.
Here you can specify under what condition to show the image element. By default, the element will be hidden and displayed only while the condition is met.


<div lang="ru" dir="ltr" class="mw-content-ltr">
In the '''Channel''' field, select the MQTT topic that the element will respond to, in the '''Condition''' field, select a condition, and in the '''Value''' field, select a value.
Выберите в поле '''Канал''' MQTT-топик, на информацию из которого будет реагировать элемент, в поле '''Условие''' выберите условие, а в поле '''Значение''' — значение.
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
=== Design style ===
=== Стиль оформления ===
Allows you to change the style of image elements. Can be used to create feedback for actions, notify the user about an event, etc.
Позволяет изменять стиль элементов изображения. Можно использовать для создания обратной связи для действий, оповещения пользователя о событии т.д.
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
Element properties available for styling:
Доступные для стилизации свойства элемента:
* fill — fill color;
* fill — цвет заливки;
* fill-opacity — fill opacity, values from 0.0 to 1.0 or as a percentage;
* fill-opacity — непрозрачность заливки, значения от 0.0 до 1.0 или в процентах;
* stroke — stroke color;
* stroke — цвет обводки;
* stroke- width — stroke thickness;
* stroke-width — толщина обводки;
* stroke-dasharray — dashed stroke type, set in units of length or percentage.
* stroke-dasharray — вид пунктирной обводки, задается в единицах длины или процентах.
* stroke-opacity — stroke opacity, values from 0.0 to 1.0 or percentage.
* stroke-opacity — непрозрачность обводки, значения от 0.0 до 1.0 или в процентах.
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
Colors can be named <code>black, red, yellow и т.п.</code> or hex values <code>#ffe680ff, #4f4f4dff и т.п.</code> .
Цвета можно задавать именами <code>black, red, yellow и т.п.</code> или шестнадцатеричными значениями <code>#ffe680ff, #4f4f4dff и т.п.</code>.
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
Let's change the color of the element depending on the state of the relay, if the value in the topic is <code>1</code> , then paint the object yellow, otherwise - gray:
Изменим цвет элемента в зависимости от состояния реле, если в топике значение <code>1</code>, то закрашиваем объект желтым, иначе — серым:
<syntaxhighlight lang="javascript">  
<syntaxhighlight lang="javascript">
(val == 1) ? ';fill: yellow' : ';fill: gray'
(val == 1) ? ';fill: yellow' : ';fill: gray'
</syntaxhighlight>
</syntaxhighlight>
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
Let's make it so that when the value is greater than 20, the stroke of the element becomes red, dotted and 2px thick. For values less than or equal to 20, the element style will be left by default:
Сделаем так, чтобы при значении больше 20 обводка элемента стала красного цвета, пунктиром и толщиной 2px. При значениях меньше или равно 20 стиль элемента оставим по умолчанию:
<syntaxhighlight lang="javascript">  
<syntaxhighlight lang="javascript">
(val > 20) ? 'stroke: red; stroke-width:2px; stroke-dasharray:2,1' : ''
(val > 20) ? 'stroke: red; stroke-width:2px; stroke-dasharray:2,1' : ''
</syntaxhighlight>
</syntaxhighlight>
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
== Editing ==
== Редактирование ==
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
=== Panel ===
=== Панель ===
To make changes:
Чтобы внести изменения:
# Open the SVG panel.
# Откройте SVG-панель.
# Click on the '''Edit''' button.
# Нажмите кнопку '''Редактировать'''.
# Make changes and save them by clicking on the ' button ''Demonstration'''.
# Внесите изменения и сохраните их нажатием на кнопку '''Демонстрация'''.
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
=== SVG Image ===
=== SVG-изображение ===
==== Release wb-2307 and newer ====
==== Релиз wb-2307 и новее ====
{{SupportedSinceRelease
{{SupportedSinceRelease
| release = wb-2307
| release=wb-2307
|content=
|content=
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
SVG panels use identifiers embedded in the file (the id tag), so to edit the panel, simply make changes to the drawing and upload the new version to the controller.  
В SVG-панелях используются встроенные в файл идентификаторы (тег id), поэтому для редактирования панели просто внесите изменения в рисунок и загрузите новую версию в контроллер.
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
Important! If you have made a binding to a group of elements, then do not ungroup this group! If you need to change it, just go to the group in Inkscape and add or remove elements.
Важно! Если вы сделали привязку к группе элементов, то не разгруппировывайте эту группу! Если вам надо её изменить, просто войдите в группу в Inkscape и добавьте или удалите элементы.
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
}}
}}
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
<div lang="ru" dir="ltr" class="mw-content-ltr">
Источник — https://wirenboard.com/wiki/Служебная:Сравнение_версий/75693