Salut tout le monde.
Je partage le code d’une carte picture-elements réalisée pour ma voiture, une Ford Focus Estate (integration Fordpass HACS).
Je ne suis pas à l’origine du code, que j’ai lourdement modifié. Voici le lien dans lequel vous retrouverez:
- le code d’origine
- le code modifié
- le lien pour les fichiers d’images
Le code FORDpass ici:
########################
### 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_image_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_image_focus_rear_lights.svg
style:
animation: blink 1s 2
top: 50%
left: 50%
width: 143%
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: 27%
- left: 13%
- type: custom:decluttering-card
template: dcl_ford_card_tires
variables:
- attribute: rightFrontTirePressure
- top: 27%
- left: 87%
- type: custom:decluttering-card
template: dcl_ford_card_tires
variables:
- attribute: outerLeftRearTirePressure
- top: 73%
- left: 13%
- type: custom:decluttering-card
template: dcl_ford_card_tires
variables:
- attribute: outerRightRearTirePressure
- top: 73%
- 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: custom:config-template-card
entities:
- sensor.fordpass_fuel
variables:
- states['sensor.fordpass_fuel'].attributes.fuelLevel
element:
type: state-icon
entity: sensor.fordpass_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.fordpass_fuel
variables:
- states['sensor.fordpass_fuel'].attributes.fuelLevel
element:
type: state-label
entity: sensor.fordpass_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.tplt_fordpass_fuel_distancetoempty_value
prefix: 'Carburant: '
suffix: ' km'
style:
transform: none
top: 89%
left: 20%
# ExhaustFluid
- type: custom:config-template-card
entities:
- sensor.fordpass_exhaustfluidlevel
variables:
- states['sensor.fordpass_exhaustfluidlevel'].attributes.exhaustFluidLevel.value
element:
type: state-icon
entity: sensor.fordpass_exhaustfluidlevel
style:
transform: none
top: 93.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.fordpass_exhaustfluidlevel
variables:
- states['sensor.fordpass_exhaustfluidlevel'].attributes.exhaustFluidLevel.value
element:
type: state-label
entity: sensor.fordpass_exhaustfluidlevel
style:
transform: none
top: 94%
left: 8%
color: |-
"${
vars[0]>=30 ? 'var(--primary-text-color)'
: vars[0]>=15 ? 'var(--warning-color)'
: 'var(--error-color)'
}"
- type: state-label
entity: sensor.tplt_fordpass_exhaustfluidlevel_urearange_value
prefix: 'AdBlue: '
suffix: ' km'
style:
transform: none
top: 94%
left: 20%
# Tires Status OK
- 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 Actions =================================================================================
- 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
- 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
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.vehicle_card_helper_ford_focus
double_tap_action:
action: none
# Logo
- type: image
title: null
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 ###
##############################
# ### FORD ==================================================================================================
# # 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: strobe 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'
# }"
Version BMW (BMW Connected Drive):
N’hésitez pas à commenter, et/ou partager vos cartes ! @+
