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.