Picture Elements, external CSS, SVG elements affected by states

[hdcoffeeboy]

I’m a fan of the Picture Elements card, but it would be great if entity states could affect SVG elements and classes.

For example, I have an SVG floor plan which has doors in open and closed positions, and has the floor of each room as a separate element. While lights and fans make sense displayed as state icons, elements like doors, windows, covers and presence sensors are more logically displayed as part of the floorplan itself.

For example the SVG includes each door in the open and closed positions:

<line
...
id="doorLaundryOpen"
class="door"
style="" />

<line
...
id="doorLaundryClosed"
class="door"
style="" />

Then in the external CSS file, doors are defined as a class:

.door {
stroke-width:1px;
stroke-opacity:1;
stroke-linejoin:miter;
stroke-linecap:butt;
stroke:#7f7f7f;
fill:none;
display:inline;
}

And each door (open and closed) is hidden by default by ID:

#doorLaundryOpen {
display:none;
}

#doorLaundryClosed {
display:none;
}

Any CSS valueI can then be changed based on an entity state, eg reveal either the closed or open door element based on the state of the door sensor or turn a floor red when presence is detected.

It also means an element can be highlighted when an element state is not as it should be. eg When the HVAC is running, the laundry and bathroom doors should be closed. If they’re open, and the HVAC is running, they could appear in a different colour.

External CSS typically makes this easier to handle, and can be referenced across cards and dashboards without having to be duplicated (and therefore maintained) in multiple places.

All of this can be done with the ha_floorplan card, but that card doesn’t support state icons and the like. I’d rather not bake every entity into an elaborate SVG and have to replace the SVG file every time I make an adjustment or add a device.

Could HA add external CSS files and SVG element manipulation to Picture Elements cards?