wallpanel:
enabled: true
debug: false
hide_toolbar: true
show_progress_bar: false
show_image_info: false
image_animation_ken_burns: false
hide_toolbar_action_icons: false
stop_screensaver_on_mouse_move: false
card_interaction: true
hide_sidebar: false
fullscreen: false
idle_time: 130
display_time: 15
fade_in_time: 5
crossfade_time: 2
screensaver_stop_navigation_path: /dashboard-tablet/home
image_url: <https://api.unsplash.com/photos/random?$3840x$2160&client_id={api}&query=wallpaper>
image_fit: cover
image_list_update_interval: 30
image_order: sorted
cards:
- type: custom:atomic-calendar-revive
enableModeChange: true
entities:
- entity: update.atomic_calendar_revive_update
icon: ''
- entity: calendar.name
name: name
maxDaysToShow: 12
showDate: false
showLoader: false
eventDateFormat: dddd D MMMM
name: Schoolagenda
hoursOnSameLine: false
showAllDayHours: false
showDatePerEvent: true
showTimeRemaining: true
showWeekNumber: true
showRelativeTime: false
card_mod:
style: |
ha-card {
background: none;
border: 0px;
font-size: 14px;
font-weight: 300;
left: 10px;
top: 10px;
position: absolute;
color: #ffffff;
display: none;
}
.header-name {
font-weight: 900!important;
color: #FFFFFF!important;
}
.daywrap {
border-top: 0px!important;
color: #FFFFFF;
}
.event-date-day, .event-date-month, .event-date-week-day {
width: 150px;
font-weight: 300;
color: #FFFFFF;
}
.event-title{
color: #FFFFFF!important;
}
.week-number {
color: #FFF!important;
background-color: #133E87;
border: 0px!important;
margin-bottom: 10px!important;
padding: 2px;
}
- type: custom:mini-media-player
entity: media_player.keuken_2
icon: lucide:music
artwork: cover
hide:
volume: true
source: true
power_state: true
controls: true
power: true
progress: true
visibility:
- condition: state
entity: media_player.keuken_2
state: playing
card_mod:
style: |
ha-card {
left: 340px;
top: 250px;
font-weight: 300!important;
font-size: 16px;
width: 350px;
opacity: 0.5;
}
- type: custom:mini-media-player
entity: media_player.kantoor
icon: lucide:music
artwork: cover
hide:
volume: true
source: true
power_state: true
controls: true
power: true
progress: true
visibility:
- condition: state
entity: media_player.kantoor
state: playing
card_mod:
style: |
ha-card {
left: 350px;
top: 250px;
font-weight: 300!important;
font-size: 16px;
z-index: 100000000000000;
width: 350px;
opacity: 0.8;
}
- type: custom:digital-clock
dateFormat:
weekday: long
day: 2-digit
month: long
timeFormat:
hour: 2-digit
minute: 2-digit
card_mod:
style: |
ha-card {
text-align: right!important;
font-weight: 300!important;
padding: 8px 0px;
background: transparent;
border: 0px;
color: rgb(255, 255, 255);
position: absolute;
right: 90px;
bottom: 70px;
}
.first-line {
font-size: 7em!important;
font-weight: 900;
}
.second-line {
font-size: 1.1em!important;
}
- show_current: true
show_forecast: false
type: weather-forecast
entity: weather.forecast_thuis
forecast_type: daily
name: ' '
card_mod:
style: |
ha-card {
top: 390px!important;
background-color: transparent;
position: fixed;
color: #FFFFFF;
font-weight: 300;
height: 150px!important;
right: 40px;
border: 0px;
columns: 2;
width: auto;
float: right;
}
.attribute {
color: #FFFFFF!important;
display: none;
}
.state {
overflow: visible!important;
}
.temp-attribute {
text-align: left;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
font-weight: 900;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.person1
content_info: none
use_entity_picture: true
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
- type: entity
entity: person.person2
use_entity_picture: true
content_info: none
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
- type: template
entity: sensor.afvalwijzer_next_type
tap_action:
action: navigate
navigation_path: '#afval'
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% set state=states('sensor.afvalwijzer_next_type') %}
{% if state=='pmd' %}
orange
{% elif state=='restafval' %}
grey
{% else %}
#A5B68D
{% endif %}
}
ha-card:after {
content: "{{states("sensor.afvalwijzer_next_in_days") | capitalize}}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
border-radius: 100%;
top: -5px;
width: 50%;
height: 50%;
font-size: 0.3em;
right: -5px;
}
icon: |
{% set state=states('sensor.afvalwijzer_next_type') %}
{% if state=='pmd' %}
fas:bottle-water
{% elif state=='restafval' %}
mdi:trash-can
{% else %}
lucide:banana
{% endif %}
icon_color: |-
{% set state=states('sensor.afvalwijzer_next_type') %}
{% if state=='pmd' %}
white
{% elif state=='restafval' %}
white
{% else %}
white
{% endif %}
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.postnl_delivery
above: 0
chip:
type: template
icon: lucide:package
icon_color: white
tap_action:
action: navigate
navigation_path: '#post'
card_mod:
style: |
ha-card {
--chip-background:
{% set state=states('sensor.postnl_delivery') %}
{% if state=='1' %}
orange
{% else %}
#A5B68D;
{% endif %}
}
ha-card:after {
{% if states('sensor.postnl_delivery') | float(0) > 0 %}
content: "{{ states('sensor.postnl_delivery') | string }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: #FFF!important;
font-weight: 900;
border-radius: 100%;
top: -5px;
width: 50%;
height: 50%;
font-size: 0.3em;
right: -5px;
{% else %}
display: none;
{% endif %}
}
card_mod:
style: |
ha-card {
bottom: 18px!important;
position: fixed;
color: #FFFFFF;
left: 25px;
}
style:
wallpanel-screensaver-info-box:
font-size: 3vh
font-weight: 600
color: '#eeeeee'