Show/Hide Entity Status (Text) in HAFloorplan based on another entity status condition

[Scarpetta3]

Good morning,
this is my goal: I would like to show and hide a text (the numeric status of an entity (for simplicity I'll call it entity1) - I've already managed to display it in HAfloorplan without condition) based on a condition, more precisely on a status, of another entity (for convenience entity2).

Here is what I wrote:

entity: sensor.entity1
state_action:
  - service: floorplan.text_set
    service_data:
      element: testo1
      text: |
        >
        if (sensor.entity2.state == "on") {
          return Math.round(entity.state * 10) / 10 + "°";
        }
        else {
          return " ";
        }

Thank You very much in advance

[OzGav]

Yes I think you are trying to do what I asked about here #156

There will be a couple of ways to achieve this. I use the following to hide a power value when it is low (I.e. off)

         - entities:
                - entity: sensor.car_charger_power
                  element: car.charger_kW
              name: textSensors
              state_action:
                - service: floorplan.text_set
                  service_data: '${parseFloat(entity.state.replace(/\s{2,}/g,"")).toFixed(0)} W | ${(parseFloat(entity.state.replace(/\s{2,}/g,"")) /1000 / 44.5 * 263).toFixed(1) } km/h'
                - service: floorplan.class_set
                  service_data:
                    class: '${(parseFloat(entity.state) > 1) ? "always-visible" : "always-invisible"}'

What you can also do is have the text always shown as the value of sensor.entity1 and then have a polygon over the top of it that is hidden in one state of entity.sensor2 and shown in the other. The polygon would be the same colour as your background so it “hides” the value when it is in view. Hopefully that makes sense.

[exetico]

Hi,

There's many ways to do this.

1. First of all, you could use the hass object, to get the state of another entity.

2. You could expose the data of entity2 on every state change, and use that in the logics of entity1 (could be a local browser var or exposed at the DOM-element for entity2 aka. element2)

They most relevant question is, how complex you'd like to have your code? The first one will require you to navigate around in the hass object. The secound option will require you to have another state_action for entity2, securing that it's always up to date.

Did you know that ha floorplan supports variables? Well, that's option 3, but where you update the local ha-floorplan variable if entity2 changes, and use the variable in the logics for entity1.

You could also create a "common" function, and call that if a change happens on one of the two entites, and just call that - instead of having to save the variables.

@OzGav The :has CSS selector are rolling out to the most common browsers as we speak. Take a look at that 😊.

[exetico]

☕ Did you find this useful, and would you like to say thanks? Buy me a coffee at: https://www.buymeacoffee.com/coffeetoexetico (Support my ha-floorplan work, say thanks for 1-to-1 help in discussions and whatever else you think about 😺)

---

Here's case no. 1:

# Case 1
# Entity1 = sensor.aqara_sensor2_temperature
# Entity2 = light.spotlys_gang
# if entity2 = on, show info of entity 1 - else hide it, using the HASS object
name: Case 1
element: sensor.hallway
entities:
  - sensor.aqara_sensor2_temperature
state_action:
  - service: floorplan.text_set
    service_data:
      text: |
        > /* Debug info */
        console.log(hass);

        /* Let's do it */
        let textValue = false;
        let onStateEntityRef = "light.spotlys_gang";
        try{
          if(hass.states[onStateEntityRef].state === "on"){
            textValue = Math.round(entity.state * 10) / 10;
          }else{
            // You could extend this with another === "off", but now that our expression is not failed,
            // the state is something OTHER than "on", and that's fine with me
            textValue = '';
          }
          return textValue;
        }
        catch(e){
          return 'Error in logic';
        }

Kindly note that you have one problem. If the state of entity2 is changing, you won't see any change of the element related to entity1. There's the reason I'd suggest you to go with two separate logics, instead of one.

[exetico]

If you'd like to play around with variables, here's one simple example. Most of these things is not documented, yet. So I'll share it here, so @OzGav knows them, too.

Add this within the "config" key in ha-floorplan (same location as stylesheet and so on):

variables:
# Name can also be something without the "floorplan." prefix
# it's just easier to handle and navigate in the keys
  - name: floorplan.state_light_spotlys_gang
    value: 'null'
  - name: floorplan.example_variable
    value: 'Bob example initiated'

startup_action:
# variable_set will only work as expected, if the variables has been declared in the variables: key
  - service: floorplan.variable_set
    service_data:
      variable: floorplan.example_variable
      value: |
        > console.log("🥸 Hi, example_variable will now be defined");
        return "Bob updated in startup_action";
# I've added the execute service, just for you to see that, too. That can be removed...
  - service: floorplan.execute
    service_data:
      script1: |
        > // Example  
        console.log("🥸 Floorplan started - I'm triggered by the startup_action config-key");

And here's the example on how to use the variable, and how to update it, within a specific rule:

name: Case 2 Entity 2
entities:
  - light.spotlys_gang # entity2
state_action:
  - service: floorplan.execute
    service_data:
      script_debug1: |
        > console.log("Test", entities);
  - service: floorplan.variable_set
    service_data:
      variable: floorplan.state_light_spotlys_gang
      value: |
        > // Not used for anything, but examples to ha-floorpla
        return entity.state;
  - service: floorplan.execute
    service_data:
      script_debug2: |
        > console.log("Get starte of our variable", entities["floorplan.state_light_spotlys_gang"]);

Note that variables must be defined as it is here in the examples. Else, it won't work.

With that said: I'm only providing this example, cause I'm a bit unsure if your own scenario is way more complex, or if it's 1:1 with the one you've metioned in the first post 😄.

Variables are most likely to be used in a case where you'd like to store an action, last press, a int-value counting up or down, allowing a user to select a playlist, and press play on another svg-element.. Or, simular things.

I'll give you one more example, with a (almost) bullet proof example.

[exetico]

I'll wait a bit with the last one, cause I'm trying to find the most logical way 😊👍. Maybe extending the source-code if needed.

[exetico]

And here's case 4, where a function is used.

The functions key is defined at the same level as image and rules and so on:

functions: |
  >
  return {
    controlEntity1And2FunctionSimple: (
      entities, entityKey1, entityKey2
    ) => {
      try {
        const entity1 = entities[entityKey1];
        const entity2 = entities[entityKey2];

        let textValue = false;

        if(entity2.state === "on"){
          textValue = Math.round(entity1.state * 10) / 10 + "°";
        }

        return textValue ? textValue : '';
      } catch (e) {
        console.log("Something failed on the way...", e);
        return 'Error';
      }
    },

And the following code should be used for elements involved, in the state_action:

  - service: floorplan.text_set
    service_data:
      element: "sensor.hallway"
      text: |
        > /* Use this function for both entities, to secure updates on both */
        const textValue = functions.controlEntity1And2FunctionSimple(entities, "sensor.aqara_sensor2_temperature", "light.spotlys_gang")
        return textValue;

If you have one rule with both the entities, you can save some lines by combining it into this:

name: Case 4
entities:
  - sensor.aqara_sensor2_temperature
  - light.spotlys_gang
element: area.hallway
tap_action:
  service: light.toggle
  service_data:
    entity_id: light.spotlys_gang
state_action:
  - service: floorplan.class_set
    service_data:
      class: '${(entity.state === "on") ? "light-on" : "light-off"}'
  - service: floorplan.dataset_set
    service_data: 'light:${entity.state}'      
  - service: floorplan.text_set
    service_data:
      element: "sensor.hallway"
      text: |
        > /* Use this function for both entities, to secure updates on both */
        const textValue = functions.controlEntity1And2FunctionSimple(entities, "sensor.aqara_sensor2_temperature", "light.spotlys_gang")
        return textValue;

The logics from the functions can also be moved into the same text: | statement.

I hope you find some of the suggestions useful.

[exetico]

☕ Did you find this useful, and would you like to say thanks? Buy me a coffee at: https://www.buymeacoffee.com/coffeetoexetico (Support my ha-floorplan work, say thanks for 1-to-1 help in discussions and whatever else you think about 😺)

---

My suggestion is this one, but try the other cases, if you have the time to do so ;-)
And here's case 4, where a function is used.

The functions key is defined at the same level as image and rules and so on:

functions: |
  >
  return {
    controlEntity1And2FunctionSimple: (
      entities, entityKey1, entityKey2
    ) => {
      try {
        const entity1 = entities[entityKey1];
        const entity2 = entities[entityKey2];

        let textValue = false;

        if(entity2.state === "on"){
          textValue = Math.round(entity1.state * 10) / 10 + "°";
        }

        return textValue ? textValue : '';
      } catch (e) {
        console.log("Something failed on the way...", e);
        return 'Error';
      }
    },

And the following code should be used for elements involved, in the state_action:

  - service: floorplan.text_set
    service_data:
      element: "sensor.hallway"
      text: |
        > /* Use this function for both entities, to secure updates on both */
        const textValue = functions.controlEntity1And2FunctionSimple(entities, "sensor.aqara_sensor2_temperature", "light.spotlys_gang")
        return textValue;

If you have one rule with both the entities, you can save some duplication by combining it into this:

name: Case 4
entities:
  - sensor.aqara_sensor2_temperature
  - light.spotlys_gang
element: area.hallway
tap_action:
  service: light.toggle
  service_data:
    entity_id: light.spotlys_gang
state_action:
  - service: floorplan.class_set
    service_data:
      class: '${(entity.state === "on") ? "light-on" : "light-off"}'
  - service: floorplan.dataset_set
    service_data: 'light:${entity.state}'      
  - service: floorplan.text_set
    service_data:
      element: "sensor.hallway"
      text: |
        > /* Use this function for both entities, to secure updates on both */
        const textValue = functions.controlEntity1And2FunctionSimple(entities, "sensor.aqara_sensor2_temperature", "light.spotlys_gang")
        return textValue;

The logics from the functions can also be moved into the same text: | statement.

I hope you find some of the suggestions useful.

[exetico]

You could also change the function a bit, so it could be become a more "generic" solution. Right now, it's only helping with this specific need, but most of the things could be a bit more functional. Like moving "on" in as argument for the function. The same goes for the "entity1 text value" (Math round) - that could also be defined a argument, instead of calculated in the function, itself.

[RogerSelwyn]

@exetico Thanks for all the detail in this response which shows all the flexibility available. You've described in here the use of startup_action and variables. I'm trying to find them in the Usage guide, but don't see them there or in the Lovelace page linked from the actions section of the Usage. Can you point me at where they are described?

[OzGav]

Yes work in progress. You can see both used in a planned example here https://github.com/ExperienceLovelace/ha-floorplan/blob/master/docs/_docs/floorplan/examples/examples-TODO/multi/alarm_clock.yaml

[exetico]

Here's another block of code, related to variables:
https://pastebin.com/G9eS4bAw

I know this is a old thread, but please try and use the reply-box, instead of creating a new sub-thread/answer-thread :)

[RogerSelwyn]

Excellent, I'll look through those.