Here is my code:
sidebar.yaml
- sensor:
- unique_id: sidebartime
state: template
attributes:
time: >
{% set hours = now().strftime('%H') %}
{% set minutes = now().strftime('%M') %}
<span class="time">
{{ hours }}<span class="time-colon">:</span>{{ minutes }}
</span>
- unique_id: sidebar
state: template
attributes:
time: >
{% set hours = now().strftime('%H') %}
{% set minutes = now().strftime('%M') %}
<span class="time">
{{ hours }}<span class="time-colon">:</span>{{ minutes }}
</span>
date: >
<font color='#6a7377'><b>
{% if strptime(states('sensor.date'), '%Y-%m-%d').day != None %}
{% set days = ['Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag', 'Zondag'] %}
{% set months = ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni',
'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'] %}
{{ days[now().weekday()] }}
{{ strptime(states('sensor.date'), '%Y-%m-%d').day }} {{ months[now().month-1] }}
{% endif %}
</b></font>
agenda: >
<font color='#ffffff' size='4px'>
{% for i in range(0, 8) %}
{% if is_state('sensor.ical_timenmieke_event_' + i|string,'unavailable') %}
{% elif as_timestamp(state_attr('sensor.ical_timenmieke_event_' + i|string, "start"))|timestamp_custom('%-d')
== as_timestamp(now())|timestamp_custom('%-d') %}
📅   {{ as_timestamp(state_attr('sensor.ical_timenmieke_event_' + i|string, "start")) | timestamp_custom('%H:%M') }}
{{ state_attr('sensor.ical_timenmieke_event_' + i|string, "summary") }}<br>
{% endif %}
{% endfor%}
</font>
- unique_id: sidebar2
state: template
attributes:
time: >
{% set hours = now().strftime('%H') %}
{% set minutes = now().strftime('%M') %}
<span class="time">
{{ hours }}<span class="time-colon">:</span>{{ minutes }}
</span>
date: >
<font color='#6a7377'><b>
{% if strptime(states('sensor.date'), '%Y-%m-%d').day != None %}
{% set days = ['Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag', 'Zondag'] %}
{% set months = ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni',
'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'] %}
{{ days[now().weekday()] }}
{{ strptime(states('sensor.date'), '%Y-%m-%d').day }} {{ months[now().month-1] }}
{% endif %}
</b></font>
- unique_id: sidebar3
state: template
attributes:
date: >
{% if strptime(states('sensor.date'), '%Y-%m-%d').day != None %}
{% set days = ['Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag', 'Zondag'] %}
{% set months = ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni',
'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'] %}
{% set hours = now().strftime('%H') %}
{% set minutes = now().strftime('%M') %}
<span class="time">{{ hours }}<span class="time-colon">:</span>{{ minutes }} </span>
<font color='#6a7377'><b>
{{ days[now().weekday()] }}
{{ strptime(states('sensor.date'), '%Y-%m-%d').day }} {{ months[now().month-1] }}
{% endif %}
</b></font>
- unique_id: sidebar_weather
state: template
attributes:
weather: >
{% set entity = 'sensor.wupws_weather_1d' %}
{% if not is_state(entity, 'unknown') %}
{% set weather = states('sensor.wupws_weather_1d') %}
<font color='#6a7377'><b>Vandaag</font></b><br><font color='#6a7377' size='4px'>{{ weather }}</font>
{% else %}
{% set weather2 = states('sensor.wupws_weather_1n') %}
<font color='#6a7377'><b>Vanavond</font></b><br><font color='#6a7377' size='4px'>{{ weather2 }}</font>
{% endif %}
- unique_id: sidebar_vacuum
state: template
attributes:
vacuum: >
{% set entity_id = 'vacuum.dollie' %}
{% set entity_id = 'vacuum.dollie' %}
{% if is_state(entity_id, 'cleaning') %}
<b>Dollie is aan het stofzuigen</b>
{% elif is_state(entity_id, 'returning') %}
<b>Dollie is klaar</b>
{% endif %}
- unique_id: sidebar_vacuum2
state: template
attributes:
vacuum: >
{% set entity_id = 'vacuum.herman' %}
{% set entity_id = 'vacuum.herman' %}
{% if is_state(entity_id, 'cleaning') %}
<b>Herman is aan het maaien</b>
{% elif is_state(entity_id, 'returning') %}
<b>Herman gaat terug naar station</b>
{% endif %}
- unique_id: sidebar_active
state: template
attributes:
active: >
<b>
{% set lights = [
states.light.bios_spots,
states.light.eettafel,
states.light.gevellampen,
states.light.haard_licht,
states.light.inloopkast,
states.light.keuken_spots_channel_1,
states.light.keukennis_spot,
states.light.kookeiland_spots,
states.light.lamp_schuifpui,
states.light.luifel_boven,
states.light.luifel_onder_channel_1,
states.light.muurspots,
states.light.sauna,
states.light.slaapkamer_licht,
states.light.spiegel_channel_1,
states.light.tuin_lampen,
states.light.voordeur_licht,
states.light.woonkamer_licht_achter,
states.light.woonkamer_licht_voor,
states.light.zwembad_verlichting
] %}
{% set devices = [
states.media_player.samsung_the_frame_43,
states.climate.airconditioning
] %}
{% set lights_on = lights | selectattr('state','eq','on') | list %}
{% set lights_name = lights | selectattr('state','eq','on') | map(attribute='name') | join(', ') %}
{% set devices_on = devices | selectattr('state','search','(on|cool|fan_only|playing)') | list %}
{% set devices_name = devices_on | map(attribute='name') | join(', ') %}
{% if (lights_on | length == 0) and (devices_on | length > 0) %}
{{ devices_name | regex_replace(',([^,]*)$',' och\\1') }} is aan
{% elif (lights_on | length == 1) and (devices_on | length == 1) %}
{{ lights_name }} en {{devices_name }} zijn aan
{% elif (lights_on | length == 1) and (devices_on | length > 1) %}
{{ lights_name }}, {{ devices_name | regex_replace(',([^,]*)$',' och\\1') }} zijn aan
{% elif (lights_on | length > 1) and (devices_on | length == 1) %}
{{ lights_on | length }} lampen en {{ devices_name }} zijn aan
{% elif (lights_on | length > 1) and (devices_on | length > 1) %}
{{ lights_on | length }} lampen, {{ devices_name | regex_replace(',([^,]*)$',' och\\1') }} zijn aan
{% elif (lights_on | length == 1) and (devices_on | length == 0) %}
{{ lights_name }} is aan
{% elif (lights_on | length > 1) and (devices_on | length == 0) %}
{{ lights_on | length }} lampen zijn aan
{% endif %}
</b>
- unique_id: sidebar_beregening
state: template
attributes:
beregening: >
[[[
if (states['input_boolean.irrigation_cycle1_running'].state == 'on')
var cycle = 'cycle1';
else if (states['input_boolean.irrigation_cycle2_running'].state == 'on')
var cycle = 'cycle2';
else if (states['input_boolean.irrigation_cycle3_running'].state == 'on')
var cycle = 'cycle3';
else
var cycle = 'cycle0';
var zone = '{{ zone }}';
var zone_name = states['input_text.irrigation_' + zone + '_name' ].state;
var zone_timer_status = entity.state;
if (cycle == 'cycle0')
return zone_name;
else if (zone_timer_status == 'active')
return 'Watering ' + zone_name;
else
return zone_name;
]]]
lovelace-ui.yaml sidebar part
- type: vertical-stack
view_layout:
grid-area: sidebar
cards:
- type: custom:button-card
entity: sensor.template_sidebar
template: sidebar
- type: custom:button-card
entity: sensor.template_sidebar_weather
template: sidebar
- type: custom:button-card
entity: sensor.template_sidebar_vacuum
template: sidebar
tap_action:
!include popup/footer_vacuum.yaml
- type: custom:button-card
entity: sensor.template_sidebar_vacuum2
template: sidebar
- type: custom:button-card
entity: sensor.template_sidebar_active
template: sidebar
tap_action:
!include popup/active.yaml
- type: horizontal-stack
mode: horizontal
cards:
- type: custom:button-card
entity: person.tim
entity_picture: /local/timkleur2.png
show_entity_picture: true
show_name: false
tap_action:
!include popup/tim.yaml
state:
- value: 'not_home'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(90%)
template: footer2
card_mod:
style: |
ha-card {
margin: 2vh;
}
- type: custom:button-card
entity: person.mieke
entity_picture: /local/miekekleur2.png
show_entity_picture: true
show_name: false
tap_action:
!include popup/mieke.yaml
state:
- value: 'not_home'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(90%)
template: footer2
card_mod:
style: |
ha-card {
margin: 2vh;
}
card_mod:
style: |
ha-card {
border: none;
--card-height: inherit !important;
position: absolute;
bottom: 4vh;
left: 6vh;
}
@media (max-width: 400px) {
ha-card {
position: inherit;
}
}
.
