Incari Studio
2021.4
2021.4
  • Incari HMI Development Platform
  • Demo Projects
    • Overview
    • 4 Methods of Animation
    • Using APIs to Pull Dynamic Data
    • An Analog Clock
    • Image Sequence Button Animation
  • Getting Started
    • Requirements
    • What's New
    • Installation
    • Project Objects
      • Scene
      • Screen
    • Scene Objects
      • Camera
      • Group
      • Lights
      • List
      • Mesh
      • Sprite
      • Text
      • Web Sprite
      • Primitives
      • Screen Space Elements
    • Attributes
      • Attribute Types
        • Asset/Object Attribute
        • Boolean Attribute
        • Color Attribute
        • Numerical Attribute
      • Common Attributes
        • Object
        • Camera
        • Rotation Pivot
        • Sprite
        • Transformation
    • Data Types
      • Bool
      • Byte
      • Float
      • Int
      • String
      • Vector2
      • Vector3
      • Vector4
    • Terminology
  • Modules
    • Asset Manager
    • Animation Editor
    • Attribute Editor
    • Code Editor
    • Console
    • Exporter
    • Image Sequence Editor
    • Logic Editor
    • Global Preferences
    • Material Editor
    • Model Editor
    • Profiler View
    • Project Outliner
    • Project Settings
    • Scene Outliner
  • Toolbox
    • Actions
      • Delay Action
      • FadeFromTo Action
      • FadeTo Action
      • MoveBy Action
      • MoveTo Action
      • RotateBy Action
      • RotateTo Action
      • RotateFromTo Action
      • ScaleBy Action
      • ScaleTo Action
    • Array
      • Array Value
      • Clear Array
      • Concat Arrays
      • Get Array Element
      • Length of Array
      • Pop Array Element
      • Push Array Element
      • Set Array Element
    • Binary
      • Binary (Hex) Value
      • Concat Binaries
    • Communication
      • CAN
        • Events
          • On CAN Start
          • On CAN Stop
          • On CAN Packet Received
        • CAN Start
        • CAN Stop
        • CAN Send Packet
      • HTTP
        • Events
          • On HTTP Route
          • On HTTP Server Start
          • On HTTP Server Stop
        • HTTP Client
        • HTTP Response
        • HTTP Server Start
        • HTTP Server Stop
      • MQTT
        • Events
          • On MQTT Start
          • On MQTT Stop
          • On MQTT Topic
        • MQTT Start
        • MQTT Stop
        • MQTT Subscribe
        • MQTT Publish
      • Serial
        • Events
          • On Serial Start
          • On Serial Stop
          • On Serial Packet Receive
          • On Serial Error
        • Serial Start
        • Serial Stop
        • Serial Send Packet
    • DateTime
      • Date Time Formatter
      • Now (UTC)
      • System Time
      • Timezone Value
    • Development
      • Assert
      • Benchmark Get
      • Benchmark Start
      • Benchmark Stop
      • Clear Console
      • Console
      • Profiler Start
      • Profiler Stop
    • Dictionary
      • Clear Dictionary
      • Dictionary Value
      • Erase Dictionary Element
      • Get Dictionary Element
      • Get Dictionary Keys
      • Get Dictionary Values
      • Merge Dictionaries
      • Set Dictionary Element
      • Size of Dictionary
    • Events
      • Custom
        • Event Listener
        • Event Trigger
      • Gestures
        • On Swipe
        • On Tap
      • ImageSequence
        • On ImageSequence Frame Changed
        • On ImageSequence Pause
        • On ImageSequence Play
        • On ImageSequence Stop
      • Keyboard
        • On Key Press
        • On Key Release
      • List
        • On List Current Index Change
        • On List Entry Select
        • On List Load
      • Mouse
        • On Hover Enter
        • On Hover Leave
        • On Mouse Button Down
        • On Mouse Button Up
        • On Mouse Click
        • On Mouse Double Click
        • On Mouse Enter
        • On Mouse Leave
        • On Mouse Move
        • On Mouse Scroll
      • Object
        • On Alpha Change
        • On Opacity Change
        • On Position Change
        • On Rotation Change
        • On Scale Change
        • On Visibility Change
      • On-Screen Keyboard
        • On On-Screen Keyboard Arrow Down Pressed
        • On On-Screen Keyboard Arrow Up Pressed
        • On On-Screen Keyboard Enter Pressed
        • On On-Screen Keyboard Input Changed
        • On On-Screen Keyboard Key Pressed
      • Variables
        • On Variable Change
        • On Variable Set
      • Video
        • On Video Play
        • On Video Finish
      • Web
        • On Javascript Callback
      • WebSprite
        • On WebSprite Load
    • Flow Control
      • Branch
      • For Each Loop
      • For Loop
      • Index Switch
      • Is Equal
      • Is Greater Equal
      • Is Less Equal
      • Select Data
      • Sequential
      • Switch
      • Toggle
    • Functions
      • Function
        • Function Input
        • Function Output
    • Incari
      • Animation
        • Pause Animation
        • Play Animation
        • Stop Animation
      • ImageSequence
        • Play ImageSequence
        • Pause ImageSequence
        • Stop ImageSequence
        • Resume ImageSequence
        • Get Current ImageSequence Frame
        • Get ImageSequence Duration
        • Get ImageSequence FPS
        • Get ImageSequence Total Frames
        • Go To Next ImageSequence Frame
        • Go To Previous ImageSequence Frame
        • Show ImageSequence Frame
        • This Scene
      • List
        • Generate List
        • Next List Entry
        • Previous List Entry
        • Select List Entry
        • Set Active
        • Set Current Index
      • Object
        • Get Alpha
        • Get Material
        • Get Opacity
        • Get Position
        • Get Position Pixel
        • Get Rotation
        • Get Rotation 2D
        • Get Scale
        • Get Size Pixel
        • Get Tint
        • Get Visibility
        • Set Alpha
        • Set Material
        • Set Position
        • Set Position Pixel
        • Set Rotation
        • Set Rotation 2D
        • Set Scale
        • Set Size Pixel
        • Set Text
        • Set Tint
        • Set Visibility
        • Set Opacity
      • On-Screen Keyboard
        • On-Screen Keyboard Clear Input
        • On-Screen Keyboard Get Input
        • On-Screen Keyboard Move Selection
        • On-Screen Keyboard Press Button
      • Vector
        • Arc
          • Set ArcStart
          • Set ArcEnd
          • Get ArcStart
          • Get ArcEnd
        • Label
          • Get LabelText
        • Line
          • Set LineWidth
          • Get LineWidth
        • Pie
          • Set PieStart
          • Set PieEnd
          • Get PieStart
          • Get PieEnd
        • Rectangle
          • Set RectangleCorners
          • Get RectangleCorners
        • Set BackgroundColor
        • Get BackgroundColor
        • Set FillColor
        • Get FillColor
        • Set StrokeWidth
        • Get StrokeWidth
      • Video
        • Is Video Playing
        • Pause Video
        • Play Video
        • Seek Video
        • Stop Video
      • WebSprite
        • Get Remote URL
        • Set Remote URL
        • Web Sprite Reload
    • IO
      • Load File
      • Save File
    • Math
      • Absolute
      • Add
      • Average
      • Boolean
        • AND
        • Bool Value
        • Negate
        • OR
      • Ceil
      • Clamp
      • Decrement
      • Divide
      • Floor
      • Increment
      • Interpolate
      • Logarithm
      • Math Constant
      • Maximum
      • Minimum
      • Modulo
      • Multiply
      • Numerical Value
      • Power
      • Random
      • Range Mapper
      • Root
      • Rotation Matrix
      • Subtract
      • Trigonometry
        • Arc Cosine
        • Arc Sine
        • Arc Tangent
        • Cosine
        • Radian-Degree Converter
        • Sine
        • Tangent
      • Vector Value
    • String
      • Compare
      • Concat Strings
      • Contains
      • JSON Parse
      • JSON Stringify
      • Length
      • Lower
      • Replace
      • ReplaceRegex
      • Split
      • String Value
      • Upper
    • Utilities
      • Color Value
      • Conversion
      • Create CustomID
      • Group
      • Is Data Type
      • Is Object Type
      • System Call
      • Interval
        • Reset Interval
        • Start Interval
      • Timeout
        • Start Timeout
        • Cancel Timeout
    • Variables
      • Variable Getter
      • Variable Setter
    • Web
      • Call JavaScript Function
