Incari Studio
2023.1
2023.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
      • Text
      • Vector
      • Video
      • Web Sprite
    • Scene2D Objects
      • Camera
      • Frame
      • GUI
        • Button
        • Dropdown
        • List
        • Slider
        • Text
        • Text Area
        • Text Input
        • Toggle
      • Image
      • Vector
    • 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
    • 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
    • Image Sequence Editor
    • Logic Editor
    • 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
        • MAVLink
        • Serial
        • Socket.IO
        • TCP
        • UDP
    • Profiler View
    • Project Outliner
    • Project Settings
      • CAN
      • Fonts
      • HTTP
      • Keyboard
      • MAVLink
      • MQTT
      • Profiler
      • Scene Separation
      • Serial
      • Socket.IO
      • Styles
      • TCP
      • UDP
    • 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 (Hex) Value
      • Concat Binaries
    • Communication
      • CAN
        • CAN Send Packet
        • CAN Start
        • CAN Stop
        • Events
          • On CAN Packet Received
          • On CAN Start
          • On CAN 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
    • 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
      • Lottie
        • On Lottie Finish
        • On Lottie Pause
        • On Lottie Play
        • On Lottie Stop
      • Media
        • On Media Finish
        • On Media Play
      • Mouse
        • Get Mouse Position
        • Get Mouse Position Delta
        • 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 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
      • 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
        • Set Custom Uniform
      • Media
        • Get Volume
        • Is Media Playing
        • Pause Media
        • Play Media
        • Seek Media
        • Set Volume
        • Stop Media
      • Object
        • Add Tag
        • Destroy Object
        • Get Active Dropdown Value
        • Get Alpha
        • Get CSS Property
        • Get CheckBox Value
        • Get Children
        • Get Dropdown Options
        • 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
        • On List Item Clicked
        • Remove Tag
        • Set Active Dropdown Index
        • Set Active Dropdown Value
        • Set Alpha
        • Set CSS Property
        • Set CheckBox Value
        • Set Dropdown Options
        • Set Mask
        • Set Material
        • Set Opacity
        • 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 CSS Class Names
        • Remove CSS Class Name
        • Set CSS Class Names
      • 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 2D
        • Get Stylesheet
        • Merge To Stylesheet
        • Set Stylesheet
      • This Scene
      • Ultrahaptics
        • Ultrahaptics Play
        • Ultrahaptics Stop
      • Scenes
        • Scene
      • Screen
        • Get Scene
        • Set Scene
      • Screens
        • Screen
      • Vector
        • Arc
          • Get ArcEnd
          • Get ArcStart
          • Set ArcEnd
          • Set ArcStart
        • Get BackgroundColor
        • Get FillColor
        • Get StrokeWidth
        • Label
          • Get LabelText
        • Line
          • Get LineWidth
          • Set LineWidth
        • Pie
          • Get PieEnd
          • Get PieStart
          • Set PieEnd
          • Set PieStart
        • Rectangle
          • Get RectangleCorners
          • Set RectangleCorners
        • Set BackgroundColor
        • Set FillColor
        • Set StrokeWidth
      • WebSprite
        • Get Remote URL
        • Set Remote URL
        • Web Sprite Reload
    • 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
      • Create Object
      • Get Command Line Option
      • Group
      • Interval
        • Reset Interval
        • Start Interval
      • Is Data Type
      • Is Object Type
      • 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
Powered by GitBook
On this page
  • 1 - Logic Editor Window
  • 2 - Toolbar
  • 3 - Top Panel
  • 4 - Left Panel
  • 5 - The Logic Graph / Node Graph
  • Nodes
  • 6 & 7 - Node Attribute Editor
  • General Attributes
  • Node-Specific Attributes

Was this helpful?

  1. Modules

Logic Editor

PreviousImage Sequence EditorNextGlobal Preferences

Last updated 1 year ago

Was this helpful?

Logic in Incari is what allows us to take our 2D/3D Assets and turn them into fully interactive User Interfaces. Traditionally, building this kind of complex system was only achievable by writing a lot of code. However, by utilizing Incari's powerful visual scripting tools, we can build these systems without writing a single line. This section introduces you to some of the core concepts and terminologies of Incari's Logic Editor.

