16 293
правки
SVG-Dashboards/en: различия между версиями
Нет описания правки
(Новая страница: «Syntax: <syntaxhighlight lang="javascript"> (CONDITION) ? 'VALUE1' : 'VALUE2' </syntaxhighlight>») |
|||
| (не показаны 2 промежуточные версии этого же участника) | |||
| Строка 21: | Строка 21: | ||
Full-screen mode allows you to switch between panels through the side menu, and in HMI mode, you need to implement the switch yourself: add a button (object) with a URL to the desired panel in the SVG image. | Full-screen mode allows you to switch between panels through the side menu, and in HMI mode, you need to implement the switch yourself: add a button (object) with a URL to the desired panel in the SVG image. | ||
<gallery mode="packed" heights="150px" caption=" | <gallery mode="packed" heights="150px" caption="Panel modes"> | ||
Image: WebUI SVG.png | Standard view | Image: WebUI SVG.png | Standard view | ||
Image: WebUI SVG fullscreen.png | Fullscreen | Image: WebUI SVG fullscreen.png | Fullscreen | ||
| Строка 288: | Строка 288: | ||
The '''animation''' property sets the animation action parameters (animation duration, repetition, direction, movement type, steps), and the '''@keyframes''' block sets the animation itself in steps (changes in appearance and position). | The '''animation''' property sets the animation action parameters (animation duration, repetition, direction, movement type, steps), and the '''@keyframes''' block sets the animation itself in steps (changes in appearance and position). | ||
Let's use an example to create an animation to change the text color from red to green and vice versa. Since text is filled in SVG, you will need to change the '''fill''' property. | |||
[[Image: animation-style.png |350px|thumb|right| The '''animation''' property is set in the '''Value''' field of the '''Style''' parameter ]] | |||
[[Image: animation-style.png |350px|thumb|right| | #Let's create a new SVG document in the Inlscape editor and add the Text element to it. | ||
# | #Let's save the file and open it in a text editor. | ||
# | #Add a style block like this: | ||
# | #:<syntaxhighlight lang="html"> | ||
#:<syntaxhighlight lang="html"> | <style> | ||
@keyframes changecolor { | @keyframes changecolor { | ||
0% {fill:red} | 0% {fill:red} | ||
| Строка 302: | Строка 301: | ||
} | } | ||
</style> | </style> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
# | #Save the SVG file and load it into the controller. | ||
# | #In the dashboard editor, select the created test element and set its animation property in the following form: | ||
#:<syntaxhighlight lang="javascript"> | #:<syntaxhighlight lang="javascript"> | ||
(val > 20) ? 'animation: changecolor 3s infinite linear;' : ' ' | (val > 20) ? 'animation: changecolor 3s infinite linear;' : ' ' | ||
</syntaxhighlight> | </syntaxhighlight> | ||
#: | #:Since the element style can only be changed by a condition involving a value from the MQTT topic, we chose the '''CPU Temperature''' topic and set the condition '''>20'''. This means that the animation will only work when the value of the '''CPU Temperature''' topic is greater than 20. | ||
# | #Save the dashboard and go to the view. | ||
== | == Add external links == | ||
[[Image: svg-hyperlink.png |300px|thumb|right| | [[Image : svg-hyperlink.png |300px|thumb|right| Creating a link in Inkscape ]] | ||
The transition to external links is set at the stage of creating a picture in the Inkscape editor. | |||
Create hyperlinks like this: | |||
# Select an element that will serve as a link, then in the context menu Create a link (hyperlink). | |||
# | # Insert a link into the opened field. | ||
# | # Save. | ||
# | |||
Now it remains to load the image into the controller and check. | |||
== Useful Links & Materials == | |||
* [[Media:Examples SVG-Dashboards.zip|SVG Dashboard Example Archive]] | |||
* [[Media:Examples SVG-Dashboards.zip| | * [https://github.com/wirenboard/wb-dashboards- demo Sample panels in the wb-dashboards-demo repository] | ||
* [https://github.com/wirenboard/wb-dashboards-demo | * [https://support.wirenboard.com/t/vyvod-dannyh-v-vide-grafika-v-realnom-vremeni/13623/5 How to add to SVG panel link to a graph or another page] | ||
* [https://support.wirenboard.com/t/vyvod-dannyh-v-vide-grafika-v-realnom-vremeni/13623/5 | * [https://wirenboard.com/en/pages/wb-software/ Wiren Board Web Interface article] | ||
* [https://wirenboard.com/ | * [[Wiren Board Web Interface | Description of the controller web interface on the wiki]] | ||
* [[Wiren Board Web Interface | | * [https://inkscape.org/en/ Free Inkscape SVG editor] | ||
* [https://inkscape.org/ | |||