translator, wb_editors
4256
правок
SVG-Dashboards: различия между версиями
→Вращение элементов
Matveevrj (обсуждение | вклад) |
|||
| (не показаны 4 промежуточные версии 2 участников) | |||
| Строка 214: | Строка 214: | ||
<!--T:46--> | <!--T:46--> | ||
По одиночному и длинному нажатию доступен переход на SVG и текстовые панели, а по смахиванию — только SVG. Это архитектурное ограничение, которое мы пока не | По одиночному и длинному нажатию доступен переход на SVG и текстовые панели, а по смахиванию — только SVG. Это архитектурное ограничение, которое мы пока не можем устранить. | ||
}} | }} | ||
| Строка 370: | Строка 370: | ||
#:Так как изменение стиля элемента может происходить только по условию, в котором участвует значение из MQTT топика, то мы выбрали топик '''CPU Temperature''' и задали условие '''>20'''. Это значит, что анимация будет работать, только когда значение топика '''CPU Temperature''' больше 20. | #:Так как изменение стиля элемента может происходить только по условию, в котором участвует значение из MQTT топика, то мы выбрали топик '''CPU Temperature''' и задали условие '''>20'''. Это значит, что анимация будет работать, только когда значение топика '''CPU Temperature''' больше 20. | ||
#Сохраним дашборд и перейдем в просмотр. | #Сохраним дашборд и перейдем в просмотр. | ||
=== Вращение элементов === | |||
Чтобы добавить вращение элементам SVG-панели, добавьте в поле '''Style''' следующее выражение: | |||
<syntaxhighlight lang="javascript"> | |||
'transform-box: fill-box; transform-origin: 50% 50%; animation: rotate 1s infinite linear;' | |||
</syntaxhighlight> | |||
== Добавление внешних ссылок == <!--T:76--> | == Добавление внешних ссылок == <!--T:76--> | ||
[[Image: svg-hyperlink.png |300px|thumb|right| Создание ссылки в Inkscape ]] | [[Image: svg-hyperlink.png |300px|thumb|right| Создание ссылки в Inkscape ]] | ||