Floorplan - multiple icons for the same switch

Third party integrations Floorplan
#1

Hi all,

I would like add the three lights of my corridor that are switched on/off with a single switch at floorplan but if I add multiple icons with the same id, it only shows one in floorplan.
This is what I have in inkscape:
image
That what I got in HA:
floorplan

Does anybody know how to do it? I have tryied to create a group with those 3 elements but it does not work.

Thanks!

#2

Perhaps you can have three input_booleans that all are synced and they trigger the light

#3

Yeah, that could be a solution (as mentioned in this topic Floorplan multiple objects for the same switch?) but if possible, I would rather find a simpler solution :slight_smile:

Anyway, thanks for your sugestion.

#4

If I understand what you are after put the light icon in the 3 places then highlight all three using SHIFT then group them. Then add the entity id to be group. Will that do what you are after?

#5

If I group these three lights like this:

image
image725Ă—254 27.2 KB

what I got is this:
image
so, it does not work for me

#6

I am not sure why you have three red squares. Why don’t you have the icon for the light bulb in those three places?

#7

the three red squares are the places where it is suppose to appear each light bulb… but instead, it appears a huge light bulb with the height and width of the group selection…

maybe the problem is in the foorplan.yaml intead of in the .svg…

in svg I set:

  • group_id: name of my HA switch (switch.shelly_1_xxxxxxx_relay_0)
  • rectangles_id: dummy names

in floorplan.yaml:

        - name: Corridor
          entities:
            - switch.shelly_1_xxxxxxx_relay_0
          image_template: '
            var imageName = "";
            switch (entity.state) {
              case "on":
                imageName = "bulb_on";
                break;
              case "off":
                imageName = "bulb_off";
                break;
            }
            return "/local/custom_ui/floorplan/images/" + imageName + ".svg";
            '
          action:
            domain: homeassistant 
            service: toggle
#8

OK I see now. Instead of varying the image using image_template you could vary the css class.

Here is my CSS for visible and invisible objects:

.always-invisible {
  visibility: hidden;
  opacity: 0 !important;
  stroke-opacity: 0 !important;
}

.always-visible {
  visibility: visible;
  opacity: 1 !important;
  stroke-opacity: 1 !important;
}

and here is an example from ui-lovelace.yaml of where I am showing or hiding the image associated with the switch:

            - action:
                service: switch.toggle
              entities:
                - switch.study_aircon_zone
              name: Switches
              states:
                - class: always-visible
                  state: 'on'
                - class: always-invisible
                  state: 'off'

If you have the three bulb icons added to your SVG and then group them I think you should find they are invisible when the light is off but if you touch in any of the three places where the bulb is they will all become visible and the light will turn on. Will that be any good?

#9

Thanks for your suggestion! This works but partially… I mean, meanwhile the light is on I can see the light bulb icon for the three lights I set at svg but when turned off, these light bulbs disappears :frowning: What I need is that in off state the bulb like this:
test

#10

Yes no problem. Add a white bulb to the SVG in the 3 locations (I assume this is the OFF indication). Now add a yellow bulb exactly on top of each of those white bulbs, group only the yellow bulbs and then set up the yaml as before. Now when the lights are off the yellow bulbs should be invisible and when you click on any of the locations the yellow bulbs become visible.

#11

Yes, I was thinking to do that but the problem is that you cannot create 2 groups/entities with the same name. In my case, the group has the name of the switch so if I set the bulbs in off state and I group them, I cannot set the same name of the switch I want to control.

#12

The white bulbs have no entity name. Just put the entity name on the group of 3 yellow bulbs. Even though you cant see them you can still click on them and you know where to click because the white bulb is showing you.

#13

aaaaaah ok, I got it now! Let me try it and I will let you know.

Thanks for your help!

#14

Thanks! It works! :slight_smile: