Unable to get light overlay working with switch entities

[ferbulous]

Hi, just started with ha-floorplan based on this tutorial and using resources from his github

However, the example is entirely using light entities, so I tried adding 1 switch entity but the light layer for specific room didn't work as expected (shows up by default in the floorplan).

Untitled.mp4

I assumed I would need just add the switch entities in the yaml file as below but I might be missing something here?

config.yaml

      #################################################
      # Floorplan
      #################################################
      - type: 'custom:floorplan-card'
        style: >
          ha-card {
              max-width: 150vh;
              margin: 0 auto;
              background: none;
              box-shadow: none;
          }
        config:
          console_log_level: info
          image: '/local/floorplan/floorplan_optimized.svg'
          stylesheet: '/local/floorplan/floorplan.css'
          log_level: info
          rules:

            - entities:
                - light.smartrul_bulb1
                - light.aubess_bulb3
                - light.aubess_bulb6
                - light.aubess_bulb7
                - light.gu10_bulb4
              tap_action: false
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data: 'light-${entity.state}'

            - entities:
                - light.smartrul_bulb1
                - light.aubess_bulb3
                - light.aubess_bulb6
                - light.aubess_bulb7
                - light.gu10_bulb4
              tap_action:
                action: 'toggle'
              double_tap_action:
                action: more-info 
              state_action:
                action: call-service
                service: floorplan.style_set
                service_data:
                  element: "${entity.entity_id.replace('light.', 'light_overlay.')}"
                  style: |
                    >
                    if( entity.state !== "on" )
                        return "display: none;";
                    let hue = 0;
                    let sat = 0;
                    if( entity.attributes.hs_color )
                    {
                        hue = entity.attributes.hs_color[0];
                        sat = entity.attributes.hs_color[1];
                    }
                    if( sat < 10 )
                    {
                      return `
                        display: block;
                        filter:
                          brightness(calc( ${entity.attributes.brightness} / 255));`
                    }
                    return `
                      display: block;
                      filter:
                        sepia(100%)
                        hue-rotate(calc( ${hue}deg - 55deg ))
                        saturate(calc( ${sat}% * 2 ))
                        brightness(calc( ${entity.attributes.brightness} / 255));`

            - entities:
                - switch.store_4g_switch2
              tap_action: false
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data: 'switch-${entity.state}'

            - entities:
                - switch.store_4g_switch2
              tap_action:
                action: 'toggle'
              double_tap_action:
                action: more-info 
              state_action:
                action: call-service
                service: floorplan.style_set
                service_data:
                  element: "${entity.entity_id.replace('switch.', 'light_overlay.')}"

floorplan.css

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


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

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


#areas {
  fill: none;
}

#light-overlays image {
  display: none;
  mix-blend-mode: lighten;
  animation: 0.75s fade-in linear forwards;
}

#light-overlays image.light-on {
  display: block;
}

#areas .motion-on
{
 	fill: #ff00002e;
 	stroke: #ff000087;
 	stroke-width: 3px;
 	stroke-opacity: 1;
 	filter: unset;
 	animation: fade-in 1s infinite alternate;
}




#areas .light-on {
  stroke-width: 6px;
  stroke-opacity: 1;
  stroke: #a58ee1;
}

g path:active, g use:active, .light-on:active, g#entities > g:active path:not(.touch-area) {
	stroke: #9ed8ff99 !important;
	stroke-width: 4px;
	stroke-opacity: 0.7;
}

floorplan.zip

[exetico]

Hi,

Without having checked the details, have you checked my tutorials? 😊

There's no difference between the light and switch primary state, so the naming shouldn't matter.

Please check my tutorials, and maybe consider to work with both entity (the ha entity name) and the element key (the ID in the SVG file).

[ferbulous]

After some discussion with bitborn who provided the tutorial, seems like the easiest way is to use switch-x and change the type of switch to lights. This worked for me

[OzGav]

As @exetico said switch and light should be treated the same so not sure why you would need to change it...?

[OzGav]

What I can see here

service: floorplan.class_set
    service_data: 'switch-${entity.state}'

Is you are setting a class that doesn't exist in the CSS you supplied

[ferbulous]

What I can see here

service: floorplan.class_set
    service_data: 'switch-${entity.state}'

Is you are setting a class that doesn't exist in the CSS you supplied

Hi, I did try adding in the css for the switch but it the light layer just stays visible like in the short video clip

#light-overlays switch.light-on {
	display: block;
  }

I'm not sure if i did get it right
Anyway, my css skill is very beginner level, so I'm mostly just copy pasting from other examples to make it work

[OzGav]

switch-${entity.state} resolves to switch-on or switch-off depending on the entity state. Therefore, you would need something like this to show or hide the image:

.switch-off {
  visibility: hidden !important; 
  opacity: 0 !important;
  stroke-opacity: 0 !important;
}

.switch-on {
  visibility: visible !important;
  opacity: 1 !important;
  stroke-opacity: 1 !important;
}