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
awesome!!!
Hey Luke,
You still have a previous version of the “All devices” view/tab? I really liked that and would like to implement that.
Thanks your previous post. I managed to get the floorplan and Roborock view out. However, the menu items still appear again when I click on a new view.
So for instance, when I switch to the health page I still see “Control room” and “Clean up” as selectable.
Luke, how did you position the playback location a bit down on your dashboard back then?
I can’t get it down…
- type: entities
view_layout:
grid-area: playlist
title:
state_color: true
show_header_toggle: false
card_mod:
class: header
entities:
- type: 'custom:spotify-card'
limit: 10
always_play_random_song: true
name:
style: |
:host {
left: 79.5%;
top: 39.8%;
width: 31%;
height: 62.3%;
border-radius: 1vw;
}
#header{
display:none !important;
}
#content{
border:none !important;
}
.playback-controls{
display:none !important;
}
#header-track{
display:none;
}
.list-item > p{
white-space: nowrap;
overflow: hidden;
}
.list-item{
border-radius: 0.2vw;
overflow:hidden;
border:none !important;
margin-bottom:2px;
}
Hi luke, i tried to change the height fitting my dashboard but cant find where to change this. the width is dynamical indeed and works fine. however its currently little but to heigh for my Samsung Tablet A8. hope you can help me out. the resolution is 1920 x 1200 and aspect ratio 16:10
Hey Luke, awesome floorplan!
I have implemented the code for changing the hue of my lightbulbs, but found it kind of buggy… I am experiencing a slight jitter like each time a press the button for controlling the light, the page refreshes or something. Do you know a possible cause to that?
Would like to hear from you!
Hi guys,
For some (for me) unknown reason I cannot get the brigthen light and/or color sync to work
Nothing happens to my FloorPlan when i change light settings…
I have tried many different things based on this (and other) projects.
Hopefully it is something really basic ?
views:
- title: Floorplan
# path:
panel: true
badges: []
cards:
- type: picture-elements
image: /local/images/3d_floorplan/color/home_off.png
style: |
ha-card:first-child {
background: rgba(42, 46, 48, 1)
}
elements:
- type: custom:config-template-card
entities:
- light.spisestue
- light.kontor_1
element:
type: image
image: /local/images/3d_floorplan/color/home_white.png
entity: light.spisestue
tap_action:
action: none
hold_action:
action: none
style:
opacity: >-
${ ( states["light.spisestue"].attributes.brightness ?
states["light.spisestue"].attributes.brightness / 255 : 0) -
(states["light.spisestue"].attributes.hs_color ?
states["light.spisestue"].attributes.hs_color[1]/90 : 0)}
mix-blend-mode: lighten
top: 50%
left: 50%
transform: none
- type: custom:config-template-card
entities:
- light.spisestue
element:
type: image
image: /local/images/3d_floorplan/color/home_red.png
entity: light.spisestue
tap_action:
action: none
hold_action:
action: none
style:
filter: >-
${ "hue-rotate(" + (states["light.spisestue"].attributes.hs_color ?
states["light.spisestue"].attributes.hs_color[0] : "0") + "deg)
saturate(" + (states["light.spisestue"].attributes.hs_color ?
states["light.spisestue"].attributes.hs_color[1] : 100)+ "%)" }
opacity: >-
${ (states["light.spisestue"].attributes.brightness ?
states["light.spisestue"].attributes.brightness / 255 : 0) *
(states["light.spisestue"].attributes.hs_color ?
states["light.spisestue"].attributes.hs_color[1]/90 : 0) }
mix-blend-mode: lighten
top: 50%
left: 50%
transform: none
Very basic question, but did you install config-template-card?
Well, at this point basic questions are very wellcome
and yes, config-template-card is installed.
Here are the 3 rendered photos from GIMP, I think they are alright
Not sure, but I believe card-mod is also necessary for this to work.
I can check in my code a bit later, I’ve based my HA instance heavily on this.
1 Like