Lovelace: Button card

Any chance you could share more then just that one card, I"d like to shameless steal a ton of that because its simply awesome

Is there a option to get the correct brightness instead above 100%? I’m using the code below but it have a brightness between 0/255 so it shows like 144% etc, would like to have it between 0/100. :slight_smile:

label: |
  [[[
    var bri = states['light.tvlamp'].attributes.brightness;
    return 'Helderheid: ' + (bri ? bri : '0') + '%';
  ]]]

You divide it by 2.55 :slight_smile:

label: |
  [[[
    var bri = states['light.tvlamp'].attributes.brightness;
    return 'Helderheid: ' + (bri ? Math.round(bri / 2.55) : '0') + '%';
  ]]]
1 Like

OC
what/which card do you want to see?

Thanks allot, works perfect! :slight_smile:

Looks like card-mod 3.0.0 breaks the state colors?

              - type: custom:button-card
                entity: switch.mm1_a0_out
                name: Testswitch
                show_state: true
                state:
                  - value: "on"
                    color: red
                  - value: "off"
                    color: blue

Auswahl_446
Auswahl_447
after card-mod 3.0.0 and page reload
Auswahl_449
Auswahl_448
A click on the button fixes the colors until the next refresh.

EDIT: perfect timing :slightly_smiling_face:

This one broke also my config, removing it did fix it immediately.

The post that you submitted a single card here in Oct '19. Thanks !

ok, but the info is all there? the config for the stack, and a few individual cards are shared already?

my setup has changed quite a bit since then :wink:

this is my version dashboard for now ( a bit dark, but its the dark mode not to disturb the other bedroom user):

config is like this:

type: vertical-stack
cards:

  - type: custom:button-card
    name: Home Assistant version info
    template: button_default_title

  - type: horizontal-stack
    cards:

      - !include /config/lovelace/includes/include_button_updater.yaml

      - type: custom:button-card
        template: button_body
        entity: sensor.ha_current_stable_version
        name: Stable version

      - type: custom:button-card
        template: button_body
        entity: sensor.ha_available_version
        name: Available version

      - type: custom:button-card
        template: button_body
        entity: sensor.ha_current_beta_version
        name: Current β version

  - type: horizontal-stack
    cards:

      - type: custom:button-card
        template: button_updater
        entity: binary_sensor.updater
        name: Updater
        show_last_changed: true
        hold_action:
          action: url
          url_path: https://www.home-assistant.io/latest-release-notes/

      - type: custom:button-card
        template: button_updater
        entity: binary_sensor.ha_update_available
        name: Update available

      - type: custom:button-card
        template: button_body
        entity: sensor.ha_local_version
        name: Local version

      - type: custom:button-card
        template: button_body
        entity: sensor.ha_current_dev_version
        name: Dev version

  - type: horizontal-stack
    cards:

      - !include /config/lovelace/includes/include_button_hassos_update.yaml

      - !include /config/lovelace/includes/include_button_supervisor_update.yaml

      - type: custom:button-card
        color_type: blank-card

      - type: custom:button-card
        color_type: blank-card

  - type: custom:button-card
    template: vertical-filler

of course this needs the individual buttons and includes, with several button-card templates. But it all depends on your needs, for which you should create the backend data first.

1 Like

Hi @RomRider ,

posting the above I now notice the need for a request I forgot about: have us template the show_last_changed… I really need that only when the entity is on, like:

        show_last_changed: >
          [[[ return 'true' if entity.state == 'on'; ]]]

in the screenshot you can see the button Updater show 8 hours ago (last restart) but I really dont need that. Only want it to show last_changed when the updater is ‘on’.

allow a FR on that please?

did try this:

        state:
          - value: 'on'
            show_last_changed: true
          - value: 'off'
            show_last_changed: false

but it was against better judgement, (and not documented either) so it doesn’t work :wink:
edit added the tag, I saw I forgot that previously

Thanks, any chance your entire config is in a public github repo ? I’d love to pick and choose, your style is simliar to mine and I’d love to take creative license w/ some of your work

If not I’d settle for these

      - !include /config/lovelace/includes/include_button_updater.yaml
      - !include /config/lovelace/includes/include_button_hassos_update.yaml
      - !include /config/lovelace/includes/include_button_supervisor_update.yaml
1 Like

No sorry, no public repo.
but these are the cards you asked for:

include_button_updater.yaml:

type: custom:button-card
template: button_body
entity: binary_sensor.ha_update_available
icon: mdi:home-assistant
name: Core update
show_state: false
tap_action:
  action: more-info
  entity: sensor.ha_available_version
