Thanks for developing the card 
Is there a way to make the images dynamic based off another sensor? Eg it shows a different picture if the car is plugged in compared to when it isn’t?
Great card! That is the most configurable card I’ve ever used, and especially that all the config happens through UI instead of YAML.
Sharing my configuration for inspiration / feedback.
3 Likes
I would like to share a “messages”-style GUI within the Vehicle Status Card, with the ability to dismiss each message individually.
Ford provides a form of custom messaging, which appears to be used mainly for critical or safety-related notifications, such as low tire pressure. These messages are exposed via an entity attribute from the FordPass custom integration.
The integration also provides an action for messages removal.
Even if you don’t use FordPass, this approach can still serve as a useful design idea.
I believe this can be implemented in several ways. In my case, I used flex-table-card.
The key trick was to make only the Dismiss button respond to pointer events. Pointer events are blocked at the cell level and re-enabled only for the button itself.
I also adjusted the styling to make the component visually closer to the Vehicle Status Card.
Here is a code:
type: custom:flex-table-card
strict: true
card_mod:
style: |
ha-card {background-color: transparent !important}
css:
table+: >-
border-radius: var(--ha-card-border-radius, 12px); border-collapse:
collapse; background: var(--ha-card-background-color,
var(--secondary-background-color));
tbody tr:nth-child(odd):
background-color: none
tbody tr:nth-child(even):
background-color: none
tbody tr+: "pointer-events: none; border-top: 1px solid var(--divider-color, #444);"
tbody td: >-
padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom:
8px;
thead th: "padding: 8px 16px"
entities:
include: sensor.fordpass_wf0fxxwpcfla25086_messages
columns:
- name: ID
data: json_src.messageId
hidden: true
- name: Messages
tap_action:
action: perform-action
perform_action: fordpass.delete_message
target: {}
data:
msgid: col[0]
confirmation:
text: |
Are you sure?
data: json_src
multi_delimiter: <br>
modify: >
var t = Date.parse(x.createdDate); var date = new Date(t); '<div
style="margin-bottom: 4px;font-weight: var(--ha-font-weight-medium)"><u>'
+ x.messageSubject + "</u></div>" + x.messageBody + '<div
style="margin-top: 4px;">' +
'<div style="float:right">' +
'<button style="pointer-events: auto;cursor: pointer;">Dismiss</button>' +
'</div>' +
'<div style="margin-top: 8px; float:left; text-align: right; font-size: var(--ha-font-size-xs)">' +
date.getFullYear() + "‑" + String(date.getDate()).padStart(2,'0') + "‑" + (String(date.getMonth()+ 1).padStart(2,'0')) +
" "+ String(date.getHours()).padStart(2,'0') + ":" + String(date.getMinutes()).padStart(2,'0') +
'</div>' +
'</div>'
1 Like
I have a question about the buttons and subcards here.
I have a button with subcard configuration : default, that one has a small title “info”
I have a seccond button with subcard configuration: custom cards, with in it some tiles… can i have that same “title” there too? i need a title 
Is it also possible to show in the tile, the state of a second entity? Thx in advance!
Hi, I don’t quite understand your question. If you mean customizing the button, then for primary info (top row) template, set whatever you want. For secondary info, you can also have a template.
But I see that there is currently a bug in the card, the button for adding a template option is missing 
I will add a fix for this bug as soon as possible.
1 Like
hi
yes thats one of it. Thx for fixing.
The second is a title i want here:
I am trying to get the charging icon showing when the car is actually charging.
I can see that sensor.vw_charging_state = Charging while charging, but the icon doesn’t show.
This is my code:
- energy_level:
entity: sensor.vw_battery_level
tap_action:
action: more-info
value_alignment: start
value_position: inside
range_level:
entity: sensor.vw_electric_range
value_position: outside
charging_entity: sensor.vw_charging_state
charging_template: Charging
progress_color: "#0080c0"
color_blocks: false
color_thresholds: []
charge_target_entity: sensor.vw_battery_target_charge_level
charge_target_tooltip: true
Any suggestions on what I’m doing wrong?
Hi, the charging_template is in jinja and return true value so…
charging_template: |
{{ is_state('sensor.vw_charging_state', 'charging') }}
Try it in the developer tools editor to see what result it returns.
1 Like
Thanks for clarifying. Works like a charm!
How do I embed this card in the vehicle card? Or is it already part of it and if so where?
OK, found it. but how to get this in as a menu item?