How to set style of an entity displayed on floor plan based on state of another

[vlaryn]

I have a temp sensor entity on my floorplan called sensor.my_ecobee_temperature . I am using the service floorplan.text_set to display the current temp on my floor plan. Does anyone have some sample code of how I could use the service floorplan.style_set to set the color of that text based on a different entity called climate.my_ecobee. So when the state of climate.my_ecobee is heat I want the text Red and blue if its Cooling. This is the code I have so far that works and displays my temp in default white.

https://pastebin.com/9xTQK0jF

Thanks
Wayne B.

Here is a quick Youtube link to my current state of my floorplan https://youtu.be/UtnKDrIqVck if anyone was interested.

[OzGav]

This is similar to the question I asked here #156

I didn’t come up with anything better than my fudged solution which is working in my case.

At the moment I can’t think of a solution for your specific request but what would be easy is if you coloured a circle (for example) behind the text. So when heating, the temp would be in a red circle and blue for cooling. To do this you would just create a circle object below the text object in Inkscape and then use class_set or style_set to change that according to the state of climate.my_ecobee

[exetico]

Hi,

That should be possible to do. Just use the entity you want to pull the data from, and element as the SVG-element from your floorplan.

Add some logics on top. Here's a simple solution, not fully working, nor fitted for your needs - but I guess you'll be able to get the point of it. I'm sorry for any formatting-issues. I'm currently not as my primary machine. I can't even remember if the below code works as expected :-D...

 entity: binary_sensor.wark_trough_38234
 element: Sensor.Walkthrough
 state_action:
   action: call-service
   service: floorplan.style_set
   service_data:
     element: Sensor.Walkthrough

     style: |
       >
       var secounds = (new Date().getTime() - new Date(entities["binary_sensor.wark_trough_38234"].last_changed).getTime())/1000;
       return secounds > 60 ? `--background-wark_trough_3823:rgba(255,255,255,1);` : `--background-wark_trough_3823:rgba(255,0,0,${1-((1/60)*secounds)});`;

[vlaryn]

Thanks to both of your answers. I believe they both work. If anyone else finds this post I am linking the code I used. Please note that the element name I am targeting to set the color is the svg:tspan id under the svg:text id. When sending the text from my temperature sensor I target the svg:text id. I will try and post that part of my svg file as well in pastebin.

https://pastebin.com/yHSkLJp9

[exetico]

Fell free to save it here on GitHub, by formatting the code. But thank you for sharing 👍☺️

[regevbr]

This is a working full example without using 2 svg elements:

entity: sensor.temp
entities:
  - sensor.temp_color
element: sensor.temp_element
double_tap_action: more-info # will show the temperature entity information
hover_action: hover-info # will show the temperature entity information
state_action:
  - action: call-service
    service: |
      > if (entity.entity_id === 'sensor.temp_color') {
        return 'floorplan.class_set';
      } else {
        return 'none.none';
      }
    service_data:
      class: '${entity.state > 50 ? "red-fill" : "green-fill"}'
  - action: call-service
    service: |
      > if (entity.entity_id === 'sensor.temp') {
        return 'floorplan.text_set';
      } else {
        return 'none.none';
      }
    service_data:
      text: ${ entity.state }

The none service it taken from https://github.com/chomupashchuk/empty-service-home-assistant

if you intend to also add service calls to HA, wait until the bug in #175 is fixed before using this solution

p.s.
the classes I use are my own custom ones, use the example as a template

[exetico]

1.0.29 is now released. Thanks for the PR!