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

Материал из Wiren Board
(Новая страница: «Let's use an example to create an animation to change the text color from red to green and vice versa. Since text is filled in SVG, you will need to change the '''fill''' property. 350px|thumb|right| The '''animation''' property is set in the '''Value''' field of the '''Style''' parameter #Let's create a new SVG document in the Inlscape editor and add the Text element to it. #Let's save the file and open it in a text editor....»)
 
(нет различий)

Текущая версия на 12:55, 4 августа 2023

Определение сообщения (SVG-Dashboards)
Покажем на примере создание анимации для изменения цвета текста с красного на зеленый и обратно. Так как в SVG текст выполняется заливкой, то потребуется изменять свойство '''fill'''.
[[Image: animation-style.png |350px|thumb|right| Свойство '''animation''' задается в поле '''Value''' параметра '''Style''' ]]
#Создадим новый SVG-документ в редакторе Inlskape и добавим в него элемент Текст. 
#Сохраним файл и откроем его в текстовом редакторе.
#Добавим блок style следующего вида:
#:<syntaxhighlight lang="html">
  <style>
@keyframes changecolor {
   0% {fill:red}
   50% {fill:green}
   100% {fill:red}
   }
  </style>
</syntaxhighlight>
#Сохраним SVG-файл и загрузим его в контроллер.
#В редакторе дашбордов выберем созданным тестовый элемент и зададим ему свойство animation в следующем виде:
#:<syntaxhighlight lang="javascript">
(val > 20) ? 'animation: changecolor 3s infinite linear;' : ' '
</syntaxhighlight>
#:Так как изменение стиля элемента может происходить только по условию, в котором участвует значение из MQTT топика, то мы выбрали топик '''CPU Temperature''' и задали условие '''>20'''. Это значит, что анимация будет работать, только когда значение топика '''CPU Temperature''' больше 20. 
#Сохраним дашборд и перейдем в просмотр.
== Добавление внешних ссылок ==
[[Image: svg-hyperlink.png |300px|thumb|right| Создание ссылки в Inkscape ]]

Let's use an example to create an animation to change the text color from red to green and vice versa. Since text is filled in SVG, you will need to change the fill property.

The animation property is set in the Value field of the Style parameter
  1. Let's create a new SVG document in the Inlscape editor and add the Text element to it.
  2. Let's save the file and open it in a text editor.
  3. Add a style block like this: 
     
 <style>
@keyframes changecolor {
   0% {fill:red}
   50% {fill:green}
   100% {fill:red}
   }
  </style>
  4. Save the SVG file and load it into the controller.
  5. In the dashboard editor, select the created test element and set its animation property in the following form: 
     
(val > 20) ? 'animation: changecolor 3s infinite linear;' : ' '
    Since the element style can only be changed by a condition involving a value from the MQTT topic, we chose the CPU Temperature topic and set the condition >20. This means that the animation will only work when the value of the CPU Temperature topic is greater than 20.
  6. Save the dashboard and go to the view.

Add external links

Creating a link in Inkscape
Источник — https://wirenboard.com/wiki/index.php?title=Translations:SVG-Dashboards/76/en&oldid=75715