Trouble with overlays #429

tsx-5 · 2024-02-21T03:07:20Z

tsx-5
Feb 21, 2024

Ok, hate to ask -- given how many great tutorials are out there... But, I haven't been able to figure out what stupid mistake I'm making that is causing the overlays to not work. There are things that are working... Such as switching between floors, honeycomb menus (options not completely identified - but menus do work), lights turn on/off, outlines show up, default info box shows up as a result of hovering. But, room overlays are totally not getting there. I have been referencing tutorials like:
https://www.youtube.com/watch?v=MCNxgb0mrSA&list=PLNaeA0iHcKdQIfb0TjdS93yqvXJHjTb45&index=7
Home Assistant Floorplan/floorplan-tutorial-theme.yaml
#411
https://www.youtube.com/watch?v=f_3KAPc53hQ&t=388s

But, haven't turned all those reviews into what I'm doing wrong... So, out to the community for some aid. Please see below for the CSS file, the yaml, and the SVG.

svg, svg * {                          
	z-index: 0;                                          
}

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


/* Layers */

.layer-visible {
	display: inline !important;
}

.layer-hidden {
	display: none !important;
}

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

/* Overlays */

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

#mlight-overlays image.light-on {
	display: block;
	opacity: 1;
	z-index: 4;
}

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

#tlight-overlays image.light-on {
	display: block;
	opacity: 1;
	z-index: 4;
}

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

#blight-overlays image.light-on {
	display: block;
	opacity: 1;
	z-index: 4;
}


/* areas */

#tareas path {
	fill: none;
	stroke: transparent;
	stroke-width: 0;
}

#mareas path {
	fill: none;
	stroke: transparent;
	stroke-width: 0;	
}

#bareas path {
	fill: none;
	stroke: transparent;
	stroke-width: 0;	
}	

/* light on outline */

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

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

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

g#entities path {
	stroke: rgba(128, 128, 128, 0.521);
	stroke-width: 2px;
	stroke-opacity: 1;
	fill: none;
	}


type: custom:floorplan-card
style: |
  ha-card {
      margin: 0 auto;
      background: none;
      box-shadow: none;
  }
