Hello, I worked on my status display an use now a yaml-configuration to be able to reuse parts of the code in different dashboards:
There are some issues with the positioning, size and shadow of the cards (entity with card-mod). And sometime a card does not display the backgroung color. Any help on this?
This is the main file:
wallpanel:
enabled: true
# enabled_on_tabs:
# - home
idle_time: 60
screensaver_entity: input_boolean.wallpanel_screensaver
image_url: https://source.unsplash.com/random/${480}x${480}?weather
cards:
- !include 'diefrickes/wallpanel.yaml'
#- !include 'diefrickes/wallpanel2.yaml'
# - !include 'diefrickes/wallpanel3.yaml'
- !include 'diefrickes/modul_condition.yaml'
profile_entity: input_select.wallpanel
profiles:
day:
image_url: https://source.unsplash.com/random/${480}x${480}?weather
style:
wallpanel-screensaver-container:
background-color: '#333333dd'
wallpanel-screensaver-info-box:
'--wp-card-width': 430px
'--wp-card-margin': 1px
'--wp-card-padding': 0px
'--wp-card-backdrop-filter': none
background-color: '#ffffff99'
box-shadow: >-
0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0,
0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)
wallpanel-screensaver-info-box-content:
'--ha-card-box-shadow': none
'--ha-card-background': none
'--ha-card-border-width': 0px
'--primary-background-color': '#202020'
'--secondary-background-color': '#e5e5e5'
'--primary-text-color': '#212121'
'--secondary-text-color': '#727272'
night:
image_url: https://source.unsplash.com/random/${1920}x${1080}?weather
style:
wallpanel-screensaver-info-box:
'--wp-card-width': 430px
'--wp-card-margin': 1px
'--wp-card-padding': 0px
'--wp-card-backdrop-filter': none
background-color: '#00000099'
box-shadow: >-
0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0,
0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)
wallpanel-screensaver-info-box-content:
'--ha-card-background': none
'--ha-card-box-shadow': none
'--primary-background-color': '#111111'
'--secondary-background-color': '#202020'
'--primary-text-color': '#e1e1e1'
'--secondary-text-color': '#9b9b9b'
title: NSPanelPro
views:
- !include 'diefrickes/nspanelpro_home.yaml'
- !include 'diefrickes/nspanelpro_alarm.yaml'
- !include 'diefrickes/nspanelpro_light.yaml'
- !include 'diefrickes/nspanelpro_fenster.yaml'
- !include 'diefrickes/nspanelpro_rollos.yaml'
- !include 'diefrickes/nspanelpro_wetter.yaml'
- !include 'diefrickes/nspanelpro_abfall.yaml'
- !include 'diefrickes/nspanelpro_energy.yaml'
- !include 'diefrickes/nspanelpro_warn.yaml'
- !include 'diefrickes/nspanelpro_vacuum.yaml'
- !include 'diefrickes/nspanelpro_garten.yaml'
- !include 'diefrickes/nspanelpro_info.yaml'
- !include 'diefrickes/nspanelpro_szenen.yaml'
- !include 'diefrickes/nspanelpro_Steckdosen.yaml'
- !include 'diefrickes/nspanelpro_klima.yaml'
- !include 'diefrickes/nspanelpro_warmwasser.yaml'
- !include 'diefrickes/nspanelpro_heizung.yaml'
- !include 'diefrickes/nspanelpro_battery.yaml'
- !include 'diefrickes/nspanelpro_medien.yaml'
- !include 'diefrickes/nspanelpro_kvb.yaml'
- !include 'diefrickes/nspanelpro_klingel.yaml'
- !include 'diefrickes/nspanelpro_kamera.yaml'
- !include 'diefrickes/nspanelpro_feuchte.yaml'
this is the module with conditional cards: (shortened)
I now use the default entity card
type: custom:layout-card
layout_type: custom:horizontal-layout
#layout_type: custom:masonry-layout
layout:
width: 120
max_cols: 6
reflow: true
#mediaquery:
# "(min-width: 800px)":
# layout:
# width: 150
# max_cols: 4
# reflow: true
# "(max-width: 800px)":
# layout:
# width: 100
# #max_width: 150
# max_cols: 3
# reflow: true
cards:
# Innenlicht
- type: conditional
conditions:
- entity: binary_sensor.lichter_innen
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:popup-card
title: Innenlicht
dismissable: true
deviceID: this
entity: binary_sensor.lichter_innen
size: normal
right_button: zu Lichter
left_button: alle aus
card:
type: custom:auto-entities
card:
title: Innenlicht
type: entities
state_color: true
filter:
include:
- domain: light
state: 'on'
exclude: []
sort:
method: friendly_name
show_empty: false
timeout: 36000
right_button_action:
service: browser_mod.navigate
data:
path: /lovelace-yaml/lights
left_button_action:
service: script.alle_lichter_aus
data: {}
- type: entity
name: Innen
entity: binary_sensor.lichter_innen
attribute: an
unit: an
state_color: true
style: |
ha-card {
color: black;
box-shadow: none;
background:
{% if is_state('binary_sensor.lichter_innen', 'on') %}
lightyellow
{% else %}
{% endif %} ;
}
double_tap_action:
action: navigate
navigation_path: /lovelace-yaml/lights
# Außenlicht
- type: conditional
conditions:
- entity: binary_sensor.lichter_aussen
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:popup-card
title: Außenlicht
dismissable: true
deviceID: this
entity: binary_sensor.lichter_aussen
size: normal
right_button: zu Lichter
left_button: alle aus
card:
type: custom:auto-entities
card:
title: Außenlicht
type: entities
state_color: true
filter:
include:
- domain: light
state: 'on'
exclude: []
sort:
method: friendly_name
show_empty: false
timeout: 36000
right_button_action:
service: browser_mod.navigate
data:
path: /lovelace-yaml/lights
left_button_action:
service: script.alle_lichter_aus
data: {}
- type: entity
name: Außen
entity: binary_sensor.lichter_aussen
attribute: an
unit: an
state_color: true
style: |
ha-card {
color: black;
box-shadow: none;
background:
{% if is_state('binary_sensor.lichter_aussen', 'on') %}
lightyellow
{% else %}
{% endif %} ;
}
double_tap_action:
action: navigate
navigation_path: /lovelace-yaml/lights
# Fenster
- type: conditional
conditions:
- entity: binary_sensor.fenster
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:popup-card
title: Fenster
dismissable: true
deviceID: this
entity: binary_sensor.fenster
size: normal
right_button: zu Sicherheit
#left_button: alle aus
card:
type: custom:auto-entities
card:
type: entities
state_color: true
filter:
include:
- domain: binary_sensor
state: 'on'
attributes:
device_class: window
exclude: []
sort:
method: friendly_name
show_empty: false
timeout: 36000
right_button_action:
service: browser_mod.navigate
data:
path: /lovelace-yaml/safety
# left_button_action:
# service: script.alle_lichter_aus
# data: {}
- type: entity
entity: binary_sensor.fenster
attribute: offen
unit: offen
state_color: true
style: |
ha-card {
color: black;
box-shadow: none;
background:
{% if is_state('binary_sensor.fenster', 'on') %}
lightyellow
{% else %}
{% endif %} ;
}
double_tap_action:
action: navigate
navigation_path: /lovelace-yaml/safety
this is the wallpanel content
type: grid
square: false
columns: 2
cards:
# --------------------------------------------------
- type: custom:digital-clock
card_mod:
style: |
ha-card {
--ha-card-box-shadow: none;
--ha-card-background: none;
--ha-card-spacing: 0px;
--ha-card-padding: 8px;
}
dateFormat:
weekday: long
day: 2-digit
month: short
timeFormat:
hour: 2-digit
minute: 2-digit
# ----------- Mini Info --------------------------------------
- type: vertical-stack
cards:
# ------- Chips Zeile 1
- type: custom:mushroom-chips-card
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 8px;
}
chips:
# Solar Battery {{ states('sensor.senec_battery_charge_percent') }}
- type: template
content: "{{ states('sensor.senec_battery_charge_percent')|round(0) }} %"
double_tap_action:
action: none
entity: sensor.senec_system_state
tap_action:
action: navigate
navigation_path: /nspanel-yaml/energy
hold_action:
action: none
icon: >-
{% if is_state('sensor.senec_system_state','DISCHARGE') or is_state('sensor.senec_system_state','GRID + DISCHARGE') or is_state('sensor.senec_system_state','PV + DISCHARGE') %}
mdi:battery-arrow-down
{%- elif is_state('sensor.senec_system_state','CHARGE') -%}
mdi:battery-charging
{%- elif is_state('sensor.senec_system_state','BATTERY FULL') -%}
mdi:battery
{%- elif is_state('sensor.senec_system_state','ABSORPTION PHASE') -%}
mdi:battery
{%- elif is_state('sensor.senec_system_state','MAN. SAFETY CHARGE') or is_state('sensor.senec_system_state','SAFETY CHARGE READY') -%}
mdi:battery-sync
{%- else -%}
mdi:battery-alert
{%- endif %}
icon_color: |-
{% if is_state('sensor.senec_system_state','DISCHARGE') or is_state('sensor.senec_system_state','GRID + DISCHARGE') or is_state('sensor.senec_system_state','PV + DISCHARGE') %}
purple
{%- elif is_state('sensor.senec_system_state','CHARGE') -%}
dark-green
{%- elif is_state('sensor.senec_system_state','BATTERY FULL') -%}
green
{%- elif is_state('sensor.senec_system_state','ABSORPTION PHASE') -%}
cyan
{%- elif is_state('sensor.senec_system_state','MAN. SAFETY CHARGE') or is_state('sensor.senec_system_state','SAFETY CHARGE READY') -%}
organge
{%- else -%}
red
{%- endif %}
- type: conditional
conditions:
- entity: input_boolean.mylo
state: 'on'
chip:
type: entity
entity: input_boolean.mylo
icon_color: purple
content_info: none
- type: conditional
conditions:
- entity: input_boolean.gaste
state: 'on'
chip:
type: entity
entity: input_boolean.gaste
icon_color: purple
content_info: none
- type: conditional
conditions:
- entity: binary_sensor.sonnenstrahlung
state: 'on'
chip:
type: entity
entity: binary_sensor.sonnenstrahlung
icon_color: amber
content_info: none
- type: template
double_tap_action:
action: none
entity: alarm_control_panel.alarmo
tap_action:
action: navigate
navigation_path: /nspanel-yaml/alarmanlage
hold_action:
action: none
icon: >-
{% if is_state('alarm_control_panel.alarmo','disarmed') %}
mdi:shield-off
{%- elif is_state('alarm_control_panel.alarmo','armed_home')
-%}
mdi:shield-home
{%- else -%}
mdi:shield-lock
{%- endif %}
icon_color: |-
{% if is_state('alarm_control_panel.alarmo','disarmed') %}
green
{%- else -%}
red
{%- endif %}
- type: template
double_tap_action:
action: none
entity: lock.turschloss
icon: |
{% if is_state('lock.turschloss', 'unlocked') %}
mdi:lock-off
{%- else -%}
mdi:lock
{%- endif %}
icon_color: |-
{% if is_state('lock.turschloss', 'unlocked') %}
green
{%- else -%}
red
{%- endif %}
tap_action:
action: navigate
navigation_path: /nspanel-yaml/alarmanlage
hold_action:
action: none
# --------- Chips Zeile 2
- type: custom:mushroom-chips-card
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 8px;
}
chips:
- type: entity
entity: sensor.senec_autarkie_grad_taglich
use_entity_picture: false
double_tap_action:
action: more-info
tap_action:
action: none
hold_action:
action: more-info
- type: entity
entity: sensor.senec_solar_generated_power
use_entity_picture: false
double_tap_action:
action: more-info
tap_action:
action: none
hold_action:
action: more-info
# Abfall heute
- type: conditional
conditions:
- entity: sensor.abfallnext
state: '0'
chip:
type: entity
entity: sensor.abfallnext
content_info: none
icon: mdi:trash-can
tap_action:
action: none
icon_color: red