Forum Academy Marketplace Showcase Pricing Features

Stop/pause/resume stopwatch

I figured it would be fun to build a stopwatch with a stop/resume function, to challenge myself.
The stopwatch function on its own is dead simple, but I’ve hit a wall on the paus/resume part.

I’ve only seen one person on the forum who claims to have solved it. But did not share the solution. And most have moved on to using one of the many plug ins. But it seems that the functionality to build this, should be readily available in Bubble.

I’m sure I’m missing something pretty obvious, but I can’t figure this one out and I’m running out of ideas. Has anyone solved this and is willing to share?

Hello,

Thanks for your post! If you are using an approach like this one to create your stopwatch, it may be possible to set a condition on the “do every 1 second” workflow. For example, this could be a different custom state like “not paused” (a yes/no) and when a pause button is clicked, it sets this to yes, which thereby prevents the “do every 1 second workflow” from running. Let us know if that helps or if you have any more questions!

Thanks @jess

I don’t think that would pause the stopwatch. Time will still elapse between the pause and resume buttons being pressed, right?. So when the “do every 1 second” workflow is started again, it will grab the current time. So if you pause at 10 second, wait 30 sec, and resume the stopwatch, it will show 40sec.

If it had been truly paused, the stopwatch should be 10sec + time elapsed After resume.

I’m sure I’m just not seeing the, probably, very simple solution, I’m sure it’s there :slight_smile:

I was playing with adding a timestamp when paused is pressed, but I couldn’t find a way to add two timestamps together. It could be done by adding a second workflow that increases a number every second, since it’s possible to add a number to a timestamp, but this will break as soon as you move to another browser tab.

Do a search… amazing what you find

1 Like

Hey @Bubbleboy

Indeed, as I mentioned in the first post, there are many timer/stopwatch plug ins out there. But the sole purpose of this exercise is to create a stopwatch function without using a plugin.

The reason for this is perfectly illustrated in the description of the airdev plug in.
“ATTENTION - this plugin hasn’t been edited since mid 2018 and isn’t currently being maintained by AirDev.”

Plug ins do break, become obsolete and may not be maintained. Bubble is powerful in it’s own right and many functions wrapped up as plug ins can be built with vanilla bubble. This is an attempt to do just that. :slight_smile:

1 Like

This is often a slower or more cumbersome approach. But you’re also correct about plugins breaking sometimes.

Hello,

Absolutely, you’d be looking to leave out the time that this stopwatch has been paused while also keeping track of when it’s paused with a yes/no state. It sounds like you were on a good track with adding timestamps for when the time is paused. If we capture that time, and the time this was resumed in a custom state, then it may be possible to calculate the difference between the paused and resumed times directly. That way we have the calculation for that gap between the “10 sec + time elapsed after resume” like you mention and can subtract it from the calculations in the text element that fuel our stopwatch. Is that what you already tried with increasing a number every second, or could this be an option for you? It may get more involved, but could potentially be a way to build this with built-in Bubble features.

Spot on, what I did was capture the current time when the pause button is clicked, as a custom state “paused time”, and at the same time trigger a new “do every 1sec” workflow that updates a second custom state “pause time elapsed” as a number, which is in effect a seconds counter. When the Stopwatch is resumed it will take this "pause elapsed time"and subtract it as a +seconds to the stopwatch.

And… that works terrifically well, until you tab out and the custom state is no longer updated.
The stopwatch’s custom state “current time” of course doesn’t update when tabbed out either, but as soon as you tab back, it will snap into place picking up the current time.

So my thinking was that I need to capture both the Pause initiated as a Date and the resume as a date… since they would be unaffected by tabbing out, but I couldn’t get that to work.

And maybe there is a much smarter way to go about this, and having spent a day on, I might just not see the forest for the trees :slight_smile:

Edit… wait a minute, I’m already doing a subtraction between two dates, hmm, I will pick this up later today, not sure why I wasn’t able to subtract two dates there. I forget :slight_smile:

Sounds good! When you pick this back up, if you run into any more trouble subtracting the dates, don’t hesitate to reach out to us at [email protected] with some details/screenshots of the current setup, and we’d be happy to help.