Display a running timer

[ramzizi]

I want to build a function: User hits a button that starts a stopwatch which shows the time since hitting the button in seconds/minutes/hours/days. The time that the user hits the button goes into the user database. Currently I’m able to show this data but I want it to be a running timer, I don’t want the user to have to refresh the page to see the time elapsed. It should look something like this: Online Stopwatch - vClock

It looks like the current timer plug ins reset when the user refreshes, whereas I need the user to be able to save the time that they hit start, leave the page, and come back to see the time elapsed and stop the timer if needed

Is that possible in Bubble?

[rpetribu]

Hi!

Did you already tried to find a plugin for it?

[ramzizi]

No, Zeroqode has own but I don’t think it saves the timer for the user, it may restart when the user leaves the page

[bcart0v]

You could create a Data Type named Time that references the current user, or a Data Entry in the User’s Data Type that would save the current time whenever the User hits a button, that way if they leave the page and come back, it’s referencing a starting time and would show the time elapsed between then and now. Then when they hit the button again it could clear or save it, however you want.

That’s one way I could think of that wouldn’t restart a timer if the page is left, since you always have a reference point.

[NigelG]

Save the time on the user. And a status stopped/running or something like that.

When the page loads check the status. If it is running then load up the start time into a custom state.

Run a workflow every x seconds on the page to update current time.

Then show current time - start time formatted as a stopwatch.

This is very old example.

https://buildingonbubble.com/block/countdown-timer-1466528802569x695336233767534600

[Eugene_West]

I’m running this plugin to display current time
You can use it as a stopwatch and play around as you want

Calendar & Timeslots Custom · BEP Plugin for Bubble, by Renato Asse

How to use:

[darren.james7518]

This can be done with JavaScript. I don’t want to confuse this by giving incomplete information but I paid a freelancer to do this for me a while ago and it worked. Unfortunately I don’t understand how it works but maybe these screen shots will trigger ideas for you.

The timer looked like this (on preview it counts each second)

And the workflow is;

[ramzizi]

That could work, however that leaves the challenge of how to convert that result from seconds elapsed to something like:

0 years 5 months 10 days 19 hours 25 minutes 25 seconds

Which I would imagine would take a lot of algebra done every second

Is there a more elegant solution?

[ramzizi]

Is there a Javascriptobubble element on that page? Can you show me how that is set up? Thanks!

[NigelG]

@ramzizi

Which I would imagine would take a lot of algebra done every second

That is all in the link. It does require a bit of fiddling.

Alternative is to use some JavaScript as above. Which is probably neater.

[darren.james7518]

@ramzizi

That could work, however that leaves the challenge of how to convert that result from seconds elapsed to something like:

Yeah this was tricky, I remember we had to divide everything by 60 then times it to get the result, although it was a little more tricky than that. I’m going to private message you with access to my old app so you can see how the timer worked.