Custom Button Card & Templating help

Configuration
1

Been using the Custom Button Card for a short while now & wanting to get more of a understanding on the templating part.

I’ve been through the majority of the internet but now a little stuck on converting the Jinja template(?)

This is a template I have so far (needs cleaning I know :slight_smile:)
image

Here’s where I’m stuck

  • Adding a dynamic MDI icon for the battery & thermometer
    When 100% will show mdi:battery - when 50% will show mdi:batery-50
    similar with the thermometer
  • Changing the text colour based on it’s value
    Currently only shows green if < or > a number, I want to add more than one ‘IF’

The code is here… But only learning so please be kind…

Door card

color_type: card
entity: binary_sensor.front_door_sensor_contact
name: Intruder Alert
styles:
  custom_fields:
    notification:
      - color: |
          [[[
            if (states['sensor.front_door_battery'].state > 15)
              return "";
            return "red";
          ]]]
      - border-radius: 50%
      - position: absolute
      - left: 2%
      - top: 24%
      - height: 40px
      - width: 40px
      - font-size: 12px
      - line-height: 40px
    notification2:
      - color: |
          [[[
            if (states['sensor.front_door_sensor_temperature_measurement'].state < 25)
              return "";
            return "red";
          ]]]
      - border-radius: 50%
      - position: absolute
      - left: 3%
      - top: 2%
      - height: 40px
      - width: 50px
      - font-size: 12px
      - line-height: 40px
custom_fields:
  notification: |
    [[[       return `<ha-icon
        icon="mdi:battery"
        style="width: 12px; height: 12px; color: lime;">
        </ha-icon><span>${states['sensor.front_door_battery'].state}%</span>` ]]]
  notification2: |
    [[[       return `<ha-icon
        icon="mdi:thermometer"
        style="width: 12px; height: 12px; color: lime;">
        </ha-icon><span>${states['sensor.front_door_sensor_temperature_measurement'].state}°C</span>` ]]]
state:
  - color: auto
    icon: 'mdi:door-open'
    name: Front Door Open!
    styles:
      card:
        - animation: blink 4s ease infinite
    value: 'on'
  - color: green
    icon: 'mdi:door'
    name: Front Door Closed
    operator: default
    styles:
      card: null
type: 'custom:button-card'

Motion Card

color: auto
color_type: card
entity: binary_sensor.hallway_motion_sensor_motion
icon: 'mdi:motion-sensor'
name: Hallway
state:
  - icon: 'mdi:walk'
    value: 'off'
styles:
  card:
    - font-size: 18px
    - font-weight: bold
    - height: 140px
    - color: green
  custom_fields:
    notification2:
      - color: |
          [[[
            if (states['sensor.hallway_motion_sensor_temperature_measurement'].state < 25)
              return "green";
            return "red";
          ]]]
      - border-radius: 45%
      - position: absolute
      - left: 16%
      - top: 60%
      - height: 30px
      - width: 40px
      - font-size: 9px
      - line-height: 40px
custom_fields:
  notification2: |
    [[[       return `<ha-icon
        icon="mdi:thermometer"
        style="width: 12px; height: 12px; color: lime;">
        </ha-icon><span>${states['sensor.hallway_motion_sensor_temperature_measurement'].state}°C</span>` ]]]
tap_action:
  action: more-info
type: 'custom:button-card'
2

Here’s an example that changes both icon and icon color based on state. This is in the custom_fields section and can be adapter to your notification1 & 2 fields:

      m1: |
        [[[
          var icon = "mdi:map-marker";
          var color = "lightGrey";
          var status = states[variables.m1_entity].state;
          if (status != 'not_home') {
            icon = states['zone.'+status].attributes['icon'];
            color = "white";
          }
          return `<span>${variables.m1_name}:</span>
          <ha-icon icon="${icon}"
          style="width: 14px; height: 14px; color: ${color};"></ha-icon>
          <span>${status}</span>`
        ]]]
1 Like
3

Thanks!
But still quite new, this looks all as one… I’m not following that great.

4

Something like this:

custom_fields:
  notification: |
    [[[
       var icon = "mdi:battery";
       var color = "lime";
       if (states['sensor.front_door_battery'].state < 50) {
         icon = "mdi:battery-50";
         color = "yellow"
       }
       if (states['sensor.front_door_battery'].state < 10) {
         icon = "mdi:battery-10";
         color = "red"
       }
       return `<ha-icon icon="${icon}"
       style="width: 12px; height: 12px; color: ${color};"></ha-icon>
       <span style="color: ${color};">${states['sensor.front_door_battery'].state}%</span>`
    ]]]
  notification2: |
    [[[
       var icon = "mdi:thermometer";
       var color = "blue";
       if (states['sensor.front_door_sensor_temperature_measurement'].state > 20) {
         icon = "mdi:thermometer-high";
         color = "orange"
       }
       if (states['sensor.front_door_sensor_temperature_measurement'].state > 27) {
         icon = "mdi:thermometer-alert";
         color = "red"
       }
       return `<ha-icon icon="${icon}"
       style="width: 12px; height: 12px; color: ${color};"></ha-icon>
       <span style="color: ${color};">${states['sensor.front_door_sensor_temperature_measurement'].state}°C</span>`
    ]]]
1 Like
5

ah… That gave me the steer I needed… Know where I was going wrong now.
Thanks for providing your time on this :slight_smile: