Timed widget color change

I’ve created a circle timer and it needs to change color based on elapsed time. I need one ellipse in the effect stack to change color after each block of time, thus changing the timer’s color fill. Any ideas how to do this will be greatly appreciated.

I think the easiest way to do it would be to put the circle timer in a Dynamic Panel. Put each “step” of the timer on a new page in the Dynamic Panel.

Then, set an OnClick action on the button that activates the timer, then set the action to

  • Change Panel State
  • In the panel state dropdown, choose “Next”
  • set the “auto” option to automatically go to the next state at intervals.

If you need to jump to a new page after this, put a “Wait” action in for the duration of the timer, then a “Open Page” action. Check out the attached.TimerWidget.rp (65.0 KB)

Thank you kindly. So far I have the time as a Dynamic Panel with each color disk it’s owe state. That’s as far as I’ve gotten.

is there a triggering action that starts the timer?

onload begins the first timer. It will reset after 5min (one color) then alternating 60s and with colors for 8 sets, then another 5min for the final color. Four colors in all. Green, Yellow, Red, and Blue.

What you could do is set an OnLoad event with a wait of 300,000 ms (1000 ms x 60 = 1 min, 1000 ms x 60 x 5 = 5 min), then change panel state.

For the rest, you would add OnPanelStateChanges with if/else if conditions for the 60-second panel state changes.

The only thing is that if you want it to do it a fixed number of times, you might want to add a global variable that keeps count of the number of changes to ensure the last 5 minute color change happens at the right time.

Does that make sense?

Yes that makes sense. Thank you kindly!

Hey Niki_h, would I use a new case for each OnPanelStateChange?

Normally, no, but it seems like you would need a different set of conditions for each color change.

To make sure I understand, will the cycles will be something like this?
Green - 5 min
yellow - 1 min
red - 1 min
blue - 1 min
green - 1 min
yellow - 1 min
red - 1 min
blue - 5 min?

Also, what happens after the last 5min stage?

Not exactly. It’s an interval program. Warm up for 5min, intervals, then cool down for five
Green - 5min
Yellow - 60 secs
Red - 60secs
Yellow - 60 secs
Red - 60secs
Yellow - 60 secs
Red - 60secs (there could be more but this is the pattern)
Blue - 5min

After the last 5mins the cycle simply ends.

Okay, these should be all the cases you need. You’ll need to create a global variable to track the cycle - this is how Axure will know how long to leave the Green and Blue panel states up the second time through - in this example I just called it “CycleNum” but you can call it whatever you want.

Onload

Wait 300,000ms
Set panel state to Yellow
Set CycleNum to 1

OnPanelStateChange

If state of panel is Yellow
Wait 6000ms
Set Panel State to Red

OnPanelStateChange

If state of panel is Red
Wait 6000ms
Set Panel State to Blue

OnPanelStateChange

If state of panel is Blue
And CycleNum = 1
Wait 6000ms
Set CycleNum to 2
Set Panel State to Green

OnPanelStateChange

If Panel State is Green
And CycleNum = 2
Wait 6000 ms
Set Panel State to Yellow

OnPanelStateChange

If state of panel is Blue
And CycleNum = 2
[do nothing]

Thank you kindly. I’ll let you know how I manage.

Here’s a weird thing that has my head exploding. The circle timers work great using an example I found posted and tweaked a bit.Untitled.rp (62.5 KB).

This is the case:
Rotate s1 by 360 deg linear 30000ms clockwise anchor bottom
wait 15000ms
Show mask, Hide s2

When I attempt to increase the time out to 5mins. The animation kind of falls apart. Not sure what is wrong.

A 5 minute timer (300000ms rotate, 150000ms wait) looks bad because of how the elements are rendered.

Rotating 360 degrees over 300 seconds you have to animate a change of 1.2 degrees/second. Rotating 360 degrees over, let’s say 10 seconds, you have to animate 36 degrees/second.

A change of 1.2 degrees is going to look worse because every little floating point or rounding error when drawing the new position of the shape will be more obvious from step to step. When you’re changing it by 36 degrees each step those errors are less obvious because the change from start to finish is so drastic in comparison to any errors.

I just tested it over five minutes. It works, it just doesn’t look as good because apply CSS transforms to images in the browser like that just isn’t going to look that great. For a prototype it might be fine but if you want it to look super slick try using SVG animations or .

Thank you. Unfortunately, this isn’t for a web or mobile platform but a touch screen console that interacts with a piece of equipment. A gif or SVG animation won’t work. That was my first choice believe me. My background is in motion design and this would be snap in that world. Axure is another animal.