translator, wb_editors
4285
правок
SVG-Dashboards: различия между версиями
→Вращение элементов
Matveevrj (обсуждение | вклад) |
|||
| (не показано 5 промежуточных версий 3 участников) | |||
| Строка 214: | Строка 214: | ||
<!--T:46--> | <!--T:46--> | ||
По одиночному и длинному нажатию доступен переход на SVG и текстовые панели, а по смахиванию — только SVG. Это архитектурное ограничение, которое мы пока не | По одиночному и длинному нажатию доступен переход на SVG и текстовые панели, а по смахиванию — только SVG. Это архитектурное ограничение, которое мы пока не можем устранить. | ||
}} | }} | ||
| Строка 232: | Строка 232: | ||
* stroke — цвет обводки; | * stroke — цвет обводки; | ||
* stroke-width — толщина обводки; | * stroke-width — толщина обводки; | ||
* stroke-dasharray — вид пунктирной обводки, задается в единицах длины или процентах | * stroke-dasharray — вид пунктирной обводки, задается в единицах длины или процентах; | ||
* stroke-opacity — непрозрачность обводки, значения от 0.0 до 1.0 или в процентах. | * stroke-opacity — непрозрачность обводки, значения от 0.0 до 1.0 или в процентах; | ||
* pointer-events:none — отключить клик. | |||
<!--T:51--> | <!--T:51--> | ||
| Строка 369: | Строка 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 ]] | ||