FloorPlan hide/show object base on value

nomad-fr · January 3, 2025, 8:55am

Hi, I’ve an issue in hidding/showing in my FloorPlan a layer (object) based on an entity.state value.

I want to show a box with a battery warning (if this value is low) beside of temperature humidity.

context :
I edit my .yaml on an external editor and use git to sync it on HomeAssistant.

I use Floorplan base base on a svg file :

      - type: custom:floorplan-card
        config:
          image: /local/plan-maison.svg
          stylesheet: /local/multifloor.css

My FloorPlan is base on the ‘Multi Floor Example’. All seems ok, I can change floor and I’m able to show inside the value of my sensor on each floor (temperature/humidity).

I add a box in my svg and also an icon with right ID : [sensor.salle_de_bain_box, sensor.salle_de_bain_low, sensor.salle_de_bain_latency] (latency is for a future usage).

If I use the code bellow I can check that hiding is functional.

                - entity: sensor.salle_de_bain_battery
                  service: floorplan.class_set
                  service_data:
                    class: |
                      >
                        var power = 2.5;
                        if (power < 1)
                        return "layer-visible";
                        else
                        return "layer-invisible";
                    elements:
                      - sensor.salle_de_bain_box
                      - sensor.salle_de_bain_low

If I change manually inside code the value of ‘power’ it works.

I’ve 2 separate element : [sensor.salle_de_bain_box, sensor.salle_de_bain_low] because I want to be able to also show latency trouble in the same box.

I’ve tried to change ‘var power = 2.5;’ to one of the following but with no chance :

var power = states(‘entity.state’);
var power = states(entity.state);
var power = change ‘var power = 2.5;’ to states(‘sensor.salle_de_bain_battery’);
var power = states(‘sensor.salle_de_bain_battery’) | float(1);
var power = (entity.attributes.battery);
var power = states(sensor.chambre_battery.state);
var power = states.sensor.salle_de_bain_battery.state;

In the dev tool (developer-tools/template) I can make it work like this :

How can I make it works inside my .yaml ?

Thanks.

OzGav · January 3, 2025, 11:37am

How about

var power = parseFloat(entity.state);

nomad-fr · January 3, 2025, 11:56am

Like the others it give the following error :

Object { expression: '>\n var power = parseFloat(entity.state);\n if (power < 1)\n return "layer-invisible";\n else\n return "layer-visible";\n', entityId: undefined, hass: {…}, svgElement: g#ground-button.button-on }

[floorplan.js:131:25479](https://...8123/hacsfiles/ha-floorplan/floorplan.js)

1/3/2025, 11:54:49 AM ERROR i is undefined (See console for more info)

...

Object { expression: '>\n var power = parseFloat(entity.state);\n if (power < 1)\n return "layer-invisible";\n else\n return "layer-visible";\n', entityId: undefined, hass: {…}, svgElement: rect#sensor.salle_de_bain_box

}

[floorplan.js:131:25479](https://...:8123/hacsfiles/ha-floorplan/floorplan.js)

1/3/2025, 11:54:49 AM ERROR i is undefined (See console for more info) [floorplan.js:54:47970](https://...:8123/hacsfiles/ha-floorplan/floorplan.js)

EvalError: i is undefined

...

Object { expression: '>\n var power = parseFloat(entity.state);\n if (power < 1)\n return "layer-invisible";\n else\n return "layer-visible";\n', entityId: undefined, hass: {…}, svgElement: path#sensor.salle_de_bain_low

}

[floorplan.js:131:25479](https://...:8123/hacsfiles/ha-floorplan/floorplan.js)

1/3/2025, 11:54:49 AM ERROR i is undefined (See console for more info)

OzGav · January 3, 2025, 2:42pm

Ok this works for me. I think maybe it is your attempt to put those element keys in the action. Try removing those

                - service: floorplan.class_set  
                  service_data: |
                    >
                      var temp = parseInt(entity.state); 
                      if (temp < 3) return "uv-low"; 
                      else if (temp < 8) return "uv-medium"; 
                      else return "uv-high";