I’ve created several views to display in panels around the house and for my wife and a spare phone for visitors. This is the main view. Only the views with icons are visible on the panels and other devices I mentioned.
The issue is that quite frequently nothing shows in this main view. I can then edit the view and make a change, save, undo the change, and resave, and the view works perfectly.
I’ve also tried using the Sidebar view, but this does not solve the problem.
Any ideas?
Below is the code for this view.
title: Miles-Home
button_card_templates:
standard:
color_type: icon
size: 80%
hold_action:
action: more-info
styles:
card:
- height: 100px
- padding: 0.2em
- '--mdc-ripple-color': yellow
- '--mdc-ripple-press-opacity': 0.5
icon:
- opacity: 0.5
name:
- font-size: 0.65em
- white-space: normal
state:
- font-size: 0.65em
- white-space: normal
label:
- font-size: 0.4em
- white-space: normal
wide:
template: standard
styles:
grid:
- position: relative
- grid-template-areas: '"i n"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr
container:
color_type: label-card
color: blue
styles:
card:
- padding: 0
name:
- border-radius: 0.4em 0.4em 0 0
- padding: 0.1em
- width: 100%
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "buttons"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields:
buttons:
- background-color: rgba(0,0,0,0.3)
- margin: 0
- padding: 0.3em
alerter:
template: standard
show_last_changed: true
color_type: icon
styles:
card:
- height: 100px
extra_styles: |
[[[ return `
@keyframes pulse {
20% {
background-color: ${variables.color};
}
}
`]]]
variables:
color: var(--paper-item-icon-active-color)
state:
- value: 'on'
id: value_on
styles:
card:
- animation: pulse 3s infinite
alerter-dual:
template: standard
show_last_changed: true
color_type: icon
styles:
card:
- height: 100px
extra_styles: |
[[[ return `
@keyframes pulse1 {
20% {
background-color: ${variables.color_initial};
}
}
@keyframes pulse2 {
20% {
background-color: ${variables.color_extended};
}
}
@keyframes color {
0% {
color: unset;
opacity: 0.5
}
99% {
color: unset;
opacity: 0.5
}
100% {
color: ${variables.color_extended};
}
}
`]]]
variables:
color_initial: var(--paper-item-icon-active-color)
color_extended: rgba(240,52,52, 0.9)
color_seconds: 60
state:
- value: 'on'
id: value_on
styles:
card:
- animation: >-
[[[ return `pulse1 ${variables.color_seconds}, pulse2 1s
${variables.color_seconds}s infinite` ]]]
icon:
- color: '[[[ return variables.color_extended ]]]'
- opacity: 1
- animation: '[[[ return `color ${variables.color_seconds}s 1` ]]]'
name:
- font-weight: bold
views:
- title: cp-main
path: cp-main
icon: mdi:alarm-bell
visible:
- user: c2342e3d3d1d41dcbe807b7c257a917c
- user: 02b4b304464e44c2afa590ea2b04ceb3
- user: 5697357b882b488caeb38a997f1b323b
- user: e9f01ca866e2480589540210e096e7ad
- user: 031266e819a3462098497e912ae55d91
type: sidebar
badges: []
cards:
- type: custom:button-card
template: container
color: '#EDE7B0'
name: Security Alerts
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- entity: alarm_control_panel.carpe_diem
show_state: true
state:
- value: armed
color: red
id: value_on
state: Armed
icon: mdi:shield-lock
- value: armed_home
color: red
id: value_on
state: Armed - Home
icon: mdi:shield-lock
- value: armed_night
color: red
id: value_on
state: Armed - Home
icon: mdi:shield-lock
- value: armed_away
color: red
id: value_on
state: Armed - Away
icon: mdi:shield-lock
- value: arming
color: orange
id: value_on
state: Arming
icon: mdi:shield-lock
styles:
card:
- animation: blink 2s ease infinite
- value: disarmed
color: green
id: value_off
state: Disarmed
icon: mdi:shield-lock-open-outline
template: standard
name: Security
color_type: icon
type: custom:button-card
- entity: input_boolean.acknowledge_alarm
show_state: true
show_last_changed: false
state:
- value: 'on'
color: red
id: value_on
icon: mdi:bell
styles:
card:
- animation: blink 2s ease infinite
- value: 'off'
color: green
id: value_off
icon: mdi:bell-off
template: standard
color_type: icon
name: Security Alarm
type: custom:button-card
- entity: input_boolean.fire_alarm
show_state: false
show_last_changed: false
state:
- value: 'on'
icon: mdi:fire-alert
color: red
id: value_on
styles:
card:
- animation: blink 2s ease infinite
- value: 'off'
icon: mdi:fire-off
color: green
id: value_off
tap_action: more_info
template: standard
color_type: icon
type: custom:button-card
- entity: input_boolean.open_gate
show_state: false
show_last_changed: false
state:
- value: 'on'
color: orange
id: value_on
icon: mdi:gate-open
styles:
card:
- animation: blink 1s ease infinite
- value: 'off'
color: green
id: value_off
icon: mdi:gate
template: standard
color_type: icon
type: custom:button-card
- type: custom:button-card
template: container
color: '#EDE7B0'
name: Smoke & Fire Sensors
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- entity: binary_sensor.fire_kitchen_smoke
show_state: false
show_last_changed: false
state:
- value: 'on'
id: value_on
icon: mdi:fire
color: red
styles:
card:
- animation: blink 2s ease infinite
- value: 'off'
id: value_off
icon: mdi:fire-off
color: green
template: standard
color_type: icon
name: Kitchen
type: custom:button-card
- entity: binary_sensor.smoke_kitchen_smoke
show_state: false
show_last_changed: false
state:
- value: 'on'
id: value_on
icon: mdi:smoke
color: red
styles:
card:
- animation: blink 2s ease infinite
- value: 'off'
color: green
id: value_off
icon: mdi:smoke-detector-off
template: standard
color_type: icon
name: Kitchen
type: custom:button-card
- entity: binary_sensor.smoke_upstairs_hall_smoke
show_state: false
show_last_changed: false
state:
- value: 'on'
id: value_on
icon: mdi:smoke
color: red
styles:
card:
- animation: blink 2s ease infinite
- value: 'off'
id: value_off
icon: mdi:smoke-detector-off
color: green
template: standard
color_type: icon
type: custom:button-card
name: Upstairs
- type: custom:button-card
template: container
color: '#EDE7B0'
name: Closure & Motion Sensors
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- entity: sensor.alarm_closure_downstairs
type: custom:button-card
template: alerter-dual
show_state: false
show_last_changed: false
name: Downstairs
state:
- value: 'True'
id: value_on
icon: mdi:door-open
color: red
styles:
card:
- animation: blink 1s ease infinite
- value: 'False'
id: value_off
icon: mdi:door-closed
color: green
- entity: sensor.alarm_closure_upstairs
type: custom:button-card
template: alerter-dual
show_last_changed: false
show_state: false
name: Upstairs
state:
- value: 'True'
id: value_on
icon: mdi:door-open
color: red
styles:
card:
- animation: blink 1s ease infinite
- value: 'False'
id: value_off
icon: mdi:door-closed
color: green
- entity: sensor.alarm_motion_downstairs
type: custom:button-card
template: alerter-dual
show_last_changed: false
show_state: false
name: Downstairs
state:
- value: 'True'
id: value_on
icon: mdi:motion-sensor
color: red
styles:
card:
- animation: blink 1s ease infinite
- value: 'False'
id: value_off
icon: mdi:motion-sensor-off
color: green
- entity: sensor.alarm_motion_upstairs
type: custom:button-card
template: alerter-dual
show_last_changed: false
show_state: false
name: Upstairs
state:
- value: 'True'
id: value_on
icon: mdi:motion-sensor
color: red
styles:
card:
- animation: blink 1s ease infinite
- value: 'False'
id: value_off
icon: mdi:motion-sensor-off
color: green
- entity: sensor.alarm_motion_cameras_2
type: custom:button-card
template: alerter-dual
show_last_changed: false
show_state: false
name: Outside
state:
- value: 'True'
id: value_on
icon: mdi:motion-sensor
color: red
styles:
card:
- animation: blink 1s ease infinite
- value: 'False'
id: value_off
icon: mdi:motion-sensor-off
color: green
- type: custom:button-card
template: container
color: '#EDE7B0'
name: Lights
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- entity: light.lights_evening_inside
name: Evening
template: standard
icon: mdi:lamp
type: custom:button-card
- entity: light.lights_evening_outside
name: Evening
template: standard
icon: mdi:outdoor-lamp
type: custom:button-card
- entity: light.all_inside
name: Inside
template: standard
icon: mdi:lamp
type: custom:button-card
- entity: light.all_outside
template: standard
name: Outside
icon: mdi:outdoor-lamp
type: custom:button-card