Change svg image based on entity state

[m90att]

Hi,

I have a problem that I've googled, searched the community and other discussions for pointers but ultimately, I've found nothing that really fits my situation. Nor am I experienced enough to troubleshoot beyond basic levels and I'm now beyond confused, so I'm reaching out for some expert advice - I'm sure this is straightforward - I just can't see it.

I've got a floorplan [background] svg that I want to change depending on the time of day. I've borrowed an example of a time of day sensor which is working well...

   timeofday:
      value_template: >-
        {% set time = states.sensor.time.state %}
        {% set elevation = states.sun.sun.attributes.elevation %}
        {% set night_from = '22:00' %}
        {% if -2 < elevation < 4 %}
          {{ 'sunrise' if time < '12:00' else 'sunset' }}
        {% elif time < '06:00' or time > night_from %} night
        {% elif time < '09:00' %} morning
        {% elif time < '19:00' %} day
        {% elif time < night_from %} evening
        {% else %} night
        {% endif %}

My yaml image config is:

      config:
          image: /local/floorplan/five/floorplan_night.svg
          stylesheet: /local/floorplan/five/home.css
          console_log_level: debug

I currently have 3 svgs created, 'day', 'evening', 'night' and I want the night one to be the default.

In inkscape the following holds the background...

The code I've added to the yaml rules is:

            - element: sensor.timeofday
              entity: sensor.timeofday
              tap_action: false
              hover_action: false
              state_action:
                - action: call-service
                  service: floorplan.image_set
                  service_data: |
                      >
                      switch (entity) {
                        case "day":
                          return "/local/floorplan/background/floorplan_day.svg;

                        case "evening":
                          return "/local/floorplan/background/floorplan_evening.svg";

                        default:
                          return "/local/floorplan/background/floorplan_night.svg";

                      }

but nothing happens, it always shows floorplan_night. What am I doing wrong?!

Thank you v much,

Matt

[exetico]

Hi

It's great to see people trying. That's the only way to make progress in a new space.

TL;DR: Use entity.state in your switch-statement, and you're golden.

Answer:
I've created the sensor so the day, evening and more works as expected.

My YAML looks like this:

element: area.office
entity: sensor.timeofday
tap_action: false
hover_action: false
state_action:
  - action: call-service
    service: floorplan.image_set
    service_data: |
        >
        console.log("Entity Info - Debug info:", entity);
        switch (entity.state) {
          case "day":
            return "/local/floorplan/__test/fp-test-day.svg";
          case "evening":
            return "/local/floorplan/__test/fp-test-evening.svg";
          default:
            return "/local/floorplan/__test/fp-test-default.svg";
        }

Please take a look at the console.log-line.

Open the Inspect window in your browser, navigate to the console-window, and take a short time to look at the entity-object:

Here you'll see that the "entity" contains more than a single value. It's an object, with multiple properties.
Therefore you'll have to grap entity.state, instead of just using entitiy in the switch().

You could also check if entity.state is even defined, before trying to access it... but I guess that's story for another JavaScript DIY-day.

Here's my result, with the test-day svg file:

And here's the result with test-evening file:

Bonus info:
You'll have to define the "property" for almost every ha-floorplan function, where you're able to use the entity object.

Here's a example with the new dataset_set function.

The dataset_set function can be useful if you're trying to style a specific element, where you don't want the class-name to contain the state of the entity - which has been pretty common for many floorplans (like my personal floorplan).

element: area.office
entity: sensor.timeofday
tap_action: false
hover_action: false
state_action:
  - action: call-service
    service: floorplan.dataset_set
    service_data: 
      key: timeofday
      value: ${entity.state}

Result:

Here's even more about Javascript Objects, if you're ready for a ride: https://www.w3schools.com/js/js_objects.asp

[m90att]

Thank you so much @exetico !

I love answers like this, with explanations and examples. It really helped to understand it. It almost makes my two days of frustration worth it...almost!!

I tried copying and pasting but I think I did it incorrectly as I was getting errors, so I typed it out fresh and, hey presto, it works.

You're a star!!

[exetico]

I'm glad that it worked as expected!

Thank you for the kind words, too 😃 .