full_height: true
honeycomb-menu-background-color: 'linear-gradient(45deg, #6cb3ef, #386978)'
honeycomb-menu-active-background-color: '#64a7dc'
honeycomb-menu-icon-color: '#FFFFFF'
honeycomb-menu-icon-active-color: '#FFFFFF'
honeycomb-menu-disabled: '#00000033'
config:
  console_log_level: debug
  defaults:
    hover_action: hover-info
  image: /local/floorplan/home_nasa/HomePlan-opt.svg
  stylesheet: /local/floorplan/home_nasa/HomePlan.css
  startup_action:
    - service: floorplan.class_set
      service_data:
        element: Basement
        class: layer-visible
    - service: floorplan.class_set
      service_data:
        elements:
          - Main
          - TopFloor
        class: layer-hidden
  rules:
    - element: button.top
      tap_action:
        - service: floorplan.class_set
          service_data:
            element: TopFloor
            class: layer-visible
        - service: floorplan.class_set
          service_data:
            elements:
              - Main
              - Basement
            class: layer-hidden
    - element: button.main
      tap_action:
        - service: floorplan.class_set
          service_data:
            element: Main
            class: layer-visible
        - service: floorplan.class_set
          service_data:
            elements:
              - TopFloor
              - Basement
            class: layer-hidden
    - element: button.basement
      tap_action:
        - service: floorplan.class_set
          service_data:
            element: Basement
            class: layer-visible
        - service: floorplan.class_set
          service_data:
            elements:
              - Main
              - TopFloor
            class: layer-hidden
    - element: button.reload
      tap_action:
        action: fire-dom-event
        browser_mod:
          service: browser_mod.javascript
          data:
            code: lovelace_reload();
    - element: mbr_tv
      tap_action:
        action: call-service
        service: honeycomb
    - element: spare_ceiling_fan
      tap_action:
        action: call-service
        service: honeycomb
        service_data:
          buttons:
            - icon: mdi:information-variant
              entity: light.light_and_fan_switch_3
              tap_action:
                action: more-info
            - icon: mdi:lightbulb
              entity: light.light_and_fan_switch_3
              active: true
              tap_action:
                action: toggle
            - icon: mdi:information-variant-circle
              entity: fan.light_and_fan_switch_2_2
              tap_action:
                action: more-info
            - icon: mdi:fan
              entity: fan.light_and_fan_switch_2_2
              active: true
              tap_action:
                action: toggle
    - element: guest_ceiling_fan
      tap_action:
        action: call-service
        service: honeycomb
        service_data:
          buttons:
            - icon: mdi:information-variant
              entity: light.light_and_fan_switch
              tap_action:
                action: more-info
            - icon: mdi:lightbulb
              entity: light.guest_ceiling
              active: true
              tap_action:
                action: toggle
            - icon: mdi:information-variant-circle
              entity: fan.light_and_fan_switch_2
              tap_action:
                action: more-info
            - icon: mdi:fan
              entity: fan.light_and_fan_switch_2
              active: true
              tap_action:
                action: toggle
    - element: office_ceiling_fan
      tap_action:
        action: call-service
        service: honeycomb
        service_data:
          buttons:
            - icon: mdi:information-variant
              entity: light.office_ceiling
              tap_action:
                action: more-info
            - icon: mdi:lightbulb
              entity: light.office_ceiling
              active: true
              tap_action:
                action: toggle
            - icon: mdi:information-variant-circle
              entity: fan.office_light_fan
              tap_action:
                action: more-info
            - icon: mdi:fan
              entity: fan.office_light_fan
              active: true
              tap_action:
                action: toggle
    - element: mbr_tub_lightfan
      tap_action:
        action: call-service
        service: honeycomb
        service_data:
          buttons:
            - icon: mdi:information-variant
              entity: light.mbr_tub
              tap_action:
                action: more-info
            - icon: mdi:lightbulb
              entity: light.mbr_tub
              active: true
              tap_action:
                action: toggle
            - icon: mdi:information-variant-circle
              entity: switch.dimmer_dry_contact_relay_2
              tap_action:
                action: more-info
            - icon: mdi:fan
              entity: switch.dimmer_dry_contact_relay_2
              active: true
              tap_action:
                action: toggle
    - element: tub_lightfan
      tap_action:
        action: call-service
        service: honeycomb
        service_data:
          buttons:
            - icon: mdi:information-variant
              entity: xxx
              tap_action:
                action: more-info
            - icon: mdi:lightbulb
              entity: xxx
              active: true
              tap_action:
                action: toggle
            - icon: mdi:information-variant-circle
              entity: xxxx
              tap_action:
                action: more-info
            - icon: mdi:fan
              entity: xxx
              active: true
              tap_action:
                action: toggle
    - element: server
      tap_action:
        action: call-service
        service: honeycomb
    - element: water_heater
      tap_action:
        action: call-service
        service: honeycomb
    - element: oledtv
      tap_action:
        action: call-service
        service: honeycomb
        service_data:
          buttons:
            - icon: mdi:information-variant
              entity: media_player.basement_tv
              tap_action:
                action: more-info
    - element: platform_led
      tap_action:
        action: call-service
        service: honeycomb
        service_data:
          buttons:
            - icon: mdi:information-variant
              entity: light.controller_rgb_w_b4e3b8
              tap_action:
                action: more-info
    - element: left_garage_door
      tap_action:
        action: call-service
        service: honeycomb
    - element: right_garage_door
      tap_action:
        action: call-service
        service: honeycomb
    - element: front_door
      tap_action:
        action: call-service
        service: honeycomb
        service_data:
          buttons:
            - icon: mdi:information-variant
              entity: lock.front_door_2
              tap_action:
                action: more-info
    - element: back_door
      tap_action:
        action: call-service
        service: honeycomb
        service_data:
          buttons:
            - icon: mdi:information-variant
              entity: lock.patio_door
              tap_action:
                action: more-info
    - entities:
        - light.patio
        - light.workout
        - light.basement_overhead
        - light.laundry_room
        - light.staircase
        - light.gaming
        - light.office_ceiling
        - light.spare_ceiling
        - light.guest_ceiling
        - light.island
        - light.garage
        - light.deck
        - light.driveway
        - light.informal
        - light.dining_room
        - light.chandelier
        - light.kitchen_sink
        - light.kitchen_fdr_hallway
        - light.mbr_bathroom
        - light.mbr_tub
        - light.utility
      tap_action:
        action: call-service
        service: homeassistant.toggle
      state_action:
        - service: floorplan.class_set
          service_data: light-${entity.state}
        - 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));
                  `
    - entity: cover.cellular_shade_radio_z_wave
      tap_action:
        action: call-service
        service: homeassistant.toggle
    - entity: cover.cellular_shade_radio_z_wave_2
      tap_action:
        action: call-service
        service: homeassistant.toggle

OzGav · 2024-02-21T04:59:24Z

OzGav
Feb 21, 2024

That is a lot of info. Can you provide one element that isn't working the way you want it to. Please explain what you expect to happen and what is happening.

2 replies

tsx-5 Feb 21, 2024
Author

Sure,

The expectation: When I turn on a light in a room (on any given floor), I am expecting the rooms overlay image to become visible, an outline around the room to show, and the ability to toggle said room via a single click. This is a common feature for most floorplan demos, example given in this video https://www.youtube.com/watch?v=e9ePvfNCKK8&t=151s at the 1 minute 55 sec section of the video (on lighting).
What's actually happening: The room whose light has changed is getting the outline and is able to be toggled but the overlay that represents the actual room light is not appearing - the background image is unchanged.
Where I think things are going wrong:

    - entities:
        - light.patio
        - light.workout
        - light.basement_overhead
        - light.laundry_room
        - light.staircase
        - light.gaming
        - light.office_ceiling
        - light.spare_ceiling
        - light.guest_ceiling
....
        - light.mbr_bathroom
        - light.mbr_tub
        - light.utility
      tap_action:
        action: call-service
        service: homeassistant.toggle
      state_action:
        - service: floorplan.class_set
          service_data: light-${entity.state}
        - 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));
                  `

