OK. i’m happy with what i have now. this i gonna be a long post.
My config is broken up into many files and I heavily leverage lovelace_gen and button-card templates to keep things small. I also use layout-card fairly heavily to get the dynamic page sizes so things look nice on desktop/tablet as well as mobile. a lot of inspiration from dwains-theme in my config
So my system overview page i have a “lock manager card” per se that keeps overview things for this package neat.
the code from inside that page is here
# ---------------------------------
# ----- LOCK MANAGER
# ---------------------------------
#- break
- type: vertical-stack
cards:
- type: markdown
content: |
## Lock Manager
---
# Lock Manager Status Buttons
- !include ../champs-lovelace/cards/more-page/lock-manager-status-buttons.yaml
- type: custom:restriction-card
restrictions:
pin:
code: !secret restriction_card_pin_code
block:
exemptions:
- user: !secret user_id
card:
type: custom:button-card
icon: mdi:lock-smart
name: Front Door Codes and Configuration
template: lock_manager_button
tap_action:
action: navigate
navigation_path: /champs-theme-ng/keypad-frontdoor
# Lock Manager Overrides
- !include ../champs-lovelace/cards/more-page/lock-manager-overrides.yaml
the status buttons and overrides section in the above code block are below
lock-manager-status-buttons.yaml:
# lovelace_gen
type: horizontal-stack
cards:
- type: custom:button-card
entity: binary_sensor.system_ready
template: lock_manager_button
show_state: false
- type: custom:button-card
entity: binary_sensor.allow_automation
template: lock_manager_button
show_state: false
lock-manager-overrides.yaml:
# lovelace_gen
type: vertical-stack
cards:
- type: custom:mod-card
style: |
ha-card {
background-color: var(--champs-theme-primary);
padding-right: 20px;
padding-bottom: 10px;
border-radius: 10px;
}
card:
type: custom:fold-entity-row
head:
type: section
label: Notification Override
entities:
- entity: input_boolean.frontdoor_lock_notifications
- entity: input_boolean.frontdoor_dooraccess_notifications
- type: custom:mod-card
style: |
ha-card {
background-color: var(--champs-theme-primary);
padding-right: 20px;
padding-bottom: 10px;
border-radius: 10px;
}
card:
type: custom:fold-entity-row
head:
type: section
label: Lock Manager Override
entities:
- entity: input_boolean.system_ready
- entity: input_boolean.allow_automation_execution
lock_manager_button button-card template:
lock_manager_button:
size: 25px
show_state: true
show_name: true
styles:
grid:
- grid-template-areas: '"n" "i" "s"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content min-content min-content
card:
- background-color: var(--champs-theme-primary)
- border-radius: 10px
name:
- font-size: 14px
- color: var(--champs-theme-names)
state:
- font-size: 14px
icon:
- padding-bottom: 10px
tap_action:
action: none
Then, on my actual lock-manager page that the Front Door Codes and Configuration button navigates to looks like the images below. here i’m using button-card and button-card templates as well as browser-mod for the popups
lock-manager-lovelace.yaml
# lovelace_gen
###################################
#----------------------------------
#---- Lock Manager ----------------
#----------------------------------
###################################
- title: 'FrontDoor Codes and Configuration'
path: keypad-frontdoor
background: var(--background-image)
icon: 'mdi:lock-smart'
panel: true
cards:
# Main Container
- type: custom:mod-card
style: |
ha-card {
max-width: 1465px;
padding: 10px;
padding-bottom: 50px;
margin: 10px auto;
}
card:
type: vertical-stack
cards:
# start homepage header
- type: custom:mod-card
style: |
ha-card {
padding: 0px;
background-color: var(--champs-theme-primary);
--ha-card-background: transparent;
border-radius: 10px;
overflow: hidden;
}
@media only screen and (min-width: 1025px) {
ha-card {
margin-top: 25px;
padding-top: 15px;
padding-bottom: 10px;
}
}
card:
type: custom:layout-card
layout: horizontal
column_width: 100%
cards:
#Header
- !include
- ../partials/header.yaml
- title: Front Door Codes and Configuration
navigation_path: more-page
- type: vertical-stack
cards:
# Lock Manager Status Buttons
- !include ../champs-lovelace/cards/more-page/lock-manager-status-buttons.yaml
# Lock Manager Overrides
- !include ../champs-lovelace/cards/more-page/lock-manager-overrides.yaml
# Lock Code Configuration
- type: markdown
content: "## Lock Code Config"
- type: custom:layout-card
layout: horizontal
min_columns: 3
cards:
- type: custom:button-card
name: "Code 1"
entity: binary_sensor.active_frontdoor_1
template: lock_manager_button
tap_action:
!include ../champs-lovelace/views/popups/lock-manager/code-1.yaml
- type: custom:button-card
name: "Code 2"
entity: binary_sensor.active_frontdoor_2
template: lock_manager_button
tap_action:
!include ../champs-lovelace/views/popups/lock-manager/code-2.yaml
- type: custom:button-card
name: "Code 3"
entity: binary_sensor.active_frontdoor_3
template: lock_manager_button
tap_action:
!include ../champs-lovelace/views/popups/lock-manager/code-3.yaml
- type: custom:button-card
name: "Code 4"
entity: binary_sensor.active_frontdoor_4
template: lock_manager_button
tap_action:
!include ../champs-lovelace/views/popups/lock-manager/code-4.yaml
- type: custom:button-card
name: "Code 5"
entity: binary_sensor.active_frontdoor_5
template: lock_manager_button
tap_action:
!include ../champs-lovelace/views/popups/lock-manager/code-5.yaml
- type: custom:button-card
name: "Code 6"
entity: binary_sensor.active_frontdoor_6
template: lock_manager_button
tap_action:
!include ../champs-lovelace/views/popups/lock-manager/code-6.yaml
- type: custom:button-card
name: "Code 7"
entity: binary_sensor.active_frontdoor_7
template: lock_manager_button
tap_action:
!include ../champs-lovelace/views/popups/lock-manager/code-7.yaml
- type: custom:button-card
name: "Code 8"
entity: binary_sensor.active_frontdoor_8
template: lock_manager_button
tap_action:
!include ../champs-lovelace/views/popups/lock-manager/code-8.yaml
- type: custom:button-card
name: "Code 9"
entity: binary_sensor.active_frontdoor_9
template: lock_manager_button
tap_action:
!include ../champs-lovelace/views/popups/lock-manager/code-9.yaml
- type: custom:button-card
name: "Code 10"
entity: binary_sensor.active_frontdoor_10
template: lock_manager_button
tap_action:
!include ../champs-lovelace/views/popups/lock-manager/code-10.yaml
and each code popup is basically identical just referencing the appropriate code number entities. below is the code-10.yaml
# lovelace_gen
# popup for code config
haptic: heavy
action: call-service
service: browser_mod.popup
service_data:
title: 'Code 10'
style:
background: var(--champs-theme-primary)
card:
type: entities
show_header_toggle: false
entities:
- type: divider
- entity: input_text.frontdoor_name_10
- entity: input_text.frontdoor_pin_10
- entity: input_boolean.enabled_frontdoor_10
- entity: input_boolean.notify_frontdoor_10
- type: divider
- entity: binary_sensor.active_frontdoor_10
state_color: true
- type: divider
- type: 'custom:fold-entity-row'
head:
type: section
label: Advanced Options
entities:
- entity: input_boolean.reset_codeslot_frontdoor_10
- type: divider
- entity: input_boolean.accesslimit_frontdoor_10
- entity: input_number.accesscount_frontdoor_10
- type: divider
- entity: input_boolean.daterange_frontdoor_10
- entity: input_datetime.start_date_frontdoor_10
- entity: input_datetime.end_date_frontdoor_10
- type: divider
- type: custom:fold-entity-row
head:
type: section
label: 'Day of Week Access Breakdown'
entities:
- type: custom:fold-entity-row
head:
type: section
label: 'Sun'
entities:
- input_boolean.sun_frontdoor_10
- input_boolean.sun_inc_frontdoor_10
- input_datetime.sun_start_date_frontdoor_10
- input_datetime.sun_end_date_frontdoor_10
- type: custom:fold-entity-row
head:
type: section
label: 'Mon'
entities:
- input_boolean.mon_frontdoor_10
- input_boolean.mon_inc_frontdoor_10
- input_datetime.mon_start_date_frontdoor_10
- input_datetime.mon_end_date_frontdoor_10
- type: custom:fold-entity-row
head:
type: section
label: 'Tues'
entities:
- input_boolean.tue_frontdoor_10
- input_boolean.tue_inc_frontdoor_10
- input_datetime.tue_start_date_frontdoor_10
- input_datetime.tue_end_date_frontdoor_10
- type: custom:fold-entity-row
head:
type: section
label: 'Weds'
entities:
- input_boolean.wed_frontdoor_10
- input_boolean.wed_inc_frontdoor_10
- input_datetime.wed_start_date_frontdoor_10
- input_datetime.wed_end_date_frontdoor_10
- type: custom:fold-entity-row
head:
type: section
label: 'Thurs'
entities:
- input_boolean.thu_frontdoor_10
- input_boolean.thu_inc_frontdoor_10
- input_datetime.thu_start_date_frontdoor_10
- input_datetime.thu_end_date_frontdoor_10
- type: custom:fold-entity-row
head:
type: section
label: 'Fri'
entities:
- input_boolean.fri_frontdoor_10
- input_boolean.fri_inc_frontdoor_10
- input_datetime.fri_start_date_frontdoor_10
- input_datetime.fri_end_date_frontdoor_10
- type: custom:fold-entity-row
head:
type: section
label: 'Sat'
entities:
- input_boolean.sat_frontdoor_10
- input_boolean.sat_inc_frontdoor_10
- input_datetime.sat_start_date_frontdoor_10
- input_datetime.sat_end_date_frontdoor_10
deviceID:
- this
the only other thing i might do is add the code user name to the button card, but yeah, overall. loving this package. hope this helps inspire others. I sure have had a ton of inspiration from those brighter than me on this forum over the years.
cheers!