How to create an Analog Clock using Xcelsius?

Last week, Greg showed us all about How to create a Digital Clock using Xcelsius. After looking at the XLF that Greg posted, what stuck me was how a simple NOW() function can turn a Label Component into a fully functioning Digital clock. It was like food for thought for me and I thought why not an Analog Clock using the same logic. So I decided to take a step forward and add a few more formulas and extend the functionality of a Digital Clock to an Analog version. I know, going from Digital to Analog is not really a step forward, but It’s a worthy effort to show the power of Xcelsius. Here is how I achieved it.

Theme

I used the Windows Classic Theme, as it had the best looking Gauge for an Analog Clock. Looks more authentic 😉

Excel

I used the same XLF posted by Greg and added 3 new formulas as shown below. Notice that the Hours formula is not as simple as Minutes and Seconds, that’s because I had to take care of the 24 hour format. Knock-Knock, there is no 24 hour Analog clock, remember! So I had to write a formula to always show between 1 and 12. Also, I multiplied the Hours with 5, that’s because I’m using a single Gauge for all three measures. (E.g. I don’t want the Hours needle to be at 2, when it is actually 2, I want it to be at 10. Get it?

Xcelisius Excel Logic

Components

Gauge:

Used a simple Gauge component with 3 series and mapped them to Hours, Minutes and Seconds. Make sure you change the limits to 0-60. Why? go see your wall clock.

Xcelsius-Guage

Labels:

Used 12 labels to display the hour numbers (1-12). Want to get creative? Go ahead and use 1-60 for seconds inside the gauge. Got this idea from my wrist watch. However, never had the patience.

Xcelsius Analog Clock

Rectangle:

Threw in a Rectangle component to create a frame for the clock. The trick is to go crazy with the Border Thickness property. In this case it is set to 25 (Are you serious?)

Xcelsius-Analog-Clock

Play Selector:

As mentioned above, stole this one from Greg’s example. If you notice the logic behind the Source and Destinations for the Play Selector, you will see that it is an infinite counter logic. Well done Greg!

Make sure you hide the Play Selector, or you might look like a fool when you show this to your pals.

Xcelsius-Play-Selector

Icon:

Finally, to top it up, I used an Icon Component and bound it to the Current Local Time cell to show the date and time when the user hovers over the clock. Make sure you set the transparency of the Icon Component to 100%.

Xcelsius Icon Component

Oh-Ley, that’s it. Download the Source Files below.

I hope you enjoyed this slick trick. Thanks to Greg for starting this Clock series. Please use the comments section to shout it out.


  • AnjaniKumar

    Good concept

  • John

    I took the clock idea and instead created something far more useful – a retirement countdown clock 🙂

  • @John Sounds interesting, would you be interested in sharing the Code and SWF with the readers? If yes, please send it to admin[at]myxcelsius[dot]com. We would be happy to post it. Thanks

  • Kalyan,

    you’ve got too much time on your hands…get it?!…time…hands…? groan!

    Seriously good use of multiple indicators. I sense an Xcelsius Clock meme starting.

  • @Matt, Good One…The Irony is, I don’t. Thanks

  • Good Job, Kalyan!

    Thank you for sharing your good idea of Xcelsius analog clock coupled with the additional logic that needed to be applied to make it just right.

    -Mark

  • AnjaniKumar
  • Dencheg

    hi, clock – its great idea, but in my xcelsius i cant see inlay “by indicators” in division “general”, element Gauge. In my Gauge 1 arrow and i cant fasten this arrow to 3 col data. Please help me with this trouble..

  • Shafiullah

    Can you please help me the whole procedure of making an analog clock. This did not help us how to use guages and from where should we bring it? Is it a separete software or part of excel.

  • Umar

    Nice Job Kalyan.

    Keep on doing the good work – a lot of people need it.

    Regards.

  • basha

    hi kalyan

    i tried with NOW() option for date and time . this is very good option to show analog clock . nice job.

  • santhosh

    wow..!!