BlogLatest news at CommandFusion


Add an Analog Clock to Your iViewer Project

Posted By Aaron Green - 24 Oct, 2013

We have just put together a quick demo project that shows how you can implement an Analog Clock into your GUI.

This project uses iViewer 4's power JavaScript API to get the time from your device, and update the hour, minute and second hands.

CommandFusion iViewer Analog Clock Demo

CommandFusion iViewer Analog Clock Demo

How it Works

There are separate images for each of the clock hands, and these are rotated based on the current time components (hour, minute, second) which are obtained using the JavaScript Date object.

Every second a function is called to update the hand rotations using the CF.setProperties JS API.

NOTE: The rotation happens at the center point of an image object, so the clock hand graphics are designed with the center rotation point of the hand in the center of the image, with transparent pixels used to oversize the graphic.


Use the GUI File URL below in iViewer settings to load the project into your iOS or Android device:

Click Here to download the demo project.

View the code on our GitHub repo here.

Want to reprint this blog entry in part or in it's entirety? Please read this first!