Lovelace: Button card

[wackmofo (Tomaz)]

Hi,

I am trying to use the button card to display the state of another entity and change the style. Currently I have it like this:

          - type: custom:button-card
            entity: light.living_area_lights #hue_group
            name: Living Area
            show_state: false
            styles:
              top: 20%;
            tap_action:
              action: call-service
              service: light.toggle
              service_data:
                entity_id: light.office_light
            state:
              - entity_id: light.office_light
                value: 'on'
                styles:
                  card:
                    - background-color: '#f0c209'
              - entity_id: light.office_light
                value: 'off'
                styles:
                  card:
                    - background-color: '#fffff'
            template:
              - light
              - icon_hue

I have the entity on living area lights so I use the popup for hold_action to manage hue lights. But with the tap I am toggling the office light via KNX.

The problem is that I would like to display the state of the office_light and also change the background on the card. With my code the background is always #f0c209, no matter if office_light is on or off.

Help please

[Mariusthvdb (Marius)]

This is a Jinja template and can not be used in the button card …
You should really read up on the difference.

It could be a template sensor though.

However, as I have displayed the last button, you should really do that. The master (Romrider) suggest that as way to go for templates, easy as can be.

If must you can embed it in another card and position it to the spot you want

[pedolsky]

state:
  - operator: template
    value: |
      [[[ return states['light. office_light'].state == 'on'  ]]]
    styles:
      card:
        - background: red

  - operator: template
    value: |
      [[[ return states['light. office_light'].state == 'off'  ]]]
    styles:
      card:
        - background: green

[Mariusthvdb (Marius)]

embed timer card as notification:

      - type: custom:button-card
        template: styles_cf_notification
        entity: sensor.second_updater
        aspect_ratio: 1/1
        show_state: true
        custom_fields:
          notification:
            card:
              type: custom:button-card
              styles:
                card:
                  - box-shadow: none
                  - font-size: 11px
                  - font-weight: bold
              entity: timer.tester
              show_state: true
              show_name: false
              show_icon: false
        tap_action:
          action: toggle
          entity_id: input_boolean.tester

needs some more formatting, but hey, this is what you were looking for?

[Marcoletto (Marco)]

Yeah, I’ve created a template named sensor.sensore_timer_scaldabagno (it work)
If I put it on my button_card code the custom_field become [object] as you can see below:

type: custom:button-card
aspect_ratio: 1/1
triggers_update: timer.scaldabagno
entity: input_boolean.scaldabagno_temporizzato
name: Scaldabagno Timer
icon: mdi:thermometer-plus
custom_fields:
  notification: |
    [[[ return states ['sensor.sensore_timer_scaldabagno'] ]]]
styles:
  img_cell:
    - justify-content: start
    - align-items: start
    - padding-left: 10px
    - padding-bottom: 10px
  custom_fields:
    notification:
      - border: 1px solid var(--text-color-on)
      - border-radius: 12px
      - font-size: 11px
      - font-weight: bold
      - height: 18px
      - line-height: 18px
      - min-width: 12px
      - padding: 0px 3px
      - position: absolute
      - right: 5%
      - top: 10%

[Mariusthvdb (Marius)]

from now, if you change code, please only post the changed code ? unless you got a complete new config ofc… btw, your error here is you’re missing the .state in the template.

Anyways, as I posted above, you should embed the button-card with entity timer in your other button-card. Dixit button-card Author/Magician

this is a bit more fledged out, with adequate services:

      - type: custom:button-card
        template: styles_cf_notification
        entity: timer.tester
        aspect_ratio: 1/1
        show_state: true
# use a state_display, because otherwise 'show_state: true' will show the remaining time as state ;-)
        state_display: >
          [[[ return entity.state; ]]]
        custom_fields:
          notification:
            card:
              type: custom:button-card
              styles:
                card:
                  - box-shadow: none
                  - font-size: 11px
                  - font-weight: bold
              entity: timer.tester
              show_state: true
              show_name: false
              show_icon: false
        tap_action:
          action: call-service
          service: >
            [[[ return entity.state === 'active' ? 'timer.pause' : 'timer.start'; ]]]
          service_data:
            entity_id: timer.tester
        hold_action:
          action: call-service
          service: >
            [[[ return entity.state === 'active' ? 'timer.cancel' : 'timer.pause'; ]]]
          service_data:
            entity_id: timer.tester

thank you @Marcoletto for TIL …

[petro]

why… just put the second_updater in triggers update and have the timer as the main entity.

[Mariusthvdb (Marius)]

that is not even needed. button-card shows the timers remaining seconds as is.

      - type: custom:button-card
        entity: timer.tester
        show_state: true

suffices for that. But, above was asked to have that show in a notification field. At first I hadnt realized timer entity uses the internal clocking and can not be shown by its attribute.

Embedding a button-card makes it all happen, no secondary helpers needed.

[Marcoletto (Marco)]

