2.0.5

BUGFIXES

• Locked buttons will now lock properly again after the first unlock
• No more shadow clicks when using action: navigate
• Reopens #200 as those 2 bugs where regressions introduced while trying to fix it.

2.0.4

BUGFIXES

• Fix when a "templatable" field had the null value
• IOS 13 beta's strange tap behaviour should be fixed now! Also on the IOS Beta Home Assistant App.

2.0.3

BUGFIXES

• Fix when a "templatable" field had the null value
• IOS 13 beta's strange tap behaviour should be fixed now!

2.0.2

BUGFIXES

• If a field with template support had the number 0 as a value, the field's value would be transformed into undefined
• When in an *_action the service_data field contained parameters which where objects or booleans, an error was thrown and the action wouldn't execute.

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.

1.11.1

NEW FEATURES

• Support for HTML in name or name_template
• Support for hacs

NOTE

• As soon as HACS is more stable (still some bugs there), I'll drop the support for custom_updater

1.11.0

NEW FEATURES

• Adds the CSS variable --button-card-light-color-no-temperature equivalent to --button-card-light-color but without the color temperature applied.
• New option: unlock_users: A list of usernames allowed to unlock the button when lock: true. If undefined, everyone is allowed. (Fixes #167)

  - type: custom:button-card
    entity: switch.super_secure_switch
    lock: true
    unlock_users:
      - user1
      - user2

• Support for timer entities. In the state, it will now display the time remaining while running or paused and idle while being idle. (Fixes #156)

FIXES

• Fix ripple effect when lock is true
• Fixes #177: name_template and entity_picture_template where not updating the button on state change

1.10.2

FIXES

• Fix a regression introduced in 1.10.0 when entity_id was equal to entity in the service_data
• Fix when aspect_ratio is not defined and height was set to 100%

1.10.1

FIXES

• Restore padding for ha-card when aspect_ratio is used
• Fixes various CSS issues

1.10.0

BREAKING CHANGES

• I had to change some default styles to support aspect ratio and icon auto-resizing, this might break some of your custom styles. Hopefully not too much. Feel free to request some help on the forum.
• Deprecate style. Same result with:
  • before:

    style:
      - font-size: 10px

  • after:

    styles:
      card:
        - font-size: 10px

NEW FEATURES

• You can now merge states together by id when using templates. The states you want to merge have to have the same id. This id parameter is new and can be anything (string, number, ...). States without id will still be appended. Styles embedded in a state are merged together as usual. Fixes #165

  button_card_templates:
    sensor:
      styles:
        card:
          - font-size: 16px
          - width: 75px
      tap_action:
        action: more-info
      state:
        - color: orange
          value: 75
          id: my_id
  
    sensor_humidity:
      template: sensor
      icon: 'mdi:weather-rainy'
      state:
        - color: 'rgb(255,0,0)'
          operator: '>'
          value: 50
        - color: 'rgb(0,0,255)'
          operator: '<'
          value: 25
  
    sensor_test:
      template: sensor_humidity
      state:
        - color: pink
          id: my_id
          operator: '>'
          value: 75
          styles:
            name:
              - color: '#ff0000'
  ############### Used like this ##############
    - type: custom:button-card
      template: sensor_test
      entity: input_number.test
      show_entity_picture: true

  Will result in this state object for your button (styles, operator and color are overridden for the id: my_id as you can see):

  state:
    - color: pink
      operator: '>'
      value: 75
      styles:
        name:
          - color: '#ff0000'
    - color: 'rgb(255,0,0)'
      operator: '>'
      value: 50
    - color: 'rgb(0,0,255)'
      operator: '<'
      value: 25

• Icon will auto adapt to the height of the card and not only to it's width. This will enable you to skip using size: xx% when you defined the width, height or aspect-ratio of a card.

• You can now define an aspect ratio for your cards using aspect_ratio in the main config, and the card will adapt to all of your screen size. This will enable you to skip setting the width and the height of a card to make it square for example.

  

  - type: vertical-stack
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            name: 1/1
            icon: mdi:lightbulb
            aspect_ratio: 1/1
          - type: custom:button-card
            name: 2/1
            icon: mdi:lightbulb
            aspect_ratio: 2/1
          - type: custom:button-card
            name: 3/1
            icon: mdi:lightbulb
            aspect_ratio: 3/1
          - type: custom:button-card
            name: 4/1
            icon: mdi:lightbulb
            aspect_ratio: 4/1
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            name: 1/1.2
            icon: mdi:lightbulb
            aspect_ratio: 1/1.2
          - type: custom:button-card
            name: 1/1.3
            icon: mdi:lightbulb
            aspect_ratio: 1/1.3
          - type: custom:button-card
            name: 1/1.4
            icon: mdi:lightbulb
            aspect_ratio: 1/1.4
          - type: custom:button-card
            name: 1/1.5
            icon: mdi:lightbulb
            aspect_ratio: 1/1.5

• New option to ignore the light temperature (Fixes #153): color: auto-no-temperature

• name_template and entity_picture_template. Also available per state (because why not). For both, the javascript code needs to return a string. Fixes #162

• color: auto-no-temperature: This will have the same effect as color: auto but will ignore your light temperature.

• When action: more-info, you can now define also an entity other than the one assigned to the card (Fixes #163):

  - type: custom:button-card
    entity: light.my_light
    tap_action:
      action: more-info
      entity: sensor.my_sensor