Change svg/png background image based on entity state or "sensor.stateofday"

[Trzinka]

Hello. I read Q&A #244
Where it is mentioned how you can change the background according to the time of day (previously, according to the instructions, I wrote a senso that monitors the time of day according to the hour and correctly shows me the parts of the day "dawn, morning, until noon, noon ...").
The following is written:
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";
        }

I have made a svg file in which I have the main background image and pictures of the lights on around the rooms (link to files. They are not built into the SVG file) and the line boundaries of the rooms. In the example above, it is written that for the village status of the day is its own SVG file. Does this mean that for each status of the day I need to make my own SVG file and everything else, or add pictures of the part day to the existing file, and since I have a link to the files, I would then call the conclusions SVG ID?

I also found this solution, but it only works in type: picture-elements and with PNG files

cards:
  - cards:
      - elements:
          - entity: sensor.timeofday
            state_image:
              day: /local/timeofday/day.png
              evening: /local/timeofday/evening.png
              morning: /local/timeofday/morning.png
              night: /local/timeofday/night.png
              sunrise: /local/timeofday/sunrise.png
              sunset: /local/timeofday/sunset.png
            tap_action: none
            hold_action: none
            style:
              left: 50%
              top: 50%
              width: 100%
              height: 100%
            type: image

AFTER that, I found this option, which seems to me to be the closest/useful!!!

# BACKGROUND DEPENDING ON TIME OF DAY
    - element: background
      entity: sensor.background
      tap_action: false
      hover_action: false
      state_action:
        action: call-service
        service: floorplan.image_set
        service_data: |
          >
           var imageName = ''; 
           switch (entity.state) { 
             case 'morning': imageName ='morning'; break; 
             case 'noon': imageName = 'noon'; break; 
             case 'evening': imageName = 'evening'; break; 
             case 'night': imageName = 'night'; break;  
           } 
           return '/local/floorplan/background/floorplan_' + imageName + '.svg';

explaining: You just need a shape the same shape as your image and the size you want. You give that an ID of sensor.background

But I don't understand what needs to be done in Inkscape. Thanks for the help.

[OzGav]

The first and last example you provided both look good. In your SVG you just need a placeholder with the ID of background in the last example or area.office in the first that the replacement image will be put into. Note you can use PNG as well.

[Trzinka]

Thanks!

[Trzinka]

Final result:

Floor plane card

config:
  defaults:
    hover_action: hover-info
    tap_action: more-info
  image: /local/img/fp/fp.svg
  rules:
    - element: del_dneva
      entity: sensor.del_dneva
      tap_action: false
      hover_action: false
      state_action:
        action: call-service
        service: floorplan.image_set
        service_data: |
          >
           var imageName = ''; 
           switch (entity.state) { 
             case 'Jutro': imageName ='jutro'; break; 
             case 'Dopoldan': imageName = 'dopoldan'; break; 
             case 'Poldne': imageName = 'poldne'; break; 
             case 'Popoldan': imageName = 'popoldan'; break; 
             case 'Večer': imageName = 'vecer'; break; 
             case 'Noč': imageName = 'noc'; break;  
           } 
           return '/local/img/fp/' + imageName + '.png';     

sensors.yaml

  - platform: template
    sensors:
      del_dneva:
        friendly_name: "Del dneva"
        value_template: >
          {% set current_hour = strptime(states('sensor.time'), "%H:%M").hour %}
          {% set sun_state = states('sun.sun') %}
          {% if sun_state == "below_horizon" and current_hour < 22 %}
            Noč
          {% elif sun_state == "above_horizon" and current_hour < 6 %}
            Jutro
          {% elif '09:00' <= states('sensor.time') <= '11:45' %}
            Dopoldan
          {% elif '11:45' <= states('sensor.time') <= '12:15' %}
            Poldne
          {% elif '12:15' <= states('sensor.time') <= '19:00' %}
            Popoldan
          {% elif sun_state == "below_horizon" and current_hour < 16 %}
            Večer
          {% endif %}