Powered by GitBook
On this page
  • 1. The Basic Version
  • Model Logic
  • View Logic
  • 2. The Ticking Version
  • 'Project' tab Logic
  • 'Ticking Animation' Logic

Was this helpful?

  1. Demo Projects

An Analog Clock

PreviousUsing APIs to Pull Dynamic DataNextImage Sequence Button Animation

Last updated 3 years ago

Was this helpful?

Clocks show up everywhere in HMIs, and happen to be simple to create in Incari.

Load up the 'AnalogClock' project file from Incari Hub. The included are a version with a ticking animation and a basic one.

Basic Version
Ticking Version

1. The Basic Version

Open the 'AnalogClock' project from the Incari Hub Remote Projects tab. In the look for 'Basic' and make sure its visibility toggle is active. You can press Run (Ctrl+R) to preview how the looks.

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. It makes things much easier to reason about in the long run!

Let's look a bit closer at how we've done this.

Model Logic

By storing into these Variables, we can achieve the decoupling between data and interface mentioned earlier.

View Logic

That's it for how the basic example works under the hood.

Save and run the project to see the basic clock!

2. The Ticking Version

'Project' tab Logic

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'.

'updateTimeVariables' Function

'initializeTime' Function

'Ticking Animation' Logic

The 'Ticking Animation' Logic is divided into several parts. The Logic updates the time Variables every 1s, 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.

