2 Floors so far progress

[vlaryn]

I have created my first and second floors with lights / climate and media. Still working on basement and other new entities coming. Please let me know what you think and if you have any ideas.

Thanks
Wayne

https://youtu.be/gGMI6GgyHJI

[OzGav]

Nice. Rather than a rolling gif on your TV you could just show a picture based on what app is running. I do something similar to that.

I like the blue frames you are using around the rooms when the lights are on. Looks good.

The lamp colour blending is a nice effect.

Thanks for sharing!

[sstarcher]

@vlaryn do you have your code up somewhere so we could learn from your great work?

[vlaryn]

I just posted all the code to my paste bin.

Here are links to my YAML / CSS / and SVG file. The SVG file was created in inscape and needs to be saved as SVG optimized. Its only really posted to help as a reference.

YAML
https://pastebin.com/aABrkpbV
CSS
https://pastebin.com/BnCj2y8K
SVG
https://pastebin.com/uBEBNtJS

[vlaryn]

I tried posting in reply using code option but it loses its formatting.

[aparker21]

Thank you for providing these!! I have been struggling to get the temperature to show and your code helped out a lot! I also used it to animate a rectangle around my temperature to show the thermostat state

[vlaryn]

`views:

• title: Floorplan
  path: floorplan
  icon: mdi:floor-plan
  theme: lovelace-blue-blur
  panel: true
  cards:

  • type: 'custom:floorplan-card'
    full_height: true
    style: >
    ha-card {
    max-width: 150vh;
    margin: 0 auto;
    background: none;
    }
    config:
    image: /local/floor_plan/floor_plan.svg
    stylesheet: /local/floor_plan/floor_plan.css

    startup_action:
    - service: floorplan.class_set
    service_data:
    element: first_floor
    class: layer-visible
    - service: floorplan.class_set
    service_data:
    elements:
    - second_floor
    class: layer-hidden
    - service: floorplan.class_set
    service_data:
    element: first_floor.button
    class: button-on
    - service: floorplan.class_set
    service_data:
    elements:
    - second_floor.button
    class: button-off

    rules:
    - element: second_floor.button
    tap_action:
    - service: floorplan.class_set
    service_data:
    element: second_floor
    class: layer-visible
    - service: floorplan.class_set
    service_data:
    elements:
    - first_floor
    class: layer-hidden
    - service: floorplan.class_set
    service_data:
    element: second_floor.button
    class: button-on
    - service: floorplan.class_set
    service_data:
    elements:
    - first_floor.button
    class: button-off

    - element: first_floor.button
      tap_action:
        - service: floorplan.class_set
          service_data:
            element: first_floor
            class: layer-visible
        - service: floorplan.class_set
          service_data:
            elements:
              - second_floor
            class: layer-hidden
        - service: floorplan.class_set
          service_data:
            element: first_floor.button
            class: button-on
        - service: floorplan.class_set
          service_data:
            elements:
              - second_floor.button
            class: button-off
    
    - entity: climate.my_ecobee
      element: tspan4505
      tap_action:
        action: 'more-info'
      state_action:
        action: call-service
        service: floorplan.style_set
        service_data:
          element: tspan4505
          style: |
            >
            if( entity.state === "heat" )
                return "fill: rgb(255,165,0);";
            if( entity.state === "cool" )
                return "fill: rgb(25,140,255);";
            if( entity.state === "off" )
                return "fill: rgb(255,255,255);";
            if( entity.state === "heat_cool" )
                return "fill: rgb(43,255,0);";
    - entity: sensor.my_ecobee_temperature
      hold_action:
        action: 'more-info'
      state_action:
        - service: floorplan.text_set
          service_data:
            element: sensor.my_ecobee_temperature
            text: |
              >
              return (entity.state !== undefined) ? entity.state : "unknown";
    
    - entity: climate.den_ac_unit
      element: tspan1214
      tap_action:
        action: 'more-info'
      state_action:
        action: call-service
        service: floorplan.style_set
        service_data:
          element: tspan1214
          style: |
            >
            if( entity.state === "heat" )
                return "fill: rgb(255,165,0);";
            if( entity.state === "cool" )
                return "fill: rgb(25,140,255);";
            if( entity.state === "off" )
                return "fill: rgb(255,255,255);";
            if( entity.state === "fan_only" )
                return "fill: rgb(43,255,0);";
    - entity: sensor.den_ir_blaster_temperature
      hold_action:
        action: 'more-info'
      state_action:
        - service: floorplan.text_set
          service_data:
            element: sensor.den_ir_blaster_temperature
            text: |
              >
              return (entity.state !== undefined) ? entity.state : "unknown";
    
    - entities:
        - light.den
        - light.foyer_garage
        - light.den_lamp
        - light.den_desk_mood_lights
        - light.foyer_dinning_rm
        - light.kitchen_lights
        - light.living_room_shelly25
        - light.twinkly_tree
        - light.garage
        - light.kitchen_island
        - light.dining_room
        - light.master_bath_main_lights
        - switch.master_bedroom_lights
        - switch.nathans_room
        - light.ethans_room_lights
      tap_action: 'false'
      state_action:
        action: call-service
        service: floorplan.class_set
        service_data: 'light-${entity.state}'
    
    - entities:
        - light.den
        - light.foyer_garage
        - light.den_lamp
        - light.den_desk_mood_lights
        - light.foyer_dinning_rm
        - light.kitchen_lights
        - light.living_room_shelly25
        - light.garage
        - light.kitchen_island
        - light.dining_room
        - light.master_bath_main_lights
        - light.ethans_room_lights
      tap_action: 
        action: 'toggle'
      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:
        - media_player.den
        - media_player.living_room
      tap_action:
        action: 'more-info'
      state_action:
        action: call-service
        service: floorplan.class_set
        service_data: 'media_player-${entity.state}'
    
    - entities:
        - media_player.den
        - media_player.living_room
      tap_action:
        action: 'more-info'
      hold_action:
        action: navigate
        navigation_path: /lovelace/now-playing
      state_action:
        action: call-service
        service: floorplan.style_set
        service_data:
          element: "${entity.entity_id.replace('media_player.', 'media_player_overlay.')}"
          style: |
            >
            if( entity.state !== "playing" )
                return "display: none;";
              return `
                display: block;
                  `
    
    - entities:
        - switch.den_shelf
        - switch.master_bedroom_lights
        - switch.nathans_room
      tap_action: 
        action: 'toggle'
      state_action:
        action: 'call-service'
        service: floorplan.style_set
        service_data:
          element: "${entity.entity_id.replace('switch.', 'switch_overlay.')}"
          style: |
            >
            if( entity.state !== "on" )
                return "display: none;";
              return `
                display: block;
                  `
    
    - entities:
        - cover.garage_door_opener
      tap_action: 
        action: 'toggle'
      state_action:
        action: 'call-service'
        service: floorplan.style_set
        service_data:
          element: "${entity.entity_id.replace('cover.', 'cover_overlay.')}"
          style: |
            >
            if( entity.state !== "closed" )
                return "display: none;";
              return `
                display: block;
                  `
    
    - entities:
        - person.vlaryn
        - person.rachel
      tap_action: 
        action: 'toggle'
      state_action:
        action: 'call-service'
        service: floorplan.style_set
        service_data:
          element: "${entity.entity_id.replace('person.', 'person_overlay.')}"
          style: |
            >
            if( entity.state !== "home" )
                return "display: none;";
              return `
                display: block;
                  `
    
    - entities:
        - input_boolean.foyer_toggle
        - input_boolean.masterbathventlight
        - input_boolean.2nd_hallway
        - input_boolean.2nd_landing
        - input_boolean.laundry
        - input_boolean.kids_bath_main
        - input_boolean.kids_bath_mirror
      tap_action: 'false'
      state_action:
        action: call-service
        service: floorplan.class_set
        service_data: 'inputboolean-${entity.state}'
    
    - entities:
        - input_boolean.foyer_toggle
        - input_boolean.masterbathventlight
        - input_boolean.2nd_hallway
        - input_boolean.2nd_landing
        - input_boolean.laundry
        - input_boolean.kids_bath_main
        - input_boolean.kids_bath_mirror
      tap_action: 
        action: 'toggle'
      state_action:
        action: 'call-service'
        service: floorplan.style_set
        service_data:
          element: "${entity.entity_id.replace('input_boolean.', 'input_boolean_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:
        - light.twinkly_tree
      tap_action: 
        action: 'toggle'
      state_action:
        action: 'call-service'
        service: floorplan.style_set
        service_data:
          element: "${entity.entity_id.replace('light.', 'light_special_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));
                  `
    

