Fun with custom:button-card

[scottda (Darren Scott)]

@ktownsend-personal - great write up Keith, thanks for sharing. I have two questions if you dont mind?

I will start with what may be a simpler one to describe. Here is an extract from part of a lovelace I have. There are a few buttons related to my solar. The Exporting Electric button you see in red, i would like to have the state read “Exporting” or “Importing”, instead of on or off, is that possible do you know?

My second question. The blue card shows how much i am importing or exporting, at the moment i use colours to identify import or export. I know i can have different icons but ideally i would like to duplicate the card, one for export and one for import, but only show the Wattage value for the relevant card based on its value (i.e. greater or less than/equal to 0).Is it possible to set the show value based on condition?

thanks
Darren

[pw44 (Paulo Ven)]

Hya,

i have the following card:

type: custom:button-card
entity: switch.egg_on_off
icon: mdi:radiator
color: auto
action: more_info
name: Egg Boiler
style:
  - text-transform: none
  - color: rgb(255, 155, 155)
  - font-weight: bold
show_state: true
state_color: true

problems: color does not apply, and i also want to include the entity state (available or unavailabe) which is given by entity: binary_sensor.ek3117

But when i try to include, nothing else works.

Any clue?

[pedolsky]

Try this:

type: custom:button-card
entity: switch.egg_on_off
name: Egg Boiler
icon: mdi:radiator
color_type: icon
show_icon: true
show_state: true
tap_action:
  action: more-info
styles:
  card:
   - color: rgb(255, 155, 155)
   - font-weight: bold
state_display: |
   [[[ return states['binary_sensor.ek3117'].state ]]]

[pedolsky]

Use state_display:

type: custom:button-card
entity: YOUR_SENSOR_ID
show_state: true
state_display: |
   [[[ 
     if (entity.state == 'on') return 'Exporting'; return 'Importing';
  ]]]

I don’t know the attributes of a consumption sensor (but you can post it, see Developer Tools → States), so I can only speculate; probably something like this:

state_display: |
     [[[
        if (entity.state <= 0) return entity.state; 
        if (entity.state > 0) return 'big up the pace!'
     ]]]

[pw44 (Paulo Ven)]

Thx! and how to change the icon size and also color (black when available but off and red when availabe and on)?

[pedolsky]

I would solve it in this way:

styles:
  icon:
    color: |
       [[[
         if (entity.state == 'on') return 'red'; 
         if (entity.state == 'off') return 'black';
         else return 'grey';
       ]]]

You can change the icon size easily by using

icon: mdi:radiator
size: 2rem

(or 14px or whatever you prefer). You can also change the size in the styles: section instead:

styles:
  icon:
    - width: 14px
    - height: 14px

[pw44 (Paulo Ven)]

Thx for the help.

tried the same with a person entity.

With default card, clicking on it open the map showing location.

With this nothing happens:

type: custom:button-card
entity: person.paulo
name: Paulo
color_type: icon
show_icon: true
show_state: true
tap_action:
  action: more_info
styles:
  card:
    - height: 100px
    - width: 150px
    - background-color: white
    - border-radius: 5%
    - padding: 1%
    - color: Ivory
    - font-size: 18px
    - text-transform: capitalize
    - color: rgb(155, 020, 155)
    - font-weight: bold

[pedolsky]

My bad - I had a typo in the code above. Use

more-info

(with hyphen, not with underlined)

[pw44 (Paulo Ven)]

Thx! solved.

and to have the text and state at the side of the icon?

[ktownsend-personal (Keith)]

@scottda,

For your first question, there are 2 ways you can do it:

1. javascript template for the name to examine the state and return the name you want to see
2. the state feature of the custom button card to specify what name to use based on state value

For your second question, you have the same options as the first question.

Something to consider is that you can make a single button to show all of that together, rather than having 3 buttons as you mentioned. The name would show “importing” or “exporting” and the state would show watts. To make it all work as a single button you’d need to use javascript templates rather than the state feature so you can examine multiple entities.

[pedolsky]

Have a look here: https://github.com/custom-cards/button-card#styling

[pw44 (Paulo Ven)]

I did.

my code:

type: custom:button-card
entity: person.paulo
layout: icon_label
name: Paulo
color_type: icon
show_icon: true
show_state: true
tap_action:
  action: more-info
styles:
  styles: null
  icon:
    - width: 70px
    - height: 70px
    - color: |
        [[[
          if (entity.state == 'luciana') return 'lightGreen'; 
          if (entity.state == 'home') return 'Red';
          else return 'grey';
        ]]]
  card:
    - height: 100px
    - width: 150px
    - background-color: white
    - border-radius: 5%
    - padding: 1%
    - color: Ivory
    - font-size: 18px
    - text-transform: capitalize
    - color: rgb(155, 020, 155)
    - font-weight: bold
  label:
    - font-weight: bold
    - text-orientation: mixed
    - justify-self: end
    - align-self: middle
state_display: |
  [[[ return states['person.paulo'].state ]]]

the image i have:

how to have it aligned? i didn’t find how…

[pedolsky]

If you want change the stylings of text and state, you have to refer to text and state, not to label

writing-mode: vertical-rl

is missing. And you have styles: twice in your code.

[pw44 (Paulo Ven)]

did not work. with vertical-rl or vertical-lr, text becomes vertical, right or left, but not aligned.

[pw44 (Paulo Ven)]

layout: icon_name_state2nd is the way!

[pedolsky]

@pw44

text-orientation: mixed

You used text-orientation: mixed so I assumed that you want vertical text.

[pw44 (Paulo Ven)]

Hya,

i’trying to create the following:
a vertical stack with the icon and state and description and a horizontal stack with the three buttons:

type: custom:button-card
color: '#EDE7B0'
name: TC9110
custom_fields:
  buttons:
    card:
      type: horizontal-stack
      cards:
        - entity: binary_sensor.tc91100
          name: Coffe Machine TC91100
          icon: mdi:coffee-maker
          type: custom:button-card
        - entity: switch.cups_2_4
          name: 2 - 4
          icon: mdi:coffee
          type: custom:button-card
        - entity: switch.cups_5_8
          name: 5 - 8
          icon: mdi:coffee
          type: custom:button-card
        - entity: switch.cups_off
          name: 'Off'
          icon: mdi:coffee-outline
          type: custom:button-card
state_color: true
show_header_toggle: false

Not being able to create the vertical stack section… any help is welcome. By the tutorial i didn’t go far

Thx in advance!

[pedolsky]

To avoid further misunderstandings, you mean something like this, right?

type: custom:button-card
name: TC9110
custom_fields:
  buttons:
    card:
      type: vertical-stack
      cards:
        - type: custom:button-card
          entity: light.flur
          icon: mdi:lamps
          size: 4rem
          name: test
          show_state: true
        - type: horizontal-stack
          cards:
            - entity: binary_sensor.tc91100
              name: Coffe Machine TC91100
              icon: mdi:coffee-maker
              type: custom:button-card
            - entity: switch.cups_2_4
              name: 2 - 4
              icon: mdi:coffee
              type: custom:button-card
            - entity: switch.cups_5_8
              name: 5 - 8
              icon: mdi:coffee
              type: custom:button-card
            - entity: switch.cups_off
              name: 'Off'
              icon: mdi:coffee-outline
              type: custom:button-card

[scottda (Darren Scott)]

thanks @pedolsky and @ktownsend-personal , great advice from the forum and now have simplified to one button using name state, all working nicely now so thank you (i’m no java coder so this simple option worked well for me!)

[pw44 (Paulo Ven)]

Genau. Hatte es nicht geschaft.

Exactly. Was not finding out how.