but in this case the entity of the button is the timer, not other entities.
Timer in the button and timer in the right top corner

[Mariusthvdb (Marius)]

Yes, what ever you want. I just made this quickly to show some action possibilities too and display what state shows why

[Marcoletto (Marco)]

Ah ok… but if you try to put another entity for the button, you will see that the timer will not visible

[Mariusthvdb (Marius)]

Sorry but that must be a config mistake. The button card embed is using its own entity, so you can use any thing on the main button. Or nothing for that matter

[Mariusthvdb (Marius)]

been meaning to ask for sometime but forgot:
Chrome seems to behave differently from Safari in many ways, and this is a bad one…
using a (decluttering) card config like:

    - type: custom:button-card
      confirmation:
        text: >
          Open cover at 'My' position?
      entity: '[[command]]_my'

Safari nicely shows:

but Chrome reveals the entire server path and port (mydomain.duckdns:port):

Is there anything we can do as user to hide that/make it show like Safari? If not would this warrant an issue in the repo…?So you can fix it resource side?

[flyize]

Anyone know if its even possible to use strptime inside this button. As soon as I add that, the whole button disappears, so I’m assuming it isn’t.

edit: I managed to resolve this by creating a template sensor, and then referencing that inside the button. Is there a way to do whole thing inside the button?

[RomRider]

The button-card uses javascript, not jinja2 (strptime is a jinja2/python function). So you’ll have to write javascript to make it work directly in the button-card.

[flyize]

While I’m here, I have a problem that I don’t think is related specifically to this comp, but figured I’d ask you guys anyway…

I cast a Lovelace view loaded with these custom buttons to a Google Hub. Since sometime last month, that has errored out with the following message:

‘custom element doesn’t exist: button-card’

This Lovelace view works fine on desktop/mobile, but fails on the Google Hub. One fix that worked up until last month was to delete the HACS entry in Resources and replace it with a direct link to ‘/local/community/button-card/button-card.js’. But that doesn’t work anymore.

I opened an issue on Github for the Cast integration, but it got moved to core, where I’m assuming it will die. Do you guys have any ideas?

edit: This is resolved. Turns out that I had forgotten that I was also using card-mod, which needed to be pointed at /local/. Do any of you have a better grasp on this stuff and can maybe suggest who would fix this? Apologies for being offtopic…

[ASNNetworks]

Has something changed with transition effect? Since a few updates ago (I think 2021.12) this doesn’t work anymore. I haven’t changed anything in my code or setup but the transition suddenly is gone. I used this: transition: all 0.5s ease when a entity changed between states, which applied filter: grayscale(100%) blur(17px) in a transition.

Any ideas?

[Mariusthvdb (Marius)]

hi!

using this (your) template to extract the icon_color attribute

  styles:
    icon:
      - color: |
          [[[ if (entity && entity.attributes && entity.attributes.templates) {
                const tpl = entity.attributes.templates;
                if (tpl.icon_color) {
                  return new Function('state', `'use strict'; ${tpl.icon_color}`).call(this, entity.state);
                }
              }
              return null; ]]]

set on entities with custom-ui successfully all over. Until now… Id like to set it on a custom_field notification border:

support_custom_ui_notification_border:
  styles:
    custom_fields:
      notification:
        - border-color: |
            [[[ if (entity && entity.attributes && entity.attributes.templates) {
                  const tpl = entity.attributes.templates;
                  if (tpl.icon_color) {
                    return new Function('state', `'use strict'; ${tpl.icon_color}`).call(this, entity.state);
                  }
                }
                return null; ]]]

but it does exactly nothing. If I set it on color:, it works fine,

or background:

and most other fields I tested.
Is there a reason I can not set it on border-color? Ofc I tried a fixed color in the button-card template, to see if it is placed correctly, and that too works just as expected.

                    type: custom:button-card
                    aspect_ratio: 1/1
                    template:
                      - support_custom_ui # color the icon
                      - support_custom_ui_notification_border #color border
                      - styles_name_left
                      - styles_card
                      - styles_cf_notification
                      - styles_img_cell
                      - plot
                    custom_fields:
                      notification: >
                        [[[ return entity.state + 'W'; ]]]

there’s no conflict in the other templates.
please help me out? thanks

update

fix it. turns out if one doesnt add border-style nothing shows… and as I replaced shorthand border: 2px solid red to use the template, and thus individual keys for the border properties, I had lost that…

[RichardU (Richard)]

This is how I can call a WLED preset using Developer Services

service: select.select_option
target:
  entity_id: select.wled_brew_preset
data:
  option: Preset 4

I’m having trouble converting that into Button card format. I’ve tried a bunch alternatives including the one below. What am I missing?

                tap_action:
                  action: call-service
                  service: select.select_option
                  service_data:
                    target:
                      entity_id: select.wled_brew_preset
                    data:
                      option: Preset 4

[petro]

data is the service_data section, you put target and data in the service_data section. Remove your target line and your data line and keep the rest.