Interactive SVG Backgrounds / Dialog is not appearing

Oetzi-1987 · December 19, 2024, 6:32pm

Hi folks,
I would use the new cool feature for Interactive SVG backgrounds.
I made an simple circle and activated the openhab = true parameter inside the svg and also the embedded SVG slider inside the canvas configuration.

When I’m cklicking the flash button the circle is highlighted, but when I’m clicking on the circle the configuration dialog isn’t appearing.

Could anyone suggest me whats wrong?

Animation

SVG Code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->

<svg
   fill="#000000"
   version="1.1"
   id="Capa_1"
   width="800px"
   height="800px"
   viewBox="0 0 595.021 595.021"
   xml:space="preserve"
   sodipodi:docname="2.svg"
   inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg"><defs
   id="defs4" /><sodipodi:namedview
   id="namedview4"
   pagecolor="#ffffff"
   bordercolor="#000000"
   borderopacity="0.25"
   inkscape:showpageshadow="2"
   inkscape:pageopacity="0.0"
   inkscape:pagecheckerboard="0"
   inkscape:deskcolor="#d1d1d1"
   inkscape:zoom="1.02625"
   inkscape:cx="400"
   inkscape:cy="400"
   inkscape:window-width="1920"
   inkscape:window-height="1017"
   inkscape:window-x="-8"
   inkscape:window-y="-8"
   inkscape:window-maximized="1"
   inkscape:current-layer="Capa_1" />
<path
   d="M 507.529,87.493 C 480.265,60.229 448.507,38.821 413.133,23.858 376.489,8.358 337.588,0.5 297.511,0.5 257.433,0.5 218.532,8.358 181.887,23.858 146.514,38.819 114.755,60.229 87.492,87.493 60.228,114.756 38.819,146.515 23.857,181.888 8.358,218.532 0.5,257.434 0.5,297.511 c 0,40.077 7.858,78.979 23.358,115.623 14.961,35.373 36.371,67.132 63.635,94.396 27.263,27.263 59.022,48.672 94.395,63.634 36.645,15.5 75.546,23.358 115.624,23.358 40.077,0 78.979,-7.858 115.623,-23.358 35.373,-14.961 67.133,-36.371 94.396,-63.634 27.263,-27.264 48.673,-59.022 63.634,-94.396 15.499,-36.645 23.358,-75.546 23.358,-115.623 0,-40.077 -7.858,-78.979 -23.358,-115.624 -14.963,-35.372 -36.373,-67.131 -63.636,-94.394 z M 297.511,551.682 C 157.136,551.682 43.34,437.885 43.34,297.511 43.34,157.136 157.136,43.34 297.511,43.34 c 140.374,0 254.171,113.796 254.171,254.171 0,140.374 -113.797,254.171 -254.171,254.171 z"
   id="path2"
   inkscape:label="path2"
   style="display:inline"
   openhab="true">
			
		</path></svg>

florian-h05 · December 19, 2024, 6:42pm

With the information you provided definitely not.
Can you please check the browser console (browser dev tools) for any errors?

Oetzi-1987 · December 19, 2024, 6:57pm

Hopefully, this is the information you need:

Console output:
Unsubscribed from embedded SVG state tracking. app.4c26198030a158df86c4.js:2

florian-h05 · December 19, 2024, 8:34pm

No, unfortunately not.
Is there any error or warning (red or yellow) in the browser console when pressing the button and nothing happens?

(Pulling in @stefan.hoehn: Can you confirm it works for you?)

stefan.hoehn · December 19, 2024, 9:44pm

Gimme some time, I will definitely investigate it on the weekend. In case I forget, ping me again

Oetzi-1987 · December 20, 2024, 11:30am

There is an error after loading the page:

Error:

:8080/settings/pages/layout/page_746b1603ac:1  Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
Element with focus: a
Ancestor with aria-hidden:  <div class="page page-previous page-with-subnavbar" aria-hidden="true">…</div>

ausführlich / detailed:

app.4c26198030a158df86c4.js:2 Start tracking states
app.4c26198030a158df86c4.js:2 new SSE connection: http://openhab.local:8080/rest/events/states, 2 open
app.4c26198030a158df86c4.js:2 (2) [EventSource, EventSource]
app.4c26198030a158df86c4.js:2 Setting initial tracking list (0 tracked Items): []
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10
app.4c26198030a158df86c4.js:2 Setting keepalive interval seconds 10

