https://github.com/beecho01/homeassistant-setup
An overview of the code and images I have used in my Home Assistant setup
https://github.com/beecho01/homeassistant-setup
Last synced: 3 months ago
JSON representation
An overview of the code and images I have used in my Home Assistant setup
- Host: GitHub
- URL: https://github.com/beecho01/homeassistant-setup
- Owner: beecho01
- Created: 2024-07-30T18:27:41.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-30T19:10:41.000Z (almost 2 years ago)
- Last Synced: 2025-05-24T18:42:17.218Z (about 1 year ago)
- Size: 13.5 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Hi All,
I thought I'd upload what I have been working on recently on Home Assistant ! Hopefully it gives you an idea of what I've done and how you can use it yourself if interested.
# Theme
Based on the work done here by LE0N: [https://community.home-assistant.io/t/rounded-dashboard-guide/543043](https://community.home-assistant.io/t/rounded-dashboard-guide/543043)
My altered and modified theme can be found here: [rounded-alt-2.yaml](https://github.com/beecho01/homeassistant-setup/blob/main/themes/rounded/rounded-alt-2.yaml)
# Dashboard
GUI Setup
```
views:
- title: Home
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
show_name: true
show_label: true
show_icon: false
show_state: false
name: |
[[[
const hour = new Date().getHours();
let greeting;
if (hour >= 18) {
greeting = ["Good evening", "Evening", "Welcome back", "Great to see you", "Welcome home", "Hi there"];
} else if (hour >= 12) {
greeting = ["Good afternoon", "Afternoon", "Good to see you"];
} else if (hour >= 5) {
greeting = ["Good morning", "Morning", "Rise and shine", "Hello", "Hi there"];
} else {
greeting = ["Hello", "Hi there", "Greetings", "Hey", "Welcome", "Nice to see you", "Welcome home", "What's up", "Hi", "Hello there", "Hope you're well", "Hey there", "What's happening", "Good to see you"];
}
const userName = user ? user.name : 'Guest';
return greeting[Math.floor(Math.random() * greeting.length)] + ', ' + userName;
]]]
label: |
[[[
var messages = [];
if (states['sensor.home_assistant_restart_required'].state == 'true') {
messages.push("One or more updates require a restart.");
}
if (states['binary_sensor.pending_updates'].state == 'on') {
messages.push("There are one or more updates pending install.");
}
if (messages.length > 0) {
return messages.join(' ');
} else {
return "There are currently no issues.";
}
]]]
styles:
card:
- padding: 18px 18px 36px 13px
- background-color: var(--contrast1)
name:
- font-size: 24px
- justify-self: start
- align-self: center
- text-align: left
- white-space: normal
- word-wrap: break-word
- overflow: hidden
label:
- font-size: 18px
- color: var(--contrast10)
- justify-self: start
- align-self: center
- text-align: left
- white-space: normal
- word-wrap: break-word
- overflow: hidden
- padding-top: 18px
- type: custom:button-card
tap_action:
action: assist
pipeline_id: 01j3dtc81ztpv45arhcv9zqakd
custom_fields:
assist:
card:
type: picture
image: /local/Chatbot/chatbot_700x700.webp
styles:
grid:
- grid-template-areas: |
"assist"
- grid-template-columns: 1fr
- grid-template-rows: 1fr
card:
- width: 75px
- height: 75px
- justify-self: center
- align-self: center
- margin-top: 50%
- transform: translateY(-25%)
custom_fields:
assist:
- width: 100%
- height: 100%
- justify-self: center
- align-self: center
- margin-top: '-5px'
- z-index: -1
- event_grouping: true
drop_todayevents_from: '10:00:00'
next_days: 7
pattern:
- icon: m3s:grass-rounded
color: brown
type: organic
pattern: Garden Waste
- icon: mdi:recycle-variant
color: grey
type: grey
pattern: Recycling
- icon: mdi:trash-can-outline
color: green
type: waste
pattern: General Waste
- icon: mdi:dump-truck
color: blue
type: others
day_style: counter
day_style_format: yyyy.MM.dd
card_style: chip
alignment_style: left
color_mode: icon
items_per_row: 3
refresh_rate: 60
with_label: false
type: custom:trash-card
entities:
- calendar.bin_collection
filter_events: false
use_summary: false
hide_time_range: true
full_size: false
- square: true
type: grid
cards:
- type: custom:button-card
icon: m3s:chair-rounded
name: Living Room
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
- padding: 5%
icon:
- width: 50%
- height: 100%
name:
- padding: 5%
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: end
custom_fields:
second:
- text-align: left
- align-self: end
- justify-self: end
- margin-bottom: '-8px'
grid:
- grid-template-areas: |
"i ."
"n n"
- grid-template-rows: min-content 1fr
- grid-template-columns: 1fr 1fr
tap_action:
action: navigate
navigation_path: /dashboard-home/living-room
- type: custom:button-card
icon: m3s:kitchen-rounded
name: Kitchen
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
- padding: 5%
icon:
- width: 50%
- height: 100%
name:
- padding: 5%
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: end
custom_fields:
second:
- text-align: left
- align-self: end
- justify-self: end
- margin-bottom: '-8px'
grid:
- grid-template-areas: |
"i ."
"n n"
- grid-template-rows: min-content 1fr
- grid-template-columns: 1fr 1fr
tap_action:
action: navigate
navigation_path: /dashboard-home/kitchen
- type: custom:button-card
icon: m3s:hallway-rounded
name: Hallway
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
- padding: 5%
icon:
- width: 50%
- height: 100%
name:
- padding: 5%
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: end
custom_fields:
second:
- text-align: left
- align-self: end
- justify-self: end
- margin-bottom: '-8px'
grid:
- grid-template-areas: |
"i ."
"n n"
- grid-template-rows: min-content 1fr
- grid-template-columns: 1fr 1fr
tap_action:
action: navigate
navigation_path: /dashboard-home/hallway
- type: custom:button-card
icon: m3s:single-bed-rounded
name: James' Bedroom
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
- padding: 5%
icon:
- width: 50%
- height: 100%
name:
- padding: 5%
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: end
custom_fields:
second:
- text-align: left
- align-self: end
- justify-self: end
- margin-bottom: '-8px'
grid:
- grid-template-areas: |
"i ."
"n n"
- grid-template-rows: min-content 1fr
- grid-template-columns: 1fr 1fr
tap_action:
action: navigate
navigation_path: /dashboard-home/james-bedroom
- type: custom:button-card
icon: m3s:single-bed-rounded
name: Rebecca's Bedroom
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
- padding: 5%
icon:
- width: 50%
- height: 100%
name:
- padding: 5%
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: end
custom_fields:
second:
- text-align: left
- align-self: end
- justify-self: end
- margin-bottom: '-8px'
grid:
- grid-template-areas: |
"i ."
"n n"
- grid-template-rows: min-content 1fr
- grid-template-columns: 1fr 1fr
tap_action:
action: navigate
navigation_path: /dashboard-home/rebecca-s-bedroom
- type: custom:button-card
icon: m3s:single-bed-rounded
name: Daniel's Bedroom
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
- padding: 5%
icon:
- width: 50%
- height: 100%
name:
- padding: 5%
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: end
custom_fields:
second:
- text-align: left
- align-self: end
- justify-self: end
- margin-bottom: '-8px'
grid:
- grid-template-areas: |
"i ."
"n n"
- grid-template-rows: min-content 1fr
- grid-template-columns: 1fr 1fr
tap_action:
action: navigate
navigation_path: /dashboard-home/daniel-s-bedroom
- type: custom:button-card
icon: m3s:king-bed-rounded
name: Master Bedroom
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
- padding: 5%
icon:
- width: 50%
- height: 100%
name:
- padding: 5%
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: end
custom_fields:
second:
- text-align: left
- align-self: end
- justify-self: end
- margin-bottom: '-8px'
grid:
- grid-template-areas: |
"i ."
"n n"
- grid-template-rows: min-content 1fr
- grid-template-columns: 1fr 1fr
tap_action:
action: navigate
navigation_path: /dashboard-home/master-bedroom
columns: 3
title: Rooms
- square: true
type: grid
cards:
- type: custom:button-card
icon: mdi:home-automation
name: Automations
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
- padding: 5%
icon:
- width: 50%
- height: 100%
name:
- padding: 5%
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: end
custom_fields:
second:
- text-align: left
- align-self: end
- justify-self: end
- margin-bottom: '-8px'
grid:
- grid-template-areas: |
"i ."
"n n"
- grid-template-rows: min-content 1fr
- grid-template-columns: 1fr 1fr
tap_action:
action: navigate
navigation_path: /config/automation/dashboard
- type: custom:button-card
icon: mdi:calendar
name: Calendar
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
- padding: 5%
icon:
- width: 50%
- height: 100%
name:
- padding: 5%
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: end
custom_fields:
second:
- text-align: left
- align-self: end
- justify-self: end
- margin-bottom: '-8px'
grid:
- grid-template-areas: |
"i ."
"n n"
- grid-template-rows: min-content 1fr
- grid-template-columns: 1fr 1fr
tap_action:
action: navigate
navigation_path: /profile/general
- type: custom:button-card
icon: mdi:lightning-bolt
name: Energy
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
- padding: 5%
icon:
- width: 50%
- height: 100%
name:
- padding: 5%
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: end
custom_fields:
second:
- text-align: left
- align-self: end
- justify-self: end
- margin-bottom: '-8px'
grid:
- grid-template-areas: |
"i ."
"n n"
- grid-template-rows: min-content 1fr
- grid-template-columns: 1fr 1fr
tap_action:
action: navigate
navigation_path: /energy
- type: custom:button-card
icon: mdi:network-outline
name: Network
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
- padding: 5%
icon:
- width: 50%
- height: 100%
name:
- padding: 5%
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: end
custom_fields:
second:
- text-align: left
- align-self: end
- justify-self: end
- margin-bottom: '-8px'
grid:
- grid-template-areas: |
"i ."
"n n"
- grid-template-rows: min-content 1fr
- grid-template-columns: 1fr 1fr
tap_action:
action: navigate
navigation_path: /dashboard-home/network
- type: custom:button-card
icon: mdi:home-assistant
name: System
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
- padding: 5%
icon:
- width: 50%
- height: 100%
name:
- padding: 5%
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: end
custom_fields:
second:
- text-align: left
- align-self: end
- justify-self: end
- margin-bottom: '-8px'
grid:
- grid-template-areas: |
"i ."
"n n"
- grid-template-rows: min-content 1fr
- grid-template-columns: 1fr 1fr
tap_action:
action: navigate
navigation_path: /dashboard-home/system
- type: custom:button-card
icon: mdi:cog-outline
name: Settings
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
- padding: 5%
icon:
- width: 50%
- height: 100%
name:
- padding: 5%
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: end
custom_fields:
second:
- text-align: left
- align-self: end
- justify-self: end
- margin-bottom: '-8px'
grid:
- grid-template-areas: |
"i ."
"n n"
- grid-template-rows: min-content 1fr
- grid-template-columns: 1fr 1fr
tap_action:
action: navigate
navigation_path: /profile/general
columns: 3
title: Extras
subview: false
type: custom:vertical-layout
- title: Living Room
path: living-room
subview: true
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
card_mod:
style: |
ha-card {
background: transparent;
--chip-background: transparent;
box-shadow: none;
margin: 18px 0px 18px 0px;
}
- type: custom:gap-card
height: 8
- square: true
type: grid
cards:
- type: custom:button-card
icon: m3s:tv-gen-rounded
name: Living Room TV
entity: media_player.living_room_tv
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
icon:
- width: 50%
- height: 100%
name:
- margin-top: 10%
- color: var(--contrast20)
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: center
custom_fields:
second:
- text-align: left
- align-self: end
- justify-self: end
- margin-bottom: '-8px'
grid:
- grid-template-areas: |
"i ."
"n n"
". second"
- grid-template-rows: min-content 1fr min-content
- grid-template-columns: 1fr 1fr
state:
- value: 'off'
styles:
card:
- background-color: var(--ha-card-background)
icon:
- color: var(--contrast20)
img_cell:
- background-color: var(--contrast4)
- value: 'on'
styles:
card:
- background-color: var(--contrast20)
name:
- color: var(--contrast1)
icon:
- color: var(--contrast1)
img_cell:
- background-color: var(--contrast16)
- value: playing
styles:
card:
- background-color: var(--contrast20)
name:
- color: var(--contrast1)
icon:
- color: var(--contrast1)
img_cell:
- background-color: var(--contrast16)
- value: idle
styles:
card:
- background-color: var(--contrast20)
name:
- color: var(--contrast1)
icon:
- color: var(--contrast1)
img_cell:
- background-color: var(--contrast16)
- value: unavailable
styles:
icon:
- color: red
img_cell:
- background-color: rgba(255,0,0,var(--color-tint))
custom_fields:
second: |
[[[
if (entity.state == 'on' || entity.state == 'playing' || entity.state == 'idle') {
return `
`;
} else {
return `
`;
}
]]]
tap_action:
action: navigate
navigation_path: /dashboard-home/living-room-tv
hold_action:
action: more-info
columns: 3
title: Managed Devices
type: custom:vertical-layout
- title: James' Bedroom
path: james-bedroom
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
card_mod:
style: |
ha-card {
background: transparent;
--chip-background: transparent;
box-shadow: none;
margin: 18px 0px 18px 0px;
}
- type: custom:button-card
name: |
[[[
return entity.attributes.friendly_name;
]]]
label: |
[[[
return states['sensor.james_samsung_galaxy_s24_geocoded_location'].state.split(',')[0];
]]]
show_name: true
show_label: true
show_state: false
show_icon: true
show_entity_picture: true
entity: person.james
tap_action:
action: more-info
styles:
card:
- width: 100%
- background-color: var(--contrast2)
- padding: 10px 10px 10px 0px
- margin-top: 8px
- border-radius: 99vh
grid:
- grid-template-areas: |
"i n btn"
"i l btn"
- grid-template-columns: 60px 1fr min-content
- grid-template-rows: min-content min-content
name:
- align-self: end
- justify-self: start
- background: none
- padding-left: 0px
- font-size: 14px
- font-weight: 600
label:
- align-self: start
- justify-self: start
- background: none
- padding: 0px
- padding-top: 0px
- color: var(--contrast10)
- font-size: 12px
img_cell:
- justify-content: start
- width: 40px
- height: 40px
- border-radius: 99vh
icon:
- color: var(--contrast1)
- justify-content: start
- align-content: center
entity_picture:
- justify-content: start
- position: absolute
- width: 40px
- height: 40px
- left: 0ppx
- bottom: 0px
- margin: 0px 0px 0px 0px
- border-radius: 500px
custom_fields:
btn:
- align-self: center
- justify-self: end
custom_fields:
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: entity
tap_action:
action: more-info
entity: sensor.james_samsung_galaxy_s24_battery_level
content_info: none
card_mod:
style: |
ha-card {
--color: {{ 'var(--contrast20)' if states('sensor.sm_s926b_battery_level') | float > 10 else 'var(--black)' }};
--chip-background: {{ 'var(--contrast4)' if states('sensor.sm_s926b_battery_level') | float > 10 else 'var(--red)' }};
padding: 0px!important;
border-radius: 100px!important;
--primary-text-color: var(--contrast20);
}
- type: custom:gap-card
height: 8
- type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.james_sensibo_air_pro
content: >
{{ state_attr('climate.james_sensibo_air_pro',
'current_temperature') }}°C
- type: entity
entity: sensor.james_monzo_current_account_balance
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: none
- type: entity
entity: sensor.james_bedroom_speaker_alarms
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: none
use_entity_picture: false
- type: entity
entity: sensor.james_bedroom_total_power
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: none
use_entity_picture: false
alignment: end
- square: true
type: grid
cards:
- type: custom:button-card
entity: light.james_bedroom_light
name: Bedroom Light
icon: m3s:light-outlined
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
icon:
- width: 50%
- height: 100%
name:
- margin-top: 10%
- color: var(--contrast20)
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: center
custom_fields:
second:
- text-align: left
- align-self: end
- justify-self: end
- margin-bottom: '-8px'
grid:
- grid-template-areas: |
"i ."
"n n"
". second"
- grid-template-rows: min-content 1fr min-content
- grid-template-columns: 1fr 1fr
state:
- value: 'off'
styles:
card:
- background-color: var(--ha-card-background)
icon:
- color: var(--contrast20)
img_cell:
- background-color: var(--contrast4)
- value: 'on'
styles:
card:
- background-color: var(--contrast20)
name:
- color: var(--contrast1)
icon:
- color: var(--contrast1)
img_cell:
- background-color: var(--contrast16)
- value: unavailable
styles:
icon:
- color: red
img_cell:
- background-color: rgba(255,0,0,var(--color-tint))
custom_fields:
second: |
[[[
if (entity.state == 'on') {
return `
`;
} else {
return `
`;
}
]]]
tap_action:
action: toggle
hold_action:
action: more-info
- type: custom:button-card
icon: m3s:table-lamp-rounded
name: Lamp
entity: switch.james_swing_arm_lamp_smart_plug_switch_2
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
icon:
- width: 50%
- height: 100%
name:
- margin-top: 10%
- color: var(--contrast20)
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: center
custom_fields:
second:
- text-align: left
- align-self: end
- justify-self: end
- margin-bottom: '-8px'
grid:
- grid-template-areas: |
"i ."
"n n"
". second"
- grid-template-rows: min-content 1fr min-content
- grid-template-columns: 1fr 1fr
state:
- value: 'off'
styles:
card:
- background-color: var(--ha-card-background)
icon:
- color: var(--contrast20)
img_cell:
- background-color: var(--contrast4)
- value: 'on'
styles:
card:
- background-color: var(--contrast20)
name:
- color: var(--contrast1)
icon:
- color: var(--contrast1)
img_cell:
- background-color: var(--contrast16)
- value: unavailable
styles:
icon:
- color: red
img_cell:
- background-color: rgba(255,0,0,var(--color-tint))
custom_fields:
second: |
[[[
if (entity.state == 'on') {
return `
`;
} else {
return `
`;
}
]]]
tap_action:
action: toggle
hold_action:
action: more-info
- type: custom:button-card
icon: mdi:hvac
name: Air Conditioner
entity: climate.pro_breeze_5000_btu_smart_pac
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
icon:
- width: 50%
- height: 100%
name:
- margin-top: 10%
- color: var(--contrast20)
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: center
custom_fields:
second:
- text-align: left
- align-self: end
- justify-self: end
- margin-bottom: '-8px'
grid:
- grid-template-areas: |
"i ."
"n n"
". second"
- grid-template-rows: min-content 1fr min-content
- grid-template-columns: 1fr 1fr
state:
- value: 'off'
styles:
card:
- background-color: var(--ha-card-background)
icon:
- color: var(--contrast20)
img_cell:
- background-color: var(--contrast4)
- value: cool
styles:
card:
- background-color: var(--contrast20)
name:
- color: var(--contrast1)
icon:
- color: var(--contrast1)
img_cell:
- background-color: var(--contrast16)
- value: fan
styles:
card:
- background-color: var(--contrast20)
name:
- color: var(--contrast1)
icon:
- color: var(--contrast1)
img_cell:
- background-color: var(--contrast16)
- value: unavailable
styles:
icon:
- color: red
img_cell:
- background-color: rgba(255,0,0,var(--color-tint))
custom_fields:
second: |
[[[
if (entity.state == 'cool' || entity.state == 'fan') {
return `
`;
} else {
return `
`;
}
]]]
tap_action:
action: toggle
hold_action:
action: more-info
- type: custom:button-card
icon: m3s:tv-gen-rounded
name: TV
entity: media_player.james_chromecast
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
icon:
- width: 50%
- height: 100%
name:
- margin-top: 10%
- color: var(--contrast20)
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: center
custom_fields:
second:
- text-align: left
- align-self: end
- justify-self: end
- margin-bottom: '-8px'
grid:
- grid-template-areas: |
"i ."
"n n"
". second"
- grid-template-rows: min-content 1fr min-content
- grid-template-columns: 1fr 1fr
state:
- value: 'off'
styles:
card:
- background-color: var(--ha-card-background)
icon:
- color: var(--contrast20)
img_cell:
- background-color: var(--contrast4)
- value: 'on'
styles:
card:
- background-color: var(--contrast20)
name:
- color: var(--contrast1)
icon:
- color: var(--contrast1)
img_cell:
- background-color: var(--contrast16)
- value: playing
styles:
card:
- background-color: var(--contrast20)
name:
- color: var(--contrast1)
icon:
- color: var(--contrast1)
img_cell:
- background-color: var(--contrast16)
- value: idle
styles:
card:
- background-color: var(--contrast20)
name:
- color: var(--contrast1)
icon:
- color: var(--contrast1)
img_cell:
- background-color: var(--contrast16)
- value: unavailable
styles:
icon:
- color: red
img_cell:
- background-color: rgba(255,0,0,var(--color-tint))
custom_fields:
second: |
[[[
if (entity.state == 'on' || entity.state == 'playing' || entity.state == 'idle') {
return `
`;
} else {
return `
`;
}
]]]
tap_action:
action: more-info
hold_action:
action: more-info
- type: custom:button-card
icon: m3s:robot-rounded
name: SwitchBot
entity: switch.james_switchbot
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
icon:
- width: 50%
- height: 100%
name:
- margin-top: 10%
- color: var(--contrast20)
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: center
custom_fields:
second:
- text-align: left
- align-self: end
- justify-self: end
- margin-bottom: '-8px'
grid:
- grid-template-areas: |
"i ."
"n n"
". second"
- grid-template-rows: min-content 1fr min-content
- grid-template-columns: 1fr 1fr
state:
- value: 'off'
styles:
card:
- background-color: var(--ha-card-background)
icon:
- color: var(--contrast20)
img_cell:
- background-color: var(--contrast4)
- value: 'on'
styles:
card:
- background-color: var(--contrast20)
name:
- color: var(--contrast1)
icon:
- color: var(--contrast1)
img_cell:
- background-color: var(--contrast16)
- value: unavailable
styles:
icon:
- color: red
img_cell:
- background-color: rgba(255,0,0,var(--color-tint))
custom_fields:
second: |
[[[
if (entity.state == 'on') {
return `
`;
} else {
return `
`;
}
]]]
tap_action:
action: toggle
hold_action:
action: more-info
- type: custom:button-card
icon: mdi:printer-3d
entity: device_tracker.james_bambu_lab_p1s
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
icon:
- width: 50%
- height: 100%
name:
- margin-top: 10%
- color: var(--contrast20)
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: center
custom_fields:
second:
- text-align: left
- align-self: end
- justify-self: end
- margin-bottom: '-8px'
grid:
- grid-template-areas: |
"i ."
"n n"
". second"
- grid-template-rows: min-content 1fr min-content
- grid-template-columns: 1fr 1fr
state:
- value: not_home
styles:
card:
- background-color: var(--ha-card-background)
icon:
- color: var(--contrast20)
img_cell:
- background-color: var(--contrast4)
- value: home
styles:
card:
- background-color: var(--contrast20)
name:
- color: var(--contrast1)
icon:
- color: var(--contrast1)
img_cell:
- background-color: var(--contrast16)
- value: unavailable
styles:
icon:
- color: red
img_cell:
- background-color: rgba(255,0,0,var(--color-tint))
custom_fields:
second: |
[[[
if (entity.state == 'home') {
return `
`;
} else {
return `
`;
}
]]]
tap_action:
action: navigate
navigation_path: /dashboard-home/bambu-lab-p1s
hold_action:
action: more-info
columns: 3
title: Managed Devices
- type: custom:gap-card
height: 32
- square: true
type: grid
cards:
- type: custom:button-card
entity: binary_sensor.james_pc_status
name: James' PC
icon: mdi:desktop-tower-monitor
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
icon:
- width: 50%
- height: 100%
name:
- margin-top: 10%
- color: var(--contrast20)
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: center
grid:
- grid-template-areas: |
"i ."
"n n"
". ."
- grid-template-rows: min-content 1fr min-content
- grid-template-columns: 1fr 1fr
state:
- value: 'off'
styles:
card:
- background-color: var(--ha-card-background)
icon:
- color: var(--contrast20)
img_cell:
- background-color: var(--contrast4)
- value: 'on'
styles:
card:
- background-color: var(--contrast20)
name:
- color: var(--contrast1)
icon:
- color: var(--contrast1)
img_cell:
- background-color: var(--contrast16)
- value: unavailable
styles:
icon:
- color: red
img_cell:
- background-color: rgba(255,0,0,var(--color-tint))
tap_action:
action: none
hold_action:
action: more-info
columns: 3
title: Un-managed Devices
- type: custom:gap-card
height: 32
- square: true
type: grid
cards:
- type: custom:button-card
name: Turn ON TV and Xbox
icon: phu:xbox
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
icon:
- width: 50%
- height: 100%
- color: var(--contrast20)
name:
- margin-top: 10%
- color: var(--contrast20)
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: center
custom_fields:
i2:
- justify-self: start
- align-self: start
- margin-left: 25%
grid:
- grid-template-areas: |
"i i2 ."
"n n n"
- grid-template-rows: min-content 1fr
- grid-template-columns: min-content 1fr 1fr
custom_fields:
i2: |
[[[
return `
`;
]]]
tap_action:
action: call-service
service: automation.trigger
service_data:
entity_id: automation.turn_on_tv_and_xbox_2
hold_action:
action: more-info
columns: 3
title: Automations
- type: custom:gap-card
height: 32
type: custom:vertical-layout
subview: true
- title: Daniel's Bedroom
path: daniel-s-bedroom
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
card_mod:
style: |
ha-card {
background: transparent;
--chip-background: transparent;
box-shadow: none;
margin: 18px 0px 18px 0px;
}
- type: custom:button-card
name: |
[[[
return entity.attributes.friendly_name;
]]]
label: |
[[[
return states['device_tracker.dans_pixel_6'].state == 'home' ? "Home" : "Away";
]]]
show_name: true
show_label: true
show_state: false
show_icon: true
show_entity_picture: true
entity: person.daniel
tap_action:
action: more-info
styles:
card:
- width: 100%
- background-color: var(--contrast2)
- padding: 10px 10px 10px 0px
- margin-top: 8px
- border-radius: 99vh
grid:
- grid-template-areas: |
"i n"
"i l"
- grid-template-columns: 60px 1fr
- grid-template-rows: min-content
name:
- align-self: end
- justify-self: start
- background: none
- padding-left: 0px
- font-size: 14px
- font-weight: 600
- padding-right: 12px
label:
- align-self: start
- justify-self: start
- background: none
- padding: 0px
- padding-top: 0px
- color: var(--contrast10)
- font-size: 12px
img_cell:
- justify-content: start
- width: 40px
- height: 40px
- border-radius: 99vh
icon:
- color: var(--contrast1)
- justify-content: start
- align-content: center
entity_picture:
- justify-content: start
- position: absolute
- width: 40px
- height: 40px
- left: 0ppx
- bottom: 0px
- margin: 0px 0px 0px 0px
- border-radius: 500px
- type: custom:gap-card
height: 8
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.daniel_s_bedroom_total_power
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: none
use_entity_picture: false
alignment: end
- type: custom:gap-card
height: 8
- square: true
type: grid
cards:
- type: custom:button-card
entity: light.daniel_s_bedroom_light
name: Bedroom Light
icon: m3s:light-outlined
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
icon:
- width: 50%
- height: 100%
name:
- margin-top: 10%
- color: var(--contrast20)
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: center
custom_fields:
second:
- text-align: left
- align-self: end
- justify-self: end
- margin-bottom: '-8px'
grid:
- grid-template-areas: |
"i ."
"n n"
". second"
- grid-template-rows: min-content 1fr min-content
- grid-template-columns: 1fr 1fr
state:
- value: 'off'
styles:
card:
- background-color: var(--ha-card-background)
icon:
- color: var(--contrast20)
img_cell:
- background-color: var(--contrast4)
- value: 'on'
styles:
card:
- background-color: var(--contrast20)
name:
- color: var(--contrast1)
icon:
- color: var(--contrast1)
img_cell:
- background-color: var(--contrast16)
- value: unavailable
styles:
icon:
- color: red
img_cell:
- background-color: rgba(255,0,0,var(--color-tint))
custom_fields:
second: |
[[[
if (entity.state == 'on') {
return `
`;
} else {
return `
`;
}
]]]
tap_action:
action: toggle
hold_action:
action: more-info
columns: 3
title: Managed Devices
- type: custom:gap-card
height: 32
- type: conditional
conditions:
- condition: state
entity: light.daniel_s_bedroom_light
state: 'on'
card:
square: true
type: grid
cards:
- type: custom:button-card
entity: scene.dan_s_bedroom_concentrate
name: Concentrate Mode
icon: mdi:brain
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
icon:
- width: 50%
- height: 100%
name:
- margin-top: 10%
- color: var(--contrast20)
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: center
custom_fields:
second:
- text-align: left
- align-self: end
- justify-self: end
- margin-bottom: '-8px'
grid:
- grid-template-areas: |
"i ."
"n n"
". second"
- grid-template-rows: min-content 1fr min-content
- grid-template-columns: 1fr 1fr
state:
- value: 'off'
styles:
card:
- background-color: var(--ha-card-background)
icon:
- color: var(--contrast20)
img_cell:
- background-color: var(--contrast4)
- value: 'on'
styles:
card:
- background-color: var(--contrast20)
name:
- color: var(--contrast1)
icon:
- color: var(--contrast1)
img_cell:
- background-color: var(--contrast16)
- value: unavailable
styles:
icon:
- color: red
img_cell:
- background-color: rgba(255,0,0,var(--color-tint))
custom_fields:
second: |
[[[
if (entity.state == 'on') {
return `
`;
} else {
return `
`;
}
]]]
tap_action:
action: toggle
hold_action:
action: more-info
- type: custom:button-card
entity: scene.dan_s_bedroom_dimmed
name: Dimmed Mode
icon: m3s:keyboard-arrow-down-rounded
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
icon:
- width: 50%
- height: 100%
name:
- margin-top: 10%
- color: var(--contrast20)
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: center
custom_fields:
second:
- text-align: left
- align-self: end
- justify-self: end
- margin-bottom: '-8px'
grid:
- grid-template-areas: |
"i ."
"n n"
". second"
- grid-template-rows: min-content 1fr min-content
- grid-template-columns: 1fr 1fr
state:
- value: 'off'
styles:
card:
- background-color: var(--ha-card-background)
icon:
- color: var(--contrast20)
img_cell:
- background-color: var(--contrast4)
- value: 'on'
styles:
card:
- background-color: var(--contrast20)
name:
- color: var(--contrast1)
icon:
- color: var(--contrast1)
img_cell:
- background-color: var(--contrast16)
- value: unavailable
styles:
icon:
- color: red
img_cell:
- background-color: rgba(255,0,0,var(--color-tint))
custom_fields:
second: |
[[[
if (entity.state == 'on') {
return `
`;
} else {
return `
`;
}
]]]
tap_action:
action: toggle
hold_action:
action: more-info
- type: custom:button-card
entity: scene.dan_s_bedroom_nebula
name: Nebula Mode
icon: m3s:star-rounded-filled
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
icon:
- width: 50%
- height: 100%
name:
- margin-top: 10%
- color: var(--contrast20)
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: center
custom_fields:
second:
- text-align: left
- align-self: end
- justify-self: end
- margin-bottom: '-8px'
grid:
- grid-template-areas: |
"i ."
"n n"
". second"
- grid-template-rows: min-content 1fr min-content
- grid-template-columns: 1fr 1fr
state:
- value: 'off'
styles:
card:
- background-color: var(--ha-card-background)
icon:
- color: var(--contrast20)
img_cell:
- background-color: var(--contrast4)
- value: 'on'
styles:
card:
- background-color: var(--contrast20)
name:
- color: var(--contrast1)
icon:
- color: var(--contrast1)
img_cell:
- background-color: var(--contrast16)
- value: unavailable
styles:
icon:
- color: red
img_cell:
- background-color: rgba(255,0,0,var(--color-tint))
custom_fields:
second: |
[[[
if (entity.state == 'on') {
return `
`;
} else {
return `
`;
}
]]]
tap_action:
action: toggle
hold_action:
action: more-info
columns: 3
title: Light Actions
- type: custom:gap-card
height: 32
subview: true
type: custom:vertical-layout
- title: Rebecca's Bedroom
path: rebecca-s-bedroom
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
card_mod:
style: |
ha-card {
background: transparent;
--chip-background: transparent;
box-shadow: none;
margin: 18px 0px 18px 0px;
}
- type: custom:button-card
name: |
[[[
return entity.attributes.friendly_name;
]]]
label: |
[[[
return entity.state == 'home' ? "Home" : "Away";
]]]
show_name: true
show_label: true
show_state: false
show_icon: true
show_entity_picture: true
entity: person.rebecca
tap_action:
action: more-info
styles:
card:
- width: 100%
- background-color: var(--contrast2)
- padding: 10px 10px 10px 0px
- margin-top: 8px
- border-radius: 99vh
grid:
- grid-template-areas: |
"i n"
"i l"
- grid-template-columns: 60px 1fr
- grid-template-rows: min-content
name:
- align-self: end
- justify-self: start
- background: none
- padding-left: 0px
- font-size: 14px
- font-weight: 600
- padding-right: 12px
label:
- align-self: start
- justify-self: start
- background: none
- padding: 0px
- padding-top: 0px
- color: var(--contrast10)
- font-size: 12px
img_cell:
- justify-content: start
- width: 40px
- height: 40px
- border-radius: 99vh
icon:
- color: var(--contrast1)
- justify-content: start
- align-content: center
entity_picture:
- justify-content: start
- position: absolute
- width: 40px
- height: 40px
- left: 0ppx
- bottom: 0px
- margin: 0px 0px 0px 0px
- border-radius: 500px
- type: custom:gap-card
height: 8
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.rebecca_s_bedroom_total_power
content_info: state
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
use_entity_picture: false
alignment: end
- square: true
type: grid
cards:
- type: custom:button-card
entity: light.rebecca_s_bedroom_light
name: Bedroom Light
icon: m3s:light-outlined
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
icon:
- width: 50%
- height: 100%
name:
- margin-top: 10%
- color: var(--contrast20)
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: center
custom_fields:
second:
- text-align: left
- align-self: end
- justify-self: end
- margin-bottom: '-8px'
grid:
- grid-template-areas: |
"i ."
"n n"
". second"
- grid-template-rows: min-content 1fr min-content
- grid-template-columns: 1fr 1fr
state:
- value: 'off'
styles:
card:
- background-color: var(--ha-card-background)
icon:
- color: var(--contrast20)
img_cell:
- background-color: var(--contrast4)
- value: 'on'
styles:
card:
- background-color: var(--contrast20)
name:
- color: var(--contrast1)
icon:
- color: var(--contrast1)
img_cell:
- background-color: var(--contrast16)
- value: unavailable
styles:
icon:
- color: red
img_cell:
- background-color: rgba(255,0,0,var(--color-tint))
custom_fields:
second: |
[[[
if (entity.state == 'on') {
return `
`;
} else {
return `
`;
}
]]]
tap_action:
action: toggle
hold_action:
action: more-info
- type: custom:button-card
icon: m3s:tv-gen-rounded
name: TV
entity: media_player.rebecca_s_bedroom_tv
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
icon:
- width: 50%
- height: 100%
name:
- margin-top: 10%
- color: var(--contrast20)
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: center
custom_fields:
second:
- text-align: left
- align-self: end
- justify-self: end
- margin-bottom: '-8px'
grid:
- grid-template-areas: |
"i ."
"n n"
". second"
- grid-template-rows: min-content 1fr min-content
- grid-template-columns: 1fr 1fr
state:
- value: 'off'
styles:
card:
- background-color: var(--ha-card-background)
icon:
- color: var(--contrast20)
img_cell:
- background-color: var(--contrast4)
- value: 'on'
styles:
card:
- background-color: var(--contrast20)
name:
- color: var(--contrast1)
icon:
- color: var(--contrast1)
img_cell:
- background-color: var(--contrast16)
- value: playing
styles:
card:
- background-color: var(--contrast20)
name:
- color: var(--contrast1)
icon:
- color: var(--contrast1)
img_cell:
- background-color: var(--contrast16)
- value: idle
styles:
card:
- background-color: var(--contrast20)
name:
- color: var(--contrast1)
icon:
- color: var(--contrast1)
img_cell:
- background-color: var(--contrast16)
- value: unavailable
styles:
icon:
- color: red
img_cell:
- background-color: rgba(255,0,0,var(--color-tint))
custom_fields:
second: |
[[[
if (entity.state == 'on' || entity.state == 'playing' || entity.state == 'idle') {
return `
`;
} else {
return `
`;
}
]]]
tap_action:
action: more-info
hold_action:
action: more-info
columns: 3
title: Managed Devices
- type: custom:gap-card
height: 32
- square: true
type: grid
cards:
- type: custom:button-card
entity: device_tracker.rebecca_s_air_conditioner_2
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- padding: 10%
img_cell:
- border-radius: 100%
- width: 30px
- height: 30px
- background-color: var(--contrast4)
- justify-self: start
- align-self: start
icon:
- width: 50%
- height: 100%
name:
- margin-top: 10%
- color: var(--contrast20)
- font-size: 0.75em
- text-align: left
- white-space: normal
- word-break: break-word
- justify-self: start
- align-self: center
grid:
- grid-template-areas: |
"i ."
"n n"
". ."
- grid-template-rows: min-content 1fr min-content
- grid-template-columns: 1fr 1fr
state:
- value: not_home
styles:
card:
- background-color: var(--ha-card-background)
icon:
- color: var(--contrast20)
img_cell:
- background-color: var(--contrast4)
- value: home
styles:
card:
- background-color: var(--contrast20)
name:
- color: var(--contrast1)
icon:
- color: var(--contrast1)
img_cell:
- background-color: var(--contrast16)
- value: unavailable
styles:
icon:
- color: red
img_cell:
- background-color: rgba(255,0,0,var(--color-tint))
tap_action:
action: nonw
hold_action:
action: none
columns: 3
title: Un-managed Devices
- type: custom:gap-card
height: 32
subview: true
type: custom:vertical-layout
- title: Kitchen
path: kitchen
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
card_mod:
style: |
ha-card {
background: transparent;
--chip-background: transparent;
box-shadow: none;
margin: 18px 0px 18px 0px;
}
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity_picture: /local/images/devices/Canon_MG3600.png
show_label: false
show_name: false
show_icon: false
show_state: false
show_entity_picture: true
styles:
card:
- width: 150px
- height: 100%
- padding-top: 18px
- padding-bottom: 18px
- background-color: transparent
grid:
- grid-template-areas: |
"i"
"i"
- grid-template-columns: 1fr
- grid-template-rows: 1fr 1fr
img_cell:
- justify-content: center
- width: 100px
entity_picture:
- width: 100%
- type: entities
card_mod:
style:
.: |
ha-card {
background-color: transparent;
box-shadow: none;
}
#states {
padding-top: 0px !important;
padding-left: 0px !important;
padding-right: 0px !important;
padding-bottom: 0px !important;
}
#states > div {
margin-top: 8px !important;
margin-bottom: 8px !important;
margin-left: 0px !important;
margin-right: 0px !important;
}
entities:
- type: divider
- type: custom:button-card
show_name: false
show_label: false
show_state: false
show_icon: false
custom_fields:
title: Model
val: |
[[[
return "Canon MG3600" ;
]]]
styles:
card:
- padding: 18px
- background-color: transparent
grid:
- grid-template-areas: |
"title val"
- grid-template-columns: 1fr 3fr
custom_fields:
title:
- justify-self: start
- font-weight: 500
val:
- justify-self: end
- color: var(--contrast10)
- type: divider
- type: custom:button-card
entity: sensor.canon_mg3600_black
show_name: false
show_label: false
show_state: false
show_icon: false
custom_fields:
title: Black Ink
val: |
[[[
return entity.state;
]]]
styles:
card:
- padding: 18px
- background-color: transparent
grid:
- grid-template-areas: |
"title val"
- grid-template-columns: 1fr 3fr
custom_fields:
title:
- justify-self: start
- font-weight: 500
val:
- justify-self: end
- color: var(--contrast10)
- type: divider
- type: custom:button-card
entity: sensor.canon_mg3600_color
show_name: false
show_label: false
show_state: false
show_icon: false
custom_fields:
title: Colour Ink
val: |
[[[
return entity.state;
]]]
styles:
card:
- padding: 18px
- background-color: transparent
grid:
- grid-template-areas: |
"title val"
- grid-template-columns: 1fr 1fr
custom_fields:
title:
- justify-self: start
- font-weight: 500
val:
- justify-self: end
- color: var(--contrast10)
- type: divider
title: Kitchen Printer
- type: custom:gap-card
height: 36
- type: vertical-stack
title: Fridge Freezer
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity_picture: /local/images/devices/Beko_CF6004AP.png
show_label: false
show_name: false
show_icon: false
show_state: false
show_entity_picture: true
styles:
card:
- width: 100px
- height: 100%
- padding-top: 18px
- padding-bottom: 18px
- background-color: transparent
grid:
- grid-template-areas: |
"i"
"i"
- grid-template-columns: 1fr
- grid-template-rows: 1fr 1fr
img_cell:
- justify-content: center
- width: 100%
- height: 100%
entity_picture:
- height: 100%
- width: auto
icon:
- width: 70%
- type: entities
card_mod:
style:
.: |
ha-card {
background-color: transparent;
box-shadow: none;
}
#states {
padding-top: 0px !important;
padding-left: 0px !important;
padding-right: 0px !important;
padding-bottom: 0px !important;
}
#states > div {
margin-top: 8px !important;
margin-bottom: 8px !important;
margin-left: 0px !important;
margin-right: 0px !important;
}
entities:
- type: divider
- type: custom:button-card
entity: sensor.beko_fridge_freezer_model
show_name: false
show_label: false
show_state: false
show_icon: false
custom_fields:
title: Model
val: |
[[[
return entity.state ;
]]]
styles:
card:
- padding: 18px
- background-color: transparent
grid:
- grid-template-areas: |
"title val"
- grid-template-columns: 1fr 3fr
custom_fields:
title:
- justify-self: start
- font-weight: 500
val:
- justify-self: end
- color: var(--contrast10)
- type: divider
- type: custom:button-card
entity: sensor.kitchen_beko_fridge_freezer_power
show_name: false
show_label: false
show_state: false
show_icon: false
custom_fields:
title: Power
val: |
[[[
return entity.state + ' W' ;
]]]
styles:
card:
- padding: 18px
- background-color: transparent
grid:
- grid-template-areas: |
"title val"
- grid-template-columns: 1fr 3fr
custom_fields:
title:
- justify-self: start
- font-weight: 500
val:
- justify-self: end
- color: var(--contrast10)
- type: divider
- type: custom:button-card
entity: sensor.kitchen_beko_fridge_freezer_energy_daily
show_name: false
show_label: false
show_state: false
show_icon: false
custom_fields:
title: Energy Consumed
val: |
[[[
return entity.state + ' KWh' ;
]]]
styles:
card:
- padding: 18px
- background-color: transparent
grid:
- grid-template-areas: |
"title val"
- grid-template-columns: 1fr 1fr
custom_fields:
title:
- justify-self: start
- font-weight: 500
val:
- justify-self: end
- color: var(--contrast10)
- type: divider
- type: custom:gap-card
height: 36
- type: vertical-stack
title: Freezer
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity_picture: /local/images/devices/Beko_FFG1545W.png
show_label: false
show_name: false
show_icon: false
show_state: false
show_entity_picture: true
styles:
card:
- width: 100px
- height: 100%
- padding-top: 18px
- padding-bottom: 18px
- background-color: transparent
grid:
- grid-template-areas: |
"i"
"i"
- grid-template-columns: 1fr
- grid-template-rows: 1fr 1fr
img_cell:
- justify-content: center
- width: 100%
- height: 100%
entity_picture:
- height: 100%
- width: auto
icon:
- width: 70%
- type