I am reasonably new to HASS and Yaml. Although AI is a good help, I am now struggling with something, which I expected to be simple, but cannot get it working. I have a panel definition containing a custom stack in card with 2 rows of buttons. The first I tried, is to get this card with buttons bottom aligned (so it is always at the bottom of the page).
The second I like is somehow (include! ? ) make this modular, so I can have those buttons a the bottom of several panels (without copying its definition)
Anyone whos is experienecd and know how to accomplish this ?
##############################################################
# WALL PANEL DASHBOARD - Starting Point
# Required custom cards (install via HACS):
# - layout-card
# - mushroom-cards
# - stack-in-card
# - card-mod
# - mini-graph-card
##############################################################
- title: Home
path: panel-1
type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr
grid-template-rows: auto auto auto auto auto auto auto 1fr auto
min-height: 1920px
grid-gap: 8px
padding: 8px
anchors:
_light_card_style: &light_card_style
card_mod:
style: |
ha-card {
--card-primary-font-size: 24px;
}
_light_switch_style: &light_switch_style
card_mod:
style: |
ha-card {
aspect-ratio: 1 / 1;
padding-bottom: 8px;
--card-primary-font-size: 24px;
}
_nav_button_style: &nav_button_style
card_mod:
style: |
ha-card {
--ha-tile-info-primary-font-size: 24px;
}
ha-tile-icon {
--mdc-icon-size: 60px;
--tile-icon-size: 80px;
--tile-icon-border-radius: 50%;
}
cards:
##########################################################
# BADGES ROW
##########################################################
- type: custom:mushroom-chips-card
view_layout:
grid-column: 1 / -1
grid-row: 1
card_mod:
style: |
ha-card {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: stretch;
--chip-icon-size: 48px;
--chip-height: 58px;
--chip-font-size: 26px;
}
ha-card > div {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: 100%;
}
ha-card > div > * {
flex: 1 1 0;
min-width: 0;
max-width: 20%;
overflow: hidden;
justify-content: center;
}
chips:
- type: template
icon: mdi:alert
content: "{{ states('sensor.washing_ready') }}"
icon_color: red
- type: template
icon: mdi:battery
content: "{{ states('sensor.battery_status') }}"
icon_color: >
{% if states('sensor.battery_status') | int > 20 %}green{% else %}red{% endif %}
- type: template
icon: mdi:trash-can-outline
content: "{{ states('sensor.afval_buiten') }}"
icon_color: orange
- type: template
icon: mdi:washing-machine
content: "{{ states('sensor.washing_ready') }}"
icon_color: blue
- type: template
icon: mdi:home-account
content: >
{% if is_state('binary_sensor.presence_home', 'on') %}Thuis{% else %}Weg{% endif %}
icon_color: >
{% if is_state('binary_sensor.presence_home', 'on') %}green{% else %}grey{% endif %}
- type: weather
entity: weather.home
show_conditions: true
show_temperature: true
- type: template
icon: mdi:clock-outline
content: "{{ now().strftime('%H:%M') }}"
##########################################################
# ENERGIE OVERZICHT — left column
##########################################################
- type: custom:mini-graph-card
view_layout:
grid-column: 1
grid-row: 2
name: Energie overzicht
icon: mdi:lightning-bolt
entities:
- entity: sensor.energy_consumption
name: Verbruik
- entity: sensor.energy_solar
name: Zonnepanelen
color: "#f9a825"
hours_to_show: 24
points_per_hour: 2
line_width: 2
font_size: 75
animate: true
##########################################################
# CAMERA VOORDEUR — right column
##########################################################
- type: picture-glance
view_layout:
grid-column: 2
grid-row: 2
title: Camera voordeur
camera_image: camera.voordeur
entities:
- entity: binary_sensor.voordeur_motion
icon: mdi:motion-sensor
- entity: lock.voordeur
icon: mdi:lock
##########################################################
# SLIDERS VERLICHTING WOONKAMER
##########################################################
- type: custom:stack-in-card
view_layout:
grid-column: 1 / -1
grid-row: 3
title: Verlichting begane grond
mode: vertical
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.dev_dimmer
name: Eettafel
show_brightness_control: true
show_color_temp_control: true
collapsible_controls: false
<<: *light_card_style
- type: custom:mushroom-light-card
entity: light.dev_dimmer_ct
name: Salontafel
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: false
<<: *light_card_style
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.dev_dimmer
name: Plint keuken
show_brightness_control: true
show_color_temp_control: false
collapsible_controls: false
<<: *light_card_style
- type: custom:mushroom-light-card
entity: light.dev_dimmer
name: TV wand
show_brightness_control: true
show_color_temp_control: false
collapsible_controls: false
<<: *light_card_style
- type: custom:mushroom-light-card
entity: light.dev_dimmer
name: Schemerlamp bank
show_brightness_control: true
show_color_temp_control: false
collapsible_controls: false
<<: *light_card_style
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.dev_light_switch
name: Hulsta kast
layout: vertical
secondary_info: none
<<: *light_switch_style
- type: custom:mushroom-light-card
entity: light.dev_light_switch
name: Schelp
layout: vertical
secondary_info: none
<<: *light_switch_style
- type: custom:mushroom-light-card
entity: light.dev_dimmer
name: Gang plafond
layout: vertical
secondary_info: none
<<: *light_switch_style
- type: custom:mushroom-light-card
entity: light.dev_dimmer
name: Gang koofjes
layout: vertical
secondary_info: none
<<: *light_switch_style
- type: custom:mushroom-light-card
entity: light.dev_light_switch
name: Spot Amadeus
layout: vertical
secondary_info: none
<<: *light_switch_style
- type: custom:mushroom-light-card
entity: light.dev_light_switch
name: Spot TV
layout: vertical
secondary_info: none
<<: *light_switch_style
##########################################################
# SPACER — pushes bottom block down
##########################################################
- type: markdown
content: " "
view_layout:
grid-column: 1 / -1
grid-row: 8
card_mod:
style: |
ha-card {
height: 100%;
min-height: 300px;
background: none;
box-shadow: none;
border: none;
}
##########################################################
# SCENE BUTTONS + NAVIGATION — bottom
##########################################################
- type: custom:stack-in-card
view_layout:
grid-column: 1 / -1
grid-row: 9
mode: vertical
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Slapen
icon: mdi:sleep
icon_color: indigo
layout: vertical
tap_action:
action: call-service
service: scene.turn_on
target:
entity_id: scene.slapen
<<: *nav_button_style
- type: custom:mushroom-template-card
primary: TV kijken
icon: mdi:television-play
icon_color: blue
layout: vertical
tap_action:
action: call-service
service: scene.turn_on
target:
entity_id: scene.tv_kijken
<<: *nav_button_style
- type: custom:mushroom-template-card
primary: Muziek
icon: mdi:music
icon_color: purple
layout: vertical
tap_action:
action: call-service
service: scene.turn_on
target:
entity_id: scene.muziek_luisteren
<<: *nav_button_style
- type: custom:mushroom-template-card
primary: Eten
icon: mdi:food-fork-drink
icon_color: orange
layout: vertical
tap_action:
action: call-service
service: scene.turn_on
target:
entity_id: scene.eten
<<: *nav_button_style
- type: custom:mushroom-template-card
primary: TBD
icon: mdi:help-circle-outline
icon_color: grey
layout: vertical
<<: *nav_button_style
- type: custom:mushroom-template-card
primary: Instellingen
icon: mdi:cog-outline
icon_color: grey
layout: vertical
tap_action:
action: navigate
navigation_path: /config/dashboard
<<: *nav_button_style
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Home
icon: mdi:home
icon_color: blue
layout: vertical
tap_action:
action: navigate
navigation_path: /lovelace/home
<<: *nav_button_style
- type: custom:mushroom-template-card
primary: Tuin
icon: mdi:flower
icon_color: green
layout: vertical
tap_action:
action: navigate
navigation_path: /lovelace/tuin
<<: *nav_button_style
- type: custom:mushroom-template-card
primary: Camera
icon: mdi:cctv
icon_color: red
layout: vertical
tap_action:
action: navigate
navigation_path: /lovelace/camera
<<: *nav_button_style
- type: custom:mushroom-template-card
primary: Energie
icon: mdi:lightning-bolt
icon_color: yellow
layout: vertical
tap_action:
action: navigate
navigation_path: /lovelace/energie
<<: *nav_button_style
- type: custom:mushroom-template-card
primary: Status
icon: mdi:information-outline
icon_color: cyan
layout: vertical
tap_action:
action: navigate
navigation_path: /lovelace/status
<<: *nav_button_style
- type: custom:mushroom-template-card
primary: Admin
icon: mdi:shield-account
icon_color: deep-orange
layout: vertical
tap_action:
action: navigate
navigation_path: /lovelace/admin
<<: *nav_button_style