Interactive SVG background: text state is not displayed

Lomex · January 13, 2025, 12:37pm

Hello community.

In the past, I liked to insert SVGs as a floor plan in HABPanel. Now (openhab 4.3.0) this is also possible in the MainUI without HABPanel. Interaction is also possible, e.g. displaying the lamp status by changing the color or switching it on and off.

But I can’t change the text in an SVG text object (displaying a temperature or as in my example below: The set brightness of the LED strip in front of the garage door).

My path:
I have given a text object the attribute “openhab=true” in Inkscape and added a state item to the object in Openhab. The code for this looks like this:

    text4647-9-6-3-6:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      stateAsOpacity: false
      stateItems:
        - DMX_Dimmer_Garagentor_Brightness
      useProxyElementForState: false
      useDisplayState: false

But nothing happend.

I have read this procedure carefully: [Fixed Layout Pages | openHAB]
I also saw the post of Stefan Höhn [Interactive SVG Backgrounds / Dialog is not appearing - #20 by stefan.hoehn] with his YAML-example. It says:

    aussentemperatur_text:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      useDisplayState: true

Why is there no link to a state item? And why is this working?

What am I doing wrong?

Best regards
Thomas

stefan.hoehn · January 13, 2025, 1:21pm

The reason it is not working because there was something missing that I uploaded - sorry:

This is the right setting:

    aussentemperatur_text:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      useDisplayState: true
      stateItems:
        - garten_temperature

You need to configure the item via the state item:

btw, I also updated the post of the link that you referred to.

and I’d loved to see what you are creating with it

Lomex · January 13, 2025, 2:25pm

Yes, I understand.

In my code, I also selected a state item. The only difference is:

useProxyElementForState: false
useDisplayState: false
But that shouldn’t be relevant.

From line 523 is the code for the text object (or try to find “text4647-9-6-3-6:”). Maybe this helps to find my mistake:

config:
  label: Grundriss Alle
  sidebar: true
  layoutType: fixed
  fixedType: canvas
  screenWidth: 400
  screenHeight: 1700
  imageUrl: /static/floorplans/s_all.svg
  embedSvg: true
  embedSvgFlashing: true
  embeddedSvgActions:
    rect2269-5-5:
      actionCommand: ON
      actionCommandAlt: OFF
      stateItems:
        - KNX_Heizaktor_H2_Status_Stellwert_OG_West
      stateOnColor: "#ffe5e5"
    rect2269-5-5-2:
      actionCommand: ON
      actionCommandAlt: OFF
      stateItems:
        - KNX_Heizaktor_H2_Status_Stellwert_OG_Sud
      stateOnColor: "#ffe5e5"
    rect2269-5-5-2-8:
      actionCommand: ON
      actionCommandAlt: OFF
      stateItems:
        - KNX_Heizaktor_H2_Status_Stellwert_OG_Ost
      stateOnColor: "#ffe5e5"
    rect2269-5-5-2-8-5:
      actionCommand: ON
      actionCommandAlt: OFF
      stateItems:
        - KNX_Heizaktor_H2_Status_Stellwert_OG_Treppenhaus
      stateOnColor: "#ffe5e5"
    rect2269-5-9-8:
      actionCommand: ON
      actionCommandAlt: OFF
      stateItems:
        - KNX_Heizaktor_H2_Status_Stellwert_OG_Bad
      stateOnColor: "#ffe5e5"
    rect2269-5-9:
      actionCommand: ON
      actionCommandAlt: OFF
      stateItems:
        - KNX_Heizaktor_H2_Status_Stellwert_OG_Bad
      stateOnColor: "#ffe5e5"
    rect2269-5-5-2-8-5-7:
      actionCommand: ON
      actionCommandAlt: OFF
      stateItems:
        - KNX_Heizaktor_H2_Status_Stellwert_OG_Flur
      stateOnColor: "#ffe5e5"
    rect2269-5-5-2-8-5-7-5:
      actionCommand: ON
      actionCommandAlt: OFF
      stateItems:
        - KNX_Heizaktor_H2_Status_Stellwert_OG_Flur
      stateOnColor: "#ffe5e5"
    rect2269-63:
      actionCommand: ON
      actionCommandAlt: OFF
      stateItems:
        - KNX_Heizaktor_H1_Status_Stellwert_Schlafen_EG
      stateOnColor: "#ffe5e5"
    rect2269-1-1-8:
      actionCommand: ON
      actionCommandAlt: OFF
      stateItems:
        - KNX_Heizaktor_H1_Status_Stellwert_Wohnen
      stateOnColor: "#ffe5e5"
    rect2269-1-1-8-4:
      actionCommand: ON
      actionCommandAlt: OFF
      stateItems:
        - KNX_Heizaktor_H1_Status_Stellwert_Essen
      stateOnColor: "#ffe5e5"
    rect2269-1-1-8-4-4:
      actionCommand: ON
      actionCommandAlt: OFF
      stateItems:
        - KNX_Heizaktor_H1_Status_Stellwert_Kueche
      stateOnColor: "#ffe5e5"
    rect2269-1-1-8-4-4-5:
      actionCommand: ON
      actionCommandAlt: OFF
      stateItems:
        - KNX_Heizaktor_H1_Status_Stellwert_Treppenhaus
      stateOnColor: "#ffe5e5"
    rect2269-1-1-8-4-4-5-7:
      actionCommand: ON
      actionCommandAlt: OFF
      stateItems:
        - KNX_Heizaktor_H1_Status_Stellwert_Schleuse
      stateOnColor: "#ffe5e5"
    rect2269-1-1:
      actionCommand: ON
      actionCommandAlt: OFF
      stateItems:
        - KNX_Heizaktor_H1_Status_Stellwert_WC
      stateOnColor: "#ffe5e5"
    rect2269-1:
      actionCommand: ON
      actionCommandAlt: OFF
      stateItems:
        - KNX_Heizaktor_H1_Status_Stellwert_Bad_EG
      stateOnColor: "#ffe5e5"
    rect2269:
      actionCommand: ON
      actionCommandAlt: OFF
      stateItems:
        - KNX_Heizaktor_H2_Status_Stellwert_OG_Schlafen
      stateOnColor: "#ffe5e5"
    g58648-6:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A3_Deckenlicht_Bad_OG
      stateItems:
        - KNX_Schaltaktor_A3_Deckenlicht_Bad_OG
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    path1053-0-7-9-8-6:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A3_Deckenlicht_Bad_OG
    g58648-6-6:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A3_Deckenlicht_Abstellraum_OG
      stateItems:
        - KNX_Schaltaktor_A3_Deckenlicht_Abstellraum_OG
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    path1053-0-7-9-8-6-2:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A3_Deckenlicht_Abstellraum_OG
      stateItems:
        - KNX_Schaltaktor_A3_Deckenlicht_Abstellraum_OG
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    g58648:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    path1053-9-5-2:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A3_Beleuchtung_Fassade_Sud_Balkon
      stateItems:
        - KNX_Schaltaktor_A3_Beleuchtung_Fassade_Sud_Balkon
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    g1675-68:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A3_Beleuchtung_Fassade_Sud_Balkon
      stateItems:
        - KNX_Schaltaktor_A3_Beleuchtung_Fassade_Sud_Balkon
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    path1053-9-5-9-8-7:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A3_Stromversorgung_Balkon
    g58648-0:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_Buro
      stateItems:
        - KNX_Schaltaktor_A1_Deckenlicht_Buro
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    path1053-2:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_Buro
    g58648-1:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_Heizung
      stateItems:
        - KNX_Schaltaktor_A1_Deckenlicht_Heizung
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    path1053-9-5-2-6-4-5-3-8:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_Heizung
    g58648-1-1:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_Technik_Elektro
      stateItems:
        - KNX_Schaltaktor_A1_Deckenlicht_Technik_Elektro
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    path1053-9-5-2-6-4-5-3:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_Technik_Elektro
    path1053-9-5-2-6-4-5:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_Flur_UG
    g58648-1-1-0:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_Flur_UG
      stateItems:
        - KNX_Schaltaktor_A1_Deckenlicht_Flur_UG
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    path1053-9-5-2-6-4:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_Treppenhaus_UG
    g58648-1-1-0-3:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_Treppenhaus_UG
      stateItems:
        - KNX_Schaltaktor_A1_Deckenlicht_Treppenhaus_UG
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    path1053-9:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_Lager
    g58648-1-1-0-3-7-9-9-4:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_Lager
      stateItems:
        - KNX_Schaltaktor_A1_Deckenlicht_Lager
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    path1053-9-5:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_Waschkuche
    g58648-1-1-0-3-7-9-9:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_Waschkuche
      stateItems:
        - KNX_Schaltaktor_A1_Deckenlicht_Waschkuche
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    path1053-9-5-2-0:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_Vorratskammer
    g58648-1-1-0-3-7-9:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_Vorratskammer
      stateItems:
        - KNX_Schaltaktor_A1_Deckenlicht_Vorratskammer
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    path1053-9-5-2-6:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_Kellerraum
    g58648-1-1-0-3-7:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_Kellerraum
      stateItems:
        - KNX_Schaltaktor_A1_Deckenlicht_Kellerraum
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    g1006-3:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A2_Deckenlicht_Terrasse
      stateItems:
        - KNX_Schaltaktor_A2_Deckenlicht_Terrasse
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    path1053-9-5-2-2:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A2_Deckenlicht_Terrasse
    path1053-9-5-9-8:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A2_Stromversorgung_Terrasse
    g1220-80:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A2_Stromversorgung_Terrasse
      stateItems:
        - KNX_Schaltaktor_A2_Stromversorgung_Terrasse
      stateOnColor: "#ff0000"
      stateOffColor: "#000000"
    path1053-9-5-9-9:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A2_Fassadenbeleuchtung_Ost
    g1675-6-0:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A2_Fassadenbeleuchtung_Ost
      stateItems:
        - KNX_Schaltaktor_A2_Fassadenbeleuchtung_Ost
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    path1053-9-5-9-1-4:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A2_Deckenlicht_Mulleimer
    g1006:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A2_Deckenlicht_Mulleimer
      stateItems:
        - KNX_Schaltaktor_A2_Deckenlicht_Mulleimer
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    g58648-6-6-2:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
    rect1034-1-8-5:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      stateItems:
        - KNX_Schaltaktor_A2_Deckenlicht_Garage
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    rect1034-1-8:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      stateItems:
        - KNX_Schaltaktor_A2_Deckenlicht_Garage
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    path1053-9-5-9-1-7:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A2_Deckenlicht_Garage
    path1053-0-7-9-8-6-2-9-4-3:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_HWR
    g58648-6-6-1-9-4-8:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_HWR
      stateItems:
        - KNX_Schaltaktor_A1_Deckenlicht_HWR
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    path1053-0-7-9-8-6-2-9-4:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_Bad_EG
    g58648-6-6-1-9-4:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_Bad_EG
      stateItems:
        - KNX_Schaltaktor_A1_Deckenlicht_Bad_EG
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    path1053-0-7-9-8-6-2-9:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_WC
    g58648-6-6-1-9:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_WC
      stateItems:
        - KNX_Schaltaktor_A1_Deckenlicht_WC
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    path1053-0-7-9-8-6-2-2:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_Abstellraum_EG
    g58648-6-6-1:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_Abstellraum_EG
      stateItems:
        - KNX_Schaltaktor_A1_Deckenlicht_Abstellraum_EG
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    g1220-0:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A3_Stromversorgung_Balkon
      stateItems:
        - KNX_Schaltaktor_A3_Stromversorgung_Balkon
      stateOnColor: "#ff0000"
      stateOffColor: "#000000"
    path1053-0-7-9-8-6-2-9-4-3-1:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_Wohnzimmer
    g58648-6-6-1-9-4-8-9:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_Wohnzimmer
      stateItems:
        - KNX_Schaltaktor_A1_Deckenlicht_Wohnzimmer
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    path1053-0-7-9-8-6-2-9-4-3-1-7:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_Esszimmer
    g58648-6-6-1-9-4-8-9-9:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A1_Deckenlicht_Esszimmer
      stateItems:
        - KNX_Schaltaktor_A1_Deckenlicht_Esszimmer
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    path1053-0-7-9-8-6-2-9-4-3-1-7-4-6:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A2_Deckenlicht_Kuche
    g58648-6-6-1-9-4-8-9-9-5:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A2_Deckenlicht_Kuche
      stateItems:
        - KNX_Schaltaktor_A2_Deckenlicht_Kuche
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    path1053-0-7-9-8-6-2-9-4-3-1-7-4:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A2_Deckenlicht_Speisekammer
    g58648-6-6-1-9-4-8-9-9-5-0:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A2_Deckenlicht_Speisekammer
      stateItems:
        - KNX_Schaltaktor_A2_Deckenlicht_Speisekammer
      stateOnColor: "#ffff00"
      stateOffColor: "#000000"
    rect1034:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      stateItems:
        - DMX_Dimmer_Garagentor_Brightness
      stateAsOpacity: true
      stateOnColor: "#ffff00"
      stateOffColor: "#00ffff"
      invertStateOpacity: true
    text4647-9-6-3-6-7:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      stateOnColor: =(items.KNX_Schaltaktor_A1_Deckenlicht_HWR.state==='ON') ?
        '#ffffff':'#000000'
      stateOffColor: "#bbbbbb"
      useDisplayState: false
      stateItems:
        - KNX_Schaltaktor_A1_Deckenlicht_HWR
    text4647-9-6-3-6:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      stateAsOpacity: false
      stateItems:
        - DMX_Dimmer_Garagentor_Brightness
      useProxyElementForState: false
      useDisplayState: false
    path1053-9-5-9-1:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Messaktor_M1_Stromversorgung_TV
    g1220-8:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Messaktor_M1_Stromversorgung_TV
      stateItems:
        - KNX_Messaktor_M1_Stromversorgung_TV
      stateOnColor: "#ff0000"
      stateOffColor: "#000000"
    path1053-9-5-9-1-6:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A2_Stromversorgung_Steckdose_bei_Klavier
    g1220-8-5:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A2_Stromversorgung_Steckdose_bei_Klavier
      stateItems:
        - KNX_Schaltaktor_A2_Stromversorgung_Steckdose_bei_Klavier
      stateOnColor: "#ff0000"
      stateOffColor: "#000000"
    path1053-9-5-9:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A2_Stromversorgung_Steckdose_fur_Weihnachtsbaum_beim_Staubsaugerroboter
    g1220:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: KNX_Schaltaktor_A2_Stromversorgung_Steckdose_fur_Weihnachtsbaum_beim_Staubsaugerroboter
      stateItems:
        - KNX_Schaltaktor_A2_Stromversorgung_Steckdose_fur_Weihnachtsbaum_beim_Staubsaugerroboter
      stateOnColor: "#ff0000"
      stateOffColor: "#000000"
    text4256:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      stateItems:
        - Bewegungsmelder_M17_Temperatur_IST
      useProxyElementForState: true
    path17759:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      stateItems:
        - Multidose_157_Fensterkontakt_Ost
      stateOnColor: =(items.Multidose_160_Turkontakt_Hauswirtschaftsraum.state=='OPEN')
        ? '#ff0000':'#000000'
      stateOffColor: "#0000ff"
    path18049:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      stateItems:
        - Multidose_157_Fensterkontakt_Ost
      stateOnColor: =(items.Multidose_160_Turkontakt_Hauswirtschaftsraum.state==='OPEN')
        ? '#ff0000':'#000000'
      stateOffColor: "#0000ff"
  gridEnable: false
  colNum: 6
blocks: []
masonry: []
grid: []
canvas: []

I have also deleted the cache of the current browser and I also checked this with Firefox and Chrome.

I haven’t seen any UI changes regarding dealing with SVGs from 4.3.0 to 4.3.1, so I haven’t updated to 4.3.1 yet.

Attached the screenshot (currently no access to SVG) for the mobil phone version of the gardenview:

stefan.hoehn · January 14, 2025, 7:28am

Before we do a private remote session to debug it on your side, I put together a simple example that works which only contains a text:

Here is the svg (click on it and “save as…”):

text

and here is how I defined the text (note that the item is linked to the tspan element, not the text element)

 <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
       x="8.426899"
       y="36.443012"
       id="text1"><tspan
         sodipodi:role="line"
         id="textContent"
         style="stroke-width:0.264583"
         x="8.426899"
         y="36.443012"
         flash="true"
         openhab="true">MyText</tspan></text>

Here is the definition of the canvas (paste it into the code tab):

config:
  embedSvg: true
  embedSvgFlashing: true
  embeddedSvgActions:
    textContent:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      stateItems:
        - slider1
  fixedType: canvas
  grid: 10
  hideNavbar: true
  imageUrl: /static/text.svg
  label: circle_floor
  layoutType: fixed
  screenHeight: 1080
  screenWidth: 1920
  sidebar: false
  visibleTo:
    - role:administrator
blocks: []
masonry: []
grid: []
canvas:
  - component: oh-canvas-layer
    config:
      preload: true
    slots:
      default: []

Define the item 'slider1" as follows:

label: Slider 1
type: Dimmer
category: light
groupNames:
  - verschiedenes
tags:
  - Point

Result (item set to 77 and canvas displaying 77):

Lomex · January 14, 2025, 5:58pm

You made my day, @stefan.hoehn!

With your help I found the problem. I had set the “openhab=true” with inkscape, but unfortunately within <text> and not within <tspan>. I didn’t notice the error because in the past I also had links with “ng-bind” and “ng-class” and so on in the SVGs, these were within the <text> area and it worked.

Now the result of the garden view looks much better due to the content:

In my opinion, there is no need to change the documentation [Fixed Layout Pages | openHAB], it is already pretty much written there. You just have to read it properly (and understand it).

Thank you for your support.