How do you !include the button card template while in storage mode??
Hey guys, i am a newbie and i saw that custom lovelace that i loved. How can i install it? I dont care for the the floor plan but for the theme and the entitys cards.
Where was it? Do you know what it was called?
!include only works in yaml mode. You’d have to copy the contents of the button card templates to right place using raw edit mode.
1 Like
With “the right place”, you mean under the view I’ve created
Yes, you need them copied on each view where you want to use them.
Thnks. I’ve changed to yaml mode now and this works.
1 Like
Is this somewhat doable for a user who never touched Home Assistant or any coding language in his life? Are there any video tutorials on how to do this?
I’d advise getting to know the various cards, integrations and custom elements first. It is doable, I was in your situation a year and a half ago and now have a very complete version of this dashboard.
Ive now created my own setup based on @lukevink his setup. I used his buttom card template but I get this error
Button-card template 'color_light' is missing!
Anybody got a suggestion?
Also the light slider card does not work. I’ve copied it from luke’s github and added the resource. But the card does not work.
I added this to button_card_template.yaml and it seemed to fix that issue.
color_light:
styles:
card:
- border-radius: 50%
- height: 4em
- width: 4em
- margin: 4px
I am however seeing a bunch of other errors on the frontend that I am yet to resolve.
Still I only have about a half hour a night to look at this at the moment.
2 Likes
Thnks. This works
1 Like
Hey!
I got slider working but i cant get to make them combine with each other… where should i be looking for problem? I will leave my code down belowe just in case 
that is my last problem, next thing is just adding more layouts etc, awsome project btw!
button_card_templates: !include button_card_templates.yaml
kiosk_mode:
admin_settings:
hide_header: true
hide_sidebar: true
kiosk: true
views:
- title: Control Rooms
icon: mdi:floor-plan
panel: true
badges: []
cards:
- type: custom:config-template-card
entities:
- light.wled
- light.wled_2
- light.sonoff_s20_relay
- switch.power_on_2
card:
type: picture-elements
image: /local/ui/floorplan/normal.png
elements:
- action: none
entity: light.wled
hold_action:
action: none
image: /local/ui/floorplan/lights/rgbnurk1.png
style:
filter: >-
${ "hue-rotate(" +
(states['light.wled'].attributes.hs_color ?
states['light.wled'].attributes.hs_color[0] : 0) + "deg)"}
left: 50%
mix-blend-mode: lighten
opacity: "${states['light.wled'].state === 'on' ? (states['light.wled'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
tap_action:
action: none
type: image
- action: none
entity: light.wled_2
hold_action:
action: none
image: /local/ui/floorplan/lights/kolmnurk1.png
style:
filter: >-
${ "hue-rotate(" +
(states['light.wled_2'].attributes.hs_color ?
states['light.wled_2'].attributes.hs_color[0] : 0) + "deg)"}
left: 50%
mix-blend-mode: lighten
opacity: "${states['light.wled_2'].state === 'on' ? (states['light.wled_2'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
tap_action:
action: none
type: image
- action: none
entity: light.wled_2
hold_action:
action: none
image: /local/ui/floorplan/lights/telekaulaosa1.png
style:
filter: >-
${ "hue-rotate(" +
(states['light.wled_2'].attributes.hs_color ?
states['light.wled_2'].attributes.hs_color[0] : 0) + "deg)"}
left: 50%
mix-blend-mode: lighten
opacity: "${states['light.wled_2'].state === 'on' ? (states['light.wled_2'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
tap_action:
action: none
type: image
- action: none
entity: light.sonoff_s20_relay
hold_action:
action: none
image: /local/ui/floorplan/lights/telekaValgusti.png
style:
left: 50%
mix-blend-mode: lighten
opacity: "${states['light.sonoff_s20_relay'].state === 'on' ? (states['light.sonoff_s20_relay'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
tap_action:
action: none
type: image
######################### ROOM/GROUP CONTROL TRANSPARENT IMAGES #########################
# Used to create tap areas and popups for each room, referring to light groups.
# Because the above images overlap each other, I used seperate transparent images
#. to handle the control of the room, so you always tap the right room.
#
# browser_mod.popup is used for a tap and hold for a custom popup card
- entity: light.wled
double_tap_action:
action: fire-dom-event
browser_mod:
command: popup
card:
cards:
- entities:
- entity: light.wled
secondary_info: last-changed
style:
z-index: 5
type: entities
- cards:
- cards:
- brightness: false
color_picker: false
effects_list: false
entity: light.wled
full_width_sliders: true
hide_header: true
persist_features: true
show_slider_percent: false
smooth_color_wheel: true
type: 'custom:light-entity-card'
style: |
ha-card {
box-shadow: none !important;
}
- brightness: false
color_temp: false
entity: light.wled
full_width_sliders: true
hide_header: true
persist_features: true
show_slider_percent: false
smooth_color_wheel: true
type: 'custom:light-entity-card'
style: |
ha-card {
box-shadow: none !important;
}
column_height: 1
layout: vertical
type: 'custom:layout-card'
- entities:
- color_temp: true
entity: light.wled
hide_header: true
persist_features: true
type: 'custom:light-slider-card'
show_header_toggle: false
style: |
:host{
height: 100%;
z-index: 0;
}
ha-card {
box-shadow: none !important;
}
type: entities
column_num: 2
layout: horizontal
max_width:
- 60%
- 40%
type: 'custom:layout-card'
type: 'custom:vertical-stack-in-card'
deviceID:
- this
style:
'--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
border-radius: 0.8vw
opacity: 0.9
title: Balcony Lights
image: /local/transparent.png
style:
height: 10%
left: 90%
top: 20%
width: 13%
tap_action:
action: call-service
service: homeassistant.toggle
service_data:
entity_id: light.wled
type: image
- entity: light.wled_2
hold_action:
action: fire-dom-event
browser_mod:
command: popup
card:
cards:
- entities:
- entity: light.wled_2
secondary_info: last-changed
style:
z-index: 5
type: entities
- cards:
- cards:
- brightness: false
color_picker: false
effects_list: false
entity: light.wled_2
full_width_sliders: true
hide_header: true
persist_features: true
show_slider_percent: false
smooth_color_wheel: true
type: 'custom:light-entity-card'
style: |
ha-card {
box-shadow: none !important;
}
- brightness: false
color_temp: false
entity: light.wled_2
full_width_sliders: true
hide_header: true
persist_features: true
show_slider_percent: false
smooth_color_wheel: true
type: 'custom:light-entity-card'
style: |
ha-card {
box-shadow: none !important;
}
column_height: 1
layout: vertical
type: 'custom:layout-card'
- entities:
- color_temp: true
entity: light.wled_2
hide_header: true
persist_features: true
type: 'custom:light-slider-card'
show_header_toggle: false
style: |
:host{
height: 100%;
z-index: 0;
}
ha-card {
box-shadow: none !important;
}
type: entities
column_num: 2
layout: horizontal
max_width:
- 60%
- 40%
type: 'custom:layout-card'
type: 'custom:vertical-stack-in-card'
deviceID:
- this
style:
'--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
border-radius: 0.8vw
opacity: 0.9
title: Living Room
image: /local/transparent.png
style:
height: 48%
left: 50%
top: 50%
width: 32%
tap_action:
action: call-service
service: homeassistant.toggle
service_data:
entity_id: light.wled_2
type: image
- entity: light.wled
type: custom:button-card
style:
left: 90%
top: 15%
template:
- light
- entity: light.wled
type: custom:button-card
style:
left: 70%
top: 35%
template:
- light
- entity: light.wled_2
type: custom:button-card
style:
left: 93%
top: 77%
template:
- light
- entity: switch.power_on_2
type: custom:button-card
style:
left: 57%
top: 5%
template:
- light_white
- entity: light.sonoff_s20_relay
type: custom:button-card
style:
left: 37%
top: 34%
template:
- light_white
#################################################################
# #
# SIDEBAR #
# #
#################################################################
######################### BG IMAGE #########################
- action: none
hold_action:
action: none
image: /local/ui/sidebar/sidebarBG2.png
style:
height: 100%
left: 11.73828125%
top: 50%
width: 23.4765625%
tap_action:
action: none
type: image
######################### TIME AND DATE #########################
- entity: sensor.time
hold_action:
action: none
style:
color: 'rgba(255, 255, 255, 0.7)'
font-size: 5.41vw
font-weight: 200
left: 2.7%
letter-spacing: '-0.05vw'
max-width: 1px
top: 10%
tap_action:
action: none
type: state-label
- entity: sensor.date
hold_action:
action: none
style:
color: 'rgba(255, 255, 255, 0.3)'
font-size: 1.3vw
font-weight: 300
left: 18.1%
letter-spacing: '-0.05vw'
text-align: left
top: 17%
width: 30%
tap_action:
action: none
type: state-label
######################### MENU BUTTONS #########################
- action: none
image: /local/ui/sidebar/rooms_on.png
style:
border-radius: 5vw
box-shadow: '0px 0.2vw 0.8vw 0px rgba(0,0,0,0.1)'
left: 11.7%
top: 26%
width: 20.5078125%
tap_action:
action: navigate
navigation_path: /lovelace/0
type: image
- action: none
image: /local/ui/sidebar/lights_off.png
style:
left: 11.7%
top: 34%
width: 20.5078125%
tap_action:
action: navigate
navigation_path: /lovelace/1
type: image
- action: none
image: /local/ui/sidebar/all_off.png
style:
left: 11.7%
top: 42%
width: 20.5078125%
tap_action:
action: navigate
navigation_path: /lovelace/2
type: image
- action: none
image: /local/ui/sidebar/cleanUp_off.png
style:
left: 11.7%
top: 50%
width: 20.5078125%
tap_action:
action: navigate
navigation_path: /lovelace/4
type: image
- action: none
image: /local/ui/sidebar/media_off.png
style:
left: 11.7%
top: 58%
width: 20.5078125%
tap_action:
action: navigate
navigation_path: /lovelace/4
type: image
######################### TEMPERATURE MINI GRAPH (INSIDE vs OUTSIDE) #########################
- color_thresholds:
- color: '#4dd2ff'
value: 10
- color: '#ffa31a'
value: 15
- color: '#ff1a1a'
value: 20
entities:
- sensor.sensor_1_temperature
- sensor.dark_sky_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: 20%;
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'
######################### Overlay shadow images #########################
- action: none
image: /local/ui/sidebar/sideShadow.png
style:
height: 35%
left: 18.45%
pointer-events: none
top: 83%
width: 10%
type: image
- action: none
image: /local/ui/sidebar/sidebarInnerShadow.png
style:
left: 22.83%
opacity: 0.7
pointer-events: none
top: 50%
width: 1.2109375%
type: image
######################### Mini Weather card #########################
- backdrop: false
entity: weather.kodu
name: ' '
style: |
:host {
left: 11.4%;
top: 80.5%;
width: 17%;
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'
#############################################################################################################################################
# #
# Xiaomi Clean Up View #
# #
#############################################################################################################################################
- title: Clean Up
icon: 'mdi:robot-vacuum'
panel: true
cards:
- type: picture-elements
image: /local/ui/floorplan/normal.png
elements:
- action: none
entity: sun.sun
hold_action:
action: none
state_image:
above_horizon: /local/ui/floorplan/normal.png
below_horizon: /local/transparent.png
style:
height: 100%
left: 50%
top: 50%
width: 100%
tap_action:
action: none
type: image
#################################################################
# #
# SIDEBAR : Cleanup #
# #
#################################################################
######################### Background #########################
- action: none
hold_action:
action: none
image: /local/ui/sidebar/sidebarBG2.png
style:
height: 100%
left: 11.73828125%
top: 50%
width: 23.4765625%
tap_action:
action: none
type: image
######################### TIME & DATE #########################
- entity: sensor.time
hold_action:
action: none
style:
color: 'rgba(255, 255, 255, 0.7)'
font-size: 5.41vw
font-weight: 200
left: 2.7%
letter-spacing: '-0.05vw'
max-width: 1px
top: 10%
tap_action:
action: none
type: state-label
- entity: sensor.date
hold_action:
action: none
style:
color: 'rgba(255, 255, 255, 0.3)'
font-size: 1.3vw
font-weight: 300
left: 18.1%
letter-spacing: '-0.05vw'
text-align: left
top: 17%
width: 30%
tap_action:
action: none
type: state-label
######################### MENU BUTTONS #########################
- action: none
image: /local/ui/sidebar/rooms_off.png
style:
border-radius: 5vw
box-shadow: '0px 0.2vw 0.8vw 0px rgba(0,0,0,0.1)'
left: 11.7%
top: 26%
width: 20.5078125%
tap_action:
action: navigate
navigation_path: /lovelace/0
type: image
- action: none
image: /local/ui/sidebar/lights_on.png
style:
left: 11.7%
top: 34%
width: 20.5078125%
tap_action:
action: navigate
navigation_path: /lovelace/1
type: image
- action: none
image: /local/ui/sidebar/all_off.png
style:
left: 11.7%
top: 42%
width: 20.5078125%
tap_action:
action: navigate
navigation_path: /lovelace/2
type: image
- action: none
image: /local/ui/sidebar/cleanUp_off.png
style:
left: 11.7%
top: 50%
width: 20.5078125%
tap_action:
action: navigate
navigation_path: /lovelace/4
type: image
- action: none
image: /local/ui/sidebar/media_off.png
style:
left: 11.7%
top: 58%
width: 20.5078125%
tap_action:
action: navigate
navigation_path: /lovelace/4
type: image
######################### TEMPERATURE MINI GRAPH (INSIDE vs OUTSIDE) #########################
- color_thresholds:
- color: '#4dd2ff'
value: 10
- color: '#ffa31a'
value: 15
- color: '#ff1a1a'
value: 20
entities:
- sensor.sensor_1_temperature
- sensor.dark_sky_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: 20%;
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'
######################### Overlay shadow images #########################
- action: none
image: /local/ui/sidebar/sideShadow.png
style:
height: 35%
left: 18.45%
pointer-events: none
top: 83%
width: 10%
type: image
- action: none
image: /local/ui/sidebar/sidebarInnerShadow.png
style:
left: 22.83%
opacity: 0.7
pointer-events: none
top: 50%
width: 1.2109375%
type: image
######################### Mini Weather card #########################
- backdrop: false
entity: weather.kodu
name: ' '
style: |
:host {
left: 11.4%;
top: 80.5%;
width: 17%;
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'
Hey @lukevink!! this is cool, but can you help on how to render and place? like case 1 or case 2?
do we need to turn one light ON and render and turn the other light on (keeping the state of last render light same) and render, or we have to render each light like , render light 1 ON(all other appliance off) , render light 2 ON(all other appliance off) .
case 1:
– Light 1 --------(light 1 only ON)
– Light 2 --------(light 2 only ON)
– Base Image –(all lights OFF)
(or)
case 2:
– Light 1 --------(light 1 and 2 ON)
– Light 2 --------(light 2 ON)
– Base Image –(all lights OFF)
Hey,
You want to do case 1. All lights off as a base layer and then render each individual light on.
1 Like
Hi there, I love your design, for the lights, would I have to edit the renders in gimp or photoshop to remove the rest of the image? Or would I just keep the image as is? Thank you
You are experiencing exactly the same issue as I am currently.
Did you manage to sort it?
If I input the opacity myself it works just fine
I’ve switches to yaml mode and now this code works just fine
Oh right!!! I’ll give that ago. I did see you said that before… but thought you were talking about something else. Thanks for the reply!
how can i get the ALL DEVICES Menu ? i just have " Control/Clean/Media/Health"
Also your github upload seems to be old. there is no homekit-card resource in the config. 
thank you!