hold_action:
  action: url
  url_path: https://github.com/home-assistant/core/releases

#https://www.home-assistant.io/latest-release-notes/

styles:
  card:
    - font-size: 10px
  grid:
    - grid-template-areas: '"i i" "n n" "available available" "local local"'
  icon:
    - color: &color
        >
          [[[ if (entity.state == 'on') return 'green'; return 'grey'; ]]]
    - width: 30%
    - animation: &animation
        >
          [[[ if (entity.state == 'on') return 'blink 2s ease infinite'; ]]]
  custom_fields:
    available:
      - align-self: start
      - justify-self: start
      - --text-color-sensor: *color
      - --animation: *animation
    local:
      - align-self: start
      - justify-self: start
      - --text-color-sensor: >
          [[[ if (entity.state == 'on') return 'maroon'; return 'green'; ]]]
custom_fields:
  available: >
    [[[ return `<span>Avail: </span> <span style='color: var(--text-color-sensor);animation: var(--animation)'>${states['sensor.ha_available_version'].state}</span>`; ]]]
  local: >
    [[[ return `<span>Local: <span style='color: var(--text-color-sensor);'>${states['sensor.ha_local_version'].state}</span></span>`; ]]]

include_button_hassos_update.yaml:

type: custom:button-card
template: button_body
entity: sensor.hassos_updates
icon: mdi:home-assistant
name: OS update
show_state: false
tap_action:
  action: more-info
hold_action:
  action: url
  url_path: https://github.com/home-assistant/operating-system/releases

styles:
  card:
    - font-size: 10px
  grid:
    - grid-template-areas: '"i i" "n n" "newest newest" "current current"'
  icon:
    - color: &color
        >
          [[[ if (entity.state == 'on') return 'green'; return 'grey'; ]]]
    - width: 30%
    - animation: &animation
        >
          [[[ if (entity.state == 'on') return 'blink 2s ease infinite'; ]]]
  custom_fields:
    newest:
      - align-self: start
      - justify-self: start
      - --text-color-sensor: *color
      - --animation: *animation
    current:
      - align-self: start
      - justify-self: start
      - --text-color-sensor: >
          [[[ if (entity.state == 'on') return 'maroon'; return 'green'; ]]]
custom_fields:
  newest: >
    [[[ return `<span>Newest: </span> <span style='color: var(--text-color-sensor);animation: var(--animation)'>${entity.attributes.newest_version}</span>`; ]]]
  current: >
    [[[ return `<span>Current: <span style='color: var(--text-color-sensor);'>${entity.attributes.current_version}</span></span>`; ]]]

include_button_supervisor_update.yaml:

type: custom:button-card
template: button_body
entity: sensor.supervisor_updates
icon: mdi:home-assistant
name: Supervisor update
show_state: false
tap_action:
  action: more-info
hold_action:
  action: url
  url_path: https://github.com/home-assistant/supervisor/releases

styles:
  card:
    - font-size: 10px
  grid:
    - grid-template-areas: '"i i" "n n" "newest newest" "current current"'
  icon:
    - color: &color
        >
          [[[ if (entity.attributes.update_available == true) return 'green'; return 'grey'; ]]]
    - width: 30%
    - animation: &animation
        >
          [[[ if (entity.attributes.update_available == true) return 'blink 2s ease infinite';
              return 'none'; ]]]
  custom_fields:
    newest:
      - align-self: start
      - justify-self: start
      - --text-color-sensor: *color
      - --animation: *animation
    current:
      - align-self: start
      - justify-self: start
      - --text-color-sensor: >
          [[[ if (entity.attributes.update_available == true) return 'maroon'; return 'green'; ]]]
custom_fields:
  newest: >
    [[[ return `<span>New: </span> <span style='color: var(--text-color-sensor);animation: var(--animation)'>${entity.attributes.newest_version}</span>`; ]]]
  current: >
    [[[ return `<span>Cur: <span style='color: var(--text-color-sensor);'>${entity.attributes.current_version}</span></span>`; ]]]

templates:

button_body:
  template:
    - action_more
    - main_config
    - styles_grid
    - styles_img_cell
    - styles_label
    - styles_name_left
    - styles_state
  styles:
    icon:
      - color: grey
    lock:
      - color: red
    card:
      - background-color: var(--card-background-color)
      - color: var(--primary-color)

action_more:
  tap_action:
    action: more-info
    haptic: light
  hold_action:
    action: more-info
    haptic: success

main_config:
  color: auto
  size: 30%
  aspect_ratio: 1/1
  show_state: true
  show_label: true