selecting an entity, say "light.office_ceiling" does go through the toggle part of the code and find it's way to the "if(sat<10)" block (I put in a few debug statements to see that that part of the code is being executed) - however, I don't know a way to ensure the element that is being passed is "light_overlay.office_ceiling" vs the original entity of "light.office_ceiling". Regardless, the "light_overlay.office_ceiling" image is not being displayed via the floorplan.style.set service that is being called. The overlay part of the CSS

/* Overlays */

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

#mlight-overlays image.light-on {
	display: block;
	opacity: 1;
	z-index: 4;
}

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

#tlight-overlays image.light-on {
	display: block;
	opacity: 1;
	z-index: 4;
}


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

#blight-overlays image.light-on {
	display: block;
	opacity: 1;
	z-index: 4;
}

should also be a factor, but I'm a bit unclear on how that interacts since it's not directly called in this code section. Each "block" is for each floor of the SVG (b - basement, m - main, and t - top).

Hopefully, I'm a bit clearer in my issue - and as always appreciate the help.

OzGav Feb 21, 2024

You are applying a class and a style on the state change which may or may not be what you want. I would suggest pulling the light out of that huge rule and just have it as a simple rule with the tap action and class set and see if it appears and disappears with that.

edit: the CSS is complex as well so I am not sure if you are actually getting a light-on class being set which the rule is trying to do.

Trzinka · 2024-02-21T12:02:01Z

Trzinka
Feb 21, 2024

Have you looked at my instructions #411?

You also have a zip date of the entire setup of my floor plan!

The meaning of commands in CSS files is explained below.

Check if you followed my explanation for the SVG file (naming elements in SVG)! The video that guided you through the creation of your floor plan is so fast and disorganized that you have to watch it carefully several times to understand what it has achieved with the various changes.

Also watch out for the fact that you are doing double settings for SVG elements #1 setting the class #2 calling the image!

Try only one floor first.

14 replies

tsx-5 Feb 23, 2024
Author

As I've been trying to integrate lessons learned here... I've screwed something up, as hoover/switching is no longer working - and I've stripped it back to bare bones. Looking at the debug logs, I see this error:

