I have been using the approach documented here for a few years, and finally got around to documenting the details. I built my dashboards out of ray traced renders from an accurate Sketchup model of the house, along with detailed lighting overlays and alternate positions for some doors and windows, did all the post-processing in GIMP, and pulled it all together with Picture Elements and Card Mod. I recently had to re-do the visualisations due to some renovations, and this time I took detailed notes to document the process. Hopefully this will be interesting to some people, and can be a useful reference.
3 Likes
Hi everyone, started using this approach to create a great UI!
I am at a quite good point but I don’t why in the sidebar the mini temperature graph (inside vs outside) and the mini weather card don’t show up.
Opening the Console, I don’t see any error.
I’ll show you a photo of it
P.S: I tried using both @lukevink and @CDRX2 approach to create that, i checked again and again and the code is right, with the correct entities and spaces, ecc…
######################### Minigraph to show temperature inside and out #########################
- color_thresholds:
- color: "#4dd2ff"
value: 10
- color: "#ffa31a"
value: 15
- color: "#ff1a1a"
value: 20
entities:
- sensor.termostato_ingresso_current_temperature
- sensor.clima_alby_outside_temperature
icon: "mdi:home-thermometer-outline"
show:
icon: true
legend: false
name: false
style: |
:host {
left: 11.6%;
top: 92.9%;
width: 23.5%;
overflow: hidden;
height: 15%;
background: none !important;
box-shadow: none !important;
}
.header {
font-size: 1vw;
position: absolute !important;
width: 5% !important;
padding: 0 !important;
right: 20% !important;
top: 15% !important;
}
ha-card {
background: none !important;
padding: 0 !important;
}
.icon > ha-icon {
width:1.8vw !important;
height:1.8vw !important;
}
.state__time{
font-size:0.9vw !important;
margin-top: 0.2vw;
font-weight: 300 !important;
opacity: 0.4 !important;
}
.states {
font-size: 0.5vw !important;
padding: 1vw 0vw 0vw 0vw !important;
margin: auto !important;
width: 68%;
}
tap_action:
action: navigate
navigation_path: /lovelace/4
type: "custom:mini-graph-card"
######################### Mini Weather card #########################
- backdrop: false
entity: weather.forecast_casa
name: " "
style: |
:host {
left: 11.4%;
top: 85.5%;
width: 7%;
height: 7% !important;
overflow: hidden;
height: 8.5vw;
background: none !important;
box-shadow: none !important;
font-size: 1vw !important;
}
ha-card {
background: none !important;
box-shadow: none !important;
flex-flow: row-reverse !important;
padding: 0 !important;
}
.weather__info--add{
display : none !important;
}
.weather__info{
flex-grow: 1;
min-height: 0 !important;
height: 2.4vw;
margin-left: 0.6vw;
}
.weather__icon{
margin-right:0.5% !important;
margin-top: -3%;
width: 2vw !important;
height: 2vw !important;
flex: 0 0 2vw !important;
}
tap_action:
action: navigate
navigation_path: /lovelace/3
type: "custom:simple-weather-card"
EDIT: solved it, in Luke’s code the card-mod voice was missing before style
Guys I have a question: what did you use in order to modify the sidebar images? I mean the ones you click and that bring you to a new view, like the “Control Rooms”?
Any news about your new dashboard?
@lukevink Nice work and share! i’m working hard on it to get it done with my home. I’m just an hobbiest trying to get it done. Can you advice me please?
I got 2 issues:
-
I have RGBWW strips, the color (rgb) is working ok with a red rendered image.
But with a red render, i don’t get a nice white color. Should i render both? And somehow code it to choose for red or white?" -
I got multiple hue ambiance warm white / cool white lights bulbs, i can’t get the dashboard display the right color gradiant. It’s always the same color temperature i did in the render. Cool white or warm white.
here is some of my code;
title: Floorplan
icon: mdi:floor-plan
path: floorplanDemo
panel: true
cards:
- type: custom:config-template-card
entities:
- light.keuken
- light.woonkamer
- light.eethoek
- light.kantoor
- light.hal
- light.overstek_buiten
- light.bijkeuken
- light.
card:
type: picture-elements
image: /local/Plattegrond/bgg-basis.png
style: |
ha-card:first-child {
background: rgba(42, 46, 48, 1)
}
elements:
- type: image
action: none
entity: light.keuken
hold_action:
action: none
image: /local/Plattegrond/bgg-keuken.png
style:
filter: >-
${ "hue-rotate(" + (states['light.keuken'].attributes.hs_color ?
states['light.keuken'].attributes.hs_color[0] : 0) + "deg)
saturate(" + (states['light.keuken'].attributes.hs_color ?
states['light.keuken'].attributes.hs_color[1] : 100)+ "%)"}
left: 50%
mix-blend-mode: lighten
opacity: >-
${states['light.keuken'].state === 'on' ?
(states['light.keuken'].attributes.brightness / 255) : '0'}
top: 50%
width: 100%
height: 100%
tap_action:
action: none
- type: image
action: none
entity: light.overstek_buiten
hold_action:
action: none
image: /local/Plattegrond/bgg-buitenverlichting-red.png
style:
filter: >-
${ "hue-rotate(" +
(states['light.overstek_buiten'].attributes.hs_color ?
states['light.overstek_buiten'].attributes.hs_color[0] : 0) +
"deg)"}
left: 50%
mix-blend-mode: lighten
opacity: >-
${states['light.overstek_buiten'].state === 'on' ?
(states['light.overstek_buiten'].attributes.brightness / 255) :
'0'}
top: 50%
width: 100%
height: 100%
tap_action:
action: none
You’re a star.
I’ve been searching for CSS filters to change my lights to the correct colour as I wasn’t have much luck with the ‘standard’ filters. Your filters work perfectly, thank you!
what im doing wrong. i have a mutli color bulbs and all i see is white
type: picture-elements
image: /local/floorplans/ground/main.png
panel: true
elements:
- type: custom:config-template-card
entities:
- light.bedroom_light
element:
type: image
image: /local/floorplans/ground/hallwaylighton.png
entity: light.bedroom_light
tap_action:
action: none
hold_action:
action: none
style:
filter: >-
${ "hue-rotate(" + (states['light.bedroom_light'].attributes.hs_color ?
states['light.bedroom_light'].attributes.hs_color[0] : 0) + "deg)"}
opacity: >-
${states['light.bedroom_light'].state === 'on' ?
(states['light.bedroom_light'].attributes.brightness / 255) : '0'}
mix-blend-mode: lighten
left: 50%
top: 50%
width: 100%
- type: state-icon
entity: light.bedroom_light
style:
left: 96%
top: 9%
opacity: null
tap_action:
action: toggle
i have one image using sweethome 3d normal
and other on light ( light power 50%
unfortunately I´m struggeling also with the dynamic colors. Static colors are working fine. ChatGPT is already out of answers 
On sweethome, what colour did you use for the on png file? I found using red works better than any other colour, you cannot use white
I’m having some trouble rendering the lights with my RGB yeelight bulbs.
I rendered the images with both red and white light on sweet home 3D
In RGB mode everything works fine, the red light overlays and display the correct color with the filter.
When using the color_temp mode the overlay stays white even if the color is “hot”, nothing changes apart from the icon color.
type: picture-elements
image: /local/base.png
elements:
- type: custom:config-template-card
variables:
LIGHT_STATE: states['light.bureau'].state
COLOR_MODE: states['light.bureau'].attributes.color_mode
LIGHT_COLOR: states['light.bureau'].attributes.hs_color
BRIGHTNESS: states['light.bureau'].attributes.brightness
entities:
- light.bureau
element:
type: image
image: /local/transparent.png
state_image:
"on": >-
${COLOR_MODE === 'color_temp' || (COLOR_MODE === 'rgb' && LIGHT_COLOR
&& LIGHT_COLOR[0] == 0 && LIGHT_COLOR[1] == 0) ?
'/local/light.bureau.png' : '/local/light.bureau.red.png' }
entity: light.bureau
style:
filter: "${ \"hue-rotate(\" + (LIGHT_COLOR ? LIGHT_COLOR[0] : 0) + \"deg)\"}"
opacity: "${LIGHT_STATE === 'on' ? (BRIGHTNESS / 255) : '100'}"
mix-blend-mode: lighten
pointer-events: none
left: 50%
top: 50%
width: 100%
- type: state-icon
entity: light.bureau
title: null
style:
top: 75.79%
left: 17.39%
border-radius: 50%
text-align: center
background-color: rgba(255, 255, 255, 0.3)
tap_action:
action: toggle
hey everyone, I started having a problem since two days. I don’t know why, but when I now turn on the light, it shows the overlay image only if I reload the Dashboard, while before the image just appeared immediately over the main one when I turned on the light. Can someone give me a help on how to solve this?