Fun with custom:button-card

qoheleth · January 31, 2021, 4:02pm

A new variation:
I added two additional button types: door-button-open (for doors that will highlight when they’re open) and door-button-closed (for doors that will highlight when they’re closed). “open” is the most common one, for house doors and the like, but I use “closed” for my bathroom door to see at a glance whether our [single] bathroom is in use. Here’s the coding for lovelace assuming you’ve already got custom button card installed:

  door-button-open:
    template: standard-button
    state:
      - id: value_on
        value: 'on'
        icon: 'mdi:door-open'
      - id: value_off
        value: 'off'
        icon: 'mdi:door-closed'
  door-button-closed:
    template: standard-button
    state:
      - id: value_on
        value: 'off'
        icon: 'mdi:door-closed'
      - id: value_off
        value: 'on'
        icon: 'mdi:door-open'

and an example of one of the doors:

                  cards:
                    - entity: binary_sensor.front_door_sensor_contact
                      name: Door
                      template: door-button-open
                      type: 'custom:button-card'

ktownsend-personal · February 1, 2021, 12:20am

@qoheleth, nice use of a door sensor on the bathroom. A single bathroom definitely deserves a special indicator.

4integration · February 2, 2021, 7:36pm

Very nice @ktownsend-personal
I would like to have 6 buttons to behave as radio buttons with input from input_select - as simple as possible. I don’t understand the templates directly.

I have this ìnput_select currently

albin_rgbw:
  name: Effect
  options:
    - None
    - Fireplace
    - Storm
    - Rainbow
    - Aurora
    - LAPD
  initial: None

and corresponding automations like:

- alias: RGBW Fireplace
  trigger:
    platform: state
    entity_id: input_select.albin_rgbw
    to: "Fireplace"
  action:
    service: zwave.set_config_parameter
    data_template: {
      "node_id": 7,
      "parameter": 72,
      "value": 6
    }

Any ideas how to create this buttons?

ktownsend-personal · February 3, 2021, 8:47pm

@4integration,
You can do it without templates. The templates just make it easier to re-use common parts of the buttons. When getting started with the custom button card, I recommend trying your ideas without templates first to see if they work as expected, then try making templates to get the same result.

As a non-template example, you can make 6 buttons based on this, with each one using a different - value: setting based on the values available in your input_select:

type: 'custom:button-card'
entity: input_select.albin_rgbw
styles:
  card:
    - background-color: 'gray'
state:
  - value: 'None' # different value here for each copy of the button
    styles:
      card:
        - background-color: 'green'

In that example, the gray style is default to use when the value doesn’t match, and the green style is what to use when the value matches.

To turn the above into a template, you would do something like this in your raw dashboard yaml:

button-card-templates:
  radio_albin_rgbw:
    entity: input_select.albin_rgbw
    styles:
      card:
        - background-color: gray
    state:
      - id: on_state # important id mapping for templated states
        styles:
          card:
            - background-color: green

And then your 6 buttons in your dashboard card can use the template:
(I put them in a horizontal-stack as a container)

type: horizontal-stack
cards:
  - type: 'custom:button-card'
    template: radio_albin_rgbw
    state:
      - id: on_state  # matches the id mapping in the template
        value: 'None' # defines the value to match
  - type: 'custom:button-card'
    template: radio_albin_rgbw
    state:
      - id: on_state
        value: 'Fireplace'
  - type: 'custom:button-card'
    template: radio_albin_rgbw
    state:
      - id: on_state
        value: 'Storm'
  - type: 'custom:button-card'
    template: radio_albin_rgbw
    state:
      - id: on_state
        value: 'Rainbow'
  - type: 'custom:button-card'
    template: radio_albin_rgbw
    state:
      - id: on_state
        value: 'Aurora'
  - type: 'custom:button-card'
    template: radio_albin_rgbw
    state:
      - id: on_state
        value: 'LAPD'

NOTE: the - id: on_state is important for templated states so they can be matched properly between the button and the template, otherwise you end up with the state lists of both being concatenated instead of merged. It’s only needed when using templates with states.

NOTE 2: if you want the template to be useful for different entities you can either move the entity property to the buttons instead of having it on the template, or you can have a base template plus a template for each entity.

Example of multiple templates:

button-card-templates:
  radio_button:                     # base template
    styles:
      card:
        - background-color: gray
    state:
      - id: on_state
        styles:
          card:
            - background-color: green
  radio_albin_rgbw:                 # template for your button to use
    template: radio_button          # refers to the base template
    entity: input_select.albin_rgbw # identifies the entity

In that example, the radio_albin_rgbw template refers to the radio_button template. Your buttons for the input_select.albin_rgbw would refer to radio_albin_rgbw.

Again, templates are optional. They just give you more organization of common parts.

JoeAstor · February 10, 2021, 7:30pm

Hey Guy´s, need some help. I´m trying something out with yahoofinance. What i´m trying is to show a icon trending up in green or a red icon trending down. But underneed i wanted to show the exact price of the stock. But that´s what i can´t see to figerout. So 2 entities in 1 custom-button.

ktownsend-personal · February 10, 2021, 8:35pm

You can do it easily with the custom_fields feature. Basically, you use a custom button card as a container of other cards. You can review the section Container with Header in my first post of this thread for one example. You can also check out my custom HVAC controller for a more complex example. The documentation for the custom button card is a great resource as well.

riddledaxis · February 12, 2021, 8:31pm

I am having trouble configuring a custom:button card, and would appreciate any help you can offer.

I have 4 seperate cards inside a grid, and for 2 of them I have managed to get the icon to flash and turn red based on a template, but I am having a problem with the remaining 2 buttons (icons).

As you can see from the above screenshot, the icon colour is changing to red when the state is >= 1, but the animation (blinking) is not working for some reason.

This is the state part of the button code:

type: 'custom:button-card'
color_type: auto
entity: sensor.hacs
icon: 'mdi:package-up'
name: HACS
show_name: true
show_state: true
state:
  - color: red
    operator: '>='
    value: '1'
  - color: 'rgb(3, 169, 244)'
    operator: ==
    value: '0'
  - value: '1'
    operator: '>='
    styles:
      icon:
        - animation: blink 3s linear
  - value: 'off'
    styles:
      card:
        - filter: opacity(100%)
      icon:
        - filter: grayscale(50%)
          type: horizontal-stack
      type: vertical-stack

ktownsend-personal · February 12, 2021, 9:02pm

@riddledaxis, you have the same condition for value >= 1 twice. Try having it just once with both color and styles defined for it.

riddledaxis · February 15, 2021, 9:52am

That was it, all 4 buttons are now working.

Thank you

4integration · February 22, 2021, 8:14pm

Thanks @ktownsend-personal for your great contribution. Unfortunately too much things have piled up and have not yet tested it.

qoheleth · February 23, 2021, 3:45am

One of the things I like most about this custom button card is the way that I can get all kinds of information (and control) in a small space (one screen without scrolling on my phone and a small corner of my desktop(s)):

ktownsend-personal · February 28, 2021, 9:57pm

@4integration, I can relate. I have an insane number of things on my list I can’t find time to get back to.

netregha · March 11, 2021, 5:59pm

Hello

I have have also been playing with the custom: Button Card. I currently have my printer ink level and use a linear-gradient background. I wish to use the entity.status to set the % of the gradient.

    - background: |
        [[[
          var ink_level = 100 - entity.state;
          return 'linear-gradient(rgb(255, 255, 255) ink_level + '%', rgb(124, 124, 0) 0%)';
        ]]]

I have got a little stuck as I just cant get the correct syntax to work, and hope someone here can help.

ktownsend-personal · March 11, 2021, 7:39pm

your string isn’t terminated in the right places, and a + is missing:

return 'linear-gradient(rgb(255, 255, 255)' + ink_level + '%, rgb(124, 124, 0) 0%)';

netregha · March 11, 2021, 8:37pm

you legend Thank you so much. So near, yet so far… Thanks again

xbmcnut · March 18, 2021, 11:35pm

Anyone know how I’d add an ‘if’ statement to make the icon green when a secondary sensor (binary_sensor.pet_heston) is on and red when its off? I’m assuming I’d need a template under state > styles > icon > color?

entity: sensor.heston_last_state
icon: 'mdi:cat'
layout: icon_name_state
show_name: false
show_state: true
state:
  - styles:
      icon:
        - color: var(--button-card-light-color)
    value: 'on'
tap_action:
  action: more-info
type: 'custom:button-card'

Mariusthvdb · March 19, 2021, 11:20am

you’ve got to be kidding, didn’t you check the button card documentation, or any of the million other card configs in the button-card thread…?

  styles:
    icon:
      - color: >
          [[[ return states['binary_sensor.pet_heston'].state == 'on' ? 'green' : 'red'; ]]]

dredvard · March 19, 2021, 12:50pm

I’m trying to make a battery at a glance card where it will change icons based on charging status and display battery level information. I’m trying to make the template more easily configurable for use with the 2 entities so you just input the entity once and then can do multiple actions with it. This works, but is there a neater way of doing this? (ie. With this methjod I would always have to include a “variables: lvl_entity:” vs just inputing lvl_entity in the top level? I’ll eventually move the code to the template but left it here for visibility.

type: 'custom:button-card'
template: battery_glance
entity: binary_sensor.sm_a515w_is_charging
name: template
variables:
  lvl_entity: sensor.sm_a515w_battery_level
styles:
  grid:
    - grid-template-areas: '"n" "i" "l" "s"'
  icon:
    - color: |
        [[[
          var vlentity=variables.lvl_entity
          var blevel=states[vlentity].state;
          if (blevel > 60) return 'lime';
          else if (blevel >= 20 ) return 'orange';
          else return 'red';
        ]]]
label: |
  [[[
    var blevel=states[variables.lvl_entity].state;
    return `
     <span><span style="color: var(--text-color-sensor);">${states['sensor.sm_a515w_battery_level'].state}%</span></span>`
  ]]]

xbmcnut · March 19, 2021, 9:55pm

Sure did but templating is not a strength of mine. I’m a hardware guy. Thanks for the advice. Working a treat.

ktownsend-personal · March 23, 2021, 3:44pm

@dredvard, if you need 2 entities you have to use a variable to specify the 2nd entity. I don’t think there is any way around that.

One option to simplify things is to make the entity you use the most in javascript the primary entity and use a variable for the other one. You can simply refer to entity in the javascript for the primary entity: [[[ return entity.state > 60 ? 'lime' : entity.state >= 20 ? 'orange' : 'red'; ]]].