translator, wb_editors
4218
правок
SVG-Dashboards: различия между версиями
Нет описания правки
Matveevrj (обсуждение | вклад) |
|||
| Строка 208: | Строка 208: | ||
# В редакторе svg-панели нажмите кнопку '''Edit bindings as JSON''', скопируйте из сохраненного файла описание связей и вставьте текст в поле '''SVG Bindings'''. | # В редакторе svg-панели нажмите кнопку '''Edit bindings as JSON''', скопируйте из сохраненного файла описание связей и вставьте текст в поле '''SVG Bindings'''. | ||
# Нажмите кнопку '''Save'''. | # Нажмите кнопку '''Save'''. | ||
==Анимация элементов SVG-панели== | |||
[[Image: animation-svg.gif |350px|thumb|right| Пример анимации элемента SVG-панели ]] | |||
Элементы SVG-панели можно анимировать с помощью CSS. | |||
Для этого нужно: | |||
#Нарисовать SVG-панель в векторном редакторе, например, Inkscape. | |||
#Открыть файл SVG в текстовом редакторе и добавить блок стилей, заключенный в теги <code><style></style></code>. | |||
#В блоке стилей добавить правило '''@keyframes'''. | |||
#Сохранить файл и загрузить его в контроллер. | |||
#Перейти в редактор SVG-панели в веб-интерфейсе контроллера. | |||
#Активировать параметр '''Style''' и задать в поле '''Value''' свойство '''animation'''. Также нужно задать условие при котором анимация будет срабатывать. | |||
Визуализация в CSS осуществляется с помощью свойства '''animation''' и правила '''@keyframes'''. | |||
'''@keyframes''', или ключевые кадры, содержат информацию о том как должен выглядеть элемент в каждый из моментов времени. | |||
Правило содержащее два ключевых кадра будет выглядеть так: | |||
<syntaxhighlight lang="javascript"> | |||
@keyframes <имя кейфрейма> { | |||
from: { описание начального состояния элемента } | |||
to: { описание конечного состояния элемента } | |||
} | |||
</syntaxhighlight> | |||
Здесь '''from''' и '''to''' ключевые слова обозначающие начальную и конечную точки анимации. Вместо них можно использовать 0% и 100%, а также добавить промежуточные значения. | |||
Имя кейфрейма — идентификатор, по которому правило будет вызываться из описания стилей. | |||
Чтобы анимация заработала нужно задать стилю элемента свойство '''animation'''. | |||
Свойство '''animation''' задаёт параметры действия для анимации (длительность анимации, повторение, направление, тип движения, шаги), а в блоке '''@keyframes''' задаётся сама анимация по шагам (изменения вида и положения). | |||
Покажем на примере создание анимации для изменения цвета текста с красного на зеленый и обратно. Так как в SVG текст выполняется заливкой, то потребуется изменять свойство '''fill'''. | |||
[[Image: animation-style.png |350px|thumb|right| Свойство '''animation''' задается в поле '''Value''' параметра '''Style''' ]] | |||
#Создадим новый SVG-документ в редакторе Inlskape и добавим в него элемент Текст. | |||
#Сохраним файл и откроем его в текстовом редакторе. | |||
#Добавим блок style следующего вида: | |||
#:<syntaxhighlight lang="javascript"> | |||
<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. | |||
#Сохраним дашборд и перейдем в просмотр. | |||
== Полезные ссылки и материалы == | == Полезные ссылки и материалы == | ||