1 - Logic Editor Window

Logic Editor - The main window which contains all things Logic-related. It is compartmentalized into several different sections discussed below.

2 - Toolbar

The Toolbar shows a list of icons that are used to visualize certain features in the Logic Graph. Definitions of the icons are as follows:

3 - Top Panel

The top panel represents Logic Graphs that are implemented for different Incari items, such as the current opened Project, the selected Scene in the Project Outliner, and Functions added to the Logic Editor. Each Logic Graph can be accessed by using the tabs on the top panel.

4 - Left Panel

The left panel contains Nodes that can be added to the Logic Editor and is divided into five sections. These are Explorer, Toolbox, Events, Functions, and Variables.

Each section is described below:

All Nodes and Groups that are added to the Logic Graph will be listed in this section. When an item is picked in this section, the corresponding Node is selected in the Logic Graph.

The Toolbox contains all of the individual tools you will need to create your Logic. The function and purpose of all Nodes are covered in depth in the Toolbox section and it is highly recommended that you refer to it to understand how each Node functions. In short, the Toolbox contains a categorized list of all Nodes available at your disposal, which can be added to your Logic by double-clicking or dragging and dropping an item into your Logic Graph.

5 - The Logic Graph / Node Graph

This is the most important section of the Logic Editor. If the Nodes and Variables are the paints and materials at your disposal, then the Logic Graph is the canvas. This is where we build our systems from the ground up and where you will spend most of your time while using Incari.

Fundamentally, it is comprised of a combination of two entities: Nodes and Connections.

Nodes

Nodes are components that each have a specific, singular function. The majority of Nodes evaluate data values based on input parameters, but they can also represent Variables, Events, and Objects.

Sockets

Sockets are like the ports on an electronic device. Along with Connections, they allow us to link Nodes to each other. In Incari, Sockets are either:

  • Input (receiving an instruction or data value). Sockets on the left-hand side of a Node are Input Sockets.

  • Output (sending an instruction or data value). Sockets on the right-hand side of a Node are Output Sockets.

Beyond that, we have Pulse and Data Sockets denoted by white triangles (â–º) and colored squares (â– ), respectively. For example, when we refer to an "Input Pulse Socket", we are normally referring to the white triangle in the top-left-hand side of a Node.

The concept of Sockets makes much more sense in the context of Connections.

Connections

Connections are the "wires" that link our components together. This is how we pass data between Nodes and how we determine the execution order of our Logic. Connections come in two categories and are related to the type of Socket they are plugged into. The two categories are Pulse and Data.

Pulse

These Connections do not carry any data between Nodes. What they do is tell Nodes that it is time for them to execute. Once a Node has finished its execution and its purpose has been fulfilled, the next Node connected via the Pulse Connection will then begin its task. Pulse Connections are represented by a white "wire" linking two Pulse Sockets, represented by white triangles (â–º). Multiple Connections can be plugged into a single Pulse Input Socket, however only one Connection can come out of a Pulse Output Socket. Pulse Connections are also referred to as Pulses.

Data

These Connections pass data values between Nodes. We do this by connecting the Data Output Socket of one Node into a Data Input Socket of another Node. Both the input and output Sockets must be of the same Data Type. Data Sockets are represented by a colored square (⬛), the color of which corresponds to the Data Type. Conversely to Pulse Connections, Data Input Sockets can take only one Input Connection, whereas Data Output Sockets can have multiple Output Connections. Unlike Pulse Connections, Data Connections do not initiate the execution of a Node.

6 & 7 - Node Attribute Editor

The Node Attribute Editor (referred to simply as Editor from here on) is similar to the Attribute Editor, except rather than adjusting the Attributes of Objects, we can adjust the Attributes of Nodes. Node Attributes are specific to that particular Node and are documented in their corresponding entry in the Toolbox section. Oftentimes, Node Attributes are simply an alternative to using Input Connections and can define a default value if there is no Connection attached to that particular Input Socket. There are exceptions, however, where Attributes can be set only in the Editor and there is no equivalent Socket available. These are discussed below in the Node-Specific Attributes section.

