Canvas layout: Add interactive SVG support

[stefan-hoehn]

This is major contribution to the fixed canvas layout which allows an SVG background to become an active part of the page. Through this feature the SVG itself can become an active component of the page.

Thanks to @florian-h05 for the intensive collaboration on this new feature.

See documentation here: openhab/openhab-docs#2398

It allows real embedding of an SVG if used as the background URL to become interactive:

• Embed SVG = ON: Loads the SVG into the HTML DOM, so the elements are available for the openHAB page.
• Embed SVG Flashing in Run-Mode in Run-Mode

Here is an example of a floorplan that has been implemented without any widget (note that widgets are still supported and are still recommended to be used) by showing some of the features:

embedded-svg.mov

• The violet "led strip" can directly be clicked to turn on and off the light

• The SVG element that represents that strip changes its color based on the real color of the light strip

• The blue bar is a window whose rollershutter is partially closed. The blue color changes its transparency based on the opening percentage of the rollershutter (it becomes completely gray like the wall when the rollershutter is closed)

• All other elements in the picture are completely contained in the SVG (some of which could have also been done via a widget but they serve as an example of the possible features.

• State information can be directly written into an SVG-Element like the temperature here

• Different representations can be achieved by enabling / disabling parts of the element like the bulb here:

OFF / ON (glow around the bulb, which could be even animated within the SVG)

• Style changes can be trigged based on an ON/STATE. Even animations that are contained in the SVG can be triggered via dynamic style changes manipulating the SVG like the following slider button that has been implemented within the SVG or the blinking astronaut on the right in the video. This allows endless ideas (e.g. energy flow within a house)

• SVG that should become active elements for openHAB are marked with an "openhab" attribute (in the SVG editor). These will the be detected in the openHAB editor and made available for configuration:

flash.mov

and by clicking on it the element can be configured similarly like a widget:

config.mov

Keep in mind: it is not a replacement for widgets ... widgets can and should still be used but it allows the background itself to be as interactive as a widget.

PS: A comprehensive documentation will come soon

[relativeci]

#2469 Bundle Size — 10.87MiB (+0.1%).

4ac0310(current) vs 1e4e69e main#2465(baseline)

Warning

Bundle contains 2 duplicate packages – View duplicate packages

Bundle metrics   3 changes 1 regression

	Current #2469	Baseline #2465
Initial JS	1.91MiB(+0.56%)	1.9MiB
Initial CSS	577.31KiB	577.31KiB
Cache Invalidation	22.9%	17.47%
Chunks	226	226
Assets	249	249
Modules	2940(+0.03%)	2939
Duplicate Modules	152	152
Duplicate Code	1.8%	1.8%
Packages	96	96
Duplicate Packages	2	2

Bundle size by type   1 change 1 regression

	Current #2469	Baseline #2465
JS	9.08MiB (+0.12%)	9.07MiB
CSS	864KiB	864KiB
Fonts	526.1KiB	526.1KiB
Media	295.6KiB	295.6KiB
IMG	140.74KiB	140.74KiB
HTML	1.38KiB	1.38KiB
Other	871B	871B

Bundle analysis report Branch stefan-hoehn:fixed_canvas_svg_su... Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[florian-h05]

I have rebased and refactored it a bit to use a better approach for widget actions than my first solution. It now also used Framework7 color conversion methods instead of your HSB to RGB implementation.

I have changed a few minor things in your code, code now LGTM!

Can you please test it @stefan-hoehn?

[stefan-hoehn]

@florian-h05 First tests look pretty promising. I had to setup on item again but other than that all configured actions and items work well. I will do a bit of more testing today but I am pretty sure this finally can be merged.

[stefan-hoehn]

LGTM, haven't found any issue, good job, Florian.