Ultra Vehicle Card: Template Mode Guide

Explore the versatility of Template Mode in your Ultra Vehicle Card. These examples demonstrate how to use Jinja2 templates to dynamically display information and control the appearance of your Info, Icon, and Bar sections. For the examples below, the "OFF" preview shows what you might see if displaying a raw entity state or a default behavior. The "ON" preview shows the result after the template is applied or how it influences the card's behavior.

Info Area Templates

Customize the text displayed in an Info Entity within an Info Row using the value_template field. When Template Mode is enabled for that Info Entity, the card will render the output of your template.

1. Conditional Charging Status

Displays a user-friendly charging status based on a binary sensor like binary_sensor.car_charging_status.

{{ 'Vehicle is Charging' if is_state('binary_sensor.car_charging_status', 'on') else 'Vehicle Not Charging' }}

Template Mode

OFFON

Displays raw state, e.g., off

Vehicle Not Charging

2. Display Range with Units

Appends 'miles' to the numeric range value from sensor.car_range.

{{ states('sensor.car_range') | int }} miles

Template Mode

OFFON

Displays raw state, e.g., 150

150 miles

3. Summarized Window Status

Shows a single 'Windows Open' message if any window (e.g., binary_sensor.car_front_left_window) is open.

{% if is_state('binary_sensor.car_front_left_window', 'on') or is_state('binary_sensor.car_front_right_window', 'on') %}
  Windows Open
{% else %}
  Windows Closed
{% endif %}

Template Mode

OFFON

Displays raw state of primary entity, e.g., off.

Windows Closed (if all example windows are off)

4. Tire Pressure Alert

Provides a clear OK or Check Tires message based on binary_sensor.car_tire_pressure_low.

{% set pressure_ok = is_state('binary_sensor.car_tire_pressure_low', 'off') %}
{{ 'Tire Pressure: OK' if pressure_ok else 'Tire Pressure: Check Tires!' }}

Template Mode

OFFON

Displays raw state, e.g., on (means pressure is low).

Tire Pressure: Check Tires!

5. Software Update Notification

Displays a notification if binary_sensor.car_software_update is active.

{{ 'Software Update Available!' if is_state('binary_sensor.car_software_update', 'on') else 'Software Up-to-date' }}

Template Mode

OFFON

Displays raw state, e.g., off.

Software Up-to-date

6. Combined Lock and Trunk Status

Consolidates lock.car_doors and binary_sensor.car_trunk status.

Doors: {{ 'Locked' if is_state('lock.car_doors', 'locked') else 'Unlocked' }}, Trunk: {{ 'Closed' if is_state('binary_sensor.car_trunk', 'off') else 'Open' }}

Template Mode

OFFON

Displays raw state of primary entity for Info Row, e.g., locked.

Doors: Locked, Trunk: Closed (based on example states)

7. Enhanced Location Display

Shows the current zone from device_tracker.car_location or 'Away'.

{% if states('device_tracker.car_location') not in ['not_home', 'unknown', 'unavailable'] %}
  Location: {{ states('device_tracker.car_location') }}
{% else %}
  Location: Away
{% endif %}

Template Mode

OFFON

Displays raw state, e.g., not_home.

Location: Away

8. Preconditioning Status Text

Clear text for switch.car_precondition.

{{ 'Climate Preconditioning Active' if is_state('switch.car_precondition', 'on') else 'Preconditioning Off' }}

Template Mode

OFFON

Displays raw state, e.g., on.

Climate Preconditioning Active

9. Formatted Last Update Time

Displays sensor.car_last_update.last_changed in a custom format.

Updated: {{ as_timestamp(states.sensor.car_last_update.last_changed) | timestamp_custom('%-I:%M %p, %b %-d') }}

Template Mode

OFFON

Example raw timestamp: 2023-10-26T10:30:55.123+00:00

Updated: 10:30 AM, Oct 26

10. Low Fuel/Battery Warning Text

Shows warning for sensor.car_fuel_level if below 15%, else shows level.

{% set level = states('sensor.car_fuel_level') | int(-1) %}
{% if level == -1 %}Unknown{% elif level < 15 %}Fuel Low!{% else %}Fuel: {{ level }}%{% endif %}

