Incari Studio
2024.1
2024.1
  • Incari HMI Development Platform
  • Getting Started
    • Overview
    • Requirements
    • What's New
    • Installation
    • First Steps
      • Incari Hub
      • Creating a Project
      • Incari Studio
  • Objects and Types
    • Overview
    • Project Objects
      • Scene
      • Scene2D
      • Screen
      • HMD
    • Scene Objects
      • Audio
      • Camera
      • Group
      • Image Sequence Sprite
      • Label
      • Light
      • List
      • Lottie Sprite
      • Mesh
      • On-Screen Keyboard
      • Overlay
      • Primitives
      • Sprite
      • Svg
      • Text
      • Vector
      • Video
      • Web Sprite
    • Scene2D Objects
      • Audio
      • Camera
      • Frame
      • GUI
        • Button
        • Dropdown
        • List
        • Slider
        • Text Area
        • Text Input
        • Toggle
      • Group
      • Image
      • Overlay
      • Vector
        • Boolean Operation
        • Ellipse
        • Line
        • Rectangle
        • Text
      • Video
      • Vector (old)
    • Prefabs
      • Creating and Using Prefabs
        • Prefabs in Scenes
        • Prefabs in Scene2Ds
      • Logic in Prefabs
      • Nested Prefabs
    • Attributes
      • Attribute Types
        • Asset/Object Attribute
        • Boolean Attribute
        • Color Attribute
        • Numerical Attribute
      • Common Attributes
        • Object
        • Sprite
        • Transformation
          • Global Transformations
          • Local Transformations
        • Tag
        • Debug ID
    • Data Types
      • Bool
      • Byte
      • Float
      • Int
      • String
      • Vector2
      • Vector3
      • Vector4
    • Terminology
  • Modules
    • Overview
    • Animation Editor
    • Asset Database
    • Asset Manager
    • Attribute Editor
    • Code Editor
    • Console
    • Exporter
    • Figma Importer
      • Current Limitations
    • Image Sequence Editor
    • Logic Editor
      • AI Logic Generation
      • Logic Debugging
    • Global Preferences
    • Material Editor
      • Car Paint Model
      • Custom Shading Model
      • Phong Model
      • Glass Model
      • Extended PBR Model
      • PBR Model
      • Shadeless Model
    • Model Editor
    • Plugins
      • Communication
        • Bluetooth
        • CANopen
        • MAVLink
        • Serial
        • Socket.IO
        • TCP
        • UDP
        • WebSocket
    • Profiler View
    • Project Outliner
    • Project Settings
      • CAN
      • CANopen
      • Fonts
      • HTTP
      • Keyboard
      • Localization
      • MAVLink
      • MQTT
      • Profiler
      • Scene Separation
      • Serial
      • Socket.IO
      • Styles
      • TCP
      • UDP
      • WebSocket
    • Scene Outliner
  • Toolbox
    • Overview
    • 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
      • Insert Array Element
      • Length of Array
      • Pop Array Element
      • Push Array Element
      • Remove Array Element
      • Set Array Element
    • Binary
      • Binary Value
      • Binary to Byte Array
      • Concat Binaries
      • Verify Checksum
    • Communication
      • Bluetooth
        • Events
          • On Bluetooth Device Paired
          • On Bluetooth Device Unpaired
        • Is Bluetooth Device Paired
        • Pair Bluetooth Device
        • Retrieve Call History
        • Retrieve Phonebook
        • Scan For Bluetooth Devices
        • Unpair Bluetooth Device
      • CAN
        • CAN Send Packet
        • CAN Start
        • CAN Stop
        • Events
          • On CAN Packet Received
          • On CAN Start
          • On CAN Stop
      • CANopen
        • CANopen Send
        • CANopen Start
        • CANopen Stop
        • Events
          • On CANopen Receive
          • On CANopen Start
          • On CANopen Stop
      • HTTP
        • Events
          • On HTTP Route
          • On HTTP Server Start
          • On HTTP Server Stop
        • HTTP Client
        • HTTP Response
        • HTTP Server Start
        • HTTP Server Stop
      • MAVLink
        • Events
          • On MAVLink Packet Received
          • On MAVLink Start
          • On MAVLink Stop
        • MAVLink Decode
        • MAVLink Start
        • MAVLink Stop
      • MQTT
        • Events
          • On MQTT Start
          • On MQTT Stop
          • On MQTT Topic
        • MQTT Publish
        • MQTT Start
        • MQTT Stop
        • MQTT Subscribe
      • Serial
        • Events
          • On Serial Error
          • On Serial Packet Receive
          • On Serial Start
          • On Serial Stop
        • Serial Send Packet
        • Serial Start
        • Serial Stop
      • Socket.IO
        • Events
          • On Socket.IO Error
          • On Socket.IO Receive
          • On Socket.IO Start
          • On Socket.IO Stop
        • Socket.IO Send
        • Socket.IO Start
        • Socket.IO Stop
        • Socket.IO Subscribe
        • Socket.IO Unsubscribe
      • TCP
        • Events
          • On TCP Error
          • On TCP Packet Receive
          • On TCP Start
          • On TCP Stop
        • TCP Send
        • TCP Start
        • TCP Stop
      • UDP
        • Events
          • On UDP Error
          • On UDP Packet Receive
          • On UDP Start
          • On UDP Stop
        • UDP Send
        • UDP Start
        • UDP Stop
      • WebSocket
        • Events
          • On WebSocket Error
          • On WebSocket Receive
          • On WebSocket Start
          • On Websocket Stop
        • WebSocket Client Send
        • WebSocket Client Start
        • WebSocket Client Stop
    • 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
      • Input
        • On Text Change
      • Keyboard
        • On Key Press
        • On Key Release
      • Leap Motion
        • On Leap Motion Frame Update
        • On Leap Motion Grab End
        • On Leap Motion Grab Start
        • On Leap Motion Grab Update
        • On Leap Motion Pinch End
        • On Leap Motion Pinch Start
        • On Leap Motion Pinch Update
        • On Leap Motion Swipe Left
        • On Leap Motion Swipe Right
        • XR Position
      • List
        • On List Current Index Change
        • On List Entry Select
        • On List Load
      • List 2D
        • On List Active Index Change
      • Localization
        • On Localization Language Change
      • Lottie
        • On Lottie Finish
        • On Lottie Pause
        • On Lottie Play
        • On Lottie Stop
      • Media
        • On Media Finish
        • On Media Play
      • 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 CheckBox Value Change
        • On Dropdown Active Value Change
        • On Opacity Change
        • On Position Change
        • On Rotation Change
        • On Scale Change
        • On Slider Value 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
      • Scene
        • On Scene Loaded
      • Unsubscribe
      • Screen
        • On Screen Scene Change
      • Variables
        • On Variable Change
        • On Variable Set
      • Web
        • On JavaScript Callback
      • WebSprite
        • On WebSprite Load
        • On WebSprite Remote URL Change
    • 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
    • IO
      • Create File
      • Get Current Directory
      • Get File Extension
      • List Directory Content
      • Load File
      • Remove
      • Save File
      • Set Current Directory
    • Incari
      • Animation
        • Pause Animation
        • Play Animation
        • Stop Animation
      • Asset
        • Add to Asset Database
        • Remove from Asset Database
      • Camera
        • Get Active Camera
        • Get All Cameras
        • Set Active Camera
      • 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
        • Pause ImageSequence
        • Play ImageSequence
        • Resume ImageSequence
        • Show ImageSequence Frame
        • Stop ImageSequence
      • List
        • Generate List
        • Get Selected Item
        • Next List Entry
        • Previous List Entry
        • Select List Entry
        • Set Active
        • Set Current Index
      • List 2D
        • Add List Element
        • Get Active Index
        • Get List Data
        • Get List Element
        • Insert List Element
        • Remove List Element
        • Set Active Index
        • Set List Data
        • Set List Element
      • Lottie
        • Pause Lottie
        • Play Lottie
        • Stop Lottie
      • Material
        • Get Material Property
        • Set Material Property
      • Media
        • Get Media
        • Get Media Length
        • Get Media Loop
        • Get Media Metadata
        • Get Media Progress
        • Get Volume
        • Is Media Playing
        • Pause Media
        • Play Media
        • Set Media
        • Set Media Loop
        • Set Media Progress
        • Set Volume
        • Stop Media
      • Object
        • Add Tag
        • Create Object
        • Destroy Object
        • Get CSS Property
        • Get Ellipse Arc Sector
        • Get Ellipse Start Angle
        • Get Inner Radius
        • Get CheckBox Value
        • Get Children
        • Get Material
        • Get Name
        • Get Objects By Tag
        • Get Opacity
        • Get Parent
        • Get Position
        • Get Root
        • Get Rotation
        • Get Scale
        • Get Size
        • Get Slider Value
        • Get Sort Index
        • Get Tag
        • Get Text
        • Get Text Color
        • Get Tint
        • Get Visibility
        • Has Children
        • Instantiate Object
        • Remove Tag
        • Set CSS Property
        • Set Ellipse Arc Sector
        • Set Ellipse Start Angle
        • Set Inner Radius
        • Set CheckBox Value
        • Set Mask
        • Set Material
        • Set Opacity
        • Set Overlay Scene
        • Set Position
        • Set Rotation
        • Set Scale
        • Set Size
        • Set Slider Value
        • Set Sort Index
        • Set Stylesheet
        • Set Text
        • Set Text Color
        • Set Texture
        • Set Tint
        • Set Visibility
        • Use Mask
      • Object 2D
        • Add CSS Class Name
        • Get Active Dropdown Value
        • Get CSS Class Names
        • Get Dropdown Options
        • Get Paint
        • Get Paint Opacity
        • Get Stroke Width
        • Remove CSS Class Name
        • Set Active Dropdown Index
        • Set Active Dropdown Value
        • Set Blend Mode
        • Set CSS Class Names
        • Set Dropdown Options
        • Set Paint
        • Set Paint Opacity
        • Set Stroke Width
      • On-Screen Keyboard
        • Get Screen Keyboard Layout
        • On-Screen Keyboard Clear Input
        • On-Screen Keyboard Get Input
        • On-Screen Keyboard Move Selection
        • On-Screen Keyboard Press Button
        • Set Screen Keyboard Layout
      • Scene
        • Set Scene Environment Color
        • Set Scene Environment Map
        • This Scene
      • Scene 2D
        • Get Stylesheet
        • Merge To Stylesheet
        • Set Stylesheet
      • Ultrahaptics
        • Ultrahaptics Play
        • Ultrahaptics Stop
      • Scenes
        • Scene
      • Screen
        • Get Scene
        • Load Scene
        • Set Background
        • Set Scene
        • Unload Scene
      • Screens
        • Screen
      • Vector
        • Arc
          • Get ArcEnd
          • Get ArcStart
          • Set ArcEnd
          • Set ArcStart
        • Get FillColor
        • Get StrokeWidth
        • Line
          • Get LineWidth
          • Set LineWidth
        • Pie
          • Get PieEnd
          • Get PieStart
          • Set PieEnd
          • Set PieStart
        • Rectangle
          • Get RectangleCorners
          • Set RectangleCorners
        • Set FillColor
        • Set StrokeWidth
      • WebSprite
        • Get Remote URL
        • Set Remote URL
        • Web Sprite Reload
    • Localization
      • Get All Languages
      • Get Language
      • Get Translation
      • Get Translation Key
      • Set Language
      • Set Translation Attribute
      • Set Translation Key
    • 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
      • Round
      • Subtract
      • Trigonometry
        • Arc Cosine
        • Arc Sine
        • Arc Tangent
        • Arc Tangent 2
        • Cosine
        • Radian-Degree Converter
        • Sine
        • Tangent
      • Vector Value
    • Plugins
      • (JSON) Scale Vector
    • Prefab
      • This Prefab
    • String
      • Capitalize
      • CharCodeAt
      • Compare
      • Concat Strings
      • Contains
      • CryptoHash
      • EndsWith
      • Format
      • FormatArray
      • IndexOf
      • IsLower
      • IsUpper
      • JSON Parse
      • JSON Stringify
      • Join
      • LastIndexOf
      • Length
      • Lower
      • MatchRegex
      • PaddingLeft
      • PaddingRight
      • RandomString
      • RemoveCharacters
      • Replace
      • ReplaceRegex
      • Reverse
      • Split
      • StartsWith
      • String Value
      • Substring
      • Trim
      • TrimLeft
      • TrimRight
      • Upper
    • Transition
      • CrossFade
      • Fade
      • MoveInFromBottom
      • MoveInFromLeft
      • MoveInFromRight
      • MoveInFromTop
      • SlideInFromBottom
      • SlideInFromLeft
      • SlideInFromRight
      • SlideInFromTop
    • Utilities
      • Color Value
      • Conversion
      • Create CustomID
      • Get Command Line Option
      • Group
      • Interval
        • Reset Interval
        • Start Interval
      • Is Data Type
      • Is Object Type
      • Mouse
        • Get Mouse Position
        • Get Mouse Position Delta
      • System Call
      • Timeout
        • Cancel Timeout
        • Start Timeout
    • Variables
      • Variable Getter
      • Variable Setter
    • Web
      • Call JavaScript Function
  • Demo Projects
    • Overview
    • 4 Methods of Animation
    • Using APIs to Pull Dynamic Data
    • An Analog Clock
    • Image Sequence Button Animation
    • Prefabs
    • Project Initialization
    • On-Screen Keyboard
    • Skinnable Speedometer
    • Python Testing API
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 1 year 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 Scenes 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 Project Outliner look for 'Basic' and make sure its visibility toggle is active. You can press Run (Ctrl+R) to preview how the Scene looks.

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

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

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

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.

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.

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

View Logic

Using an On Change Event 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 On Change Nodes to three Set Rotation Nodes configured to point to each clock hand image layer.

Save and run the project to see the basic clock!

2. The Ticking Version

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.

From the Project Outliner, double-click the Scene named ‘Ticking Animation'.

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

'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

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

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.

'initializeTime' Function

The 'initializeTime' Function checks to see if the time has been initialized and sets the 'timeInitialized' Boolean value to true.

'Ticking Animation' Logic

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.

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

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

  • 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 time value is remapped to a rotation value (degrees) using a custom 'convertTimeToRotation' Function; this is done for seconds, minutes and hours. This Function takes the time value, remaps the value using a Range Mapper Node, and converts those values to a Vector3 value.

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

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 Set Rotation Node.

Save and run the Project to see the ticking clock.

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

When the Scene is displayed, we trigger a Start Interval 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.

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.