Fun with custom:button-card

Share your Projects! Dashboards & Frontend
124

I (finally) got the coding figured out.
Here’s how it looks:
family presence
One of the keys was noticing that the not_home/Away status has no zone attached to it. (Tautological, I know.) The other key is that the names of all your zones have to match the “device name” (“zone.ICC” has to have the friendly name “ICC” and the cases have to match as well.)
One issue is that the template editor could get me to the basic coding, but it doesn’t handle ha-icon and some other HTML bits.
and here’s the code:

              - entity: sensor.family_sensor
                type: 'custom:button-card'
                aspect_ratio: 3/2
                name: Presence
                tap_action:
                  action: navigate
                  navigation_path: /lovelace/map
                styles:
                  card:
                    - background-color: darkGreen
                    - border-radius: 0%
                    - padding: 1%
                    - color: ivory
                    - font-size: 12px
                    - text-transform: capitalize
                  grid:
                    - grid-template-areas: >-
                        "n n n n" "i stat stat stat" "rms rms rms rms" "jbs jbs
                        jbs jbs" "kgs kgs kgs kgs"
                    - grid-template-columns: 1fr 1fr 1fr 1fr
                    - grid-template-rows: min-content 1fr min-content min-content min-content
                  name:
                    - font-weight: bold
                    - font-size: 13px
                    - color: white
                    - align-self: middle
                    - justify-self: start
                    - padding-bottom: 0px
                  img_cell:
                    - justify-content: start
                    - align-items: start
                    - margin: 0%
                  icon:
                    - color: yellow
                    - width: 100%
                    - margin-top: 0%
                  custom_fields:
                    stat:
                      - font-size: 13px
                      - align-self: middle
                      - justify-self: start
                    rms:
                      - align-self: middle
                      - justify-self: start
                      - '--text-color-sensor': white
                    jbs:
                      - align-self: middle
                      - justify-self: start
                      - '--text-color-sensor': white
                    kgs:
                      - align-self: middle
                      - justify-self: start
                      - '--text-color-sensor': white
                custom_fields:
                  stat: |
                    [[[
                      return `<span>Family: </span>
                      <span>${states['sensor.family_sensor'].state}</span>`
                    ]]]
                  rms: |
                    [[[
                      if (states['device_tracker.sm_n986u'].state == 'away')
                        return `<ha-icon icon="mdi:map-marker"
                        style="width: 14px; height: 14px; color: white;"></ha-icon>
                        <span>Russ: </span>Away</span>`
                      else
                        return `<ha-icon
                        icon="${states['zone.'+states['device_tracker.sm_n986u'].state].attributes['icon']}"
                        style="width: 14px; height: 14px; color: white;"></ha-icon>
                        <span>Russ: ${states['device_tracker.sm_n986u'].state}</span>`
                    ]]]
                  jbs: |
                    [[[
                      if (states['device_tracker.janettes_phone'].state == 'away')
                        return `<ha-icon icon="mdi:map-marker"
                        style="width: 14px; height: 14px; color: white;"></ha-icon>
                        <span>Janette: </span>Away</span>`
                      else
                        return `<ha-icon
                        icon="${states['zone.'+states['device_tracker.janettes_phone'].state].attributes['icon']}"
                        style="width: 14px; height: 14px; color: white;"></ha-icon>
                        <span>Janette: ${states['device_tracker.janettes_phone'].state}</span>`
                    ]]]
                  kgs: |
                    [[[
                      if (states['device_tracker.katies_phone'].state == 'away')
                        return `<ha-icon icon="mdi:map-marker"
                        style="width: 14px; height: 14px; color: white;"></ha-icon>
                        <span>Kate: </span>Away</span>`
                      else
                        return `<ha-icon
                        icon="${states['zone.'+states['device_tracker.katies_phone'].state].attributes['icon']}"
                        style="width: 14px; height: 14px; color: white;"></ha-icon>
                        <span>Kate: ${states['device_tracker.katies_phone'].state}</span>`
                    ]]]
