Multi layer SVG for light refractions (ha-floorplan)

Third party integrations Floorplan
#1

Simplifying question.

Old style floorplan: code below overlaid base png file (Ground.png) with another semi-transparent png file (1_doorway_nolights.png) to show light on or just a default 1 pixel png file if entity state is off

    elements:
      - image: /local/Lovelace/floorplan/Ground.png?v=1
        style:
          left: 50%
          pointer-events: none
          top: 50%
          width: 100%
        type: image
      - entity: light.doorway_2
        title: Doorway No Light Overlay
        tap_action:
          action: none
        hold_action:
          action: none
        image: /local/Lovelace/overlay/1x1_trans.png?v=1
        state_image:
          'off': /local/Lovelace/overlay/1_doorway_nolights.png?v=1
        style:
          left: 50%
          top: 50%
          width: 100%
          opacity: 1
        type: image

Now usng svg with these images as layers instead, so layer called Ground (just one object image in it called GroundPic) and layer called 1_doorway_nolights (just one object image called 1_doorway_nolightsPic). Identical images to previous png versions. How do i code the references to these layers (or just the pics) to overlay the same way as I did with the png code?

If I can understand this, I think I can really get going with ha-floorplan. The examples do not seem to deal with multiple layers in svg files. It may be I need to use just the image objects but I still need to understand the code required.

#2

Not much success with replies so I will ask a very straightforward question. Might help me.

I have an SVG that has a group called YouTubeToggle. This contains, in the same xy position, the image of an off switch (YouTube_off) and an on switch (YouTube_on)

Either will be visible\hidden based on the state of the switch.harmonyhub_youtube entity.

If already on, I want the clicking of YouTubeToggle area to do nothing.
If already off, I want the clicking to change the switch.harmonyhub_youtube entity to on and the visible button to be YouTube_on

Toggling this state does affect other entites reflected in my svg (eg switch.harmonyhub_netflix wil be toggled automatically if switch.harmonyhub_youtube toggles to on - or so I understand Harmony integration works that way) so I want the svg to recognise state changes and do a similar thing as soon as their status is changed.

To get the initial states/button images, what code do I require?
To reflect the YouTubeToggle tap, what code do I require?
How do I ensure that status changes are automatically reflected on the svg objects?

#3

Realise question was long winded but still need help with it

#4

It takes a bit of re-coding but moving to the latest version will help with us providing support.

Talking generally though I am not sure I understand the issue. In your first post are you saying you had it working well using PNG images but it isn’t with SVG? It should work exactly the same way?

With your second post I wouldn’t group the SVG YouTube images. Just have the Off image at the bottom and the on image at the top. Assign the top image the ID of switch.harmonyhub_youtube and then you would show/hide that image according to state.
As for the behaviour when touching the icon I think you will need another input_boolean (mapped to an invisible touchpoint above the YouTube ON image) that is synced via an automation to the state of switch.harmonyhub_youtube and that when tapped in floorplan will call a script that only turns the switch on if it is off but does nothing if it is on.
If you have the ID of the SVG elements the same as the HA entity and you have appropriate entries in your YAML to show/hide the icons based on their state then changes in the floorplan will happen automatically when the states of the various entities change.

Edit: actually you should be able to just have the service called when the YouTube icon is clicked as switch.turn_on