Templating!
Home Assistant templating is powered by the jinja2 templating engine for Python. Because Home Assistant (like most web front ends) is written in JavaScript/TypeScript, implementing jinja2 templating in custom cards is difficult. Other custom add-ons (namely card-mod, created by a much better front end engineer than I) solve this by having the Home Assistant backend process the templates. Implementing this is difficult, but I think I've found an alternate much easier to implement solution.
Powered by Nunjucks
Nunjucks is a templating engine for JavaScript heavily based on jinja2. The templates are almost exactly like native Home Assistant jinja2 templates but are processed in the front end.
The following functions have been implemented:
states
is_state
state_attr
is_state_attr
has_value
iif
match_media
Some examples of Nunjucks templating:
rows:
- - '{{ "navigation_buttons" if match_media("(orientation: landscape)") else "navigation_touchpad" }}'
- - '{{ "sunroom_light" if is_state("light.sunroom_ceiling", "off") else "volume_slider" }}'
custom_keys:
sunroom_light:
icon: >-
{{ iif(is_state("light.sunroom_ceiling", "on"), "mdi:ceiling-light",
"mdi:ceiling-light-outline") }}
service: light.toggle
data:
entity_id: light.sunroom_ceiling
style:
color: |
{% if is_state("light.sunroom_ceiling", "on") %}
rgb({{ state_attr("light.sunroom_ceiling", "rgb_color") }})
{% endif %}
If you want additional functions from the Home Assistant templating documentation (or other functionality that may be useful) to be added, please create a feature request.
Other changes:
- Volume buttons will now render in reverse when in a column (volume up on the top, volume down on the bottom).
- Fixed
rakutentv
logo. - Switched to ha-nunjucks package and removed local utility function.
- Added material ripple effects to the touchpad.