Thank you!
Of course most of this won’t apply because everyone has different devices, but here goes…
configuration.yaml
default_config:
wake_on_lan:
tts:
- platform: google_translate
cloud:
group: !include groups.yaml
automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml
frontend:
themes: !include_dir_merge_named themes
webostv:
- name: LG Upstairs TV
host: 192.168.10.202
#other settings
turn_on_action:
service: wake_on_lan.send_magic_packet
data:
mac: "40-2F-86-9A-91-54"
broadcast_address: 192.168.10.255
customize:
sources:
- HDMI 2
- Netflix
- Disney+
- Plex
- YouTube
- Amazon Prime Video
- name: LG PC TV
host: 192.168.10.250
#other settings
turn_on_action:
service: wake_on_lan.send_magic_packet
data:
mac: "24-e8-53-76-60-7e"
broadcast_address: 192.168.10.255
customize:
sources:
- HDMI 4
- Netflix
- Disney+
- Plex
- YouTube
- Amazon Prime Video
light: !include config_lights2021.yaml
input_select:
led_color:
name: Kitchen LED Quick Colors
options:
- red
- orange
- yellow
- green
- blue
- indigo
- violet
- white
initial: blue
lovelace:
mode: yaml
resources:
- url: /local/slider-entity-row.js
type: module
- url: /local/mini-media-player-bundle.js
type: module
- url: /local/card-mod.js
type: module
- url: /local/simple-thermostat.js
type: module
dashboards:
lovelace-generated: # Needs to contain a hyphen (-)
mode: yaml
filename: ref-lovelace.yaml
title: Family Hub
icon: mdi:fridge-variant
show_in_sidebar: true
require_admin: false
alarm_control_panel:
platform: alarmdotcom
username: ####
password: ####
Note, that I have the .js files in my \config\www\ directory
Then config_lights2021.yaml
#light:
- platform: template
lights:
kitchen_relay:
friendly_name: "Kitchen Crown"
value_template: >-
{{ is_state('switch.kitchen_strip_light_relay','on') }}
turn_on:
service: switch.turn_on
entity_id: switch.kitchen_strip_light_relay
turn_off:
service: switch.turn_off
entity_id: switch.kitchen_strip_light_relay
- platform: group
name: kitchen Crown
entities:
- light.kitchen_relay
- light.wled_kitchen
- platform: group
name: PC Lights
entities:
- light.asus_aura_dram_1
- light.asus_aura_dram_2
- light.asus_aura_dram_3
- light.asus_aura_dram_4
- light.asus_rog_maximus_xi_formula_5
- light.asus_rog_maximus_xi_formula_addressable_6
- light.asus_aura_addressable_7
- light.asus_aura_motherboard_5
I have two dashboards, the regular one:
ui-lovelace.yaml
title: Bishops House
views:
# View tab title.
- title: main
icon: 'mdi:home-circle'
cards:
# The markdown card will render markdown text.
- type: vertical-stack
cards:
- type: entities
title: Outside
card_mod: !include lovelace/cardmod1.yaml
entities: !include lovelace/2022-lights-outside.yaml
- type: entities
title: Main Floor
card_mod: !include lovelace/cardmod1.yaml
entities: !include lovelace/2022-lights-main.yaml
- type: entities
# title: Christmas
card_mod: !include lovelace/cardmod1.yaml
entities: !include lovelace/2022-lights-xmas.yaml
- type: vertical-stack
cards:
- type: entities
title: Garage
card_mod: !include lovelace/cardmod1.yaml
entities: !include lovelace/2022-lights-garage.yaml
- type: entities
title: Upstairs
card_mod: !include lovelace/cardmod1.yaml
entities: !include lovelace/2022-lights-upstairs.yaml
- type: entities
title: Basement
card_mod: !include lovelace/cardmod1.yaml
entities: !include lovelace/2022-lights-basement.yaml
- type: vertical-stack
cards:
- type: entities
title: Media
card_mod: !include lovelace/cardmod1.yaml
entities: !include lovelace/2022-media.yaml
- type: vertical-stack
cards:
- type: alarm-panel
name: Security
entity: alarm_control_panel.alarm_com
card_mod: !include lovelace/cardmod1.yaml
- type: entities
# title: Sensors
show_header_toggle: false
card_mod: !include lovelace/cardmod1.yaml
entities:
- entity: lock.front_deadbolt
- type: weblink
name: Camera Feeds
url: https://####
icon: mdi:video-outline
- type: entities
# title: Thermostats
show_header_toggle: false
card_mod: !include lovelace/cardmod1.yaml
entities:
- entity: climate.main_floor
card_mod: !include lovelace/cardmod1-90.yaml
type: custom:simple-thermostat
layout:
step: row
control:
- preset: false
- operation: true
- entity: climate.my_main_ac
card_mod: !include lovelace/cardmod1-75.yaml
type: custom:simple-thermostat
layout:
step: row
- entity: climate.my_midea_ac
card_mod: !include lovelace/cardmod1-75.yaml
type: custom:simple-thermostat
layout:
step: row
and the refrigerator dashboard, which is almost the same, but with a horizontal stack and 50% zoom cardmods:
ref-lovelace.yaml
title: Bishops House
views:
# View tab title.
- title: main
icon: 'mdi:home-circle'
cards:
# The markdown card will render markdown text.
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: entities
title: Outside
card_mod: !include lovelace/cardmod1-50.yaml
entities: !include lovelace/2022-lights-outside.yaml
- type: entities
title: Main Floor
card_mod: !include lovelace/cardmod1-50.yaml
entities: !include lovelace/2022-lights-main.yaml
- type: entities
# title: Christmas
card_mod: !include lovelace/cardmod1-50.yaml
entities: !include lovelace/2022-lights-xmas.yaml
- type: vertical-stack
cards:
- type: entities
title: Garage
card_mod: !include lovelace/cardmod1-50.yaml
entities: !include lovelace/2022-lights-garage.yaml
- type: entities
title: Upstairs
card_mod: !include lovelace/cardmod1-50.yaml
entities: !include lovelace/2022-lights-upstairs.yaml
- type: entities
title: Basement
card_mod: !include lovelace/cardmod1-50.yaml
entities: !include lovelace/2022-lights-basement.yaml
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: entities
title: Media
card_mod: !include lovelace/cardmod1-50.yaml
entities: !include lovelace/2022-media.yaml
- type: vertical-stack
cards:
- type: alarm-panel
name: Security
entity: alarm_control_panel.alarm_com
card_mod: !include lovelace/cardmod1-50.yaml
- type: entities
# title: Sensors
show_header_toggle: false
card_mod: !include lovelace/cardmod1-50.yaml
entities:
- entity: lock.front_deadbolt
- type: weblink
name: Camera Feeds
url: https://####
icon: mdi:video-outline
- type: entities
# title: Thermostats
show_header_toggle: false
card_mod: !include lovelace/cardmod1.yaml
entities:
- entity: climate.main_floor
card_mod: !include lovelace/cardmod1-45.yaml
type: custom:simple-thermostat
layout:
step: row
control:
- preset: false
- operation: true
- entity: climate.my_main_ac
card_mod: !include lovelace/cardmod1-35.yaml
type: custom:simple-thermostat
layout:
step: row
- entity: climate.my_midea_ac
card_mod: !include lovelace/cardmod1-35.yaml
type: custom:simple-thermostat
layout:
step: row
Then the for !include files in the lovelace directory…
the cardmod1.yaml, cardmod1-50.yaml, cardmod1-35.yaml etc. are all identical but with different zoom levels:
cardmod1-50.yaml
style:
.: |
#states > * {
margin: -1px 0px !important;
}
ha-card {
background: rgba(120, 200, 255, .1);
background-image: linear-gradient(to bottom, rgba(120,200,255,.1), rgba(120,200,255,0));
border: 1px solid rgba(120,200,255,.3);
font-variant: small-caps;
zoom: 0.5;
}
.card-header {
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(120,200,255,.3);
color: rgba(120,200,255,.8);
}
.card-content {
padding-top: 8px;
padding-bottom: 8px;
}
2022-lights-garage.yaml
- entity: light.garage_landing_lights
name: Garage Landing
toggle: true
type: 'custom:slider-entity-row'
- entity: switch.garage_main_lights
name: Garage Main
2022-lights-main.yaml
- entity: switch.living_room_main_lights
name: Living Room
- entity: light.laundry_room_lights
name: Laundry Room
toggle: true
type: 'custom:slider-entity-row'
- type: divider
style:
background: rgba(120,200,255,.3)
- entity: light.kitchen_main_lights
name: Kitchen Main
toggle: true
type: 'custom:slider-entity-row'
- entity: light.kitchen_crown
name: Kitchen Crown
toggle: true
hide_when_off: true
icon: mdi:led-strip-variant
type: 'custom:slider-entity-row'
- entity: light.kitchen_sink_light
name: Sink
toggle: true
type: 'custom:slider-entity-row'
- entity: light.countertop_2
name: Counter
toggle: true
type: 'custom:slider-entity-row'
- entity: light.cabinet
name: Cabinet
toggle: true
type: 'custom:slider-entity-row'
- type: divider
style:
background: rgba(120,200,255,.3)
- entity: light.dining_room
name: Dining Room
toggle: true
type: 'custom:slider-entity-row'
- entity: light.bathroom_main_lights
name: Bathroom
toggle: true
type: 'custom:slider-entity-row'
- entity: light.back_entry_main_lights
name: Back Entry
toggle: true
type: 'custom:slider-entity-row'
2022-lights-outside.yaml
- entity: light.exterior_porch_lights
name: Porch
toggle: true
type: 'custom:slider-entity-row'
- entity: light.driveway_main_light
name: Driveway
toggle: true
type: 'custom:slider-entity-row'
2022-lights-upstairs.yaml
- entity: light.master_bedroom_lights
name: Master Bedroom
toggle: true
type: 'custom:slider-entity-row'
- entity: light.caelan_bedroom_main_lights
name: Caelan Bedroom
toggle: true
type: 'custom:slider-entity-row'
- entity: light.upstairs_hallway_light
name: Stairwell
toggle: true
type: 'custom:slider-entity-row'
2022-lights-basement.yaml
- entity: light.basement_stairs_main_lights
name: Stairwell
toggle: true
type: 'custom:slider-entity-row'
- entity: light.theatre_main_lights
name: Theatre
toggle: true
type: 'custom:slider-entity-row'
- type: divider
style:
background: rgba(120,200,255,.3)
- entity: light.downstairs_hallway_main_lights
name: Hallway
toggle: true
type: 'custom:slider-entity-row'
- entity: light.downstairs_hallway_main_lights
name: Bathroom
toggle: true
type: 'custom:slider-entity-row'
- entity: light.downstairs_hallway_main_lights
name: Bathroom Hallway
toggle: true
type: 'custom:slider-entity-row'
- type: divider
style:
background: rgba(120,200,255,.3)
- entity: light.skyler_bedroom_lights
name: Skyler Bedroom
toggle: true
type: 'custom:slider-entity-row'
- entity: light.karissa_bedroom_main_lights
name: Karissa Bedroom
toggle: true
type: 'custom:slider-entity-row'
- entity: light.playroom_main_lights
name: Playroom
toggle: true
type: 'custom:slider-entity-row'
2022-media.yaml
- entity: media_player.lg_upstairs_tv
type: 'custom:mini-media-player'
icon: 'mdi:television'
name: LG Upstairs TV
group: true
hide:
power_state: false
volume: true
prev: true
next: true
shortcuts:
columns: 6
buttons:
- icon: 'mdi:arrow-left'
type: service
id: webostv.button
data:
entity_id: media_player.lg_upstairs_tv
button: LEFT
- icon: 'mdi:arrow-up'
type: service
id: webostv.button
data:
entity_id: media_player.lg_upstairs_tv
button: UP
- icon: 'mdi:arrow-down'
type: service
id: webostv.button
data:
entity_id: media_player.lg_upstairs_tv
button: DOWN
- icon: 'mdi:arrow-right'
type: service
id: webostv.button
data:
entity_id: media_player.lg_upstairs_tv
button: RIGHT
- icon: 'mdi:location-enter'
type: service
id: webostv.button
data:
entity_id: media_player.lg_upstairs_tv
button: ENTER
- icon: 'mdi:undo-variant'
type: service
id: webostv.button
data:
entity_id: media_player.lg_upstairs_tv
button: BACK
- entity: media_player.stereo
type: 'custom:mini-media-player'
icon: 'mdi:speaker'
name: Stereo
group: true
hide:
power_state: false
volume_level: false
sound_mode: false
shortcuts:
columns: 4
buttons:
- icon: 'mdi:netflix'
id: script.media_upstairs_on
type: script
data:
stereo: "TV Audio"
tv: "Netflix"
- image: '/local/disney2.svg'
id: script.media_upstairs_on
type: script
data:
stereo: "TV Audio"
tv: "Disney+"
- icon: 'si:amazon'
id: script.media_upstairs_on
type: script
data:
stereo: "TV Audio"
tv: "Amazon Prime Video"
- icon: 'mdi:plex'
id: script.media_upstairs_on
type: script
data:
stereo: "TV Audio"
tv: "Plex"
- icon: 'mdi:keyboard-variant'
id: script.media_upstairs_on
type: script
data:
stereo: "PC"
tv: "HDMI 2"
- icon: 'mdi:nintendo-switch'
id: script.media_upstairs_on
type: script
data:
stereo: "Nintendo"
tv: "HDMI 2"
- icon: 'mdi:close-box-multiple-outline'
id: script.media_off_upstairs
type: script
- entity: media_player.heos_stereo
type: 'custom:mini-media-player'
name: Group Play
artwork: cover
group: true
hide:
controls: true
icon: true
power: true
power_state: false
source: true
volume: true
speaker_group:
platform: heos
show_group_count: true
entities:
- entity_id: media_player.heos_stereo
name: Stereo
- entity_id: media_player.heos_home_theater
name: Home Theater
- type: divider
style:
background: rgba(120,200,255,.3)
- entity: media_player.downstairs_tv
type: 'custom:mini-media-player'
name: Home Theatre TV
icon: 'mdi:television'
group: true
hide:
power_state: false
controls: true
volume: true
- entity: media_player.home_theater
type: 'custom:mini-media-player'
name: Home Theatre
icon: 'mdi:speaker'
group: true
hide:
power_state: false
shortcuts:
columns: 4
buttons:
- icon: 'mdi:netflix'
id: script.media_downstairs_on
type: script
data:
stereo: "TV Audio"
tv: "Netflix"
- image: '/local/disney2.svg'
id: script.media_downstairs_on
type: script
data:
stereo: "TV Audio"
tv: "Disney+"
- icon: 'si:amazon'
id: script.media_downstairs_on
type: script
data:
stereo: "TV Audio"
tv: "Prime Video"
- icon: 'mdi:plex'
id: script.media_downstairs_on
type: script
data:
stereo: "TV Audio"
tv: "Plex"
- icon: 'mdi:disc'
id: script.media_downstairs_on
type: script
data:
stereo: "Blu-ray"
tv: "HDMI-1"
- icon: 'mdi:sony-playstation'
id: script.media_downstairs_on
data:
stereo: "PS4"
tv: "HDMI-1"
- icon: 'mdi:close-box-multiple-outline'
id: script.media_off_downstairs
type: script
- type: divider
style:
background: rgba(120,200,255,.3)
- entity: media_player.lg_pc_tv
type: 'custom:mini-media-player'
icon: 'mdi:television'
name: PC Monitor 48
group: true
hide:
power_state: false
volume: true
prev: true
next: true
shortcuts:
columns: 5
buttons:
- icon: 'mdi:netflix'
id: script.media_pc_on
type: script
data:
tv: "Netflix"
- image: '/local/disney2.svg'
id: script.media_pc_on
type: script
data:
tv: "Disney+"
- icon: 'si:amazon'
id: script.media_pc_on
type: script
data:
tv: "Amazon Prime Video"
- icon: 'mdi:plex'
id: script.media_pc_on
type: script
data:
tv: "Plex"
- icon: 'mdi:keyboard-variant'
id: script.media_pc_on
type: script
data:
tv: "HDMI 4"
- entity: light.pc_lights
name: PC Lighting
toggle: true
type: 'custom:slider-entity-row'
This is tighter on screen from my first pic because I have added
.: |
#states > * {
margin: -1px 0px !important;
}
to the cardmod section to reduce the space between entities.
This is how it looks now: