Releases · custom-cards/button-card

16 May 00:44

RomRider

1.9.0

4a2f16e

Templates

NEW FEATURES

Configuration templating support:

Define your config template in the main lovelace configuration and then use it in your button-card. This will avoid a lot of repetitions! It's basically YAML anchors, but without using YAML anchors and is very useful if you split your config in multiple files 😄
You can overload any parameter with a new one, appart from the states. The state arrays in templates will be concatenated together with your config, meaning you can add new states but not change/delete states. Your main config states will be appended to the ones in the template.
You can also inherit another template from within a template.

In ui-lovelace.yaml (or in another file using !import)

button_card_templates:
  header:
    styles:
      card:
        - padding: 5px 15px
        - background-color: var(--paper-item-icon-active-color)
      name:
        - text-transform: uppercase
        - color: var(--primary-background-color)
        - justify-self: start
        - font-weight: bold
      label:
        - text-transform: uppercase
        - color: var(--primary-background-color)
        - justify-self: start
        - font-weight: bold

  header_red:
    template: header
    styles:
      card:
        - background-color: '#FF0000'

  my_little_template:
    [...]

And then where you use button-card, you can apply this template, and/or overload it:

- type: custom:button-card
  template: header
  name: My Test Header

To ease template usage, you can now refer to the entity assigned to the button on a call-service action using the entity keyword in the entity_id parameter:

- type: custom:button-card
  entity: cover.mycover
  tap_action:
    action: call-service
    service: cover.open_cover
    service_data:
      entity_id: entity  ## This will actually call the service on cover.mycover

FIXES

Fixes #157, map file not found
minified the file, it's now 50% smaller

Assets 2

10 May 12:51

RomRider

1.8.0

8023fd8

Repeatable hold_action, double tap action, styling for lock and light color css var

NEW FEATURES

hold_action now has a new parameter: repeat (in milliseconds). If set, while you hold the button, the action will repeat itself every repeat in milliseconds. Fixes #147

      - type: custom:button-card
        entity: input_number.test
        show_state: true
        hold_action:
          action: call-service
          repeat: 500
          service: input_number.increment
          service_data:
            entity_id: input_number.test

New double click action: dbltap_action (this introduces a slight delay [250ms] for single click actions on buttons where you also use double tap)

      - type: custom:button-card
        entity: input_number.test
        show_state: true
        hold_action:
          action: call-service
          repeat: 500
          service: input_number.increment
          service_data:
            entity_id: input_number.test
        dbltap_action:
          action: call-service
          service: input_number.decrement
          service_data:
            entity_id: input_number.test

