Show the room image, when the switch is on, with an SVG that have links to the room images.

[Trzinka]

Hello again.

I have folder in HA:

The folder contains pictures at different times of the day and pictures of individual rooms showing the lights on.
If I understand correctly, the HA path is: /local/img/fp/***

I have the following structure in inkscape for fp.svg:

"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.

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 %}

In floor plan card is configuration:

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';     

Changing images depending on the part of the day works without a problem.

There is also configuration on the floor plan card:

    - element: switch_sw_ho
      entity: switch.sw_ho
      state_action:
        action: call-service
        service: floorplan.class_set
        service_data: entitystate-${entity.state}
      tap_action:
        action: call-service
        service: homeassistant.toggle

and

    - element: switch_covering_sw_ho
      entity: switch.sw_ho
      state_action:
        action: call-service
        service: floorplan.class_set
        service_data: entitystate-${entity.state}
      tap_action:
        action: call-service
        service: homeassistant.toggle

If I understand correctly:
the first set takes care of displaying lines around the room if the switch is on
the second set hides to show the room image if the switch is on

my fp.css file contain:

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

svg, svg * {
	pointer-events: all !important;
	cursor: auto !important;
	display: block !important;
	margin: 0px !important;
	max-height: 100vh !important;
	width: auto  !important;
	padding-top: 50px !important;
	padding-bottom: 50px !important;
}

svg path {
	fill: inherit;
	stroke: inherit;
	stroke-width: inherit;
}
  
#switch_coverings {
	display: none !important;
	mix-blend-mode: lighten !important;
	animation: 0.75s fade-in linear forwards !important;
}

#switch_coverings .entitystate-on {
	display: block !important;
	z-index: 100 !important;
}

#areas {
	fill: none !important;
	stroke: none !important;
	stroke-width: 0 !important;
}
 
#areas .entitystate-on {
	visibility: visible !important;
	stroke-opacity: 1 !important;
	stroke: #118cdd !important;
	stroke-width: 3px !important;
}

In DevTools I can see:

And now the problem:
Did I do something wrong in fp.css?
Do I need to change or add anything to the floor plan card?
To show me a picture of the room where the light/switch is on!

[OzGav]

There is no entitystate-off class so when that is called for by your rule nothing will happen. I also suggest removing all the # selectors as that is just complicating what should be a simple case of applying one of two css classes to your images.

[Trzinka]

Thanks for the reply.
It's true that for all entities it doesn't show class:"entitystate-off" because I haven't installed all the switches yet (laziness).
But I have a few (the example underlined in green) in the DevTools view and I'm testing them.
Is it enough to just do service: floorplan.class_set or do I also have to service: floorplan.style_set for each svg element and associated entity?

It now has service: floorplan.class_set set for the room frame and switches!

Did you mean for # in the css file?

Given that I have a hierarchy in Inkscape under Layers and Objects (the second image of the message)

I have certain room frames in areas which works with the current setting on/off.

Under Background, I have two folders,

the first is called del_dneva, it is under layer and contains images according to the time of day, 
which works with the current setting. 

the second folder called switch-covering contains pictures of individual rooms with 
switches/lights on (lighting effect), but it doesn't work!

If I understand correctly how the style commands in the fp.css file work:

svg, svg * {
	pointer-events: all !important;
	cursor: auto !important;
	display: block !important;
	margin: 0px !important;
	max-height: 100vh !important;
	width: auto  !important;
	padding-top: 50px !important;
	padding-bottom: 50px !important;
}

here is the basic behavior of everything that follows svg

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

this is inherit settings from svg file

#areas {
	fill: none !important;
}

#areas .entitystate-off {
	opacity: 1 !important;
	stroke-opacity: 1 !important;
	stroke: green !important;
	stroke-width: 5px !important;
}

#areas .entitystate-on {
	opacity: 1 !important;
	stroke-opacity: 1 !important;
	stroke: red !important;
	stroke-width: 5px !important;
}

this colors the edges of the area

By the way. Can I place the red color over the green when the light is on? z-index: 1; does not work.

Now for the part that is clearly the problem:

#switch-coverings {
	visibility: hidden !important;
	mix-blend-mode: lighten !important;
}

#switch-coverings .entitystate-on {
	visibility: visible !important;
	opacity: 1 !important;
}

The image does not appear and as far as I know it should. The only thing I can't look at in DevTools, 
of course, if that's even possible, is which layer the image currently occupies 
(the one that should display the image/space with the light).

Any idea what else I can try?

[Trzinka]

Damned again!!!

The mistake was that I was using:

#switch-coverings {
  visibility: hidden !important;
  mix-blend-mode: lighten !important;
}

it should be:

#del_dneva {
  visibility: visible !important;
  opacity: 1 !important;
  mix-blend-mode: lighten !important;	
}

mix-blend-mode was not in the right place in the css file

  mix-blend-mode: lighten !important;	
}

After this repair it is now working!!!!