background: var(--background-image)

custom_header:
chevrons: false
split_mode: true
title: Home
sidebar:
hideTopMenu: false
digitalClock: true
digitalClockWithSeconds: true
date: true
dateFormat: DD MMM YYYY
width:
mobile: 0
tablet: 25
desktop: 20
sidebarMenu:
- action: navigate
navigation_path: /lovelace-tablet/overview
name: Overview
icon: mdi:home-outline
- action: navigate
navigation_path: /lovelace-tablet/home_theatre
name: Home Theatre
icon: mdi:theater
- action: navigate
navigation_path: /lovelace-tablet/Kitchen
name: Kitchen
icon: mdi:fridge-outline
- action: navigate
navigation_path: /lovelace-tablet/rumpus
name: Rumpus
icon: mdi:sofa
- action: navigate
navigation_path: /lovelace-tablet/person1-bedroom
name: person1 Bedroom
icon: mdi:face-woman
- action: navigate
navigation_path: /lovelace-tablet/person2-bedroom
name: person2 Bedroom
icon: mdi:face-man
 - action: navigate
navigation_path: /lovelace-tablet/embed
name: Embed
icon: mdi:bed-king-outline
bottomCard:
type: custom:mini-graph-card
cardOptions:
entities:
- sensor.temperatura_cpu
cardStyle: |
:host {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
ha-card {
background: transparent;
color: #FFF;
overflow: hidden !important;
box-shadow: none !important;
border: transparent;
}
views:
- title: Overview
path: overview
type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr
grid-template-rows: 79px 1fr 43px
grid-template-areas: |
". ."
"set1 set2"
". ."
"footer footer "
margin: 0px
icon: mdi:home-outline
badges: []
cards:
- square: false
 columns: 3
type: grid
cards:
- type: custom:button-card
- type: custom:button-card
- type: custom:button-card
- badges: []
cards:
- cards:
- elements:
- entity: light.kitchen
style:
left: 85%
top: 92%
tap_action:
action: toggle
type: state-icon
icon: mdi:ceiling-light
- entity: vacuum.eva
style:
left: 95%
top: 92%
tap_action:
action: more-info
type: state-icon
- entity: sensor.kitchen_hue_motion_sensor
style:
left: 10%
top: 92%
type: state-label
- entity: binary_sensor.kitchen_hue_motion_sensor
style:
left: 25%
top: 92%
type: state-label
image: /local/kitchen.jpg
type: picture-elements
- cards:
- show_state: true
show_name: true
 camera_view: auto
entity: vacuum.eva
image: /local/eva_5.jpg
tap_action:
action: more-info
type: picture-entity
aspect_ratio: '0.92'
- entity: light.kitchen
type: light
icon: mdi:ceiling-light
card_mod:
style: |
ha-card {
background: rgba(50,50,50,0.6);
}
type: horizontal-stack
- type: media-control
entity: media_player.kitchen_speaker
card_mod:
style: |
ha-card {
--primary-color: #3e3e3e;
}
type: vertical-stack
icon: mdi:fridge-outline
panel: false
path: Kitchen
title: Kitchen
- badges: []
cards:
- type: vertical-stack
cards:
- elements:
- entity: light.theatre_room
style:
left: 65%
top: 92%
tap_action:
action: toggle
type: state-icon
- entity: light.theatre_downlight
style:
left: 85%
top: 92%
tap_action:
action: toggle
type: state-icon
- entity: light.home_theatre_lamp
style:
left: 75%
top: 92%
tap_action:
action: toggle
type: state-icon
- entity: light.toylight
icon: mdi:light-switch
style:
left: 95%
top: 92%
tap_action:
action: toggle
type: state-icon
- entity: switch.ht_fan
style:
left: 55%
top: 92%
tap_action:
action: toggle
type: state-icon
- entity: sensor.ht_multi_sensor
style:
left: 10%
top: 92%
type: state-label
- entity: climate.home_theatre_ac
style:
left: 45%
top: 92%
tap_action:
action: more-info
 hold_action:
action: toggle
type: state-icon
- entity: sensor.ht_multi_sensor
style:
left: 10%
top: 92%
type: state-label
image: /local/hometheatre.jpg
type: picture-elements
- entities:
- remote.harmonyht
- input_select.harmony_ht
show_header_toggle: false
style: |
ha-card {
background-image:
url("/local/{{ states("input_select.harmony_ht") }}.jpg");
background-size: contain;
background-position: right;
background-repeat: no-repeat;
background-color: rgb(0,0,0)
}
title: Harmony Remote HT
type: entities
- entity: media_player.nvidia_shield
type: media-control
card_mod:
style: |
ha-card {
--primary-color: #3e3e3e;
}
- type: vertical-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: thermostat
entity: climate.home_theatre_ac
name: ' '
- type: custom:mini-graph-card
 entities:
- sensor.ht_multi_sensor
line_color: '#d32f2f'
show:
name: false
icon: false
state: false
height: 70
footer:
type: graph
entity: sensor.ht_multi_sensor
hours_to_show: 24
detail: 1
- entities:
- entity: light.theatre_room
- entity: light.home_theatre_lamp
- entity: light.theatre_downlight
- entity: light.toylight
- entity: switch.ht_fan
show_header_toggle: false
type: entities
card_mod:
style: |
ha-card {
background: rgba(50,50,50,0.6);
}
card_mod:
style: |
ha-card {
background: rgba(50,50,50,0.6);
}
icon: mdi:theater
panel: false
path: home_theatre
title: Home Theatre
- badges: []
cards:
- type: vertical-stack
cards:
- elements:
 - entity: switch.rumpus_floor_lamp
style:
left: 95%
top: 92%
tap_action:
action: toggle
type: state-icon
- entity: light.desk_led_strip
hold_action:
action: more-info
icon: mdi:led-strip
style:
left: 85%
top: 92%
tap_action:
action: toggle
type: state-icon
- entity: light.bias
hold_action:
action: more-info
icon: mdi:led-strip
style:
left: 75%
top: 92%
tap_action:
action: toggle
type: state-icon
- entity: sensor.rumpus_multi_sensor
style:
left: 10%
top: 92%
type: state-label
- entity: sensor.rumpus_multi_sensor_2
style:
left: 28%
top: 92%
type: state-label
image: /local/rumpus.jpg
type: picture-elements
- entities:
 - remote.harmonyrumpus
- input_select.harmony_rumpus
show_header_toggle: false
style: |
ha-card {
background-image:
url("/local/{{ states("input_select.harmony_rumpus") }}.jpg");
background-size: contain;
background-position: right;
background-repeat: no-repeat;
background-color: rgb(0,0,0)
}
title: Harmony Remote
type: entities
- entity: media_player.rumpus_max
type: media-control
card_mod:
style: |
ha-card {
--primary-color: #3e3e3e;
}
- type: vertical-stack
cards:
- show_header_toggle: true
title: Bias Lights
type: entities
entities:
- entity: light.bias
full_row: false
hide_when_off: true
icon: mdi:led-strip
max: 100
min: 0
name: Monitor Led
step: 1
toggle: true
type: custom:slider-entity-row
- entity: light.desk_led_strip
full_row: false
hide_when_off: true
 icon: mdi:led-strip
max: 100
min: 0
name: Desk Led
step: 1
toggle: true
type: custom:slider-entity-row
- entity: input_select.light_scene
name: Presets
state_color: false
card_mod:
style: |
ha-card {
background: rgba(50,50,50,0.6);
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mini-graph-card
name: Drybox
entities:
- sensor.drybox_multi_sensor_2
- sensor.drybox_multi_sensor
- type: glance
entities:
- switch.drybox_plug
- sensor.drybox_power
card_mod:
style: |
ha-card {
background: rgba(50,50,50,0.6);
}
icon: mdi:sofa
panel: false
path: rumpus
title: Rumpus
- badges: []
cards:
- cards:
- elements:
- entity: light.hue_person1_bed
 style:
left: 85%
top: 92%
tap_action:
action: toggle
type: state-icon
- entity: light.hue_person1_desk
style:
left: 95%
top: 92%
tap_action:
action: toggle
type: state-icon
- entity: switch.person1_fan
style:
left: 75%
top: 92%
tap_action:
action: toggle
type: state-icon
- entity: light.person1_bedroom
hide_state: true
hide_when_off: true
icon: ' '
name: ' '
style:
left: 7%
top: 92%
tap_action:
action: toggle
type: custom:slider-entity-row
image: /local/person1_bedroom.jpg
type: picture-elements
- cards:
- aspect_ratio: 0%
entity: light.hue_person1_bed
image: /local/person1_bedlamp_2.jpg
tap_action:
action: toggle
type: picture-entity
 - entity: light.hue_person1_desk
image: /local/person1_desklamp_2.jpg
tap_action:
action: toggle
type: picture-entity
type: horizontal-stack
- type: media-control
entity: media_player.person1_display
card_mod:
style: |
ha-card {
--primary-color: #3e3e3e;
}
type: vertical-stack
icon: mdi:face-woman
panel: false
path: person1-bedroom
title: person1 Bedroom
- icon: mdi:face-man
path: person2-bedroom
title: person2 Bedroom
badges: []
cards:
- cards:
- elements:
- entity: light.person2_bling
style:
left: 85%
top: 92%
tap_action:
action: toggle
type: state-icon
- entity: light.hue_person2_desk
style:
left: 95%
top: 92%
tap_action:
action: toggle
type: state-icon
- entity: light.person2_bedroom
 hide_state: true
hide_when_off: true
icon: ' '
name: ' '
style:
left: 7%
top: 92%
tap_action:
action: toggle
type: custom:slider-entity-row
image: /local/person2_bedroom.jpg
type: picture-elements
- cards:
- aspect_ratio: 0%
entity: light.person2_bling
image: /local/person2_floorlamp.jpg
tap_action:
action: toggle
type: picture-entity
- entity: light.hue_person2_desk
image: /local/person2_desklamp.jpg
tap_action:
action: toggle
type: picture-entity
type: horizontal-stack
- type: media-control
entity: media_player.person2_display
card_mod:
style: |
ha-card {
--primary-color: #3e3e3e;
}
type: vertical-stack
- badges: []
cards:
- cards:
- elements:
- entity: light.hue_embed_1
style:
left: 75%
 top: 92%
tap_action:
action: toggle
type: state-icon
- entity: light.hue_embed_2
style:
left: 85%
top: 92%
tap_action:
action: toggle
type: state-icon
- entity: switch.embed_fan
style:
left: 95%
top: 92%
tap_action:
action: toggle
type: state-icon
- entity: light.embed
hide_state: true
hide_when_off: true
icon: ' '
name: ' '
style:
left: 7%
top: 92%
tap_action:
action: toggle
type: custom:slider-entity-row
image: /local/embed.jpg
type: picture-elements
- entities:
- entity: remote.harmonyembed
- entity: input_select.harmony_embed
show_header_toggle: false
style: |
ha-card {
background-image:
url("/local/{{ states("input_select.harmony_embed") }}.jpg");
background-size: contain;
 background-position: right;
background-repeat: no-repeat;
background-color: rgb(0,0,0)
}
title: 'Harmony Remote '
type: entities
- type: media-control
entity: media_player.embed_tv
card_mod:
style: |
ha-card {
--primary-color: #3e3e3e;
}
type: vertical-stack
icon: mdi:bed-king-outline
panel: false
path: embed
title: Embed
button_card_templates:
base:
variables:
circle_input: |
[[[ return Math.round(entity.attributes.brightness / 2.55); ]]]
state_on: >
[[[ return ['on', 'home', 'cool', 'fan_only', 'playing'].indexOf(entity
=== undefined || entity.state) !== -1; ]]]
timeout: >
[[[ return entity === undefined || Date.now() -
Date.parse(entity.last_changed); ]]]
styles:
card:
- padding: 5%
- font-size: 13px
- border-radius: 10px
- background-color: rgba(50,50,50,0.6)
name:
- text-align: left
- justify-self: start
- padding: 0px 10px
- font-weight: bold
 - line-height: 15px
- bottom: 10%
- position: absolute
state:
- justify-self: start
- padding: 0px 10px
base_standard_layout:
styles:
icon:
- top: 3%
- left: 10%
- height: 50%
- width: 50%
grid:
- grid-template-areas: '"i ." "n n"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 3fr 1fr
base_light_layout:
styles:
icon:
- top: 3%
- left: 10%
- height: 50%
- width: 50%
grid:
- grid-template-areas: '"i circle" "n n"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 3fr 1fr
custom_fields:
circle:
- display: initial
- width: 60%
- letter-spacing: 0.03vw
- margin: '-75% 5% 0 0'
- justify-self: end
- opacity: 1
base_footer:
styles:
icon:
- height: 100%
 grid:
- grid-template-areas: '"i n"'
- grid-template-columns: 1fr 2fr
name:
- justify-self: start
base_person:
styles:
card:
- padding: 5%
- font-size: 13px
- border-radius: 10px
name:
- left: 0
- bottom: 0
- pointer-events: none
- line-height: 1.1em
- background-color: rgba(0, 0, 0, 0.4)
- width: 100%
- transform: initial
- text-align: left
- justify-self: start
- padding: 5px 10px
- font-weight: bold
- position: absolute
state:
- left: 0
- bottom: 0
- pointer-events: none
- line-height: 1.1em
- background-color: rgba(0, 0, 0, 0.4)
- width: 100%
- transform: initial
- text-align: left
- justify-self: start
- padding: 2px 10px
- font-weight: bold
- position: absolute
grid:
- grid-template-areas: '". battery" "n n" "s proximity"'
- grid-template-columns: 1fr 1fr
 - grid-template-rows: 1fr 1fr 1fr
custom_fields:
battery:
- right: 0
- top: 0
- letter-spacing: 0.03vw
- justify-self: end
- font-size: 0.95em
- background-color: rgba(0, 0, 0, 0)
- width: 100%
- position: absolute
- text-align: right
- text-shadow: 1px 1px 3px rgb(75,75,75)
proximity:
- right: 0
- bottom: 0
- pointer-events: none
- line-height: 1.1em
- transform: initial
- text-align: right
- justify-self: start
- padding: 2px 10px
- font-weight: bold
- position: absolute
button_animation:
tap_action:
animation_card: |
[[[
let time = 900;
this.shadowRoot.getElementById('card').style.animation =
`card_bounce ${time}ms cubic-bezier(0.22, 1, 0.36, 1)`,
window.setTimeout(() => {
this.shadowRoot.getElementById('card').style.animation =
'none'
}, time);
]]]
extra_styles: |
@keyframes card_bounce {
0% {
transform: scale(1);
 }
15% {
transform: scale(0.9);
}
25% {
transform: scale(1);
}
30% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
circle:
custom_fields:
circle: |
[[[
if (variables.state_on) {
let input = variables.circle_input ;
return `
<svg viewBox="0 0 36 36" class="circular-chart">
<path class="circle-bg"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path class="circle"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="#444";
stroke-width="1";
stroke-dasharray = "${input}, 100"
/>
<text x="50%" y="50%" fill="#fff" font-size="10" text-
anchor="middle" alignment-baseline="middle" dominant-
baseline="middle">${input}<tspan font-size="10">%</tspan></text>
<style>
 .circular-chart {
display: block;
margin: 10px auto;
max-width: 100%;
max-height: 200px;
}
.circle-bg {
fill: none;
stroke: rgba(255, 255, 255, 0.05);
stroke-width: 3.8;
}
.circle {
stroke: #fff;
fill: none;
stroke-width: 2.8;
stroke-linecap: round;
animation: progress 1s ease-out forwards;
}
@keyframes progress {
0% {
stroke-dasharray: 0 100;
}
}
</svg>
`;
}
]]]
battery:
custom_fields:
battery: |
[[[
var i = states[variables.battery_person].attributes.icon;
var b = states[variables.battery_person].state;
return `<ha-icon icon='${i}' style='width: 16px; vertical-
align:2px'></ha-icon><text font-size="100">${b}%</text>`
]]]
proximity:
custom_fields:
proximity: |
[[[
 return `
${states[variables.proximity_person].state} km`
]]]
icon_hue:
styles:
custom_fields:
icon:
- width: 77%
- margin-left: '-14%'
- margin-top: 1%
custom_fields:
icon: |
[[[
let state = variables.state_on && variables.timeout < 2000 ?
'on' : null;
return `
<svg viewBox="0 0 50 50">
<style>
@keyframes on {
0% {
transform: scale(0.85);
}
20% {
transform: scale(1.1);
}
40% {
transform: scale(0.95);
}
60% {
transform: scale(1.03);
}
80% {
transform: scale(0.97);
}
100% {
transform: scale(1);
}
}
.on {
animation: on 0.8s;
 transform-origin: center;
}
</style>
<path fill="#9da0a2" d="M27.4 47.3h-
4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0 .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8
0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8
0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8
0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-
10.9-5.6-3.8 0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0
1.7 0 .1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18 3.2-
18.8.1-.4.1-.5.1-.7"/>
<path class="${state}" fill="var(--light-color)" d="M14.1
15.3c3.4-.3 7-.4 10.9-.4 3.8 0 7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5 38.9 6.5
38.9 6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0 .5-.1 2.5 2.1 8.2
0 .3.3.8.7 1.1z"/>
</svg>
`;
]]]
base_state:
variables:
circle_input: |
[[[ return Math.round(entity.attributes.brightness / 2.55); ]]]
state_on: >
[[[ return ['on', 'home', 'cool', 'fan_only', 'playing'].indexOf(entity
=== undefined || entity.state) !== -1; ]]]
timeout: >
[[[ return entity === undefined || Date.now() -
Date.parse(entity.last_changed); ]]]
styles:
card:
- padding: 5%
- font-size: 13px
- border-radius: 10px
name:
- text-align: left
- justify-self: start
- padding: 0px 10px
- font-weight: bold
- line-height: 15px
state:
 - justify-self: start
- padding: 0px 10px
base_light_layout_state:
styles:
icon:
- top: 15%
- left: 10%
- height: 40%
grid:
- grid-template-areas: '"i circle" "n n" "s s"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 3fr 1fr 1fr
custom_fields:
circle:
- display: initial
- width: 60%
- letter-spacing: 0.03vw
- margin: '-30% 5% 0 0'
- justify-self: end
- opacity: 1
base_standard_layout_state:
styles:
icon:
- top: 18%
- left: '-5%'
- height: 32%
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: auto
- grid-template-rows: 3fr 1fr 1fr