styles_grid:
  template: styles_card
  styles:
    grid:
      - grid-template-areas: '"i" "n" "s" "l"'
      - grid-template-columns: 1fr
      - grid-template-rows: 1fr min-content min-content

styles_card:
  styles:
    card:
      - padding: 5px

styles_img_cell:
  styles:
    img_cell:
      - align-items: start
      - justify-content: start

styles_label:
  styles:
    label:
      - font-size: 11px
      - justify-self: start
      - text-align: start

styles_name_left:
  template: styles_name
  styles:
    name:
      - justify-self: start
      - text-align: start
      - text-overflow: unset
      - white-space: unset
      - word-break: break-word

styles_name:
  styles:
    name:
      - font-size: 13px
      - font-weight: bold

styles_state:
  styles:
    state:
      - font-size: 11px
      - font-weight: bold
      - justify-self: start
      - text-align: start
      - text-transform: capitalize

2 Likes

Hello @RomRider, what am I doing wrong, that it does not want to work, I cleaned the browser and nothing more, I have the latest plugins, this is my code:


              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    icon: 'mdi:thermostat-box'
                    show_icon: true
                    show_name: false
                    state:
                      - value: 'on'
                        styles:
                          card:
                            - box-shadow: >
                                [[[ return states['sun.sun'].state ==
                                'below_horizon'
                                  ? 'inset -4px -4px 5px rgba(60, 60, 60, .6), inset 4px 4px 5px rgba(0, 0, 0, .5)'
                                  : 'inset -3px -3px 5px rgba(255, 255, 255), inset 3px 3px 5px rgba(0, 0, 0, .08)';
                                ]]]
                          icon:
                            - color: var(--paper-item-icon-active-color)
                    styles:
                      card:
                        - width: 80px
                        - height: 80px
                        - margin: 10px
                        - border-radius: 15px
                        - box-shadow: >
                            [[[ return states['sun.sun'].state ==
                            'below_horizon'
                              ? '-5px -5px 10px rgba(50, 50, 50, .2), 6px 6px 10px rgba(0, 0, 0, .08)'
                              : '-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03)';
                            ]]]
                        - background-color: var(--primary-background-color)
                      icon:
                        - color: var(--primary-text-color)
                    tap_action:
                      action: fire-dom-event
                      browser_mod:
                        command: popup
                        title: Termostat Salon
                        card:
                          type: 'custom:thermostat-card'
                          entity: climate.termostat_salon_danfos_thermostat
                          small_i: true
                          title: Salon
                          deviceID: this

What doesn’t work?

popup dosn’t work ;(

This thermostat-card has no options small_i and deviceID, also the deviceID should be removed since latest browser_mod.

Hi,

I’m trying to control the color of the icon on the state of different speakers. Tried creating a group speakers but this not seems to work. Now the icon/color only change if the Sonos keuken speaker is on/off, but if other speakers like badkamer and living are only playing the icon/color is not changing. Anyone have a clue how to listen to multiple entity’s and different states, because the play one speakers are on/paused and the playbar is on/idle. Or is there any other approach listening to the state of multiple speakers?

edit: Ok after readed further i have added the trigger_update to the code but it not seems to work? If i on/pause the sonos keuken it still works, but for sonos badkamer it’s not changing the icon/color?

triggers_update:
  - media_player.badkamer
type: 'custom:button-card'
entity: media_player.sonos_keuken
aspect_ratio: 1/1
tap_action:
  action: navigate
  navigation_path: sonos
hold_action:
  action: call-service
  service: media_player.media_play_pause
  service_data:
    entity_id: media_player.sonos_keuken
show_name: false
color: 'rgb(255, 197, 64)'
icon: 'mdi:speaker-multiple'
state:
  - value: paused
    icon: 'mdi:speaker-off'
    color: 'rgb(85, 145, 194)'

I have a sensor on my garagedoor that is defined as device_class garage_door (binary sensor template) but on the button I only get “on/off” instead of “open/closed”. I’m a beginner on this but if someone can point me in the right direction it would be appreciated.

binary_sensor.garageporten_template:
  device_class: garage_door
type: 'custom:button-card'
entity: binary_sensor.garageporten_template
label: |
  [[[
    return states['binary_sensor.garageporten_template'].state;
  ]]]
show_label: true
show_name: false
styles:
  card:
    - height: 100px
    - width: 100px

I’m getting this:
image

But would like this:
image

Don’t use label, just use show_state: true

What do you mean by listen to multiple entities? What are you trying to achieve exactly?