Causally linking objects in svg file

I’ve been searching a bit, but can’t seem to find what I’m looking for. I would like to “link” objects causally, where object A corresponds to a home assistant entity, and the other objects in the svg file are “slaves” to the status of object A.

Specifically, I’d like to be able to toggle e.g a light, and have the status of the light also change the color/stroke type/visibility/etc. of a different object, or have the status of device battery level change the charge symbol (the circles at the top; I’d like the “charge circles”, which are 100 individual objects, to appear/disappear based on the battery charge levels). And for other uses as well.


In the image above, I would like the circles with the temperature in them to toggle the light group for the room, and if any light in the light group is on, the “glow” around them should be on.

The best thing I’ve been able to find is that it might be able to work with the visibility toggle, if that can toggle both a light, the color of the light object AND a layer-hidden/visible? But unless I’m really missing something, that would still require an independent layer for each light, each light group, each other object I want to toggle like this? And I can’t use it to change the color of something else, only to show/hide (of course you could show one, while hiding another, but then it’s just even more layers).

So I guess what I’m hoping for is that there’s a way to say if status for object A is X, then object B (C, and D) uses parameters X from the .css, etc.

If anyone has an idea, I’d love to hear it.

I think you name the glow bits “light.whatever_name_you_gave_the_light” in the SVG, then add it to the floorplan.yaml ie: id='light.somelightyounamed'

That’s what I thought, but I can’t give two objects the same name in the SVG; I get an “Id exists!” error when I try. And the light.somelightyounamed is already used for something else (for the light example, it’s used for the object that toggles the light on/off).

You could make a template in homeassistant as a dummy light and link it to toggle when then other light does. Only work around I can think of for this.

Great idea! I might be doing this the cumbersome way (I probably am, so if anyone has an easier way of setting this up, please let me know), but at least it works.

I’m using an input_boolean as my “dummy switch” (so I can manually toggle of they get out of sync). Then two automations to change the input_boolean on/off when the light is turned on/off.

- alias: 'switch dummy light on'
  trigger:
    platform: state
    entity_id: light.color_temperature_light_1
    from: 'off'
    to: 'on'
  action:
    service: input_boolean.turn_on
    entity_id: input_boolean.color_temperature_light_1

- alias: 'switch dummy light off'
  trigger:
    platform: state
    entity_id: light.color_temperature_light_1
    from: 'on'
    to: 'off'
  action:
    service: input_boolean.turn_off
    entity_id: input_boolean.color_temperature_light_1

Then just set up the new dummy object in the floorplan.yaml and *.css as usual. There’s a ~0.5 second delay from the actual light icon to the dummy “halo” icon is turned on in the floorplan, but it works. Thanks @firstof9!