Comment on page
An Analog Clock
Clocks show up everywhere in HMIs, and happen to be simple to create in Incari.
The Project Outliner with an active visibility toggle for the 'Basic Scene'.
All Logic from the 'Basic' tab in the Logic Editor.
It's always a good practice to try and separate the view Logic (changing the interface) from the model Logic (changing the data) as much as possible. This makes it easier to work with larger Pfojects.
Let's look a bit closer at how we've done this.
Model Logic from the 'Basic' tab.
Start Interval Node and Attributes
The System Time Node outputs hour, minute, second, and millisecond values separately in a variety of formats. By default, it will just give the current time in whole-number values. We have chosen the built-in degree values in this case, which will handily convert the time value to a rotation value that we can use to drive the interface.
System Time Node and Attributes
Every time it is triggered, it will update the values stored in its Outputs (square green Sockets). We read these values sequentially and store them in separate Variables using three Variable Setter Nodes, one for each clock hand.
Setting the time Variables.
By storing into these Variables, we can achieve the decoupling between data and interface mentioned earlier.
Save and run the project to see the basic clock!
But what if we want our second hand to “tick” like an analog clock? By adding a little more complexity, we can allow for the visual look to be adjusted to our needs. In order to manage this complexity, we'll also introduce the concept of Functions in Incari.
Logic in the 'Project' tab
The Logic in here is shared across the whole Project, as you might expect from the name. We didn't use anything here in the basic example. But in a real app, here is where you would set Variables like the current time, as you would expect to need to tell the time across many different Scenes.
The chain starts with the On Initialize Event which fires when the Incari Project is run. Two functions are pulsed here: 'updateTimeVariables' and 'initializeTime'.
We also check the option to output the values for the hours and minutes as smooth Float values. This is because the hours and minutes will be positioned in between the positions on the clockface, as they do on a real clock.
The 'Ticking Animation' Logic is divided into several parts. The Logic updates the time Variables every 1 second, creates the second hand ticking movement, converts time value to a rotation value for all hands, and then finally rotates the clock hand images. We will go into detail about how each of these parts works.
All logic in the ‘Ticking Animation’ tab.
Update Time Variables
This part of the Logic runs only when the time has first been initialized. Then, a Start Interval Node is triggered. Every 1 second, the Function 'updateTimeVariables' will run, which will update the current 'Second', 'Minute', and 'Hour' Variables.
Create Second Hand Ticking Movement
Whenever the 'currentSecond' Variable changes, that new value is used to calculate the starting and ending position of the second hand when it ticks. The starting position of the hand is the current time, and the ending position is the current time
+ 1. The Interpolate Node is used to output a smooth transition from one number to the next across a period of time. This is what will animate the hand to make it “tick".
Duration- how long the interpolation takes.
Interval Time- how long each sub-unit of time is. For example, if we have a duration of 10 seconds and an interval time of 1 second, then Interpolate will output 10 values across 10 seconds:
1, 2, 3, 4, 5, 6, 7, 8, 9, 10.Half the interval time outputs twice as many numbers in the same duration:
1.0, 1.5, 2.0, 2.5, 3.0, 3.5, 4.0, 4.5, 5.0, 5.5, 6.0, 6.5, 7.0, 7.5, 8.0, 8.5, 9.0, 9.5, 10.0.
From- the value we start from. In this case the current second - 1 (the previous second).
To- the value we end at (the current time).
- There is also the
Interpolation Type, which will give you the option for non-linear easing. For example you might want the hand to start slow and speed up. The best way to understand the difference is to experiment with the settings.
Convert Time Value to a Rotation Value for all Hands
The Range Mapper Node needs a maximum value of the time, meaning the number that equals one full revolution around the clockface (seconds = 60; minutes = 60; hours = 12). It then uses that maximum and remaps the value to a new maximum of 360 (for 360 degrees in a circle). This gives the degree of rotation for the current time.
Rotates the Clock Hand Images
Save and run the Project to see the ticking clock.