Hello,
I had a few questions because I can’t figure out how to set this up and what I’m doing wrong.
My ui_lovelace.yaml
button_card_templates: !include 'lovelace/resources/templates.yaml'
#####################################
# VIEW areas #
#####################################
views:
- !include lovelace/views/areas.yaml
- !include lovelace/kitchen.yaml
- !include lovelace/livingroom.yaml
- !include lovelace/printer.yaml
- !include lovelace/livingroom2.yaml
- !include lovelace/bedroom.yaml
- !include lovelace/courtney.yaml
- !include lovelace/darlene.yaml
- !include lovelace/bathroom.yaml
- !include lovelace/cameron.yaml
- !include lovelace/morgan.yaml
- !include lovelace/pool.yaml
- !include lovelace/garage.yaml
- !include lovelace/alarms.yaml
- !include lovelace/laundryroom.yaml
- !include lovelace/upstairs.yaml
- !include /lovelace/mail&packages.yaml
- !include lovelace/creditcards.yaml
- !include lovelace/security.yaml
- !include lovelace/tv.yaml
- !include lovelace/remote.yaml
- !include lovelace/entertainment.yaml
- !include lovelace/zones.yaml
- !include lovelace/home_security.yaml
- !include lovelace/calendar.yaml
- !include lovelace/virus.yaml
- !include lovelace/people.yaml
- !include lovelace/cameras.yaml
- !include lovelace/cast_view.yaml
- !include lovelace/travel.yaml
- !include lovelace/remote2.yaml
templates.yaml
#button_card_templates:
- calendar:
color_type: label-card
size: 50%
color: rgb(0,0,0)
styles:
card:
- background-color: rgb(0,0,0)
- height: 80px
- padding: 0px 0px
- box-shadow: 0px 0px 12px 2px rgb(255,0,0)
show_state: true
show_icon: false
- peoples:
show_entity_picture: true
aspect_ratio: 1.33/1.88
color_type: card
show_name: true
show_state: false
color: rgb(0, 0, 0)
tap_action:
action: none
haptic: heavy
styles:
grid:
- grid-template-areas: '"i" "n" "s" "l" "speed" "place"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content min-content
entity_picture:
- height: 98%
- width: 98%
card:
- background-color: black
- height: 100%
- color_type: card
- border-radius: 2px
- color: rgb(255,140,0)
- box-shadow: 0px 0px 13px 2px rgb(255,0,0)
label:
- color: rgb(255,250,250)
- font-size: 25px
name:
- color: rgb(102, 255, 0)
- font-size: 30px
custom_fields:
speed:
card:
type: "custom:button-card"
show_state: true
show_icon: false
show_name: false
styles:
label:
- color: black
card:
- height: 100%
- background-color: rgb(0,0,0)
state:
- font-size: 25px
state:
- value: 'Traveling at 1 Mph'
styles:
card:
- background-color: rgb(0,0,0)
state:
- color: rgb(0,0,0)
- value: 'Traveling at 0 Mph'
styles:
card:
- background-color: rgb(0,0,0)
state:
- color: rgb(0,0,0)
- value: 'Traveling at 2 Mph'
styles:
card:
- background-color: rgb(0,0,0)
state:
- color: rgb(0,0,0)
- value: 'Traveling at 3 Mph'
styles:
card:
- background-color: rgb(0,0,0)
state:
- color: rgb(0,0,0)
- value: 'Traveling at unknown Mph'
styles:
card:
- background-color: rgb(0,0,0)
state:
- color: rgb(0,0,0)
- value: '0 Miles 0 Mins Away'
styles:
card:
- background-color: rgb(0,0,0)
state:
- color: rgb(0,0,0)
- value: '0 Miles 1 Mins Away'
styles:
card:
- background-color: rgb(0,0,0)
state:
- color: rgb(0,0,0)
- value: '0 Miles 2 Mins Away'
styles:
card:
- background-color: rgb(0,0,0)
state:
- color: rgb(0,0,0)
- value: 'None'
styles:
card:
- background-color: rgb(0,0,0)
state:
- color: rgb(0,0,0)
- value: '0'
styles:
card:
- background-color: rgb(0,0,0)
state:
- color: rgb(0,0,0)
place:
card:
type: "custom:button-card"
show_state: true
show_icon: false
show_name: false
# entity: 'sensor.wendy_place'
styles:
label:
- color: black
card:
- height: 100%
- background-color: rgb(0,0,0)
state:
- font-size: 90%
name:
- font-size: 90%
state:
- value: 'Home'
styles:
card:
- background-color: rgb(0,0,0)
state:
- color: rgb(0,0,0)
- value: 'None'
styles:
card:
- background-color: rgb(0,0,0)
state:
- color: rgb(0,0,0)
- value: '0'
styles:
card:
- background-color: rgb(0,0,0)
state:
- color: rgb(0,0,0)
- value: '0 Miles 0 Mins Away'
styles:
card:
- background-color: rgb(0,0,0)
state:
- color: rgb(0,0,0)
- value: '0 Miles 1 Mins Away'
styles:
card:
- background-color: rgb(0,0,0)
state:
- color: rgb(0,0,0)
- value: '0 Miles 2 Mins Away'
styles:
card:
- background-color: rgb(0,0,0)
state:
- color: rgb(0,0,0)
- color_dimmer:
show_entity_picture: true
aspect_ratio: 1/1.50
deep_press: true
color_type: card
tap_action:
action: toggle
haptic: heavy
hold_action:
action: more-info
color: auto
show_last_changed: true
show_name: true
show_state: true
custom_fields:
slider:
card:
type: custom:slider-entity-row
full_row: true
hide_state: true
hide_when_off: true
entity: '[[[ return entity.entity_id ]]]'
rgb:
card:
type: 'custom:rgb-light-card'
entity: '[[[ return entity.entity_id ]]]'
justify: center
size: 25px
colors:
- rgb_color:
- 255
- 255
- 255
- rgb_color:
- 0
- 0
- 255
- rgb_color:
- 255
- 0
- 0
- rgb_color:
- 0
- 255
- 0
styles:
card:
- padding: 4px 4px
- background-color: black
icon:
- height: 75%
- width: 75%
grid:
- grid-template-areas: '"i" "n" "s" "l" "slider" "rgb"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content min-content
name:
- color: white
- justify-self: center
- font-size: 20px
- font-weight: bold
- text-transform: Titlecase
label:
- font-size: 15px
- padding: 0px 10px
- justify-self: center
- color: rgb(255,255,255)
state:
- color: white
state:
- value: 'on'
styles:
card:
- background-color: black
- box-shadow: 0px 0px 12px 2px var(--button-card-light-color)
icon:
- background-color: var(--button-card-light-color)
label:
- font-size: 15px
- padding: 0px 10px
- justify-self: center
- color: rgb(255,255,255)
- value: 'off'
styles:
name:
- color: rgb(255,255,255)
card:
- background-color: black
- box-shadow: 0px 0px 12px 2px rgb(255,9,9)
- color: rgb(255,255,255)
label:
- font-size: 15px
- padding: 0px 10px
- justify-self: center
- color: rgb(255,255,255)
- value: 'unavailable'
styles:
card:
- background-color: rgb(0,0,0)
- color: rgb(0,0,0)
icon:
- color: rgb(0,0,0)
label:
- color: rgb(0,0,0)
state:
- color: rgb(0,0,0)
random room kitchen.yaml
############################################################################################
####### INCLUDES #######
############################################################################################
button_card_templates: include! lovelace/resources/templates.yaml
custom_header: include! lovelace/custom_header/custom_header.yaml
###########################################################################################
####### KITCHEN #######
###########################################################################################
title: kitchen
path: kitchen
id: kitchen
cards:
- type: "custom:button-card"
template: divider-black
- type: horizontal-stack
cards:
- type: "custom:button-card"
template: boarder
- type: "custom:button-card"
template: color_dimmer
entity: light.cabinet
name: Cabinet
entity_picture: /local/icon/cabinet.jpg
- type: "custom:button-card"
template: boarder
- type: "custom:button-card"
template: color_dimmer
entity: light.pods
name: Ceiling Lights
entity_picture: /local/icon/ceiling.PNG
- type: "custom:button-card"
template: boarder
- type: "custom:button-card"
template: divider-black
- type: horizontal-stack
cards:
- type: "custom:button-card"
template: boarder
- type: "custom:button-card"
template: color_dimmer
entity: light.cabinet
name: Cabinet
entity_picture: /local/icon/cabinet.jpg
- type: "custom:button-card"
template: boarder
- type: "custom:button-card"
template: color_dimmer
entity: light.pods
name: Ceiling Lights
entity_picture: /local/icon/ceiling.PNG
- type: "custom:button-card"
template: boarder
- type: "custom:button-card"
template: divider-black
- type: horizontal-stack
cards:
- type: "custom:button-card"
template: boarder
- type: "custom:button-card"
template: color_dimmer
entity: light.bar
name: Bar Light
entity_picture: /local/icon/bar.jpg
- type: "custom:button-card"
template: boarder
- type: "custom:button-card"
template: dimmer
entity: light.pendants
name: Pendant Lights
entity_picture: /local/icon/pendant.jpg
- type: "custom:button-card"
template: boarder
- type: "custom:button-card"
template: divider-black
- type: horizontal-stack
cards:
- type: "custom:button-card"
template: boarder
- type: "custom:button-card"
template: color_dimmer
entity: light.tree
name: Tree
entity_picture: /local/icon/tree.jpg
- type: "custom:button-card"
template: boarder
- type: "custom:button-card"
template: dimmer
entity: light.chandelier
name: Chandelier
entity_picture: /local/icon/dr_light.jpg
- type: "custom:button-card"
template: boarder
- type: "custom:button-card"
template: divider-black
- type: horizontal-stack
cards:
- type: "custom:button-card"
template: boarder
- type: "custom:button-card"
template: door
name: Diningroom
entity: binary_sensor.diningroom_door
- type: "custom:button-card"
template: boarder
- type: "custom:button-card"
show_last_changed: true
entity: binary_sensor.glass_door
show_entity_picture: true
show_name: true
name: Sliding Door
aspect_ratio: 1/1.50
color_type: icon
size: 90%
styles:
name:
- color: white
icon:
- height: 90%
- color: rgb(0, 0, 0)
card:
- border-radius: 10px
- background-color: rgb(0,0,0)
label:
- color: rgb(255,255,255)
state:
- value: 'on'
entity_picture: /local/icon/glass_open.png
styles:
card:
- box-shadow: 0px 0px 13px 2px rgb(0,255,0)
- value: 'off'
entity_picture: /local/icon/glass-close.jpg
styles:
card:
- box-shadow: 0px 0px 12px 2px rgb(255,0,0)
- type: "custom:button-card"
template: boarder
- type: "custom:button-card"
template: divider-black
- type: horizontal-stack
cards:
- type: "custom:button-card"
entity: lock.dining_room_door
show_entity_picture: true
aspect_ratio: 1/1.50
deep_press: true
color_type: icon
tap_action:
action: toggle
haptic: heavy
show_last_changed: true
show_label: true
show_state: true
name: Door Lock
styles:
card:
- padding: 4px 4px
- background-color: black
icon:
- height: 100%
- width: 100%
grid:
- grid-template-areas: '"i" "n" "s" "l" "blank1"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content min-content
name:
- justify-self: center
- font-size: 20px
- font-weight: bold
- text-transform: Titlecase
- color: white
label:
- font-size: 15px
- padding: 0px 10px
- justify-self: center
- color: white
state:
- value: 'locked'
entity_picture: /local/icon/greenlock.png
styles:
card:
- background-color: black
- box-shadow: 0px 0px 12px 2px rgb(0,255,0)
icon:
- background-color: var(--button-card-light-color)
- height: 90%
- width: 100%
- value: 'unlocked'
entity_picture: /local/icon/unlock.png
styles:
card:
- background-color: black
- box-shadow: 0px 0px 12px 2px rgb(255,9,9)
icon:
- background-color: black
- height: 100%
- width: 100%
custom_fields:
blank1:
card:
type: "custom:button-card"
entity: sensor.dining_room_door_battery
color_type: label
show_state: true
show_icon: false
name: Battery Remaining
styles:
state:
- justify-self: center
card:
# - height: 30px
- width: 100%
- background-color: '#000000'
label:
- justify-self: center
- color: white
name:
- justify-self: center
- type: "custom:button-card"
template: boarder
- type: "custom:button-card"
color_type: blank-card
- type: "custom:button-card"
template: boarder
- type: "custom:button-card"
template: divider-black
- type: horizontal-stack
cards:
###########################################################################################
####### HOME BUTTONS #######
###########################################################################################
- type: "custom:button-card"
template: boarder
- type: "custom:button-card"
template: rooms
- type: "custom:button-card"
template: boarder
- type: "custom:button-card"
template: home
- type: "custom:button-card"
template: boarder
Is there anything obvious that i’m missing?