after clicking on the circle the error / detailed messages are the same.

stefan.hoehn · December 20, 2024, 6:12pm

It is actually working flawlessly on my side. I can click on your circle and the dialog comes up.

Can you create a new fixed-canvas, goto the code tab and paste this into the code?

config:
  layoutType: fixed
  fixedType: canvas
  label: circle_floor
  imageUrl: /static/circle-floor.svg
  embedSvg: true
  embedSvgFlashing: true
blocks: []
masonry: []
grid: []
canvas: []

Then hover over the circle and when the circle flashes red → click.

Oetzi-1987 · December 21, 2024, 12:55pm

when i create an new page configure the canvas layout from scratch the dialouges opens when I’m clicking on the circle as described in the documentaion…

I don’t know what i have done in the first page…

Maybe you can find a problem

Here is the code of the page which isn’t working:

config:
  layoutType: fixed
  fixedType: canvas
  imageUrl: /static/2.svg
  label: Test_Canvas
  sidebar: true
  visibleTo:
    - role:administrator
  embedSvg: true
  showFullscreenIcon: true
  gridEnable: true
  embedSvgFlashing: true
  grid: 10
  screenWidth: 1920
  screenHeight: 1080
  hideNavbar: true
blocks: []
masonry: []
grid: []
canvas:
  - component: oh-canvas-layer
    config:
      preload: true
    slots:
      default: []

stefan.hoehn · December 21, 2024, 1:22pm

I will investigate it but does it now work when you started from scratch? Otherwise I would offer you to make a remote session with me, so we can analyse it together.

Oetzi-1987 · December 21, 2024, 1:23pm

I had found another hint i will give you, but I’m not sure if i should open a new thread.
If I put a status color for in and off in the Dialog, which is in my case red / green then I got the following console messages:

invalid rgb values in configured color: green   app.4c26198030a158df86c4.js:2 
invalid rgb values in configured color: red     app.4c26198030a158df86c4.js:2

If I take the hex format for the color, everything is fine. If this is the way to do there should be an hint under the color input field

Oetzi-1987 · December 21, 2024, 1:23pm

Yes it works now from scratch.

stefan.hoehn · December 21, 2024, 9:02pm

This is the way to go, color names are not supported. Yep, maybe I’ll add that to the text or at least to the documentation.

Oetzi-1987 · December 22, 2024, 1:03pm

Thanks for your reply about the documentation I think the text under the input field is also important, because real man don’t need a documentation

I also got another thing with displayState as Text which isn’t working.

Should I open another threat or post all the details here?

stefan.hoehn · December 22, 2024, 1:23pm

Jut go on here, so we can sort all issues out here.

Tell me your usecase (I hope you have read Fixed Layout Pages | openHAB)

stefan.hoehn · December 22, 2024, 2:44pm

The incompatibility is with enabling the grid, don’t know why. This needs to be investigated. I wouldn’t mind if you created an issue for that on github.

(cc @florian-h05)

Oetzi-1987 · December 23, 2024, 2:40pm

You are right, it seems to be the grid. If I made it invisible again, the dialog is visible.
I will open an issue afterwards.

Issue: https://github.com/openhab/openhab-webui/issues/2944

Actual workaround: set the grid as invisible.

stefan.hoehn · December 23, 2024, 3:32pm

Thanks, Patrick. I will eventually look into to it.

Oetzi-1987 · December 23, 2024, 4:23pm

so now here is the second i already announced yesterday is there the possibility to use another state as on / off for changing the color? Especially for a door switch like open / close?

stefan.hoehn · December 23, 2024, 6:54pm

Yes, openclosed is also supported by default.
And you can use expressions to calculate the color, e.g.

State On Color:

=(items.AZ_Govee_Light_Strip_Power.state===‘ON’) ? items.AZ_Govee_Schreibtisch_Light_Strip_Color.state: ‘#aaaaaa’

In this case the element reflects the color of the lamp if the lamp is on, if it is off it will become gray. (I use this to color my led light strips in my room)

stefan.hoehn · December 23, 2024, 9:49pm

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

and this 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: []