Spent ages this weekend building a nice dashboard for my new EV using;
Used a few template sensors to help with extracting info from entities provided by the HACS VW integration.
I’m sure it can be improved, but I like it so far.
Great Dashboard - do you mind sharing the code?
Sure, any specific cards?
I’ve updated it a little since to show the Octopus charge slots allocated, fixed some problems with the AC departure timer displays so that it handles single and recurring schedules and added lease mileage calculations.
If you don’t mind, the complete card? I’m just starting with dashboards and I’m glad having examples to use them as orientation.
Nice dashboard, would you mind sharing the yaml code?
Any chance of sharing the dashboard yaml? Looking to implement something similar.
How did you get the data from your ID.4 into HA? I have an ID.4 and have yet to figure out an integration into HA.
Hi Brian,
I’m using this HACS Component:
Works great (at least in EU).
Hi, happy to share config for any cards, how they work and the supporting bits and bobs, but many are using template sensors that are defined in config.yaml, so its not really possible to share the whole thing as a single item.
Hi,
Can you share the card for the auto departure climate schedule ?
Thank a lot.
Hi,
The card uses Paper Buttons Row from HACS.
The VW integration provides a switch entity for each AC timer with attributes specifying whether the timer is recurring or single, along with the data/time.
Thats quite difficult to work with directly, so I used template sensors to pull the data out of the attributes into dedicated entities:
So each switch entity then has 3 template sensors
Timer type (recurring or single)
template:
- name: 'VW ID4 Timer 1 Type'
state: "{{ state_attr('switch.id4_ac_departure_timer_1', 'timer_type') }}"
A list of days of the week when the timer is active.
- name: "VW ID4 Timer 1 Active Days"
state: >-
{% set timer_type = state_attr('switch.id4_ac_departure_timer_1', 'timer_type') %}
{% set recurring_on = state_attr('switch.id4_ac_departure_timer_1', 'recurring_on') %}
{% set start_time = state_attr('switch.id4_ac_departure_timer_1', 'start_time') %}
{% if timer_type == "recurring" %}
{% set formatted_days = recurring_on | map('regex_replace', 's$', '') | join(', ') %}
{{ formatted_days }}
{% elif timer_type == "single" %}
{% set scheduled_day = as_timestamp(start_time) | timestamp_custom('%A') | lower %}
{{ scheduled_day }}
{% else %}
unknown
{% endif %}
The start time of the timer
- name: 'VW ID4 Timer 1 Start Time'
state: "{{ state_attr('switch.id4_ac_departure_timer_1', 'start_time') }}"
The the card config, displays each day in green/amber/grey depending on whether the time is active on that day and whether its a single or recurring schedule.
type: entities
entities:
- type: custom:paper-buttons-row
buttons:
- entity: sensor.vw_id4_timer_1_start_time
layout: icon_name_state
icon: mdi:clock-outline
name: Mon
state: >-
{{ states('sensor.vw_id4_timer_1_start_time') if 'monday' in
states('sensor.vw_id4_timer_1_active_days') else '—' }}
styles:
button:
- background: |-
{% if 'monday' in states('sensor.vw_id4_timer_1_active_days') %}
{% if is_state_attr('switch.id4_ac_departure_timer_1', 'timer_type', 'recurring') %}
green
{% else %}
orange
{% endif %}
{% else %}
gray
{% endif %}
- color: >-
{% if 'monday' in states('sensor.vw_id4_timer_1_active_days') %}
white {% else %} black {% endif %}
- font-size: 12px
- border-radius: 10px
- padding: 8px
layout:
- gap: 2px
- justify-content: center
- entity: sensor.vw_id4_timer_1_start_time
layout: icon_name_state
icon: mdi:clock-outline
name: Tue
state: >-
{{ states('sensor.vw_id4_timer_1_start_time') if 'tuesday' in
states('sensor.vw_id4_timer_1_active_days') else '—' }}
styles:
button:
- background: >-
{% if 'tuesday' in states('sensor.vw_id4_timer_1_active_days')
%}
{% if is_state_attr('switch.id4_ac_departure_timer_1', 'timer_type', 'recurring') %}
green
{% else %}
orange
{% endif %}
{% else %}
gray
{% endif %}
- color: >-
{% if 'tuesday' in states('sensor.vw_id4_timer_1_active_days')
%} white {% else %} black {% endif %}
- font-size: 12px
- border-radius: 10px
- padding: 8px
layout:
- gap: 2px
- justify-content: center
- entity: sensor.vw_id4_timer_1_start_time
layout: icon_name_state
icon: mdi:clock-outline
name: Wed
state: >-
{{ states('sensor.vw_id4_timer_1_start_time') if 'wednesday' in
states('sensor.vw_id4_timer_1_active_days') else '—' }}
styles:
button:
- background: >-
{% if 'wednesday' in states('sensor.vw_id4_timer_1_active_days')
%}
{% if is_state_attr('switch.id4_ac_departure_timer_1', 'timer_type', 'recurring') %}
green
{% else %}
orange
{% endif %}
{% else %}
gray
{% endif %}
- color: >-
{% if 'wednesday' in states('sensor.vw_id4_timer_1_active_days')
%} white {% else %} black {% endif %}
- font-size: 12px
- border-radius: 10px
- padding: 8px
layout:
- gap: 2px
- justify-content: center
- entity: sensor.vw_id4_timer_1_start_time
layout: icon_name_state
icon: mdi:clock-outline
name: Thu
state: >-
{{ states('sensor.vw_id4_timer_1_start_time') if 'thursday' in
states('sensor.vw_id4_timer_1_active_days') else '—' }}
styles:
button:
- background: >-
{% if 'thursday' in states('sensor.vw_id4_timer_1_active_days')
%}
{% if is_state_attr('switch.id4_ac_departure_timer_1', 'timer_type', 'recurring') %}
green
{% else %}
orange
{% endif %}
{% else %}
gray
{% endif %}
- color: >-
{% if 'thursday' in states('sensor.vw_id4_timer_1_active_days')
%} white {% else %} black {% endif %}
- font-size: 12px
- border-radius: 10px
- padding: 8px
layout:
- gap: 2px
- justify-content: center
- entity: sensor.vw_id4_timer_1_start_time
layout: icon_name_state
name: Fri
icon: mdi:clock-outline
state: >-
{{ states('sensor.vw_id4_timer_1_start_time') if 'friday' in
states('sensor.vw_id4_timer_1_active_days') else '—' }}
styles:
button:
- background: |-
{% if 'friday' in states('sensor.vw_id4_timer_1_active_days') %}
{% if is_state_attr('switch.id4_ac_departure_timer_1', 'timer_type', 'recurring') %}
green
{% else %}
orange
{% endif %}
{% else %}
gray
{% endif %}
- color: >-
{% if 'friday' in states('sensor.vw_id4_timer_1_active_days') %}
white {% else %} black {% endif %}
- font-size: 12px
- border-radius: 10px
- padding: 8px
layout:
- gap: 2px
- justify-content: center
- entity: sensor.vw_id4_timer_1_start_time
layout: icon_name_state
name: Sat
icon: mdi:clock-outline
state: >-
{{ states('sensor.vw_id4_timer_1_start_time') if 'saturday' in
states('sensor.vw_id4_timer_1_active_days') else '—' }}
styles:
button:
- background: >-
{% if 'saturday' in states('sensor.vw_id4_timer_1_active_days')
%}
{% if is_state_attr('switch.id4_ac_departure_timer_1', 'timer_type', 'recurring') %}
green
{% else %}
orange
{% endif %}
{% else %}
gray
{% endif %}
- color: >-
{% if 'saturday' in states('sensor.vw_id4_timer_1_active_days')
%} white {% else %} black {% endif %}
- font-size: 12px
- border-radius: 10px
- padding: 8px
layout:
- gap: 2px
- justify-content: center
- entity: sensor.vw_id4_timer_1_start_time
layout: icon_name_state
name: Sun
icon: mdi:clock-outline
state: >-
{{ states('sensor.vw_id4_timer_1_start_time') if 'sunday' in
states('sensor.vw_id4_timer_1_active_days') else '—' }}
styles:
button:
- background: |-
{% if 'sunday' in states('sensor.vw_id4_timer_1_active_days') %}
{% if is_state_attr('switch.id4_ac_departure_timer_1', 'timer_type', 'recurring') %}
green
{% else %}
orange
{% endif %}
{% else %}
gray
{% endif %}
- color: >-
{% if 'sunday' in states('sensor.vw_id4_timer_1_active_days') %}
white {% else %} black {% endif %}
- font-size: 12px
- border-radius: 10px
- padding: 8px
layout:
- gap: 2px
- justify-content: center
state_color: false
Thats it I think.
Ui design looks great
Hi,
Would you mind sharing the card “Battery, Range and Charging power”?
Thanks in advance.
Very nice dashboard.
Really great dashboard, it would be great if you would share the code.
for the template "start time of the timer, i think it will not completely work for most.
I had to change the template a bit. It would be something like:
{{ as_timestamp(state_attr('switch.id4_ac_departure_timer_1', 'start_time')) | timestamp_custom('%H:%M') }}
As this template gave me a timestamp like: “2025-02-17T20:40:00” and we need “20:40” i think.
I can use some help myself: I am wondering how you get the titles of the different cards, including the icon’s and the state?
the text in white i mean.
*** oh nevermind, found it. The modern ‘heading card’ allows for icon’s and entity states to be added…
I have a VW ID3 and created a dashboard for my iPad. I implemented it using the Volkswagen Connect integration. The theme is Noctis. I used the following cards: picture entity with card mod, entity card with card mod, custom weather card, custom button card, clock card, and bubble card.
Hi, I have just picked up an ID.3 and was looking for inspiration for a dashboard and I love what you have put together, both visually and what you have included.
Please can you share a couple of the cards to get me started, specifically the Overview and Charging cards. Mine is also lease, on your ‘Lease Mileage’, how have you calculated the ‘Over Limit’ ‘Under Limit’? Are you working it out down to a single day or is it based on weeks or months into the lease?