`

[OzGav]

@vlaryn Just looking at this and I notice you have what seems to be unnecessary duplication in there. light.den for example you have in two places with the state action of one setting the class and the other setting the style. If that was necessary I would normally have those two service calls together under the one state action. It also means you don't have the odd situation of one section having tap action none and the other toggle. This is what I would do:

            - entities:
                - light.twinkly_tree
                - switch.master_bedroom_lights
                - switch.nathans_room
              tap_action: false
              state_action:
                service: floorplan.class_set
                service_data: 'light-${entity.state}'
 
            - entities:
                - light.den
                - light.foyer_garage
                - light.den_lamp
                - light.den_desk_mood_lights
                - light.foyer_dinning_rm
                - light.kitchen_lights
                - light.living_room_shelly25
                - light.garage
                - light.kitchen_island
                - light.dining_room
                - light.master_bath_main_lights
                - light.ethans_room_lights
              tap_action: toggle
              state_action:
                - service: floorplan.class_set
                  service_data: 'light-${entity.state}'
                - service: floorplan.style_set
                  service_data:
...

[vlaryn]

@OzGav Funny I just noticed this yesterday when looking over my yaml to help someone else out. I was kind of unsure if I could do both a class and style change that way so I am glad you saw it and let me know. I am planning to rewrite the yaml and make it cleaner with section labels etc. I have found several things over the last year and just quickly fixed.

Wayne B.

[vlaryn]

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

@Keyframes flip-in-hor-top {
0% {
-webkit-transform: rotateX(-80deg);
transform: rotateX(-80deg);
opacity: 0;
}
100% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
opacity: 1;
}
}

@Keyframes active-pulse {
0% {
filter: unset;
stroke-opacity: 1;
stroke-width: 1px;
}
15% {
stroke-opacity: 1;
}
100% {
filter: unset;
stroke-opacity: 0;
stroke-width: 15px;
}
}

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

/* Layers */

.layer-visible {
display: block !important;
animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

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

/* Buttons */

.button-on rect {
fill: var(--paper-item-icon-active-color) !important;
}

/*
.button-off rect {
fill: #d32f2f !important;
}
*/

.button-on tspan,
.button-off tspan {
fill: white !important;
}

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

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

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

#person-overlays image {
display: none;
mix-blend-mode: normal;
animation: 0.75s fade-in linear forwards;
}
#person-overlays image.light-on {
display: block;
}

#covers-overlays image {
display: none;
mix-blend-mode: normal;
animation: flip-in-hor-top 7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
#covers-overlays image.cover-open {
display: block;
}

#areas path {
fill: none;
}

#areas2 path {
fill: none;
}

#areas .light-on {
stroke-width: 3px;
stroke: var(--paper-item-icon-active-color);;
}

#areas2 .light-on {
stroke-width: 3px;
stroke: var(--paper-item-icon-active-color);;
}

#areas .inputboolean-on {
stroke-width: 3px;
stroke: red;
}

#areas2 .inputboolean-on {
stroke-width: 3px;
stroke: red;
}

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

g#entities .media_player-idle,
g#entities .media_player-standby,
g#entities .media_player-paused {
stroke: rgba(218, 206, 47, 0.432);
stroke-width: 3px;
opacity: 1;
}
g#entities .media_player-playing {
stroke: rgba(13, 13, 175, 0.555);
animation: 2s active-pulse infinite;
}

#tv_overlays image {
display: none;
mix-blend-mode: normal;
animation: 2s fade-in both;
}
#tv_overlays image.media_player-playing {
display: block;
}

[ferbulous]

Hi @vlaryn
Thanks for posting this,
Was able to get switch entities working with the light_overlays thanks to your examples
I just couldn't get the area lines to glow/visible only when the entity's on
Mind taking a look at my area layers, css?

css
https://pastebin.com/iSzrzgAH

svg
https://pastebin.com/K93NCCJ8

yaml
https://pastebin.com/9MQ8Qehx

[ferbulous]

@vlaryn hi, so after troubleshooting for a few days, i conclude I have no idea my area layers just won't work.
But I was able to modify the lines on my button icons layers instead, so I'm just gonna stick with this solution.

Also, I noticed one thing, the colors are not correctly displayed on my ios mobile devices (ipad, iphone), works fine on my android device & pc browsers though. Did you have the same issue?

IMG_5477.MOV

[OzGav]

Yes looks like someone else had a problem as well #234

[ferbulous]

Thanks, so this could be just an ios bug.

[OzGav]

I’m away for a week but I will try and remember to see if I can recreate this issue when I get back.

[vlaryn]

@ferbulous So I might have stumbled on a fix for your issue. When you are saving your SVG file are you doing Save a Copy and changing the type to Optimized? You will want to make sure you do Save a copy as optimized separate from the Saved version you edit. BE careful not overwrite the inkscape format version. See my quick video for optimized settings.

https://youtu.be/8cxbQ1jwW24