Translations:SVG-Dashboards/76/ru

Покажем на примере создание анимации для изменения цвета текста с красного на зеленый и обратно. Так как в SVG текст выполняется заливкой, то потребуется изменять свойство fill.

Свойство animation задается в поле Value параметра Style

1. Создадим новый SVG-документ в редакторе Inlskape и добавим в него элемент Текст.
2. Сохраним файл и откроем его в текстовом редакторе.
3. Добавим блок style следующего вида:

     <style>
   @keyframes changecolor {
      0% {fill:red}
      50% {fill:green}
      100% {fill:red}
      }
     </style>
   

4. Сохраним SVG-файл и загрузим его в контроллер.
5. В редакторе дашбордов выберем созданным тестовый элемент и зададим ему свойство animation в следующем виде:

   (val > 20) ? 'animation: changecolor 3s infinite linear;' : ' '
   

   Так как изменение стиля элемента может происходить только по условию, в котором участвует значение из MQTT топика, то мы выбрали топик CPU Temperature и задали условие >20. Это значит, что анимация будет работать, только когда значение топика CPU Temperature больше 20.

6. Сохраним дашборд и перейдем в просмотр.

Добавление внешних ссылок

Создание ссылки в Inkscape