Time stopwatch

advanced-prototyping

#1

I am trying to implement on my prototype a stopwatch in a format 00(hr):00(min):00(sec).
When start button clicked it is supposed to start counting seconds and minutes and stop counting when stop button clicked.
Stopwatch should display how much time passed between start and stop e.g. 00:10:00 if stop button clicked in 10 min. Any help will be appreciated.
Thanks!


#2

Hi lanashau,

It looks like your question may be answered in this thread: Simple Stop Watch? I hope this helps!


#3

This link gives an explanation of something different then I need. Explanation is too confusing and links to the files don’t work.


#4

Hi!

There isn’t a way to do this that won’t involve date/time functions and mathematical expressions. If you are not familiar with using expressions in Axure, I’d recommend checking out this help article.

One way to make your timer is the following:

Upon hitting start, store the start time in a global variable, and as time elapses subtract the start time from the current time to get the elapsed time.

The date function Now.getValue() comes in handy here. It returns the current date/time in the number of milliseconds (thousandths of a second) that have elapsed since Jan 1, 1970.

You will set two global variables based on Now.getValue():

[ul]
[li]v_startTime: the time captured by Now.getValue() upon pressing start[/li][li]v_timeSpan: milliseconds elapsed since pressing start, i.e., Now.getValue() minus v_startTime[/li][/ul]
Since v_timeSpan is a straight-up number rather than a time format, it will be easy to perform math on. That math will be converting v_timespan into the various units of you clock: seconds, minutes, hours.

The following expressions will return seconds, minutes, and hours respectively:

[ul]
[li]Seconds: Math.floor(v_timeSpan/1000) % 60[/li][li]Minutes: Math.floor(v_timeSpan/1000/60) % 60[/li][li]Hours: Math.floor(v_timeSpan/1000/60/60)[/li][/ul]
Math.floor() rounds whatever is in the parentheses down to the nearest integer.

The modulus operator (%) is similar to the division operator, except it returns only the remainder of the division (here by 60) and leaves out the quotient. This insures that both minutes and seconds will start over at zero when the number would have otherwise resulted in 60+ value.

Finally, you will want to add leading zeros when any of the component numbers is a single digit. This way, your running time won’t look like 0:0:1, but rather like 00:00:01. (The method for doing this is described here.)

To make the time update constantly use a two state dynamic panel that automatically goes to its next state every 100ms, wrapping to back to state 1 upon leaving state 2. The dynamic panel interaction OnPanelStateChange fires every time the panel changes state, so that’s a nice spot for putting the code that updates the clock display.

Here is such an implementation. It has two pages: one without leading zeros, one with. (The former is much easier to understand, and once you get it, look at the latter.)

Live sample

File: runningClock.rp (72.3 KB)


Stopwatch with Start Stop and Reset buttons
How can we integrate clock in Axure
iFrame in Repeater [show the other pages of the project]
#5

Hi there, this example is really useful and just what I’m looking for. Out of interest how would I add a pause button to the stopwatch?


#6

I started to respond saying that it’s the same logic as stop, just with the ability to resume without resetting the timer. However, the way this example works is by storing a time when start is clicked. So, pausing and resuming will result in the clock continuing to “run” in the background. (See “Pause/Resume” page in the attached). While we can stop the display from updating, we can’t actually pause time from passing :slight_smile:

Instead you’d probably want to use something that increments and keeps track of the increments to update the display so your pause can resume where it stopped? See the “Increment” page in the attachment. Basically you can use all of JosephXBrick’s logic - just instead of setting the v_timeSpan to the difference between the stored time and now, you just add x milliseconds to the value stored each time. Note: using 100ms was pretty innacurate - it lost time because of all the calculations. Setting to 1000ms instead seems to be more accurate.

runningClock.rp (83.3 KB)


#7

Perfect thanks, but in your example, how do I include leading zeros for the hours:mins:secs?


#8

See attached… same changes - just different page :slight_smile:

runningClock_pause_leading0s.rp (60.6 KB)


#9

That’s great! Thanks for your help!


#10

Oh one last thing (sorry!). How do I reset the timer? I can currently start it, pause, restart it, but I’d like to be able to stop the timer and reset it to 00:00:00.


#11

Just set the v_timeSpan to 0 and then force the text on the timer to 00:00:00.

runningClock_pause_leading0s.rp (62.7 KB)


#12

Hi, sorry I meant reset to zero and stop counting.


#13

sorry, assumed you would stop first… in any case, just add the logic from the stop button to the click of the reset button.


#14

Is it possible to pass the value on the timer to another label widget at the other screen


#15

As the count of the timer is a global variable, yes, it is available on any page.


#16

which global variable should i refer to ? or i need to create a new one?


#17

In the example file UXProtoTyper posted the variable v_timeSPan stores the timer value (as milliseconds). Because it is a global variable you can reference it from any page.


#18

but i want to transfer the global variable once the hold button is pressed


#19

why cant the timer move


#20

i follow all the steps on above, only the size of dynamic pannel of clock runner changes due to the size of the clockdisplaytime