cancel
Showing results for 
Search instead for 
Did you mean: 
Anonymous

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

Convert Time Zone Demo app - Coming soon!Convert Time Zone Demo app - Coming soon!

Meet Our Blog Authors
  • PowerApps Community Mentor 2018, Practicing surgeon and former Professor of Surgery, University of Illinois, Chicago.
  • I am the Owner/Principal Architect at Don't Pa..Panic Consulting. I've been working in the information technology industry for over 30 years, and have played key roles in several enterprise SharePoint architectural design review, Intranet deployment, application development, and migration projects. I've been a Microsoft Most Valuable Professional (MVP) 12 consecutive years and am also a Microsoft Certified SharePoint Masters (MCSM) since 2013.
  • My name is Timothy Shaw and I create digital solutions using the Power Platform, Office 365, and Azure SQL and handle the IT for a small company in the energy sector. When not building the future :), I enjoy playing guitar, good (or really bad!) sci-fi, Xbox therapy, and hanging with my wife and son. Twitter: @ShortForTim