Custom Features for Home Assistant Cards - Buttons, Sliders, Selectors, and Spinboxes

Share your Projects! Dashboards & Frontend
, , ,
163

@Nerwyn do you have any examples of using card mod to change the colour of the maon tile icon. im playing around with the below, but jjst not finding the right combo

type: tile
entity: climate.izone_beaus_bedroom_ac_zone
icon_tap_action:
  action: toggle
tap_action:
  action: none
name: Beaus
card_mod:
  style: |
    :host {
      {% if states('climate.izone_ac_controller_dining_room') == 'heat' %}
        --tile-color: orange !important;
      {% elif states('climate.izone_ac_controller_dining_room') == 'cool' %}
        --tile-color: red !important;
      {% elif states('climate.izone_ac_controller_dining_room') == 'dry' %}
        --tile-color: green !important;
      {% else %}
        --tile-color: disabled !important;
      {% endif %}
    }
164

Try changing value_attribute to fan_mode. Attribute fan_modes is a list of possible fan modes, not the current fan mode of the entity.

165

Try this:

type: tile
entity: climate.izone_beaus_bedroom_ac_zone
icon_tap_action:
  action: toggle
tap_action:
  action: none
name: Beaus
card_mod:
  style: |
    ha-tile-icon {
      {% if states('climate.izone_ac_controller_dining_room') == 'heat' %}
        --tile-icon-color: var(--orange-color) !important;
      {% elif states('climate.izone_ac_controller_dining_room') == 'cool' %}
        --tile-icon-color: var(--red-color) !important;
      {% elif states('climate.izone_ac_controller_dining_room') == 'dry' %}
        --tile-icon-color: var(--green-color) !important;
      {% else %}
        --tile-icon-color: var(--disabled-color) !important;
      {% endif %}
    }
166

nice thanks~!

167

4.1.0 has been released!

This version implements a massive overhaul of the templating system. Almost all of the Home Assistant templating extensions have been implemented into ha-nunjucks, my instantaneous synchronous frontend only alternative templating system for Home Assistant. This includes Pythonic datetimes! See the ha-nunjucks README for more information on all of the new templating functions, filters, and tests.

This version also adds a new action - Evaluate JS. If you know how to write JavaScript, you can now do so as an action. Just be careful that you don’t break anything!