Assigning multiple entities to a single SVG ID?

Third party integrations Floorplan
1

Hello all!
I’m new to the community. Got started when I saw some other floorplans around.

I’ve been trying to tinker as I’m learning, but I am stumped. I’ve tried various Google searches, and reading through forum posts, but I just can’t find my answer. I’m sure this is fairly basic HA/answered a thousand times.

I’ve set up my floorplan, and drew a custom svg shape over my living room. I was able to assign a light to it (e.g. light.living_room_1).
However, we have 3 lights in that room (e.g. light.living_room_1, light.living_room_2, and light.living_room_3), and I want all lights to turn on/off when I click the room.

I’ve figured out how to group lights so that they show up in dev-state as “group.living_room_lights”, so I assumed that I could use that as my ID in Inkscape for the living room shape, but that doesn’t seem to be clickable on HA.

Help would be greatly appreciated! I’m loving this project and community so far!

Edit: Video @ https://youtu.be/PQdWl75vELM

2

Well, I’ve sort of got it working… but then it introduced another “bug.”

I used a script to allow me to turn on multiple lights at once, and then used the script.living_room_lights as my ID in Inkscape. But because it’s a Script, I guess it doesn’t have an on/off state. It just toggles the lights on or off depending on what their state is. So now the on/off css doesn’t show up properly.

Video showing multiple lights turning on with one click, but css not working: https://youtu.be/f-RM_81OXpI

scripts.yaml

living_room_lights:
sequence:

  • service: homeassistant.toggle
    entity_id:
    • light.living_room_1
    • light.living_room_2
    • light.living_room_3

floorplan.yaml

groups:

  • name: Toggle Living Room Lights
    entities:
    • script.living_room_lights
      states:
      • state: ‘on’
        class: ‘room-light-on’
      • state: ‘off’
        class: ‘room-light-off’
        action:
        domain: homeassistant
        service: toggle

floorplan.css

.room-light-off {
  fill: #000000 !important;
  fill-opacity: 0.5 !important;
  stroke: #000000 !important;
  stroke-opacity: 0.5 !important;
}

.room-light-on {
  fill: #000000 !important;
  fill-opacity: 0 !important;
  stroke: #000000 !important;
  stroke-opacity: 0 !important
}
3

Thanks to some help on the Home Assistant Discord channel (AtomicPapa), I’ve now got it working as desired.

I’ll write a sample of the code here for anyone who may stumble on this with the same request.

Essentially what I had to do was:

  1. set up an input boolean to determine the state of the room (lights on or lights off).
  2. set up two scripts, one to turn all of the lights in that room on and the second to turn all of the lights off.
  3. set up two automations, one to listen for the input boolean to be on so that the script for lights on would be fired. And the second to listen for the input boolean to be off so that the script for the lights to be turned off would be fired.
  4. change my SVG ID to be the input_boolean.

.
.
===== configuration.yaml =====

input_boolean:
  living_room_lights_status:
    name: Current Status of Living Room Lights
    initial: off
    icon: mdi:light

.
.
===== scripts.yaml =====

living_room_lights_on:
  sequence:
  - service: homeassistant.turn_on
     entity_id:
     - light.light_1
     - light.light_2
     - light.light_3
 
living_room_lights_off:
  sequence:
  - service: homeassistant.turn_off
    entity_id:
     - light.light_1
     - light.light_2
     - light.light_3

.
.
===== automations.yaml =====

- alias: living_room_lights_on
  trigger:
    platform: state
    entity_id: input_boolean.living_room_lights_status
    from: "off"
    to: "on"
  action:
    service: script.living_room_lights_on

- alias: living_room_lights_off
  trigger:
    platform: state
    entity_id: input_boolean.living_room_lights_status
    from: "on"
    to: "off"
  action:
    service: script.living_room_lights_off

.
.
===== floorplans.yaml =====

groups:         
  - name: Toggle Living Room Lights
     entities:
     - input_boolean.living_room_lights_status
     states:
       - state: 'on'
         class: 'room-light-on'
       - state: 'off'
         class: 'room-light-off'
     action:
       domain: homeassistant
       service: toggle

.
.
===== floorplan.css =====

.room-light-off {
  fill: #000000 !important;
  fill-opacity: 0.5 !important;
  stroke: #000000 !important;
  stroke-opacity: 0.5 !important;
}

.room-light-on {
  fill: #000000 !important;
  fill-opacity: 0 !important;
  stroke: #000000 !important;
  stroke-opacity: 0 !important
}

.
.
===== floorplan.svg =====

As mentioned above, make sure to set up the SVG ID of your room (or your entity) as your input_boolean. So in this case it would be input_boolean.living_room_lights_status

And that should work!