# Interactive SVG Backgrounds / Dialog is not appearing

**URL:** <https://community.openhab.org/t/interactive-svg-backgrounds-dialog-is-not-appearing/160981>\
**Category:** UIs\
**Created:** [December 19, 2024, 6:32pm UTC](https://community.openhab.org/t/interactive-svg-backgrounds-dialog-is-not-appearing/160981 "2024-12-19T18:32:47Z")\
**Posts on this page:** 1\
**Showing post:** 20

<div class="post-metadata">

**Author:** ![stefan.hoehn](https://community.openhab.org/user_avatar/community.openhab.org/stefan.hoehn/32/81928_2.png) [@stefan.hoehn](https://community.openhab.org/u/stefan.hoehn)\
**Post date:** [December 23, 2024, 9:49pm UTC](https://community.openhab.org/t/interactive-svg-backgrounds-dialog-is-not-appearing/160981/20 "2024-12-23T21:49:30Z")

</div>

By the way, maybe this example could help you, which I used for testing during the development. It should give you a number of ideas. I hope it works without the items on your side.

Use the attached SVG

 ![Obergeschoss-fixed](https://community-openhab-org.s3.dualstack.eu-central-1.amazonaws.com/original/3X/b/e/bed9458879a66c9487bf90c9766fe7f2084192df.svg)

and this yaml

```yaml
config:
  embedSvg: true
  embedSvgFlashing: true
  embeddedSvgActions:
    AZ_main_light_slider:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: F2_Office_Main_Light
      stateItems:
        - F2_Office_Main_Light
      stateOffAsStyleClass: sz_main_light_buttonLine:buttonLine_toOff,
        sz_main_light_roundedButton:roundedButton_toOff
      stateOnAsStyleClass: sz_main_light_buttonLine:buttonLine_toOn,
        sz_main_light_roundedButton:roundedButton_toOn
    AZ_main_light_state_info_text:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      stateItems:
        - F2_Office_Main_Light
      stateOffColor: "#00FFFF"
      stateOnColor: "#FFFF00"
    Sofa:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: F2_Office_Main_Light
      stateItems:
        - F2_Office_Main_Light
      stateOnColor: "#0000FF"
      useProxyElementForState: true
    andrea:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      invertStateOpacity: false
      stateAsOpacity: true
      stateItems:
        - AndreasPhone
      stateMinOpacity: "0.2"
      useProxyElementForState: false
    aussentemperatur_text:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      useDisplayState: true
      stateItems:
        - garten_temperature
    az-main-lightbulb:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: F2_Office_Main_Light
      stateAsOpacity: false
      stateItems:
        - F2_Office_Main_Light
      stateOnColor: "#00FF00"
      useProxyElementForState: true
    az-main-lightbulb2:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: F2_Office_Desk_Light
      stateAsOpacity: true
      stateItems:
        - F2_Office_Desk_Light
      useProxyElementForState: true
    az-nano-triangles:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: AZ_Govee_Light_Strip_Power
    az_balkon_tuer_group:
      actionCommand: ON
      actionCommandAlt: OFF
      invertStateOpacity: false
      stateAsOpacity: true
      stateItems:
        - AZTuerSensor
      useProxyElementForState: true
    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
      useProxyElementForState: true
    az_nano_duck:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: AZNano_Theduck
    az_nano_triangles:
      action: group
      actionCommand: ON
      actionCommandAlt: OFF
      actionGroupPopupItem: NanoleafAZTriangles
    az_neon_strip:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      actionItem: AZ_Govee_Light_Strip_Power
      stateAsOpacity: false
      stateItems:
        - AZ_Govee_Light_Strip_Power
        - AZ_Govee_Schreibtisch_Light_Strip_Color
      stateOnColor: "=(items.AZ_Govee_Light_Strip_Power.state==='ON') ?
        items.AZ_Govee_Schreibtisch_Light_Strip_Color.state: '#aaaaaa'"
      useProxyElementForState: true
    az_seite_rollladen:
      invertStateOpacity: true
      stateAsOpacity: true
      stateItems:
        - F2_Office_shutter_side
    call_jonas:
      actionCommand: ON
      actionCommandAlt: OFF
      stateItems:
        - TestTrigger2
      stateOnAsStyleClass: jonas_astro_animate:animate
    jonas:
      action: toggle
      actionCommand: ON
      actionCommandAlt: OFF
      stateAsOpacity: true
      stateItems:
        - JonasPhone3_Online
      stateMinOpacity: "0.2"
    stefan:
      actionCommand: ON
      actionCommandAlt: OFF
      stateAsOpacity: true
      stateItems:
        - StefansPhone2
      stateMinOpacity: "0.2"
  fixedType: canvas
  imageUrl: /static/Obergeschoss-fixed.svg
  label: Obergeschoss (fixed)
  layoutType: fixed
  screenWidth: 1300
  sidebar: true
  style:
    background-color: black
blocks: []
masonry: []
grid: []
canvas: []

```

---

_[View the full topic](https://community.openhab.org/t/interactive-svg-backgrounds-dialog-is-not-appearing/160981)._