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

5

I am interested in it, currently I am using several png pictures for different state, it work well but each png file cost 1.7MB to load, so I am wondering if svg is a better solution for performance or not

6

1.7MB doesn’t seem that big to me and the browser will cache it if you enable that option.

7

IMG_7302
IMG_7302697×323 67.4 KB

Yeah on pc browser it is not a problem, but companion app I still get slow loading, sometime it load instantly sometime it not, so I still want to make the lovelace more light.

I also stream 4 camera on that lovelace.

8

I am not sure how you are doing this but if you embed the PNG into your SVG then after an initial load it should be fairly quick (and won’t be downloading every time)

9

IMG_7303
IMG_7303828×1792 152 KB

Currently I just simple use picture entity card with mix blend mode to mix a light picture (when light entity on) and a dark background picture.

When I open companion app, sometime it load picture by picture, some time it do not load, sometime it’s already there.

Once the lovelace is load, the picture change is imediately when state change, so I think it is just the first init loading

10

Ok this thread is for the third party integration ha-floorplan

You need to ask your questions in configuration as you are using picture elements.

1 Like