Interactive SVG Backgrounds / Dialog is not appearing

I added the info about the coloring to the description of input fields. I also added support for Item String types: see the PR here:

Interactive SVG add String Type support by stefan-hoehn · Pull Request #2948 · openhab/openhab-webui · GitHub which allows the buttons for the receiver to be highlighted depending on the String-Status of an item:

2 Likes

Is it possible to view the XML code of the SVG? It would help to understand the documentation a bit better.

I like to use the Fixed Canvas Layout and your Interactive SVG backgrounds offers a whole lot of new possibilities. Thanks for that.

Ok, I found it. I had to copy the link and then paste it in a webbrowser from where I could save it.

Funny, my intention when I uploaded it, was to attach the SVG so someone like you could use it but discourse was so clever to actually show it instead :wink:

Is there any way to make Interactive SVG elements work with Contact (OpenClosed) items?

yes, that should work by default:

Do you see the red windows at the top? These are open.

this is the definition:

    az_fenster_seite_group_l:
      actionCommand: ON
      actionCommandAlt: OFF
      stateAsOpacity: true
      stateItems:
        - AZ_Fenster_Seite_OpenClose
      useProxyElementForState: true
    az_fenster_seite_group_r:
      actionCommand: ON
      actionCommandAlt: OFF
      stateAsOpacity: true
      stateItems:
        - AZ_Fenster_Seite_OpenClose

and here is the element’s code for one of the windows in svg:

<g id="az_fenster_seite_group_l" transform="matrix(-0.00211396,0.48195696,0.39170382,0.00260103,61.652796,65.967058)"
   openhab="true" cursor="pointer">
    <path sodipodi:nodetypes="cccc" inkscape:connector-curvature="0" id="az_fenster_seite_l"
          d="m 69.420036,227.20814 c 22.056697,-0.41677 27.608684,-26.56449 27.465786,-35.57279 l -27.620403,0.1271 z"
          style="opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.917087;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:37.9976;stroke-opacity:1"></path>
    <path sodipodi:nodetypes="cccc" inkscape:connector-curvature="0" id="az_fenster_seite_flash_l"
          d="m 69.76356,227.55166 c 22.056701,-0.41677 27.608681,-26.56449 27.465781,-35.57279 l -27.620398,0.1271 z"
          style="opacity: 1; vector-effect: none; fill: url(&quot;#linearGradient24&quot;); fill-opacity: 1; stroke: rgb(184, 184, 184); stroke-width: 0.221242; stroke-linecap: butt; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 37.9976; stroke-opacity: 1;"
          flash="true"></path>
</g>

I have the outer window border and I switch on the inner red element if the item is OPEN.

  • OPEN is interpreted as opacity = 1
  • CLOSED is treated as opacity = 0

also see here: Fixed Layout Pages | openHAB (maybe I should write this more explicitly).

There is also another possibility:

You can map any State to be interpreted as ON by putting the name of that State here, e.g. CLOSED which would be interpreted as ON which I used on the Onkyo-Receiver above.

Hope that helps.

OpenClosed items indeed work well with opacity but not with color or class :frowning:
If class or color is configured it just adds empty class and style attributes to corresponding svg element.


Same element configured with any OnOff item works s expected.
P.S. I have OpenHAB 4.3.0. I will upgrade it to 4.3.2 tomorrow to check if there is any improvements.

Note that this status mapping feature only went into 5.x

Thanks for the update! Status mapping is of course a great feature, I’ll be waiting for it. But still I think the fact that OpenClosed works with opacity but not with color or class is considered a bug and should be fixed.

I am not sure whether this is a bug. When I started with this, I considered the “ON” status the only status that would toggle an element in the SVG which is why it is called an “On-State” mapping. Only later I noticed myself that other states could be also perceived as ON like the CLOSED state though one could argue that OPEN is actually the related state to be perceived as on. Also there might be other states than open/closed that should be perceived as ON-State which is why I went to idea to allow YOU to decide which State should be perceived as ON. Doesn’t it make it more general to be used?

Speaking of the state map feature, I would like to suggest going a step further, of course, if it is possible and not too difficult. Instead of mapping ON or OFF values, implement multiple value mappings directly to colors or even better to classes e.g.
0: element1:class1, element2:class2
1: element1:class3, element2:class4
whatever: element1:class5, element2:class6

That would be a universal approach and it could completely abandon specific “ON color”, “OFF color”

It is possible that using only classes is a more flexible solution. Color currently simply adds a style to fill:… For example, for me, several elements such as led strip have not closed paths but simply wide lines and the fill attribute does not affect it at all, but with classes you can achieve the necessary result.
I believe that Interactive SVG Backgrounds is the best feature that has come out since the new UI with very great potential and I really hope that it will continue to develop.

Looks like an interesting idea. Can you explain a bit more the use case you have in mind?
Would you mind creating a github issue for that where you exactly explain what you intend to do with an example? Also it would be good if you attach a simple SVG and Item setup, so I would be able to test that.

Interactive SVG Backgrounds / Improvement ideas · Issue #3029 · openhab/openhab-webui