cancel
Showing results for 
Search instead for 
Did you mean: 

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"-ish2018-11-29_10-56-49.gif

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

PowerApps Video - Convert Time Zone Demo - Screenshot.pngConvert Time Zone Demo app - Coming soon!

Meet Our Blog Authors
Labels