Template Mode

OFFON

Displays raw state, e.g., 10.

Fuel Low!

Icon Area Templates

Use active_template or inactive_template to define the logic (true/false) that determines if an icon uses its "active" or "inactive" appearance properties. You configure these visual properties (icons, colors, texts like active_state_text) in the card editor's UI. The "ON" preview below describes the outcome when the template logic is met, triggering the active state and potentially showing custom text you'd configure for that state.

1. Multiple Garage Door Status

This active_template is true if any of three garage doors are open. The icon's text would ideally show which one.

Utilizing: Active Template (active_template)

{{ is_state('binary_sensor.garage_door_main', 'on') or is_state('binary_sensor.garage_door_side', 'on') or is_state('binary_sensor.garage_door_workshop', 'on') }}

Card Configuration Notes:
In UI, set icon_active: mdi:garage-open-variant. For active_state_text, you might use another template like:
{%- if is_state('binary_sensor.garage_door_main', 'on') %}Main Open{% elif is_state('binary_sensor.garage_door_side', 'on') %}Side Open{% else %}Workshop Open{% endif -%} (or simplify if only one can be open).
Inactive: icon_inactive: mdi:garage, inactive_state_text: All Closed.

Template Mode

OFFON

If all doors closed, template false. Icon uses inactive properties (e.g., text "All Closed").

If binary_sensor.garage_door_main is 'on', template true. Icon uses active properties (e.g. text "Main Open").

2. Security System Detailed Status

Activates if security system is in any armed state. The text shows the specific armed mode.

Utilizing: Active Template (active_template)

{{ states('alarm_control_panel.home_security') in ['armed_home', 'armed_away', 'armed_night', 'arming'] }}

Card Configuration Notes:
In UI, set icon_active: mdi:shield-lock, color_active: red. For active_state_text, use: {{ states('alarm_control_panel.home_security') | replace('_', ' ') | title }}.
Inactive: icon_inactive: mdi:shield-off-outline, inactive_state_text: Disarmed.

Template Mode

OFFON

If system is 'disarmed', template false. Icon uses inactive properties (e.g. text "Disarmed").

If system is 'armed_away', template true. Icon uses active properties (e.g. text "Armed Away").

3. Light Brightness Level Text

Activates if light is on. Text indicates brightness level.

Utilizing: Active Template (active_template)

{{ is_state('light.living_room_lamp', 'on') }}

Card Configuration Notes:
In UI, set icon_active: mdi:lightbulb-on. For active_state_text:
{% set brightness = state_attr('light.living_room_lamp', 'brightness') | int(0) %}{% if brightness > 200 %}Bright{% elif brightness > 100 %}Medium{% else %}Dim ({{ (brightness/255*100)|round(0) }}%){% endif %}.
Inactive: icon_inactive: mdi:lightbulb-off-outline, inactive_state_text: Off.

Template Mode

OFFON

If light is 'off', template false. Icon uses inactive properties (e.g. text "Off").

If light is 'on' (e.g., brightness 150), template true. Icon uses active properties (e.g. text "Medium").

4. Thermostat Mode & Target Temperature

Activates if thermostat is heating/cooling. Text shows mode and target temperature.

Utilizing: Active Template (active_template)

{{ states('climate.main_thermostat').state in ['heating', 'cooling'] }}

Card Configuration Notes:
In UI, set icon_active: mdi:thermometer-lines. For active_state_text:
{{ states('climate.main_thermostat').state | title }} to {{ state_attr('climate.main_thermostat', 'temperature') }}°C.
Inactive: icon_inactive: mdi:thermostat-off, inactive_state_text: Idle.

Template Mode

OFFON

If thermostat is 'idle' or 'off', template false. Icon uses inactive properties (e.g. text "Idle").

If thermostat is 'heating' to 22°C, template true. Icon uses active properties (e.g. text "Heating to 22°C").

5. Media Player Status & Title

Activates if media player is playing. Text shows title and artist if available.

Utilizing: Active Template (active_template)