2/23/2024, 6:32:44 AM WARNING CONFIG Cannot find 'pages' nor 'rules' in floorplan configuration
consoleLog @ floorplan.js?hacstag=1883234941043:54

But there is a rules section and it seems indented correctly

views:
  - title: Home
    type: custom:floorplan-card
    style: |
      ha-card {
          margin: 0 auto;
          background: none;
          box-shadow: none;
      }
    full_height: true
    honeycomb-menu-background-color: 'linear-gradient(45deg, #6cb3ef, #386978)'
    honeycomb-menu-active-background-color: '#64a7dc'
    honeycomb-menu-icon-color: '#FFFFFF'
    honeycomb-menu-icon-active-color: '#FFFFFF'
    honeycomb-menu-disabled: '#00000033'
    config:
      console_log_level: debug
      defaults:
        hover_action: hover-info
      image: /local/floorplan/home_nasa/HomePlan-opt.svg
      stylesheet: /local/floorplan/home_nasa/HomePlan.css
      rules:
        - entities:
            - entity: light.office_ceiling
              element: light_overlay.office_ceiling
            - entity: light.mbr_bathroom
              element: light_overlay.mbr_bathroom
          tap_action:
            service: homeassistant.toggle
          state_action:
            service: floorplan.class_set
            service_data: light-${entity.state}

What am I missing?

OzGav Feb 23, 2024

Good question. You can remove all of this for now:

    style: |
      ha-card {
          margin: 0 auto;
          background: none;
          box-shadow: none;
      }
    full_height: true
    honeycomb-menu-background-color: 'linear-gradient(45deg, #6cb3ef, #386978)'
    honeycomb-menu-active-background-color: '#64a7dc'
    honeycomb-menu-icon-color: '#FFFFFF'
    honeycomb-menu-icon-active-color: '#FFFFFF'
    honeycomb-menu-disabled: '#00000033'

Your indenting does look ok. Maybe delete the indent and re-add in case some weird whitespace character is in there messing things up.

tsx-5 Feb 24, 2024
Author

Ok...