2 Likes
125

@mcfrojd I definitely overlooked that prefix. I’m glad you figured it out. :+1:

126

I was incorrect on one point: Apparently case does matter. Your device name has to match ‘zone.’+Friendly name in both case and exact text. (former post has been corrected)

127

I am a bit late to the party here, but how did you get the corners so nicely rounded on your entities.

128

That would be part of the theme. There is a card-radius parameter you can use.

129

Is there somewhere that you can go to see all of the styles - like the card radius parameter - that can be used?

130

for the radius you want something like:
ha-card-border-radius: "20px"

in your theme

131

Thanks! I’m trying to build my dashboard for my wall mounted tablet - I am spending entirely too much time on it, but it is constantly improving.

132

I’m having some trouble combining templates, does anyone have an idea why my local definition or STATE ON is not overwriting the template config? The docs say local config takes priority.

Commenting out the two templates does get it working as expected with the blink.
I’ve also tried moving the location of the template definition above and below the state definition with no change.

          - type: "custom:button-card"
            entity: light.window_lights
            icon: "mdi:wall-sconce-flat-variant"
            state:
              - value: "on"
                styles:
                  icon: mdi:home
                  color: red
                  styles:
                    card:
                      - animation: blink 1s ease infinite
                    icon:
                      - color: red
            template: 
            - light_button
            - all_buttons
button_card_templates:
  all_buttons:
    styles:
      card:
        - width: min(20vw, 90px)
        - height: min(20vw, 90px)
        - margin: 10px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
        - box-shadow: >
            [[[
              if (states['sun.sun'].state == "below_horizon")
                return '-5px -5px 15px #2c2c2c, 5px 5px 15px #191919';
              else if (states['sun.sun'].state == "above_horizon")
                return '-5px -5px 15px #ffffff, 5px 5px 15px #ebebeb';
            ]]]
      icon:
        - color: var(--primary-text-color)
    show_icon: true
    show_name: false
    triggers_update:
      - sun.sun
    hold_action:
      action: more-info
  light_button:
    state:
      - value: "on"
        styles:
          card:
            - border-style: solid
            - border-width: 2px
            - border-color: var(--paper-item-icon-active-color)
            - box-shadow: >
                [[[
                  if (states['sun.sun'].state == "below_horizon")
                    return 'inset -4px -4px 5px #2c2c2c, inset 4px 4px 5px #191919';
                  else if (states['sun.sun'].state == "above_horizon")
                    return 'inset -4px -4px 5px #ffffff, inset 4px 4px 5px #ebebeb';
                ]]]
          icon:
            - color: var(--paper-item-icon-active-color)
    show_icon: true
    show_name: false
    triggers_update:
      - sun.sun
    tap_action:
      action: toggle
      haptic: light
    hold_action:
      action: more-info
      haptic: medium

image
image1770×1308 325 KB

1 Like
133

But also note the 3rd point:

  • You can merge states together by id when using templates. The states you want to merge have to have the same id. This idparameter is new and can be anything (string, number, …). States without id will be appended to the state array. Styles embedded in a state are merged together as usual. See here for an example.
134

Does anyone know how to get tap action to do browser back?

like
window.history.back()

I want to make pages that support accessing them from multiple source points, but have a button that will return to the source.

135

@MrKuenning, I don’t think that can be done as a tap action, but you might be able to output some raw HTML that has a click event to do that.

136

Just wanted to thank you for this write up. I was able to do some pretty cool things with templating thank to you and the conversation you had with qoheleth. It’s really cool that you continued to help everyone with their individual needs to. Someone should be paying you!

1 Like
137

@Bearded_Beef, I’m glad you found this helpful. I have a natural desire to both learn and teach, so I enjoy writing up the result of something I spent a lot of time figuring out. The act of writing it up often helps me refine and improve what I started with too, so it’s a win-win :slight_smile:

138

@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?

image

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

139

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?

140

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 ]]]
141

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!'
     ]]]
142

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

143

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