How can I set an "element template" for a list of entity IDs?

[ndbroadbent]

Related: #159

I'm designing a floorplan in Figma and it doesn't allow me to re-use the same ID. Sometimes I have multiple things in my SVG that control or display the same entity. I want to be able to add a prefix to the element ID, and define a template string (or JS function) that ha-floorplan will use.

Example:

I have some "hotspots" in my floorplan that are clickable rectangles to control certain lights. I want to prefix these IDs with "hotspot":

<g id="Hotspots">
<path id="hotspot.cover.garage_door"  ...
<rect id="hotspot.light.workshop_desk_lamp" ...

I also use those light entity ids in a different place:

<g id="Lights">
<g id="light.workshop_desk_lamp">
<path id="light.workshop_desk_lamp.off" ...
<g id="light.workshop_desk_lamp.on"> ...

So I want to be able to do this in my config:

rules:
    - entities:
        - light.workshop_desk_lamp
        - light.office_hue_bookshelf
        - light.hue_lightstrip_hallway_floor
        - cover.garage_door
      element: hotspot.${entity.entity_id}
      tap_action: toggle

I tried a few other ways but I get:

WARNING CONFIG Cannot find element 'hotspot.${entity.entity_id}' in SVG file

I also tried to specify a list of elements, but that crashes with an error: "A rule cannot contain both 'entities' and 'elements' in floorplan configuration."

The entities array is handy, but feels a bit restricted since I don't have any control over the SVG element IDs.

Is there any templating or JS I can use to solve this?

[ndbroadbent]

It looks like this could be solved by using this.evaluate() on this line: https://github.com/ExperienceLovelace/ha-floorplan/blob/master/src/components/floorplan/floorplan-element.ts#L1146

else if (rule.element) elementIds = elementIds.concat(this.evaluate(rule.element, entityId));

Then it would support JS code starting with > or ${ and I write a template. I will send a PR

[OzGav]

If you make the change locally and verify it works without introducing any other issues that would be the best first step.

[ndbroadbent]

Thanks @OzGav, I've just tested it out locally and everything works great. I also really like that I can organize my IDs nicely with some prefixes for different rules, like motion., timer., floor., etc.

This is the change:

diff --git a/src/components/floorplan/floorplan-element.ts b/src/components/floorplan/floorplan-element.ts
index b49ee49..b2ada11 100644
--- a/src/components/floorplan/floorplan-element.ts
+++ b/src/components/floorplan/floorplan-element.ts
@@ -1143,7 +1143,9 @@ export class FloorplanElement extends LitElement {
     for (const entityId of entityIds) {
       let elementIds = [] as string[];
       if (rule.elements) elementIds = elementIds.concat(rule.elements);
-      else if (rule.element) elementIds = elementIds.concat(rule.element);
+      else if (rule.element) elementIds = elementIds.concat(
+        this.evaluate(rule.element, entityId, undefined) as string
+      );
       else if (rule.element !== null) elementIds = elementIds.concat(entityId);
       this.addTargetEntity(entityId, elementIds, targetEntities);
     }

Here's the ha-floorplan config I'm working on for my garage / workshop area, updated to use this change with element as a JS template: https://gist.github.com/ndbroadbent/df2e20958a9de4365b6f9decc0e75185

[OzGav]

@pkozul and @exetico are the code experts so one of them will check out your PR. This looks like a very neat solution. Thanks for coming up with it.

[exetico]

Thanks for the PR.