Inkscape structure & png path

[Trzinka]

Hello again. I'm obviously doing something wrong.
Folder in HA:

if I understand correctly, the HA path is: /local/img/fp/***

I have the following structure in inkscape which I am not sure is correct!!!

After that I have two directories in Inkscape under background!

"del_dneva" (english: time of day) contains pictures of the whole house at different times.
"light-covering" contains images of individual rooms when the light is on.

I don't understand the following configurations very well. First of all, I would like to know if the path is written correctly as underlined or if I should add something else or enter the path: /local/img/fp/***

I would also like to ask is my thinking for background calling depending on the time of day correctly with this configuration in Inkscape

and afterwards

In sensors.yaml I have the following code that works:

  - 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 %}
        
        icon_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 %}
            mdi:moon-waning-crescent
          {% elif sun_state == "above_horizon" and current_hour < 6 %}
            mdi:weather-sunset-up
          {% elif 9 <= current_hour < 16 %}
            mdi:weather-sunny
          {% elif sun_state == "below_horizon" and current_hour < 21 %}
            mdi:weather-sunset
          {% endif %}     

But now there is a problem because nothing is showing in the Floor plan Lovelace card. (My guess is that I have the Inkscape path spelled wrong.)

[Trzinka]

Apparently I found a partial solution:

I fixed the path in inkscape

I have now added to the Lovelace flora plan:

                - element: background
                  entity: sensor.del_dneva
                  tap_action: false
                  hover_action: false
                  state_action:
                    action: call-service
                    service: floorplan.image_set
                    service_data: |
                      >
                      switch (entity.state) {
                        case "Jutro":
                          return "/local/img/fp/jutro.png";
                        case "Dopoldan":
                          return "/local/img/fp/dopoldan.png";
                        case "Poldne":
                          return "/local/img/fp/poldne.png";
                        case "Popoldan":
                          return "/local/img/fp/popoldan.png";
                        case "Večer":
                          return "/local/img/fp/16.png";
                        default:
                          return "/local/img/fp/noc.png";
                      } 

Upon inspection, I noticed the following:

Any idea what I should do?

[OzGav]

If I am reading your inkscape pic correctly you need to remove all those images from your SVG. All you need is a placeholder rectangle with the ID of background and those PNGs will be placed there at runtime

[Trzinka]

Thanks for the reply!

I found a different solution. In the Lovelace floor plan I used:

                - element: background
                  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 'Dopoldne': 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';

And in the css I currently added:

svg, svg * {
  pointer-events: all !important;
  cursor: auto !important;
}

svg path {
  fill: inherit;
  stroke: inherit;
  stroke-width: inherit;
}

#background {
	display: block;
	height: 100vh !important;
	width: auto  !important;
}

#areas {
  fill: none;
}

And right now I see:

I forgot to say that I use the link to the images in inkscape and do not embed them in VSG.

Now I have to figure out how to display the image that the switch is on in the room!

[OzGav]

All good. You shouldn't have to refer to the image by link either. I do what you are doing all the time and as I said I just have a placeholder shape and the images just get added as required. If it works though there isn't much overhead by having those links in there I don't think.

[Trzinka]

Thanks again for your reply and opinion. It will hold: that the thing that works, don't try to fix it. ;=)))

[Trzinka]

I currently have it configured like this and it just doesn't seem right!

                - entities:
                    - switch.sw_st
                    - switch.sw_vh
                    - switch.sw_mi
                    - switch.sw_gr
                    - switch.sw_ho
                    - switch.sw_sp
                    - switch.sw_na
                    - switch.sw_di
                    - switch.sw_je
                    - switch.sw_sh
                    - switch.sw_ku
                    - switch.sw_ko
                  tap_action: false
                  state_action:
                    action: call-service
                    service: floorplan.class_set
                    service_data: switch-${entity.state}
                - entities:
                    - switch.sw_st
                    - switch.sw_vh
                    - switch.sw_mi
                    - switch.sw_gr
                    - switch.sw_ho
                    - switch.sw_sp
                    - switch.sw_na
                    - switch.sw_di
                    - switch.sw_je
                    - switch.sw_sh
                    - switch.sw_ku
                    - switch.sw_ko
                  tap_action:
                    action: toggle
                  state_action:
                    action: call-service
                    service: floorplan.style_set
                    service_data:
                      element: >-
                        ${entity.entity_id.replace('switch.',
                        'light_covering.')}
                      style: |
                        >
                        if( entity.state !== "on" )
                            return "display: none;";

[OzGav]

Because you are trying to set a style in one rule and a class in the other rule on the same entity/element. You should be doing one or the other.