{{ is_state('media_player.living_room_speaker', 'playing') }}

Card Configuration Notes:
In UI, set icon_active: mdi:play-circle. For active_state_text:
Playing: {{ state_attr('media_player.living_room_speaker', 'media_title') or 'Unknown Title' }}{% if state_attr('media_player.living_room_speaker', 'media_artist') %} - {{ state_attr('media_player.living_room_speaker', 'media_artist') }}{% endif %}.
Inactive: icon_inactive: mdi:pause-circle, inactive_state_text: Paused/Stopped.

Template Mode

OFFON

If player is 'paused', template false. Icon uses inactive properties (e.g. text "Paused/Stopped").

If player is 'playing' (e.g. 'Song A - Artist B'), template true. Icon uses active properties (e.g. text "Playing: Song A - Artist B").

6. Window Open Count

Activates if any window in group.all_windows is open. Text shows count.

Utilizing: Active Template (active_template)

{{ expand('group.all_windows') | selectattr('state', 'eq', 'on') | list | count > 0 }}

Card Configuration Notes:
In UI, set icon_active: mdi:window-open-variant. For active_state_text:
{% set count = expand('group.all_windows') | selectattr('state', 'eq', 'on') | list | count %}{{ count }} Window{{ 's' if count != 1 else '' }} Open.
Inactive: icon_inactive: mdi:window-closed-variant, inactive_state_text: Secure.

Template Mode

OFFON

If all windows closed, template false. Icon uses inactive properties (e.g. text "Secure").

If 2 windows are open, template true. Icon uses active properties (e.g. text "2 Windows Open").

7. Mailbox Alert

Activates on new mail, showing a friendly message.

Utilizing: Active Template (active_template)

{{ is_state('binary_sensor.mailbox', 'on') }}

Card Configuration Notes:
In UI, set: icon_active: mdi:email-alert, active_state_text: You've Got Mail!, color_active: '#FFD700'.
Inactive: icon_inactive: mdi:email-outline, inactive_state_text: Mailbox Empty.

Template Mode

OFFON

If mailbox is 'off', template false. Icon uses inactive properties (e.g. text "Mailbox Empty").

If mailbox is 'on', template true. Icon uses active properties (e.g. text "You've Got Mail!").

8. Appliance Cycle Status

Activates if appliance (e.g., sensor.washing_machine_status) is running. Text shows current cycle.

Utilizing: Active Template (active_template)

{{ states('sensor.washing_machine_status') != 'idle' and states('sensor.washing_machine_status') != 'off' }}

Card Configuration Notes:
In UI, set icon_active: mdi:washing-machine. For active_state_text: {{ states('sensor.washing_machine_status') | title }} Cycle.
Inactive: icon_inactive: mdi:washing-machine-off, inactive_state_text: Idle.

Template Mode

OFFON

If status is 'idle', template false. Icon uses inactive properties (e.g. text "Idle").

If status is 'washing', template true. Icon uses active properties (e.g. text "Washing Cycle").

9. Plant Sensor Low Moisture Alert

Activates if binary_sensor.plant_kitchen_moisture_low indicates low moisture.

Utilizing: Active Template (active_template)

{{ is_state('binary_sensor.plant_kitchen_moisture_low', 'on') }}

Card Configuration Notes:
In UI, set: icon_active: mdi:water-alert, color_active: orange, active_state_text: Needs Water!.
Inactive: icon_inactive: mdi:water-check, inactive_state_text: Moist, color_inactive: green.

Template Mode

OFFON

If moisture sensor is 'off', template false. Icon uses inactive properties (e.g. text "Moist").

If moisture sensor is 'on', template true. Icon uses active properties (e.g. text "Needs Water!").

10. Person Location Summary

Activates if device_tracker.john_doe is at 'Work'. Text confirms location.

Utilizing: Active Template (active_template)

{{ is_state('device_tracker.john_doe', 'Work') }}

Card Configuration Notes:
In UI, set: icon_active: mdi:briefcase, active_state_text: John at Work.
Inactive: icon_inactive: mdi:map-marker-question, inactive_state_text: John Elsewhere.

Template Mode

OFFON

