Custom Button Card - Customize Timer State

Configuration Frontend
,
1

Hello,

On a dashboard I am trying to create a basic timer button that starts when clicking on it and displays remaining time while running.

type: custom:button-card
entity: timer.jeux_enfants
layout: icon_state
color: '#3b7ead'
size: 100%
show_name: false
show_icon: true
show_state: true
show_label: false
label: '[[[ return entity.state === "idle" ? "Start Timer" : entity.state ]]]'
tap_action:
  action: call-service
  service: timer.start
  service_data:
    entity_id: timer.jeux_enfants
styles:
  card:
    - height: 90px
  state:
    - font-size: 24px
    - font-weight: bold

This custom button does almost all of it, but I would like to tweak the “idle” state display text to something more engaging like “start timer”.
Is there a way to customize the state text? I can dynamically customize icon, color, background etc, but just not the text label.
I have tried using label as included in the code, but displaying the label instead of state overwrites the dynamic countdown .

Has someone seen such example?

1 Like
2

Try


show_state: true
state_display: |
  [[[ if (entity.state == "idle") return 'Start Timer' ]]]

Ends in:

(active)

Bild
Bild1060Ă—237 19.5 KB

(idle)

Bild
Bild1000Ă—225 24.4 KB

2 Likes
3

I knew there must have been a way.
Thanks a lot (and happy new year)

4

Can somebody please explain why this returns a time like 7:44 when not idle? The condition doesn’t return anything, so I guess it’s using some default property… but which is it?

I’d like to use it in a string, like 7:44 minutes left, but I don’t know how to set up an else in that code. Thanks

5

Are you using a custom button card?

6

Post your complete code.

7

Yes I’m using a custom card, here is the whole thing

      - type: custom:button-card
        entity: timer.ask_timer
        name: Ask timer
        show_name: false
        show_state: true
        state_display: |
          [[[ if (entity.state == "idle") return 'Start Timer' ]]]
        icon: mdi:timer-lock-outline

This works well. It either shows the string “Start timer”, when idle, or the elapsed time, counting down.

My question is about the if/then logic, and what is the value when entity.state is not idle. If I can get that value (elapsed time) in an expression that would be useful.

Another related question, generalizing, is: is there anyway to output the whole thing, the whole entity object (in JSON or something like it) to see which fields are available, and work from there?

Thanks

8

state_display overwrites the default state, as far as a certain state is defined in another way. In the example above the idle state is re-defined. When the timer is not idle, the active state is displayed. If you want another value for the active state, you can define an else that way:


        state_display: |
          [[[ if (entity.state == "idle") return 'Start Timer'; return 'Timer is active'; ]]]

I’m not sure if I understand you right. Do you mean the entity’s attributes?

9

Yes, exactly. I want to get to the value of the elapsed time, and I don’t know what that attribute is called…

10

You can see an entity’s attributes via Developer Tools —> States. The following attributes are only a available when the timer is active:


finishes_at: '2023-04-02T11:25:25+00:00'
remaining: '0:03:00'

But it won’t do anything for you. You have to calculate the elapsed time.

12

Couldn’t find a more recent post on this…
Having a similar issue.

Trying to use custom:button-card to show the Elapsed time of my Meater Thermometer. When using an Entity card, it shows fine.
image

When using a button card, it shows the date/timestamp instead.
image

Here’s the code I’m trying:

          - type: custom:button-card
            entity: sensor.meater_cook_time_elapsed
            name: Elasped
            show_label: false
            show_state: true 
            state_display: |
             [[[ if (entity.state == "unavailable") return 'Start Timer'; ]]] 
            styles:
              grid:
                - grid-template-areas: '"i n" "i s"'
                - grid-template-columns: 52px 1fr
              card:
                - margin: 0
                - border-radius: 50px
                - background: '#2d2d2d'
                - padding: 6px 0px 6px 0px
              img_cell:
                - background: '#1f1f1f'
                - border-radius: 515px
                - width: 40px
                - height: 40px
              icon:
                - width: 20px
                - color: '#8c8c8c'
              name:
                - justify-self: start
                - font-size: 14px
                - font-weight: 500
                - padding-left: 6px
              state:
                - justify-self: start
                - font-size: 12px
                - padding: 0px 0px 3px 0px
                - opacity: '0.7'