This is great! Glad there are people like you and @tmack8001 looking to improve upon other people’s work and share it back to the community.
I’ve been meaning to help some people with their requests of tracing their cars but life has gotten in the way. I might just put some effort into tracing generic vehicles types so that people can use the card even if it’s not a representation of their actual vehicle.
Agreed! You already made some amount of cars; have not checked all of them, have no idea if these examples can cover all popular types.
The only problem here could be a color… Assume some user found a similar SUV car in Figma (your examples, for instance) - but with a different color.
I wonder is there any way to take a PNG file for a red car and colorize it to my favourite Mazda “Blue reflex mica”… Simple masks may be transformed by “Hue / Saturation / etc” tools, but a car image is more complex.
If I make the generic vehicles simple enough I might just be able to modify the color of the SVGs using CSS. I’ll try something and post any results here.
Btw, if these images are used as SVG in a DOM structure - then users can set ANY color by card-mod, right?
Currently only parts like “tire”, “open door” etc are presented as SVG in your Figma project (at least for Hyundai Santa Fe); the “main” car image is PNG.
Update: hmmm, even SVG-files are presented as images in DOM:
So, no way to style them as SVG element by card-mod…
Found it!
The car’s PNG should be presented as TWO images:
– windows, dark frames, lights etc
– everything else - and THIS part we can color.
Check these two cars:
A black (!!!) image may be converted to another color by using a chain of filters - below filters for those 2 cars:
invert(18%) sepia(7%) saturate(6087%) hue-rotate(165deg) brightness(100%) contrast(92%)
invert(98%) sepia(3%) saturate(2062%) hue-rotate(316deg) brightness(96%) contrast(105%)
A chain may be generated here: https://codepen.io/sosuke/pen/Pjoqqp
So, a user may generate his own chain of filters and then use it with card-mod (or with a conventional “state_filter” option).
A similar approach is described here. A basic color here is red.
I am not an expert in filters - so these long chains of filters seem a bit weird for me; but if it works - then OK.
can you share your latest config? I tried using the one you have on GH but I’m not sure this is supposed to look like this:
Hi, first of all, i’d like too say: thanks a lot for your card Genosonic!! Really.
I hate you, cause i spent so much time on this, but thank you XD
I have a Ford Focus Estate, and made some (lot of) changes to your initial code. I think i’m done with this ( liiiiiiiies), so i can share my code and files!
Wil be happy to read comments or improvements. I tried to comment the code properly.
Adds:
########################
### CARD: Ford Focus ###
########################
# Original Design: @genosonic / https://community.home-assistant.io/t/generic-vehicle-card/397844
# This card uses:
# - HACS "fordpass" integration https://github.com/itchannel/fordpass-ha
# - HACS "Decluttering Card" ( templates at the end of this card) https://github.com/custom-cards/decluttering-card
# - HACS "Honeycom Menu" https://github.com/Sian-Lee-SA/honeycomb-menu
# - HACS "card-mod" https://github.com/thomasloven/lovelace-card-mod
# - HACS "state-switch" https://github.com/thomasloven/lovelace-state-switch
# - YAML anchors
### =========================================================================================================
type: picture-elements
image: /local/images/vehicle_card/vehicle_card_vertical_base_500x920.svg
style: |
@keyframes blink {
20% {opacity: 100;}
50% {opacity: 0;}
80% {opacity: 100;}
}
@keyframes run {
from {transform: rotate(0deg);}
to {transform: rotate(10deg);}
}
@keyframes tech {
0% {opacity: 0;}
100% {opacity: 0;}
}
elements:
### CIRCLES ANIMATIONS ======================================================================================
# SleepMode status
- type: conditional
conditions:
- entity: sensor.fordpass_deepsleepinprogress
state: 'True'
elements:
- type: image
image: /local/images/vehicle_card/vehicle_card_circles_light.svg
dark_mode_image: /local/images/vehicle_card/vehicle_card_circles_dark.svg
style:
animation: blink 4s infinite
<<: &cogweel
transform: none
top: 10.9%
left: '-21.7%'
width: 143.5%
# Ignition Status
- type: conditional
conditions:
- entity: sensor.fordpass_ignitionstatus
state_not: Run
- entity: sensor.fordpass_deepsleepinprogress
state_not: 'True'
elements:
- type: image
image: /local/images/vehicle_card/vehicle_card_circles_light.svg
dark_mode_image: /local/images/vehicle_card/vehicle_card_circles_dark.svg
style:
animation: run 2s
<<: *cogweel
- type: conditional
conditions:
- entity: sensor.fordpass_ignitionstatus
state: Run
elements:
- type: image
image: /local/images/vehicle_card/vehicle_card_circles_light.svg
dark_mode_image: /local/images/vehicle_card/vehicle_card_circles_dark.svg
style:
animation: run 0.7s linear infinite
<<: *cogweel
### TOP =====================================================================================================
# Logo (see end of code)
# Update time
- type: state-label
entity: sensor.tplt_last_refresh_ford_focus
style:
transform: translate(-50%,-0%) #!important
top: 0.5%
left: 50%
# Tracker
- type: state-label
entity: sensor.tplt_device_tracker_alisecell
prefix: 'Localisation: '
style:
transform: translate(-50%,-0%) #!important
top: 4%
left: 50%
### UNLOCKED ================================================================================================
- type: conditional
conditions:
- entity: lock.fordpass_doorlock
state_not: 'locked'
elements:
- type: image
image: /local/images/vehicle_card/vehicle_card_redalert_circle.svg
style:
top: 50%
left: 50%
width: 100%
animation: blink 1s infinite
### GLOBAL ==================================================================================================
- type: custom:state-switch
style:
top: 50%
left: 50%
width: 100%
entity: binary_sensor.tplt_ford_focus_detailed_view
default: 'off'
transition: slide-left # transitions: flip-x/y ; slide-left/right/up/down ; swap-left/right/up/down
transition_time: 400
states:
# Overall ---------------------------------------------------------------------------------------------
'off':
type: picture-elements
image: /local/images/blank_500x920.svg
elements:
- type: image
image: /local/images/ford/ford_focus_rear.webp
style:
top: 47%
left: 50.7%
width: 176.2%
- type: conditional
conditions:
- entity: sensor.fordpass_ignitionstatus
state: 'Run'
elements:
- type: image
image: /local/images/ford/ford_focus_rear_lights.svg
style:
animation: blink 1s 2
top: 50%
left: 50%
width: 143%
card_mod: # https://github.com/thomasloven/lovelace-card-mod
style: |
ha-card {
background: none;
border: none;
}
# Detailed --------------------------------------------------------------------------------------------
'on':
type: picture-elements
image: /local/images/blank_500x920.svg
elements:
- type: image
image: /local/images/vehicle_card/vehicle_card_generic.svg
style:
top: 50%
left: 50%
width: 130%
# Tire Pressure Status
- type: custom:decluttering-card
template: dcl_ford_card_tires
variables:
- attribute: leftFrontTirePressure
- top: 28%
- left: 13%
- type: custom:decluttering-card
template: dcl_ford_card_tires
variables:
- attribute: rightFrontTirePressure
- top: 28%
- left: 87%
- type: custom:decluttering-card
template: dcl_ford_card_tires
variables:
- attribute: outerLeftRearTirePressure
- top: 72%
- left: 13%
- type: custom:decluttering-card
template: dcl_ford_card_tires
variables:
- attribute: outerRightRearTirePressure
- top: 72%
- left: 87%
# Doors
- type: custom:decluttering-card
template: dcl_ford_card_lids
variables:
- item: door_fl
- type: custom:decluttering-card
template: dcl_ford_card_lids
variables:
- item: door_fr
- type: custom:decluttering-card
template: dcl_ford_card_lids
variables:
- item: door_rl
- type: custom:decluttering-card
template: dcl_ford_card_lids
variables:
- item: door_rr
- type: custom:decluttering-card
template: dcl_ford_card_lids
variables:
- item: door_hood
- type: custom:decluttering-card
template: dcl_ford_card_lids
variables:
- item: door_trunk
# Windows
- type: conditional
conditions:
- entity: binary_sensor.tplt_ford_focus_door_fl
state: 'off'
elements:
- type: custom:decluttering-card
template: dcl_ford_card_lids
variables:
- item: window_fl
- type: conditional
conditions:
- entity: binary_sensor.tplt_ford_focus_door_fr
state: 'off'
elements:
- type: custom:decluttering-card
template: dcl_ford_card_lids
variables:
- item: window_fr
- type: conditional
conditions:
- entity: binary_sensor.tplt_ford_focus_door_rl
state: 'off'
elements:
- type: custom:decluttering-card
template: dcl_ford_card_lids
variables:
- item: window_rl
- type: conditional
conditions:
- entity: binary_sensor.tplt_ford_focus_door_rr
state: 'off'
elements:
- type: custom:decluttering-card
template: dcl_ford_card_lids
variables:
- item: window_rr
card_mod:
style: |
ha-card {
background: none;
border: none;
}
### BOTTOM =========================================================================================
# Fuel
- type: state-icon
entity: sensor.fordpass_fuel
state_color: false
style:
transform: none
top: 88.5%
left: 1%
- type: state-label
entity: sensor.fordpass_fuel
style:
transform: none
top: 89%
left: 8%
- type: state-label
entity: sensor.tplt_fordpass_fuel_distancetoempty_value
prefix: 'Carburant: '
suffix: ' km'
style:
transform: none
top: 89%
left: 20%
# ExhaustFluid
- type: state-icon
entity: sensor.fordpass_exhaustfluidlevel
state_color: false
style:
transform: none
top: 93.5%
left: 1%
- type: state-label
entity: sensor.fordpass_exhaustfluidlevel
style:
transform: none
top: 94%
left: 8%
- type: state-label
entity: sensor.tplt_fordpass_exhaustfluidlevel_urearange_value
prefix: 'AdBlue: '
suffix: ' km'
style:
transform: none
top: 94%
left: 20%
# Tires Status LOW
- type: conditional
conditions:
- entity: sensor.tplt_tire_pressure_ford_focus
state: 'OK'
elements:
- type: state-icon
entity: sensor.tplt_tire_pressure_ford_focus
case: first
style:
<<: &tires_a
transform: none
top: 88.5%
left: 70%
opacity: 0.05
- type: state-label
entity: sensor.tplt_tire_pressure_ford_focus
style:
<<: &tires_b
transform: none
top: 89%
left: 77%
opacity: 0.05
# Tires Status LOW
- type: conditional
conditions:
- entity: sensor.tplt_tire_pressure_ford_focus
state: 'Faible'
elements:
- type: state-icon
entity: sensor.tplt_tire_pressure_ford_focus
case: first
style:
<<: *tires_a
animation: blink 2s infinite
'--paper-item-icon-color': var(--warning-color)
- type: state-label
entity: sensor.tplt_tire_pressure_ford_focus
style:
<<: *tires_b
color: var(--warning-color)
# Tires Status CRITICAL
- type: conditional
conditions:
- entity: sensor.tplt_tire_pressure_ford_focus
state: 'Urgent'
elements:
- type: state-icon
entity: sensor.tplt_tire_pressure_ford_focus
style:
<<: *tires_a
animation: blink 1s infinite
'--paper-item-icon-color': var(--error-color)
- type: state-label
entity: sensor.tplt_tire_pressure_ford_focus
case: first
style:
<<: *tires_b
color: var(--error-color)
# mileage/odometer
- type: state-icon
entity: sensor.fordpass_odometer
state_color: false
style:
transform: none
top: 93.5%
left: 70%
- type: state-label
entity: sensor.fordpass_odometer
style:
transform: none
top: 94%
left: 77%
### HONEYCOMB tap action image ==============================================================================
- type: image
tooltip: false
image: /local/images/vehicle_card/vehicle_card_vertical_light.svg
style:
top: 50%
left: 50%
width: 100%
animation: tech 2s infinite
tap_action:
action: call-service
service: honeycomb
service_data:
entity: null
active: false
autoclose: true
audio: null
size: 300
spacing: 4
animation_speed: 50
buttons:
# button 1
- skip
# button 2
- skip
# button 3
- icon: mdi:lock-check
color: var(--subtext1)
tap_action:
action: call-service
service: lock.lock
service_data:
entity_id: lock.fordpass_doorlock
# button 4
- skip
# button 5
- icon: mdi:engine
color: var(--subtext1)
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.fordpass_ignition_switch
# button 6
- icon: mdi:lock-open-variant-outline
color: var(--subtext1)
tap_action:
action: call-service
service: lock.unlock
service_data:
entity_id: lock.fordpass_doorlock
double_tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.vehicle_card_helper_ford_focus
hold_action:
action: none
# Logo
- type: image
tooltip: false
image: /local/images/ford/ford_logo_pass.png
style:
transform: none
top: 3.5%
left: 7%
width: 10%
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.navigate
data:
path: /nova-dashboard/map
hold_action: none
##############################
### DECLUTTERING TEMPLATES ###
##############################
# # lids
# dcl_ford_card_lids:
# element:
# type: image
# entity: binary_sensor.tplt_ford_focus_[[item]]
# state_image:
# 'on': /local/images/vehicle_card/vehicle_card_[[item]].svg
# 'off': /local/images/blank_30x30.svg
# style:
# top: 50%
# left: 50%
# width: 130%
# animation: blink 2s infinite
# # tire pressure
# dcl_ford_card_tires:
# element:
# type: custom:config-template-card
# entities:
# - sensor.fordpass_tirepressure
# variables:
# - >-
# states['sensor.fordpass_tirepressure'].attributes.[[attribute]]
# element:
# type: state-label
# entity: sensor.fordpass_tirepressure
# attribute: '[[attribute]]'
# suffix: ' bars'
# style:
# top: '[[top]]'
# left: '[[left]]'
# color: |-
# "${
# vars[0]>=2.1 ? 'var(--primary-text-color)'
# : vars[0]>=1.7 ? 'var(--warning-color)'
# : 'var(--error-color)'
# }"
# animation: |-
# "${
# vars[0]>=2.1 ? 'none'
# : vars[0]>=1.7 ? 'blink 2s infinite'
# : 'blink 1s infinite'
# }"
And some screens:
Standard view in dark mode:
I’m keeping your original MazdaCX9 top-view as a generic one: i have another car, and will maybe change mine in a few months, and i just don’t want having to rebuild the card again and again. This way, i’ll just have to change the entities (not really sure about that ^^).
Thanks again!
Thank you @genosonic for sharing this. It’s a great starting point for those without experience with picture-elements and conditionals. Also the figma designs share, that’s a treasure.
Hi, I was just working on a Ford.
Add this in your config.yaml:
i need a lot of improvement 
template:
- sensor:
- name: km_autonomia
unit_of_measurement: "KM"
icon: mdi:gas-station
state: "{{ state_attr('sensor.fordpass_fuel', 'distanceToEmpty') }}"
- name: ford_driver_window
icon: mdi:car-windshield
state: "{{ state_attr('sensor.fordpass_windowposition', 'driverWindowPosition') }}"
- name: ford_passenger_window
icon: mdi:car-windshield
state: "{{ state_attr('sensor.fordpass_windowposition', 'passWindowPosition') }}"
- name: ford_rear_left_window
icon: mdi:car-windshield
state: "{{ state_attr('sensor.fordpass_windowposition', 'rearDriverWindowPos') }}"
- name: ford_rear_right_window
icon: mdi:car-windshield
state: "{{ state_attr('sensor.fordpass_windowposition', 'rearPassWindowPos') }}"
- binary_sensor:
- name: ford_hood
state: "{{ state_attr('sensor.fordpass_doorstatus', 'hoodDoor') }}"
- name: ford_driver_door
state: "{{ state_attr('sensor.fordpass_doorstatus', 'driverDoor') }}"
- name: ford_passenger_door
state: "{{ state_attr('sensor.fordpass_doorstatus', 'passengerDoor') }}"
- name: ford_rear_left_door
state: "{{ state_attr('sensor.fordpass_doorstatus', 'leftRearDoor') }}"
- name: ford_rear_right_door
state: "{{ state_attr('sensor.fordpass_doorstatus', 'rightRearDoor') }}"
- name: ford_trunk
state: "{{ state_attr('sensor.fordpass_doorstatus', 'tailgateDoor') }}"
And then you can use them in your card, here is what I’m using for my Ford Fiesta:
type: picture-elements
elements:
- type: conditional
conditions:
- entity: binary_sensor.ford_hood
state: 'on'
elements:
- type: image
entity: binary_sensor.ford_hood
image: /local/img/cx9-top.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
entity: binary_sensor.ford_hood
image: /local/img/cx9-hood.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: binary_sensor.ford_driver_door
state: 'on'
elements:
- type: image
image: /local/img/cx9-left.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
image: /local/img/cx9-driver-door.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: binary_sensor.ford_passenger_door
state: 'on'
elements:
- type: image
image: /local/img/cx9-right.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
entity: binary_sensor.ford_passenger_door
image: /local/img/cx9-passenger-door.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: binary_sensor.ford_rear_left_door
state: 'on'
elements:
- type: image
image: /local/img/cx9-left.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
entity: binary_sensor.ford_rear_left_door
image: /local/img/cx9-rear-left-door.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: binary_sensor.ford_rear_right_door
state: 'on'
elements:
- type: image
image: /local/img/cx9-right.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
entity: binary_sensor.ford_rear_right_door
image: /local/img/cx9-rear-right-door.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: binary_sensor.ford_trunk
state: 'on'
elements:
- type: image
image: /local/img/cx9-bottom.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
entity: binary_sensor.ford_trunk
image: /local/img/cx9-trunk.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: lock.fordpass_doorlock
state: unlocked
- entity: binary_sensor.ford_driver_door
state: 'off'
- entity: binary_sensor.ford_passenger_door
state: 'off'
- entity: binary_sensor.ford_rear_left_door
state: 'off'
- entity: binary_sensor.ford_rear_right_door
state: 'off'
- entity: binary_sensor.ford_hood
state: 'off'
- entity: binary_sensor.ford_trunk
state: 'off'
elements:
- type: image
image: /local/img/cx9-all.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
image: /local/img/cx9-lock.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: state-icon
entity: lock.fordpass_doorlock
state_color: false
style:
top: 18%
left: 25%
- type: state-label
entity: lock.fordpass_doorlock
style:
top: 23.5%
left: 25%
- type: state-icon
entity: device_tracker.fordpass_tracker
state_color: false
style:
top: 18%
left: 77%
- type: state-label
entity: device_tracker.fordpass_tracker
style:
top: 23.5%
left: 77%
- type: state-icon
entity: sensor.fordpass_odometer
style:
top: 75%
left: 77%
- type: state-label
entity: sensor.fordpass_odometer
style:
top: 81%
left: 77%
- type: state-icon
entity: sensor.km_autonomia
style:
top: 75%
left: 25%
- type: state-label
entity: sensor.km_autonomia
style:
top: 81%
left: 25%
- type: state-icon
entity: sensor.ford_driver_window
style:
top: 34%
left: 13%
- type: state-label
entity: sensor.ford_driver_window
style:
top: 39.5%
left: 13%
- type: state-icon
entity: sensor.ford_rear_left_window
style:
top: 57%
left: 13%
- type: state-label
entity: sensor.ford_rear_left_window
style:
top: 62.5%
left: 13%
- type: state-icon
entity: sensor.ford_passenger_window
style:
top: 34%
left: 87%
- type: state-label
entity: sensor.ford_passenger_window
style:
top: 39.5%
left: 87%
- type: state-icon
entity: sensor.ford_rear_right_window
style:
top: 57%
left: 87%
- type: state-label
entity: sensor.ford_rear_right_window
style:
top: 62.5%
left: 87%
image: /local/img/cx9.svg
Watchout!! Your template is not ok
Here is the good syntax:
{{ state_attr('sensor.fordpass_doorstatus','rightRearDoor') }}
Look at the minus “r” ofthe attribute name
EDIT: See below for the BMW card code! (tested on ‘One series’ and ‘x2 series’)
################################
### CARD: BmW (template DCL) ###
################################
# Original Design: @genosonic / https://community.home-assistant.io/t/generic-vehicle-card/397844
# This card IS A DECLUTTERING TEMPLATE and uses:
# - "BMW Connected Drive" integration https://www.home-assistant.io/integrations/bmw_connected_drive
# - HACS "Decluttering Card" ( templates & card example at the end of this file) https://github.com/custom-cards/decluttering-card
# - HACS "Honeycom Menu" https://github.com/Sian-Lee-SA/honeycomb-menu
# - HACS "card-mod" https://github.com/thomasloven/lovelace-card-mod
# - HACS "state-switch" https://github.com/thomasloven/lovelace-state-switch
# - YAML anchors
### GLOBAL ==================================================================================================
dcl_vehicle_card_bmw: # !! This card IS A DECLUTTERING TEMPLATE !!
card:
type: picture-elements
image: /local/images/vehicle_card/vehicle_card_vertical_base_500x920.svg
style: |
@keyframes blink {
20% {opacity: 100;}
50% {opacity: 0;}
80% {opacity: 100;}
}
@keyframes tech {
0% {opacity: 0;}
100% {opacity: 0;}
}
elements:
### CIRCLES =============================================================================================
- type: image
image: /local/images/vehicle_card/vehicle_card_circles_light.svg
dark_mode_image: /local/images/vehicle_card/vehicle_card_circles_dark.svg
style:
<<: &cogweel
transform: none
top: 10.9%
left: '-21.7%'
width: 143.5%
### TOP =================================================================================================
# logo (see end of code)
# device tracker
- type: state-label
entity: sensor.tplt_device_tracker_bmw_[[serie]]
prefix: 'Localisation: '
style:
transform: translate(-50%,-0%) #!important
top: 4%
left: 50%
### UNLOCKED ============================================================================================
- type: conditional
conditions:
- entity: binary_sensor.bmw_[[serie]]_door_lock_state
state_not: 'off'
elements:
- type: image
image: /local/images/vehicle_card/vehicle_card_redalert_circle.svg
style:
top: 50%
left: 50%
width: 100%
animation: blink 1s infinite
### GLOBAL ==============================================================================================
- type: custom:state-switch
style:
top: 50%
left: 50%
width: 100%
entity: binary_sensor.tplt_bmw_[[serie]]_detailed_view
default: 'off'
transition: slide-left # transitions: flip-x/y ; slide-left/right/up/down ; swap-left/right/up/down
transition_time: 400
states:
# Overall -----------------------------------------------------------------------------------------
'off':
type: picture-elements
image: /local/images/blank_500x920.svg
elements:
- type: image
image: /local/images/bmw/bmw_image_[[serie]].png
style:
top: '[[image_top]]' # !important quoting due to dcl nesting
left: '[[image_left]]' # !important quoting due to dcl nesting
width: '[[image_width]]' # !important quoting due to dcl nesting
card_mod:
style: |
ha-card {
background: none;
border: none;
}
# Detailed ----------------------------------------------------------------------------------------
'on':
type: picture-elements
image: /local/images/blank_500x920.svg
elements:
- type: image
image: /local/images/vehicle_card/vehicle_card_generic.svg
style:
top: 50%
left: 50%
width: 130%
# Doors
- type: custom:decluttering-card
template: dcl_bmw_card_lids
variables:
- serie: '[[serie]]' # !important quoting due to dcl nesting
- item: door_fl
- type: custom:decluttering-card
template: dcl_bmw_card_lids
variables:
- serie: '[[serie]]' # !important quoting due to dcl nesting
- item: door_fr
- type: custom:decluttering-card
template: dcl_bmw_card_lids
variables:
- serie: '[[serie]]' # !important quoting due to dcl nesting
- item: door_rl
- type: custom:decluttering-card
template: dcl_bmw_card_lids
variables:
- serie: '[[serie]]' # !important quoting due to dcl nesting
- item: door_rr
- type: custom:decluttering-card
template: dcl_bmw_card_lids
variables:
- serie: '[[serie]]' # !important quoting due to dcl nesting
- item: door_hood
- type: custom:decluttering-card
template: dcl_bmw_card_lids
variables:
- serie: '[[serie]]' # !important quoting due to dcl nesting
- item: door_trunk
# Windows
- type: conditional
conditions:
- entity: binary_sensor.tplt_bmw_[[serie]]_door_fl
state: 'off'
elements:
- type: custom:decluttering-card
template: dcl_bmw_card_lids
variables:
- serie: '[[serie]]' # !important quoting due to dcl nesting
- item: window_fl
- type: conditional
conditions:
- entity: binary_sensor.tplt_bmw_[[serie]]_door_fr
state: 'off'
elements:
- type: custom:decluttering-card
template: dcl_bmw_card_lids
variables:
- serie: '[[serie]]' # !important quoting due to dcl nesting
- item: window_fr
- type: conditional
conditions:
- entity: binary_sensor.tplt_bmw_[[serie]]_door_rl
state: 'off'
elements:
- type: custom:decluttering-card
template: dcl_bmw_card_lids
variables:
- serie: '[[serie]]' # !important quoting due to dcl nesting
- item: window_rl
- type: conditional
conditions:
- entity: binary_sensor.tplt_bmw_[[serie]]_door_rr
state: 'off'
elements:
- type: custom:decluttering-card
template: dcl_bmw_card_lids
variables:
- serie: '[[serie]]' # !important quoting due to dcl nesting
- item: window_rr
card_mod:
style: |
ha-card {
background: none;
border: none;
}
### BOTTOM ==============================================================================================
# Fuel
- type: custom:config-template-card
entities:
- sensor.bmw_[[serie]]_remaining_fuel
variables:
- states['sensor.bmw_[[serie]]_remaining_fuel']
element:
type: state-icon
entity: sensor.bmw_[[serie]]_remaining_fuel
style:
transform: none
top: 88.5%
left: 1%
'--paper-item-icon-color': |-
"${
vars[0]>=30 ? 'var(--subtext0)'
: vars[0]>=15 ? 'var(--warning-color)'
: 'var(--error-color)'
}"
animation: |-
"${
vars[0]>=30 ? 'none'
: vars[0]>=15 ? 'blink 2s infinite'
: 'blink 1s infinite'
}"
- type: custom:config-template-card
entities:
- sensor.bmw_[[serie]]_remaining_fuel
variables:
- states['sensor.bmw_[[serie]]_remaining_fuel']
element:
type: state-label
entity: sensor.bmw_[[serie]]_remaining_fuel
style:
transform: none
top: 89%
left: 8%
color: |-
"${
vars[0]>=30 ? 'var(--primary-text-color)'
: vars[0]>=15 ? 'var(--warning-color)'
: 'var(--error-color)'
}"
- type: state-label
entity: sensor.bmw_[[serie]]_remaining_range_fuel
prefix: 'Autonomie: '
style:
transform: none
top: 89%
left: 20%
# Check Control Status OK
- type: conditional
conditions:
- entity: binary_sensor.bmw_[[serie]]_check_control_messages
state: 'off'
elements:
- type: state-icon
entity: binary_sensor.bmw_[[serie]]_check_control_messages
case: first
style:
<<: &check_a
transform: none
top: 88.5%
left: 70%
opacity: 0.05
- type: state-label
entity: binary_sensor.bmw_[[serie]]_check_control_messages
style:
<<: &check_b
transform: none
top: 89%
left: 77%
opacity: 0.05
# Mileage
- type: state-icon
entity: sensor.bmw_[[serie]]_mileage
icon: mdi:counter
style:
transform: none
top: 93.5%
left: 70%
- type: state-label
entity: sensor.bmw_[[serie]]_mileage
style:
transform: none
top: 94%
left: 77%
### HoneyComb & Tap Actions =============================================================================
- type: custom:decluttering-card
template: dcl_bmw_card_honeycomb
variables:
- serie: '[[serie]]' # !important quoting due to dcl nesting
# Logo
- type: image
title: null
image: /local/images/bmw/bmw_logo_[[serie]].png
style:
transform: none
top: '[[logo_top]]' # !important quoting due to dcl nesting
left: '[[logo_left]]' # !important quoting due to dcl nesting
width: '[[logo_width]]' # !important quoting due to dcl nesting
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.navigate
data:
path: /nova-dashboard/map
hold_action: none
# Check Control Status NotOK
- type: conditional
conditions:
- entity: binary_sensor.bmw_[[serie]]_check_control_messages
state: 'on'
elements:
- type: state-icon
entity: binary_sensor.bmw_[[serie]]_check_control_messages
case: first
style:
<<: *check_a
animation: blink 2s infinite
'--paper-item-icon-color': var(--warning-color)
- type: state-label
entity: binary_sensor.bmw_[[serie]]_check_control_messages
style:
<<: *check_b
color: var(--warning-color)
##############################
### DECLUTTERING TEMPLATES ###
##############################
# lids
dcl_bmw_card_lids:
element:
type: image
entity: binary_sensor.tplt_bmw_[[serie]]_[[item]]
state_image:
'on': /local/images/vehicle_card/vehicle_card_[[item]].svg
'off': /local/images/blank_30x30.svg
style:
top: 50%
left: 50%
width: 130%
# honeycomb
dcl_bmw_card_honeycomb:
element:
type: image
title: null
image: /local/images/vehicle_card/vehicle_card_vertical_base_500x920.svg
style:
top: 50%
left: 50%
width: 100%
animation: tech 2s infinite
hold_action:
action: call-service
service: honeycomb
service_data:
entity: null
active: false
autoclose: true
audio: null
size: 300
spacing: 4
animation_speed: 50
buttons:
# button 1
- icon: mdi:bullhorn
color: var(--subtext1)
tap_action:
action: call-service
service: button.press
service_data:
entity_id: button.bmw_[[serie]]_sound_horn
# button 2
- icon: mdi:car-light-alert
color: var(--subtext1)
tap_action:
action: call-service
service: button.press
service_data:
entity_id: button.bmw_[[serie]]_flash_lights
# button 3
- icon: mdi:lock-check
color: var(--subtext1)
tap_action:
action: call-service
service: lock.lock
service_data:
entity_id: lock.bmw_[[serie]]_lock
# button 4
- icon: mdi:air-purifier-off
color: var(--subtext1)
tap_action:
action: call-service
service: button.press
service_data:
entity_id: button.bmw_[[serie]]_deactivate_air_conditioning
# button 5
- icon: mdi:air-filter
color: var(--subtext1)
tap_action:
action: call-service
service: button.press
service_data:
entity_id: button.bmw_[[serie]]_activate_air_conditioning
# button 6
- icon: mdi:lock-open-variant-outline
color: var(--subtext1)
tap_action:
action: call-service
service: lock.unlock
service_data:
entity_id: lock.bmw_[[serie]]_lock
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.vehicle_card_helper_bmw_[[serie]]
double_tap_action:
action: call-service
service: button.press
service_data:
entity_id: button.bmw_[[serie]]_refresh_from_cloud
##############################
### CARD example: BmW 116i ###
##############################
# type: custom:decluttering-card
# template: dcl_vehicle_card_bmw
# variables:
# - serie: 116i
# - image_top: 48%
# - image_left: 53%
# - image_width: 130%
# - logo_top: 3%
# - logo_left: 4%
# - logo_width: 20%
Yeah these overlays got messed up in a sensor name change with the HA+Rivian plugin in a recent release. I’m also looking at changing the background images over to the native ones provided by Rivian’s backend API.
Since I’m already well on my way to making my own dashboard with the beautiful examples that have been put down in this topic, I only have two requests.
Is it possible that the cx91.svg can be changed to the color Aurora Blue (Hex: #3c249c) the cupra born has this color, also is it possible that the cx9-top, cx9-right, cx9-left, cx9-bottom and cx9-all get the color green.
I can’t get it done myself, hence my request. This would complete my dashboard.
Thank you in advance.
Stirling work, Chris!
Would you be able to zip and share the image files? I don’t know a thing about figma or image editing!
I’ve got your dash replicated here other than the above card.
Excellent work!
I don’t know if am doing something wrong but my SVG images are not loading.
What’s your code?
I’ve made some modifications to the Rivian card, GitHub - tmack8001/ha-rivian-card: Rivian Card for use with Home Assistant, today that should fix a few things though now you need to explicitly setup your entity naming (find+replace-all) on the templated naming I’ve put in place now. This way you could easily update based on your device naming convention that is preferred by the integration now.
Looks like you are missing a required dependency of card-mod which will allow for the inlined CSS to resize the images appropriately.
anyone do anything similar with a Subaru vehicle?