General Attributes

Coming under the "Node" heading of the Editor, these Attributes are available on nearly all Nodes and can only be set in the Editor.

All Nodes have the following Attributes:

  • Name - The name of the Node. This isn't editable unless it is a Function.

  • Type - The type of Node. This isn't editable and will often be the same as the name, unless the Node represents something which the user defines, like Functions, Variables, and Objects.

  • Enabled - Allows the entire Node to be ignored by enabling/disabling it. This is useful when you want to test and debug a specific part of your Logic, as you can disable entire Node Trees temporarily. All subsequent Nodes linked via Pulse Connections will not be executed.

Most Nodes also have an additional Attribute:

  • Pulse Pass Through - Similar to the Enabled Attribute above, it disables the evaluation of a Node. The difference with this option, however, is that subsequent Nodes linked via Pulse Connections will be executed. This is useful when you only want to disable part of a Node Tree, rather than the entire thing.

Node-Specific Attributes

As stated above, most Node Attributes are an alternative to Data Input Connections and allow us to set default values, in the absence of such a Connection. There are cases, though, where Attributes can only be set in the Editor, which modifies the way that the Node functions.

Data Types

Some Nodes work with different Data Types. However, these need to be explicitly defined in the Editor, so that the Node knows which Type it will receive (Input) and/or the Type of data it will return (Output). Where multiple Data Types are available, there will be a drop-down Menu in the Editor. Changing the Type will also change the color of the corresponding Socket.

Linked Objects

Some Node Attributes correspond to something outside of the Logic Editor, such as a Scene, Screen, Object, Text Object, or File. In this case, you will see a small square, which will either have a thumbnail, related to that Type of File or Object, or the text "drag here". To assign something to the Attribute, simply drag and drop it onto the square.

Adding Removing Sockets

There are a few Nodes in Incari that allow you to customize the number of Input/Output Sockets. The purpose for this is very specific to that particular Node, but the process of adding/removing parameters is the same.

By clicking the plus button (+) you can add additional elements, which will be added to the bottom of the list.

By clicking the cross button (x) you can remove elements. If you click the cross on the list header, it will remove all of the elements, whereas if you click the cross on a list item, you only remove that single element.

You can also rearrange the order of the elements by clicking and dragging elements using the rearrange button (â ¿).

The Import blueprint icon allows you to import a Logic Graph saved on your computer into the Logic Editor.

The Group icon clusters Logic Graphs into distinct groupings. See a usage example below:

The Highlight icon applies a distinct color to sections of a Logic Graph that are connected together. Remove highlight reverses the action performed by clicking the Highlight icon. See a usage example below:

The Align horizontally and Align vertically icons will align a Node Graph horizontally and vertically, respectively, in the Logic Editor. See a usage example below:

The Arrange horizontally and Arrange vertically icons will arrange a Node Graph horizontally and vertically, respectively, in the Logic Editor. See a usage example below:

An Event Node can be added to the Events tab by clicking on the add icon located at the top of the panel, then the desired name for the Event Node is inserted. You can add the Event Node to your Logic by dragging and dropping it into your Logic Graph. The illustration below describes briefly how Events are created in the Logic Editor. For a detailed introduction to Events, please see .

Custom-built Node Graphs can be packaged as a Function and added to your Scene Logic in a modular manner. To add a Function to the Functions tab, click on the add icon located at the top of the panel and type in the desired name of the Function. The illustration below describes briefly how Functions are created in the Logic Editor. For a detailed discussion of Functions, please see .

The Variables tab allows us to add Variables to the Logic Editor. To add a Variable to your Logic Graph, click on the add icon located at the top of the panel and type in the desired Variable name. The illustration below describes briefly how Variables are created in the Logic Editor. For a detailed discussion of Variables, please see .

toolbox/events
toolbox/functions
toolbox/variables
Nodes are linked together by connections to define logic and execution order.
Nodes have a number of input/output sockets.
Nodes are linked to each other via Connections.
The Node Attribute Editor Node
The Node Attribute Editor Inputs
The Node Attribute Editor Outputs