Create an Animated "Analog" Clock
Intro
I work in TV, so time is kind of a big deal for us. When I started building apps, one of the first things I started playing with in PowerApps (and Flow) were the Date & Time functions and the Timer control.
This demo app is not something I use in production, but rather an exercise.
Objectives
My objectives for the app were:
- Create “analog” clock
- Clock must update in real time, including
- Hour
- Minutes
- Seconds
- Clock can only use PowerApps
- No external data sources or connections
"Analog"-ish
While I would have preferred traditional clock hands, this proved impractical due to the Image control's limited rotation to 90 degrees at a time.
So instead, I opted to animate circles in sync with the Hour, Minutes and Seconds around a clock face image.
Bells & Whistles
I decided to add a few extra features to my including:
- X & Y Sliders to control the Horizontal and Vertical placement of the clock
- Hour Offset slider to simulate time zone changes (more on Time Zones in my next app)
- A toggle that switches the second "hand" animation mode between the traditional "tick-tock" style and a more fluid animation style
- Lastly, a debug mode toggle that shows and hides controls that can help app admins test and debug the app
Watch Videos & Get the App
I created two videos and posted the app to the Community Forum's App Gallery.
In Part 1, I demo the app:
In Part 2, I go into some detail about how the app works:
Next Time
I hope you gleamed something interesting from this demo. If you'd like more detail on any or all of the app, let me know. I have a few more demo apps in the queue and I hope to record those videos soon.
Up next is my Convert Time Zone Demo app
Convert Time Zone Demo app - Coming soon!
Comments
-
Create an Animated "Analog" Clock
Hi Jamie,
I like your work however I cannot import the files into a canvas app can you advise or assist.
Many Thanks
Ian Mawdsley
*This post is locked for comments