If John is 'not_home', template false. Icon uses inactive properties (e.g. text "John Elsewhere").

If John is 'Work', template true. Icon uses active properties (e.g. text "John at Work").

Bar Area Templates (Left/Right Labels)

Use left_template and right_template in a Bar's configuration to display dynamic text on either side of the progress bar. Enable "Template Mode" for the respective label in the editor. The toggle simulates this, showing the change in the label's text.

1. EV Range (Left Label)

Shows EV range from sensor.my_car_ev_range with unit.

Target Area: Left Label (left_template)

{{ states('sensor.my_car_ev_range') }} miles

Template Mode

OFFON

Raw state: 150

150 miles

2. Battery Percentage (Right Label)

Displays 'SoC: XX%' using sensor.my_car_battery_level.

Target Area: Right Label (right_template)

SoC: {{ states('sensor.my_car_battery_level') }}%

Template Mode

OFFON

Raw state: 80

SoC: 80%

3. Conditional Charging Rate (Left Label)

Shows charging rate from sensor.my_car_charge_rate if binary_sensor.my_car_charging is 'on'.

Target Area: Left Label (left_template)

{% if is_state('binary_sensor.my_car_charging', 'on') %}
  Charging: {{ states('sensor.my_car_charge_rate') }} kW
{% else %}
  Not Charging
{% endif %}

Template Mode

OFFON

Raw state of primary entity for label (e.g. binary_sensor.my_car_charging): on

Charging: 11 kW (assuming rate is 11)

4. Plug Status (Right Label)

Indicates if binary_sensor.my_car_plug_status means plugged in or unplugged.

Target Area: Right Label (right_template)

{{ 'Plugged In' if is_state('binary_sensor.my_car_plug_status', 'on') else 'Unplugged' }}

Template Mode

OFFON

Raw state: off

Unplugged

5. Time to Full Charge (Right Label, Conditional)

Shows time from sensor.my_car_time_to_full if charging, else '--'.

Target Area: Right Label (right_template)

{% if is_state('binary_sensor.my_car_charging', 'on') and states('sensor.my_car_time_to_full') not in ['unknown', 'unavailable', ''] %}
  Full in: {{ states('sensor.my_car_time_to_full') }}
{% else %}
  --
{% endif %}

Template Mode

OFFON

Raw state of sensor.my_car_time_to_full: 2h 30m (assuming charging is on)

Full in: 2h 30m

6. Cabin Temperature (Left Label)

Display sensor.car_cabin_temperature with unit.

Target Area: Left Label (left_template)

Cabin: {{ states('sensor.car_cabin_temperature') | float | round(1) }}°C

Template Mode

OFFON

Raw state: 21.53

Cabin: 21.5°C

7. Odometer Reading (Right Label)

Display sensor.car_odometer, formatted with commas and unit.

Target Area: Right Label (right_template)

Odo: {{ states('sensor.car_odometer') | int | format_number(grouping_symbol=',') }} km

Template Mode

OFFON

Raw state: 123456

Odo: 123,456 km

8. Fuel/Energy Consumption (Left Label)

Show sensor.car_average_consumption (Wh/mi) as kWh/100mi.

Target Area: Left Label (left_template)

Avg: {{ (states('sensor.car_average_consumption') | float(0) / 10) | round(1) }} kWh/100mi

Template Mode

OFFON

Raw state: 250 (Wh/mi)

Avg: 25.0 kWh/100mi

9. Bar Entity Value with Unit (Right Label)

Display the bar's main entity value (config.entity) and its unit.

Target Area: Right Label (right_template)

{{ states(config.entity) }} {{ state_attr(config.entity, 'unit_of_measurement') or '' }}

Template Mode

OFFON

Raw state of config.entity: 75 (Unit: %)

75 %

10. Relative Time Since Last Update (Left Label)

Show how long ago sensor.car_last_seen was updated.

Target Area: Left Label (left_template)

Updated: {{ relative_time(states.sensor.car_last_seen.last_updated) }} ago

Template Mode

OFFON

Raw last_updated: (e.g. a full timestamp)

Updated: 5 minutes ago (example)