Update Time Variables

Create Second Hand Ticking Movement

  • 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

Rotates the Clock Hand Images

Save and run the Project to see the ticking clock!

Now we can dive into how it works. In the top Menu bar, go to View -> if it isn't already visible. Double click 'Basic' in the to load up the Logic. Make sure the 'Basic' tab is selected in the module- the Project Logic is explained later.

You'll see two major groups of , which don't appear to be connected. The left side handles the data gathering part of our . The right side takes this data and updates the User Interface (the clock face).

When the is displayed, we trigger a Node. This takes a single (►) Input and creates a recurring Output triggering the next Node at a set time interval. This will let us get the current time on an ongoing basis.

In this case, we have set to retrigger System Time every 0.1 seconds (see the Timeout Attribute).

The 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.

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 Nodes, one for each clock hand.

Using an Node for each Variable will allow us to trigger an update on each clock hand only when needed.

Finally, we pass the Variable value and the trigger from the Nodes to three Nodes configured to point to each clock hand image layer.

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 tweaked to our needs. In order to manage this complexity, we'll also introduce the concept of in Incari.

From the , double click the named ‘Ticking Animation'.

This is split across two tabs on the : The ‘Project’ tab and the ‘Ticking Animation’ tab.

This gets the current time and sets the time Variables to the current system time. The seconds are saved as values, while the minutes and hours are saved as values.

We also check the option to output the values for the hours and minutes as smooth 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 'initializeTime' Function checks to see if the time has been initialized and sets the 'timeInitialized' value to true.

This part of the Logic runs only when the time has first been initialized. Then, a Node is triggered. Every 1 second, the Function 'updateTimeVariables' will run, which will update the current 'Second', 'Minute', and 'Hour' Variables.

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 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".

The Node has a few different Attributes that we can tweak to achieve a certain look:

For each, the seconds, minutes, and hours, the time value is remapped to a rotation value (degrees) using a custom 'convertTimeToRotation' Function. This takes the time value, remaps the value using a Node, and converts those values to a value.

The 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.

Now that the time values have been converted to rotation values, we can use those values to set the rotation of each clock hand image using a Node.

Logic Editor
Project Outliner
Scene
Logic Editor
Start Interval
System Time
Variable Setter
On Change Event
On Change
Set Rotation
Functions
Project Outliner
Scene
Scene
Logic Editor
Function
Integer
Float
Float
Boolean
Start Interval
Interpolate
Interpolate
Function
Range Mapper
Vector3
Range Mapper
Set Rotation
Scenes
Project Outliner
Scene
Scene
Scene
Start Interval
Nodes
Pulse
Pulse
The Project Outliner with an active visibility toggle for the 'Basic Scene'.
All Logic from the 'Basic' tab in the Logic Editor.
Model Logic from the 'Basic' tab.
Start Interval Node and Attributes
System Time Node and Attributes
Setting the time Variables.
Logic in the 'Project' tab
updateTimeVariables Function.
All logic in the ‘Ticking Animation’ tab.
convertTimetoRotation Function.