Lovelace: Button card

[shieldmaiden95 (Meredith Daniels)]

ahhh perfect! Thank you

[jacxon4 (José Antonio Cañizares)]

You rock dude!!! I’ve managed to use your integration perfectly, along with using the Philips icon repository you created but I’m struggling to have the “philips circle”. Do you mind to share it?

[kongo09]

@jacxon4

Do you mind to share it?

It’s not my integration

The code for my “philips circle” is in this post:

Lovelace: Button card

Thanks, @Mariusthvdb, @RomRider and all the other here for all the great help and support. The custom:button-card really is amazing. I combined it with @thomasloven custom:state-switch and custom:card-mod to leverage @betaboon’s fresh attempt at integrating the Philips air purifiers. Adding on top some self-made icons (what an act to get that right). Here is what my card looks like: High air quality, auto fan speed, display light on and humidification activated Somewhat lower air quality, n…

[jacxon4 (José Antonio Cañizares)]

Thanks for answering so fast
I used that code But the code mentions custom:circle icon which is not on the code you shared nor the icon repository. Maybe is somewhere else?

[kongo09]

Well spotted, my mistake. This is from my other icon pack:

GitHub - kongo09/hass-kongo09-icons: Personal icon set for Home Assistant

It should then be referenced as kongo09:circle. I should update that sometime…

[Mariusthvdb (Marius)]

in your card you should still add the custom_field it self. Right now, you only entered the styles for the custom_field.
see the last lines of Lovelace: Button card - #6239 by Mariusthvdb

there you point that field to your card entity, which is set to the timer you desire?

[Marcoletto (Marco)]

Oh… with entiy.state the label appears, wonderful… I’m beginning to understand

But if I insert timer.scaldabagno the terminal give me an error:

custom_fields:
  notification: >
    [[[ return timer.scaldabagno; ]]]

ButtonCardJSTemplateError: ReferenceError: Can’t find variable: timer in ‘return timer.scaldabagno ;’

The entity is correct:

[Mariusthvdb (Marius)]

that is because for Java script (which is the language these templates are in) you are now returning a ‘variable’ timer. You want to return the entity.state directly.

[Marcoletto (Marco)]

And how i tell to HA that i want a duration of timer? (The countdown)
I try with template but does not work.

[Mariusthvdb (Marius)]

now why dont you try what I have been suggesting you now for 3 times… and then show us the button result. entity.state should show as ‘idle’, like your screenshot shows. Or, ofcourse, when counting, it should show the remaining time.

This might require some extra work, because I am not sure if it update every second automatically… but thats the next step.

first do as I asked, and use entity state.

O, and if you read the documentation, (and my remarks above): button-card uses Javascript (JS) templates, and not Jinja templates, like core HA does.

Your template will not work, and if you want an attribute, you’d need something else. (I wont tell you now, because then you will still not enter that I asked you to )

(btw, these screenshots of the ui editor are not very useful. Better paste your correctly formatted yaml code, and a separate screenshot of the button.)

[seldom (Seldom Lee)]

          styles:
            card:
              - height: 7em
              - border-top: 24px groove brown
              - border-right: 14px groove gray
              - border-left: 14px groove gray
              - background: >-
                  repeating-linear-gradient(0deg, black 10px, gray 10px, silver
                  24px)
              - background-blend-mode: darken
              - border-radius: 1em 1em 0em 0em

[Marcoletto (Marco)]

Ok, here you are the screenshot and the code.
But, the entity.state return the state of input_boolean.scaldabagno_temporizzato, not the timer.scaldabagno status.

type: custom:button-card
entity: input_boolean.scaldabagno_temporizzato
name: Scaldabagno Timer
icon: mdi:thermometer-plus
custom_fields:
  notification: |
    [[[ return entity.state ]]]
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%

Thank you for your patience

[Mariusthvdb (Marius)]

right, thats cool, and now I see you dont need the entity at all… sorry for that, I was distracted by the object_id.

now you need to call the state of timer.scaldabagno and do that in JS like states['timer.scaldabagno'].state.

in the template hooks:

[[[ return states['timer.scaldabagno'].state; ]]]

and since we’re in the learning mode, please forgive me to tell you to ‘delimit’ those JS lines with a semi-colon always, making sure it is the end of a line. just grow the habit.

[Marcoletto (Marco)]

Well well well… Now I see “Idle” when the button is OFF and “active” when the button is ON
The countdown is not yet visible.
Here you are the code:

type: custom:button-card
entity: input_boolean.scaldabagno_temporizzato
name: Scaldabagno Timer
icon: mdi:thermometer-plus
custom_fields:
  notification: |
    [[[ return states['timer.scaldabagno'].state; ]]]
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)]

you might want to format you button a bit, or at least put in in a grid card with eg 4 column, so it gets resized. than you get a better feeling for the space you want it to use and the different relative proportions of the card sections. add 1/1 for square.

  - type: grid
    columns: 4
    cards:

      - type: custom:button-card
        aspect_ratio: 1/1
        triggers_update: timer.scaldabagno

what happens when the countdown is started, can you show that in the dev tools?

as said, it might need a ‘hack’ that is to tell HA to update an entity every second. but maybe not, first add the timer to the triggers_update: option like above

If that doesnt help, you can implement an automation, that you only fire under certain conditions:

automation:

  - alias: Second updater
    id: Second updater
    mode: restart
    trigger:
      platform: time_pattern
      seconds: '/1'
    condition:
      condition: state
      entity_id: input_boolean.second_updater
      state: 'on'
    action:
      service: homeassistant.update_entity
      entity_id:
        - sensor.second_updater
        - sensor.new_years_day_countdown
        - sensor.since_new_years_day_counting

[Marcoletto (Marco)]

I’ve inserted your new lines of code.
The following screenshots show you the button and dev tools before I click on the button and after.
I’ve added one more screenshot that show you the timer bar in another my experiment.
Seems that the timer was been updated every seconds.

Thanks

[Marcoletto (Marco)]

@Mariusthvdb maybe… you don’t have a timer to try to put it in a botton on you configuration?
To verify if you see “Idle” / “Active” or if you see the minutes.
Maybe my config are wrong…

[Mariusthvdb (Marius)]

no sorry, but I guess you want the ‘remaining’ attribute to be displayed?
you can eg make the color change on state (grey for idle, orange for active), so you can see that in the icon, and then have the attribute show the remaining time, (when active only)

[[[ states['timer.scaldabagno'].attributes.remaining; ]]]

and

styles:
  icon:
    - color: >
        [[[ return entity.state === 'active' ? 'orange' ; 'grey'; ]]]

[Marcoletto (Marco)]

Yes, I would like the remaining value, the countdown.
I’ve inserted the “attributes.remaining” code but that does not work.
I can’t see the digits of the timer remaining.
Why?

---

I’ve try 2 solutions but they don’t work; here you are the 2 solutions tested:

[[[ states['timer.scaldabagno'].attributes.remaining; ]]]
[[[ return states['timer.scaldabagno'].attributes.remaining; ]]]

---

Actual code and below the screenshot of the result:

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: >
    [[[ states['timer.scaldabagno'].attributes.remaining; ]]]
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%

About the color icon, for now, it’s best if I focus on one piece of code at a time

Thx

[Mariusthvdb (Marius)]

You forgot/ need return

That is only available when active?