translator, wb_editors
4256
правок
SVG-Dashboards: различия между версиями
→Вращение элементов
Matveevrj (обсуждение | вклад) |
|||
| (не показано 6 промежуточных версий 3 участников) | |||
| Строка 43: | Строка 43: | ||
Вы можете выводить информацию в любые текстовые элементы и настраивать взаимодействия с любыми фигурами и текстом. | Вы можете выводить информацию в любые текстовые элементы и настраивать взаимодействия с любыми фигурами и текстом. | ||
Все панели хранятся в файле <code>/etc/wb-webui.conf</code>, который загружается на компьютер пользователя в хранилище браузера LocalStorage. Это хранилище, в зависимости от браузера, имеет ограниченный размер до 4 Мбайт. При превышении размера вы получите ошибку загрузки панели в редактор. Поэтому важно следить за суммарным размером SVG-рисунков. В реальной жизни, если рисовать панели в Inkscape и не размещать в них растровую графику и сложные градиенты, то рисунки получаются компактные — десятки или сотни килобайт, поэтому большинство пользователей с такой проблемой не столкнутся. | |||
==== Релиз wb-2307 и новее ==== <!--T:11--> | ==== Релиз wb-2307 и новее ==== <!--T:11--> | ||
| Строка 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 ]] | ||