Hey, is the floorplan-alcove.png is just cut out of that area and the rest is clear?
No. Funny, I haven’t looked at this for several months because it wasn’t displaying at all on Google Hub, but now it is (cast works properly), I’ll have another look at some kind of floorplan.
No, all pictures are complete without cutting. Because I see that all the pictures in the author’s document are complete.
Thanks for reply. I still try to find the reason. I checked all the comments, and it’s incredible that only we have this problem
when you created the floor plan using sweethome3D, did you place the lights above the roof line? The light could bleed outside of the intended space, that’s what happened to me.
I created a seperate png for every light/room to get around it. hasd to for the lack of knowledge so stuck with this method
In the past I experienced all the problems listed here, in the end I found out that in order to obtain a good result I had to render (in SweetHome3d) 2 images for each (coloured) light.
For each actual light I created two light objects in SH3D, in the same position, one white and one red, and I rendered two pictures, one with the white light on, one with the red light one, plus one with all the lights off (at night time).
Before using the two rendered images in HA I cleaned them up leaving only the different pixels compared to the “base” night image, I used GIMP’s filter “Optimise (Difference)” to obtain this automatically (plus some manual cleanup), saving them as a PNG with alpha channel. Without this “trick”, when you perform the hue-rotate you also change the color of areas that are not actually affected by the turned-on light but that are still present in the rendered image of that light (ie. all the parts of the house that are not completely black even during the night).
This is the code I use in HA for each light (light.go_uno in this case):
- type: custom:config-template-card
entities:
- light.go_uno
element:
type: image
image: /local/casa/rotated7/Casa3D_rotated7_light_go_uno_MASK.png
entity: light.go_uno
tap_action:
action: none
hold_action:
action: none
style:
opacity: >-
${ ( states["light.go_uno"].attributes.brightness ?
states["light.go_uno"].attributes.brightness / 255 : 0) -
(states["light.go_uno"].attributes.hs_color ?
states["light.go_uno"].attributes.hs_color[1]/90 : 0)}
mix-blend-mode: lighten
top: 0%
left: 0%
transform: none
- type: custom:config-template-card
entities:
- light.go_uno
element:
type: image
image: /local/casa/rotated7/Casa3D_rotated7_red_go_uno_MASK.png
entity: light.go_uno
tap_action:
action: none
hold_action:
action: none
style:
filter: >-
${ "hue-rotate(" + (states["light.go_uno"].attributes.hs_color ?
states["light.go_uno"].attributes.hs_color[0] : "0") + "deg)
saturate(" + (states["light.go_uno"].attributes.hs_color ?
states["light.go_uno"].attributes.hs_color[1] : 100)+ "%)" }
opacity: >-
${ (states["light.go_uno"].attributes.brightness ?
states["light.go_uno"].attributes.brightness / 255 : 0) *
(states["light.go_uno"].attributes.hs_color ?
states["light.go_uno"].attributes.hs_color[1]/90 : 0) }
mix-blend-mode: lighten
top: 0%
left: 0%
transform: none
1 Like
how did you format your yaml? Here’s what I made after reading your instructions.
- type: custom:config-template-card
entities:
- light.kitchen1
element:
type: image
image: /local/ui/floorplan/lights/kitchen_counter_white0.png
entity: light.kitchen1
tap_action:
action: none
hold_action:
action: none
style:
opacity: >-
${ ( states["light.kitchen1"].attributes.brightness ?
states["light.kitchen1"].attributes.brightness / 255 : 0) -
(states["light.kitchen1"].attributes.hs_color ?
states["light.kitchen1"].attributes.hs_color[1]/90 : 0)}
mix-blend-mode: lighten
top: 0%
left: 0%
transform: none
- type: custom:config-template-card
entities:
- light.kitchen1
element:
type: image
image: /local/ui/floorplan/lights/kitchen_counter_red0.png
entity: light.kitchen1
tap_action:
action: none
hold_action:
action: none
style:
filter: >-
${ "hue-rotate(" + (states["light.kitchen1"].attributes.hs_color ?
states["light.kitchen1"].attributes.hs_color[0] : "0") + "deg)
saturate(" + (states["light.kitchen1"].attributes.hs_color ?
states["light.kitchen1"].attributes.hs_color[1] : 100)+ "%)" }
opacity: >-
${ (states["light.kitchen1"].attributes.brightness ?
states["light.kitchen1"].attributes.brightness / 255 : 0) *
(states["light.kitchen1"].attributes.hs_color ?
states["light.kitchen1"].attributes.hs_color[1]/90 : 0) }
mix-blend-mode: lighten
top: 0%
left: 0%
transform: none
Then here is what I had prior to following your instructions –
button_card_templates: !include button_card_templates.yaml
kiosk_mode:
admin_settings:
hide_header: true
hide_sidebar: true
kiosk: true
views:
- title: Home
icon: mdi:floor-plan
panel: true
badges: []
cards:
- type: custom:config-template-card
entities:
- light.kitchen1
card:
type: picture-elements
image: /local/ui/floorplan/main-night.png
style: |
ha-card:first-child {
background: rgba(42, 46, 48, 1)
}
elements:
######################### INDIVIDUAL LIGHTS - BLENDED IMAGE OVERLAYS #########################
- action: none
entity: light.kitchen1
hold_action:
action: none
image: /local/ui/floorplan/lights/lounge3-red.png
style:
filter: >-
${ "hue-rotate(" + (states['light.kitchen1'].attributes.hs_color ?
states['light.bedroom'].attributes.hs_color[0] : 0) + "deg) saturate("
+ (states['light.bedroom'].attributes.hs_color ?
states['light.bedroom'].attributes.hs_color[1] : 100)+ "%)"}
left: 50%
mix-blend-mode: lighten
opacity: >-
${states['light.kitchen1'].state === 'on' ?
(states['light.kitchen1'].attributes.brightness / 255) : '0'}
top: 50%
width: 100%
tap_action:
action: none
type: image
This is exactly like my working yaml (just be careful to align all the indentations properly)… does it work for you as well?
Just for completeness, this is the top of the full yaml file:
views:
- title: Casa 3D
path: casa3d
panel: true
badges: []
cards:
- type: picture-elements
image: /local/casa/rotated7/Casa3D_rotated7_night.png
elements:
- type: custom:config-template-card
[...]
(the “base image” is the house rendered at night with all the lights turned off)
Did you figure this one out? Adding the contents in the referenced location results in other errors here
Awesome, I was able to get it to work. The coloring seems to be good except for my Green which doesn’t really come out vibrant and becomes more of a dark green. I rendered them in floorplanner.com but I dont think the colors are saturated enough to play well with it.
In case any of you were still having issues with color shift, I adjusted the code as follows to get better color accuracy:
filter: >-
${ "sepia(100%) hue-rotate(calc(" +
(states['light.hue_color_lamp_1'].attributes.hs_color ?
states['light.hue_color_lamp_1'].attributes.hs_color[0] : 0)
+ "deg - 55deg)) saturate(calc(" +
(states['light.hue_color_lamp_1'].attributes.hs_color ?
states['light.hue_color_lamp_1'].attributes.hs_color[1] :
100)+"% *2))"}
mix-blend-mode: lighten
opacity: >-
${states['light.hue_color_lamp_1'].state === 'on' ?
(states['light.hue_color_lamp_1'].attributes.brightness /
255) : '0'}
3 Likes
It’s happening to me now. Did you find a way to get rid of this?
Hey Luke,
I’m loving the Homekit dashboards around, been using the Mattias one before I stumbled across yours and I’m loving it.
Are you able to share where you define the rooms?
I saw this video from Everything Smart Home and really liked the Spotify media card and the “All devices” and “Rooms” page where you have the buttons to select entities. I like the floorplan too but don’t have that many smart devices and troubleshooting would be a pain in the *** for me as I’m not really a codejunkie 
Maybe you can point me out to the version he is showing? And if you could let me know how I could remove the “room control” page withouth breaking the rest would be really really helpfull.
1 Like
Hey guys,
im facing some troubles regarding some style setups the author uses. I give you an example:
When I try to implement the Spotify artwork or weather add-on on the sidebar I run in the problem that the card is fixed to the bottom left corner. That happens when I use follow code:
- artwork: full-cover
entity: media_player.spotify_claudia7785_de
hide:
power: true
progress: false
runtime: false
volume: true
style: |
:host {
left: 50% !important;
top: 50% !important;
width: 33% !important;
height: 62.3% !important;
}
ha-card{
border-radius: 1vw !important;
overflow: hidden !important;
height: 100%;
}
:host #primaryProgress{
background: #474A52 !important;
}
type: custom:mini-media-player
But when I use a normal style code everything is fine:
- artwork: full-cover
entity: media_player.spotify_claudia7785_de
hide:
power: true
progress: false
runtime: false
volume: true
style:
left: 50%
top: 50%
width: 33%
height: 62.3%
type: custom:mini-media-player
What’s the issue? Does anyone have an idea?
Hmm thats pretty odd indeed. Are there any other styles being applied to this? I try to use a normal style tag wherever possible and only the more manual CSS ( :host .class etc ) approach when I want to override the actual card styles themselves (for example, to hijack it).
Best way to see what’s going on is to right click and inspect the element, see what styles are applied to it (if you understand CSS etc).
Hey thanks for sharing his video, cool to see people chatting about this!
He’s showing the original version, of which I have definately updated a few times over the years. Unfortunately it’s quite “manual” and repeated - been meaning to go through this and clean it all up.
To delete a tab / view:
The whole dashboard is essentially split into several “pages” each noted by a giant commented out title like " Floorplan View", “Now Playing Media View” etc. If you delete everything in between two of these titles you will delete that “tab” or view.
Now delete it from the menu:
In each view, the menu is essentially repeated again and again. (Yikes, really need to clean this thing up). So you will also need to delete the “Menu Buttons” you want to delete (probably the first one) and reposition the ones below to move them upwards. You will need to do this for each instance of the menu buttons for each view. So basically delete this:
- action: none
image: /local/ui/sidebar/rooms_on.png
style:
border-radius: 5vw
left: 11.7%
top: 26%
width: 20.5078125%
tap_action:
action: navigate
navigation_path: /lovelace/0
type: image
And then change the “top” value for each menu button still remaining so they all get shited upwards.
1 Like
You the best, I’ll get busy this weekend! 
Love your look and take on the dashboard, was using the one from Mattias for quite some time till I found yours! Very cool!
1 Like
Hey @lukevink. Thanks for your reply. Yesterday, me and a friend looked a bit deeper but couldn’t figure out the problem Im having. Did you ever update your Homeassistant? Im on the newest update.
Hey yep I’m cleaning up the Lovelace and I’ll release an update soon. In most cases the updates have only removed things from the config etc. I haven’t seen any crazy breaking changes.
3 Likes
Thanks! Much appreciated 
1 Like