We are getting a bit closer. I've figured out how to get rooms lite up - and here's example code:

    - element: light_overlay.office_ceiling
      entity: light.office_ceiling
      tap_action:
        service: homeassistant.toggle
      state_action:
        service: floorplan.class_set
        service_data: light-${entity.state}
        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));
          `

I had to do this block of code for each room... Unlike what BitBorn did in his video, I couldn't get it to work with a javascript at the end of a list of entities. But, this solution isn't totally correct - as the background image no longer displays :-/ So, need to figure out how to set the background on each individual floor (when one switches to it). But, at least there has been some progress :-)

OzGav Feb 24, 2024

The background is a separate problem. You should be just showing and hiding the relevant image when whatever button you are using is clicked. You could use an input boolean to keep track of what should be visible via automations (easiest way) or have more complex set of classes that get applied to each layer when the button is pressed (minmal code way)

tsx-5 Feb 24, 2024
Author

Turns out it wasn't that separate... I needed a slight adjustment in my CSS file. Taking what you suggested earlier, OzGav, and added one other minor function - so the section looks like:

image {
	display: block;
	mix-blend-mode: lighten;
	animation: 0.75s fade-in linear forwards;
}


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

.light-on {
	display: block;
	/*visibility: visible !important;
	opacity: 1 !important;
	stroke-opacity: 1 !important;*/
}

So what happens is when a floor is made visible it runs through each of the overlays and essentially turns them off via the .light-off function, with the exception of the main background. One first run, this seems to happen quickly enough that there are no artifacts to note it doing that (I saw it by using the inspect function on my web browser).

Thanks for all of the hints

Trzinka · 2024-02-22T10:03:18Z

Trzinka
Feb 22, 2024

Have you read:

Order of elements/objects in SVG

(read: https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/z-index)

the lowest/first element/object is the lowest

Default setting for link to images which is broken/wrong

It is necessary to add a link to the files in the HA folder

Setting the background image (default image)!

css

#background {
  display: block !important;                       //read it: "https://www.w3schools.com/cssref/pr_class_display.php"
  z-index: 1;                                      //is top above svg, svg * for 1 layer
 }

How to set background images to show room images when the light/switch is on!

floor plan card

                    - entity: switch.sw_st
                      element: room.sw_st
                    - entity: switch.sw_vh
                      element: room.sw_vh
                    - entity: switch.sw_mi
                      element: room.sw_mi
                    - entity: switch.sw_gr
                      element: room.sw_gr
                    - entity: switch.sw_ho
                      element: room.sw_ho
                    - entity: switch.sw_sp
                      element: room.sw_sp
                    - entity: switch.sw_na
                      element: room.sw_na
                    - entity: switch.sw_di
                      element: room.sw_di
                    - entity: switch.sw_je
                      element: room.sw_je
                    - entity: switch.sw_sh
                      element: room.sw_sh
                    - entity: switch.sw_ku
                      element: room.sw_ku
                    - entity: switch.sw_ko
                      element: room.sw_ko
                    - entity: switch.sw_ko
                      element: room.sw_ko
                      state_action:
                        action: call-service
                        service: floorplan.class_set
                        service_data: switch-${entity.state}
                      tap_action:
                        action: call-service
                        service: homeassistant.toggle

css

#rooms image {                                               //default for images of rooms that are illuminated (does not display)
  display: none;                                             //does not display any views
  mix-blend-mode: lighten;                                   //this setting is important for the overlap between images "https://www.w3schools.com/cssref/pr_mix-blend-mode.php"                 
  animation: 0.75s fade-in linear forwards;                  //for a nice transition between picture exchanges "https://www.w3schools.com/css/css3_animations.asp"
  }

@keyframes fade-in {                                         //animation that makes the image go from opacity 0 (hidden) to opacity 1 (full view) "https://www.w3schools.com/css/css3_animations.asp"
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#rooms image.switch-on {                                     //what happens when the switch/light is turned on, or click on the room
  display: block !important;                                 //Shows a image
  opacity: 1;;                                               //opacity is not active
  z-index: 5 !important;                                     //is top above background for 4 layer
  }

How to show room boundaries/lines to display when light/switch is on!

floor plan card

                    - 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: call-service
                        service: homeassistant.toggle
                      state_action:
                        action: call-service
                        service: floorplan.class_set
                        service_data: switch-${entity.state}

css

#areas {                                                   //it shows nothing/hide
  fill: none;
  stroke: none;
  }

#areas .switch-on {
  stroke: red !important;
  stroke-width: 15px !important;
  stroke-opacity: 1;
  z-index: 6;                                              //is top above rooms image.switch-on for 1 layer
  }

3 replies

tsx-5 Feb 22, 2024
Author

Yes,

I have been looking over all your good stuff - and trying to include your hints within all the other tutorials I've been following. I might have to go to the "entity/element combo" vs using the javascript that BitBorn used. The downside of your way, would be the lose of hue / sat feature of the javascript code BitBorn has...

Trzinka Feb 22, 2024

In some places, you will have to use javascript or something similar (I have almost no knowledge in this field, unless I use some examples to conclude what works and adapt it to myself).

tsx-5 Feb 24, 2024
Author

I'm totally with you there... Trial and Error, along with modeling off of others is how I do my best work. Which is why I'm grateful for all of your sharing :-)

Trzinka · 2024-02-22T10:08:13Z

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Trouble with overlays #429

{{title}}

Replies: 4 comments 19 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Trouble with overlays #429

Replies: 4 comments · 19 replies

tsx-5 Feb 21, 2024 Author

Have you looked at my instructions #411?

Try only one floor first.

tsx-5 Feb 23, 2024 Author

tsx-5 Feb 24, 2024 Author

tsx-5 Feb 24, 2024 Author

Have you read:

Order of elements/objects in SVG

Setting the background image (default image)!

How to set background images to show room images when the light/switch is on!

How to show room boundaries/lines to display when light/switch is on!

tsx-5 Feb 22, 2024 Author

tsx-5 Feb 24, 2024 Author

Replies: 4 comments 19 replies

tsx-5 Feb 21, 2024
Author

tsx-5 Feb 23, 2024
Author

tsx-5 Feb 24, 2024
Author

tsx-5 Feb 24, 2024
Author

tsx-5 Feb 22, 2024
Author

tsx-5 Feb 24, 2024
Author