georapbox / canvas-circular-countdown

Draw a configurable circular canvas countdown timer.
https://georapbox.github.io/canvas-circular-countdown/
MIT License
16 stars 8 forks source link

Display remaining time #33

Closed jpgateaux closed 1 year ago

jpgateaux commented 1 year ago

is it possible to display remaining time instead of percentage?

jpgateaux commented 1 year ago

Newer mind after digging I foumd the answer. Better documentation in order;

georapbox commented 1 year ago

I think what you're looking for is Example 5 where you can update the captionText while the timer is running. If you use the captionText as function, the second argument passed is an object representing the remaining/elapsed time.

This is documented for captionText option in the 1 note:

If it is a function, the remaining percentage and an object containing the remaining and elapsed time are passed as parameters and it should return the appropriate type for each option. For example, for showCaption should return a boolean (true or false), but for captionColor should return a string. Useful when you need to change some options' values depending on the remaining percentage or the remaining/elapsed time.

jpgateaux commented 1 year ago

Sorry what I was trying to do was replace percentage caption with time remaining . Here is what I came up with: "captionText":function (percentage, time) { return Math.ceil(time.remaining/1000).toFixed(); }

georapbox commented 1 year ago

Yep, this is pretty much the way to use it.