Timer CountDown on Button

[Marcoletto]

Ciao,
I' m trying to put two type of timer in my buttons without good results.

I've two scenarios:

1st - with a button I activate an input_boolean that starts a script; inside the script there is 59minutes delay then the script shut down automatically. I would like to see the timer that starts from 59:00 and goes down to 0:00 (see sample picture of the button layout)

2nd - I would like the same result but, in this case, the timer change because is related to an input_number slider (see picture of the script). So, the scope is to see the timer that start from for example to 10:00 ad goes down to 00:00

Please, can you help me to reach this target?

[MrBearPresident]

Did you have a look at this: #937

[MrBearPresident]

The service call is the easy part.
The more advanced parts of the example are.

• displaying the live time (this is what you need)
• showing a circulare progressbar
• hidding sub-buttons conditionaly
• changing icons of sub-buttons conditionally

[Marcoletto]

#937

So I have to write something like this?

`
type: custom:bubble-card
card_type: button
button_type: state
entity: input_boolean.scaldabagno_temporizzato
sub_button:

• entity: timer.scaldabagno
  `

[Marcoletto]

Timers are not yet supported, to my knowledge on the to-do list of Cloos. This is because their state is handled differently, you can see that in the developer tools, where the timer just has the state "active", but not the remaining time. So at the moment you need workarounds, like the solution of MrBearPresident, or I use a separate bar card that is conditionally only shown when the timer is active.

I don' t understand how work the workaround of MrBearPresident. :(

[MrBearPresident]

Place this in your custom styles:

#Place all the DOM changing stuff on the bottom
  ${(() => {
    //Getting the timer-data from hass and saving as local variable
    const timerEntity = hass.states['timer.scaldabagno'];
    
    //Saving the now as a Date variable so we can calculate the difference 
    const now = new Date(); 
    
    //Preparing the result 
    let result = "";

  	try {
      	  const endTime = new Date(timerEntity.attributes.finishes_at);      //Taking endtime from timer-entity and making a date-time from it 
  	  const runningTime = Math.round((endTime - now)/1000);           //Calculating the difference
          const minutes = Math.floor(runningTime / 60);                            //Distilling the minutes from it 
          const remainingSeconds = runningTime % 60;                            //Save the rest as seconds

          if(isNaN(runningTime) && timerEntity.state !='paused')
               {result = timerEntity.attributes.duration;}                                //if not running and not paused show initial value
              else if(timerEntity.state==='paused')
               {result = timerEntity.attributes.remaining;}                            // if paused show remaining value
              else
               {result = minutes + ":" + ("0" + remainingSeconds).slice(-2) ;}  //if running show remaining seconds
  	} 
  	catch (error) { 
          result = timerEntity.attributes.duration;          //if something went wrong show initial value
        }
     
      //writing to the sub-button
      card.querySelector('.bubble-sub-button-1 .bubble-sub-button-name-container').innerText = result;  
      }
  )()}

[Marcoletto]

Place this in your custom styles:

#Place all the DOM changing stuff on the bottom
  ${(() => {
    //Getting the timer-data from hass and saving as local variable
    const timerEntity = hass.states['timer.scaldabagno'];
    
    //Saving the now as a Date variable so we can calculate the difference 
    const now = new Date(); 
    
    //Preparing the result 
    let result = "";

  	try {
      	  const endTime = new Date(timerEntity.attributes.finishes_at);      //Taking endtime from timer-entity and making a date-time from it 
  	  const runningTime = Math.round((endTime - now)/1000);           //Calculating the difference
          const minutes = Math.floor(runningTime / 60);                            //Distilling the minutes from it 
          const remainingSeconds = runningTime % 60;                            //Save the rest as seconds

          if(isNaN(runningTime) && timerEntity.state !='paused')
               {result = timerEntity.attributes.duration;}                                //if not running and not paused show initial value
              else if(timerEntity.state==='paused')
               {result = timerEntity.attributes.remaining;}                            // if paused show remaining value
              else
               {result = minutes + ":" + ("0" + remainingSeconds).slice(-2) ;}  //if running show remaining seconds
  	} 
  	catch (error) { 
          result = timerEntity.attributes.duration;          //if something went wrong show initial value
        }
     
      //writing to the sub-button
      card.querySelector('.bubble-sub-button-1 .bubble-sub-button-name-container').innerText = result;  
      }
  )()}

Thank you for your time, appreciate.

YESSSSS.... I found it!!

Now it's working!

Thank you again for your help!

[johndoe0815]

While that code generally works (thanks for this!!!), it does not update frequently for me. The timer on a standard card updates perfectly, with this code here on a bubble button the timer updates infrequently, between less than a second and about three or four seconds. So it jumps from one value to another, not counting smoothly every second.
This is in different browsers on different devices on different dashboards, while the timers on standard cards always count every single second.
@MrBearPresident Do you know why and how to influence that?

[Marcoletto]

Also, @MrBearPresident could you please help me to understand two important things:

• first one, most important, could you explain me what I've done by adding your code? What the code means/do?
• second one, could you help me (and teach me) to program the two botton below to becam orange when I turn on the "Scaldabagno" like the botton above? Seems that by using your code it's deactivate that.
  (here below the button OFF and button ON)

And, of course, sorry for bother you!

[MrBearPresident]

Clooos made it so that if you have something in the style part in between ${...} then it is executed as it is javascript. In this way you can get info from the HA. (like other entities).

${(() => {})()} This is for making more complex functions.

The rest I put in comments.
//Getting the timer-data from hass and saving as local variable
//Saving the now as a Date variable so we can calculate the difference
//Preparing the result
//Taking endtime from timer-entity and making a date-time from it
//Calculating the difference
//Distilling the minutes from it
//Save the rest as seconds
//if not running and not paused show initial value
// if paused show remaining value
//if running show remaining seconds
//if something went wrong show initial value
//writing to the sub-button

[Marcoletto]

OMG.... I tryed to change somethings but the button doesn' t change the color when I press it.

[whittssg]

Hello, I tried this and i also tried your other suggestion (#937). While they both work they seem super slow at updating (maybe once every 15 seconds or so), I am guessing its something todo with the host system being a ras pi 4. I was thinking though, is there anyway we can add https://github.com/rianadon/timer-bar-card to a bubble card maybe as an extra button ? Just the progress bar? I have this installed and it updates every second, the author has a mushroom card option but nothing for bibble cards. Thanks

[johndoe0815]

That is exactly what I currently use. Timer bar card that is conditionally shown below the bubble card when the timer runs.
also running on a RPi, mine updates between 1 to 4 seconds, so not fluently, as I wrote in the other thread.

[MrBearPresident]

Hey this could be improved with some javascript timing events but this does not have my priority at the moment. This is also how timer-bar uses this.

[MrBearPresident]

this night I was thinking about how to do this, so I made it eventually.
The progress bar is not updating because every 500ms that would be to much.
#937 Updated the code.

[johndoe0815]

Could you also update your rather simple code in this thread (#985 (reply in thread)) to have a regularly updating timer value on the card? I assume it does not require much adjustment, but this goes over my head.
Thanks for all your help!

[MrBearPresident]

Here you go: #937 (reply in thread)