Add an Analog Clock to Your iViewer Project

87 views
Skip to first unread message

Aaron

unread,
Oct 23, 2013, 7:44:04 PM10/23/13
to comman...@googlegroups.com

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.

Demo

Use the GUI File URL below in iViewer settings to load the project into your iOS or Android device: http://cmdf.us/clockgui

Click Here to download the demo project. 

View the code on our GitHub repo here. 

Nahshon Williams

unread,
Oct 23, 2013, 10:57:56 PM10/23/13
to comman...@googlegroups.com
Fabulous!


--
You received this message because you are subscribed to the Google Groups "CommandFusion Software" group.
To unsubscribe from this group and stop receiving emails from it, send an email to commandfusio...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

Reply all
Reply to author
Forward
0 new messages