styling for the lock, available also per state (Fixes #150)

styles:
  lock:
    - color: red
    - align-items: flex-end
    - justify-content: flex-start

You can now use the current light color in your CSS styles. If a light entity is assigned to the button, the CSS variable --button-card-light-color will contain the current light color so that you can use it where you want on your card. Example:
```
styles:
  name:
    color: var(--button-card-light-color)
  card:
    - -webkit-box-shadow: 0px 0px 9px 3px var(--button-card-light-color)
    - box-shadow: 0px 0px 9px 3px var(--button-card-light-color)
```

FIXES

Misalignment of label for layout: icon_name_state2nd when there was no state.

Assets 2

09 May 14:13

RomRider

1.7.0

c0f50ff

Custom Layout Support & Localization

NEW FEATURES

Custom layouts support using css grids. Fixes #144, Fixes #143, Fixes #140
Specific documentation is here

- type: "custom:button-card"
  entity: switch.skylight
  color_type: card
  show_name: false
  show_label: true
  layout: icon_label
  size: 20px
  styles:
    card:
      - height: 50px
      - border-radius: 10px
    grid:
      - grid-template-columns: min-content min-content
      - width: min-content
      - margin: auto
      - grid-gap: 0px 10px

Default icon_label layout on the right, custom one overloading the icon_label on the left using the config above:

The state is now localized to your current language.

FIXES

Rollback to mwc-ripple to fix #145

Assets 2

04 May 11:21

RomRider

1.6.0

880e7e3

Lock and html for label

New Features

You can return HTML in the label or label_template to achieve things like:

label_template: >
  return 'Connection: '
  + (states['switch.connection'].state === 'on'
      ? '<span style="color: #00FF00;">enabled</span>'
      : '<span style="color: #FF0000;">disabled</span>')
  + ' / '
  + (states['binary_sensor.status'].state === 'on' ? 'connected' : 'disconnected')

With lock: true You can now lock your button (inspired by the great @thomasloven). This will display a normal button with a lock symbol in the corner. Clicking the button will make the lock go away and enable the button to be manoeuvred for five seconds.
show_last_changed: If true will replace the label and display the last_changed attribute in a nice way.

Fixes

Support for light temperature with color: auto. Fixes #141
blank-card had a background if a height was defined

Assets 2

01 May 11:40

RomRider

1.5.0

7f10243

Style per elements

Breaking Changes

for now style and entity_picture_style are still supported, but please make sure you update your configuration so that style becomes card and entity_picture_style becomes entity_picture, both under the styles option (note the S at the end of styles). Next releases will drop the support for style and entity_picture_style.
Basically, this:
```
- type: custom:button-card
  style:
    - border-radius: 10%
  entity_picture_style:
    - filter: grayscale(100%)
```
Becomes:
```
- type: custom:button-card
  styles:
    card:
      - border-radius: 10%
    entity_picture:
      - filter: grayscale(100%)
```
The styles defined in each state are now additive with the styles defined in the main part of the configuration. It means you don't have to define all the CSS entries in each state, only define the ones which change. Define the common ones in the main styles config part and define specific ones in each state styles entries.

New Features

Styling per element supported by using the new styles object available in the main config and in each state entry.
You can configure the style for:

card: Styles that are defined here will be applied to the whole card and it's content, unless redefined in elements below.
entity_picture
icon
name
state
label

- type: "custom:button-card"
  color_type: icon
  entity: light.test_light
  label_template: >
    var bri = states['light.test_light'].attributes.brightness;
    return 'Brightness: ' + (bri ? bri : '0') + '%';
  show_label: true
  show_state: true
  size: 10%
  styles:
    card:
      - height: 100px
    label:
      - color: gray
      - font-size: 9px
      - justify-self: start
      - padding: 0px 5px
    name:
      - text-transform: uppercase
      - letter-spacing: 0.5em
      - font-familly: cursive
      - justify-self: start
      - padding: 0px 5px
    state:
      - justify-self: start
      - font-size: 10px
      - padding: 0px 5px
  state:
    - value: 'on'
      styles:
        state:
          - color: green
    - value: 'off'
      styles:
        state:
          - color: red
        card:
          - filter: brightness(40%)
- type: "custom:button-card"
  color_type: icon
  entity: light.test_light
  layout: icon_label
  label_template: >
    return 'Other State: ' + states['switch.skylight'].state;
  show_label: true
  show_name: false
  size: 100%
  styles:
    card:
      - height: 200px
    label:
      - font-weight: bold
      - writing-mode: vertical-rl
      - text-orientation: mixed
  state:
    - value: 'on'
      styles:
        label:
          - color: red
    - value: 'off'
      styles:
        label:
          - color: green

Fixes

Brightness calculation for lights was different than the default from Home Assistant. This is fixed.
Own longpress was not used in some cases

Assets 2

29 Apr 16:44

RomRider

1.4.0

56a8fac

Labels and template love

New features

New option label: can be used for anything, if template is needed, use label_template. Both are also available per state. Fixes #112, Fixes #120
New option show_label: default is false. To display the label or label_template field
New layout: icon_label to display the label on the right side of the icon

templating support 🎉 in label_template and state with the template operator. For more advanced templates, please use the config-template-card. The next version of config-template-card (available soon) will fix the issue you all had in the past.

In label_template:

- type: "custom:button-card"
  color_type: icon
  entity: light.test_light
  label_template: >
    var bri = states['light.test_light'].attributes.brightness;
    return 'Brightness: ' + (bri ? bri : '0') + '%';
  show_label: true
  size: 15%
  style:
    - height: 100px
- type: "custom:button-card"
  color_type: icon
  entity: light.test_light
  layout: icon_label
  label_template: >
    return 'Other State: ' + states['switch.skylight'].state;
  show_label: true
  show_name: false
  style:
    - height: 100px

value with template operator

- type: "custom:button-card"
  color_type: icon
  entity: switch.skylight
  show_state: true
  show_label: true
  state:
    - operator: template
      value: >
        return states['light.test_light'].attributes
        && (states['light.test_light'].attributes.brightness <= 100)
      icon: mdi:alert
    - operator: default
      icon: mdi:lightbulb
- type: "custom:button-card"
  color_type: icon
  entity: light.test_light
  show_label: true
  state:
    - operator: template
      value: >
        return states['input_select.light_mode'].state === 'night_mode'
      icon: mdi:weather-night
      label: Night Mode
    - operator: default
      icon: mdi:white-balance-sunny
      label: Day Mode

Fixes

Blank card was not following the specified width

Assets 2

29 Apr 08:52

RomRider

1.3.0

21c60bb

Icon size, card height and width funkiness

New Features

Complete rewrite of the card using CSS grids for easier maintenance
size and CSS height are now working properly. Fixes #15, Fixes #111, Fixes #79

Ability to specify the width of the card through styles (card without width specified will occupy the remaining space). Fixes #29

    - type: horizontal-stack
      cards:
        - type: "custom:button-card"
          entity: light.test_light
          color: auto
          name: s:default h:200px
          style:
            - height: 200px
        - type: "custom:button-card"
          entity: light.test_light
          color_type: card
          color: auto
          name: s:100% h:200px
          size: 100%
          style:
            - height: 200px
        - type: "custom:button-card"
          entity: light.test_light
          color_type: card
          color: auto
          size: 10%
          name: s:10% h:200px
          style:
            - height: 200px
    - type: horizontal-stack
      cards:
        - type: "custom:button-card"
          entity: light.test_light
          color: auto
          name: 60px
          style:
            - height: 60px
            - width: 60px
        - type: "custom:button-card"
          entity: light.test_light
          color_type: card
          color: auto
          name: 80px
          style:
            - height: 80px
            - width: 30px
        - type: "custom:button-card"
          entity: light.test_light
          color_type: card
          color: auto
          name: 300px
          style:
            - height: 300px

Assets 2

27 Apr 14:25

RomRider

1.2.0

37a8b89

1.2.0

Breaking Changes

The default color for the background of a card with color_type: card when the entity is off is now var(--paper-card-background-color). Fixes #129

Fix

Fixes #130: color: auto uses also entity's brightness now

Assets 2

25 Apr 23:02

RomRider

1.1.0

5534338

Custom Picture/Entity Picture & bugfix

New Features

Entity Picture/Custom Picture support, per state and with styling (Fixes #3). New options are:
- show_entity_picture, default is false
- entity_picture
- entity_picture_style

Example config looks like this:

        - type: "custom:button-card"
          entity: switch.skylight
          entity_picture: https://upload.wikimedia.org/wikipedia/en/e/ed/Nyan_cat_250px_frame.PNG
          show_entity_picture: true
          name: Entity Picture Default
          state:
            - value: 'off'
              entity_picture_style:
                - filter: grayscale(100%)
                - border-radius: 50%
            - value: 'on'
              style:
                - animation: blink 2s ease infinite
              entity_picture_style:
                - border-radius: 50%
        - type: "custom:button-card"
          color_type: card
          entity: switch.skylight
          show_entity_picture: true
          name: Entity Picture State
          state:
            - value: 'off'
              color: black
              entity_picture: https://welovecatsandkittens.com/wp-content/uploads/2013/09/fallling-asleep-at-keyboard-cat.jpg
              entity_picture_style:
                - filter: grayscale(100%)
            - value: 'on'
              color: '#ce42f4'
              entity_picture: https://media.tenor.com/images/d740131a4906504d47cab865f1bd95b3/tenor.gif

Fix

Fix #125 : Border Clipping & rounded corner

Breaking Change

If using blink, the whole card will now blink. I might bring back only the icon/text blinking in the future.

Others

Code cleanup

Assets 2

25 Apr 08:18

RomRider

1.0.0

6df003d

Complete refactor and haptic support

New Features

Complete typescript refactor
Support for haptic feedback for the Beta IOS App (Fixes #123)

Fixes

Toggle works now for locks and covers (Fixes #110)
Fix Long Press support in general
Fix Background color calculation in certain case

Breaking Changes

action: service is deprecated. Use action: call-service instead.

Assets 2

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Releases: custom-cards/button-card

Templates

Repeatable hold_action, double tap action, styling for lock and light color css var

Custom Layout Support & Localization

Lock and html for label

Style per elements

Labels and template love

Icon size, card height and width funkiness

1.2.0

Custom Picture/Entity Picture & bugfix

Complete refactor and haptic support