2.0.0

BREAKING CHANGES

• All the *_template are now deprecated 😨 but they are replaced with a better way of handling templates. 🎉
  This applies to:

  • name
  • label
  • entity_picture
  • value in the state object when operator: template

  Old style:

  name_template: >
    if (entity.state === 'off') return 'Template is off';
    return 'Template is on';

  Becomes for example:

  name: >
    [[[
      if (entity.state === 'off') return 'Template is off';
      return 'Template is on';
    ]]]

  Without templating, no change:

  name: This is not a template

NEW FEATURES

• All the states values support templating, it's optional of course:

  entity: sensor.first_sensor
  state:
    - operator: '<'
      value: '[[[ states["sensor.other_sensor"].state ]]]`

• icon supports templating (use the new templating format [[[ template ]]])

  - type: custom:button-card
    icon: >
      [[[
        if (entity.state === 'on')
          return "mdi:fire";
        return "mdi:lightbulb";
      ]]]
    entity: switch.skylight

• Every styles entry now also supports templating, or plan text of course:

  styles:
    card:
      - background-color: >
          [[[ if (states['input_number.test'].state == 0) return "green"; return "red"; ]]]

• Every field in *_action support templating, or plain text of course, including service_data (fixes #187):

  tap_action:
    action: call-service
    service: >
      [[[
        if (states['input_number.test'].state <= 20)
          return "input_number.increment";
        return "input_number.decrement";
      ]]]
    service_data:
      entity_id: input_number.test

• Custom fields support for your button through the new custom_fields object. This will enable you to define your own fields in the button and apply styles to them without writing hundreds of line of javascript. This is an advanced feature, you'll have to understand how CSS (and CSS grids) work! You'll have more control on how to position those fields in the button compared to previously where you only had more or less 2 fields to play with (name and label).
  Your custom field content can be plain text or a template [[[ ]]]
  Your custom element can be styled also using styles.custom_fields.<ELEMENT_NAME>. See below for examples:

  • Placing an element wherever you want (that means bypassing the grid). Set the grid to position: relative and set the element to position: absolute
    

      - type: custom:button-card
        icon: mdi:lightbulb
        aspect_ratio: 1/1
        name: Nb lights on
        styles:
          grid:
            - position: relative
          custom_fields:
            notification:
              - background-color: >
                  [[[
                    if (states['input_number.test'].state == 0)
                      return "green";
                    return "red";
                  ]]]
              - border-radius: 50%
              - position: absolute
              - left: 60%
              - top: 10%
              - height: 20px
              - width: 20px
              - font-size: 8px
              - line-height: 20px
        custom_fields:
          notification: >
            [[[ return Math.floor(states['input_number.test'].state / 10) ]]]

  • Or you can use the grid. Each element will have it's name positioned as the grid-area (Thanks @iantrich @LbDab and @jimz011 for the inspiration):
    

      - type: custom:button-card
        entity: 'sensor.raspi_temp'
        icon: 'mdi:raspberry-pi'
        aspect_ratio: 1/1
        name: HassOS
        styles:
          card:
            - background-color: '#000044'
            - border-radius: 10%
            - padding: 10%
            - color: ivory
            - font-size: 10px
            - text-shadow: 0px 0px 5px black
            - text-transform: capitalize
          grid:
            - grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "sd sd"'
            - grid-template-columns: 1fr 1fr
            - grid-template-rows: 1fr min-content min-content min-content min-content
          name:
            - font-weight: bold
            - font-size: 13px
            - color: white
            - align-self: middle
            - justify-self: start
            - padding-bottom: 4px
          img_cell:
            - justify-content: start
            - align-items: start
            - margin: none
          icon:
            - color: >
                [[[
                  if (entity.state < 60) return 'lime';
                  if (entity.state >= 60 && entity.state < 80) return 'orange';
                  else return 'red';
                ]]]
            - width: 70%
            - margin-top: -10%
          custom_fields:
            temp:
              - align-self: start
              - justify-self: end
            cpu:
              - padding-bottom: 2px
              - align-self: middle
              - justify-self: start
              - --text-color-sensor: '[[[ if (states["sensor.raspi_cpu"].state > 80) return "red"; ]]]'
            ram:
              - padding-bottom: 2px
              - align-self: middle
              - justify-self: start
              - --text-color-sensor: '[[[ if (states["sensor.raspi_ram"].state > 80) return "red"; ]]]'
            sd:
              - align-self: middle
              - justify-self: start
              - --text-color-sensor: '[[[ if (states["sensor.raspi_sd"].state > 80) return "red"; ]]]'
        custom_fields:
          temp: >
            [[[
              return `<ha-icon
                icon="mdi:thermometer"
                style="width: 12px; height: 12px; color: yellow;">
                </ha-icon><span>${entity.state}°C</span>`
            ]]]
          cpu: >
            [[[
              return `<ha-icon
                icon="mdi:server"
                style="width: 12px; height: 12px; color: deepskyblue;">
                </ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_cpu'].state}%</span></span>`
            ]]]
          ram: >
            [[[
              return `<ha-icon
                icon="mdi:memory"
                style="width: 12px; height: 12px; color: deepskyblue;">
                </ha-icon><span>RAM: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_ram'].state}%</span></span>`
            ]]]
          sd: >
            [[[
              return `<ha-icon
                icon="mdi:harddisk"
                style="width: 12px; height: 12px; color: deepskyblue;">
                </ha-icon><span>SD: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_sd'].state}%</span></span>`
            ]]]

BUGFIXES

• Fixes #200: Using button-card inside an entities card will not fire more-info anymore automatically.