Picture Elements SVG Interactions

Feature Requests
1

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 as state icons, doors, windows, covers and presence sensors are more logically displayed as part of the floorplan itself.

I know that 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 elaborage SVG and have to replace the SVG file every time I make an adjustment or add a device.

Could HA add this, and the ability to have external CSS files, to Picture Elements cards?

2

Can you expand on what you mean by this?

Just a heads up…You can also vote for your own FR

3

To use my SVG floor plan as an example, I’ve removed as much formatting as possible from the SVG, and placed it in a separate CSS file, eg:

<line
     x1="9.579834"
     y1="103.44727"
     x2="46.55983"
     y2="103.44727"
     id="doorLaundryOpen"
     class="door"
     style="" />

Then in the CSS, I have classes, eg:

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

And IDs:

#doorLaundryClosed {
  display:none;
}
#doorLaundryOpen {
  display:none;
}

I can then override the CSS based on states, eg turn a floor red when presence is detected, or reveal either the closed or open door element based on the state of the door sensor.

It also means I can highlight an element that is not as it should be. 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.

4

Yeah style sheets

5

Hello Tim Stolk,

This appears to be a Frontend Related Feature Request as it is asking for changes to Frontend Menus, Dashboards, or Sections.

These Feature Requests are handled in a different system, and will not be seen by the right people if posted in the HA forums.

Please add your Feature Request into GitHub here:
home-assistant/frontend Other Feature Requests · Discussions · GitHub.

See more info about Feature Requests HERE

6

Done. Thanks.