One of our users suggest this tutorial in our forums (feel free to suggest topics at http://kwikplugin.com/forums/index.php/board,11.0.html) and this is our answer.

Because clocks can be digital (simplest way to implement) and analog, I decided to add both in this tutorial. For more information, these two, non-related to Kwik, tutorials were the basis of this posting:

Clock sample (digital), from Corona Labs: http://developer.coronalabs.com/sample-code/animationtime1

Creating an Analog Clock App, from Carlos Yanez: http://mobile.tutsplus.com/tutorials/corona/corona-sdk-creating-an-analog-clock-app/

You can download the file used in this tutorial here. At the end of the tutorial, you will have something like this in your Simulator:

Setting up the project

After downloading the page1.psd file from the link above, open it in Photoshop then create a new iPad project using the opened file as first page. As we do not plan to add any new image, publish it with the Export Images option activated. This will generate all the images we need. After the publishing, disable the Export Images option as we will not need it anymore.

Creating the variables for the clock

We need to know what is the current time in order to display it. The best way to do it is using variables. We need a few of them so, using the Create Variable (from the Project and Pages toolset), create the following variables:

• Time – controls the current time: name it as time, set its initial value to 0, content as Formula/Boolean, type Local, select the Before layers are rendered option;
  
• tHour – controls the current hour: name it as tHour, set its initial value to 0, content as Formula/Boolean, type Local, select the Before layers are rendered option;
• tMinutes – controls the current minutes: name it as tMinutes, set its initial value to 0, content as Formula/Boolean, type Local, select the Before layers are rendered option;
• tSeconds – controls the current seconds: name it as tSeconds, set its initial value to 0, content as Formula/Boolean, type Local, select the Before layers are rendered option;
• tDigital – controls the digital clock: name it as tDigital, set its initial value to 0, content as Formula/Boolean, type Local, select the Before layers are rendered option;

Setting the digital clock

As mentioned above, the digital clock is the simplest way to show the current time. Lets start with it. First, we need to create an action that will control and show the time. Still in the Project and Pages toolset, select Actions, name it updateTime then set the following interactions:

1. Edit Variable: select variable time and enter the following in the value field: os.date(“*t”) – this command in Lua produces a table with the following values {year = 1998, month = 9, day = 16, yday = 259, wday = 4, hour = 23, min = 48, sec = 10, isdst = false}
2. (under Code category) Edit Variable: select variable tHour and enter the following in the value field: time.hour – this capture the parameter time from the time table created above;
3. (under Condition category) IF: select variable tHour , operator LESS THAN, and enter the following in the Comparison field: 10 – this verifies is the content of tHour is less than 10;
4. (under Code category) Edit Variable: select variable tHour and enter the following in the value field: “0”..tHour – this sets the content of the tHour variable as “09”, in the case the returned hour is 9;
5. (under Condition category) End IF – this closes the condition;

Repeat steps 2 to 5 for the tMinutes and tSeconds variables. After doing that, add the following interaction:

• Edit Variable: select variable tDigital and enter the following in the value field: tHour..”:”..tMinutes..”:”..tSeconds – this will build a readable content for the digital clock;

The next steps are:

• Still in the Project and Pages toolset, select Timers, set its delay to 1 seconds (this will refresh the timer every second), select the action updateTime and set the loop to forever;
  
• Select layer digital then go to Layer and Replacements toolset. Click the Dynamic text replacement icon and set the associated variable to tDigital (for this example, just use the native system font and set the offset to 0px. – this will refresh the content of layer digital every time the clock content changes (in this case, every second);

Publish the project again and you will see the digital clock working!

Setting up the analog clock

As our pointers for hours, minutes and seconds will rotate according the current time, we must set their anchor point to their center/bottom (otherwise they will rotate wrongly, with the default center/center anchor). Kwik does not offer yet an option for that, we will need to add an external code (in the Project and Pages toolset, select Add External Code). This is the code to be entered there (don’t forget to select the option Middle):

hour:setReferencePoint(display.BottomCenterReferencePoint)

minutes:setReferencePoint(display.BottomCenterReferencePoint)

seconds:setReferencePoint(display.BottomCenterReferencePoint)

Now that we have the pointers set, we need to move them according the current time. Although we could create another action and another timer for that, lets save some memory and use the same action and timer we created for the digital clock.

Edit the updateTime action, select (under Code category) External Code, then enter the following code:

–Set the rotation according to the time values

hour.rotation = time.hour * 30 + (time.min * 0.5) –The hours are separated by 30 degrees, plus 0.5 degrees per minute

minutes.rotation = time.min * 6 –6 degrees separates the minutes and seconds

seconds.rotation = time.sec * 6

Publish your project again and you will see both clocks working!