# Controls and Behaviors

# Controls

This chapter gives an overview of what Controls are and shows how to use them.

# Concept and Use Cases

#### Control Concept

Controls are template scenes created for later reuse via control nodes. They are meant to be interactive. To make them interactive they can be filled with Behaviors. A control collects a part of the scene graph and Behaviors into a single entity, which can be instantiated in another scene. All the controls are written in a special section which belongs to the asset library. When the solution is loaded from the asset, the content of the value of the control properties from the control node is set on the associated Behaviors in the control. Also the anchor nodes inside the user scene are added to the associated nodes in the control.

<p class="callout info">Created controls will include Behaviors with the observation that the Behaviors will be included only if they are bound to a node from the created control.</p>

<div class="contents" id="bkmrk-the-interface-of-a-c"><div class="contents"><div class="textblock"><dl class="note"><dd>The interface of a control is defined by its control properties and anchors. The control properties are linked to the Behaviors inside controls and allow to change the value of the exposed properties. The anchors are linked to nodes inside controls and allow adding new children to those nodes.</dd></dl></div></div></div>Main differences of controls compared to regular scenes:

<div class="contents" id="bkmrk-controls-can-be-used"><div class="contents"><div class="textblock">- Controls can be used in regular user scenes by dragging them into the scene like imported or Toolbox nodes
- Child nodes of a control (on any level) can be marked as anchors, if they are empty
- Controls have no cameras or lights
- Controls are meant to be interactive
- Controls can have public properties

</div></div></div>Each scene node is uniquely identified by its parent using the type and the name. To identify a node globally its path to the scene should be used (for example /Scene:MyScene/Group:RootNode/Mesh:MyMesh).

The Scene Tree panel of a scene using a control will treat it as a single entity with all available anchor nodes as children. It is not possible to change the content of the control node, only the content of the anchors can be changed.

<p class="callout info">The following impact has to be considered: Cross-references (nodes or behaviors) to different scenes may occur. For details see <span style="color: rgb(230, 126, 35);">[Cross-Reference Implications](https://doc316en.candera.eu/books/controls-and-behaviors/page/overview#bkmrk-cross-reference-impl)</span>.</p>

#### Control Use Cases

<div class="contents" id="bkmrk-add-new-control-cont"><div class="textblock">- Add new control content to all scenes: Imagine a control containing a car used in several scenes. To add a specific car accessory, simply link the accessory from the Imports panel to a proper anchor of the control. All scenes will be updated immediately.
- Add Behaviors to controls to make them interactive.
- Customize control nodes in specific scenes: In above car example, to use different car wheels in several scenes remove the initial meshes representing the wheels from the control and replace them with anchors to be customized in a scene.

<dl class="note"><dd><p class="callout info">A conflict situation appears when two or more nodes have the same path (for example 2 billboards with the same name are added to a group). To avoid name conflicts when the controls are used, it is recommended to link anchors only to empty nodes and also to not link more than one anchor to a node.</p>

</dd></dl>---

<dl class="note"></dl></div></div>

# Use Controls

#### Use Controls

Controls are displayed in Toolbox panel from where they can be dropped into scenes which will result in control nodes.

<div drawio-diagram="7017"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-10/drawing-7-1729124703.png" alt=""/></div>

<div class="contents" id="bkmrk--2"><div class="contents"></div></div>A "Show Controls as Big Icons/List" button is available in the upper right corner. If this button is used, a different presentation mode - as icons instead of a text list of items - will be made available (see the image below).

<div drawio-diagram="7018"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-10/drawing-7-1729130157.png" alt=""/></div>

<div class="contents" id="bkmrk--0"><div class="contents"></div></div>The Scene Tree panel of a scene lists a control node as a single entity with all the anchors defined as children.

<div class="contents" id="bkmrk--5"><div class="contents"><div class="textblock"><div drawio-diagram="7019"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-10/drawing-7-1729130207.png" alt=""/></div>

</div></div></div>New content (other nodes) can be added from the Import or Toolbox panels to anchors by dropping a new node over an anchor and editing it in the Properties panel as usual.

#### Control Properties

By using the context menu the "Configure Public Control Properties" panel will get opened. This can be done by selecting the "Control Properties..." operation from the context menu.

<div class="contents" id="bkmrk-the-%22configure-prope"><div class="contents"><div class="contents"><div class="textblock"><dl class="note"><dd><p class="callout info">The "Configure Public Control Properties" panel can be opened just when a control scene is selected - as can be seen in the image below.</p>

</dd></dl></div></div></div></div><div drawio-diagram="7020"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-10/drawing-7-1729130308.png" alt=""/></div>

<div class="contents" id="bkmrk--8"><div class="contents"></div></div>In this way, a new dialog "Configure Public Control Properties" opens where the user can choose which properties of the widget should be available (i.e. public) in the control.

<div class="contents" id="bkmrk-all-the-properties-o"><div class="contents"><div class="textblock"><dl class="note"><dt></dt><dd><p class="callout info">All the properties of those control nodes (i.e. instances of controls) which are present within a control scene - in conjunction with behaviors and widgets - are displayed in the "Configure Public Control Properties" dialog</p>

</dd><dd></dd></dl></div></div></div>If necessary, the user can use the fields available under the "Name" and "Tooltip" sections to introduce any useful piece of information. The values filled by the user in the "Configure Public Control Properties" dialog will be visible in the "Properties" panel.

<div class="contents" id="bkmrk--9"><div class="contents"><div class="textblock"><div drawio-diagram="7021"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-10/drawing-7-1729130387.png" alt=""/></div>

</div></div></div>All the name of the properties have to be distinct/different. If not, a "Property name must be unique." warning message will be displayed.

<div class="contents" id="bkmrk--10"><div class="contents"><div class="textblock"><div drawio-diagram="7026"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-10/drawing-7-1729132215.png" alt=""/></div>

</div></div></div>If all the names are different, the properties which were selected as "public" will be displayed as public properties in the Properties panel. It is possible to remove any of these properties by using the "X" button.

<div class="contents" id="bkmrk--12"><div class="contents"><div class="textblock"><div drawio-diagram="7023"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-10/drawing-7-1729130677.png" alt=""/></div>

</div></div></div>If the control with public properties is used in a scene, those properties will be visible in the Properties panel, too.

<div class="contents" id="bkmrk--16"><div class="contents"><div class="textblock"><div drawio-diagram="7024"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-10/drawing-7-1729130864.png" alt=""/></div>

</div></div></div>When the control is used in a scene, any of the public properties can be set or modified but none of the properties can be removed.

The display order of public properties in the property panel can be set in the \[ Public Control Property Configuration \] dialog. You can change the display order by clicking the button to the left of each property name displayed in the Public properties, or by dragging and dropping each property.

<div drawio-diagram="7025"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-10/drawing-7-1729131038.png" alt=""/></div>

#### Control Updates

When a control is being edited, the changes are reflected in all the scenes using that control.

---

# Create Controls

#### Save a Node As Control

Save nodes as control using:

<div class="contents" id="bkmrk-%22save-as-control%22-co"><div class="contents"><div class="textblock">- "Save as Control" context menu item on a selected node in the Scene Tree panel. The new control will contain both node and all its children.
- "Save Children as Control" context menu item on a selected node to create the control only from the node children. In this case, the control won't inherit the parent node's actual position, but will have default transformation properties instead.

<div drawio-diagram="2135"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1676970201.png" alt=""/></div>

</div></div></div>In the "Add New Template" dialog, a location within the solution and a name for the new control is defined.

<div class="contents" id="bkmrk-"><div class="contents"><div class="textblock"><div drawio-diagram="2136"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1676970213.png" alt=""/></div>

</div></div></div>The new control will be available in the

<div class="contents" id="bkmrk-solution-explorer-pa"><div class="contents"><div class="textblock">- Solution Explorer panel, and in the
- Toolbox -&gt; Controls.

</div></div></div>Open the control for editing with a double click.

<div class="contents" id="bkmrk--0"><div class="contents"><div class="textblock">---

</div></div></div>#### Create an Empty Control

In Solution Explorer, use the context menu "Add New Item" to create a new control.

<div class="contents" id="bkmrk--1"><div class="contents"><div class="textblock"><div drawio-diagram="2137"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1676970229.png" alt=""/></div>

---

</div></div></div>

# Edit Controls

#### Edit Controls

Controls are listed in Toolbox-Controls panel and Solution Explorer panel. By double clicking on a control, it will be opened for editing just like a normal scene.

Editing controls allows to:

<div class="contents" id="bkmrk-modify-the-scene-gra"><div class="contents"><div class="textblock">- Modify the scene graph structure and content of the control;
- Create and modify anchors to a control.

</div></div></div>It is possible to set a description for the control properties. This description will be shown as tooltip in the properties panel for the associated property of the the control node.

<div class="contents" id="bkmrk-"><div class="contents"><div class="textblock">---

</div></div></div>#### Create Anchors

The Toolbox panel provides an "Anchor" node in addition to regular scene toolbox items but no cameras, when editing controls. An anchor will later be used by a scene to attach further content to the control.

Add an anchor dragging it from the Toolbox and drop it on a desired node part of the control. The anchor will appear as a new child of the control in the Scene Tree panel, named after the parent node on which it is dropped:

<div class="contents" id="bkmrk--0"><div class="contents"><div class="textblock"><div drawio-diagram="2138"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1676970304.png" alt=""/></div>

</div></div></div>The node an anchor is assigned to can be modified in the Properties panel of the anchor.

Further, all anchors of the control are also listed in the Properties panel of the control.

The control functionality provides support to add default content to anchors. When a control is instantiated in a scene, in the anchors where the "Default content" is specified, a control node of that type will be instantiated and added as child to the anchor node itself.

<div class="contents" id="bkmrk--1"><div class="contents"><div class="textblock"><div drawio-diagram="2139"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1676970315.png" alt=""/></div>

</div></div></div>A specific option is available in the context menu of a control instance which has an anchor with default content. The name of this option is "Reset Anchor". By using this option it is possible to reset anchors to the default content.

<div class="contents" id="bkmrk--2"><div class="contents"><div class="textblock"><div drawio-diagram="2140"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1676970327.png" alt=""/></div>

---

</div></div></div>#### Delete Anchors

Delete an anchor in the Scene Tree panel via context menu or in the Properties panel of the control by using the "X" button on the left side of the anchor:

<div class="contents" id="bkmrk--3"><div class="contents"><div class="textblock"><div drawio-diagram="2141"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1676970344.png" alt=""/></div>

---

</div></div></div>

# Expand Controls

#### Expand Controls

If a control node needs to be customized for a specific set of scenes, it might be useful to decompose an existing control to create a new, customized version of it.

For this, use the context menu option "Expand Control Node" on a selected control.

In this case, the control node will lose the link to the original control source and will become a usual node; any modification of the control will not affect it anymore.

<div class="contents" id="bkmrk-"><div class="contents"><div class="textblock"><div drawio-diagram="2142"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1676970401.png" alt=""/></div>

---

</div></div></div>

# Augmented Reality Controls (AR Controls)

#### 1. Introduction

This section describes CGI Studio controls to enable augmented reality applications with CGIStudio, which were designed for generic navigation overlay use case in the automotive area. Typically in **video see-through** AR, a real world video feed is enhanced with graphical elements.

<div class="contents" id="bkmrk-"><div class="contents"><div class="textblock">---

</div></div></div>#### 2. Use Case: Navigation Overlay

Major elements for this use case are:

<div class="contents" id="bkmrk-video-streaming%3A-ren"><div class="contents"><div class="textblock">- **Video Streaming:** Rendering from a video source into a texture.
- **Camera Tracking:** Updating the moving AR camera via data binding.
- **Navigation Path:** Visualization of the proposed path a navigation system.
- **Points of Interests (POIs):** Loading POIs (e.g. street names, buildings, ...) from an external dictionary and place them in the scene at runtime. Metadata is received as JSON formated string.

</div></div></div>Detailed descriptions can be found in <span style="color: rgb(230, 126, 35);">[Predefined Controls](https://doc316en.candera.eu/books/controls-and-behaviors/chapter/predefined-controls)</span> and <span style="color: rgb(230, 126, 35);">[Predefined Behaviors](https://doc316en.candera.eu/books/controls-and-behaviors/chapter/predefined-behaviors)</span>.

<div class="contents" id="bkmrk--0"><div class="contents"><div class="textblock"><div drawio-diagram="2143"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1676970634.png" alt=""/></div>

---

</div></div></div>#### 3. Prerequisites

##### 3.1. Cmake flags

Enable and disabling mixed reality and streaming features:

<div class="contents" id="bkmrk-cgiapp_sample_stream"><div class="contents"><div class="textblock">- `CGIAPP_SAMPLE_STREAMING_ENABLED` is used for the streaming feature. It includes GStreamer libraries from the 3rd party directory.
- `CGIAPP_SAMPLE_MIXEDREALITY_ENABLED` is used for all augmented reality related behaviors and controls.

</div></div></div>##### 3.2. GStreamer

GStreamer is the default implementation of the VideoStreamer interface. It is used to decode the video source and provides the data to the VideoStream Behavior. If you want to use GStreamer, a working installation of GStreamer is required. The GStreamer version provided in the <span style="color: rgb(230, 126, 35);">[CGI Studio 3PSW](https://doc316en.candera.eu/link/211#bkmrk-cgi-studio-3psw)</span> is GStreamer version 1.16.1. Successfull installation of GStreamer modules can be verified with the console commmand `gst-inspect-1.0`.   
Note that, under Windows you might need to add GStreamer to the environment variables. Instructions can be found here: <span style="color: rgb(230, 126, 35);">[https://gstreamer.freedesktop.org/documentation/installing/on-windows.html](https://gstreamer.freedesktop.org/documentation/installing/on-windows.html?gi-language=c)</span>

Please also note that, the Android Evaluation Package comes with an installer and by default, the CGI Player is built with streaming enabled. The recommendation is to check the "Install GStreamer" option in the provided installer, and do a "Repair" installation regardless of whether GStreamer is installed or not, because of some dependencies.

<div drawio-diagram="3511"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-05/drawing-7-1684139883.png" alt=""/></div>

If in any case the CGI Player still looks for a missing dll, check that the GStreamer is set in the PATH environment variable, or copy the GStreamer dlls to the same location as the CGI Player executable.

  
For more general information, please visit the official GStreamer website: <span style="color: rgb(230, 126, 35);">[https://gstreamer.freedesktop.org/](https://gstreamer.freedesktop.org/)</span>.

##### 3.3. How to build the CGI Player using GStreamer and Microsoft Visual Studio

<div class="contents" id="bkmrk-make-sure-you-have-a"><div class="contents"><div class="textblock">- Make sure you have a working Microsoft Visual Studio installation.
- Close Microsoft Visual Studio.
- Install GStreamer for Windows developer and runtime: 
    - [https://gstreamer.freedesktop.org/data/pkg/windows/1.22.12/mingw/gstreamer-1.0-devel-mingw-x86\_64-1.22.12.msi](https://gstreamer.freedesktop.org/data/pkg/windows/1.22.12/mingw/gstreamer-1.0-devel-mingw-x86_64-1.22.12.msi)
    - [https://gstreamer.freedesktop.org/data/pkg/windows/1.22.12/mingw/gstreamer-1.0-mingw-x86\_64-1.22.12.msi](https://gstreamer.freedesktop.org/data/pkg/windows/1.22.12/mingw/gstreamer-1.0-mingw-x86_64-1.22.12.msi)
- If you do not have GStreamer directories in the folder `cgi_studio_3psw/lib` and `cgi_studio_3psw/src` you need to copy the following files and folders from your GStreamer installation directory:

<table border="1" style="width: 100%;"><tbody><tr><td style="width: 61.0659%; vertical-align: top;">Copy the following folders from your GStreamer installation directory (`C:/gstreamer/1.0/msvc_x86/include`) to folder `cgi_studio_3psw/src/GStreamer/Win32/include`- glib-2.0
- gstreamer-1.0

</td><td style="width: 38.9341%; vertical-align: top;"><div class="image"><div drawio-diagram="2144"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1676970666.png" alt=""/></div>

  
</div></td></tr><tr><td style="width: 61.0659%; vertical-align: top;">Copy the following folders from your GStreamer installation folder (`C:/gstreamer/1.0/msvc_x86/lib`) to folder `cgi_studio_3psw/lib/GStreamer/Win32/lib`

- glib-2.0
- gstreamer-1.0

Copy the following library files from your GStreamer installation folder (`C:/gstreamer/1.0/msvc_x86/lib`) to folder `cgi_studio_3psw/lib/GStreamer/Win32/lib`

- gio-2.0.lib
- glib-2.0.lib
- gobjext-2.0.lib
- gstreamer-1.0.lib

</td><td style="width: 38.9341%; vertical-align: top;"><div class="image"><div drawio-diagram="2145"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1676970710.png" alt=""/></div>

</div></td></tr><tr><td style="width: 61.0659%; vertical-align: top;">Copy the following file from your GStreamer installation folder (`C:/gstreamer/1.0/msvc_x86/lib/glib-2.0/include/glibconfig.h`) into folder `cgi_studio_3psw/src/GStreamer/Win32/include/glib-2.0`- glibconfig.h

</td><td style="width: 38.9341%; vertical-align: top;"><div class="image"><div drawio-diagram="2146"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1676970743.png" alt=""/></div>

</div></td></tr></tbody></table>

- Open CMake
- Input the location of your source code into the first input field "Where is the source code:" (*&lt;cgi-studio-root&gt;/cmake/Candera/Player*).
- Input the location where to build the binaries to into the input field "Where to build the binaries:"
- To be sure you have a clean build, go to the menu "File - Delete Cache".
- Click the "Configure" button in the middle of the CMake window on the left side.
- A dialog will be opened, choose "Optional platform for generator": Win32
- Wait for CMake to finish configuration.
- In the CMake defines, adjust the following settings: 
    - change COURIER\_PLATFORM to "imx6platform"
    - enable CGIAPP\_SAMPLE\_STREAMING\_ENABLED
    - enable CGIAPP\_SAMPLE\_MIXEDREALITY\_ENABLED
- Click the "Configure" button again.
- Wait for CMake to finish configuration.
- Press the "Generate" button (just right to the "Configure" button).
- Wait for the Microsoft Visual Studio Solution to be generated.
- Navigate to the Microsoft Visual Studio Solution file in the folder "Where to build the binaries".
- Open the Solution file "Player.sln" with your working Microsoft Visual Studio.
- Wait for the project to load.
- In the Microsoft Visual Studio menu press "Build - Build Solution".
- Wait for the solution to be built.

</div></div></div>Finally, you can start the Player application.

<div class="contents" id="bkmrk--7"><div class="contents"><div class="textblock">---

</div></div></div>#### 4. Interfaces

##### 4.1. Events

<div class="contents" id="bkmrk-videostateevent%3A-eve"><div class="contents"><div class="textblock">- **VideoStateEvent:** Event emitted from Video Stream Behaviors to registered behaviors when video state changes. In our sample, the video stream control uses this event to let the PoseTracking behavior know that the video has started and therefore the camera tracking should be started.
- **ArTargetEvent:** Event emitted from target nodes to tracker components to start or stop tracking. In our sample, the PoseTracking Behavior is sending an AddTarget event as message to the CameraTrackerComponent to notify it, that the tracking should start.
- **TrackingEvent:** Event emitted from PoseTracking Behaviors to registered behaviors when the tracking state changes, the position or rotation are updated by the tracker. Possible tracking states are: *Registered, Detected, Tracked,* and *Lost*. In our sample, the PoseTracking Behavior on the node that holds the camera emits this event to the PoiManager Control and the NavigationPath Control, such that they are also informed about the current camera position and rotation, and the current tracking state.
- **PoiUpdateEvent:** Event sent from PoiManager to one of its POIs when a new metadata update arrives. A PoiBehavior will handle the event accordingly. It has a PoiUpdateEventType that states which kind of update this event represents, and a Variant with the value. In our sample, the PoiManager is creating these events based on JSON metadata messages and sending them the respective PoiBehaviors.

</div></div></div>##### 4.2. Messages

<div class="contents" id="bkmrk-artargeteventmsg%3A-us"><div class="contents"><div class="textblock">- **ArTargetEventMsg:** Used to send the ArTargetEvent as message from the view to the model. The only member of the message is the event.
- **PoiReqMsg:** Used by the PoiManager to request a new list of points of interest from the model. Members are the start and end position, which the model uses to build a bounding rectangle. It will then search for POIs that lie within the bounds of this rectangle and put them into the PoiResMsg.
- **PoiResMsg:**Reply to the PoiReqMsg. Holds a vector of PoiData.

---

</div></div></div>#### 5. Known Issues and Limitations

##### 5.1. Streaming

##### 5.1.1 Video Stream

<div class="contents" id="bkmrk-the-property-%22flipve"><div class="contents"><div class="textblock">- The property "FlipVertically” in the VideoStream does only work in 2D VideoStream control. In 3D one has to change the UV texture mapping to flip the image. This is why the "no signal" texture is displayed upside down in the 3D sample scenes.

</div></div></div>##### 5.1.2 GStreamer

<div class="contents" id="bkmrk-gstreamer-only-suppo"><div class="contents"><div class="textblock">- GStreamer only supports Windows and Linux platforms.
- The default GStreamer modules only support the "Baseline" profile of the H.264 codec.

</div></div></div>##### 5.2. Mixed Reality

##### 5.2.1. PoseTracking

<div class="contents" id="bkmrk-camera-position-is-a"><div class="contents"><div class="textblock">- Camera position is a FeatStd::Vector3, which consists of three `FeatStd::Float` values. Therefore, there is a limit on how far the camera can move. Could be an issue.
- Static offsets to position and rotation of the camera that might result from mounting the tracker to the camera must be applied to the camera directly. Offsets cannot be set via data binding so far.

</div></div></div>##### 5.2.2. Points of Interest

<div class="contents" id="bkmrk-position-is-not-part"><div class="contents"><div class="textblock">- Position is not part of metadata message, but independent. It would probably make sense to just move it to metadata and let the respective PoiBehavior position itself in space. The PoiManager does not have to be the one to do it. In fact, the PoiManager already forwards the camera position to the PoiBehavior, but so far, the PoiBehavior only uses it to handle the level of detail fading.
- Alignment is handled by the PoiManger, as in early design, PoiManager was the only one who had access to the camera position. However, this might as well be forwarded to the PoiBehavior as part of the metadata.

---

</div></div></div>

# List Control - Snapping Mechanism

## Snap List Item Extension

The **Snap List Item Extension Behavior** is a Control &gt; Scroll Behavior that allows to configure a snapping mechanism for a List Control. To use this snapping mechanism, drag and drop a Snap List Item Extension behavior onto a **List control** in your Scene Editor or Scene Tree panel.

<div drawio-diagram="5563"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712911220.png" alt=""/></div>

The **Snap List Item Extension** behavior considers the following use cases:

- When a new item is focused, the list snaps to this item at the aligned snapping position of this item with a snapping animation.
- When the list is scrolled by direct touch, scroll of the list or by external scroll via scrollbar, the list will snap to the item with the smallest distance to the aligned snapping position.
- When the list is scrolled by a next/previous page scrollable event the list will snap to the item with the smallest distance for that new page to the aligned snapping position.
- When the list is scrolled by a next/previous item scrollable event, the list will snap to the newly requested item to the aligned snapping position.
- When a list is flicked by a touch gesture, the final target position will be adjusted in a way that the list snaps to the item with the smallest distance at the flick target position that is determined by the flick speed.

This snapping mechanism supports

- static and dynamic lists
- vertical and horizontal lists
- left-to-right and right-to-left direction
- the wraparound feature for static lists
- restoring the last focused index
- disabled items (Note: not supported for dynamic lists)

<p class="callout info">Wraparound is only available for static lists with an accumulated complete item size that is larger than the arrange area of the list.</p>

#### Configuration

The **Snap List Item Extension** behavior can be applied to a list control via drag and drop from the toolbox.

<div drawio-diagram="5564"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712911554.png" alt=""/></div>

In case you are using a custom ListControl, it is recommended to configure the ListBehavior of the ListControl as the ListBehavior of the SnapListItemExtension behavior. Please see <span style="color: rgb(230, 126, 35);">[<span style="color: rgb(230, 126, 35);">Configure ListBehavior in Custom List</span>](#bkmrk-configure-listbehavi) </span>for more information.

The properties *List Alignment* and *Item Alignment* define the snapping position. The snapping position can be refined by the *List* *Alignment Offset* and *Item Alignment Offset* properties. The properties *List Alignment Offset In Percent* and *Item Alignment Offset In Percent* define if the unit of the offset is in *percent* or in *pixel*.

##### List/Item Alignment

 These properties can be set to

- Begin
- Center
- End

The base alignment for item/list is defined as follows:

<div drawio-diagram="5565"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712911702.png" alt=""/></div>

##### List/Item Alignment Offset

The Alignment Offset properties allow to refine the snapping position.

The following rules apply to the alignment offset properties:

- For **begin** and **center** alignment the offset is directed towards the end of the arrange area.
- For **end** alignment the offset is directed toward the begin of the arrange area.
- In case of **percental offset configuration**, the offset value has to be **between 0 and 1** and will be multiplied with the alignment area size to calculate the absolute offset.

<div drawio-diagram="5566"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712911775.png" alt=""/></div>

##### Aligning the List and the Snapped Item  


The configuration in the properties describe an alignment point for the list and an alignment point for the snapped item. The alignment point of the list and the alignment point of the item shall be aligned at the same visual position for a snapped item.

<div drawio-diagram="5567"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712912939.png" alt=""/></div>

For a normal *ListBehavior instance* the item alignment starts with the first item presented on top of the list arrange area and stops with the last item at the bottom list arrange area:

<div drawio-diagram="5568"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712912984.png" alt=""/></div>

So, the accumulated size of all items represents the complete size of the virtual area presented by the list that can be accessed via scrollbar and scrollable events.

Due to the static item snap position the list

has to present additional empty space before the first item as a begin offset and also after the last item as an end offset:

<div drawio-diagram="5569"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712913024.png" alt=""/></div>

So, the normal list without snapping extension presents an undecorated complete size of its items. But the snapping extension has to add the begin and end offset to this undecorated complete size to present the decorated complete size as complete size of the scrollable interface:

<div drawio-diagram="5570"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712913106.png" alt=""/></div>

This begin offset also affects the position of the item. So, the first item is virtually positioned at the virtual position of the begin offset. The final aligned snap position of an item has to reflect the begin offset, the accumulated size of all predecessor items, the item alignment offset and the list alignment offset.

<div drawio-diagram="5571"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712913136.png" alt=""/></div>

##### Find the Matching Snap Item

Whenever the position of the items in the list is changed (e.g. when scrolling or flicking or the like) the snapping extension will determine the item to snap to. The item, whose alignment position has the *least distance* to the list alignment position, will be the matching snap item.

<div drawio-diagram="5573"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712913168.png" alt=""/></div>

##### Configure ListBehavior in Custom List

The *Snap List Item Extension*'s ListBehavior can be configured in the custom List Control.

Open your custom list control with a double click or create your custom list control by dragging the predefined list control from the Toolbox into the Controls folder of your solution in the Solutions Explorer.

<div drawio-diagram="5574"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712915848.png" alt=""/></div>

The CustomList looks like this in the Scene Tree:

<div drawio-diagram="5575"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712915904.png" alt=""/></div>

Drag and drop a Snap List Item Extension behavior to the CustomList:

<div drawio-diagram="5576"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712915980.png" alt=""/></div>

Drag the ListBehavior from the CustomList's Behaviors down to the *SnapListItemBehavior*'s ListBehavior:

<div drawio-diagram="5577"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712916037.png" alt=""/></div>

Now you can see that the ListBehavior property has received a new value:

<div drawio-diagram="5578"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712916135.png" alt=""/></div>

#### Snap List Item Configuration

The alignment position of a list's items is configured in the *Snap List Item Extension* behavior with the following properties:

- ItemAlignment
- ItemAlignmentOffset
- ItemAlignmentOffsetInPercent

In case certain items should be configured with a different alignment position, you can apply a **Snap List Item Configuration** behavior to those items that should be handled differently.

<div drawio-diagram="5581"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712916979.png" alt=""/></div>

Drag and drop this behavior from the Toolbox onto the desired list item to be able to configure a different alignment position for this item.

<div drawio-diagram="5583"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712917289.png" alt=""/></div>

# Breadcrumb - StateMachine Workflow

Breadcrumb is not a standalone control, it does not trigger internally any scene transitions so it should be always connected with external state machine. For that purpose, breadcrumb property *State Machine Node* should be set to a node that contains a *State Machine* behavior.

Data flow for *SetPath*:

<div class="contents" id="bkmrk-scene-element-%28for-e"><div class="contents"><div class="textblock">- Scene element (for example, button).
- State machine has a defined transition that reacts to the click of a button that was defined in the previous point.
- State machine has defined states that contain actions for entry (e.g. request for scene transition, breadcrumb action with 'SetPath' option).
- After click, State machine transitions to defined state which triggers breadcrumb action.
- Breadcrumb control visualizes proper data which received from path.

</div></div></div>Data flow for *BackToPrevious* action:

<div class="contents" id="bkmrk-scene-element-%28for-e-0"><div class="contents"><div class="textblock">- Scene element (for example, button). It cannot be a breadcrumb node as a child.
- User defines how the action will be called e.g. OnClick
- User connects breadcrumb action to action slot.
- After calling this action, breadcrumb sends a new path to state machine node.

</div></div></div>Data flow for *BackToElement* action:

<div class="contents" id="bkmrk-same-as-above-but-th"><div class="contents"><div class="textblock">- Same as above but the state machine should contain the related transitions.

</div></div></div>#### State Machine Example

1\) Create a new state machine in *Solution explorer* tab as explained in the <span style="color: rgb(230, 126, 35);">[State Machine Basic Operation](https://doc316en.candera.eu/books/state-machine/page/basic-operation)</span> documentation.

2\) Open the newly created state machine.

3\) Create an Initial State and a State and connect them, it will be the main state that manages other states.

<div drawio-diagram="5584"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712928418.png" alt=""/></div>

4\) Create the Initial State and a State again but this time inside the MainState.

<div drawio-diagram="5588"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712929060.png" alt=""/></div>

5\) Create several sample scenes. On the *BreadcrumbHub* scene add a Breadcrumb control.

<div drawio-diagram="5587"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712928963.png" alt=""/></div>

6\) In the state machine editor and select the state called "Level0". Set the actions to be called on entry and on exit. At this moment, the path will be set. That scene is first so we only send the name without any separators via Breadcrumb action. Set BreadcrumbNode on BreadcrumbHub scene. Set active / deactivate transition request for selected scene.

<div drawio-diagram="5590"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712929711.png" alt=""/></div>

7\) Create the next states similarly.

<div drawio-diagram="5591"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712929899.png" alt=""/></div>

8\) Fill each state with actions that are to be called. Below is an example of how to pass nested path with several levels.

<div drawio-diagram="5593"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712930219.png" alt=""/></div>

9\) After completing all actions for entry and exit in states, we can create transitions when the user clicks on the breadcrumb element. It is a dragging line from the main state to the state we want go back. It should be remembered that we will never go to the final states so Level 1.1 and Level 2.1 will be omitted. On every transition we create a condition. Behavior sends the path from the root to the selected element using ValueChangedEvent.

<div drawio-diagram="5594"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712930489.png" alt=""/></div>

Create similar transition for Level1 and Level2. Don't forget to set the Condition Value to *Level1* and respectively *Level2*.

10\) **\[optional\]** After all transitions with the paths from breadcrumb are defined, you can create transitions that can be used to change the active scene to the next scene by clicking the button on the active scene.

<div drawio-diagram="5596"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712930871.png" alt=""/></div>

11\) The state machine is on the BreadcrumbHub scene so if we want to receive click events in our state machine, we had to add event bridge to other scenes and set target node property to node with state machine.

<div drawio-diagram="5601"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712931393.png" alt=""/></div>

#### Sample Solution

<div drawio-diagram="5599"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712931338.png" alt=""/></div>

# Predefined Controls

This chapter is about how to use the predefined Controls that come with CGI Studio.   
The controls available in SceneComposer can be seen in the SceneComposer Toolbox View:

# Touchable

### ControlDevelopment

#### KeyboardKey

Keyboard key is building block of Keyboard Control.

<div drawio-diagram="5463"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1710497341.png" alt=""/></div>

**Properties**

This Control does not have any configurable properties.

---

#### Scrollbar

The Scrollbar is used internally in List and ScrollView and shows up when the layout-size of those controls is smaller than its actual content. It can be used by custom scrollable controls.

**Properties**

<table border="1" class="align-center" id="bkmrk-property-name-type-d" style="border-collapse: collapse; width: 90%; height: 260.8px; border-width: 1px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody style="padding-left: 40px;"><tr style="height: 29.4667px; padding-left: 40px;"><td class="align-left" style="height: 29.4667px; border-width: 1px;">**Property Name**  
</td><td class="align-left" style="height: 29.4667px; border-width: 1px;">**Type**  
</td><td class="align-left" style="height: 29.4667px; border-width: 1px;">**Description**  
</td></tr><tr style="height: 29.4667px; padding-left: 40px;"><td class="align-left" style="height: 29.4667px; border-width: 1px;">Scroll Direction  
</td><td class="align-left" style="height: 29.4667px; border-width: 1px;">Enum (Vertical, Horizontal)</td><td class="align-left" style="height: 29.4667px; border-width: 1px;">The direction in which the Scrollbar scrolls.</td></tr><tr style="height: 46.2667px; padding-left: 40px;"><td class="align-left" style="height: 46.2667px; border-width: 1px;">Handle Minimum Size  
</td><td class="align-left" style="height: 46.2667px; border-width: 1px;">Integer  
</td><td class="align-left" style="height: 46.2667px; border-width: 1px;">The minimum height (for vertical scrollbar) or minimum width (for horizontal scrollbar) of the handle in pixels.</td></tr><tr style="height: 63.0667px; padding-left: 40px;"><td class="align-left" style="height: 63.0667px; border-width: 1px;">Scrollbar Visibility  
</td><td class="align-left" style="height: 63.0667px; border-width: 1px;">Enum (Automatic, Collapsed, Visible)</td><td class="align-left" style="height: 63.0667px; border-width: 1px;">Configure the visibility of the scrollbar. By default it is set to Automatic which will determine the visibility based on the actual content.</td></tr><tr style="height: 46.2667px; padding-left: 40px;"><td class="align-left" style="height: 46.2667px; border-width: 1px;">Min Movement To Scrolling  
</td><td class="align-left" style="height: 46.2667px; border-width: 1px;">Integer  
</td><td class="align-left" style="height: 46.2667px; border-width: 1px;">Minimum distance a touch gesture needs to move to start scrolling.</td></tr><tr style="height: 46.2667px; padding-left: 40px;"><td class="align-left" style="height: 46.2667px; border-width: 1px;">Blend Type  
</td><td class="align-left" style="height: 46.2667px; border-width: 1px;">BlendType::Enum  
</td><td class="align-left" style="height: 46.2667px; border-width: 1px;">Sets the blend option.</td></tr></tbody></table>

**Functionality**

The Scrollbar emits a ScrollableEvent which can be forwarded to a Behavior (f.e. List Behavior, Scroll View Behavior) via the Event Bridge Behavior.

<div drawio-diagram="5464"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1710497443.png" alt=""/></div>

<table border="1" class="align-center" id="bkmrk-behavior-name-type-p" style="border-collapse: collapse; width: 90%; height: 117.867px; border-width: 1px;"><colgroup><col style="width: 15.1977%;"></col><col style="width: 21.0049%;"></col><col style="width: 26.3281%;"></col><col style="width: 37.3045%;"></col></colgroup><tbody style="padding-left: 40px;"><tr style="height: 29.4667px; padding-left: 40px;"><td class="align-left" style="height: 29.4667px; border-width: 1px;">**Behavior Name**  
</td><td class="align-left" style="height: 29.4667px; border-width: 1px;">**Type**  
</td><td class="align-left" style="height: 29.4667px; border-width: 1px;">**predefined/userdefined**  
</td><td class="align-left" style="height: 29.4667px; border-width: 1px;">**Description**  
</td></tr><tr style="height: 29.4667px; padding-left: 40px;"><td class="align-left" style="height: 29.4667px; border-width: 1px;">Event Bridge  
</td><td class="align-left" style="height: 29.4667px; border-width: 1px;">Control Behavior  
</td><td class="align-left" style="height: 29.4667px; border-width: 1px;">predefined in List and ScrollView Control  
</td><td class="align-left" style="height: 29.4667px; border-width: 1px;">Forwards the ScrollableEvent from the Scrollbar to a Behavior</td></tr><tr style="height: 29.4667px; padding-left: 40px;"><td class="align-left" style="height: 29.4667px; border-width: 1px;">List  
</td><td class="align-left" style="height: 29.4667px; border-width: 1px;">Control ConstructionKit Behavior  
</td><td class="align-left" style="height: 29.4667px; border-width: 1px;">predefined in List Control  
</td><td class="align-left" style="height: 29.4667px; border-width: 1px;">Internally receives the ScrollableEvent from the Scrollbar.</td></tr><tr style="height: 29.4667px; padding-left: 40px;"><td class="align-left" style="height: 29.4667px; border-width: 1px;">Scroll View  
</td><td class="align-left" style="height: 29.4667px; border-width: 1px;">Control ConstructionKit Behavior</td><td class="align-left" style="height: 29.4667px; border-width: 1px;">predefined in ScrollView Control  
</td><td class="align-left" style="height: 29.4667px; border-width: 1px;">Internally receives the ScrollableEvent from the Scrollbar.</td></tr></tbody></table>

---

#### PageIndicatorElement

A PageIndicatorElement is a Control that is part of the Page Indicator Control. The Page Indicator Control indicates the currently displayed page. PageIndicatorElement is intended to be used as component of Page Indicator and therefore is not focusable as individual element.

The Control offers the possibility to customize it’s appearance through 9 patch image and color properties.

<div drawio-diagram="5465"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1710497487.png" alt=""/></div>

**Properties**

<table border="1" class="align-center" id="bkmrk-property-name-type-d-1" style="border-collapse: collapse; width: 90%; height: 176.8px; border-width: 1px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody style="padding-left: 40px;"><tr style="height: 29.4667px; padding-left: 40px;"><td class="align-left" style="height: 29.4667px; border-width: 1px;">**Property Name**  
</td><td class="align-left" style="height: 29.4667px; border-width: 1px;">**Type**  
</td><td class="align-left" style="height: 29.4667px; border-width: 1px;">**Description**  
</td></tr><tr style="height: 29.4667px; padding-left: 40px;"><td class="align-left" style="width: 27.9357%; border-width: 1px;">Selected Indicator Image</td><td class="align-left" style="width: 16.1893%; border-width: 1px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td class="align-left" style="width: 55.875%; border-width: 1px;">Image displayed when the control is in selected state.</td></tr><tr style="height: 29.4667px; padding-left: 40px;"><td class="align-left" style="width: 27.9357%; border-width: 1px;">Indicator Image</td><td class="align-left" style="width: 16.1893%; border-width: 1px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td class="align-left" style="width: 55.875%; border-width: 1px;">Image displayed when the control is in base deselected state.</td></tr><tr style="height: 29.4667px; padding-left: 40px;"><td class="align-left" style="width: 27.9357%; border-width: 1px;">Selected Indicator Pressed Image</td><td class="align-left" style="width: 16.1893%; border-width: 1px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td class="align-left" style="width: 55.875%; border-width: 1px;">Image displayed when the control is in selected state and pressed.</td></tr><tr style="height: 29.4667px; padding-left: 40px;"><td class="align-left" style="width: 27.9357%; border-width: 1px;">Indicator Pressed Image</td><td class="align-left" style="width: 16.1893%; border-width: 1px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td class="align-left" style="width: 55.875%; border-width: 1px;">Image displayed when the control is in deselected state and pressed.</td></tr><tr style="height: 29.4667px; padding-left: 40px;"><td class="align-left" style="width: 27.9357%; border-width: 1px;">Hovered Color</td><td class="align-left" style="width: 16.1893%; border-width: 1px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td class="align-left" style="width: 55.875%; border-width: 1px;">The color to blend with the current control image when the control is hovered.</td></tr><tr style="padding-left: 40px;"><td class="align-left" style="width: 27.9357%; border-width: 1px;">Disabled Color</td><td class="align-left" style="width: 16.1893%; border-width: 1px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td class="align-left" style="width: 55.875%; border-width: 1px;">The color to blend with the current control image when the control is disabled.</td></tr></tbody></table>

---

### Button

The Button Control offers an easy way to define all different states of a button and an action that is performed when clicking it.

The visual appearance can be configured with three images depending on the button's state and a hovered color that can be defined including an alpha value.

Additionally the Button offers an Anchor to attach content. Therefore you can also set the padding of the Button and its content.

<div drawio-diagram="5460"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1710494445.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-2" style="border-collapse: collapse; width: 100%; height: 176.8px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr><td style="width: 13.7206%;">Enabled  
</td><td style="width: 29.9116%;">bool  
</td><td style="width: 56.3677%;">If true, the control is enabled. Otherwise the visual representation of the control will be changed to the disabled colors. Also disable the focus to avoid receiving input.</td></tr><tr><td style="width: 13.7206%;">Focusable</td><td style="width: 29.9116%;">bool</td><td style="width: 56.3677%;">If true, the control is focusable. Otherwise the control can not be focused.</td></tr><tr style="height: 29.4667px;"><td style="width: 13.7206%;">Normal Image</td><td style="width: 29.9116%;">9 Patch Image</td><td style="width: 56.3677%;">The image which is used as Button Image for the color multiplication of other states like Hovered.</td></tr><tr style="height: 29.4667px;"><td style="width: 13.7206%;">Pressed Image</td><td style="width: 29.9116%;">9 Patch Image</td><td style="width: 56.3677%;">The image which is used as Button Image if the pressed state applies.</td></tr><tr style="height: 29.4667px;"><td style="width: 13.7206%;">Focused Image</td><td style="width: 29.9116%;">9 Patch Image</td><td style="width: 56.3677%;">Transparent image contained in the center (border) of the control which is activated if the control has the current focus. The control must be set as focusable. Note that the focused image will always be contained in the top layer of the control.</td></tr><tr style="height: 29.4667px;"><td style="width: 13.7206%;">Hovered Color Property Reference</td><td style="width: 29.9116%;">Enum (Self, Other)</td><td style="width: 56.3677%;">Choose how the property gets set. Via own property or from another Behavior.</td></tr><tr><td style="width: 13.7206%;">Hovered Color</td><td style="width: 29.9116%;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td style="width: 56.3677%;">The color which is used as hovered color for blending with the Button Image.

This property is only available if Hovered Color Property Reference is configured for "Self".

</td></tr><tr><td style="width: 13.7206%;">Hovered Color Property Provider  
</td><td style="width: 29.9116%;">[Candera::Behavior](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_behavior.html "Behaviors are small re-usable functional blocks that communicate via events. Behaviors are based on W...")</td><td style="width: 56.3677%;">Property Behavior which contains the color which has to be set on the effect.

This property is only available if Hovered Color Property Reference is configured for "Other".

</td></tr><tr><td style="width: 13.7206%;">Disabled Color Property Reference  
</td><td style="width: 29.9116%;">Enum (Self, Other)</td><td style="width: 56.3677%;">Choose how the property gets set.Via own property or from another Behavior.  
</td></tr><tr><td style="width: 13.7206%;">Disabled Color</td><td style="width: 29.9116%;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td style="width: 56.3677%;">The color to set on the disabled Button.

This property is only available if Disabled Color Property Reference is configured for "Self".

</td></tr><tr style="height: 29.4667px;"><td style="width: 13.7206%;">Disabled Color Property Provider  
</td><td style="width: 29.9116%;">[Candera::Behavior](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_behavior.html "Behaviors are small re-usable functional blocks that communicate via events. Behaviors are based on W...")</td><td style="width: 56.3677%;">Property Behavior which contains the color which has to be set on the effect.

This property is only available if Disabled Color Property Reference is configured for "Other".

</td></tr><tr><td style="width: 13.7206%;">Padding</td><td style="width: 29.9116%;">[Candera::Margin](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_margin.html "A non-zero margin applies space outside the element layout's width and height. The values can be set ...")</td><td style="width: 56.3677%;">Padding of the Button. Used when a content is attached.</td></tr><tr><td style="width: 13.7206%;">Blend Type</td><td style="width: 29.9116%;">BlendType::Enum</td><td style="width: 56.3677%;">Sets the blend option.</td></tr></tbody></table>

**Functionality**

The functionality of the button can be edited in the Behaviors panel or in the EventHandler Tab (see chapter <span style="color: rgb(230, 126, 35);">[EventHandler Tab](https://doc316en.candera.eu/link/569#bkmrk-page-title)</span>). An EventHandler that checks for Clicks will perform the user defined action.

<div drawio-diagram="5466"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1710499021.png" alt=""/></div>

<table border="1" id="bkmrk-behavior-name-type-p-1" style="border-collapse: collapse; width: 100%; height: 153.067px;"><colgroup><col style="width: 16.0626%;"></col><col style="width: 21.6227%;"></col><col style="width: 21.3745%;"></col><col style="width: 40.899%;"></col></colgroup><tbody><tr style="height: 14.2667px;"><td style="height: 14.2667px;">**Behavior Name**  
</td><td style="height: 14.2667px;">**Type**  
</td><td style="height: 14.2667px;">**predefined/userdefined**  
</td><td style="height: 14.2667px;">**Description**  
</td></tr><tr style="height: 63.0667px;"><td style="width: 12.7318%; height: 63.0667px;">EventHandler</td><td style="width: 21.2605%; height: 63.0667px;">Control Behavior</td><td style="width: 12.4849%; height: 63.0667px;">predefined</td><td style="width: 53.5229%; height: 63.0667px;">Checks a defined condition and invokes a defined action behavior if that condition is true.

</td></tr><tr style="height: 29.4667px;"><td style="width: 12.7318%; height: 29.4667px;">CheckClick</td><td style="width: 21.2605%; height: 29.4667px;">Input Condition Behavior</td><td style="width: 12.4849%; height: 29.4667px;">predefined</td><td style="width: 53.5229%; height: 29.4667px;">Condition checks if the button has been clicked</td></tr><tr style="height: 46.2667px;"><td style="width: 12.7318%; height: 46.2667px;">Action</td><td style="width: 21.2605%; height: 46.2667px;">Action Behavior</td><td style="width: 12.4849%; height: 46.2667px;">userdefined</td><td style="width: 53.5229%; height: 46.2667px;">Userdefined action that will be performed when the button is clicked.</td></tr></tbody></table>

---

#### CoverFlow

A CoverFlow is a proof-of-concept control that allows for horizontal swiping of child items. The items are scaled according to their location.

Child items are placed in provided anchor. It is possible to add padding by placing blank items at the beginning and at the end of the anchor content.

By default, the CoverFlow works horizontally.

<div drawio-diagram="5467"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1710501427.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-3" style="border-collapse: collapse; width: 100%; height: 176.8px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr><td>Value</td><td>Float/Variant</td><td>Current value (position) of the CoverFlow.</td></tr><tr><td>Minimum</td><td>Float/Variant</td><td>The minimum value of CoverFlow.</td></tr><tr style="height: 29.4667px;"><td>Maximum</td><td>Float/Variant</td><td>The maximum value of CoverFlow.</td></tr><tr><td>Zoom Minimum  
</td><td>Float/Variant  
</td><td>Zoom effect minimum value.  
</td></tr><tr><td>Zoom Maximum  
</td><td>Float/Variant</td><td>Zoom effect maximum value.  
</td></tr><tr><td>Zoom By Layout</td><td>bool</td><td>Wethere zoom accomplished by layout size.</td></tr><tr><td>Increase Swipe Direction  
</td><td>Enum (Left, Right, Up, Down)  
</td><td>The direction of the swipe to increase value  
</td></tr><tr><td>Decrease Swipe Direction  
</td><td>Enum (Left, Right, Up, Down)  
</td><td>The direction of the swipe to decrease value  
</td></tr><tr><td>Orientation</td><td>StackLayouter::Arrangement</td><td>Selects arrangement for cover flow. See <span style="color: rgb(230, 126, 35);">[Set Layout](https://doc316en.candera.eu/link/598#bkmrk-set-layout)</span> for more information.</td></tr><tr style="height: 29.4667px;"><td>Blend Type</td><td style="width: 29.9116%;">BlendType::Enum</td><td style="width: 56.3677%;">Sets the blend option.</td></tr></tbody></table>

---

#### Dial

A dial is used to set a value within a specified range or to select between different options which are represented by the value of the dial. The control knob changes the value when the user touches and turns it. The degree of rotation corresponds to the desired value change. The dial snaps into its predefined positions defined by its step size.

The below figure shows an example using a 3-step rotation, with a Minimum Rotation of -45 degrees, Maximum Rotation of +45 degrees, and Step Size of 45 degrees. In this example, BackgroundImages 0 is displayed corresponding to Current Value = 0. Similarly, Current Value = 1 displays BackgroundImages 1 and Current Value = 2 displays BackgroundImages 2.

For a 5-step rotation with a Minimum Rotation of -90 degrees, Maximum Rotation of +90 degrees, and Step Size of 45 degrees, you will need to set 5 BackgroundImages.

The rotary knob supports events. If it receives an event of value change (ValueChangeEvent), the knob will be set accordingly. When the control is focused it is possible to control it using the keyboard (up/down arrow).

<div drawio-diagram="5468"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1710503300.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-4" style="border-collapse: collapse; width: 100%; height: 176.8px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr><td>Enabled</td><td>bool</td><td>If set to false it will not react on focus events and does not have to support different visualizations for the different states.</td></tr><tr><td>Focusable</td><td>bool</td><td>If true, the control is focusable. Otherwise the control can not be focused.</td></tr><tr><td>Current Value  
</td><td>FeatStd::Int32</td><td>Current value for the dial.  
</td></tr><tr><td>Step Size  
</td><td>FeatStd::Float</td><td>Step size in degrees.  
</td></tr><tr><td>Minimum Rotation  
</td><td>FeatStd::Float</td><td>Minimum rotation of the dial.  
</td></tr><tr><td>Maximum Rotation  
</td><td>FeatStd::Float</td><td>Maximum rotation of the dial.  
</td></tr><tr><td>Knob Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image to set on the effect.  
</td></tr><tr><td>BackgroundImages  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>A list of images which should be available for selection.</td></tr><tr><td>Focus Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image to set on the effect.  
</td></tr><tr><td>Disabled Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td>The color which can be used from other Behaviors.  
</td></tr><tr><td>Hovered Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td>The color which can be used from other Behaviors.  
</td></tr><tr><td>Increment Key Code  
</td><td>Candera::KeyboardKeyCode::Enum</td><td>Check the KeyCode of the pressed key (can also be modifier).  
</td></tr><tr><td>Decrement Key Code  
</td><td>Candera::KeyboardKeyCode::Enum</td><td>Check the KeyCode of the pressed key (can also be modifier).  
</td></tr><tr><td>Blend Type  
</td><td style="width: 29.9116%;">BlendType::Enum</td><td style="width: 56.3677%;">The blend type that will be set on the affected node.  
</td></tr></tbody></table>

---

#### Drawer

The Drawer Control provides a retractable area controlled via events. It offers an Anchor, where any kind of nodes can be attached to.

If the Drawer receives a Drawer Event, the Control will open or close itself. The "Change Drawer State" action allows to send these events and also provide the functionality to toggle the state of the Drawer Control.

When the "Drag Enabled" Property is set to true, then the Drawer can also be opened/closed by dragging the Knob.

All nodes that are attached to the Anchor will be displayed in the same way as they would be displayed when attached to an Overlay Layouter.

The image below shows a Drawer Control with "Appear Direction" left in initial state and in closed state. When the drawer gets closed, it slides to the left and gets hidden like closing a desk drawer.

<div drawio-diagram="5472"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1710506222.png" alt=""/></div>

<p class="callout info">Nine-Patch-Images are not supported by Drawer Image properties (Knob Pressed Image, Knob Normal Image).</p>

Properties

<table border="1" id="bkmrk-property-name-type-d-5" style="border-collapse: collapse; width: 100%; height: 273.467px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr style="height: 46.2667px;"><td style="width: 18.665%; height: 46.2667px;">Open</td><td style="width: 29.2907%; height: 46.2667px;">bool</td><td style="width: 52.0443%; height: 46.2667px;">If true, the control is shown in it's opened state. Otherwise the visual representation of the control will be it's closed state.</td></tr><tr style="height: 29.4667px;"><td style="width: 18.665%; height: 29.4667px;">Appear Direction</td><td style="width: 29.2907%; height: 29.4667px;">Enum (Left, Right, Top, Bottom)  
</td><td style="width: 52.0443%; height: 29.4667px;">Specifies the direction from which the content will appear.</td></tr><tr style="height: 46.2667px;"><td style="width: 18.665%; height: 46.2667px;">Knob Pressed Image</td><td style="width: 29.2907%; height: 46.2667px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="width: 52.0443%; height: 46.2667px;">Specifies the look of the dragable Knob when it is pressed. Note: Should have the same or a bigger size than the Normal Image.</td></tr><tr style="height: 63.0667px;"><td style="width: 18.665%; height: 63.0667px;">Knob Normal Image</td><td style="width: 29.2907%; height: 63.0667px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="width: 52.0443%; height: 63.0667px;">Specifies the look of the dragable Knob when it is not pressed. Note: Should have the same or a smaller size than the Pressed Image.</td></tr><tr style="height: 29.4667px;"><td style="width: 18.665%; height: 29.4667px;">Drag Enabled</td><td style="width: 29.2907%; height: 29.4667px;">bool</td><td style="width: 52.0443%; height: 29.4667px;">If true, then the dragable Knob is active and visible.</td></tr><tr style="height: 29.4667px;"><td style="width: 18.665%; height: 29.4667px;">Blend Type</td><td style="width: 29.2907%; height: 29.4667px;">BlendType::Enum</td><td style="width: 52.0443%; height: 29.4667px;">Sets the blend option.</td></tr></tbody></table>

---

#### IconButton

IconButton has similar functionality as the standard button, but in addition an icon (image) (defined via multiple properties per control state) is placed on top of the button.

<div drawio-diagram="5473"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1710511942.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-6" style="border-collapse: collapse; width: 100%; height: 681.601px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr style="height: 29.4667px;"><td style="width: 21.3844%; height: 29.4667px;">Identifier  
</td><td style="width: 30.2854%; height: 29.4667px;">String  
</td><td style="width: 48.3302%; height: 29.4667px;">Identifier which is used when emitting an Event (e.g. Click Event).  
</td></tr><tr style="height: 29.4667px;"><td style="width: 21.3844%; height: 29.4667px;">Enabled  
</td><td style="width: 30.2854%; height: 29.4667px;">bool  
</td><td style="width: 48.3302%; height: 29.4667px;">If set to false, it will not react on focus events and does not have to support different visualizations for the different states.  
</td></tr><tr style="height: 29.4667px;"><td style="width: 21.3844%; height: 29.4667px;">Focusable  
</td><td style="width: 30.2854%; height: 29.4667px;">bool  
</td><td style="width: 48.3302%; height: 29.4667px;">If true, the control is focusable. Otherwise the control can not be focused.  
</td></tr><tr style="height: 29.4667px;"><td style="width: 21.3844%; height: 29.4667px;">Normal Image</td><td style="width: 30.2854%; height: 29.4667px;">9 patch image</td><td style="width: 48.3302%; height: 29.4667px;">The Image which is used if the normal state applies.</td></tr><tr style="height: 29.4667px;"><td style="width: 21.3844%; height: 29.4667px;">Pressed Image</td><td style="width: 30.2854%; height: 29.4667px;">9 patch image</td><td style="width: 48.3302%; height: 29.4667px;">The Image which is used if the pressed state applies.</td></tr><tr style="height: 63.0667px;"><td style="width: 21.3844%; height: 63.0667px;">Focused Image</td><td style="width: 30.2854%; height: 63.0667px;">9 patch image</td><td style="width: 48.3302%; height: 63.0667px;">Image which is transparent in the center (border). It gets activated if the control has the current focus. Therefore be sure that the Button is focusable.  
</td></tr><tr style="height: 46.2667px;"><td style="width: 21.3844%; height: 46.2667px;">Hovered Color</td><td style="width: 30.2854%; height: 46.2667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td style="width: 48.3302%; height: 46.2667px;">The color which is used as hovered color for blending with the Button Image.  
</td></tr><tr style="height: 46.2667px;"><td style="width: 21.3844%; height: 46.2667px;">Disabled Color</td><td style="width: 30.2854%; height: 46.2667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td style="width: 48.3302%; height: 46.2667px;">The color which is used for blending with the disabled Button Image.  
</td></tr><tr style="height: 29.4667px;"><td style="width: 21.3844%; height: 29.4667px;">Padding  
</td><td style="width: 30.2854%; height: 29.4667px;">[Candera::Margin](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_margin.html "A non-zero margin applies space outside the element layout's width and height. The values can be set ...")</td><td style="width: 48.3302%; height: 29.4667px;">Padding of the button. Used when a content is attached.  
</td></tr><tr style="height: 29.4667px;"><td style="width: 21.3844%; height: 29.4667px;">Icon Horizontal Alignment</td><td style="width: 30.2854%; height: 29.4667px;">Enum (Left, Center, Right)</td><td style="width: 48.3302%; height: 29.4667px;">The horizontal alignment of the icon.</td></tr><tr style="height: 29.4667px;"><td style="width: 21.3844%; height: 29.4667px;">Icon Vertical Alignment</td><td style="width: 30.2854%; height: 29.4667px;">Enum (Top, Center, Bottom)</td><td style="width: 48.3302%; height: 29.4667px;">The vertical alignment of the icon.</td></tr><tr style="height: 46.2667px;"><td style="width: 21.3844%; height: 46.2667px;">Icon Normal Image</td><td style="width: 30.2854%; height: 46.2667px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="width: 48.3302%; height: 46.2667px;">The image which is used as Icon on the button if not pressed or hovered.</td></tr><tr style="height: 46.2667px;"><td style="width: 21.3844%; height: 46.2667px;">Icon Pressed Image</td><td style="width: 30.2854%; height: 46.2667px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="width: 48.3302%; height: 46.2667px;">The image which is used as Icon on the button if the pressed state applies.</td></tr><tr style="height: 29.4667px;"><td style="width: 21.3844%; height: 29.4667px;">Icon Focused Image  
</td><td style="width: 30.2854%; height: 29.4667px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="width: 48.3302%; height: 29.4667px;">The image to set on the effect.  
</td></tr><tr style="height: 46.2667px;"><td style="width: 21.3844%; height: 46.2667px;">Icon Hovered Color  
</td><td style="width: 30.2854%; height: 46.2667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td style="width: 48.3302%; height: 46.2667px;">The color which is used as hovered color for blending with the button Icon image.  
</td></tr><tr style="height: 46.2667px;"><td style="width: 21.3844%; height: 46.2667px;">Icon Disabled Color  
</td><td style="width: 30.2854%; height: 46.2667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td style="width: 48.3302%; height: 46.2667px;">The color which is used for blending with the disabled button Icon Image.  
</td></tr><tr style="height: 46.2667px;"><td style="width: 21.3844%; height: 46.2667px;">Blend Type</td><td style="width: 30.2854%; height: 46.2667px;">BlendType::Enum</td><td style="width: 48.3302%; height: 46.2667px;">Sets the blend option.</td></tr></tbody></table>

---

#### InputField

The InputField contains an editable text. If the Control has the keyboard focus it can be modified by receiving “Key Events”. This events can e.g. be sent from a “Virtual Key Behavior”. Additionally the InputField contains a caret which can be shifted by “Key Events” (KeyCode: Key\_LeftArrow or Key\_RightArrow). Furthermore the InputField sends “Enter Exit" Events in case of losing the focus. This events can be checked by an Event Handler with the “Check Enter Or Exit Behavior” e.g. to activate a virtual keyboard. As other Controls it contains a value (string) which can be forwarded. Therefore just use the “Forward Value” Behavior and set another Control as Target Node.

<p class="callout info">The default text and the placeholder text have got additional properties for customizing them visually.</p>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-7" style="border-collapse: collapse; width: 100%; height: 791.201px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr style="height: 63.0667px;"><td style="width: 21.2608%; height: 63.0667px;">Enabled</td><td style="width: 29.4201%; height: 63.0667px;">bool</td><td style="width: 49.3191%; height: 63.0667px;">If true, the control is enabled. Otherwise the visual representation of the control will be changed to the disabled colors. Also disable the focus to avoid receiving input.</td></tr><tr style="height: 46.2667px;"><td style="width: 21.2608%; height: 46.2667px;">Focusable</td><td style="width: 29.4201%; height: 46.2667px;">bool</td><td style="width: 49.3191%; height: 46.2667px;">If true, the control is focusable. Otherwise the control can not be focused and will not receive any inputs.</td></tr><tr style="height: 29.4667px;"><td style="width: 21.2608%; height: 29.4667px;">DefaultText</td><td style="width: 29.4201%; height: 29.4667px;">String</td><td style="width: 49.3191%; height: 29.4667px;">Text which will be set as default text.</td></tr><tr style="height: 29.4667px;"><td style="width: 21.2608%; height: 29.4667px;">Text Color  
</td><td style="width: 29.4201%; height: 29.4667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td style="width: 49.3191%; height: 29.4667px;">The color set on the text.  
</td></tr><tr style="height: 29.4667px;"><td style="width: 21.2608%; height: 29.4667px;">Text Style  
</td><td style="width: 29.4201%; height: 29.4667px;">Text Style  
</td><td style="width: 49.3191%; height: 29.4667px;">The Style that will be set to the Text Node.  
</td></tr><tr style="height: 29.4667px;"><td style="width: 21.2608%; height: 29.4667px;">Text Disabled Color  
</td><td style="width: 29.4201%; height: 29.4667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)  
</td><td style="width: 49.3191%; height: 29.4667px;">The color to set on the text if the control is disabled.  
</td></tr><tr style="height: 29.4667px;"><td style="width: 21.2608%; height: 29.4667px;">Placeholder Text</td><td style="width: 29.4201%; height: 29.4667px;">String</td><td style="width: 49.3191%; height: 29.4667px;">The Text that will be set to the Text Node.</td></tr><tr style="height: 29.4667px;"><td style="width: 21.2608%; height: 29.4667px;">Placeholder Text Color  
</td><td style="width: 29.4201%; height: 29.4667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td style="width: 49.3191%; height: 29.4667px;">The color of the placeholder text.  
</td></tr><tr style="height: 29.4667px;"><td style="width: 21.2608%; height: 29.4667px;">Placeholder Text Style  
</td><td style="width: 29.4201%; height: 29.4667px;">Text Style  
</td><td style="width: 49.3191%; height: 29.4667px;">The Style that will be used.  
</td></tr><tr style="height: 29.4667px;"><td style="width: 21.2608%; height: 29.4667px;">Placeholder Disabled Color  
</td><td style="width: 29.4201%; height: 29.4667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)  
</td><td style="width: 49.3191%; height: 29.4667px;">The color to set on the effect of the Text.  
</td></tr><tr style="height: 35.0667px;"><td style="width: 21.2608%; height: 35.0667px;">Caret Image</td><td style="width: 29.4201%; height: 35.0667px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="width: 49.3191%; height: 35.0667px;">The image to set as caret.</td></tr><tr style="height: 29.4667px;"><td style="width: 21.2608%; height: 29.4667px;">Off Time Ms</td><td style="width: 29.4201%; height: 29.4667px;">Integer</td><td style="width: 49.3191%; height: 29.4667px;">Milliseconds before switching the blinking caret to On state.</td></tr><tr style="height: 29.4667px;"><td style="width: 21.2608%; height: 29.4667px;">On Time Ms</td><td style="width: 29.4201%; height: 29.4667px;">Integer</td><td style="width: 49.3191%; height: 29.4667px;">Milliseconds before switching the blinking caret to Off state.</td></tr><tr style="height: 35.0667px;"><td style="width: 21.2608%; height: 35.0667px;">Background Image</td><td style="width: 29.4201%; height: 35.0667px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="width: 49.3191%; height: 35.0667px;">The image to set as Background.</td></tr><tr style="height: 29.4667px;"><td style="width: 21.2608%; height: 29.4667px;">BG Disabled Color</td><td style="width: 29.4201%; height: 29.4667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td style="width: 49.3191%; height: 29.4667px;">The color to set on the BG if the control is disabled.</td></tr><tr style="height: 35.0667px;"><td style="width: 21.2608%; height: 35.0667px;">Focused Image</td><td style="width: 29.4201%; height: 35.0667px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="width: 49.3191%; height: 35.0667px;">The image to set as FocusBorder.</td></tr><tr style="height: 29.4667px;"><td style="width: 21.2608%; height: 29.4667px;">Set Value On Enter  
</td><td style="width: 29.4201%; height: 29.4667px;">bool  
</td><td style="width: 49.3191%; height: 29.4667px;">If true, the value will be set when the Enter key is pressed.  
</td></tr><tr style="height: 29.4667px;"><td style="width: 21.2608%; height: 29.4667px;">Set Value On Each Change</td><td style="width: 29.4201%; height: 29.4667px;">bool</td><td style="width: 49.3191%; height: 29.4667px;">If true, the value will be set on each input.</td></tr><tr style="height: 29.4667px;"><td style="width: 21.2608%; height: 29.4667px;">Max Text Length</td><td style="width: 29.4201%; height: 29.4667px;">Integer</td><td style="width: 49.3191%; height: 29.4667px;">Maximum count of characters.</td></tr><tr style="height: 29.4667px;"><td style="width: 21.2608%; height: 29.4667px;">Just Digits</td><td style="width: 29.4201%; height: 29.4667px;">bool</td><td style="width: 49.3191%; height: 29.4667px;">If true, the InputField will receive just digits.</td></tr><tr style="height: 46.2667px;"><td style="width: 21.2608%; height: 46.2667px;">Blend Type</td><td style="width: 29.4201%; height: 46.2667px;">BlendType::Enum</td><td style="width: 49.3191%; height: 46.2667px;">The blend type that will be set on the affected nodes.  
</td></tr><tr style="height: 29.4667px;"><td style="width: 21.2608%; height: 29.4667px;">Keyboard Node  
</td><td style="width: 29.4201%; height: 29.4667px;">Node  
</td><td style="width: 49.3191%; height: 29.4667px;">Keyboard node.  
</td></tr><tr style="height: 29.4667px;"><td style="width: 21.2608%; height: 29.4667px;">Keyboard Layout Name  
</td><td style="width: 29.4201%; height: 29.4667px;">String  
</td><td style="width: 49.3191%; height: 29.4667px;">Layout name.  
</td></tr></tbody></table>

---

#### Keyboard

The Keyboard Control emulates physical computer keyboard that enables a user to enter characters into an InputField Control. The Keyboard Control is highly customizable via Configuration Script described below.

To use the Control one needs to connect an InputField with a keyboard via KeyboardAction with Action Open. When the InputField send the event, the Keyboard appears and sends pressed characters to the InputField that activates it.

<div drawio-diagram="5474"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1710515183.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-8" style="border-collapse: collapse; width: 100%; height: 715.068px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 28.2935%;"></col><col style="width: 46.7065%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr style="height: 166.667px;"><td style="width: 21.2608%; height: 166.667px;">Configuration Script</td><td style="width: 29.4201%; height: 166.667px;">String</td><td style="width: 49.3191%; height: 166.667px;">Keyboard layout configuration script - key definitions (strings, KeyboardCodes or KeyboardActions) separated by spaces and newlines; may have parameters in parentheses and width specifiers in square brackets. See documentation and examples for reference.

See <span style="color: rgb(230, 126, 35);">[Keyboard Behavior](https://doc316en.candera.eu/link/598#bkmrk-keyboard-behavior)</span> for more information.

</td></tr><tr style="height: 163.867px;"><td style="width: 21.2608%; height: 163.867px;">State Machine Node  
</td><td style="width: 29.4201%; height: 163.867px;">Node  
</td><td style="width: 49.3191%; height: 163.867px;">Node containing State Machine Behavior, that will be sent a ValueChanged event with layout name, when layout switching occurs. In turn, State Machine may send SetConfiguration KeyboardAction to the Keyboard, to set new Keyboard layout configuration string. If left empty, layout changes will trigger ValueChanged on Keyboard node itself - in this case layout configuration string may be updated using Value change conditions attached to Keyboard node.</td></tr><tr style="height: 29.4667px;"><td style="width: 21.2608%; height: 29.4667px;">Navigate Up Key Code  
</td><td style="width: 29.4201%; height: 29.4667px;">Candera::KeyboardKeyCode::Enum</td><td style="width: 49.3191%; height: 29.4667px;">Key used for navigating up</td></tr><tr style="height: 29.4667px;"><td style="width: 21.2608%; height: 29.4667px;">Navigate Down Key Code  
</td><td style="width: 29.4201%; height: 29.4667px;">Candera::KeyboardKeyCode::Enum</td><td style="width: 49.3191%; height: 29.4667px;">Key used for navigating down</td></tr><tr style="height: 29.4667px;"><td style="width: 21.2608%; height: 29.4667px;">Navigate Next Key Code  
</td><td style="width: 29.4201%; height: 29.4667px;">Candera::KeyboardKeyCode::Enum</td><td style="width: 49.3191%; height: 29.4667px;">Key used for navigating right</td></tr><tr style="height: 29.4667px;"><td style="width: 21.2608%; height: 29.4667px;">Navigate Previous Key Code  
</td><td style="width: 29.4201%; height: 29.4667px;">Candera::KeyboardKeyCode::Enum</td><td style="width: 49.3191%; height: 29.4667px;">Key used for navigating left</td></tr><tr style="height: 46.2667px;"><td style="width: 21.2608%; height: 46.2667px;">Navigate Start On Down Key  
</td><td style="width: 29.4201%; height: 46.2667px;">bool  
</td><td style="width: 49.3191%; height: 46.2667px;">Enter navigation mode when pressing down key for the first time</td></tr><tr style="height: 46.2667px;"><td style="width: 21.2608%; height: 46.2667px;">Navigate End On Up Key  
</td><td style="width: 29.4201%; height: 46.2667px;">bool  
</td><td style="width: 49.3191%; height: 46.2667px;">Exit navigation mode when pressing up key on the first row</td></tr><tr style="height: 29.4667px;"><td style="width: 21.2608%; height: 29.4667px;">Navigate Start Key Code  
</td><td style="width: 29.4201%; height: 29.4667px;">Candera::KeyboardKeyCode::Enum</td><td style="width: 49.3191%; height: 29.4667px;">Key used for entering navigation mode</td></tr><tr style="height: 29.4667px;"><td style="width: 21.2608%; height: 29.4667px;">Navigate End Key Code  
</td><td style="width: 29.4201%; height: 29.4667px;">Candera::KeyboardKeyCode::Enum</td><td style="width: 49.3191%; height: 29.4667px;">Key used for exiting navigation mode</td></tr><tr style="height: 29.4667px;"><td style="width: 21.2608%; height: 29.4667px;">Navigate Close Key Code  
</td><td style="width: 29.4201%; height: 29.4667px;">Candera::KeyboardKeyCode::Enum</td><td style="width: 49.3191%; height: 29.4667px;">Key used for closing keyboard</td></tr><tr style="height: 10px;"><td style="width: 21.2608%; height: 10px;">Navigate Invoke Key Code  
</td><td style="width: 29.4201%; height: 10px;">Candera::KeyboardKeyCode::Enum</td><td style="width: 49.3191%; height: 10px;">Key used for invoking key action</td></tr><tr style="height: 46.2667px;"><td style="width: 21.2608%; height: 46.2667px;">Blend Type  
</td><td style="width: 29.4201%; height: 46.2667px;">BlendType::Enum</td><td style="width: 49.3191%; height: 46.2667px;">The blend type that will be set.  
</td></tr></tbody></table>

---

#### MenuItem

A MenuItem is a basic building block of MenuScreens. It can represent for example an application or a deeper level in a menu hierarchy. It consists of an icon for graphical representation and a label for textual description.

A proper usage is to place or create it inside a MenuScreen control because of internal events that communicate with it. Those events handle runtime repositioning an instance of MenuItem or deleting it from a MenuScreen.

<div drawio-diagram="5475"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1710517153.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-9" style="border-collapse: collapse; width: 100%; height: 460.267px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr style="height: 10px;"><td style="width: 24.2274%; height: 10px;">Enabled</td><td style="width: 21.1386%; height: 10px;">bool</td><td style="width: 54.634%; height: 10px;">If true, then item is visible  
</td></tr><tr style="height: 29.4667px;"><td style="width: 24.2274%; height: 29.4667px;">Focus Image On Selection</td><td style="width: 21.1386%; height: 29.4667px;">9-patch image</td><td style="width: 54.634%; height: 29.4667px;">The border image is set while the MenuItem is selected</td></tr><tr style="height: 29.4667px;"><td style="width: 24.2274%; height: 29.4667px;">Focus Image On Dragging</td><td style="width: 21.1386%; height: 29.4667px;">9-patch image</td><td style="width: 54.634%; height: 29.4667px;">The border image is set while the MenuItem is in edit mode</td></tr><tr style="height: 46.2667px;"><td style="width: 24.2274%; height: 46.2667px;">Delete Button Normal Image</td><td style="width: 21.1386%; height: 46.2667px;">9-patch image</td><td style="width: 54.634%; height: 46.2667px;">The image will be shown in top-right of the Control in edit mode to enable deletion of the instance of MenuItem</td></tr><tr style="height: 29.4667px;"><td style="width: 24.2274%; height: 29.4667px;">Delete Button Pressed Image</td><td style="width: 21.1386%; height: 29.4667px;">9-patch image</td><td style="width: 54.634%; height: 29.4667px;">The image will be set while Delete Button is pressed</td></tr><tr style="height: 46.2667px;"><td style="width: 24.2274%; height: 46.2667px;">Delete Button Hovered Color</td><td style="width: 21.1386%; height: 46.2667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td style="width: 54.634%; height: 46.2667px;">The color will be blend with Delete Button images while a user has his cursor over the Delete Button</td></tr><tr style="height: 29.4667px;"><td style="width: 24.2274%; height: 29.4667px;">Focusable  
</td><td style="width: 21.1386%; height: 29.4667px;">bool  
</td><td style="width: 54.634%; height: 29.4667px;">If true then focus node will be visible  
</td></tr><tr style="height: 29.4667px;"><td style="width: 24.2274%; height: 29.4667px;">Image</td><td style="width: 21.1386%; height: 29.4667px;">9-patch image</td><td style="width: 54.634%; height: 29.4667px;">A bitmap that is the icon of the Control</td></tr><tr style="height: 29.4667px;"><td style="width: 24.2274%; height: 29.4667px;">Label</td><td style="width: 21.1386%; height: 29.4667px;">String</td><td style="width: 54.634%; height: 29.4667px;">A text that will be set to the Text Node.  
</td></tr><tr style="height: 29.4667px;"><td style="width: 24.2274%; height: 29.4667px;">Label Color</td><td style="width: 21.1386%; height: 29.4667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)  
</td><td style="height: 29.4667px;">A color of the Icon Label.</td></tr><tr style="height: 29.4667px;"><td style="width: 24.2274%; height: 29.4667px;">Label Style</td><td style="width: 21.1386%; height: 29.4667px;">Text Style</td><td style="width: 54.634%; height: 29.4667px;">A font style of the Text.</td></tr><tr style="height: 46.2667px;"><td style="width: 24.2274%; height: 46.2667px;">Label Trimming</td><td style="width: 21.1386%; height: 46.2667px;">Enum (None, Ellipsis, Custom Text)  
</td><td style="width: 54.634%; height: 46.2667px;">Trimming defines the behavior to employ when content overflows the content area  
</td></tr><tr style="height: 46.2667px;"><td style="width: 24.2274%; height: 46.2667px;">Blend Type</td><td style="width: 29.4201%; height: 46.2667px;">BlendType::Enum</td><td style="width: 49.3191%; height: 46.2667px;">The blend type that will be set.  
</td></tr></tbody></table>

---

#### Menu Screen

The Menu Screen Control represents a menu in the form of a grid of icons (instances of the Menu Item Control).

It has configurable number of rows and columns as well as default and maximum number of screens. A user can swipe between neighboring screens. The Control handles user input and forwards proper information to children MenuItem nodes. The children nodes may be removed and reordered at run time.

<div drawio-diagram="5476"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1710518695.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-10" style="border-collapse: collapse; width: 100%; height: 813.401px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 29.4069%;"></col><col style="width: 45.5931%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr style="height: 29.4667px;"><td style="width: 29.1718%; height: 29.4667px;">ActiveScreenIndex</td><td style="width: 33.6228%; height: 29.4667px;">FeatStd::UInt32</td><td style="width: 37.2054%; height: 29.4667px;">Index (starting at 0) of the current visible screen.</td></tr><tr style="height: 29.4667px;"><td style="width: 29.1718%; height: 29.4667px;">NumberOfScreens</td><td style="width: 33.6228%; height: 29.4667px;">FeatStd::UInt32</td><td style="width: 37.2054%; height: 29.4667px;">Default number of screens (can be changed in runtime)</td></tr><tr style="height: 29.4667px;"><td style="width: 29.1718%; height: 29.4667px;">Rows</td><td style="width: 33.6228%; height: 29.4667px;">FeatStd::UInt32</td><td style="width: 37.2054%; height: 29.4667px;">Number of rows of a grid in a single screen</td></tr><tr style="height: 29.4667px;"><td style="width: 29.1718%; height: 29.4667px;">Columns</td><td style="width: 33.6228%; height: 29.4667px;">FeatStd::UInt32</td><td style="width: 37.2054%; height: 29.4667px;">Number of columns of a grid in a single screen</td></tr><tr style="height: 46.2667px;"><td style="width: 29.1718%; height: 46.2667px;">Items</td><td style="width: 33.6228%; height: 46.2667px;">Binding Source</td><td style="width: 37.2054%; height: 46.2667px;">Binding to a list containing icons and labels that should be accessible in the MenuScreen</td></tr><tr style="height: 46.2667px;"><td style="width: 29.1718%; height: 46.2667px;">Swap Item Animation Easing Function</td><td style="width: 33.6228%; height: 46.2667px;">EasingFunctions::Enum</td><td style="width: 37.2054%; height: 46.2667px;">Interpolation method for animations of swapping items</td></tr><tr style="height: 29.4667px;"><td style="width: 29.1718%; height: 29.4667px;">Swap Item Animation Length</td><td style="width: 33.6228%; height: 29.4667px;">FeatStd::Float</td><td style="width: 37.2054%; height: 29.4667px;">Length of the swapping animation</td></tr><tr style="height: 46.2667px;"><td style="width: 29.1718%; height: 46.2667px;">Change Screen Animation Easing Function</td><td style="width: 33.6228%; height: 46.2667px;">EasingFunctions::Enum</td><td style="width: 37.2054%; height: 46.2667px;">Interpolation method for animations of changing screens</td></tr><tr style="height: 46.2667px;"><td style="width: 29.1718%; height: 46.2667px;">Change Screen Animation Length</td><td style="width: 33.6228%; height: 46.2667px;">FeatStd::Float</td><td style="width: 37.2054%; height: 46.2667px;">Length of the changing animation</td></tr><tr style="height: 46.2667px;"><td style="width: 29.1718%; height: 46.2667px;">Key Code To Move Selection Left</td><td style="width: 33.6228%; height: 46.2667px;">Candera::KeyboardKeyCode::Enum</td><td style="width: 37.2054%; height: 46.2667px;">Key that changes focus from an item to its left neighbor</td></tr><tr style="height: 46.2667px;"><td style="width: 29.1718%; height: 46.2667px;">Key Code To Move Selection Right</td><td style="width: 33.6228%; height: 46.2667px;">Candera::KeyboardKeyCode::Enum</td><td style="width: 37.2054%; height: 46.2667px;">Key that changes focus from an item to its right neighbor</td></tr><tr style="height: 46.2667px;"><td style="width: 29.1718%; height: 46.2667px;">Key Code To Move Selection Up</td><td style="width: 33.6228%; height: 46.2667px;">Candera::KeyboardKeyCode::Enum</td><td style="width: 37.2054%; height: 46.2667px;">Key that changes focus from an item to its top neighbor</td></tr><tr style="height: 46.2667px;"><td style="width: 29.1718%; height: 46.2667px;">Key Code To Move Selection Down</td><td style="width: 33.6228%; height: 46.2667px;">Candera::KeyboardKeyCode::Enum</td><td style="width: 37.2054%; height: 46.2667px;">Key that changes focus from an item to its bottom neighbor</td></tr><tr style="height: 29.4667px;"><td style="width: 29.1718%; height: 29.4667px;">Focusable</td><td style="width: 33.6228%; height: 29.4667px;">bool</td><td style="width: 37.2054%; height: 29.4667px;">Enables grabbing focus by the Control</td></tr><tr style="height: 46.2667px;"><td style="width: 29.1718%; height: 46.2667px;">Screen Change Timeout</td><td style="width: 33.6228%; height: 46.2667px;">FeatStd::Float</td><td style="width: 37.2054%; height: 46.2667px;">Time of dragging a Menu Item outside the Control to fire Change Screen</td></tr><tr style="height: 37.8667px;"><td style="width: 29.1718%; height: 37.8667px;">Background Image</td><td style="width: 33.6228%; height: 37.8667px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="width: 37.2054%; height: 37.8667px;">Background image of screens</td></tr><tr style="height: 49.0667px;"><td style="width: 29.1718%; height: 49.0667px;">Focus Border Image</td><td style="width: 33.6228%; height: 49.0667px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="width: 37.2054%; height: 49.0667px;">Image of the border rendered when the Control grabs focus</td></tr><tr style="height: 46.2667px;"><td style="width: 29.1718%; height: 46.2667px;">Limit Of Screens</td><td style="width: 33.6228%; height: 46.2667px;">FeatStd::UInt32</td><td style="width: 37.2054%; height: 46.2667px;">Maximum number of screens that may be handled by the Control in runtime</td></tr><tr style="height: 46.2667px;"><td style="width: 29.1718%; height: 46.2667px;">Page Indicator Node</td><td style="width: 33.6228%; height: 46.2667px;">Node</td><td style="width: 37.2054%; height: 46.2667px;">Page indicator that helps in navigation between screens of the Control</td></tr><tr style="height: 11.2667px;"><td style="width: 24.2274%; height: 11.2667px;">Blend Type</td><td style="width: 29.4201%; height: 11.2667px;">BlendType::Enum</td><td style="width: 49.3191%; height: 11.2667px;">The blend type that will be set.  
</td></tr></tbody></table>

---

#### PageIndicator

A Page Indicator is a control that indicates currently visible page of set and provides method to switch to another page directly by click or if focused in a stepping manner using rotary action input.

The control interacts with MenuScreens through exchange of ValueChange and ChangeValue events. The cooperating control is set in *Target Node* property.

The action keys will move the focus in/out of the control and when in then will switch pages until first or last page is reached. Continued action will pass the focus out of the control.

By default the control supports up to 8 pages, support for more pages requires manual addition of additional PageIndicatorElements in the control.

<div drawio-diagram="5477"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1710519138.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-11" style="border-collapse: collapse; width: 100%; height: 813.401px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 29.4069%;"></col><col style="width: 45.5931%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr style="height: 29.4667px;"><td style="width: 18.7886%;">Target Node</td><td style="width: 30.4097%;">Node</td><td style="width: 50.8016%;">A node to exchanging events.</td></tr><tr><td style="width: 18.7886%;">Active Page Index</td><td style="width: 30.4097%;">FeatStd::UInt32</td><td style="width: 50.8016%;">Index of currently visible page. Must be in range from 0 to `Number Of Pages - 1` .</td></tr><tr><td style="width: 18.7886%;">Number Of Pages</td><td style="width: 30.4097%;">FeatStd::UInt32</td><td style="width: 50.8016%;">Number of available pages.</td></tr><tr><td style="width: 18.7886%;">Decrement Key Code</td><td style="width: 30.4097%;">Candera::KeyboardKeyCode::Enum</td><td style="width: 50.8016%;">The Key Code triggering decrement of the value.</td></tr><tr><td style="width: 18.7886%;">Increment Key Code</td><td style="width: 30.4097%;">Candera::KeyboardKeyCode::Enum</td><td style="width: 50.8016%;">The Key Code triggering increment of the value.</td></tr><tr><td style="width: 18.7886%;">Blend Type</td><td style="width: 30.4097%;">BlendType::Enum</td><td style="width: 50.8016%;">Sets the blend option.</td></tr></tbody></table>

---

#### Roll

The Control represents a vertical list of numeric values from a specified range with a specified step. Current value of the Control is visible in the middle of the control and can be zoomed like using lens. Changing the current value can be animated and can be done using touch/pointer or configurable keys of a keyboard. One can edit the current value of the Control by entering it with a keyboard.

To use the Control simply put it in a scene and configure all desirable properties. A roll can *forward value* as well as receive a *send value as event*.

<p class="callout info">The range is implemented in a way that it starts at Minimum Value, increases by (positive) StepSize but no further than Maximum Value. This conforms to the way range stepping is usually implemented, and gives configuration flexibility.</p>

<div drawio-diagram="5478"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1710519346.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-12" style="border-collapse: collapse; width: 100%; height: 1076.93px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 29.4069%;"></col><col style="width: 45.5931%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr style="height: 46.2667px;"><td style="width: 21.508%; height: 46.2667px;">Focusable  
</td><td style="width: 28.9203%; height: 46.2667px;">bool  
</td><td style="width: 49.5716%; height: 46.2667px;">If true, the control is focusable. Otherwise the control cannot be focused.  
</td></tr><tr style="height: 29.4667px;"><td style="width: 21.508%; height: 29.4667px;">Value</td><td style="width: 28.9203%; height: 29.4667px;">Float</td><td style="width: 49.5716%; height: 29.4667px;">The value which will be changed using the roll</td></tr><tr style="height: 46.2667px;"><td style="width: 21.508%; height: 46.2667px;">Min</td><td style="width: 28.9203%; height: 46.2667px;">Float</td><td style="width: 49.5716%; height: 46.2667px;">The minimum value which can be reached. This value is always smaller or equal to the MaxValue.</td></tr><tr style="height: 46.2667px;"><td style="width: 21.508%; height: 46.2667px;">Max</td><td style="width: 28.9203%; height: 46.2667px;">Float</td><td style="width: 49.5716%; height: 46.2667px;">The maximum value which can be reached. This value is always bigger or equal to MinValue</td></tr><tr style="height: 29.4667px;"><td style="width: 21.508%; height: 29.4667px;">Step</td><td style="width: 28.9203%; height: 29.4667px;">Float</td><td style="width: 49.5716%; height: 29.4667px;">The increment/decrement of the value.</td></tr><tr style="height: 46.2667px;"><td style="width: 21.508%; height: 46.2667px;">LensVisible</td><td style="width: 28.9203%; height: 46.2667px;">bool</td><td style="width: 49.5716%; height: 46.2667px;">Is lens group visible? Enables highlighting of the current value, default zooming and bordering it.   
</td></tr><tr style="height: 46.2667px;"><td style="width: 21.508%; height: 46.2667px;">Use Cyclic Roll</td><td style="width: 28.9203%; height: 46.2667px;">bool</td><td style="width: 49.5716%; height: 46.2667px;">Is roll cyclic? If true the MinValue of the Control can be reached after the MaxValue of the Control and vice versa</td></tr><tr style="height: 124.667px;"><td style="width: 21.508%; height: 124.667px;">Allow Dragging Past Limit</td><td style="width: 28.9203%; height: 124.667px;">bool</td><td style="width: 49.5716%; height: 124.667px;">Allow temporary over-dragging (dragging to blank values before first and after last entry).

If true there is visible animation of the Control being „out of range“ while moving below minimum and above maximum value.

</td></tr><tr style="height: 29.4667px;"><td style="width: 21.508%; height: 29.4667px;">Value Style</td><td style="width: 28.9203%; height: 29.4667px;">Candera::TextRendering::Style</td><td style="width: 49.5716%; height: 29.4667px;">Sets the text style for the values outside the Lens.</td></tr><tr style="height: 46.2667px;"><td style="width: 21.508%; height: 46.2667px;">Value Color</td><td style="width: 28.9203%; height: 46.2667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td style="width: 49.5716%; height: 46.2667px;">Specifies color of values in the vertical list outside the Lens</td></tr><tr style="height: 29.4667px;"><td style="width: 21.508%; height: 29.4667px;">Lens Style</td><td style="width: 28.9203%; height: 29.4667px;">Candera::TextRendering::Style</td><td style="width: 49.5716%; height: 29.4667px;">Sets the text style for the values inside the Lens.</td></tr><tr style="height: 46.2667px;"><td style="width: 21.508%; height: 46.2667px;">Unit Text</td><td style="width: 28.9203%; height: 46.2667px;">String</td><td style="width: 49.5716%; height: 46.2667px;">Text used in lens (it means: when the lens is used at all) to present a unit of the value</td></tr><tr style="height: 29.4667px;"><td style="width: 21.508%; height: 29.4667px;">Unit Style</td><td style="width: 28.9203%; height: 29.4667px;">Candera::TextRendering::Styler</td><td style="width: 49.5716%; height: 29.4667px;">Sets the text style for the Unit Text.</td></tr><tr style="height: 35.0667px;"><td style="width: 21.508%; height: 35.0667px;">Unit Margin</td><td style="width: 28.9203%; height: 35.0667px;">[Candera::Margin](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_margin.html "A non-zero margin applies space outside the element layout's width and height. The values can be set ...")</td><td style="width: 49.5716%; height: 35.0667px;">Specifies margin of the UnitText</td></tr><tr style="height: 29.4667px;"><td style="width: 21.508%; height: 29.4667px;">Unit Color</td><td style="width: 28.9203%; height: 29.4667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td style="width: 49.5716%; height: 29.4667px;">Specifies color of the UnitText</td></tr><tr style="height: 35.0667px;"><td style="width: 21.508%; height: 35.0667px;">Decoration Image</td><td style="width: 28.9203%; height: 35.0667px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="width: 49.5716%; height: 35.0667px;">Specifies a border image of the Lens</td></tr><tr style="height: 46.2667px;"><td style="width: 21.508%; height: 46.2667px;">Text Input Color</td><td style="width: 28.9203%; height: 46.2667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td style="width: 49.5716%; height: 46.2667px;">Specifies color of the text entered in the InputField while editing the current value of the Control</td></tr><tr style="height: 49.0667px;"><td style="width: 21.508%; height: 49.0667px;">Text Edit Background</td><td style="width: 28.9203%; height: 49.0667px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="width: 49.5716%; height: 49.0667px;">The background image used for the Input Field when entering Text Edit mode.</td></tr><tr style="height: 46.2667px;"><td style="width: 21.508%; height: 46.2667px;">Max Text Length</td><td style="width: 28.9203%; height: 46.2667px;">Unsigned Int 16</td><td style="width: 49.5716%; height: 46.2667px;">Specifies maximum count of characters that may be entered while editing the current value of the Control</td></tr><tr style="height: 29.4667px;"><td style="width: 21.508%; height: 29.4667px;">Decrement Key Code</td><td style="width: 28.9203%; height: 29.4667px;">Candera::KeyboardKeyCode::Enum</td><td style="width: 49.5716%; height: 29.4667px;">Key used to decrement the current value of the Control</td></tr><tr style="height: 29.4667px;"><td style="width: 21.508%; height: 29.4667px;">Increment Key Code</td><td style="width: 28.9203%; height: 29.4667px;">Candera::KeyboardKeyCode::Enum</td><td style="width: 49.5716%; height: 29.4667px;">Key used to increment the current value of the Control</td></tr><tr style="height: 46.2667px;"><td style="width: 21.508%; height: 46.2667px;">Edit Key Code</td><td style="width: 28.9203%; height: 46.2667px;">Candera::KeyboardKeyCode::Enum</td><td style="width: 49.5716%; height: 46.2667px;">Key used to enter edit mode (show InputField) of the current value of the Control</td></tr><tr style="height: 29.4667px;"><td style="width: 21.508%; height: 29.4667px;">Blend Type</td><td style="width: 28.9203%; height: 29.4667px;">BlendType::Enum</td><td style="width: 49.5716%; height: 29.4667px;">Sets the blend option.</td></tr><tr style="height: 46.2667px;"><td style="width: 21.508%; height: 46.2667px;">Keyboard Node</td><td style="width: 28.9203%; height: 46.2667px;">Node</td><td style="width: 49.5716%; height: 46.2667px;">Specifies which Keyboard control should be used when entering edit mode.</td></tr><tr style="height: 29.4667px;"><td style="width: 21.508%; height: 29.4667px;">Keyboard Layout Name</td><td style="width: 28.9203%; height: 29.4667px;">String</td><td style="width: 49.5716%; height: 29.4667px;">Layout name.  
</td></tr></tbody></table>

---

#### SpinBox

A spin box or spin button is a control that enables users to increase or decrease the number value by a specific increment (often by 1, 5 or 10) via clicking an up or down arrow button.

The action key/s will move the focus in/out of the control and informs via event about the confirmed value.

<div drawio-diagram="5488"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1711096212.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-13" style="border-collapse: collapse; width: 100%; height: 1076.93px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 29.4069%;"></col><col style="width: 45.5931%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**</td></tr><tr><td>Enabled  
</td><td>bool  
</td><td>If set to false it will not react on focus events and does not have to support different visualizations for the different states.</td></tr><tr><td>Focusable  
</td><td>bool  
</td><td>If true, the control is focusable. Otherwise the control can not be focused.</td></tr><tr><td>Value  
</td><td>Variant</td><td>The value to be formatted</td></tr><tr><td>Step Size  
</td><td>Variant  
</td><td>Increment/Decrement step value.</td></tr><tr><td>Minimum Value  
</td><td>Variant</td><td>Minimum value</td></tr><tr><td>Maximum Value  
</td><td>Variant</td><td>Maximum value</td></tr><tr><td>Text Format  
</td><td>String  
</td><td>The format string which includes one format specifier (beginning with %). See C printf() function.</td></tr><tr><td>Text Alignment  
</td><td>Enum (Left, Centered, Right, Automatic)</td><td>The horizontal text alignment, using the culture text direction, is used to define how text will be horizontally aligned within its layout area.</td></tr><tr><td>Text Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td>Text color.</td></tr><tr><td>Disabled Text Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td>Disabled text color.</td></tr><tr><td>Text Style  
</td><td>Candera::TextRendering::Style</td><td>The Style that will be used.</td></tr><tr><td>Spinbox Color Hovered  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)  
</td><td>The color for hovered SpinBox.</td></tr><tr><td>Spinbox Color Disabled  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td>The color for disabled SpinBox overlay.</td></tr><tr><td>Background Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image to set on the effect.</td></tr><tr><td>Arrow Up Normal Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The increment button image.</td></tr><tr><td>Arrow Up Pressed Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The increment button pressed image.</td></tr><tr><td>Arrow Down Normal Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The decrement button image.</td></tr><tr><td>Arrow Down Pressed Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The decrement button pressed image.</td></tr><tr><td>Increment Key Code  
</td><td>Candera::KeyboardKeyCode::Enum</td><td>KeyCode of the key used to increase value.</td></tr><tr><td>Decrement Key Code  
</td><td>Candera::KeyboardKeyCode::Enum</td><td>KeyCode of the key used to decrease value.</td></tr><tr><td>Blend Type  
</td><td style="width: 28.9203%; height: 29.4667px;">BlendType::Enum</td><td style="width: 49.5716%; height: 29.4667px;">The blend type that will be set on the affected nodes.</td></tr></tbody></table>

---

#### Sub-List

You can create a submenu in your solution by configuring this control as a child node of a List control.

With this control, you can easily invoke a submenu that can be expanded or collapsed. Key navigation is also built-in.

For detailed usage, please refer to “Getting Started &gt; Sample Solutions &gt; GettingStartedControls Solution &gt; GettingStartedControls Part 3”.

<div drawio-diagram="5489"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1711098529.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-14" style="border-collapse: collapse; width: 100%; height: 1076.93px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 29.4069%;"></col><col style="width: 45.5931%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**</td></tr><tr><td>Enabled  
</td><td>bool  
</td><td>If set to false the List will not react to Focus events. It also sets the Visibility of the list.</td></tr><tr><td>Visible  
</td><td>bool  
</td><td>If true, the List is being rendered.</td></tr><tr><td>Parent List Node  
</td><td>Candera::AbstractNodePointer</td><td>The node with a ListBehavior that acts as a parent to this SubListBehavior.</td></tr><tr><td>Handle Keyboard Events  
</td><td>bool  
</td><td>Makes the behavior handle KeyboardFocusNavigation events internally.</td></tr><tr><td>Scroll Direction  
</td><td>ScrollDirection::Enum (Vertical, Horizontal)  
</td><td>The direction in which the SubListBehavior scrolls.</td></tr><tr><td>Animation Duration  
</td><td>UInt32  
</td><td>Duration of the scrolling animation.</td></tr><tr><td>Deceleration Factor  
</td><td>Float  
</td><td>Loss of flick animation speed over time.</td></tr><tr><td>Max Speed Per Flick  
</td><td>Float  
</td><td>Maximum amount of speed each flick motion adds to the flick animation.</td></tr><tr><td>Min Speed Per Flick  
</td><td>Float  
</td><td>Minimum speed required to count a touch gesture as a flick and start or continue the flick animation.</td></tr><tr><td>Min Movement To Scrolling  
</td><td>UInt32  
</td><td>Minimum distance a touch gesture needs to move to start a scrolling animation.</td></tr><tr><td>Max Touch Sample Age  
</td><td>UInt32  
</td><td>Maximum age in milliseconds of touch movement speed counted towards generating flick animation speed.</td></tr><tr><td>Items  
</td><td>Items  
</td><td>The items property is used for binding of dynamic items. It can only be set via databinding. Only one visible list control should be bound to a fragment list in the model. Otherwise the list fragments in the model are not able to provide data for both list controls. Use a separate list model that is filled with the same data if such a use case is required.</td></tr><tr><td>Blend Type  
</td><td>BlendType::Enum</td><td>The blend type that will be set.</td></tr></tbody></table>

---

#### TextButton

The TextButton Control offers an easy way to define all different states of a button and an action that is performed when clicking it.

As for the simple Button Control the visual appearance of the TextButton can also be configured with three images depending on the button's state and a hovered color that can be defined including an alpha value.

Additionally the TextButton offers a predefined TextNode which can be modified via the Text and the Text Style properties.

The action that is performed when pressing the TextButton can easily be defined in the <span style="color: rgb(230, 126, 35);">[EventHandler Tab](https://doc316en.candera.eu/link/569#bkmrk-page-title)</span>. The functionality of the TextButton is similar to the <span style="color: rgb(230, 126, 35);">[Button](#bkmrk-button)</span>. An example configuration of the Event Handler is given in the <span style="color: rgb(230, 126, 35);">[Button section](#bkmrk-button)</span>.

<div class="contents" id="bkmrk--49"><div class="contents"><div class="contents"><div class="textblock"><div drawio-diagram="5490"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1711101086.png" alt=""/></div>

</div></div></div></div>**Properties**

<table border="1" id="bkmrk-property-name-type-d-15" style="border-collapse: collapse; width: 100%; height: 1076.93px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 29.4069%;"></col><col style="width: 45.5931%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**</td></tr><tr><td>Enabled  
</td><td>bool  
</td><td>If set to false it will not react on focus events and does not have to support different visualizations for the different states.</td></tr><tr><td>Focusable  
</td><td>bool  
</td><td>If true, the control is focusable. Otherwise the control can not be focused.</td></tr><tr><td>Text  
</td><td>String  
</td><td>The Text that will be set to the Text Node.</td></tr><tr><td>Text Style  
</td><td>Candera::TextRendering::Style</td><td>The Style that will be used.</td></tr><tr><td>Normal Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image which is used as Button Image for the color multiplication of other states like Hovered.</td></tr><tr><td>Pressed Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image which is used as Button Image if the pressed state applies.</td></tr><tr><td>Focused Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>Image which is transparent in the center (border). It is used for the control with the current focus (only one of the HMI)</td></tr><tr><td>Hovered Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td>The color which is used as hovered color for blending with the Button Image.</td></tr><tr><td>Disabled Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td>The color to set on the disabled Button.</td></tr><tr><td>Text Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td>The color of the text.</td></tr><tr><td>Disabled Text Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td>The color to set on the effect of the Text.</td></tr><tr><td>Blend Type  
</td><td>BlendType::Enum</td><td>The blend type that will be set.</td></tr></tbody></table>

---

#### CheckBox

The CheckBox Control can easily be configured with a text, images for a normal and a pressed state as well as for a selected and a selected pressed state. Additionally a focused image can be defined. The action that is performed when the value changed can easily be defined in the <span style="color: rgb(230, 126, 35);">[EventHandler Tab](https://doc316en.candera.eu/link/569#bkmrk-page-title)</span>.

<div drawio-diagram="5491"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1711101601.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-16" style="border-collapse: collapse; width: 100%; height: 1076.93px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 29.4069%;"></col><col style="width: 45.5931%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**</td></tr><tr><td>Enabled  
</td><td>bool  
</td><td>If set to false it will not react on focus events and does not have to support different visualizations for the different states.</td></tr><tr><td>Focusable  
</td><td>bool  
</td><td>If true, the control is focusable. Otherwise the control can not be focused.</td></tr><tr><td>Value  
</td><td>bool/Variant  
</td><td>Selected or not (true/false).</td></tr><tr><td>Text  
</td><td>String  
</td><td>Text of the CheckBox.</td></tr><tr><td>Text Style  
</td><td>Candera::TextRendering::Style</td><td>The Style that will be set to the Text Node.</td></tr><tr><td>Normal Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image which is used as CheckBox Image if the normal state applies.</td></tr><tr><td>Pressed Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image which is used as CheckBox Image if the not selected CheckBox is pressed.</td></tr><tr><td>Selected Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image which is used as CheckBox Image if the selected state applies.</td></tr><tr><td>Selected Pressed Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image which is used as CheckBox Image if the selected CheckBox is pressed.</td></tr><tr><td>Focused Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>Image which is transparent in the middle (border). Used for the control with the current KeyboardFocus (only one of the HMI)  
Frames the entire control (including text)</td></tr><tr><td>Hovered Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)  
</td><td>The color which is used as highlighted color for blending with the Selected/Normal image.</td></tr><tr><td>Disabled Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)  
</td><td>The color to set on the effect.</td></tr><tr><td>Blend Type  
</td><td>BlendType::Enum</td><td>The blend type that will be set.</td></tr></tbody></table>

**Functionality**

The functionality of the CheckBox can be edited in the Behaviors panel or in the EventHandler Tab (see also chapter <span style="color: rgb(230, 126, 35);">[EventHandler Tab](https://doc316en.candera.eu/link/569#bkmrk-page-title)</span>). An EventHandler that checks for the Value Changed Event will perform the user defined action.

<div drawio-diagram="5493"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1711103449.png" alt=""/></div>

<table class="doxtable" id="bkmrk-behavior-name-type-p-2" style="width: 100%;"><tbody><tr><th class="align-left" style="width: 18.4178%;">**Behavior Name**</th><th class="align-left" style="width: 16.1928%;">**Type**</th><th class="align-left" style="width: 12.854%;">**predefined/ userdefined**</th><th class="align-left" style="width: 52.5354%;">**Description**</th></tr><tr><td style="width: 18.4178%;">EventHandler</td><td style="width: 16.1928%;">Control Behavior</td><td style="width: 12.854%;">predefined</td><td style="width: 52.5354%;">Checks a defined condition and invokes a defined action behavior if that condition is true.</td></tr><tr><td style="width: 18.4178%;">Check changed Value</td><td style="width: 16.1928%;">Control Condition Behavior</td><td style="width: 12.854%;">userdefined</td><td style="width: 52.5354%;">Condition checks the changed value of the CheckBox.</td></tr><tr><td style="width: 18.4178%;">Action</td><td style="width: 16.1928%;">Action Behavior</td><td style="width: 12.854%;">userdefined</td><td style="width: 52.5354%;">Userdefined action that will be performed when the checkbox is clicked.</td></tr></tbody></table>

---

#### ToggleButton

The ToggleButton Control offers an easy way to define all different states of a toggle button and an action that is performed when clicking it.

It is typically used for activating and deactivating a persisting functionality.

As for the simple Button Control the visual appearance of the ToggleButton can also be configured with four images depending on the button's state and a hovered color that can be defined including an alpha value.

Additionally the ToggleButton offers two predefined TextNode that can be modified via the First Text and the Second Text properties.

The action that is performed when pressing the ToggleButton can easily be defined in the <span style="color: rgb(230, 126, 35);">[EventHandler Tab](https://doc316en.candera.eu/link/569#bkmrk-page-title)</span>. The functionality of the ToggleButton is similar to the <span style="color: rgb(230, 126, 35);">[Button](#bkmrk-button)</span> (when reacting on mouse clicks) or to the <span style="color: rgb(230, 126, 35);">[CheckBox ](#bkmrk-checkbox)</span>(when reacting on a value change). Corresponding sample configuration of the Event Handler are given in the <span style="color: rgb(230, 126, 35);">[Button section](#bkmrk-button)</span> and in the<span style="color: rgb(230, 126, 35);"> [CheckBox section](#bkmrk-checkbox)</span>.

<div drawio-diagram="5494"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1711103925.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-17" style="border-collapse: collapse; width: 100%; height: 1076.93px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 29.4069%;"></col><col style="width: 45.5931%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**</td></tr><tr><td>Enabled  
</td><td>bool  
</td><td>If set to false it will not react on focus events an</td></tr><tr><td>Focusable  
</td><td>bool  
</td><td>If true, the control is focusable. Otherwise the control can not be focused.</td></tr><tr><td>Value  
</td><td>bool/Variant  
</td><td>Toggled or not (true/false).</td></tr><tr><td>First Text  
</td><td>String  
</td><td>The Text that will be set with the first toggle image.</td></tr><tr><td>Second Text  
</td><td>String  
</td><td>The Text that will be set with the second toggle image.</td></tr><tr><td>First Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image which is used as ToggleButton Image if the first state applies.</td></tr><tr><td>First Pressed Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image which is used as ToggleButton Image if the first toggle image is pressed.</td></tr><tr><td>Second Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image which is used as ToggleButton Image if the second toggle state applies.</td></tr><tr><td>Second Pressed Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image which is used as ToggleButton Image if the second toggle image is pressed.</td></tr><tr><td>Focused Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>Image which is transparent in the middle (border). Used for the control with the current KeyboardFocus (only one of the HMI)  
Frames the entire control (including text)</td></tr><tr><td>Hovered Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td>The color which is used as highlighted color for blending with the first and second toggle image.</td></tr><tr><td>Disabled Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td>The color which is used as disabled color for blending with the first and second toggle image.</td></tr><tr><td>Click Count  
</td><td>ClickCount::Enum (AnyClick, SingleClick, DoubleClick, TripleClick)  
</td><td>If the value ClickConditionBehavior receives matches the Click Count set, it will return a positive response.</td></tr><tr><td>Blend Type  
</td><td>BlendType::Enum</td><td>The blend type that will be set on the affected nodes.</td></tr></tbody></table>

---

#### RadioButton

The RadioButton Control can easily be configured with a text, images for a normal and a pressed state as well as for a selected and a selected pressed state. Additionally a focused image can be defined. The action that is performed when the value changed can easily be defined in the <span style="color: rgb(230, 126, 35);">[EventHandler Tab](https://doc316en.candera.eu/link/569#bkmrk-page-title)</span>.

The functionality of the RadioButton is similar to the <span style="color: rgb(230, 126, 35);">[CheckBox ](#bkmrk-checkbox)</span>(when reacting on a value change). A corresponding sample configuration of the Event Handler is given in the<span style="color: rgb(230, 126, 35);"> [CheckBox section](#bkmrk-checkbox)</span>.

<div drawio-diagram="5495"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1711108406.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-18" style="border-collapse: collapse; width: 100%; height: 1076.93px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 29.4069%;"></col><col style="width: 45.5931%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**</td></tr><tr><td>Enabled  
</td><td>bool  
</td><td>If set to false it will not react on focus events and does not have to support different visualizations for the different states.</td></tr><tr><td>Focusable  
</td><td>bool  
</td><td>If true, the control is focusable. Otherwise the control can not be focused.</td></tr><tr><td>Text  
</td><td>String  
</td><td>Text of the RadioButton.</td></tr><tr><td>TextStyle  
</td><td>Candera::TextRendering::Style</td><td>The Style that will be set to the Text Node.</td></tr><tr><td>Normal Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image which is used as RadioButton Image if the normal state applies.</td></tr><tr><td>Pressed Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image which is used as RadioButton Image if the not selected RadioButton is pressed.</td></tr><tr><td>Selected Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image which is used as RadioButton Image if the selected state applies.</td></tr><tr><td>Selected Pressed Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image which is used as RadioButton Image if the selected RadioButton is pressed.</td></tr><tr><td>Focused Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>Image which is transparent in the middle (border). Used for the control with the current KeyboardFocus (only one of the HMI). Frames the entire control (including text)</td></tr><tr><td>Hovered Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td>The color which is used as highlighted color for blending with the Selected/Normal image.</td></tr><tr><td>Disabled Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td>The color to set on the effect.</td></tr><tr><td>Blend Type  
</td><td>BlendType::Enum</td><td>The blend type that will be set on the affected nodes.</td></tr><tr><td>Selected  
</td><td>bool/Variant  
</td><td>Specifies the type and the value to pass onto Process Value Behavior.</td></tr></tbody></table>

---

#### CircularSlider

Circular slider is a control that allows user to set the value using circular slide movement or directly indicate value on slider's bar.

In default version the slider is a full circle, but using properties user easily can operate on e.g. quarter of the circle. In case of circular slider user can set the start angle and the end angle and map that to output value which is also customizable.

User can use the circular slider's value as an input for another control using "Forward Value Behavior".

Change of the value is indicated by slider's bar and thumb position. Thumb is optional (please check UseThumb property)

<p class="callout info">Circular slider can be connected with all controls that support "changeValueEvent". For example: progress bar, gauge, text value.</p>

<div drawio-diagram="5496"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1711109340.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-19" style="border-collapse: collapse; width: 100%; height: 658.001px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 29.4069%;"></col><col style="width: 45.5931%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Value</td><td style="height: 29.4667px;">Variant</td><td style="height: 29.4667px;">Value of the slider</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Minimum Value  
</td><td style="height: 29.4667px;">Variant  
</td><td style="height: 29.4667px;">Minimum value of the slider</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Maximum Value  
</td><td style="height: 29.4667px;">Variant  
</td><td style="height: 29.4667px;">Maximum value of the slider</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Step Size  
</td><td style="height: 29.4667px;">Variant  
</td><td style="height: 29.4667px;">Step size for value increment/decrement by keyboard</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Minimum Angle  
</td><td style="height: 29.4667px;">Float  
</td><td style="height: 29.4667px;">Minimum rotation of the slider.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Maximum Angle  
</td><td style="height: 29.4667px;">Float  
</td><td style="height: 29.4667px;">Maximum rotation of the slider.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Increment Key Code  
</td><td style="height: 29.4667px;">Candera::KeyboardKeyCode::Enum</td><td style="height: 29.4667px;">Increment value KeyCode</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Decrement Key Code  
</td><td style="height: 29.4667px;">Candera::KeyboardKeyCode::Enum</td><td style="height: 29.4667px;">Decrement value KeyCode</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Background Image  
</td><td style="height: 29.4667px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="height: 29.4667px;">Background image</td></tr><tr style="height: 35.0667px;"><td style="height: 35.0667px;">Active Image  
</td><td style="height: 35.0667px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="height: 35.0667px;">Image showing current value, will be masked, must have GlBitmapColorMaskBlend</td></tr><tr style="height: 35.0667px;"><td style="height: 35.0667px;">Thumb Image  
</td><td style="height: 35.0667px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="height: 35.0667px;">Thumb image</td></tr><tr style="height: 35.0667px;"><td style="height: 35.0667px;">Thumb Image Pressed  
</td><td style="height: 35.0667px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="height: 35.0667px;">Thumb image during touch</td></tr><tr style="height: 35.0667px;"><td style="height: 35.0667px;">Thumb Hover Color  
</td><td style="height: 35.0667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td style="height: 35.0667px;">Hover color blend for thumb image</td></tr><tr style="height: 35.0667px;"><td style="height: 35.0667px;">Focus Image  
</td><td style="height: 35.0667px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="height: 35.0667px;">Focus node image</td></tr><tr style="height: 35.0667px;"><td style="height: 35.0667px;">Disabled Color  
</td><td style="height: 35.0667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td style="height: 35.0667px;">Disabled color blend for control</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Enabled  
</td><td style="height: 29.4667px;">bool  
</td><td style="height: 29.4667px;">If set to false it will not react on focus events and does not have to support different visualizations for the different states.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Focusable  
</td><td style="height: 29.4667px;">bool  
</td><td style="height: 29.4667px;">If true, the control is focusable. Otherwise the control can not be focused.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Use Thumb  
</td><td style="height: 29.4667px;">bool  
</td><td style="height: 29.4667px;">Should thumb node be visible?</td></tr><tr style="height: 35.0667px;"><td style="height: 35.0667px;">Active Image Hover Color  
</td><td style="height: 35.0667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td style="height: 35.0667px;">Hover color blend for active image.   
</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Blend Type  
</td><td style="height: 29.4667px;">BlendType::Enum</td><td style="height: 29.4667px;">The blend type that will be set on the affected nodes.</td></tr></tbody></table>

<p class="callout info">Using "Pivot hint" images' property it is possible to create customized slider control similar to customized gauge control. Please check the [<span style="color: rgb(230, 126, 35);">Advanced Cluster Solution part 1-4</span>](https://doc316en.candera.eu/books/best-practice/chapter/advanced-cluster-solution). </p>

---

#### Slider

The Slider provides a value which changes corresponding to the position of the knob. This knob can be dragged. Additionally the value can be set directly or by an event (e.g. by using the Send Value as Event Behavior). Furthermore the Slider offers to define the visual representation of different states (f.e. Pressed, Hovered).

<div drawio-diagram="5497"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1711110887.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-20" style="border-collapse: collapse; width: 100%; height: 658.001px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 29.4069%;"></col><col style="width: 45.5931%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Enabled</td><td style="height: 29.4667px;">bool</td><td style="height: 29.4667px;">If set to false it will not react on focus events and does not have to support different visualizations for the different states.</td></tr><tr><td>Focusable  
</td><td>bool  
</td><td>If true, the control is focusable. Otherwise the control can not be focused.</td></tr><tr><td>Value  
</td><td>Variant  
</td><td>The bindable value of the slider</td></tr><tr><td>Minimum  
</td><td>bool/Variant  
</td><td>Minimum Range</td></tr><tr><td>Maximum  
</td><td>bool/Variant  
</td><td>Maximum Range</td></tr><tr><td>Knob Normal Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image of the knob in normal state.</td></tr><tr><td>Knob Pressed Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image of the knob in pressed state.</td></tr><tr><td>Knob Center Margin  
</td><td>Candera::Margin</td><td>Knob Center Margin, used for positioning the Knob around the Slider value. Should not exceed the contorl boundary to avoid clipping issues of standalone Slider.</td></tr><tr><td>Track Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image of the slider track.</td></tr><tr><td>Track Fill Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image to set on the effect.</td></tr><tr><td>Track Margin

</td><td>Candera::Margin</td><td>Track Margin, can be used to provide space to display Knob around the track, so it fits within Control boundary and Focus Rectangle.</td></tr><tr><td>Fill Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td>Color that gets blended with the fill color</td></tr><tr><td>Focused Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>Image which is transparent in the center (border). It is used for the control with the current focus</td></tr><tr><td>Hovered Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td>The color which is used as hovered color for blending with the Track Image.</td></tr><tr><td>Disabled Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td>The color which can be used from other Behaviors.</td></tr><tr><td>Use Center  
</td><td>bool  
</td><td>If true, the center value defined for the knob bitmap is used to align the knob to the value position, otherwise the calculated center.</td></tr><tr><td>Blend Type  
</td><td>BlendType::Enum</td><td>The blend type that will be set on the affected nodes.</td></tr></tbody></table>

<p class="callout info">Slider control does not support external clipping set by ClippingSetterTraverser. The Knob may be incorrectly clipped when placed inside a control that recursively imposes clipping on its children (e.g. List).</p>

**Functionality**

The functionality of the slider can be extended by the Forward Value Behavior. Therefore attach the behavior to the Slider which offers you to set a Target Node. The Behavior will then forward the changed value to the defined control. (Control needs a Value Behavior where "Accept Value Behavior" is enabled.)

<div drawio-diagram="5500"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1711126803.png" alt=""/></div>

<table border="1" class="doxtable" id="bkmrk-behavior-name-type-p-3" style="border-collapse: collapse; width: 100%; border-width: 1px; border-style: solid;"><tbody><tr><th style="width: 20.5192%; border-width: 1px;">**Behavior Name**</th><th style="width: 15.204%; border-width: 1px;">**Type**</th><th style="width: 11.9976%; border-width: 1px;">**predefined/ userdefined**</th><th style="width: 52.2793%; border-width: 1px;">**Description**</th></tr><tr><td style="width: 20.5192%; border-width: 1px;">Forward Value Behavior</td><td style="width: 15.204%; border-width: 1px;">Value Processing</td><td style="width: 11.9976%; border-width: 1px;">userdefined</td><td style="width: 52.2793%; border-width: 1px;">Forwards a received value. Associated controls with a value property receive the value.</td></tr><tr><td style="width: 20.5192%; border-width: 1px;">Value Behavior</td><td style="width: 15.204%; border-width: 1px;">Value Processing</td><td style="width: 11.9976%; border-width: 1px;">predefined</td><td style="width: 52.2793%; border-width: 1px;">Control which has to receive the value has to have a Value Behavior where "Accept Value Behavior" is enabled.</td></tr></tbody></table>

---

#### ScrollView

Similar to the <span style="color: rgb(230, 126, 35);">[List](#bkmrk-listst)</span> the ScrollView offers an Anchor where any node (also Controls) can be attached to.

<div drawio-diagram="5499"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1711125884.png" alt=""/></div>

The size of the ScrollView can be set using the Layout of the Control. If the size of the attached nodes is bigger than the layout size of the ScrollView, Scrollbars will appear. In difference to the <span style="color: rgb(230, 126, 35);">[List](#bkmrk-list)</span> the ScrollView doesn't layout the attached nodes. So Controls and other nodes can be placed at any position. (Also the hierarchy doesn't matter which means that an additional Layouter or GroupBox can be added.)

**Properties**

<table border="1" id="bkmrk-property-name-type-d-21" style="border-collapse: collapse; width: 100%; height: 58.9334px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 29.4069%;"></col><col style="width: 45.5931%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Vertical Scrollbar Visibility</td><td style="height: 29.4667px;">ScrollbarVisibility::Enum (Automatic, Collapsed, Visible)</td><td style="height: 29.4667px;">Configure the visibility of the scrollbar. By default it is set to Automatic which will determine the visibility based on the actual content.</td></tr><tr><td>Horizontal Scrollbar Visibility  
</td><td>ScrollbarVisibility::Enum (Automatic, Collapsed, Visible)</td><td>Configure the visibility of the scrollbar. By default it is set to Automatic which will determine the visibility based on the actual content.</td></tr><tr><td>Blend Type  
</td><td>BlendType::Enum</td><td>The blend type that will be set.</td></tr></tbody></table>

---

#### List

The List offers an Anchor where any nodes (also Controls) can be attached to. The list then automatically layouts these child nodes.

When setting the layout size of the List, a Scrollbar will appear as soon as the layout size is smaller than the list of items. Whether the Scrollbar appears sideward or at the bottom depends on the Scroll Direction Property.

<p class="callout info">Be sure that the list items are child nodes (just first level) of the anchor. So no additional Layouter or GroupBox is possible.</p>

<div drawio-diagram="5502"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1711127105.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-22" style="border-collapse: collapse; width: 100%; height: 58.9334px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 29.4069%;"></col><col style="width: 45.5931%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Handle Keyboard Events</td><td style="height: 29.4667px;">bool</td><td style="height: 29.4667px;">Makes the behavior react to KeyboardFocusNavigation events.</td></tr><tr><td>Scroll Direction  
</td><td>Enum (Vertical, Horizontal)</td><td>The direction in which the List scrolls.</td></tr><tr><td>Animation Duration  
</td><td>UInt32  
</td><td>Duration of the scrolling animation.</td></tr><tr><td>Deceleration Factor  
</td><td>Float  
</td><td>Loss of flick animation speed over time.</td></tr><tr><td>Max Speed Per Flick  
</td><td>Float  
</td><td>Maximum amount of speed each flick motion adds to the flick animation.</td></tr><tr><td>Min Speed Per Flick  
</td><td>Float  
</td><td>Minimum speed required to count a touch gesture as a flick and start or continue the flick animation.</td></tr><tr><td>Min Movement to Scrolling  
</td><td>UInt32  
</td><td>Minimum distance a touch gesture needs to move to start a scrolling animation.</td></tr><tr><td>Max Touch Sample Age  
</td><td>UInt32  
</td><td>Maximum age in miliseconds of touch movement speed counted towards generating flick animation speed.</td></tr><tr><td>Scrollbar Handle Minimum Size  
</td><td>UInt32  
</td><td>The minimum height (for vertical scrollbar) or minimum width (for horizontal scrollbar) of the handle in pixels.</td></tr><tr><td>Scrollbar Visibility  
</td><td>ScrollbarVisibility::Enum (Automatic, Collapsed, Visible)</td><td>Configure the visibility of the scrollbar. By default it is set to Automatic which will determine the visibility based on the actual content.</td></tr><tr><td>Scrollbar Min Movement to Scrolling  
</td><td>UInt32  
</td><td>Minimum distance a touch gesture needs to move to start scrolling.</td></tr><tr><td>Items  
</td><td>ItemsType  
</td><td>The items property is used for binding of dynamic items. It can only be set via databinding. Only one visible list control should be bound to a fragment list in the model. Otherwise the list fragments in the model are not able to provide data for both list controls. Use a separate list model that is filled with the same data if such a use case is required.</td></tr><tr><td>Blend Type  
</td><td>BlendType::Enum</td><td>The blend type that will be set.</td></tr></tbody></table>

<p class="callout info">For a more advanced application and extended functionality of the list control, please also see the [<span style="color: rgb(230, 126, 35);">List Control - Snapping Mechanism</span>](https://doc316en.candera.eu/books/controls-and-behaviors/page/list-control-snapping-mechanism).</p>

---

#### MultiStateButton

The MultiStateButton Control offers an easy way to define all different states of a button. Additionally the MultiStateButton provides a value for the number of different representations (images). Each click increases this value (value cycles when reaching the maximum). Corresponding to this value the current image of the Button will be chosen out of an array of images.

Similar to the TextButton also the MultistateButton offers a TextNode which can be modified via the Text and the Text Style properties.

The functionality of the MultiStateButton can be edited in the Behaviors panel or in the EventHandler Tab (see also chapter <span style="color: rgb(230, 126, 35);">[EventHandler Tab](https://doc316en.candera.eu/books/controls-and-behaviors/page/eventhandler-tab)</span>). An EventHandler that checks for the Value Changed Event will perform the user defined action corresponding to the current value.

This functionality is similar to the <span style="color: rgb(230, 126, 35);">[CheckBox ](#bkmrk-checkbox)</span>(when reacting on a value change). A corresponding sample configuration of the Event Handler is given in the<span style="color: rgb(230, 126, 35);"> [CheckBox section](#bkmrk-checkbox)</span>.

**Properties**

<table border="1" id="bkmrk-property-name-type-d-23" style="border-collapse: collapse; width: 100%; height: 461.467px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 29.4069%;"></col><col style="width: 45.5931%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**</td></tr><tr style="height: 63.0667px;"><td style="height: 63.0667px;">Enabled</td><td style="height: 63.0667px;">bool</td><td style="height: 63.0667px;">If set to false it will not react on focus events and does not have to support different visualizations for the different states.</td></tr><tr style="height: 46.2667px;"><td style="height: 46.2667px;">Focusable  
</td><td style="height: 46.2667px;">bool  
</td><td style="height: 46.2667px;">If true, the control is focusable. Otherwise the control can not be focued.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Current State  
</td><td style="height: 29.4667px;">Variant  
</td><td style="height: 29.4667px;">Current state of the MultiStateButton (starts with 0).</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Maximum State  
</td><td style="height: 29.4667px;">bool/Variant  
</td><td style="height: 29.4667px;">Maximum value of MultiStateButton (starts with 0).</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Text  
</td><td style="height: 29.4667px;">String  
</td><td style="height: 29.4667px;">Text of the Button.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Text Style  
</td><td style="height: 29.4667px;">Candera::TextRendering::Style</td><td style="height: 29.4667px;">The Style that will be set to the Text Node.</td></tr><tr style="height: 35.0667px;"><td style="height: 35.0667px;">StateImages  
</td><td style="height: 35.0667px;">list of [Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")  
</td><td style="height: 35.0667px;">A list of images which should be available for selection.</td></tr><tr style="height: 35.0667px;"><td style="height: 35.0667px;">Focused Image  
</td><td style="height: 35.0667px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="height: 35.0667px;">Image which is transparent in the middle (border). Used for the control with the current focus. Frames the entire control (including text)</td></tr><tr style="height: 35.0667px;"><td style="height: 35.0667px;">Pressed Color  
</td><td style="height: 35.0667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td style="height: 35.0667px;">The color which get multiplied to the current Button image to represent the Pressed State.</td></tr><tr style="height: 35.0667px;"><td style="height: 35.0667px;">Hovered Color  
</td><td style="height: 35.0667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td style="height: 35.0667px;">The color which get multiplied to the current Button image to represent the Hover State.</td></tr><tr style="height: 35.0667px;"><td style="height: 35.0667px;">Disabled Color  
</td><td style="height: 35.0667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td style="height: 35.0667px;">The color to set on the disabled Control.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Blend Type  
</td><td style="height: 29.4667px;">BlendType::Enum</td><td style="height: 29.4667px;">The blend type that will be set on the affected nodes.</td></tr></tbody></table>

---

#### TouchIndication

The TouchIndication indicates the location of touch events. The indicator appears offset from the touch location by its distance to the origin point in the scene. Furthermore on and off animations can be set for animating the TouchIndication.

Also an area can be defined where the TouchIndication is allowed to take place.

<div drawio-diagram="5503"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1711701638.png" alt=""/></div>

<p class="callout info">The Indicators offset to the touch position is set by the offset to the origin point of the scene (0,0). So if the TouchIndication should be centered at the touch position be sure to position the TouchIndication as shown in the image beneath.</p>

<div drawio-diagram="5514"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1711723158.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-24" style="border-collapse: collapse; width: 100%; height: 245.734px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 29.4069%;"></col><col style="width: 45.5931%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**</td></tr><tr style="height: 10px;"><td style="height: 10px;">Touchable Id</td><td style="height: 10px;">String</td><td style="height: 10px;">Can be packaged into an event or message to identify its sender.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">On Animation  
</td><td style="height: 29.4667px;">Animation  
</td><td style="height: 29.4667px;">Optional animation played on placing a touch (touch Down). Note: This controls modifies its own Position to indicate the touch location. Please avoid animating its position.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Off Animation  
</td><td style="height: 29.4667px;">Animation  
</td><td style="height: 29.4667px;">Optional animation played on releasing the touch (touch Up). The indicator will be hidden after the animation stops (its rendering will be disabled). Note: This controls modifies its own Position to indicate touch location. Please avoid animating its position.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Hide Indicator On Move  
</td><td style="height: 29.4667px;">bool  
</td><td style="height: 29.4667px;">Hide the touch indicator when a move is detected, otherwise the indicator will stay visible during movement until the finger is lifted from the screen.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Touch Area Node  
</td><td style="height: 29.4667px;">Node  
</td><td style="height: 29.4667px;">Limits to the Touch Area Node's bounding rectangle - the area the Touch Indication Behavior indicates touch on.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Camera  
</td><td style="height: 29.4667px;">Camera Node  
</td><td style="height: 29.4667px;">The camera used to render the touch indicator. Will be used to correctly match touch position with object position in case the camera has a position offset.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Image  
</td><td style="height: 29.4667px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="height: 29.4667px;">The image BitmapActionBehavior will set on RenderNode.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Blend Type  
</td><td style="height: 29.4667px;">BlendType::Enum</td><td style="height: 29.4667px;">The blend type that will be set on the affected nodes.</td></tr></tbody></table>

---

#### TouchIndication3D

Indicates the location of touch events in a 3D scene.

The minimum configuration required for TouchIndication3D includes setting its camera property. Optional on and off animations can be set for animating the TouchIndication.

**Properties**

<table border="1" id="bkmrk-property-name-type-d-25" style="border-collapse: collapse; width: 100%; height: 245.734px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 29.4069%;"></col><col style="width: 45.5931%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**</td></tr><tr style="height: 10px;"><td style="height: 10px;">On Animation</td><td style="height: 10px;">Animation</td><td style="height: 10px;">Optional animation played on placing a touch (touch Down). Note: This controls modifies its own Position to indicate the touch location. Please avoid animating its position.</td></tr><tr><td>Touchable Id  
</td><td>String  
</td><td>Can be packaged into an event or message to identify its sender.</td></tr><tr><td>Off Animation  
</td><td>Animation  
</td><td>Optional animation played when the indicator is hidden.</td></tr><tr><td>Hide Indicator On Move  
</td><td>bool  
</td><td>Hide the touch indicator when a move is detected, otherwise the indicator will stay visible during movement until the finger is lifted from the screen.</td></tr><tr><td>Camera  
</td><td>Camera Node  
</td><td>TouchIndication3D modifies its own position to place itself in front of this camera so to appear under the touch location on the screen. Disclamer: The minimum configuration required for TouchIndication3D includes setting its camera property.</td></tr><tr><td>Touch Area Node  
</td><td>Node  
</td><td>The node whose area the Touch Indication Behavior should indicate touch events on.</td></tr><tr><td>Distance From Camera  
</td><td>Float  
</td><td>How far from the camera should the touch indication node be rendered.</td></tr><tr><td>Blend Type  
</td><td>BlendType::Enum</td><td>The blend type that will be set.</td></tr></tbody></table>

---

#### TouchIndication3DMarker

The TouchIndication3D uses the TouchIndication3DMarker as TouchIndication3DAnchor. The TouchIndication3DMarker's function is to visually mark the location of a detected touch.

<div drawio-diagram="5504"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1711704195.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-26" style="border-collapse: collapse; width: 100%; height: 245.734px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 29.4069%;"></col><col style="width: 45.5931%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**</td></tr><tr style="height: 10px;"><td>Blend Type  
</td><td>BlendType::Enum</td><td>The blend type that will be set.</td></tr></tbody></table>

# Common

#### Breadcrumb

A Breadcrumb shows the history/flow through the screen hierarchy and allows user, for example, to navigate between scenes using breadcrumb's elements. As a part of breadcrumb it's possible to use all elements that contain text control (for example Text, TextValue or TextButton).

For each breadcrumb element (for example a text button) user should assign a proper <span style="color: rgb(230, 126, 35);">[Breadcrumb Action](https://doc316en.candera.eu/link/582#bkmrk-breadcrumb-action)</span> in its behavior list.

It is possible to create your own control for your own needs (e.g. adding a separator between items), that will work properly with the breadcrumb. Remember to add *breadcrumb action* behavior in own control.

<p class="callout info">When breadcrumb gets more value than it can display it will always collapse elements, replacing the display of the name with the ellipsis text (e.g. three dots). First element is always fully visible.</p>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-3" style="border-collapse: collapse; width: 100%; height: 147.334px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">State Machine Node</td><td style="height: 29.4667px;">Node</td><td style="height: 29.4667px;">State machine node.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Ellipsis Text  
</td><td style="height: 29.4667px;">String  
</td><td style="height: 29.4667px;">When more elements are added than the breadcrumb can show, then one element will be replaced with the text from this field (collapse effect).</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Path Delimiter  
</td><td style="height: 29.4667px;">String  
</td><td style="height: 29.4667px;">Tag that separates elements contained in a path.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Blend Type  
</td><td style="height: 29.4667px;">BlendType::Enum</td><td style="height: 29.4667px;">The blend type that will be set.</td></tr></tbody></table>

<p class="callout info">Breadcrumb is not a standalone control, it does not trigger internally any scene transitions so it should be always connected with external state machine. For that purpose, breadcrumb property *State Machine Node* should be set to a node that contains a *State Machine* behavior. Please check out the [<span style="color: rgb(230, 126, 35);">workflow</span>](https://doc316en.candera.eu/books/controls-and-behaviors/page/breadcrumb-statemachine-workflow) chapter for more information.  
</p>


---

#### Menu Icon

The main rationale behind the MenuIcon Control is an encapsulation and abstraction of an “icon” like in graphical environments of most known operating systems. It stores a bitmap and a string (label) together and provides single configuration of common behavior like positioning or highlighting.

It is designed to use inside the MenuItem Control and most probably one would like to use the MenuItem instead of plain MenuIcon.

<div drawio-diagram="5505"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1711706885.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d" style="border-collapse: collapse; width: 100%; height: 276.534px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr style="height: 35.0667px;"><td style="height: 35.0667px;">Image</td><td style="height: 35.0667px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="height: 35.0667px;">The image to set on the effect.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Label  
</td><td style="height: 29.4667px;">String  
</td><td style="height: 29.4667px;">The Text that will be set to the Text Node.</td></tr><tr style="height: 10px;"><td style="height: 10px;">Label Color  
</td><td style="height: 10px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td style="height: 10px;">The color of the text.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Label Style  
</td><td style="height: 29.4667px;">Candera::TextRendering::Style</td><td style="height: 29.4667px;">The Style that will be used.</td></tr><tr style="height: 29.4667px;"><td class="align-left" style="width: 24.2274%; height: 46.2667px;">Label Trimming  
</td><td style="width: 21.1386%; height: 46.2667px;">Enum (None, Ellipsis, Custom Text)</td><td style="height: 29.4667px;">Trimming defines the behavior to employ when content overflows the content area.</td></tr><tr style="height: 37.8667px;"><td style="height: 37.8667px;">Background Image  
</td><td style="height: 37.8667px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="height: 37.8667px;">The image to set on the effect.</td></tr><tr style="height: 46.2667px;"><td style="height: 46.2667px;">Background Enable Rendering  
</td><td style="height: 46.2667px;">bool  
</td><td style="height: 46.2667px;">If true, Rendering is enabled.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Blend Type  
</td><td style="height: 29.4667px;">BlendType::Enum</td><td style="height: 29.4667px;">The blend type that will be set on the affected nodes.</td></tr></tbody></table>

---

#### Mesh2D

Performs a perspective projection of a 3D rotated effect (e.g. Bitmap or SolidColor effects) based on the configured origin, rotation and field of view.

**Properties**

<table border="1" id="bkmrk-property-name-type-d-1" style="border-collapse: collapse; width: 100%; height: 176.8px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr><td>Mesh Rotation</td><td>Float</td><td>Defines the rotation angle in degree around configured rotation axis at the configured origin.</td></tr><tr><td>Camera Distance  
</td><td>Float  
</td><td>Defines a normalized camera distance (the projection is based on a normalized geometry of width and height 1) with a default value of 1. </td></tr><tr><td>Rotation Axis  
</td><td>Candera::Vector3  
</td><td>Defines the axis (default is the y axis) for the rotation as a 3D direction vector (the vector will be internally normalized).</td></tr><tr><td>Field of View  
</td><td>Float  
</td><td>The area on the Y axis view field in degrees. It influences the perspective distortion of the projection. Higher angles will result in more distorted projection. Lower angles will result in less perspective distorted projections. The angle has to be higher than 0 and less than 180.</td></tr><tr><td>Fit Strategy  
</td><td>Enum (None, FitTopActualSize, FitToMaximumSize)  
</td><td>Defines how the perspective projected mesh should fit into the original boundaries.</td></tr><tr><td>Horizontal Origin  
</td><td>Enum (Left, Center, Right, Custom)  
</td><td>The origin influences where the rotation is performed and how the perspective projection looks. It is defined as a normalized (bitmap resolution independent) origin on the y axis as Left (0), Center (0.5), Right (1.0) or Custom (see CustomHorizontalOrigin).</td></tr><tr><td>Vertical Origin  
</td><td>Enum (Top, Center, Bottom, Custom)  
</td><td>The origin influences where the rotation is performed and how the perspective projection looks. It is defined as a normalized (bitmap resolution independent) origin on the y axis as Top (0), Center (0.5), Bottom (1.0) or Custom (see CustomVerticalOrigin).</td></tr><tr><td>Origin Offset  
</td><td>Candera::Vector2  
</td><td>In addition to the configured normalized origin this pixel based origin offset is added.</td></tr><tr><td>Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image to set on the effect.</td></tr><tr><td>Blend Type  
</td><td>BlendType::Enum</td><td>The blend type that will be set on the affected nodes.</td></tr></tbody></table>

---

#### Text

Displays a given text like a label.

It supports properties to set the Text, Text Style, Text Color, horizontal Text Alignment, flag for Multi Line, Line Spacing, flag for Word Wrap, choice for Trimming, and the used Trimming Text.

A Bindable Property is provided to set the Text by Data Binding.

<div drawio-diagram="5506"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1711717000.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-2" style="border-collapse: collapse; width: 100%; height: 176.8px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr><td>Text</td><td>String</td><td>The Text that will be set to the Text Node.</td></tr><tr><td>Text Color</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td>The color of the text.</td></tr><tr><td>Text Style</td><td>Candera::TextRendering::Style</td><td>The Text that will be set to the Text Node.</td></tr><tr><td>Text Alignment</td><td>Enum (Left, Center, Right)</td><td>The horizontal text alignment, using the culture text direction, is used to define how text will be horizontally aligned within its layout area.</td></tr><tr><td>Multiline</td><td>bool  
</td><td>If multi line is disabled then the new line control characters will be ignored and text will always be rendered in one line.</td></tr><tr><td>Line Spacing  
</td><td>UInt16  
</td><td>Defines the distance between the baselines of successive lines of text.</td></tr><tr><td>Word Wrap  
</td><td>bool  
</td><td>If word wrapping is enabled then the lines that exceed the client area will be split during arrangement into multiple lines.</td></tr><tr><td>Trimming  
</td><td>Enum (None, Ellipsis, Custom Text)</td><td>Trimming defines the behavior to employ when content overflows the content area.</td></tr><tr><td>Disabled Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td>The color to set on the effect of the Text.</td></tr><tr><td>Blend Type  
</td><td>BlendType::Enum</td><td>The blend type that will be set.</td></tr></tbody></table>

---

#### AnalogClock

Represents an analog clock with images for the certain needles (hours, minutes, seconds). A data-bound value from the Player can be used to represent the current time. To see how to use the data-binding in combination with the clock please see [<span style="color: rgb(230, 126, 35);">GettingStartedControls Part 4</span>](https://doc316en.candera.eu/link/311#bkmrk-page-title)

There are properties to customize the visual representation of the analog clock. Every needle can be replaced by a custom image, as well as the background-image. A pivot-offset needs to be applied to the needle-images to be able to rotate them around the correct pivot point.

<div drawio-diagram="5507"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1711717247.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-4" style="border-collapse: collapse; width: 100%; height: 176.8px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr><td>Time</td><td>Variant</td><td>Specifies the type and the value to pass onto Process Value Behavior.</td></tr><tr><td>Offset In Minutes  
</td><td>Int32  
</td><td>Offset in minutes to add to time (i.e. for different time zones).</td></tr><tr><td>Show Seconds  
</td><td>bool  
</td><td>If true, seconds will be shown.</td></tr><tr><td>Seconds Needle Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image to set on the effect.</td></tr><tr><td>Minutes Needle Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image to set on the effect.</td></tr><tr><td>Hours Needle Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image to set on the effect.</td></tr><tr><td>Face Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image to set on the effect.</td></tr><tr><td>Blend Type  
</td><td>BlendType::Enum</td><td>The blend type that will be set on the affected nodes.</td></tr></tbody></table>

---

#### DigitalClock

Represents a digital clock, whereas the time-values (hours, minutes, seconds) are rendered as text. A data-bound value from the Player can be used to represent the current time. The control offers properties to customize the clock , like showing the hours in 12h or 24h. To see how to use the data-binding in combination with the clock please see <span style="color: rgb(230, 126, 35);">[GettingStartedControls Part 4](https://doc316en.candera.eu/link/311#bkmrk-page-title)</span>

<span style="color: rgb(0, 0, 0);">The remaining properties are there to customize the visual representation of the digital clock. For every text-node a color and text-style can be set.</span>

<div drawio-diagram="5509"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1711718906.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-5" style="border-collapse: collapse; width: 100%; height: 559.867px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Time</td><td style="height: 29.4667px;">Variant</td><td style="height: 29.4667px;">Specifies the type and the value to pass onto Process Value Behavior.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Offset In Minutes  
</td><td style="height: 29.4667px;">Int32  
</td><td style="height: 29.4667px;">Offset in minutes to add to time (i.e. for different time zones).</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Show Full 24 Hours  
</td><td style="height: 29.4667px;">bool  
</td><td style="height: 29.4667px;">If true, hours will be shown from 0-23, otherwise in AM/PM format.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">AM Text  
</td><td style="height: 29.4667px;">String  
</td><td style="height: 29.4667px;">The string of the AM label.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">PM Text  
</td><td style="height: 29.4667px;">String  
</td><td style="height: 29.4667px;">The string of the PM label.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Show Seconds  
</td><td style="height: 29.4667px;">bool  
</td><td style="height: 29.4667px;">If true, seconds will be shown.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Hours Text Style  
</td><td style="height: 29.4667px;">Candera::TextRendering::Style</td><td style="height: 29.4667px;">The Style that will be set to the Text Node.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Minutes Colon Text Style  
</td><td style="height: 29.4667px;">Candera::TextRendering::Style</td><td style="height: 29.4667px;">The Style that will be set to the Text Node.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Minutes Text Style  
</td><td style="height: 29.4667px;">Candera::TextRendering::Style</td><td style="height: 29.4667px;">The Style that will be set to the Text Node.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Seconds Colon Text Style  
</td><td style="height: 29.4667px;">Candera::TextRendering::Style</td><td style="height: 29.4667px;">The Style that will be set to the Text Node.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Seconds Text Style  
</td><td style="height: 29.4667px;">Candera::TextRendering::Style</td><td style="height: 29.4667px;">The Style that will be set to the Text Node.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">AM PM Text Style  
</td><td style="height: 29.4667px;">Candera::TextRendering::Style</td><td style="height: 29.4667px;">The Style that will be set to the Text Node.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Hours Color  
</td><td style="height: 29.4667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td style="height: 29.4667px;">The color to set on the effect.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Minutes Colon Color  
</td><td style="height: 29.4667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td style="height: 29.4667px;">The color to set on the effect.</td></tr><tr><td>Minutes Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td>The color to set on the effect.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Seconds Colon Color  
</td><td style="height: 29.4667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td style="height: 29.4667px;">The color to set on the effect.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Seconds Color  
</td><td style="height: 29.4667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td style="height: 29.4667px;">The color to set on the effect.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">AM PM Color</td><td style="height: 29.4667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td style="height: 29.4667px;">The color to set on the effect.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Blend Type</td><td style="height: 29.4667px;">BlendType::Enum</td><td style="height: 29.4667px;">The blend type that will be set.</td></tr></tbody></table>

---

#### ProgressBar

The ProgressBar represents a bar that in- or decreases in its layout-size depending on the input-value.

Any value change is animated by interpolating intermediate values.

Images for background and bar can be set, whereas for the bar-image a nine-patch image is recommended.

<div drawio-diagram="5510"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1711719428.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-6" style="border-collapse: collapse; width: 100%; height: 176.8px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr><td>Value</td><td> </td><td>The current value of the Progress Bar.</td></tr><tr><td>Minimum  
</td><td>bool/Variant  
</td><td>Minimum value</td></tr><tr><td>Maximum  
</td><td>bool/Variant  
</td><td>Maximum value</td></tr><tr><td>Animation Mode  
</td><td>Enum (SpeedBased, TimeBased, Instant)  
</td><td>Animation mode sets a specific interpolation type.</td></tr><tr><td>Value Change Per Second  
</td><td>Float  
</td><td>How many values per second become interpolated.</td></tr><tr><td>Filter Time Constant  
</td><td>Float  
</td><td>The moment before the value is reached, the changing speed slows down. This prevents a sudden end of movement that can be felt as artificial in some cases.</td></tr><tr><td>Bar Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image of the Progress Bar that will be scaled.</td></tr><tr><td>Background Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The background image of the Progress Bar.</td></tr><tr><td>Blend Type  
</td><td>BlendType::Enum</td><td>The blend type that will be set on the affected nodes.</td></tr></tbody></table>

---

#### FlipBook

The FlipBook flips through a list of images. Depending on the input value it renders the images in between with a given speed. The control can be used for playing animations that are stored as images.

**Properties**

<table border="1" id="bkmrk-property-name-type-d-7" style="border-collapse: collapse; width: 100%; height: 176.8px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr><td>Image Index</td><td>Variant</td><td>The index of the image to animate to.</td></tr><tr><td>Flip Speed  
</td><td>Float  
</td><td>How often in a second the images should be flipped.

*This property is only available if AnimationMode is set to "SpeedBased".*

</td></tr><tr><td>Images  
</td><td>List of [Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")  
</td><td>A list of images which should be available for flipping.</td></tr><tr><td>Upload Strategy  
</td><td>Enum (OnInit, OnDemand)  
</td><td>Specifies if images are uploaded on demand or when the behavior is instantiated. OnInit may cause an initial delay and keeps all images loaded. OnDemand avoids an initial delay and only keeps one image loaded.</td></tr><tr><td>Blend Type</td><td>BlendType::Enum</td><td>The blend type that will be set on the affected nodes.</td></tr><tr><td>Animation Mode  
</td><td>Enum (SpeedBased, TimeBased, Instant)  
</td><td>Animation mode sets a specific interpolation type.</td></tr></tbody></table>

**How to Add Images**

Import the image resources to be set into *one single folder* of the SceneComposer solution.

1. Select the FlipBook Control in your scene
2. In the Properties Panel: Click the icon \[ Select folder containing images \] in the \[ Images \] section of the FlipBook's Properties.
3. This will open the \[ Choose Item \] dialog.
4. Select a folder that contains the image resource to be set, and click the \[ OK \] button.
5. All image files contained in the selected folder will be set as images of the FlipBook control.
6. The images are ordered alphabetically by file name. They can be re-ordered manually as necessary using the up and down arrow buttons.

<div drawio-diagram="5562"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712909527.png" alt=""/></div>

**Animation Mode**

The *AnimationMode* property can be set to *SpeedBased*, *TimeBased* or *Instant*.

<table border="1" id="bkmrk-value-description-sp" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 15.6174%;"></col><col style="width: 84.5063%;"></col></colgroup><tbody><tr><td>**Value**  
</td><td>**Description**  
</td></tr><tr><td>SpeedBased  
</td><td>Starting with the image configured in property *Image Index,* the FlipBook's images are flipped through one by one until it reaches the image of the received destination value. The destination value is received e.g. by a *Value* Behavior or a *SwitchImage* Behavior. (see also [SwitchImage Example](https://doc316en.candera.eu/books/controls-and-behaviors/page/examples-using-predefined-behaviors#bkmrk-switch-image-example))

The speed of the flipped images can be configured in property *FlipSpeed.* It defines the frames/images displayed per second.

</td></tr><tr><td>TimeBased  
</td><td>Starting with the image configured in property *Image Index*, the FlipBook's images are flipped though one by one until it reaches the image of the received destination value. The destination value is received e.g. by a *Value* Behavior or a *SwitchImage* Behavior. (see also [SwitchImage Example](https://doc316en.candera.eu/books/controls-and-behaviors/page/examples-using-predefined-behaviors#bkmrk-switch-image-example))

The speed of the flipped images is defined by the InterpolationTime. It defines the time (in ms), which every single image will be displayed.

</td></tr><tr><td>Instant  
</td><td>Starting with the image configured in property *Image Index*, the FlipBook's image instantly switches to the image of the received destination value (without any interpolation).

AnimationMode *Instant* can be used for creating animations in SceneComposer, defining which image to display at certain key frames.

</td></tr></tbody></table>

**Create Animations Using FlipBook Control**

The FlipBook can be used to configure a set of images. These images can be animated using SceneComposer animation as follows:

1. Select the FlipBook control of your scene in the Scene Tree Panel and set the *Animation Mode* property to *Instant.*
2. Right-click on the FlipBook control in the Scene Tree Panel and choose \[ Add Animated Property... \] from the context menu.
3. Choose to animate the property \[ ImageIndex \] and select \[ Linear \] Interpolation.
4. Please note that you have now left the \[ Scene Design \] mode are now in \[ Animation Design \] mode.
5. Right click into the right side of the *Animation Value* panel and choose \[ Insert Key Frame \].
6. Configure the keyframes at timestamps 0, 1000 and 2000. Set the values 0.00, 20.00 and 0.00.
7. In the Animation Timeline panel you can check your animation. (Double-click your animation to switch to a more intuitive view.)
8. Press the button \[ Start the playback of the selected animation \] button to watch your animation. It should start from picture with index 0 and continue to picture with index 20 and then reverse (from picture with index 20 back to picture with index 0).

<div drawio-diagram="6888"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-09/drawing-5-1727447094.png" alt=""/></div>

**Result:** Animation with the FlipBook's images

[![FlipBook_loop.gif](https://doc316en.candera.eu/uploads/images/gallery/2024-09/4fPflipbook-loop.gif)](https://doc316en.candera.eu/uploads/images/gallery/2024-09/4fPflipbook-loop.gif)

---

#### Text Value

Uses a Value and a Text as format string.

Result is the formatted string. See C++ printf() function.

The value can be set directly or by an event. Event input can be provided by e.g. the Send Value as Event Behavior or the Forward Value Behavior.

<div drawio-diagram="5511"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1711721461.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-8" style="border-collapse: collapse; width: 100%; height: 176.8px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr><td>Value</td><td>Variant</td><td>The value to be formatted</td></tr><tr><td>Interval Handling  
</td><td>Enum (Limit, Cycle, Ignore)  
</td><td>Select how the behavior should react when the minimum or maximum limit is exceeded.</td></tr><tr><td>Minimum Value  
</td><td>bool/Variant  
</td><td>Minimum value</td></tr><tr><td>Maximum Value  
</td><td>bool/Variant  
</td><td>Maximum value</td></tr><tr><td>Format Text  
</td><td>String  
</td><td>The format string which includes one format specifier (beginning with %). See C printf() function.</td></tr><tr><td>Style  
</td><td>Candera::TextRendering::Style</td><td>The Style that will be used.</td></tr><tr><td>Text Alignment  
</td><td>Enum (Left, Center, Right)</td><td>The horizontal text alignment, using the culture text direction, is used to define how text will be horizontally aligned within its layout area.</td></tr><tr><td>Multiline  
</td><td>bool  
</td><td>If multi line is disabled then the new line control characters will be ignored and text will always be rendered in one line.</td></tr><tr><td>Enabled  
</td><td>bool  
</td><td>If set to false it will not react on focus events and does not have to support different visualizations for the different states.</td></tr><tr><td>Text Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td>The color which can be used from other Behaviors.</td></tr><tr><td>Disabled Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td>The color which can be used from other Behaviors.</td></tr><tr><td>Blend Type  
</td><td>BlendType::Enum</td><td>The blend type that will be set.</td></tr></tbody></table>

---

#### Tell Tale

The TellTale Control is a often used control. It's for example used for turn light indication (blinking tell tale) or seat belt indication (static on/off tell tale) in the automotive area.

In general, a telltale is a control where two image can be defined: one for the off-state and one for the on-state. It can be set to On or Off or it can be set to blinking mode (as it is needed for the turn light indication). When in blinking mode, you can configure its behavior: for how long you want the On State Image to be displayed and for how long you want the Off State Image displayed individually.

<div drawio-diagram="5512"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1711721850.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-9" style="border-collapse: collapse; width: 100%; height: 176.8px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr><td>State</td><td>Enum (On, Off, Blinking)</td><td>If set to On, sends only On value to Trigger Behaviors in the same node. If set to Off, sends only Off value to Trigger Behaviors in the same node. If set to Blinking, alternates between sending On or Off values. Use On Time Ms and Off Time Ms to specify the speed of blinking.</td></tr><tr><td>On Time Ms  
</td><td>UInt32  
</td><td>If State is set to Blinking, IntervalSwitchBehavior will be sending On value for On Time Ms milliseconds before switching to sending Off value.</td></tr><tr><td>Off Time Ms  
</td><td>UInt32  
</td><td>If State is set to Blinking, IntervalSwitchBehavior will be sending Off value for Off Time Ms milliseconds before switching to sending On value.</td></tr><tr><td>On State Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>Tell Tale control displays selected image on its On state.</td></tr><tr><td>Off State Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>Tell Tale control displays selected image on its Off state.</td></tr><tr><td>Blend Type  
</td><td>BlendType::Enum</td><td>The blend type that will be set on the affected nodes.</td></tr></tbody></table>

---

#### Gauge

The Gauge allows to rotate a needle on a background according to its input value. Setting a value animates the rotation from the last one. The right pivot of the needle-image can be set via the pivot hint for a proper rotation. The minimum and maximum rotation can be set in the control as well as the minimum and maximum input. Further wise interpolation properties can be set.

<div drawio-diagram="5513"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1711722177.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-10" style="border-collapse: collapse; width: 100%; height: 176.8px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr><td>Value</td><td>Variant</td><td>Specifies the input value.</td></tr><tr><td>Input Min  
</td><td>bool/Variant  
</td><td>The smallest possible input value.</td></tr><tr><td>Input Max</td><td>bool/Variant  
</td><td>The largest possible input value.</td></tr><tr><td>Rotation Min  
</td><td>Float  
</td><td>The smallest possible angle in degrees.</td></tr><tr><td>Rotation Max  
</td><td>Float  
</td><td>The largest possible angle in degrees.</td></tr><tr><td>Background Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The background image, which might be a scale.</td></tr><tr><td>Needle Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The needle-image of the needle that will be rotated.</td></tr><tr><td>Animation Mode</td><td>  
</td><td>Animation mode sets the interpolation type (Instant, Speed-based, or Time-based).</td></tr><tr><td>Blend Type  
</td><td>BlendType::Enum</td><td>The blend type that will be set on the affected nodes.</td></tr></tbody></table>

---

# Container

#### GroupBox

The GroupBox offers an easy way to combine [<span style="color: rgb(230, 126, 35);">RadioButtons </span>](https://doc316en.candera.eu/link/1156#bkmrk-radiobutton)to a RadioButtonGroup. The special functionality of this Control is to select just one selection object ([<span style="color: rgb(230, 126, 35);">RadioButton</span>](https://doc316en.candera.eu/link/1156#bkmrk-radiobutton)) at the same time. So if one of the objects get selected, the others automatically get deselected.

Furthermore it is possible to set a node as default selected object.

<p class="callout info">There can also be a Layouter attached as child of the GroupBox to order the RadioButtons.</p>

The visual appearance can be configured with a background image (9Patch Image) which can be resized by using the Layout.

**Properties**

<table border="1" id="bkmrk-property-name-type-d-3" style="border-collapse: collapse; width: 100%; height: 147.334px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Default Selected Object</td><td style="height: 29.4667px;">Node</td><td style="height: 29.4667px;">Selection Object (e.g. RadioButton) which shall be selected by default.</td></tr><tr><td>Enable Background  
</td><td>bool  
</td><td>If true, Background gets rendered.</td></tr><tr><td>Background Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>Background Image of the GroupBox. Can be resized by Layout Settings of the Control.</td></tr><tr><td>Blend Type  
</td><td>BlendType::Enum</td><td>The blend type that will be set on the affected nodes.</td></tr></tbody></table>

# Diagnostic

#### FPS Display

The FPS Display Control provides a Text Node that displays the currently rendered frames per second, which allows to benchmark running applications.

**Properties**

<table border="1" id="bkmrk-property-name-type-d-3" style="border-collapse: collapse; width: 100%; height: 147.334px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Render Target</td><td style="height: 29.4667px;">RenderTargetType</td><td style="height: 29.4667px;">The render target which FPS should be monitored.</td></tr><tr><td>Text Style  
</td><td>Candera::TextRendering::Style</td><td>The Style that will be set to the Text Node.</td></tr><tr><td>Text Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td>The color to set.</td></tr><tr><td>Text  
</td><td>String</td><td>Text that TextBehavior will change the Node to. Supports formatting for one variable that corresponds to the value TextProcessValueBehavior2D receives.</td></tr><tr><td>Blend Type  
</td><td>BlendType::Enum</td><td>The blend type that will be set.</td></tr></tbody></table>

---

#### FrameCounterDisplay

The Frame Counter Display Control provides a Text Node that displays how many frames were already rendered.

**Properties**

<table border="1" id="bkmrk-property-name-type-d" style="border-collapse: collapse; width: 100%; height: 147.334px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr><td>Render Target  
</td><td>RenderTargetType</td><td>The render target which FPS should be monitored.</td></tr><tr><td>Text Style  
</td><td>Candera::TextRendering::Style</td><td>The Style that will be set to the Text Node.</td></tr><tr><td>Text Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td>The color to set.</td></tr><tr><td>Text  
</td><td>String</td><td>Text that TextBehavior will change the Node to. Supports formatting for one variable that corresponds to the value TextProcessValueBehavior2D receives.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Blend Type</td><td style="height: 29.4667px;">BlendType::Enum</td><td style="height: 29.4667px;">The blend type that will be set.</td></tr></tbody></table>

---

#### FrameTimeDisplay

The Frame Time Display Control provides a Text Node that displays the time it takes between frames to be rendered, which allows to benchmark running applications.

**Properties**

<table border="1" id="bkmrk-property-name-type-d-1" style="border-collapse: collapse; width: 100%; height: 147.334px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Render Target</td><td style="height: 29.4667px;">RenderTargetType</td><td style="height: 29.4667px;">The render target which FPS should be monitored.</td></tr><tr><td>Text Style  
</td><td>Candera::TextRendering::Style</td><td>The Style that will be set to the Text Node.</td></tr><tr><td>Text Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td>The color to set.</td></tr><tr><td>Text  
</td><td>String</td><td>Text that TextBehavior will change the Node to. Supports formatting for one variable that corresponds to the value TextProcessValueBehavior2D receives.</td></tr><tr><td>Blend Type  
</td><td>BlendType::Enum</td><td>The blend type that will be set.</td></tr></tbody></table>

---

#### FPSDisplay3D

The FPS Display 3D Control provides a CanvasText that displays the currently rendered frames per second, which allows to benchmark running applications. This control is available for 3D scenes.

**Properties**

<table border="1" id="bkmrk-property-name-type-d-2" style="border-collapse: collapse; width: 100%; height: 147.334px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Render Target</td><td style="height: 29.4667px;">RenderTargetType</td><td style="height: 29.4667px;">The render target which FPS should be monitored.</td></tr><tr><td>Text Style  
</td><td>Candera::TextRendering::Style</td><td>The Style that will be set to the Text Node.</td></tr><tr><td>Text Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td>The color to set.</td></tr><tr><td>Text  
</td><td>String</td><td>Text that TextBehavior will change the Node to. Supports formatting for one variable that corresponds to the value TextProcessValueBehavior2D receives.</td></tr><tr><td>Blend Type  
</td><td>BlendType::Enum</td><td>The blend type that will be set.</td></tr></tbody></table>

---

#### FrameCounterDisplay3D

The Frame Counter Display 3D Control provides a CanvasText that displays how many frames were already rendered. This control is available for 3D scenes.

**Properties**

<table border="1" id="bkmrk-property-name-type-d-4" style="border-collapse: collapse; width: 100%; height: 147.334px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr><td>Render Target  
</td><td style="height: 29.4667px;">RenderTargetType</td><td>The render target which FPS should be monitored.</td></tr><tr><td>Text Style  
</td><td>Candera::TextRendering::Style</td><td>The Style that will be set to the Text Node.</td></tr><tr><td>Text Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td>The color to set.</td></tr><tr><td>Text  
</td><td>String</td><td>Text that TextBehavior will change the Node to. Supports formatting for one variable that corresponds to the value TextProcessValueBehavior2D receives.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Blend Type</td><td style="height: 29.4667px;">BlendType::Enum</td><td style="height: 29.4667px;">The blend type that will be set.</td></tr></tbody></table>

---

#### FrameTimeDisplay3D

The Frame Time Display 3D Control provides a CanvasText that displays the time it takes between frames to be rendered, which allows to benchmark running applications. This control is available for 3D scenes.

**Properties**

<table border="1" id="bkmrk-property-name-type-d-5" style="border-collapse: collapse; width: 100%; height: 147.334px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Render Target</td><td style="height: 29.4667px;">RenderTargetType</td><td style="height: 29.4667px;">The render target which FPS should be monitored.</td></tr><tr><td>Text Style  
</td><td>Candera::TextRendering::Style</td><td>The Style that will be set to the Text Node.</td></tr><tr><td>Text Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td>The color to set.</td></tr><tr><td>Text  
</td><td>String  
</td><td>Text that TextBehavior will change the Node to. Supports formatting for one variable that corresponds to the value TextProcessValueBehavior2D receives.</td></tr><tr><td>Blend Type  
</td><td>BlendType::Enum</td><td>The blend type that will be set.</td></tr></tbody></table>

# Mixed Reality

#### VideoStream

A control that makes it possible to render a video source into a texture.

**Properties**

<table border="1" id="bkmrk-property-name-type-d-3" style="border-collapse: collapse; width: 100%; height: 239.867px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Video Source</td><td style="height: 29.4667px;">String</td><td style="height: 29.4667px;">URI to video resource (e.g. path to file or URL).

Please also see example strings below.

</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Scale To Video Source  
</td><td style="height: 29.4667px;">bool  
</td><td style="height: 29.4667px;">If enabled the texture will be resized to the video size, otherwise the size of the current texture will persist.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Flip Vertically  
</td><td style="height: 29.4667px;">bool  
</td><td style="height: 29.4667px;">Flips video vertically.</td></tr><tr style="height: 63.0667px;"><td style="height: 63.0667px;">Timestamp  
</td><td style="height: 63.0667px;">UInt32  
</td><td style="height: 63.0667px;">Can be used to bind the timestamp of the video to an external timestamp data (e.g. a camera tracker that needs to be synchronized with the video).</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Target Node  
</td><td style="height: 29.4667px;">Node</td><td style="height: 29.4667px;">The node on which the video will be displayed. If nothing is selected, the node on the anchor will be used.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Blend Type  
</td><td style="height: 29.4667px;">BlendType::Enum</td><td style="height: 29.4667px;">The blend type that will be set.</td></tr></tbody></table>

**Examples of valid Video Source strings**

<table border="1" id="bkmrk-source-example-video" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 14.1153%;"></col><col style="width: 85.9671%;"></col></colgroup><tbody><tr><td>**Source**  
</td><td>**Example Video Source String**  
</td></tr><tr><td>From asset  
</td><td>asset://Resources#Videos#VideoSourceSample1.mp4</td></tr><tr><td>From website  
</td><td>http://www.cgistudio.at/VideoSourceSample2.mp4</td></tr><tr><td>From file  
</td><td>file:///C:/Videos/Streaming/VideoSourceSample3.mp4</td></tr></tbody></table>

---

#### NavigationPath3D

Visualizes the proposed route of the navigation system. Input points are received via data binding. This control is available for 3D scenes.

**Properties**

<table border="1" id="bkmrk-property-name-type-d" style="border-collapse: collapse; width: 100%; height: 677.467px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Mesh Appearance</td><td style="height: 29.4667px;">AppearanceType</td><td style="height: 29.4667px;">The appearance used for the navigation path mesh.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Color Mode  
</td><td style="height: 29.4667px;">ColorMode::Enum (Color, RGBA)  
</td><td style="height: 29.4667px;">Select how color is displayed.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Color  
</td><td style="height: 29.4667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td style="height: 29.4667px;">Determines the color of the mesh.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Path Width  
</td><td style="height: 29.4667px;">Float  
</td><td style="height: 29.4667px;">Determines the width of the mesh.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Path Length  
</td><td style="height: 29.4667px;">Float  
</td><td style="height: 29.4667px;">Determines the length of the mesh.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Y Offset  
</td><td style="height: 29.4667px;">Float  
</td><td style="height: 29.4667px;">Applies y-offset to the mesh.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Input Points  
</td><td style="height: 29.4667px;">InputPointsType</td><td style="height: 29.4667px;">This property is used to bind input points.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Input Point Handling  
</td><td style="height: 29.4667px;">InputPointHandling::Enum (Attach, Replace)  
</td><td style="height: 29.4667px;">Determines how new input points are used for the mesh.</td></tr><tr style="height: 46.2667px;"><td style="height: 46.2667px;">Interpolation Type  
</td><td style="height: 46.2667px;">InterpolationType::Enum (Linear, Bezier, Spline, None)  
</td><td style="height: 46.2667px;">Determines which interpolation method is used.</td></tr><tr style="height: 46.2667px;"><td style="height: 46.2667px;">Path Mesh Type  
</td><td style="height: 46.2667px;">MeshType::Enum (Solid, Points)  
</td><td style="height: 46.2667px;">Determines which primitive type is used.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Advanced  
</td><td style="height: 29.4667px;">bool  
</td><td style="height: 29.4667px;">Enables advanced settings of the behavior. (see next 6 properties in this table)  
</td></tr><tr style="height: 46.2667px;"><td style="height: 46.2667px;">Input Point Min Distance</td><td style="height: 46.2667px;">Float</td><td style="height: 46.2667px;">Minimum distance of two control points. Input points that are closer together will be rejected.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Req Fragment Size  
</td><td style="height: 29.4667px;">SizeType  
</td><td style="height: 29.4667px;">Size of the fragment that is requested from the input point list.</td></tr><tr style="height: 46.2667px;"><td style="height: 46.2667px;">Req Threshold Distance  
</td><td style="height: 46.2667px;">Float  
</td><td style="height: 46.2667px;">If the distance between camera and the last point is below this threshold, request a new fragment of input points.</td></tr><tr style="height: 79.8667px;"><td style="height: 79.8667px;">Num Of Rows Per Input Point  
</td><td style="height: 79.8667px;">UInt32  
</td><td style="height: 79.8667px;">Determines how many vertex rows are used to interpolate between two input points. Increasing this value makes the mesh smoother, but will also shorten the distance of the overlay, as number of vertices per row remain constant.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Num Of Vertex Rows  
</td><td style="height: 29.4667px;">UInt32</td><td style="height: 29.4667px;">Amount of vertical vertices in the mesh.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Num Of Vertex Columns  
</td><td style="height: 29.4667px;">UInt32</td><td style="height: 29.4667px;">Amount of horizontal vertices in the mesh.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Blend Type  
</td><td style="height: 29.4667px;">BlendType::Enum</td><td style="height: 29.4667px;">The blend type that will be set.</td></tr></tbody></table>

---

#### PoiManager3D

The PoiManager handles the creation and destruction of POIs. It receives the camera position via event and uses that information to request all POIs in a certain perimeter from the model. The model responds with a list POIs from a dictionary.

For each type of POI, a custom control that serves as a template has to be created and configured with a valid Asset ID. The PoiManager can then instantiate the correct control according to the dictionary from the Asset ID as a child node. However, the PoiManager does not handle the metadata of its children, but simply forwards metadata messages to them. (For more information on metadata handling see <span style="color: rgb(230, 126, 35);">[Poi Metadata Handler](https://doc316en.candera.eu/link/639#bkmrk-poi-metadata-handler-1)</span>)

This control is available for 3D scenes.

**Properties**

<table border="1" id="bkmrk-property-name-type-d-1" style="border-collapse: collapse; width: 100%; height: 239.867px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr><td>Street Points  
</td><td>StreetPointsType  
</td><td>List of points of the street. Used to align the rotation of POIs.</td></tr><tr><td>Street Points Min Distance  
</td><td>Float  
</td><td>Minimum distance between two street points. Street points that are closer together will be rejected.</td></tr><tr><td>Req Distance  
</td><td>Float  
</td><td>The distance in which POIs are requested from the model.</td></tr><tr><td>Req Threshold Distance  
</td><td>Float  
</td><td>Once the camera has moved this specified distance a new request will be sent.</td></tr><tr><td>PoiMetaData  
</td><td>PoiMetaDataType</td><td>Use databinding to receive metadata updates for the POIs</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Poi Street Name</td><td style="height: 29.4667px;">String</td><td style="height: 29.4667px;">Name of this poi.</td></tr><tr><td>Street Control Id  
</td><td>Candera::Id  
</td><td>ID of the control that is associated with PoiName.</td></tr><tr><td>Poi Parking Name  
</td><td>String</td><td>Name of this poi.</td></tr><tr><td>Parking Control Id  
</td><td>Candera::Id</td><td>ID of the control that is associated with PoiName.</td></tr><tr><td>Poi Building Name  
</td><td>String</td><td>Name of this poi.</td></tr><tr><td>Building Control Id  
</td><td>Candera::Id</td><td>ID of the control that is associated with PoiName.</td></tr><tr><td>Blend Type  
</td><td>BlendType::Enum</td><td>The blend type that will be set.</td></tr></tbody></table>

---

#### VideoStream3D

This Control makes it possible to render a video source into a texture. The VideoStream3D Control is available for 3D scenes.

It is similar to the [<span style="color: rgb(230, 126, 35);">VideoStream </span>](https://doc316en.candera.eu/books/controls-and-behaviors/page/mixed-reality#bkmrk-videostream)Control, offering the same properties.

# Charts

#### BarGraph

Bar Graph Control is The Control that graphically displays some value depending on the length of the Bar. This is useful for visually comparing multiple values. You can set up to multiple bars on a graph. In addition, can also set a bar width, bar color and space width (between bar and bar). The value on each bar can be changed dynamically using Data Binding.

<div class="contents" id="bkmrk-the-values-for-the-b"><div class="contents"><div class="contents"><div class="textblock">- The Values for the bars are defined by a property named "Value List".
- The number of bars equals the number of items in "Value List". The maximum number of bars that can be set is 100.
- Value List can be bound via DataBinding.

</div></div></div></div><div drawio-diagram="5521"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712315474.png" alt=""/></div>

##### List Editor

The Values List property can also be set using <span style="color: rgb(0, 0, 0);">the List Editor. Clic</span>k on the "Select Item" icon at the right side of the Properties panel to open the **List Editor** and set the value of the bar in **Value** column. The total number of rows in **List Editor** represents the total number of bars. The bars are aligned from left to right, starting with the smallest row number.

<div drawio-diagram="5530"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712326795.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-3" style="border-collapse: collapse; width: 100%; height: 147.334px;"><colgroup><col style="width: 21.6255%;"></col><col style="width: 31.8753%;"></col><col style="width: 46.458%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Values List</td><td style="height: 29.4667px;">ListPropertyType&lt; FeatStd::Float &gt;  
</td><td style="height: 29.4667px;">List of values</td></tr><tr><td>Bar Width  
</td><td>UInt16  
</td><td>Width of each bar</td></tr><tr><td>Bar Height  
</td><td>UInt16  
</td><td>Height of each bar</td></tr><tr><td>Space Width  
</td><td>UInt16  
</td><td>Width of space between each bar</td></tr><tr><td>Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td>Color</td></tr></tbody></table>

---

#### LineGraph

Line Graph Control is The Control that draws a line graph in a coordinate area consisting of X and Y axes. This is useful for showing the transition of data increase / decrease. In addition, can also set a graph line width, line color and interpolation method between points to make the line graph more readable.

<div class="contents" id="bkmrk-supported-maximum-of"><div class="contents"><div class="contents"><div class="textblock">- Alpha channel is not used for color. (The line is always solid, not blend-able)
- Line chart only works with OpenGL – so native 2D devices are not supported

</div></div></div></div><div drawio-diagram="5524"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712315737.png" alt=""/></div>

##### List Editor

The Values property can also be set using the List Editor. Click on the "Select Item" icon at the right side of the Properties panel to open List Editor, and set the values for the X and Y axes. The number of rows in List Editor represents the number of plot points in the line chart.

<div drawio-diagram="5531"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712326814.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d" style="border-collapse: collapse; width: 100%; height: 147.334px;"><colgroup><col style="width: 21.0064%;"></col><col style="width: 35.2127%;"></col><col style="width: 43.7397%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Values</td><td style="height: 29.4667px;">ListPropertyType&lt; Candera::Vector2 &gt;</td><td style="height: 29.4667px;">List of values which will create the graph.</td></tr><tr><td>Line Width  
</td><td>Float  
</td><td>The line width defines the thickness of the line.</td></tr><tr><td>Interpolation  
</td><td>GraphInterpolationType::Enum (Linear, Spline)  
</td><td>Defines the interpolation type of the line chart.</td></tr><tr><td>Interpolation Steps  
</td><td>UInt16  
</td><td>Defines the amount of interpolation points between each value. This increases the spline resolution by the cost of performance and memory.</td></tr><tr><td>Color  
</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td>Color  
</td></tr></tbody></table>

# Particle Emitters

#### PointSpriteEmitter

The PointSpriteEmitter offers an easy "out of the box" way to create a Particle Effect.

As the name suggests, the appearance of a particle is similar to a [Candera::PointSprite](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_point_sprite.html "PointSprite represents a GL point primitive. The size (glPointSize) of the point is calculated by def...")

For functionality please refer to<span style="color: rgb(230, 126, 35);"> [3D Effects Solution](https://doc316en.candera.eu/link/270#bkmrk-page-title)</span>.

<div drawio-diagram="5526"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-04/drawing-5-1712323330.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-3" style="border-collapse: collapse; width: 100%; height: 580.801px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Emit Particles</td><td style="height: 29.4667px;">bool</td><td style="height: 29.4667px;">If set to true then the behavior will emit particles</td></tr><tr style="height: 46.2667px;"><td style="height: 46.2667px;">Emitter Type  
</td><td style="height: 46.2667px;">ParticleEmitterType::Enum (BoxEmitter, SphereEmitter)  
</td><td style="height: 46.2667px;">Specifies the behavior of the emitted Particle</td></tr><tr style="height: 46.2667px;"><td style="height: 46.2667px;">Maximum Particles  
</td><td style="height: 46.2667px;">UInt32  
</td><td style="height: 46.2667px;">Determines the maximum number of particles that can be displayed (Requires Scene Refresh)</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Particles Per Second  
</td><td style="height: 29.4667px;">UInt32  
</td><td style="height: 29.4667px;">Determines how many particles will be generated each second</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Life Time  
</td><td style="height: 29.4667px;">UInt32  
</td><td style="height: 29.4667px;">Determines how long a particle will live in Milliseconds</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Random Life Time  
</td><td style="height: 29.4667px;">UInt32  
</td><td style="height: 29.4667px;">Determines how long a particle will live in Milliseconds</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Velocity  
</td><td style="height: 29.4667px;">Candera::Vector3</td><td style="height: 29.4667px;">Determines the initial velocity of an emitted particle</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Gravity  
</td><td style="height: 29.4667px;">Candera::Vector3</td><td style="height: 29.4667px;">Determines the gravity effects for all emitted particles</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Random Spread  
</td><td style="height: 29.4667px;">Float  
</td><td style="height: 29.4667px;">Determines how the randomness of the initial velocity angle</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Start Size  
</td><td style="height: 29.4667px;">Float  
</td><td style="height: 29.4667px;">Determines how big a particle will be when it is emitted</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">End Size  
</td><td style="height: 29.4667px;">Float  
</td><td style="height: 29.4667px;">Determines how big a particle will be when it vanishes</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Start Color  
</td><td style="height: 29.4667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td style="height: 29.4667px;">Determines what color a particle has be when it is emitted</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">End Color  
</td><td style="height: 29.4667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td style="height: 29.4667px;">Determines what color a particle has when it vanishes</td></tr><tr style="height: 46.2667px;"><td style="height: 46.2667px;">Fade In Time  
</td><td style="height: 46.2667px;">bool/UInt32  
</td><td style="height: 46.2667px;">Determines how long a new particle needs to be alive until it is fully visible.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Fade Out Time  
</td><td style="height: 29.4667px;">bool/UInt32  
</td><td style="height: 29.4667px;">Determines how long a particle will fade out before it vanishes</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Appearance  
</td><td style="height: 29.4667px;">AppearanceType</td><td style="height: 29.4667px;">The appearance to set on the node.</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Blend Type  
</td><td style="height: 29.4667px;">BlendType::Enum</td><td style="height: 29.4667px;">The blend type that will be set.</td></tr></tbody></table>

# Core

The Core Controls are a set of [Controls](https://doc316en.candera.eu/books/controls-and-behaviors/chapter/predefined-controls "Predefined Controls"), designed to provide a minimal core set of functionality. Therefore, the Core Controls also reduce their size and provide increased performance, by limiting its feature set and reducing the number of used behaviors.

The Core Controls are designed for

- **Low-End Platforms**  
    Low memory footprint and increased performance by reduced feature set
- **Basis for custom Controls**  
    As the Core Controls cover basic features, it is easy possible to extend them for custom behavior (e.g. a specific custom behavior for a custom button) instead of stripping down a full featured Control

Please note, that the not all Controls have a Core Control variant, as it is not suitable for all available Controls.

#### CoreDial

This control is used to set values within a specified range. Rotating the knob changes the value and updates the corresponding display. The degree of rotation is adjusted according to the configured Step Size and snaps to predefined positions. The knob's state is represented by displaying an image from the BackgroundImages list corresponding to the current value. For example, in a three-step rotation setup where the minimum rotation is -45 degrees, the maximum rotation is +45 degrees, and the step size is 45 degrees, three BackgroundImages need to be assigned. Additionally, values can be adjusted using specified keyboard keys (Increment Key Code, Decrement Key Code).

In the Core version, focus and color blending functionalities are not included, and the design is specialized for basic rotational operations.

<div drawio-diagram="7972"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-02/drawing-4-1739774950.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-4" style="border-collapse: collapse; width: 100%; height: 428px;"><colgroup><col style="width: 25.0298%;"></col><col style="width: 25.0298%;"></col><col style="width: 50.0596%;"></col></colgroup><tbody><tr style="height: 29.6px;"><td style="height: 29.6px;">**Property Name**  
</td><td style="height: 29.6px;">**Type**  
</td><td style="height: 29.6px;">**Description**  
</td></tr><tr style="height: 46.4px;"><td style="height: 46.4px;">Enabled</td><td style="height: 46.4px;">bool</td><td style="height: 46.4px;">If set to false it will not react on focus events and does not have to support different visualizations for the different states.</td></tr><tr><td style="height: 46.5938px;">Focusable  
</td><td style="height: 46.5938px;">bool  
</td><td style="height: 46.5938px;">If true, the control is focusable. Otherwise the control can not be focused.</td></tr><tr style="height: 29.6px;"><td style="height: 29.6px;">Current Value  
</td><td style="height: 29.6px;">FeatStd::Int32</td><td style="height: 29.6px;">Current value for the dial.  
</td></tr><tr style="height: 29.6px;"><td style="height: 29.6px;">Step Size  
</td><td style="height: 29.6px;">FeatStd::Float</td><td style="height: 29.6px;">Step size in degrees.  
</td></tr><tr style="height: 29.6px;"><td style="height: 29.6px;">Minimum Rotation  
</td><td style="height: 29.6px;">FeatStd::Float</td><td style="height: 29.6px;">Minimum rotation of the dial.  
</td></tr><tr style="height: 29.6px;"><td style="height: 29.6px;">Maximum Rotation  
</td><td style="height: 29.6px;">FeatStd::Float</td><td style="height: 29.6px;">Maximum rotation of the dial.  
</td></tr><tr style="height: 35.2px;"><td style="height: 35.2px;">Knob Image  
</td><td style="height: 35.2px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="height: 35.2px;">The image to set on the effect.  
</td></tr><tr style="height: 35.2px;"><td style="height: 35.2px;">BackgroundImages  
</td><td style="height: 35.2px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="height: 35.2px;">A list of images which should be available for selection.</td></tr><tr style="height: 35.2px;"><td style="height: 35.2px;">Disabled Color  
</td><td style="height: 35.2px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td style="height: 35.2px;">The color which can be used from other Behaviors.  
</td></tr><tr style="height: 46.4px;"><td style="height: 46.4px;">Increment Key Code  
</td><td style="height: 46.4px;">Candera::KeyboardKeyCode::Enum</td><td style="height: 46.4px;">Check the KeyCode of the pressed key (can also be modifier).  
</td></tr><tr style="height: 46.4px;"><td style="height: 46.4px;">Decrement Key Code  
</td><td style="height: 46.4px;">Candera::KeyboardKeyCode::Enum</td><td style="height: 46.4px;">Check the KeyCode of the pressed key (can also be modifier).

</td></tr></tbody></table>

#### CoreRoll

CoreRoll is a control that provides an interface for displaying numeric values as a vertical list within a defined range, allowing users to select or change values. The current value is emphasized in the center "lens" area. An option for changing via touch, pointer is kept, but the keyboard input has been removed to optimize the control. It is optimized for lightweight and intuitive UI implementations that focus on numeric display and selection. Essential visual customizations, such as color, font style, lens display control, and unit text settings, are retained.

<div drawio-diagram="8458"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-06/drawing-4-1749888897.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-12" style="border-collapse: collapse; width: 100%; height: 1076.93px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 29.4069%;"></col><col style="width: 45.5931%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr style="height: 46.2667px;"><td style="width: 21.508%; height: 46.2667px;">Focusable  
</td><td style="width: 28.9203%; height: 46.2667px;">bool  
</td><td style="width: 49.5716%; height: 46.2667px;">If true, the control is focusable. Otherwise the control cannot be focused.  
</td></tr><tr style="height: 29.4667px;"><td style="width: 21.508%; height: 29.4667px;">Value</td><td style="width: 28.9203%; height: 29.4667px;">Float</td><td style="width: 49.5716%; height: 29.4667px;">The value which will be changed using the roll</td></tr><tr style="height: 46.2667px;"><td style="width: 21.508%; height: 46.2667px;">Min</td><td style="width: 28.9203%; height: 46.2667px;">Float</td><td style="width: 49.5716%; height: 46.2667px;">The minimum value which can be reached. This value is always smaller or equal to the MaxValue.</td></tr><tr style="height: 46.2667px;"><td style="width: 21.508%; height: 46.2667px;">Max</td><td style="width: 28.9203%; height: 46.2667px;">Float</td><td style="width: 49.5716%; height: 46.2667px;">The maximum value which can be reached. This value is always bigger or equal to MinValue</td></tr><tr style="height: 29.4667px;"><td style="width: 21.508%; height: 29.4667px;">Step</td><td style="width: 28.9203%; height: 29.4667px;">Float</td><td style="width: 49.5716%; height: 29.4667px;">The increment/decrement of the value.</td></tr><tr style="height: 46.2667px;"><td style="width: 21.508%; height: 46.2667px;">LensVisible</td><td style="width: 28.9203%; height: 46.2667px;">bool</td><td style="width: 49.5716%; height: 46.2667px;">Is lens group visible? Enables highlighting of the current value, default zooming and bordering it.   
</td></tr><tr style="height: 46.2667px;"><td style="width: 21.508%; height: 46.2667px;">Use Cyclic Roll</td><td style="width: 28.9203%; height: 46.2667px;">bool</td><td style="width: 49.5716%; height: 46.2667px;">Is roll cyclic? If true the MinValue of the Control can be reached after the MaxValue of the Control and vice versa</td></tr><tr style="height: 124.667px;"><td style="width: 21.508%; height: 124.667px;">Allow Dragging Past Limit</td><td style="width: 28.9203%; height: 124.667px;">bool</td><td style="width: 49.5716%; height: 124.667px;">Allow temporary over-dragging (dragging to blank values before first and after last entry).

If true there is visible animation of the Control being „out of range“ while moving below minimum and above maximum value.

</td></tr><tr style="height: 29.4667px;"><td style="width: 21.508%; height: 29.4667px;">Value Style</td><td style="width: 28.9203%; height: 29.4667px;">Candera::TextRendering::Style</td><td style="width: 49.5716%; height: 29.4667px;">Sets the text style for the values outside the Lens.</td></tr><tr style="height: 46.2667px;"><td style="width: 21.508%; height: 46.2667px;">Value Color</td><td style="width: 28.9203%; height: 46.2667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td style="width: 49.5716%; height: 46.2667px;">Specifies color of values in the vertical list outside the Lens</td></tr><tr style="height: 29.4667px;"><td style="width: 21.508%; height: 29.4667px;">Lens Style</td><td style="width: 28.9203%; height: 29.4667px;">Candera::TextRendering::Style</td><td style="width: 49.5716%; height: 29.4667px;">Sets the text style for the values inside the Lens.</td></tr><tr style="height: 46.2667px;"><td style="width: 21.508%; height: 46.2667px;">Unit Text</td><td style="width: 28.9203%; height: 46.2667px;">String</td><td style="width: 49.5716%; height: 46.2667px;">Text used in lens (it means: when the lens is used at all) to present a unit of the value</td></tr><tr style="height: 29.4667px;"><td style="width: 21.508%; height: 29.4667px;">Unit Style</td><td style="width: 28.9203%; height: 29.4667px;">Candera::TextRendering::Styler</td><td style="width: 49.5716%; height: 29.4667px;">Sets the text style for the Unit Text.</td></tr><tr style="height: 35.0667px;"><td style="width: 21.508%; height: 35.0667px;">Unit Margin</td><td style="width: 28.9203%; height: 35.0667px;">[Candera::Margin](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_margin.html "A non-zero margin applies space outside the element layout's width and height. The values can be set ...")</td><td style="width: 49.5716%; height: 35.0667px;">Specifies margin of the UnitText</td></tr><tr style="height: 29.4667px;"><td style="width: 21.508%; height: 29.4667px;">Unit Color</td><td style="width: 28.9203%; height: 29.4667px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td style="width: 49.5716%; height: 29.4667px;">Specifies color of the UnitText</td></tr><tr style="height: 35.0667px;"><td style="width: 21.508%; height: 35.0667px;">Decoration Image</td><td style="width: 28.9203%; height: 35.0667px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="width: 49.5716%; height: 35.0667px;">Specifies a border image of the Lens</td></tr></tbody></table>


#### CoreSpinBox

CoreSpinBox is a control that allows users to increment or decrement numeric values using up/down arrow buttons. The values can be modified via the arrow buttons only and The option for changing the values via keyboard inputs has been removed to optimize the control, with support for basic parameters such as minimum, maximum, and step size.  
This control prioritizes simplified visual presentation and user interaction. Compared to <span style="color: rgb(230, 126, 35);">[SpinBox](https://doc316en.candera.eu/link/1156#bkmrk-spinbox)</span>, it is more lightweight and suited for cases where UI performance and streamlined layout are important.

<div drawio-diagram="8459"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-06/drawing-4-1749888908.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-13" style="border-collapse: collapse; width: 100%; height: 836.453px;"><colgroup><col style="width: 24.9106%;"></col><col style="width: 29.4398%;"></col><col style="width: 45.6496%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="height: 29.7969px;">**Property Name**  
</td><td style="height: 29.7969px;">**Type**  
</td><td style="height: 29.7969px;">**Description**</td></tr><tr style="height: 63.3906px;"><td style="height: 63.3906px;">Enabled  
</td><td style="height: 63.3906px;">bool  
</td><td style="height: 63.3906px;">If set to false it will not react on focus events and does not have to support different visualizations for the different states.</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">Focusable  
</td><td style="height: 46.5938px;">bool  
</td><td style="height: 46.5938px;">If true, the control is focusable. Otherwise the control can not be focused.</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Value  
</td><td style="height: 29.7969px;">Variant</td><td style="height: 29.7969px;">The value to be formatted</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Step Size  
</td><td style="height: 29.7969px;">Variant  
</td><td style="height: 29.7969px;">Increment/Decrement step value.</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Minimum Value  
</td><td style="height: 29.7969px;">Variant</td><td style="height: 29.7969px;">Minimum value</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Maximum Value  
</td><td style="height: 29.7969px;">Variant</td><td style="height: 29.7969px;">Maximum value</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">Text Format  
</td><td style="height: 46.5938px;">String  
</td><td style="height: 46.5938px;">The format string which includes one format specifier (beginning with %). See C printf() function.</td></tr><tr style="height: 63.3906px;"><td style="height: 63.3906px;">Text Alignment  
</td><td style="height: 63.3906px;">Enum (Left, Centered, Right, Automatic)</td><td style="height: 63.3906px;">The horizontal text alignment, using the culture text direction, is used to define how text will be horizontally aligned within its layout area.</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Multiline</td><td style="height: 29.7969px;">bool</td><td style="height: 29.7969px;">If multi line is disabled then the new line control characters will be ignored and text will always be rendered in one line.</td></tr><tr style="height: 35.3906px;"><td style="height: 35.3906px;">Text Color  
</td><td style="height: 35.3906px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td style="height: 35.3906px;">Text color.</td></tr><tr style="height: 35.3906px;"><td style="height: 35.3906px;">Text Disabled Color  
</td><td style="height: 35.3906px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td style="height: 35.3906px;">Disabled text color.</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Text Style  
</td><td style="height: 29.7969px;">Candera::TextRendering::Style</td><td style="height: 29.7969px;">The Style that will be used.</td></tr><tr style="height: 35.3906px;"><td style="height: 35.3906px;">Background Image  
</td><td style="height: 35.3906px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)  
</td><td style="height: 35.3906px;">The image to set on the effect.</td></tr><tr style="height: 35.3906px;"><td style="height: 35.3906px;">Arrow Image  
</td><td style="height: 35.3906px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td class="xl67" height="18" style="height: 13.2pt; width: 253pt;" width="337">The increment/Decrement button arrow image.</td></tr><tr style="height: 35.3906px;"><td style="height: 35.3906px;">Pressed Image  
</td><td style="height: 35.3906px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td class="xl67" height="18" style="height: 13.2pt; border-top: none; width: 253pt;" width="337">The increment/Decrement button pressed image.</td></tr><tr style="height: 35.3906px;"><td style="height: 35.3906px;">Arrow Disabled Image

</td><td style="height: 35.3906px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td class="xl67" height="18" style="height: 13.2pt; border-top: none; width: 253pt;" width="337">The increment/Decrement button disabled arrow image.</td></tr></tbody></table>

---

#### <span style="color: rgb(0, 0, 0);">CoreText</span>

Displays a given text like a label. It supports properties to set the Text, Text Style, Text Color. A Bindable Property is provided to set the Text by Data Binding. And Supports language translation.

<div drawio-diagram="7975"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-02/drawing-4-1740025088.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-2" style="width: 100%;"><colgroup><col style="width: 17.3975%;"></col><col style="width: 20.25%;"></col><col style="width: 62.3286%;"></col></colgroup><tbody><tr><td>**Property Name**  
</td><td>**Type**  
</td><td>**Description**  
</td></tr><tr><td>Text</td><td>String</td><td>The Text that will be set to the Text Node.</td></tr><tr><td>Text Color</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td>The color of the text.</td></tr><tr><td>Text Style</td><td>Candera::TextRendering::Style</td><td>The Text that will be set to the Text Node.</td></tr></tbody></table>

#### <span style="color: rgb(0, 0, 0);">CoreButton</span>

Defines the basic states of a button and the actions executed when clicked. The button's appearance is determined by setting different images for each state. Additionally, text, icons, and other content can be placed inside the button, and spacing between the content and the button can be adjusted. However, the Core version does not include advanced visual effects or focus-related features.

<div drawio-diagram="7964"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-02/drawing-4-1739766300.png" alt=""/></div>


**Properties**

<table border="1" id="bkmrk-property-name-type-d" style="width: 100%;"><colgroup><col style="width: 22.0501%;"></col><col style="width: 24.9106%;"></col><col style="width: 53.0393%;"></col></colgroup><tbody><tr><td>**Property Name**  
</td><td>**Type**  
</td><td>**Description**  
</td></tr><tr><td>Enabled  
</td><td>bool  
</td><td>If this option is set to false, the button will be disabled and will no longer accept clicks.</td></tr><tr><td style="height: 46.5938px;">Focusable  
</td><td style="height: 46.5938px;">bool  
</td><td style="height: 46.5938px;">If true, the control is focusable. Otherwise the control can not be focused.</td></tr><tr><td>Normal Image</td><td>9 Patch Image</td><td>The image used as the button image.</td></tr><tr><td>Pressed Image</td><td>9 Patch Image</td><td>The image used as the button image when the pressed state is applied.  
</td></tr><tr><td>Disabled Image</td><td>9 Patch Image</td><td>The button image displayed when the button is disabled.</td></tr><tr><td>Padding</td><td>[Candera::Margin](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_margin.html "A non-zero margin applies space outside the element layout's width and height. The values can be set ...")</td><td>The padding (margin) of the button. Used when content is attached.</td></tr><tr><td>Identifier</td><td>Candera::AbstractNodePointer</td><td>The identifier used when an event such as Click Event occurs.</td></tr></tbody></table>

#### <span style="color: rgb(0, 0, 0);">CoreDigitalClock</span>

Represents a digital clock, whereas the time-values (hours, minutes, seconds) are rendered as text. A data-bound value from the player can be used to represent the current time. The control offers properties to customize the clock, like showing the hours in 12h.

<div drawio-diagram="7971"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-02/drawing-4-1739766594.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-5" style="border-collapse: collapse; width: 100%; height: 502.922px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="height: 29.7969px;">**Property Name**  
</td><td style="height: 29.7969px;">**Type**  
</td><td style="height: 29.7969px;">**Description**  
</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">Time</td><td style="height: 46.5938px;">Variant</td><td style="height: 46.5938px;">Specifies the type and the value to pass onto Process Value Behavior.</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">AM Text  
</td><td style="height: 29.7969px;">String  
</td><td style="height: 29.7969px;">The string of the AM label.</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">PM Text  
</td><td style="height: 29.7969px;">String  
</td><td style="height: 29.7969px;">The string of the PM label.</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Show Seconds  
</td><td style="height: 29.7969px;">bool  
</td><td style="height: 29.7969px;">If true, seconds will be shown.</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Show AMPM</td><td style="height: 29.7969px;">bool</td><td style="height: 29.7969px;">If ture, shows AM or PM depending on time.</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Hours Text Style  
</td><td style="height: 29.7969px;">Candera::TextRendering::Style</td><td style="height: 29.7969px;">The style set for the “hour” text.</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">Minutes Colon Text Style  
</td><td style="height: 46.5938px;">Candera::TextRendering::Style</td><td style="height: 46.5938px;">The style applied to the separator between the “hour” and “minute” text.</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Minutes Text Style  
</td><td style="height: 29.7969px;">Candera::TextRendering::Style</td><td style="height: 29.7969px;">The style set for the “minute” text.</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Seconds Text Style  
</td><td style="height: 29.7969px;">Candera::TextRendering::Style</td><td style="height: 29.7969px;">The style set for the “second” text.</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">AMPM Text Style  
</td><td style="height: 29.7969px;">Candera::TextRendering::Style</td><td style="height: 29.7969px;">The style set for the AM/PM text.</td></tr><tr style="height: 35.3906px;"><td style="height: 35.3906px;">Hours Color  
</td><td style="height: 35.3906px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td style="height: 35.3906px;">The color set for the “hour” text.</td></tr><tr style="height: 35.3906px;"><td style="height: 35.3906px;">Minutes Color  
</td><td style="height: 35.3906px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td style="height: 35.3906px;">The color set for the “minute” text.</td></tr><tr style="height: 35.3906px;"><td style="height: 35.3906px;">Seconds Color  
</td><td style="height: 35.3906px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td style="height: 35.3906px;">The color set for the “second” text.</td></tr><tr style="height: 35.3906px;"><td style="height: 35.3906px;">AM PM Color</td><td style="height: 35.3906px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td style="height: 35.3906px;">The color set for the AM/PM text.</td></tr></tbody></table>

#### CoreProgressBar

Represents a bar that changes size according to the input value. It is possible to set background and bar images, with a 9-patch image recommended for the bar. In the Core version, animation for value changes is not included, focusing solely on simple progress display functionality.

<div drawio-diagram="5510"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1711719428.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-6" style="border-collapse: collapse; width: 100%; height: 176.8px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 24.9588%;"></col><col style="width: 50.0412%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**  
</td></tr><tr><td>Value</td><td>Float</td><td>The current value of the Progress Bar.</td></tr><tr><td>Minimum  
</td><td>bool/Variant  
</td><td>Minimum value</td></tr><tr><td>Maximum  
</td><td>bool/Variant  
</td><td>Maximum value</td></tr><tr><td>Bar Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The image of the Progress Bar that will be scaled.</td></tr><tr><td>Background Image  
</td><td>[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td>The background image of the Progress Bar.</td></tr></tbody></table>

#### <span style="color: rgb(0, 0, 0);">CoreTextButton  
</span>

Defines the basic behavior of a button and the actions executed when clicked. In the Core version, visual customization features are limited, and the button's appearance is determined by the specified image and text. Properties are provided to adjust the display and style of the text. The button's behavior when pressed can be easily configured using the EventHandler.

<div drawio-diagram="7966"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-02/drawing-4-1739766412.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-15" style="width: 100%; height: 439.2px;"><colgroup><col style="width: 20.5006%;"></col><col style="width: 17.1633%;"></col><col style="width: 62.3361%;"></col></colgroup><tbody><tr style="height: 29.6px;"><td style="height: 29.6px;">**Property Name**  
</td><td style="height: 29.6px;">**Type**  
</td><td style="height: 29.6px;">**Description**</td></tr><tr style="height: 46.4px;"><td style="height: 46.4px;">Enabled  
</td><td style="height: 46.4px;">bool  
</td><td style="height: 46.4px;">If this option is set to false, the button will be disabled and will no longer accept clicks.</td></tr><tr><td style="height: 46.5938px;">Focusable  
</td><td style="height: 46.5938px;">bool  
</td><td style="height: 46.5938px;">If true, the control is focusable. Otherwise the control can not be focused.</td></tr><tr style="height: 46.4px;"><td style="height: 46.4px;">Normal Image  
</td><td style="height: 46.4px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="height: 46.4px;">The image displayed when the button is in its normal state.

</td></tr><tr style="height: 35.2px;"><td style="height: 35.2px;">Pressed Image  
</td><td style="height: 35.2px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="height: 35.2px;">The image displayed when the button is pressed.</td></tr><tr style="height: 29.6px;"><td style="height: 29.6px;">Disabled Image</td><td style="height: 29.6px;">9 Patch Image</td><td style="height: 29.6px;">The image displayed when the button is disabled.</td></tr><tr style="height: 29.6px;"><td style="height: 29.6px;">Text  
</td><td style="height: 29.6px;">String  
</td><td style="height: 29.6px;">Text to be displayed in the button.</td></tr><tr style="height: 46.4px;"><td style="height: 46.4px;">Text Style  
</td><td style="height: 46.4px;">Candera::TextRendering::Style</td><td style="height: 46.4px;">Set the style of the text.</td></tr><tr style="height: 35.2px;"><td style="height: 35.2px;">Text Enabled Color  
</td><td style="height: 35.2px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td style="height: 35.2px;">Text to be set in the text node.</td></tr><tr style="height: 35.2px;"><td style="height: 35.2px;">Text Disabled Color  
</td><td style="height: 35.2px;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html)</td><td style="height: 35.2px;">Text color when disabled.</td></tr></tbody></table>

#### <span style="color: rgb(0, 0, 0);">CoreCheckBox</span>

A simple UI element that indicates the selection status. In the Core version, the normal and selected states can be configured using a combination of text and images. The behavior when the state of this control changes can be set using the EventHandler.  
Note that features related to Focus and Blend effects are not included.

<div drawio-diagram="7967"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-02/drawing-4-1739766439.png" alt=""/></div>

<span style="color: rgb(0, 0, 0);">**Properties**</span>

<table border="1" id="bkmrk-property-name-type-d-16" style="width: 100%; height: 429.719px;"><colgroup><col style="width: 19.6663%;"></col><col style="width: 21.0965%;"></col><col style="width: 59.2372%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="height: 29.7969px;"><span style="color: rgb(0, 0, 0);">**Property Name**</span>  
</td><td style="height: 29.7969px;"><span style="color: rgb(0, 0, 0);">**Type**</span>  
</td><td style="height: 29.7969px;"><span style="color: rgb(0, 0, 0);">**Description**</span></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;"><span style="color: rgb(0, 0, 0);">Enabled</span>  
</td><td style="height: 29.7969px;"><span style="color: rgb(0, 0, 0);">bool</span>  
</td><td style="height: 29.7969px;"><span style="color: rgb(0, 0, 0);">If this option is set to false, the checkbox will </span><span style="color: rgb(0, 0, 0);">not respond to clicks.  
</span>

</td></tr><tr style="height: 23.5938px;"><td style="height: 23.5938px;">Focusable  
</td><td style="height: 23.5938px;">bool  
</td><td style="height: 23.5938px;">If true, the control is focusable. Otherwise the control can not be focused.</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;"><span style="color: rgb(0, 0, 0);">Value</span>  
</td><td style="height: 46.5938px;"><span style="color: rgb(0, 0, 0);">bool/Variant</span>  
</td><td style="height: 46.5938px;"><span style="color: rgb(0, 0, 0);">Specifies the initial selection state of the checkbox (true = selected, false = not selected).</span></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;"><span style="color: rgb(0, 0, 0);">Text</span>  
</td><td style="height: 29.7969px;"><span style="color: rgb(0, 0, 0);">String</span>  
</td><td style="height: 29.7969px;"><span style="color: rgb(0, 0, 0);">The text of the checkbox.</span></td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;"><span style="color: rgb(0, 0, 0);">Text Style</span>  
</td><td style="height: 46.5938px;"><span style="color: rgb(0, 0, 0);">Candera::TextRendering::Style</span></td><td style="height: 46.5938px;"><span style="color: rgb(0, 0, 0);">The style set for the text node.</span></td></tr><tr style="height: 35.3906px;"><td style="height: 35.3906px;"><span style="color: rgb(0, 0, 0);">Normal Image</span>  
</td><td style="height: 35.3906px;"><span style="color: rgb(0, 0, 0);">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</span></td><td style="height: 35.3906px;"><span style="color: rgb(0, 0, 0);">The checkbox image displayed when in the normal state.</span></td></tr><tr style="height: 35.3906px;"><td style="height: 35.3906px;"><span style="color: rgb(0, 0, 0);">Selected Image</span>  
</td><td style="height: 35.3906px;"><span style="color: rgb(0, 0, 0);">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</span></td><td style="height: 35.3906px;"><span style="color: rgb(0, 0, 0);">The checkbox image displayed when in the selected state.</span></td></tr><tr style="height: 35.3906px;"><td style="height: 35.3906px;"><span style="color: rgb(0, 0, 0);">Normal Disabled Image</span>  
</td><td style="height: 35.3906px;"><span style="color: rgb(0, 0, 0);">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</span></td><td style="height: 35.3906px;"><span style="color: rgb(0, 0, 0);">The checkbox image displayed when in the invalid state.</span>

</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;"><span style="color: rgb(0, 0, 0);">Selected Disabled Image</span>  
</td><td style="height: 46.5938px;"><span style="color: rgb(0, 0, 0);">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</span></td><td style="height: 46.5938px;"><span style="color: rgb(0, 0, 0);">The image of a selected checkbox in the invalid state.</span></td></tr><tr style="height: 35.3906px;"><td style="height: 35.3906px;"><span style="color: rgb(0, 0, 0);">Normal Text Color</span></td><td style="height: 35.3906px;"><span style="color: rgb(0, 0, 0);">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</span></td><td style="height: 35.3906px;"><span style="color: rgb(0, 0, 0);">The text color when in the valid state.</span></td></tr><tr style="height: 35.3906px;"><td style="height: 35.3906px;"><span style="color: rgb(0, 0, 0);">Disabled Text Color</span></td><td style="height: 35.3906px;"><span style="color: rgb(0, 0, 0);">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</span></td><td style="height: 35.3906px;"><span style="color: rgb(0, 0, 0);">The text color when in the invalid state.</span></td></tr></tbody></table>

#### <span style="color: rgb(0, 0, 0);">CoreToggleButton</span>

A simple UI element that toggles the button state. It is typically used to enable or disable specific functions. The structure is simple, allowing you to configure two images corresponding to the ON/OFF states of the toggle and their associated text. The behavior when the button is clicked can be set in the EventHandler tab. Note that features related to Focus and Blend effects are not included.

<div drawio-diagram="7968"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-02/drawing-4-1739766464.png" alt=""/></div>

<span style="color: rgb(0, 0, 0);">**Properties**</span>

<table border="1" id="bkmrk-property-name-type-d-17" style="width: 100%; height: 454.4px;"><colgroup><col style="width: 22.1692%;"></col><col style="width: 22.646%;"></col><col style="width: 55.1847%;"></col></colgroup><tbody><tr style="height: 29.6px;"><td style="height: 29.6px;"><span style="color: rgb(0, 0, 0);">**Property Name**</span>  
</td><td style="height: 29.6px;"><span style="color: rgb(0, 0, 0);">**Type**</span>  
</td><td style="height: 29.6px;"><span style="color: rgb(0, 0, 0);">**Description**</span></td></tr><tr style="height: 46.4px;"><td style="height: 46.4px;"><span style="color: rgb(0, 0, 0);">Enabled</span>  
</td><td style="height: 46.4px;"><span style="color: rgb(0, 0, 0);">bool</span>  
</td><td style="height: 46.4px;"><span style="color: rgb(0, 0, 0);">If this option is set to disabled, the toggle button will be disabled and will no longer accept click operations.</span></td></tr><tr><td style="height: 46.5938px;">Focusable  
</td><td style="height: 46.5938px;">bool  
</td><td style="height: 46.5938px;">If true, the control is focusable. Otherwise the control can not be focused.</td></tr><tr style="height: 29.6px;"><td style="height: 29.6px;"><span style="color: rgb(0, 0, 0);">Value</span>  
</td><td style="height: 29.6px;"><span style="color: rgb(0, 0, 0);">bool/Variant</span>  
</td><td style="height: 29.6px;"><span style="color: rgb(0, 0, 0);">Specify the initial state of the toggle (true = enabled, false = disabled).</span></td></tr><tr style="height: 46.4px;"><td style="height: 46.4px;"><span style="color: rgb(0, 0, 0);">First Text</span>  
</td><td style="height: 46.4px;"><span style="color: rgb(0, 0, 0);">String</span>  
</td><td style="height: 46.4px;"><span style="color: rgb(0, 0, 0);">The text that will be displayed when the toggle is set to On (the first toggle image).</span></td></tr><tr style="height: 46.4px;"><td style="height: 46.4px;"><span style="color: rgb(0, 0, 0);">Second Text</span>  
</td><td style="height: 46.4px;"><span style="color: rgb(0, 0, 0);">String</span>  
</td><td style="height: 46.4px;"><span style="color: rgb(0, 0, 0);">The text that will be displayed when the toggle is set to Off (the second toggle image).</span></td></tr><tr><td><span style="color: rgb(0, 0, 0);">Text Style</span>  
</td><td><span style="color: rgb(0, 0, 0);">Candera::TextRendering::Style</span></td><td><span style="color: rgb(0, 0, 0);">The style set for the text node.</span></td></tr><tr style="height: 46.4px;"><td style="height: 46.4px;"><span style="color: rgb(0, 0, 0);">First Image</span>  
</td><td style="height: 46.4px;"><span style="color: rgb(0, 0, 0);">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</span></td><td style="height: 46.4px;"><span style="color: rgb(0, 0, 0);">The image that will be displayed when the toggle is set to On (the first toggle image).</span></td></tr><tr style="height: 46.4px;"><td style="height: 46.4px;"><span style="color: rgb(0, 0, 0);">Second Image</span>  
</td><td style="height: 46.4px;"><span style="color: rgb(0, 0, 0);">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</span></td><td style="height: 46.4px;"><span style="color: rgb(0, 0, 0);">The image displayed when the toggle is in the Off state (second toggle image).</span></td></tr><tr style="height: 46.4px;"><td style="height: 46.4px;"><span style="color: rgb(0, 0, 0);">First Disabled Image</span>  
</td><td style="height: 46.4px;"><span style="color: rgb(0, 0, 0);">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</span></td><td style="height: 46.4px;"><span style="color: rgb(0, 0, 0);">The image displayed when the toggle is in the On state when it is disabled.</span></td></tr><tr style="height: 46.4px;"><td style="height: 46.4px;"><span style="color: rgb(0, 0, 0);">Second Disabled Image</span>  
</td><td style="height: 46.4px;"><span style="color: rgb(0, 0, 0);">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</span></td><td style="height: 46.4px;"><span style="color: rgb(0, 0, 0);">The image displayed when the toggle is in the Off state when it is disabled.</span></td></tr><tr style="height: 35.2px;"><td style="height: 35.2px;"><span style="color: rgb(0, 0, 0);">Text Enabled Color</span></td><td style="height: 35.2px;"><span style="color: rgb(0, 0, 0);">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</span></td><td style="height: 35.2px;"><span style="color: rgb(0, 0, 0);">The text color when it is enabled.</span></td></tr><tr style="height: 35.2px;"><td style="height: 35.2px;"><span style="color: rgb(0, 0, 0);">Text Disabled Color</span></td><td style="height: 35.2px;"><span style="color: rgb(0, 0, 0);">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</span></td><td style="height: 35.2px;"><span style="color: rgb(0, 0, 0);">The text color when it is disabled.</span></td></tr></tbody></table>



#### <span style="color: rgb(0, 0, 0);">CoreRadioButton</span>

A simple UI element that allows the user to select one option from multiple choices. In the Core version, the normal and selected states can be configured using a combination of text and images. The behavior when the state of the CoreRadioButton control changes can be set using the EventHandler.

The functionality of the CoreRadioButton is similar to that of the CoreCheckBox, but it is designed to allow only one selection among multiple options.

<div drawio-diagram="7969"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-02/drawing-4-1739766490.png" alt=""/></div>

<span style="color: rgb(0, 0, 0);">**Properties**</span>

<table border="1" id="bkmrk-property-name-type-d-18" style="width: 100%;"><colgroup><col style="width: 19.9046%;"></col><col style="width: 25.8641%;"></col><col style="width: 54.2312%;"></col></colgroup><tbody><tr><td><span style="color: rgb(0, 0, 0);">**Property Name**</span>  
</td><td><span style="color: rgb(0, 0, 0);">**Type**</span>  
</td><td><span style="color: rgb(0, 0, 0);">**Description**</span></td></tr><tr><td><span style="color: rgb(0, 0, 0);">Enabled</span>  
</td><td><span style="color: rgb(0, 0, 0);">bool</span>  
</td><td><span style="color: rgb(0, 0, 0);">If you set this option to disabled, the radio buttons will not work and will not accept clicks.</span></td></tr><tr><td style="height: 46.5938px;">Focusable  
</td><td style="height: 46.5938px;">bool  
</td><td style="height: 46.5938px;">If true, the control is focusable. Otherwise the control can not be focused.</td></tr><tr><td><span style="color: rgb(0, 0, 0);">Text</span>  
</td><td><span style="color: rgb(0, 0, 0);">String</span>  
</td><td><span style="color: rgb(0, 0, 0);">The text of the radio buttons.</span></td></tr><tr><td><span style="color: rgb(0, 0, 0);">TextStyle</span>  
</td><td><span style="color: rgb(0, 0, 0);">Candera::TextRendering::Style</span></td><td><span style="color: rgb(0, 0, 0);">Set the style of the text.</span></td></tr><tr><td><span style="color: rgb(0, 0, 0);">Normal Image</span>  
</td><td><span style="color: rgb(0, 0, 0);">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</span></td><td><span style="color: rgb(0, 0, 0);">The image of the radio buttons displayed in the normal state.</span></td></tr><tr><td><span style="color: rgb(0, 0, 0);">Selected Image</span>  
</td><td><span style="color: rgb(0, 0, 0);">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</span></td><td><span style="color: rgb(0, 0, 0);">The image of the radio buttons displayed when selected.</span></td></tr><tr><td><span style="color: rgb(0, 0, 0);">Normal Disabled Image</span>  
</td><td><span style="color: rgb(0, 0, 0);">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</span></td><td><span style="color: rgb(0, 0, 0);">The image of the normal radio buttons in the disabled state.</span>

</td></tr><tr><td><span style="color: rgb(0, 0, 0);">Selected Disabled Image</span>  
</td><td><span style="color: rgb(0, 0, 0);">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</span></td><td><span style="color: rgb(0, 0, 0);">The image of the selected radio buttons in the disabled state.</span></td></tr><tr><td><span style="color: rgb(0, 0, 0);">Text Enabled Color</span></td><td><span style="color: rgb(0, 0, 0);">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</span></td><td><span style="color: rgb(0, 0, 0);">The color of the text in the enabled state.</span></td></tr><tr><td><span style="color: rgb(0, 0, 0);">Text Disabled Color</span></td><td><span style="color: rgb(0, 0, 0);">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</span></td><td><span style="color: rgb(0, 0, 0);">The color of the text in the disabled state.</span></td></tr><tr><td><span style="color: rgb(0, 0, 0);">Selected</span>  
</td><td><span style="color: rgb(0, 0, 0);">bool/Variant</span>  
</td><td>Specify the type and value to pass to the Process Value behavior.</td></tr></tbody></table>


#### <span style="color: rgb(0, 0, 0);">CoreTextValue</span>

Generates a formatted string by combining Value and Format Text. It supports formatting numbers and text in a manner similar to the C++ printf() function. The value can be set directly or modified through events. Events are provided through behaviors that send or transfer values.

<div drawio-diagram="7970"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-02/drawing-4-1739766548.png" alt=""/></div>

<span style="color: rgb(0, 0, 0);">**Properties**</span>

<table border="1" id="bkmrk-property-name-type-d-8" style="width: 100%;"><colgroup><col style="width: 16.9209%;"></col><col style="width: 25.6165%;"></col><col style="width: 57.4388%;"></col></colgroup><tbody><tr><td><span style="color: rgb(0, 0, 0);">**Property Name**</span>  
</td><td><span style="color: rgb(0, 0, 0);">**Type**</span>  
</td><td><span style="color: rgb(0, 0, 0);">**Description**</span>  
</td></tr><tr><td><span style="color: rgb(0, 0, 0);">Value</span></td><td><span style="color: rgb(0, 0, 0);">Variant</span></td><td><span style="color: rgb(0, 0, 0);">The value to be formatted</span></td></tr><tr><td><span style="color: rgb(0, 0, 0);">Format Text</span>  
</td><td><span style="color: rgb(0, 0, 0);">String</span>  
</td><td><span style="color: rgb(0, 0, 0);">The format string which includes one format specifier (beginning with %). See C printf() function.</span></td></tr><tr><td><span style="color: rgb(0, 0, 0);">Style</span>  
</td><td><span style="color: rgb(0, 0, 0);">Candera::TextRendering::Style</span></td><td><span style="color: rgb(0, 0, 0);">The style of the text to be used.</span></td></tr><tr><td><span style="color: rgb(0, 0, 0);">Text Color</span>  
</td><td><span style="color: rgb(0, 0, 0);">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</span></td><td><span style="color: rgb(0, 0, 0);">Specify the color of the text.</span></td></tr></tbody></table>

#### CoreSlider

This is a control where the value changes based on the position of the knob. The knob can be operated by dragging, and values can be set directly or modified through events (e.g., using the Send Value as Event Behavior).

In the Core version, focus and blend effect functionalities are not included, and the design is specialized for basic slider operations.

<div drawio-diagram="5497"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-03/drawing-5-1711110887.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-20" style="border-collapse: collapse; width: 100%; height: 630.2px;"><colgroup><col style="width: 25.0298%;"></col><col style="width: 29.4398%;"></col><col style="width: 45.6496%;"></col></colgroup><tbody><tr style="height: 29.6px;"><td style="height: 29.6px;">**Property Name**  
</td><td style="height: 29.6px;">**Type**  
</td><td style="height: 29.6px;">**Description**</td></tr><tr style="height: 63.2px;"><td style="height: 63.2px;">Enabled</td><td style="height: 63.2px;">bool</td><td style="height: 63.2px;">If set to false it will not react on focus events and does not have to support different visualizations for the different states.</td></tr><tr><td style="height: 46.5938px;">Focusable  
</td><td style="height: 46.5938px;">bool  
</td><td style="height: 46.5938px;">If true, the control is focusable. Otherwise the control can not be focused.</td></tr><tr style="height: 29.6px;"><td style="height: 29.6px;">Value  
</td><td style="height: 29.6px;">Variant  
</td><td style="height: 29.6px;">The bindable value of the slider</td></tr><tr style="height: 29.6px;"><td style="height: 29.6px;">Minimum  
</td><td style="height: 29.6px;">bool/Variant  
</td><td style="height: 29.6px;">Minimum Range</td></tr><tr style="height: 29.6px;"><td style="height: 29.6px;">Maximum  
</td><td style="height: 29.6px;">bool/Variant  
</td><td style="height: 29.6px;">Maximum Range</td></tr><tr style="height: 35.2px;"><td style="height: 35.2px;">Track Image  
</td><td style="height: 35.2px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="height: 35.2px;">The image used for the slider track.</td></tr><tr style="height: 35.2px;"><td style="height: 35.2px;">Track Disabled Image</td><td style="height: 35.2px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="height: 35.2px;">The image used for the slider track when disabled.</td></tr><tr style="height: 35.2px;"><td style="height: 35.2px;">Track Fill Image  
</td><td style="height: 35.2px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="height: 35.2px;">The image indicating the progress of the slider.</td></tr><tr style="height: 46.4px;"><td style="height: 46.4px;">Track Disabled Fill Image</td><td style="height: 46.4px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="height: 46.4px;">The image indicating the progress of the slider when disabled.</td></tr><tr style="height: 35.2px;"><td style="height: 35.2px;">Knob Normal Image  
</td><td style="height: 35.2px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="height: 35.2px;">The image used for the knob in its normal state.</td></tr><tr style="height: 35.2px;"><td style="height: 35.2px;">Knob Pressed Image  
</td><td style="height: 35.2px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="height: 35.2px;">The image used for the knob when pressed.</td></tr><tr style="height: 35.2px;"><td style="height: 35.2px;">Knob Disabled Image</td><td style="height: 35.2px;">[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")</td><td style="height: 35.2px;">The image used for the knob when disabled.</td></tr><tr style="height: 80px;"><td style="height: 80px;">Knob Center Margin  
</td><td style="height: 80px;">Candera::Margin</td><td style="height: 80px;">The center margin of the knob. Used to position the knob around the slider value. To avoid clipping issues in standalone sliders, ensure that the margin does not exceed the boundary.</td></tr><tr style="height: 47.2px;"><td style="height: 47.2px;">Track Margin

</td><td style="height: 47.2px;">Candera::Margin</td><td style="height: 47.2px;">The margin of the track. Ensures sufficient space for displaying the knob around the track.

</td></tr><tr style="height: 63.8px;"><td style="height: 63.8px;">Use Center  
</td><td style="height: 63.8px;">bool  
</td><td style="height: 63.8px;">If set to true, the knob's alignment is based on its predefined center value in the bitmap. If false, a calculated center value is used.

</td></tr></tbody></table>

#### CoreScrollView

UI component that provides a scrollable area where arbitrary nodes (including controls) can be placed. If the attached node's size exceeds the layout size of the ScrollView, a scrollbar is automatically displayed.

In the Core version, node layout functionality is not included, and the component is specialized for displaying scrollable content. Therefore, automatic alignment features like those found in lists are not provided, but freely positioned controls and nodes can be made scrollable.

<div drawio-diagram="7973"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-02/drawing-4-1739775073.png" alt=""/></div>

<div drawio-diagram="5499"></div>


**Properties**

<table border="1" id="bkmrk-property-name-type-d-21" style="border-collapse: collapse; width: 100%; height: 58.9334px;"><colgroup><col style="width: 24.9588%;"></col><col style="width: 29.4069%;"></col><col style="width: 45.5931%;"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="height: 29.4667px;">**Property Name**  
</td><td style="height: 29.4667px;">**Type**  
</td><td style="height: 29.4667px;">**Description**</td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">Vertical Scrollbar Visibility</td><td style="height: 29.4667px;">ScrollbarVisibility::Enum (Automatic, Collapsed, Visible)</td><td style="height: 29.4667px;">Configure the visibility of the scrollbar. By default it is set to Automatic which will determine the visibility based on the actual content.</td></tr><tr><td>Horizontal Scrollbar Visibility  
</td><td>ScrollbarVisibility::Enum (Automatic, Collapsed, Visible)</td><td>Configure the visibility of the scrollbar. By default it is set to Automatic which will determine the visibility based on the actual content.</td></tr></tbody></table>

#### <span style="color: rgb(0, 0, 0);">CoreMultiStateButton</span>


A UI element that allows for the easy definition of buttons with multiple states. Each click changes the state, and once the maximum value is reached, it loops back to the initial state. The corresponding image is selected based on the button's state, and the displayed text can also be modified using the Text property. The behavior of the MultiStateButton can be set in the EventHandler, and actions corresponding to the current state can be executed using the Process Value Changed Event behavior.

<div drawio-diagram="7974"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-02/drawing-4-1739943004.png" alt=""/></div>

**Properties**

<table border="1" id="bkmrk-property-name-type-d-23" style="width: 100%; height: 107.984px;"><colgroup><col style="width: 18.3552%;"></col><col style="width: 18.1168%;"></col><col style="width: 63.528%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="height: 29.7969px;">**Property Name**  
</td><td style="height: 29.7969px;">**Type**  
</td><td style="height: 29.7969px;">**Description**</td></tr><tr style="height: 18.5938px;"><td style="height: 18.5938px;">Focusable  
</td><td style="height: 18.5938px;">bool  
</td><td style="height: 18.5938px;">If true, the control is focusable. Otherwise the control can not be focused.</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Current State  
</td><td style="height: 29.7969px;">Variant  
</td><td style="height: 29.7969px;">Current state of the MultiStateButton (starts with 0).</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Maximum State  
</td><td style="height: 29.7969px;">bool/Variant  
</td><td style="height: 29.7969px;">Maximum value of MultiStateButton (starts with 0).</td></tr></tbody></table>

# Navigation

#### TurnByTurn Control

The TurnByTurn Control is designed as an overlay to provide information about the distance to the next turn in the following way:

- **Absolute distance**
    - Value and unit of absolute distance to the next turn, the value gets automatically rounded to the next 10.
- **Relative distance**
    - Bargraph indicating the distance to the next turn from 100 to 0. The colour of the bargraph can be changed if the next turn gets close.
- **Street name**
    - Name of the street related to the next turn
- **Direction icon**
    - Icon to indicate the type of the next turn

<div drawio-diagram="8653"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-11/drawing-4-1762219701.png" alt=""/></div>

##### **Properties**

<table border="1" id="bkmrk-property-name-type-d-3" style="border-collapse: collapse; width: 100%; height: 700.516px;"><colgroup><col style="width: 24.9106%;"></col><col style="width: 24.9106%;"></col><col style="width: 50.1788%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="height: 29.7969px;">**Property Name**  
</td><td style="height: 29.7969px;">**Type**  
</td><td style="height: 29.7969px;">**Description**  
</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Show Street Name</td><td style="height: 29.7969px;">bool</td><td style="height: 29.7969px;">Whether or not the street name is shown</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">Show Relative Indication  
</td><td style="height: 46.5938px;">bool  
</td><td style="height: 46.5938px;">Whether or not the bargraph indicating the relative distance to next turn is shown</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">Show Absolute Indication</td><td style="height: 46.5938px;">bool</td><td style="height: 46.5938px;">Whether or not the absolute value for the distance to the next turn is shown</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Text Style</td><td style="height: 29.7969px;">TextStyle</td><td style="height: 29.7969px;">The text style of street and distance value</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Text Style Unit</td><td style="height: 29.7969px;">TextStyle</td><td style="height: 29.7969px;">The text style of the distance unit</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Street Name</td><td style="height: 29.7969px;">String</td><td style="height: 29.7969px;">Street name</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">Distance To Turn</td><td style="height: 46.5938px;">UInt32</td><td style="height: 46.5938px;">Absolute distance to the next turn, the value is automatically rounded to the nearest 10.</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Relative Distance Value</td><td style="height: 29.7969px;">Float in range \[0, 100\]</td><td style="height: 29.7969px;">Relative distance to the next turn, indicated by the bargraph</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Distance Unit Text</td><td style="height: 29.7969px;">String</td><td style="height: 29.7969px;">Unit of the absolute value</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Direction Icon Index</td><td style="height: 29.7969px;">UInt8</td><td style="height: 29.7969px;">Index of direction icons, see also Direction Images</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">Direction Images</td><td style="height: 46.5938px;">Array of Images</td><td style="height: 46.5938px;">Array of turn by turn icons, the displayed icon is set via the "Direction Icon Index" property</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Total Bargraph Size</td><td style="height: 29.7969px;">Float</td><td style="height: 29.7969px;">Size of the total bargraph (active + background part)</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">Max Active Bargraph Size</td><td style="height: 46.5938px;">Float</td><td style="height: 46.5938px;">Maximum size of the bargraph indicating the distance ("Relative Distance Value" == 100)</td></tr><tr><td style="height: 46.5938px;">Color Change Threshold</td><td style="height: 46.5938px;">UInt8</td><td style="height: 46.5938px;">Threshold to indicate that the next turn is close, the bargraph color will change to "Bargraph Color Below Threshold"</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">Bargraph Color Normal</td><td style="height: 46.5938px;">Color</td><td style="height: 46.5938px;">Color of the bargraph if not close to the turn, determined by the "Value Close To Turn" property</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">Bargraph Color Below Threshold</td><td style="height: 46.5938px;">Color</td><td style="height: 46.5938px;">Color of the bargraph if close to the turn, determined by the "Color Change Threshold" property</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Bargraph Background Color</td><td style="height: 29.7969px;">Color</td><td style="height: 29.7969px;">Color of the bargraph background</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Max Street Name Text Size</td><td style="height: 29.7969px;">UInt32</td><td style="height: 29.7969px;">Maximum size of the street name text</td></tr></tbody></table>

# Behaviors

This chapter gives an overview of what Behaviors are and shows how to use them.

# Overview

This chapter gives an overview of Behaviors.

#### What are Behaviors?

The purpose of Behaviors is to perform modifications to the content presented to the user.

While it would be possible for the application to directly perform any required change directly to the nodes of the scene tree this would require quite complex application code. The application would need to be specifically tailored to a single solution and every change to the scene tree might require a change in the application code. To avoid this strong dependency, Behaviors are used to perform the actual modification on the content.

<p class="callout info">The following impact has to be considered: Cross-references (nodes or behaviors) to different scenes may occur. For details see [<span style="color: rgb(230, 126, 35);">Cross-Reference Implications </span>](https://doc316en.candera.eu/books/controls-and-behaviors/page/overview#bkmrk-cross-reference-impl)below.  
</p>

Their advantage is that they after they are created they can be easily used in Scene-Composer by people without any coding knowledge. By adding configurable properties they can be adapted to apply in multiple different scenarios without the need to create new ones. Further the application code can be simplified as it only needs to provide an "input" for the Behaviors. It is no longer responsible to decide how the content needs to be modified based on the input.

<div class="contents" id="bkmrk-"><div class="contents"><div class="textblock"><div drawio-diagram="2318"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677056275.png" alt=""/></div>

</div></div></div>Since the introduction of Behaviors in CGI-Studio 3.4.2 they are a replacement for Widgets, which are now being considered deprecated. Therefore instead of Widgets, Behaviors should be used to add functionality.

Behaviors can be considered Widgets 2.0. They can perform any task that widgets can perform but have some added features which greatly enhances their usability. While it is in most cases easy to convert an existing Widget into a Behavior a simple conversion might not make usage of the new functionality introduced negating the actual benefit from using them.

#### Comparison to Widgets

As mentioned behaviors are essentially an enhanced version of widgets. Compared to widgets they have 2 major new features to help with implementing complex functionality.

#### OWNERSHIP

While (most) widgets are attached to a node they are considered part of the scene itself. A widget does know about the node it is attached to but the node does not know about the widget.

This can cause problems if multiple widgets should collaborate as by default they can not know which other widgets they should interact with. To overcome this problem it was required to either specify "other" widgets a property (type is [Candera::WidgetBase](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_widget_base.html "Abstract base class for Candera Widgets.")\*) directly in the widget or store custom information on the node about other widgets that are also attached.

Behaviors have simplified this by now longer considering them as part of the Scene but rather part of the node. Each node has a Behavior-Container which hold all attached behaviors for this node. Via this container it is now easily possible to communicate and collaborate between different behaviors.

<div class="contents" id="bkmrk--0"><div class="contents"><div class="textblock"><div drawio-diagram="2319"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677056333.png" alt=""/></div>

</div></div></div>#### EVENTS

The second major addition is the usage of events. Events allow to send "information" from one behavior to another behavior without them knowing any details about each other.

Events will be routed thought the scene tree. This is made possible by the change in ownership mentioned before. Once an event is dispatched to a node, all attached behaviors will receive the event unless the event routing is stopped.

For more information about Events see chapter <span style="color: rgb(230, 126, 35);">[Behaviors and Events](https://doc316en.candera.eu/link/565#bkmrk-page-title)</span> .

#### Cross-Reference Implications

Behaviors can have properties of type Node or Behavior. If those properties refer to parts of other scenes, those scenes will be automatically loaded by the AssetProvider.

If unloading is required, it is necessary to unload the entire cross-referencing network. Partially unloading cross-referenced scenes of such a cross-referenced network will result in dangling pointers and a will **end up in unpredictable and incorrect behavior!**

Unloading the complete cross-reference network is safe.

The same also has to be considered for Controls and State Machines.

Since the Global State Machine cannot be unloaded, it is not allowed to unload any referenced Nodes or Behaviors.

---

# Behaviors and Events

This chapter explains how the Event-System in Behaviors work.

#### General

Behaviors communicate via Events with each other and with other components of the application. For each action a specific event is implemented. An Event can carry any data or none at all. For a custom Event simply derive from [FeatStd::Event](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_event.html "Event serves as a base class for user derived events."). Each Behavior can return an event-result after handling an Event in the "OnEvent"-method. Behaviors are using unique identifiers (FeatStd::Internal::Identifier) to identify the sender of an event.

```
        void OnPressedEvent(const PressedEvent& event, Candera::EventDispatchResult& /*dispatchResult*/)
        {
            if (event.GetSender() == m_behavior.GetIdentifier()) {
                static_cast<void>(m_behavior.SetState(<a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___behaviors_control.html#gga37959d0c8bd2f2c4ec4427a697be1365aeb7226ee20e9f17095571a522c5ff48e">ControlStateEnum::Pressed</a>, event.GetType() == <a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___behaviors_control.html#gga37959d0c8bd2f2c4ec4427a697be1365aeb7226ee20e9f17095571a522c5ff48e">PressedEventType::Pressed</a>));
            }
        }
```

For a list with all Events which are used by Behaviors also check chapter <span style="color: rgb(230, 126, 35);">[Control Behaviors Events](https://doc316en.candera.eu/link/565#bkmrk-control-behaviors-ev)</span> . There you can also find their readable names (names in SC).

#### Event-dispatching

The Behavior base-class implements *DispatchEvent*-functions. Events are dispatched on a Node using one of the available *EventDispatchStrategy* objects. An Event is passed to all OnEvent function of all Behaviors. The following dispatch strategies are available:

<div class="contents" id="bkmrk-directeventdispatchs"><div class="contents"><div class="contents"><div class="textblock">- **DirectEventDispatchStrategy:** Only the behaviors of the node will receive the event.
- **BroadcastEventDispatchStrategy:** The event will be first dispatched to the current node then to all child nodes.
- **BubbleEventDispatchStrategy:** The event will be dispatched from the current node to the parent and so on until the root node is reached.
- **TunnelEventDispatchStrategy:** The event will be dispatched from the root node to the current node.

</div></div></div></div><div drawio-diagram="2320"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677058038.png" alt=""/></div>

<div class="contents" id="bkmrk--0"><div class="contents"><div class="textblock">  
</div></div></div>#### Event Dispatching Diagram

<div class="contents" id="bkmrk--1"><div class="contents"><div class="textblock"><div drawio-diagram="2321"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677058061.png" alt=""/></div>

---

</div></div></div>#### **Control Behaviors Events**

This chapter gives an overview of the most important control behaviors events. Furthermore they are listed with their readable names (names in SC). For further information of how to use them in SC see chapter <span style="color: rgb(230, 126, 35);">[EventHandler Tab](https://doc316en.candera.eu/link/569#bkmrk-page-title)</span> .

##### Events

<div class="contents" id="bkmrk-class-candera%3A%3Aproce"><div class="textblock"><dl class="reflist"><dt><table border="1" style="border-collapse: collapse; width: 100%;"><tbody><tr><td style="background-color: rgb(194, 224, 244);"><dl class="reflist"><dt>Class [Candera::ProcessValueEvent](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_process_value_event.html)</dt></dl></td></tr><tr><td><dl class="reflist"><dd>ProcessValueEvent - Value Processed</dd></dl></td></tr></tbody></table>

<div class="contents"><table border="1" style="border-collapse: collapse; width: 100%;"><tbody><tr><td style="background-color: rgb(194, 224, 244);"><dl class="reflist"><dt>Class [CgiStudioControl::AnimationEvent](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_animation_event.html)</dt></dl></td></tr><tr><td><dl class="reflist"><dd>AnimationEvent - Animation State Changed</dd></dl></td></tr></tbody></table>

</div></dt></dl></div></div><table border="1" id="bkmrk-class-cgistudiocontr" style="border-collapse: collapse; width: 100%; height: 59.5938px;"><colgroup><col style="width: 99.8765%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="background-color: rgb(194, 224, 244); height: 29.7969px;"><dl class="reflist"><dt>Class [CgiStudioControl::ArTargetEvent](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_ar_target_event.html)</dt></dl></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">ArTargetEvent - ArTargetEvent event</td></tr></tbody></table>

<table border="1" id="bkmrk-class-cgistudiocontr-0" style="border-collapse: collapse; width: 100%; height: 59.5938px;"><colgroup><col style="width: 99.8765%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="background-color: rgb(194, 224, 244); height: 29.7969px;"><dl class="reflist"><dt>Class [CgiStudioControl::CaretPositionChangedEvent](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_caret_position_changed_event.html)</dt></dl></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">CaretPositionChangedEvent - Caret Position Changed</td></tr></tbody></table>

<table border="1" id="bkmrk-class-cgistudiocontr-1" style="border-collapse: collapse; width: 100%; height: 59.5938px;"><colgroup><col style="width: 99.8765%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="background-color: rgb(194, 224, 244); height: 29.7969px;"><dl class="reflist"><dt>Class [CgiStudioControl::ChangePropertyEvent](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_change_property_event.html)</dt></dl></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">ChangePropertyEvent - Property Changed</td></tr></tbody></table>

<div class="contents" id="bkmrk-class-cgistudiocontr-2"><table border="1" style="border-collapse: collapse; width: 100%; height: 59.5938px;"><colgroup><col style="width: 99.8765%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="background-color: rgb(194, 224, 244); height: 29.7969px;"><dl class="reflist"><dt>Class [CgiStudioControl::ChangeSelectionEvent](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_change_selection_event.html)</dt></dl></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">ChangeSelectionEvent - Selection Changed</td></tr></tbody></table>

</div><div class="contents" id="bkmrk-class-cgistudiocontr-3"><div class="textblock"><dl class="reflist"><dt><div class="contents"><div class="textblock"><dl class="reflist"><dt><table border="1" style="border-collapse: collapse; width: 100%; height: 59.5938px;"><tbody><tr style="height: 29.7969px;"><td style="background-color: rgb(194, 224, 244); height: 29.7969px;"><dl class="reflist"><dt>Class [CgiStudioControl::ChangeStateEvent](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_change_state_event.html)</dt></dl></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">ChangeStateEvent - State Change Triggered</td></tr></tbody></table>

</dt><dt><table border="1" style="border-collapse: collapse; width: 100%; height: 59.5938px;"><tbody><tr style="height: 29.7969px;"><td style="background-color: rgb(194, 224, 244); height: 29.7969px;"><dl class="reflist"><dt>Class [CgiStudioControl::ChangeValueEvent](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_change_value_event.html)</dt></dl></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">ChangeValueEvent - Value Change Triggered</td></tr></tbody></table>

</dt><dt><table border="1" style="border-collapse: collapse; width: 100%; height: 59.5938px;"><tbody><tr style="height: 29.7969px;"><td style="background-color: rgb(194, 224, 244); height: 29.7969px;"><dl class="reflist"><dt>Class [CgiStudioControl::ClickEvent](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_click_event.html)</dt></dl></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">ClickEvent - Clicked</td></tr></tbody></table>

</dt><dt><table border="1" style="border-collapse: collapse; width: 100%; height: 59.5938px;"><tbody><tr style="height: 29.7969px;"><td style="background-color: rgb(194, 224, 244); height: 29.7969px;"><dl class="reflist"><dt>Class [CgiStudioControl::ControlTimer::Event](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_control_timer_1_1_event.html)</dt></dl></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">ControlTimer::Event - Timer Expired</td></tr></tbody></table>

</dt></dl></div></div></dt></dl></div></div><table border="1" id="bkmrk-class-cgistudiocontr-4" style="border-collapse: collapse; width: 100%; height: 59.5938px;"><colgroup><col style="width: 99.8765%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="background-color: rgb(194, 224, 244); height: 29.7969px;"><dl class="reflist"><dt>Class [CgiStudioControl::DragDropEvent](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_drag_drop_event.html)</dt></dl></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">DragDropEvent - Drag and Drop</td></tr></tbody></table>

<table border="1" id="bkmrk-class-cgistudiocontr-5" style="border-collapse: collapse; width: 100%; height: 59.5938px;"><colgroup><col style="width: 99.8765%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="background-color: rgb(194, 224, 244); height: 29.7969px;"><dl class="reflist"><dt>Class [CgiStudioControl::EnterExitEvent](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_enter_exit_event.html)</dt></dl></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">OnEnterExitEvent- On Enter Exit Edit</td></tr></tbody></table>

<table border="1" id="bkmrk-class-cgistudiocontr-6" style="border-collapse: collapse; width: 100%; height: 59.5938px;"><colgroup><col style="width: 99.8765%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="background-color: rgb(194, 224, 244); height: 29.7969px;"><dl class="reflist"><dt>Class [CgiStudioControl::HoverEvent](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_hover_event.html)</dt></dl></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">HoverEvent - Hovered</td></tr></tbody></table>

<table border="1" id="bkmrk-member-cgistudiocont" style="border-collapse: collapse; width: 100%; height: 59.5938px;"><colgroup><col style="width: 99.8765%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="background-color: rgb(194, 224, 244); height: 29.7969px;"><dl class="reflist"><dt>Member [CgiStudioControl::IntervalSwitchBehavior::OnEvent](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_interval_switch_behavior.html#add5a525a0cc648e4588bda1c1158205d) (const [FeatStd::Event](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_event.html "Event serves as a base class for user derived events.") &amp;event, Candera::EventDispatchResult &amp;dispatchResult)</dt></dl></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">to handle.</td></tr></tbody></table>

<table border="1" id="bkmrk-class-cgistudiocontr-7" style="border-collapse: collapse; width: 100%; height: 59.5938px;"><colgroup><col style="width: 99.8765%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="background-color: rgb(194, 224, 244); height: 29.7969px;"><dl class="reflist"><dt>Class [CgiStudioControl::IntervalVisualizationEvent](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_interval_visualization_event.html)</dt></dl></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">IntervalVisualizationEvent - Interval State Changed</td></tr></tbody></table>

<table border="1" id="bkmrk-class-cgistudiocontr-8" style="border-collapse: collapse; width: 100%; height: 59.5938px;"><colgroup><col style="width: 99.8765%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="background-color: rgb(194, 224, 244); height: 29.7969px;"><dl class="reflist"><dt>Class [CgiStudioControl::PoiUpdateEvent](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_poi_update_event.html)</dt></dl></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">PoiUpdateEvent - Poi update</td></tr></tbody></table>

<table border="1" id="bkmrk-class-cgistudiocontr-9" style="border-collapse: collapse; width: 100%; height: 59.5938px;"><colgroup><col style="width: 99.8765%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="background-color: rgb(194, 224, 244); height: 29.7969px;"><dl class="reflist"><dt>Class [CgiStudioControl::PressedEvent](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_pressed_event.html)</dt></dl></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">PressedEvent - Pressed</td></tr></tbody></table>

<table border="1" id="bkmrk-class-cgistudiocontr-10" style="border-collapse: collapse; width: 100%; height: 59.5938px;"><colgroup><col style="width: 99.8765%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="background-color: rgb(194, 224, 244); height: 29.7969px;"><dl class="reflist"><dt>Class [CgiStudioControl::RegisterSelectionEvent](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_register_selection_event.html)</dt></dl></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">RegisterSelectionEvent - Register Selection</td></tr></tbody></table>

<table border="1" id="bkmrk-class-cgistudiocontr-11" style="border-collapse: collapse; width: 100%; height: 59.5938px;"><colgroup><col style="width: 99.8765%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="background-color: rgb(194, 224, 244); height: 29.7969px;"><dl class="reflist"><dt>Class [CgiStudioControl::ScrollableDirectionChangedEvent](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_scrollable_direction_changed_event.html)</dt></dl></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">ScrollableDirectionChangedEvent - Scroll Direction Changed</td></tr></tbody></table>

<table border="1" id="bkmrk-class-cgistudiocontr-12" style="border-collapse: collapse; width: 100%; height: 59.5938px;"><colgroup><col style="width: 99.8765%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="background-color: rgb(194, 224, 244); height: 29.7969px;"><dl class="reflist"><dt>Class [CgiStudioControl::StateEvent](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_state_event.html)</dt></dl></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">StateEvent - State Changed</td></tr></tbody></table>

<table border="1" id="bkmrk-class-cgistudiocontr-13" style="border-collapse: collapse; width: 100%; height: 59.5938px;"><colgroup><col style="width: 99.8765%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="background-color: rgb(194, 224, 244); height: 29.7969px;"><dl class="reflist"><dt>Class [CgiStudioControl::TrackingEvent](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_tracking_event.html)</dt></dl></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">TrackingEvent - Tracking event</td></tr></tbody></table>

<table border="1" id="bkmrk-class-cgistudiocontr-14" style="border-collapse: collapse; width: 100%; height: 59.5938px;"><colgroup><col style="width: 99.8765%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="background-color: rgb(194, 224, 244); height: 29.7969px;"><dl class="reflist"><dt>Class [CgiStudioControl::ValueChangedEvent](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_value_changed_event.html)</dt></dl></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">ValueChangedEvent - Value Changed</td></tr></tbody></table>

<table border="1" id="bkmrk-class-cgistudiocontr-15" style="border-collapse: collapse; width: 100%; height: 59.5938px;"><colgroup><col style="width: 99.8765%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="background-color: rgb(194, 224, 244); height: 29.7969px;"><dl class="reflist"><dt>Class [CgiStudioControl::VideoControlEvent](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_video_control_event.html)</dt></dl></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">VideoControlEvent - Video Control Event</td></tr></tbody></table>

<table border="1" id="bkmrk-class-cgistudiocontr-16" style="border-collapse: collapse; width: 100%; height: 59.5938px;"><colgroup><col style="width: 99.8765%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="background-color: rgb(194, 224, 244); height: 29.7969px;"><dl class="reflist"><dt>Class [CgiStudioControl::VideoStateEvent](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_video_state_event.html)</dt></dl></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;"><dl class="reflist"><dt><div class="contents"><div class="textblock"><dl class="reflist"><dd>VideoStateEvent - Video changed</dd></dl></div></div></dt><dd></dd></dl></td></tr></tbody></table>

<div class="contents" id="bkmrk--3"><div class="textblock"><dl class="reflist"><dt><div class="contents"><div class="textblock">---

<dl class="reflist"><dt>  
</dt></dl></div></div></dt></dl></div></div>

# Predefined Behaviors

This chapter gives an explanation of the Behaviors that come with CGI Studio.

#### Different types of Behaviors

Behaviors are sorted into different categories, which are:

<div class="contents" id="bkmrk-actions%3A-example-beh"><div class="contents"><div class="textblock">- **Actions:** Example Behaviors are: Play Animation, Start Timer, Set Color, Set Image, Enable Rendering, ...
- **Conditions:** Example Behaviors are: Check Control State, Check Animation State, Check Timer, ...
- **Control:** Example Behaviors are: Control State Handler, Event Handler, ...
- **Value Processing:** Example Behaviors are: Map, Filter, Interpolate, Jump to Keyframe, Set Alpha, Set Rotation, ...
- **Scripting** and **State Machine** related

</div></div></div>#### Visualization of Behaviors as Tree

When many behaviors are nested, the hierarchy of the behaviours is shown thorugh the visualization of the behaviours integral map ( = "tree") structure.

For example, if a conditional behavior is used together with another connected behavior, the later is displayed as a child of the conditional behavior. In this way, all behavior properties on behaviors are displayed as a tree view with item children of the owner behavior.

<div class="contents" id="bkmrk-"><div class="contents"><div class="textblock"><div drawio-diagram="2322"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677201998.png" alt=""/></div>

</div></div></div>The drag and drop operations only allow behavior of the baseclass specified in the property to be assigned to the main (i.e. "parent") behavior. Any behavior that appears as a child of another behavior will not appears as a standalone behavior in the treeview. If a behavior is removed from all properties, that behavior will be shown again as a stand alone behavior in the tree.

#### Behaviors: Deep Copy/Paste Operation

If a behavior is just the reference of another (parent) behavior, the referenced behavior will be marked by a specific sign and a tooltip will become visible on it:

<div class="contents" id="bkmrk--0"><div class="contents"><div class="textblock"><div drawio-diagram="2323"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677202029.png" alt=""/></div>

</div></div></div>If a behavior which contains referenced behavior is copied, a new option will become available in the context menu: "Deep Paste".

<div class="contents" id="bkmrk--1"><div class="contents"><div class="textblock"><div drawio-diagram="2324"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677202053.png" alt=""/></div>

</div></div></div>By using this option, referenced behaviors from other nodes will be duplicated, in the location of the original referenced behavior, and the reference will be updated to the duplicated behavior.

When copied, all behaviors will have the following behavior in the Scene extra-Tree:

A) Behavior that are referenced from the copied behaviors will now also get copied to the new location if they are from the same node as the copied behaviors. Behaviors from other nodes will remain as a reference to the same behavior.

<div class="contents" id="bkmrk-group%2Fb1-ref%3A-group%2F"><div class="contents"><div class="textblock">- Group/B1 
    - ref: Group/B2
    - ref: Camera/B3

</div></div></div>When copying and pasting behavior B1 on Group, we will get the following structure:

<div class="contents" id="bkmrk-group%2Fb1_1-ref%3A-grou"><div class="contents"><div class="textblock">- Group/B1\_1 
    - ref: Group/B2\_1
    - ref: Camera/B3

</div></div></div>When copying and pasting behavior B1 on Button, we will get the following structure:

<div class="contents" id="bkmrk-button%2Fb1-ref%3A-butto"><div class="contents"><div class="textblock">- Button/B1 
    - ref: Button/B2
    - ref: Camera/B3

</div></div></div>B) When using the Deep Paste context menu option, referenced behaviors from other nodes will also be duplicated, in the location of the original referenced behavior, and the reference will be updated to the duplicated behavior.

<div class="contents" id="bkmrk-group%2Fb1-ref%3A-group%2F-0"><div class="contents"><div class="textblock">- Group/B1 
    - ref: Group/B2
    - ref: Camera/B3

</div></div></div>When copying and pasting behavior B1 on Group, we will get the following structure:

<div class="contents" id="bkmrk-group%2Fb1_1-ref%3A-grou-0"><div class="contents"><div class="textblock">- Group/B1\_1 
    - ref: Group/B2\_1
    - ref: Camera/B3\_1

</div></div></div>When copying and pasting behavior B1 on Button, we will get the following structure:

<div class="contents" id="bkmrk-button%2Fb1-ref%3A-butto-0"><div class="contents"><div class="textblock">- Button/B1 
    - ref: Button/B2
    - ref: Camera/B3\_1

</div></div></div>#### Functional Categories of Behaviors

To differentiate the functionality of behaviors in the context of controls, there are two categories available: event handling and value processing.

#### Event Handling with Behaviors

The Behaviors for Event-Handling work like the following pattern:

```
Upon <event> When <condition> Do <action>;
```

An input event is processed by a Trigger Behavior, which evaluates a condition (Condition Behavior). If the condition evaluates to true, then it invokes one or more Action Behaviors. The Trigger Behavior reacts on any input event. A filter on event type is achieved by specialized Condition Behaviors for these events. Event parameters are evaluated against Condition Behavior property values.

<div class="contents" id="bkmrk--2"><div class="contents"><div class="textblock"><div drawio-diagram="2326"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677202118.png" alt=""/></div>

</div></div></div>Specialized Logical Condition Behaviors enable complex conditions by combining Condition Behaviors.

Additionally there is a ConditionalActionBehavior which can be attached as an action. This can be used as a trigger with further conditions for other actions.

<div class="contents" id="bkmrk--3"><div class="contents"><div class="textblock"><div drawio-diagram="2327"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677202153.png" alt=""/></div>

</div></div></div>### Value Processing with Behaviors

The second category is value processing. The Value Behavior provides a Variant data type which is bindable. A value change results in a processing of that value.

<div class="contents" id="bkmrk--4"><div class="contents"><div class="textblock"><div drawio-diagram="2328"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677202186.png" alt=""/></div>

</div></div></div>The value processing is realized in a data flow chain (including mapping to a limited value range and parallel data flow processing). As a result of this chain properties like position, scale … will be affected.

To trigger an ActionBehavior corresponding to a value the "Action on Value"-Behavior can be used. To check the value a "Value Condition" can be attached as a ConditionBehavior.

#### Bridges between Event Handling and Value Processing

An option is provided to bridge the Event Handling and Value Processing flows. The first bridge is from an event to Value Processing. A dedicated Value Event carrying the value is sent to the Value Behavior. The Value Behavior receives the Value Event and proceeds the Value Processing.

<div class="contents" id="bkmrk--5"><div class="contents"><div class="textblock"><div drawio-diagram="2329"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677202206.png" alt=""/></div>

</div></div></div>The second bridge is from a value change to Event Handling. A specialized Process Value Behavior – Send Value Process Value Behavior - dispatches directly a Process Value Event. Optionally a condition can be applied (Condition Behavior) to determine whether the Value Event shall be sent. The Process Value Event is handled by a Trigger Behavior.

---

# Behavior Definition

#### Behavior Definition

While SceneComposer can be used to compose the static structure and properties of a scene, with Behaviors it is possible to add dynamics to a static scene structure.

<div class="contents" id="bkmrk-a-behavior-is-define"><div class="contents"><div class="textblock">- A Behavior is defined by behavior attributes: Name, Type, Properties
- Behavior attributes are expressed in the <span style="color: rgb(230, 126, 35);">[Behavior Meta Information](https://doc316en.candera.eu/link/568#bkmrk-behavior-meta-inform)</span>
- Behaviors are assembled together in a widget set
- Behaviors and the widget set can be assembled in several Behavior libraries (lib), to be linked to the application

</div></div></div>#### Behavior Generation

If *cgi\_studio\_cit* is within the package, the base classes for Behaviors can be generated. Therefore an .xhcdl-file has to be written. The base class can include properties that can be defined in the .xhcdl-file too. The xhcdl-files can be found for each behavior in the same folder where the source-code lies. The following example shows an .xhcdl-file for a behavior.

```
<?xml version="1.0" encoding="utf-8"?>
<definition
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="../../../../cgi_studio_cit/schema/HmiContract.xsd">
    <include href="Behaviors/Behavior.xhcdl" addIncludeToCode="false" />
    <generator location="Behaviors/Transition/generated">
        <namespace namespace="Candera" />
        <header>
            <include file="Behaviors/ActionBehavior/ActionBehavior.h" />
            <include file="CanderaWidget/WidgetBase/StringDataTypes.h" />
        </header>
    </generator>
    <widgets setPolicy="onChange" notifierPolicy="onUpdate" viewInvalidationPolicy="wakeup">
        <group baseClassRef="ActionBehavior">
            <widget name="SimpleTransitionActionBehavior" readableName="" uid="{889EF594-E702-4846-930D-BA377121BBA0}">
                <property name="ActivatedSceneAssetID" description="The scene to activate." type="FeatStd::UInt32" uid="{7DB722C4-5543-43D8-BEB0-DF38729C8F5C}" />
                <property name="IsActivatedScene3D" description="If the activated scene is 3D or not." type="bool" uid="{ED8607D7-1F37-49FD-B689-CBF444DFF708}" />
                <property name="DeactivatedSceneAssetID" description="The scene to deactivate." type="FeatStd::UInt32" uid="{9A0E2E92-AAF6-4460-A2D9-7F40FED3210E}" />
                <property name="IsDeactivatedScene3D" description="If the deactivated scene is 3D or not." type="bool" uid="{31F35C65-6E87-4EAF-A660-709C8FB67F1A}" />
                <property name="Variant" description="The transition variant." type="FeatStd::String" uid="{E3A46266-73DE-4F1D-BD5F-224E3ABB91E3}" />
            </widget>
        </group>
    </widgets>
</definition>
```

Some important tags and attributes:

<div class="contents" id="bkmrk-generator-location%3A-"><div class="contents"><div class="textblock">- Generator location: Defines in which folder the base class should be generated.
- Group baseClassRef: The base class of the generated base class.
- Widget name: The name of the generated base class. The suffix "Base" will be added to the class-name.
- Property: The properties of the Behavior. For the String-type the include file *CanderaWidget/WidgetBase/StringDataTypes.h* has to be added for instance. If the property can't be generated it can still be added in the source code.

</div></div></div>After the .xhcdl-file is written the behavior can be generated by calling *GenerateBehaviors.bat* which can be found in *cgi\_studio\_controls/src/Behaviors*. The files are a base class with a header- and cpp-file. It is meant to derive from that class. All the properties and its getter- and setter-methods are already in the class.

#### Behavior Meta Information

**Behavior Name and Type**

To publish a behavior to SceneComposer, it must register for the widget with its name and type:

<div class="contents" id="bkmrk-cdabehaviordef-behav"><div class="contents"><div class="textblock"><table class="doxtable"><tbody><tr><td>CdaBehaviorDef</td><td>Behavior class name and its base class</td></tr><tr><td>CdaDescription</td><td>Behavior description for the SceneComposer tooltip</td></tr><tr><td>CdaReadableName</td><td>Behavior name</td></tr></tbody></table>

</div></div></div><p class="callout info">Note that the example above explains how to publish a behavior for a 3D-scene. For 2D-scenes the macro *CdaBehavior2DDef* must be used instead of *CdaBehaviorDef*.</p>

**Behavior Properties**

For linking a behavior with scene content in SceneComposer, behavior properties are used. Usually the properties should be defined in the .xhcdl-file of a behavior. Anyway, the properties can be defined directly in the behavior-class by using the appropriate macros in the header-file. The behavior implements a property by providing a getter and a setter method.

<div class="contents" id="bkmrk-cdaproperty-specifie"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><td style="width: 14.5822%;">CdaProperty</td><td style="width: 85.4178%;">Specifies \[property\_name\], \[property\_type\], \[property\_getter\], \[property\_setter\]</td></tr><tr><td style="width: 14.5822%;">CdaDescription</td><td style="width: 85.4178%;">Behavior property description for the SceneComposer tooltip</td></tr><tr><td style="width: 14.5822%;">CdaCategory</td><td style="width: 85.4178%;">Defines a category for the property. SceneComposer displays all properties of one category in a related Category section in the property grid.</td></tr></tbody></table>

</div></div></div><p class="callout info">The Behavior property must be initialized correctly, e.g. in the widget constructor!  
Take care that the getter and setter methods are safe (prevent null pointer accesses)!</p>

#### Usage of the introduced macro CGI\_BEHAVIOR\_FORWARD\_AssetLoaderDataTypeDef

This macro is used to be able to set a certain behavior as property of another behavior.

Therefore following code has to be added to the xhcdl file to generate the macro in the base class of the behavior:

```
<postNamespace text="CGI_BEHAVIOR_FORWARD_AssetLoaderDataTypeDef(::CgiStudioControl::ValueBehavior)" />
```

This is an example code to be able to use a ValueBehavior as property. The generated code in the base class of your behavior will look like this:

```
<a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___behavior_base.html#ga16abcb418e53e14ab4e909538ffb4c57">CGI_BEHAVIOR_FORWARD_AssetLoaderDataTypeDef</a>(::<a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_value_behavior.html" title="Receives a ChangeValueEvent and passes its changed value to the receivers (Value Processing Behaviors...">CgiStudioControl::ValueBehavior</a>)
```

<div class="contents" id="bkmrk-"><div class="contents"><div class="textblock"><div class="fragment">---

</div></div></div></div>

# Behavior Building Blocks - Behavior Blocks

#### Description

This chapter describes how to work with behavior building blocks - in short: behavior blocks.   
Behaviors can be nested and this way combined to a reusable behavior building block. These behavior blocks offer the possibility to configure, which of the properties of this behavior block will be published and are therefore editable at the time the behavior block is instantiated and used in the SceneComposer scene.

In this tutorial a 2D scene is created with a simple SolidColorNode and an OnClick Behavior Building Block. When single-clicking on the SolidColorNode, its color will be changed to red, when double-clicking on it, its color will be changed to green.  
The OnClick Behavior Building Block is built out of an *EventHandler Control Behavior* and a *CheckClick Condition Behavior*. The two instances of the Behavior Building Blocks are configured with an additional *SetColor Action Behavior* to change the color.

#### Create a Behavior Building Block

To create a behavior building block, right click on a folder in the Solution Explorer (e.g. Solution) to open the context menu and select "Add" - "New Item...".

<div class="contents" id="bkmrk-"><div class="contents"><div class="textblock"><div drawio-diagram="2330"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677202321.png" alt=""/></div>

</div></div></div>In the opening "Add Item Dialog" select "BehaviorBlock" on the left. You can then define a location in your solution using the "Browse" button, a name (e.g. "OnClick") and a category for your behavior building block. You can also specify an order index and if you want the behavior building block to be always exported.

<div class="contents" id="bkmrk--0"><div class="contents"><div class="textblock"><div drawio-diagram="2331"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677202337.png" alt=""/></div>

</div></div></div>After Clicking "OK", the new Behavior Building Block called "OnClick" is created and visible in the Solution Explorer. Double-click on the newly created Behavior Building Block to edit it in the Scene Tree View.

<div class="contents" id="bkmrk--1"><div class="contents"><div class="textblock"><div drawio-diagram="2332"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677202352.png" alt=""/></div>

</div></div></div>#### Construct a Behavior Building Block

To construct the Behavior Building Block you can drag Behaviors from the Toolbox Tab of the Libraries View and drop them onto the Behavior Building Block in the Scene Tree View.

For this tutorial we first add an EventHandler Control Behavior to the Building Block that requires a condition. We add a CheckClick Conditon Input Behavior to the EventHandler Behavior by dragging and dropping it onto the EventHandler Behavior.  
Our Building Block now consists of the following Behaviors:

<div class="contents" id="bkmrk-eventhandler-control"><div class="contents"><div class="textblock">- *EventHandler Control Behavior* passes a value to a Condition Behavior and if the response is positive, invokes an Action Behavior
- *CheckClick Conditon Input Behavior* evaluates the click event condition and is to be used with a Trigger Behavior to trigger a certain action.

<div drawio-diagram="2333"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677202409.png" alt=""/></div>

<dl class="note"><dt></dt><dt><p class="callout info">You can also build up nested behaviors while working on your scene in the Scene Tree View. Whenever you decide that you want to reuse your built-up behavior construct, you can press the right mouse button on the parent behavior. The context menu of the behavior offers you the possibility to "Save as BehaviorBlock"</p>

</dt></dl></div></div></div>#### Configure Properties of the Behavior Building Block

The Properties of the Behavior Building Blocks can be edited in the Configure Properties Dialog that is opened by right-clicking on the Behavior Block in the Solution Explorer and selecting "Behavior block properties...".

<div class="contents" id="bkmrk--2"><div class="contents"><div class="textblock"><div drawio-diagram="2334"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677202448.png" alt=""/></div>

</div></div></div>In the "Configure Properties" dialog you can define which properties you want to publish, that means, which properties you want to be able to edit when creating an instance of this Behavior Building Block.  
For our tutorial we want to publish the following properties:

<div class="contents" id="bkmrk-the-clickcount-of-th"><div class="contents"><div class="textblock">- the *ClickCount* of the CheckClick Behavior
- the *Emitter* of the CheckClick Behavior
- the *Actions* of the EventHandler

<div drawio-diagram="2335"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677202481.png" alt=""/></div>

</div></div></div>#### Instantiate the created Behavior Building Blocks

Now that we have created the "OnClick" Behavior Building Block, we can use it in our scene. For this, we create a simple 2D scene with one single white SolidColorNode.

<div class="contents" id="bkmrk--3"><div class="contents"><div class="textblock"><div drawio-diagram="2336"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677202502.png" alt=""/></div>

</div></div></div>We want to have 2 OnClick Behaviors: one for a single-click and one for a double-click. To instantiate the "OnClick" Behavior Building Block, simply drag and drop it from the Solution Explorer onto the SolidColorNode in the Scene Tree View twice. You should now see the created instances of the Behavior Blocks on the right side in the Scene Tree View.

<div class="contents" id="bkmrk--4"><div class="contents"><div class="textblock"><div drawio-diagram="2337"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677202533.png" alt=""/></div>

</div></div></div>#### Configure Behavior Building Block Instances

These 2 instances can now be configured. One instance should be configured to change the color of the SolidColorNode to red when someone single-clicks on it and the second one should be configured to change the color of the SolidColorNode to green when someone double-clicks on it. You can configure the Click Count for one Behavior to 1 (single-click) and the Click Count for the other Behavior to 2 (double-click).   
  
We also have to configure the Emitter, that means the node from which the click event has to be emitted. If no emitter is configured, all click events are handled. Therefore we configure the single SolidColorNode fom our 2D Scene as Emitter by clicking on the icon to the right of the Emitter property input field. In the opened "Choose Item" dialog the SolidColorNode can be selected.

<div class="contents" id="bkmrk--5"><div class="contents"><div class="textblock"><div drawio-diagram="2338"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677202557.png" alt=""/></div>

</div></div></div>To change the color of the SolidColorNode, an action is required. This means, we need another Behavior: The action Behavior "SetColor". It can be applied by dragging it from the Behavior ToolBox and dropping it onto our "OnClick" Behavior Building Blocks in the Scene Tree View.

<div class="contents" id="bkmrk--6"><div class="contents"><div class="textblock"><div drawio-diagram="2339"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677202593.png" alt=""/></div>

</div></div></div>The last step of this tutorial is to configure these SetColor Action Behaviors: one SetColor Action should set the color of the SolidColorNode to red (see picture below) and the other one should set it to green.

<div class="contents" id="bkmrk--7"><div class="contents"><div class="textblock"><div drawio-diagram="2340"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677202608.png" alt=""/></div>

---

</div></div></div>

# EventHandler Tab

Every control needs an EventHandler in order to handle user events and take appropriate actions.  
Events, Conditions and Actions for a node can conveniently be edited in SceneComposer in the EventHandler Tab, which is located in the properties view. Using the EventHandler Tab the user can choose the event he wants to react on from a drop-down menu. Furthermore, conditions and actions can also be configured with drop-down menus in this tab. Once an Event is selected, only conditions that are suitable for the selected event are offered in the drop-down menu. For a list of all selectable Events see chapter <span style="color: rgb(230, 126, 35);">[Control Behaviors Events](https://doc316en.candera.eu/link/565#bkmrk-control-behaviors-ev)</span> .

<div class="contents" id="bkmrk-"><div class="contents"><div class="textblock"><div drawio-diagram="2341"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677203278.png" alt=""/></div>

</div></div></div>Additional EventHandlers can be added by clicking the '+' sign next to the EventHandler Tabs, more Actions can be added by clicking the '+' sign next to the Actions (marked in orange in the image above).

#### Filtering Conditions according to the selected Event

Before selecting an Event, the Conditions drop-down menu contains quite a lot of entries:

<div class="contents" id="bkmrk--0"><div class="contents"><div class="textblock"><div drawio-diagram="2342"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677203302.png" alt=""/></div>

</div></div></div>After selecting an Event, the Conditions drop-down menu only contains Conditions that are applicable for the selected Event:

<div class="contents" id="bkmrk--1"><div class="contents"><div class="textblock"><div drawio-diagram="2343"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677203312.png" alt=""/></div>

</div></div></div>When implementing a ConditionBehavior, filtering for a specific Event can easily be configured using the CdaProperty "CdaEvents" as seen in the code example below, where the StateConditionBehavior is the configured to be visible for the StateEvent:

```
private:
    <a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___behavior_base.html#gaa6c7bb84ac98320b27829f415f095ed9">CdaBehaviorMixedDef</a>(StateConditionBehavior, StateConditionBehaviorBase)
        CdaDescription("Expects a State Event (generated by Control State Behavior) and returns either a positive or negative response.")
        CdaReadableName("Check Control State")
        CdaCategory("Condition/Control")
        CdaProperties()
        <a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___widget_base.html#gaadabeed44f0653634b664191cd875742">CdaPropertiesEnd</a>()
        <a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___behavior_base.html#gacffa930ff589666f40b4cfe1101e82fe">CdaEvents</a>()
            <a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___behavior_base.html#gaf18af8294463f4c87092b0dd719ce807">CdaEvent</a>(<a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___behavior_base.html#ga2d424f469df77c82e14a26f142f08733">CdaInputEvent</a>, StateEvent, "")
        <a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___behavior_base.html#gaca0f18f1742e7e52edc48d782d902a7b">CdaEventsEnd</a>()
    <a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___behavior_base.html#ga1d66b72219f10490bc1faf9e1c2445bf">CdaBehaviorDefEnd</a>()
```

#### Adding an EventHandler to a Control

A Control can be created from a simple RenderNode using "Save as Control..." from the RenderNode's context menu in the Scene Tree View:

<div class="contents" id="bkmrk--2"><div class="contents"><div class="textblock"><div drawio-diagram="2344"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677203338.png" alt=""/></div>

</div></div></div>For creating a Control, a name can be specified:

<div class="contents" id="bkmrk--3"><div class="contents"><div class="textblock"><div drawio-diagram="2345"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677203350.png" alt=""/></div>

</div></div></div>After clicking "OK", the new Control is visible in the Solution Explorer

<div class="contents" id="bkmrk--4"><div class="contents"><div class="textblock"><div drawio-diagram="2346"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677203366.png" alt=""/></div>

</div></div></div>When right-clicking on the context menu of the new Control, the Control's properties can be edited choosing "Control Properties...":

<div class="contents" id="bkmrk--5"><div class="contents"><div class="textblock"><div drawio-diagram="2347"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677203382.png" alt=""/></div>

</div></div></div>The "Configure Properties" window offers a checkbox to choose if an EventHandler shall be added to every instance of this kind of Control that is created.

<div class="contents" id="bkmrk--6"><div class="contents"><div class="textblock"><div drawio-diagram="2348"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677203406.png" alt=""/></div>

</div></div></div>Now, whenever such a control is dragged-and-dropped to the SceneComposer scene, an EventHandler is added and the EventHandler Tab is visible in the Properties view.

<div class="contents" id="bkmrk--7"><div class="contents"><div class="textblock"><div drawio-diagram="2349"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677203421.png" alt=""/></div>

---

</div></div></div>

# Implementation

This page gives an overview of how Behaviors can be implemented.

#### **How to implement a Behavior**

There is very little difference between implementing a Widget and implementing a Behavior. Though there are some difference which will be explained below.

##### Base Class

The major difference is that Behaviors need to be derived from the [Candera::Behavior](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_behavior.html "Behaviors are small re-usable functional blocks that communicate via events. Behaviors are based on W...") base class instead of the [Candera::WidgetBase](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_widget_base.html "Abstract base class for Candera Widgets.") class. Incidentally the [Candera::Behavior](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_behavior.html "Behaviors are small re-usable functional blocks that communicate via events. Behaviors are based on W...") base class is internally derived from [Candera::WidgetBase](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_widget_base.html "Abstract base class for Candera Widgets.") further demonstrating the similarities between both.

<div class="contents" id="bkmrk-"><div class="contents"><div class="textblock">  
</div></div></div>##### Methods

<div drawio-diagram="2350"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677203692.png" alt=""/></div>

From the [Candera::WidgetBase](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_widget_base.html "Abstract base class for Candera Widgets.") the already known Init() and Update() methods are inherited.

<div class="contents" id="bkmrk-init%3A-called-once-wh"><div class="contents"><div class="textblock">- **Init:** Called once when the Widget/Behavior is created, after all Widget/Behavior properties have been set. This is used to initialize the Widget/Behavior.
- **Update:** Called once per iteration (frame). Here normally the Widget/Behavior performs its actual functionality.

</div></div></div>Newly added are the methods from [Candera::Behavior](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_behavior.html "Behaviors are small re-usable functional blocks that communicate via events. Behaviors are based on W...") which are related to event handling and the attached node:

<div class="contents" id="bkmrk-dispatchevent%3A-start"><div class="contents"><div class="textblock">- **DispatchEvent:** Starts dispatching an event with a specified strategy
- **OnEvent:** Called when an event is received by a Behavior
- **SetNode/GetNode:** Allows access to the node this behavior is attached to. Note that this uses a new data type called [Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.") which abstracts between 2D and 3D nodes. This allows creating behaviors that work und 2D and 3D without duplicating code.

</div></div></div>##### META INFO

The Meta-Info is essential to provide generic access to all properties of the widget/behavior as well as special information for Scene-Composer about the available properties, their types and functionality. The available macros to define the Meta-Info are very similar to those used by widgets.

The first set of Macros defines a Behavior either for 3D, 2D or both (mixed):

```
    ...
    <a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___behavior_base.html#gac11e42b36cc6ee1a4814d07df4abff9b">CdaBehaviorDef</a>(<<ClassName>>, <<BaseClassName>>)
        [Information][Properties][Events] 
    <a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___behavior_base.html#ga1d66b72219f10490bc1faf9e1c2445bf">CdaBehaviorDefEnd</a>() 
    ... 
```

```
    ...  
    <a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___behavior_base.html#ga0df74c6a17b4313fffc1084d9fb4e60d">CdaBehavior2DDef</a>(<<ClassName>>, <<BaseClassName>>)
        [Information][Properties][Events] 
    <a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___behavior_base.html#ga1d66b72219f10490bc1faf9e1c2445bf">CdaBehaviorDefEnd</a>() 
    ...
```

```
    ...  
    <a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___behavior_base.html#gaa6c7bb84ac98320b27829f415f095ed9">CdaBehaviorMixedDef</a>(<<ClassName>>, <<BaseClassName>>)
        [Information][Properties][Events] 
    <a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___behavior_base.html#ga1d66b72219f10490bc1faf9e1c2445bf">CdaBehaviorDefEnd</a>()
    ...  
```

All other macros are the same as where used by Widgets. This includes the macros to add additional information:

```
    ...  
    CdaReadableName("Name")
    CdaCategory("Category")  
    CdaDescription("Description")
    ...  
```

As well as the macros to define properties:

```
... 
CdaProperties() 
...     [Property List] 
<a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___widget_base.html#gaadabeed44f0653634b664191cd875742">CdaPropertiesEnd</a>() 
...
```

```
... 
CdaProperty(<<Name>>, <<Type>>, <<Setter>>, <<Getter>>) 
CdaDescription("Column used by this Item inside the Area") 
CdaCategory("Area") 
<a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___meta_info.html#ga119bef57449bd05d8b3c40d7d514e375">CdaPropertyEnd</a>() 
... 
```

The new macros for events will be described in the <span style="color: rgb(230, 126, 35);">[Event Handling](https://doc316en.candera.eu/link/570#bkmrk-event-handling)</span> chapter.   
For further information about the Meta Info please also see chapter <span style="color: rgb(230, 126, 35);">[Behavior Definition](https://doc316en.candera.eu/link/568#bkmrk-page-title)</span>.

##### RUNTIME TYPE INFORMATION

CGI-Studio uses its own RTTI system for major parts instead of relying on the RTTI of the compiler. For this a set of macros is added to each class that uses this system. In case of Behaviors only a single macro is required to be added to the code:

```
... 
<a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___behavior_base.html#gade83d69bfb6ff6767119bbc71d3b76de">CGI_BEHAVIOR_RTTI_DEFINITION</a>(<<ClassName>>) 
... 
```

<div class="contents" id="bkmrk--1"><div class="contents"><div class="textblock"><div class="fragment">---

</div></div></div></div>#### **Event Handling**

Events are one of the major new features introduced via Behaviors. This chapter shows how they can be utilized from within the Behavior code.

##### Meta Info

The first requirement is to add all events that should are either received or sent to the Meta-Info via the following macros:

```
... 
<a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___behavior_base.html#gacffa930ff589666f40b4cfe1101e82fe">CdaEvents</a>()    
   <a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___behavior_base.html#gaf18af8294463f4c87092b0dd719ce807">CdaEvent</a>(<a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___behavior_base.html#ga1f87d4147378125fc817898dd84e98eb">CdaOutputEvent</a>, <<EventType>>, "Description")    
   <a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___behavior_base.html#gaf18af8294463f4c87092b0dd719ce807">CdaEvent</a>(CdaInputEvent, <<EventType>>, "Description") 
<a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___behavior_base.html#gaca0f18f1742e7e52edc48d782d902a7b">CdaEventsEnd</a>() 
...
```

##### Sending Events

An Event can be sent by multiple different approaches.

The first is achieved by calling the DispatchEvent() method of the Behavior or any of the other available alternatives. It requires providing the dispatch strategy and event itself. When using this method the dispatching will start from the current node of the Behavior.

```
... 
    CgiStudioControl::Event event;     
    EventDispatchResult dispatchResult;     
    EventDispatchStrategy dispatchStrategy; 
 
    DispatchEvent(dispatchStrategy, event, dispatchResult); 
... 
```

<div class="header" id="bkmrk-note-that-the-event-"><div class="header"><div class="headertitle"><div class="title"><div class="contents"><div class="contents"><div class="textblock"><div class="fragment">  
</div><dl class="note"><dd></dd><dd><p class="callout info">Note that the Event and EventDispatchStrategy need to be replaced with the concrete implementations.</p>

</dd><dd></dd><dd>The second options is to directly call the DispatchEvent() method of the Event-Dispatch-Strategy. This allows to define the node from which the dispatching should start:</dd><dd></dd></dl></div></div></div></div></div></div></div>```
... 
    Candera::EventDispatchResult eventDispatchResult; 
    <a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_broadcast_event_dispatch_strategy.html" title="Broadcast strategy: the event will be dispatched first for the node with a Direct strategy and then f...">Candera::BroadcastEventDispatchStrategy</a> dispatchStrategy; 
    <a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_change_value_event.html" title="Received by a ValueBehavior to change the value. Value can be absolute or relative (will be added)...">CgiStudioControl::ChangeValueEvent</a> valueChangedEvent(<a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_variant.html">FeatStd::Variant</a>(listDataEvent->GetData()),                                                            
                                                         CgiStudioControl::ChangeValue::Absolute); 
    dispatchStrategy.<a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_broadcast_event_dispatch_strategy.html#a2147a1a0a6eb0d4f93cd32dcd9404698">DispatchEvent</a>(GetNode(), valueChangedEvent, eventDispatchResult); 
... 
```

##### Receiving Events

Receiving of events is done via the OnEvent-Method. Here normally the incoming events are type-cast to check the Event-Type and processed if applicable. Further it is possible to stop further dispatching of the event via the Dispatch-Result. In case a custom Dispatch-Result is used (again type-casting can be used) then additional information can be returned to the sender.

```
... 
void ListItemEventBehavior::OnEvent(const <a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_event.html" title="Event serves as a base class for user derived events.">FeatStd::Event</a>& event, Candera::EventDispatchResult& dispatchResult) 
{     
    const ListDataEvent* listDataEvent = Candera::Dynamic_Cast<const ListDataEvent*>(&event); 
 
    if (0 != listDataEvent) {         
        if (m_index == listDataEvent->GetIndex()) {             
            dispatchResult.StopDispatchingImmediately(); 
 
            // Do something with the data of the event         
        }     
    } 
} 
... 
```

If derived from Behaviors that also do event processing also the Base-Class OnEvent method should be called.

```
... 
Base::OnEvent(event, dispatchResult); 
... 
```

##### Custom Events

It is possible to define custom events by simply deriving from [FeatStd::Event](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_event.html "Event serves as a base class for user derived events.") class. An Event can contain any number custom data.

```
... 
class ListDataEvent : public FeatStd::Event 
{     
    public:         
        FEATSTD_RTTI_DECLARATION(); 
 
        ListDataEvent(FeatStd::Int32 index, FeatStd::Int32 value) :             
            m_index(index),            
            m_value(value)         
        {         
        } 
 
        FeatStd::Int32 GetIndex() const         
        {             
            return m_index;         
        } 
 
        FeatStd::Int32 GetData() const         
        {             
            return m_value;         
        } 
 
    private:         
        FeatStd::Int32 m_index;         
        FeatStd::Int32 m_value; 
}; 
...
```

```
... 
FEATSTD_RTTI_DEFINITION(ListDataEvent, <a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_event.html" title="Event serves as a base class for user derived events.">FeatStd::Event</a>) 
... 
```

##### FINDING BEHAVIORS

The second major advantage compared to widgets is that it is now possible to determine if any and which Behaviors are attached to a node. This can be done by iterating over all behaviors of a node via the code snipped shown below.

```
... 
<a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_behavior.html" title="Behaviors are small re-usable functional blocks that communicate via events. Behaviors are based on W...">Candera::Behavior</a>* behavior = <a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___behavior_base.html#ga69a5dc63c0630e3ee64ada60854041bb">Candera::Behavior::GetFirstBehavior</a>(node); 
 
while (0 != behavior) {     
    // do something 
 
    behavior = behavior-><a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___behavior_base.html#gaeb8b1c6d391f8a18e57bf8b3a570239c">GetNextBehavior</a>(); 
} 
...
```

For a better understanding of how events work, please see chapter <span style="color: rgb(230, 126, 35);">[Predefined Behaviors](https://doc316en.candera.eu/link/566#bkmrk-page-title)</span>.

---

#### **How to integrate a Behavior into an Application**

Behaviors are integrated into the Application similar to Widgets by adding them to the Widget-Set. How this is exactly done depends on the application.

##### Adding Behaviors manually

If the application doesn't generate a Widget-Set automatically (e.g. MLC-Templates) the Behavior needs first to be added to the Build-System by modifying the existing CMake-files

<div class="contents" id="bkmrk-widgets.cmake-%28of-ml"><div class="contents"><div class="textblock"><table border="0"><tbody><tr><td>**Widgets.cmake (of MLC-Template App)**</td></tr><tr><td>```
... 
CourierAddProjectFiles(     
    OnOffWidget.cpp     
    OnOffWidget.h     
    WidgetSet.cpp 
 
    CustomBehavior.cpp     
    CustomBehavior.h 
)
```

</td></tr></tbody></table>

</div></div></div>And then added to the Widget-Set manually via the CdaWidget-Macro:

<div class="contents" id="bkmrk-widgetset.cpp-%28of-ml"><div class="contents"><div class="textblock"><table border="0"><tbody><tr><td>**WidgetSet.cpp (of MLC-Template App)**</td></tr><tr><td>```
... 
#include "OnOffWidget.h" 
#include "CustomBehavior.h" 
... 
<a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___widget_base.html#gaf22698a7899d856911f78b17f154dcb2">CdaWidgetSet</a>(MatlabConnectorApplicationWidgetSet)     
    CdaDescription("MatlabConnectorApplication <a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___c_o_u_r_i_e_r___m_e_s_s_a_g_i_n_g.html#ggac4e3f0853af916ef773e65d02a15c95dac1224e2f0bf57d4eede7026521a13aa8">Widget</a> Set")     
    <a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___widget_base.html#gada111508ebf4b6014fe2564083936d3e">CdaWidgets</a>()         
        <a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___widget_base.html#ga311ed10f0878a04c24365fa67fd7e152">CdaWidget</a>(OnOffWidget)         
        <a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___widget_base.html#ga311ed10f0878a04c24365fa67fd7e152">CdaWidget</a>(ListDataSimBehavior) 
... 
```

</td></tr></tbody></table>

</div></div></div>##### Adding Behaviors to Default Behavior Project

If the Widget-Set is generated (Player application) then under normal conditions it is sufficient to add the code files to the Build-System (CMake). Here they are added to the "Default Behavior Project" (ControlBehaviors\_1).

To do this, create a folder (e.g. "Custom") in "cgi\_studio\_controls\\src\\Behaviors" containing the Custom-Behavior's code and a FileList.txt file containing the related code files.

<div class="contents" id="bkmrk--3"><div class="contents"><div class="textblock"><div drawio-diagram="2351"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677204085.png" alt=""/></div>

</div></div></div><div class="contents" id="bkmrk-filelist.txt-set%28fil"><div class="contents"><div class="textblock"><table border="0"><tbody><tr><td>**FileList.txt**</td></tr><tr><td>```
set(FILE_LIST     
    CustomBehavior.cpp     
    CustomBehavior.h 
) 
```

</td></tr></tbody></table>

</div></div></div>Then add the folder to the CMakeLists.txt found in "cgi\_studio\_controls\\src\\Behaviors"

<div class="contents" id="bkmrk-cmakelists.txt-...-s"><div class="contents"><div class="textblock"><table border="0"><tbody><tr><td>**CMakeLists.txt**</td></tr><tr><td>```
... 
set(PRV_WIDGET_SUBDIRS     
    Animation 
...     
    Custom 
) 
... 
```

</td></tr></tbody></table>

</div></div></div>##### Adding Behavior to new Project

Another way to add the Behavior, if the Widget-Set is generated (Player application), is to create a new project containing the custom behaviors. This approach is preferred to changing the default behavior project as no code from CGI-Studio itself is modified. Also it is easy to include these custom behaviors into other projects as well.

To start create a folder with the custom behavior code, a FileList.txt file and a CMakeLists.txt file.

<div class="contents" id="bkmrk--5"><div class="contents"><div class="textblock"><div drawio-diagram="2352"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677204106.png" alt=""/></div>

</div></div></div>  
In the FileList.txt file add the required code files.

<div class="contents" id="bkmrk-filelist.txt-set%28fil-0"><div class="contents"><div class="textblock"><table border="0"><tbody><tr><td>**FileList.txt**</td></tr><tr><td>```
set(FILE_LIST      
    FileList.txt     
    CustomSwitchRangeProcessValueBehavior.h     
    CustomSwitchRangeProcessValueBehavior.cpp 
)
```

</td></tr></tbody></table>

</div></div></div>In the CMakeList.txt file specify the name of the new project (here "ControlBehaviors\_2") and optional all subfolders which should be searched.

<div class="contents" id="bkmrk-cmakelists.txt-%23-dec"><div class="contents"><div class="textblock"><table border="0"><tbody><tr><td>**CMakeLists.txt**</td></tr><tr><td>```
# declared directories to include these directories 
# must provide a "FileList.txt" which lists all files 
set(PRV_WIDGET_SUBDIRS     
    . 
) 
 
CgiGetCurrentDir(PRV_CUR_DIR) 
CgiAddIncludeDirs(${PRV_CUR_DIR}/..) 
 
set(PRV_APP_NAME "ControlBehaviors_2") 
source_group(PRV_ALL_SRCS FILES ${PRV_WIDGET_SUBDIRS}) 
CgiCollectListedFiles(PRV_ALL_SRCS ${PRV_APP_NAME} "" LIST ${PRV_WIDGET_SUBDIRS}) 
 
CgiAddStaticLibrary(PRV_APP_TARGET_NAME ${PRV_APP_NAME} ${PRV_ALL_SRCS}
```

</td></tr></tbody></table>

</div></div></div>Finally in the "AdditionalBehaviorsPaths.txt" of the application add the new folder.

<div class="contents" id="bkmrk-additionalbehaviorsp"><div class="textblock"><table border="0"><tbody><tr><td>**AdditionalBehaviorsPaths.txt**</td></tr><tr><td>```
# Additional Behaviors 
# declare all directories to include (one directory per line) 
# these directories must provide a "FileList.txt" file which lists all files 
# all subdirectories containing a "FileList.txt" file will also be included 
# path must be relative to Default widget directory 
# lines starting with # will be ignored 
# 
 
../../../cgi_studio_controls/src/Behaviors 
../CustomBehaviors 
```

</td></tr></tbody></table>

</div></div>

# CGI-Studio Default Behaviors

CGI-Studio already provides multiple Behaviors by default which can already be used in projects. While they are also just Behaviors the follow a new concept for development which has been made possible by the new features of Behaviors.

<div class="header" id="bkmrk-basic-concept"><div class="headertitle"><div class="title">**Basic Concept**  
</div></div></div>Previously Widgets where rather self-contained blocks of functionality. For example a needle widget would receive an input value (e.g. Speed) map it to a rotation angle and apply this rotation to a node.

<div class="contents" id="bkmrk-"><div class="contents"><div class="textblock"><div drawio-diagram="2353"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677206395.png" alt=""/></div>

</div></div></div>It would be possible to recreate this exact functionality as a behavior though the decision at [Candera](http://dev.doc.cgistudio.at/APILINK/namespace_candera.html "[DataBinding_RefTypeSample]") GmbH was to have multiple smaller behaviors which each implement only a small bit of functionality. Then combine these to achieve the desired results.

In the above sample this would result in a Value-Behavior which receives the value, a Map-Behavior which maps it to an angle and a Rotation-Behavior which applies the angle as a rotation on the node.

<div class="contents" id="bkmrk--0"><div class="contents"><div class="textblock"><div drawio-diagram="2354"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677206415.png" alt=""/></div>

</div></div></div>This approach has the advantage that it drastically improves the flexibility due to the modular design. For example if the rotation shouldn't happen instantly but slowly over time an interpolation behavior can be added.

<div class="contents" id="bkmrk--1"><div class="contents"><div class="textblock"><div drawio-diagram="2355"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677206427.png" alt=""/></div>

</div></div></div>If instead of rotating a needle, a pointer is just moved forward or back to indicate the value the Rotation-Behavior can be replaced with a Translation-Behavior.

<div class="contents" id="bkmrk--2"><div class="contents"><div class="textblock"><div drawio-diagram="2356"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677206442.png" alt=""/></div>

</div></div></div>All this can be achieved by simply recombining existing behaviors without the need to code new ones.

---

#### **Event Handler Behavior**

When an Event-Handler Behavior receives an event it will pass this event to a number of Condition-Behaviors. The Condition-Behaviors can then decide if this event is "accepted" or not. In case the event is accepted all attached Action-Behaviors will be executed.

##### How to create a new Condition-Behavior

To create a custom Condition-Behavior a new Behavior derived from Candera::ConditionBehavior must be created.

In the OnEvent() method an EvaluateConditionEvent will be received which allows to get the original event via the GetTriggerEvent() method. Further the dispatchResult will be of the type ConditionEvaluationResult. To accept the event the Match() method of the result must be called.

```
... 
void ClickConditionBehavior::OnEvent(const <a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_event.html" title="Event serves as a base class for user derived events.">FeatStd::Event</a>& event, Candera::EventDispatchResult& dispatchResult) 
{     
    const <a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_evaluate_condition_event.html" title="The ConditionBehavior is referenced by an TriggerBehavior. ConditionBehavior and ActionBehavior are b...">Candera::EvaluateConditionEvent</a>* conditionBehaviorEvaluationEvent = Candera::Dynamic_Cast<const Candera::EvaluateConditionEvent*>(&event); 
 
    if (0 != conditionBehaviorEvaluationEvent) {         
        const ClickEvent* clickEvent =                
              Candera::Dynamic_Cast<const ClickEvent*>(&(conditionBehaviorEvaluationEvent-><a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_evaluate_condition_event.html#a189ee80c106180afad63fad526cc456b">GetTriggerEvent</a>())); 
 
        if (0 != clickEvent) {             
            if (clickEvent->GetClickCount() == GetClickCount()) {                 
                Candera::ConditionEvaluationResult* conditionEvaluationResult = Candera::Dynamic_Cast<Candera::ConditionEvaluationResult*>(&dispatchResult); 
 
                if (0 != conditionEvaluationResult) {                     
                    conditionEvaluationResult->Match();                 
                }             
             }         
        }     
    } 
} 
...
```

##### How to create a new Action Behavior

To create a custom Action-Behavior a new Behavior derived from [Candera::ActionBehavior](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_action_behavior.html "The Action Behavior is part of the Event Handling with Behaviors pattern. It follows the ECA (Event-C...") must be created.

In the OnEvent() method an InvokeActionEvent will be received which indicates that the action should be executed.

```
... 
void ChangeValueActionBehavior::OnEvent(const <a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_event.html" title="Event serves as a base class for user derived events.">FeatStd::Event</a>& event, Candera::EventDispatchResult& dispatchResult) 
{     
    FEATSTD_UNUSED(dispatchResult);     
    const <a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_invoke_action_event.html" title="Event to invoke an action. An input event is processed by a TriggerBehavior, which evaluates a condit...">Candera::InvokeActionEvent</a>* invokeActionEvent = Candera::Dynamic_Cast<const Candera::InvokeActionEvent*>(&event); 
 
    if (0 != invokeActionEvent) {         
        // Do something     
    } 
} 
... 
```

<div class="header" id="bkmrk-back-to-the-menu-0"><div class="headertitle"><div class="title align-left">---

</div></div></div>#### **How to handle Touch-Events**

To create a Behavior which reacts on Touch interaction a new Behavior derived from CgiStudioControl:: TouchableBehavior must be created. This class registers to the TouchSession and processes the incoming TouchSession-Events to perform a hit detection. If a hit is detected it is possible to react to Touch-Event in the behavior.

From the event the Touch-Info can be retrieved which contains important information about the Touch-State (Down, Move, Up), Pointer-Id (Multi-Touch), Source-Id (Multi-Display) and Touch-Coordinates.

```
...         
    virtual void OnEvent(const <a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_event.html" title="Event serves as a base class for user derived events.">FeatStd::Event</a>& event, Candera::EventDispatchResult& dispatchResult)         
    {             
        const Candera::TouchEvent* touchEvent = Candera::Dynamic_Cast<const Candera::TouchEvent*>(&event); 
 
        if (touchEvent != 0) {                 
            switch (touchEvent->GetTouchInfo().m_state) {                     
                case <a class="code" href="http://dev.doc.cgistudio.at/APILINK/struct_candera_1_1_touch_info.html#a0115203900e842855ca9c7dd69107721a10cbf1c0a6ea47eaef08b88eadd88607">Candera::TouchInfo::Down</a>:                         
                    //OnBeginDrag(event.GetTouchInfo().m_x, event.GetTouchInfo().m_y);                         
                    break;                     
                case <a class="code" href="http://dev.doc.cgistudio.at/APILINK/struct_candera_1_1_touch_info.html#a0115203900e842855ca9c7dd69107721a08abf72a0e7c5d81cfaf58382e1df658">Candera::TouchInfo::Move</a>:                         
                    //OnDrag(event.GetTouchInfo().m_x, event.GetTouchInfo().m_y);                         
                    break;                     
                case <a class="code" href="http://dev.doc.cgistudio.at/APILINK/struct_candera_1_1_touch_info.html#a0115203900e842855ca9c7dd69107721a5584e1acc88c0a4386c327abf73cb4cd">Candera::TouchInfo::Up</a>:                         
                    //OnEndDrag(event.GetTouchInfo().m_x, event.GetTouchInfo().m_y);                         
                    break;                     
                default: break;                 
            }             
        } 
        else {                 
            Base::OnEvent(event, dispatchResult);             
        }         
    } 
...
```

##### Manual Touch handling

If a more customized processing of Touch-Events is required, instead of deriving from CgiStudioControl:: TouchableBehavior it is also possible to manually implement Touch-Handling. First the behavior must be marked as Touchable by implementing the "virtual bool IsTouchable() const" method or simply adding the following macro.

```
... 
CGI_BEHAVIOR_IS_TOUCHABLE() 
...
```

Next the Behavior must be registered/unregistered to the Touch-Session. This allows receiving TouchSession-Events.

```
...     
void TouchableBehavior::Register()     
{         
    Deregister();         
    Candera::TouchSession::GetInstance().Register(GetTouchable());         
    m_touchSession = &Candera::TouchSession::GetInstance();    
} 
 
void TouchableBehavior::Deregister()     
{         
    if (0 != m_touchSession) {             
        m_touchSession->Deregister(GetTouchable());             
        m_touchSession = 0;         
    }     
} 
...
```

The basic touch handling (object hit detection) must be manually implemented. This can be a bit more complicated but related code can be found in the TouchBehavior::OnEvent which can be used as basis for a custom implementation.

```
...     
    void TouchableBehavior::OnEvent(const <a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_event.html" title="Event serves as a base class for user derived events.">FeatStd::Event</a>& event, Candera::EventDispatchResult& dispatchResult)
    {         
        if (!TouchSessionEventHandler::Handle(*this, event, dispatchResult)) { 
...             
            Base::OnEvent(event, dispatchResult);         
        }     
    } 
...
```

And the TouchSessionEventHandlerImpl::OnTouchSessionEvent.

```
...         
    void OnTouchSessionEvent(const Candera::TouchSessionEvent& event, Candera::TouchSessionEventDispatchResult& dispatchResult)         
    {             
        if (m_intersectionTest) {                 
            if (m_behavior.GetNode().IsEffectiveRenderingEnabled()) {                     
                <a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_courier_1_1_view.html">Courier::View</a>* view = m_behavior.<a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_courier_1_1_view.html#a873e33496b823c37e043688906db66ae" title="Returns the parent view.">GetParentView</a>();                     
                if (0 != view) {                         
                    const <a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html" title="The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.">Candera::AbstractNodePointer</a>& abstractNode = m_alternativeNode.<a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer_base.html#aa1bbbae49167cb862bdd4fbaadc3c18f">IsValid</a>() ? m_alternativeNode : m_behavior.GetNode();
                    const <a class="code" href="http://dev.doc.cgistudio.at/APILINK/struct_candera_1_1_touch_info.html" title="Description.">Candera::TouchInfo</a>& touchInfo = event.GetTouchInfo(); 
#ifdef CANDERA_2D_ENABLED
                    <a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_courier_1_1_view_scene2_d.html">Courier::ViewScene2D</a>* viewScene2D = view->ToViewScene2D();                         
                    if (0 != viewScene2D) {                             
                        <a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_node2_d.html" title="The class Node2D is an abstract base class for all 2D scene graph nodes.">Candera::Node2D</a>* node2D = abstractNode.<a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer_base.html#a332cbbcd777c748145418b8ff6911e4f">ToNode2D</a>();                             
                        if (0 != node2D) {                                 
                            Courier::ViewScene2D::CameraPtrVector& cameras = viewScene2D->GetCameraPtrVector(); 
                            for (FeatStd::SizeType i = 0; i < cameras.Size(); ++i) {
                                <a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_vector2.html" title="The default Vector2 class.">Candera::Vector2</a> touchPosition(FeatStd::Float(touchInfo.m_x), FeatStd::Float(touchInfo.m_y));
                                if ((0 != cameras[i]) && node2D-><a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_node2_d.html#a2bc3ebd04baf379858acd754f97b3354">IsPickIntersectingBoundingRectangle</a>(*cameras[i], touchPosition)) {
                                     dispatchResult.SetTouched(true);
                                     dispatchResult.SetTouchUsage(m_touchUsage);                                         
                                     return;                                     
                                }                                 
                            }                             
                        }                         
                 } 
#endif 
#ifdef CANDERA_3D_ENABLED                         
                      <a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_courier_1_1_view_scene3_d.html">Courier::ViewScene3D</a>* viewScene3D = view->ToViewScene3D();                         
                      if (0 != viewScene3D) {                             
                          <a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_node.html" title="The class Node is an abstract base class for all scene graph nodes. Each Node defines a local coordin...">Candera::Node</a>* node = abstractNode.<a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer_base.html#a2da309042e58ef8e12f580c6533050f9">ToNode</a>();                             
                          if (0 != node) {                                 
                              Courier::ViewScene3D::CameraPtrVector& cameras = viewScene3D->GetCameraPtrVector(); 
                              for (FeatStd::SizeType i = 0; i < cameras.Size(); ++i) { 
                                   <a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_camera.html" title="A Camera provides Modelview and Projection matrices. Camera is a Transformable.* The eye point is set...">Candera::Camera</a>* camera = cameras[i];                                     
                                   FeatStd::Float distance = Candera::Math::MaxFloat();
                                   if ((0 != camera) && camera-><a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_node.html#aedd4032a1ace92b9c2c7a97a9876ebf7">IsRenderingEnabled</a>() && node-><a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_node.html#a0e1a8d24555a67b3cddf6a2ceef94481">IsPickIntersectingGeometry</a>(*camera, static_cast<FeatStd::Int>(touchInfo.m_x), 
                                                                                        static_cast<FeatStd::Int>(touchInfo.m_y), distance)) { 
                                        dispatchResult.SetTouched(true);                                         
                                        dispatchResult.SetTouchUsage(m_touchUsage);                                         
                                        return;
                                   }                                 
                              }                             
                          }                         
                      } 
#endif                     
                 }                 
             }             
         }             
         else {                 
             dispatchResult.SetTouched(true);                 
             dispatchResult.SetTouchUsage(m_touchUsage);             
         }         
     } 
... 
```

---

#### **How to handle View-Activation-Events**

View-Activation-Events are events send by the View to indicate if it has been activated or deactivated. To react to these events the Behavior must register at the View as an Event-Listener.

```
... 
EventListenerAdapter m_eventListenerAdapter; 
...
```

```
...     
    CustomBehavior::CustomBehavior()     
    {         
        m_eventListenerAdapter.SetBehavior(this);         
        <a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_courier_1_1_view.html#a18dd6075cdc9de203f4b720595c58b8b">Courier::View::GetEventSource</a>().<a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_event_source.html#a82512678c455da0bfcc928d0f24b357b">AddEventListener</a>(&m_eventListenerAdapter);     
    } 
 
    CustomBehavior::~CustomBehavior ()     
    {         
        <a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_courier_1_1_view.html#a18dd6075cdc9de203f4b720595c58b8b">Courier::View::GetEventSource</a>().<a class="code" href="http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_event_source.html#a92a06e13517c1dc371fd13a0f0ba5739">RemoveEventListener</a>(&m_eventListenerAdapter);         
        m_eventListenerAdapter.SetBehavior(0);     
    } 
...
```

It is now possible to receive as [Courier::ViewActivationEvent](http://dev.doc.cgistudio.at/APILINK/class_courier_1_1_view_activation_event.html) via the OnEvent() method.

---

####   

# External Image Behaviour

### Behaviour Overview

#### Feature Description

<span lang="EN-IN">A new file resource manager called **<span style="background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;">FileSystemResourceManager</span>** has been introduced. With this new resource manager, **“FileSystem”**, users can now use it with the external resource behaviours **SetExternalBitmap** and **ExternalBitmapProvider**.</span>

<span lang="EN-IN">Previously, these behaviours only supported the **Android Resource Manager**, where users had to provide a unique resource ID (e.g., Bitmap name), and it was limited to Android.</span>

<span lang="EN-IN">With the introduction of the **FileSystemResourceManager**, the use cases of these behaviours have been extended. Now, users can provide a file path from the project file system (outside the binary</span><span lang="EN-IN" style="font-size: 10.0pt; line-height: 115%; font-family: 'Courier New';"> </span><span lang="EN-IN">ExternalResourceManagerId and ExternalResourceId are configurable properties of the External Resource behaviour.  
When the **ExternalResourceManagerId** is set to Filesystem, the behaviour enables dynamic image loading from the file system at runtime to Vram.  
Users can specify a relative image path in the ExternalResourceId property to load image files such as PNG and JPEG without embedding them directly into the binary file**.** These behaviours internally use the lodepng and IJG (libjpeg) libraries to decode, encode, and compress image data as needed.</span>

<span lang="EN-IN">A **relative path** refers to a path that is defined relative to the application’s working directory or a configured asset root.  
For example:</span>

- <span lang="EN-IN">Logos\\400x150\\CGI-Studio-Translator-final.png</span>
- <span lang="EN-IN">Logos\\400x150\\CGI-Studio-Translator-final.jpg</span>

<span lang="EN-IN">The **Filesystem resource manager** enables the management of image resources without the need to import them into the Scene Composer. Images can be accessed and loaded directly from the application’s file system at runtime.</span>

##### Supported Platforms

It supports all platforms.

##### Limitations:

1. These behaviours are used to set images on 2D bitmap nodes and cannot be used to set textures for **3D objects**.
2. There is no dropdown list available in the **ExternalResourceManagerID** property to select between **FileSystem** and **Android system** — the user must set it manually.
3. The FileSystemResourceManager supports loading and displaying only PNG and JPG images. It does not support file paths of other formats.

### Using External Resource Behaviours

#### External Bitmap Provider

1. Drag and drop the \[ Node 2D &gt; Bitmap Node \] from the toolbox onto the scene editor, or the scene tree.
2. Attach \[ Behavior &gt; External Resource &gt; Value Processing &gt; External Bitmap Provider \] in the Toolbox to the Behavior in the Extra Scene Tree of the placed bitmap node by drag-and-drop operation.
    
    <div drawio-diagram="8697"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-11/drawing-4-1762587299.png" alt=""/></div>
3. Click **External Bitmap Provider**, and in the properties panel that opens, change **ExternalResourceManagerId** from **Android** to **FileSystem** (default: **Android**).
    
    <div drawio-diagram="8696"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-11/drawing-4-1762587266.png" alt=""/></div>
4. Next, set the relative path to the external image in the **ExternalResourceId** property.  
    For example: *&lt;trunk&gt;\\cgi\_studio\_content\\Resources\\cgi\_studio\\Logos\\400x150\\CGI-Studio-Translator-final.png.*
    
    <div drawio-diagram="8695"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-11/drawing-4-1762587225.png" alt=""/></div>
5. The image will be loaded into the solution, and the image from the given relative path will be displayed on the screen.
    
    <div drawio-diagram="8694"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-11/drawing-4-1762587158.png" alt=""/></div>

#### Set External Bitmap

1. Drag and drop the \[ Node 2D &gt; Bitmap Node \] from the toolbox onto the scene editor, or the scene tree.
2. Drag and drop the \[ Controls &gt; Touchable &gt; TextButton \] from the toolbox onto the scene editor, or the scene tree. Take place this operation twice (add two button control nodes).
3. Attach \[ Behavior &gt; External Resource &gt; Action &gt; Set External Bitmap \] in the Toolbox to the Actions in the Extra Scene Tree of the placed Text Button control nodes by drag-and-drop operation.
    
    <div drawio-diagram="8698"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-11/drawing-4-1762587485.png" alt=""/></div>
4. Change the *ExternalResourceManager ID* to **FileSystem** to make the behavior support file system resources.
    
    <div drawio-diagram="8699"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-11/drawing-4-1762587544.png" alt=""/></div>
5. Click the select item button on the Image Provider in the properties panel that appears and select the External Bitmap Provider connected to the BitmapNode (this operation is performed for the two Text Button controls).
    
    <div drawio-diagram="8700"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-11/drawing-4-1762587668.png" alt=""/></div>
6. Set the relative image path to the *ExternalResourceID* property of the **Set External Bitmap** behavior in the button’s actions.(This operation is performed for both button controls that use the **Set External Bitmap** behavior.)
    
    <div drawio-diagram="8701"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-11/drawing-4-1762587741.png" alt=""/></div>
7. Run the player and press the text buttons. When each button is pressed, the image at the specified path will be loaded by the **Set External Bitmap** behaviors and displayed on the screen.
    
    <div drawio-diagram="8702"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-11/drawing-4-1762587751.png" alt=""/></div>

### External Resource Behaviour

#### Set External Bitmap Behavior

Sets **ExternalResourceId** and **ExternalResourceManagerId** properties of an associated **ExternalBitmapProvider** when its action is triggered. For details on the property items, please refer to the <span style="color: rgb(230, 126, 35);">[Action External Resource Resource](https://doc316en.candera.eu/link/1074#bkmrk-action-external-reso-1)</span>.

#### External Resource Provider Behavior

Sets an image on a render node based on the **ExternalResourceId**. For details on the property items, please refer to the <span style="color: rgb(230, 126, 35);">[Value Processing External Resource Behavior](https://doc316en.candera.eu/link/1074#bkmrk-value-processing-ext)</span>.

- If the ID is *Android*, it retrieves an external bitmap using the **ExternalResourceId** from the external resource provider specified by the **ExternalResourceManagerId**, and provides the bitmap to the associated bitmap node.
- If the ID is *FileSystem*, it retrieves the image from the specified file, converts it to a bitmap using the **FileSystemResourceManager**, and provides it to the associated bitmap node.

### Implementation Structure

1. **Included the IJG Library** in the project to decode JPEG images and convert them into pixel data.
    
    
    - The library source files are located in the cgi\_studio\_3psw\\ src\\ijg
    - Both **LodePNG** (for PNG) and **IJG** (for JPEG) are compiled as static libraries.
2. The **SetExternalBitmap** and **External** **Behaviour** functionalities already supported the **Android** **Resource Manager**.
    
    
    - Bitmaps are loaded at runtime based on the configured ExternalResourceManagerId, which determines whether to use the **File System** or **Android Resource System**.
3. **Added two new files:** FileSystemResourceManager.cpp and FileSystemResourceManager.h in the trunk.
    
    
    - Definedaclassnamed**FileSystemResourceManager**, derived from ExternalResourceManager.
4. The ExternalResourceManagerId determines which resource manager handles the request (e.g., FileResourceManager or FileSystemResourceManager).
5. The **FileSystemResourceManager** class allows loading PNG and JPEG images directly from file paths and interacts with the **IJG** and **lodepng** libraries.
    
    
    - An instance of this class is created when the user sets the **ExternalResourceManager Property ID** to **Filesystem**.
6. The **External Resource Manager** handles resources (such as images and bitmaps) that exist **outside** the project’s asset binary file.
7. Resource managers are registered by calling the **DefaultSetup**() function in . in the applications.
    
    
    - The definition of this function is located in **src\\CanderaPlatform\\Device\\Common\\Base\\DefaultSetupExternalResourceManagers.cpp**
8. When Default Setup() is executed, two static objects are created —
    
    
    - One in FileResourceManager for Android resources
    - Another in FileSystemResourceManager for file system resourcesBoth classes are derived from the common base class **ExternalResourceManager**.
9. The objects of these classes are registered using the Register() function of ExternalResourceManager, and are inserted into a **global map** for access during runtime.
10. A new class named **ImageLoader** has been defined in the newly introduced file **ImageLoader**, located in ***featstd\\src\\FeatStd\\Platform***.The **ImageLoader** class acts as a platform-independent interface for loading, decoding, and storing image files in various formats. It ensures consistent usage across different systems and simplifies image handling for the resource manager across multiple operating systems.
11. Each platform directory contains a file named **PlatformImageLoader**, which defines the platform-dependent implementation corresponding to the **ImageLoader** interface. The **PlatformImageLoader** implementation ensures that image handling is optimized and compatible with the target operating system (e.g., Windows, Linux, Android, RTOS, etc.).

#### Other Changes

1. Modification in **IdentifierHelper** Structure 
    - **File:** IdentifierHelper.cpp
    - **Why:** The resource ID (e.g., ExternalResourceId) is not a plain string but an object that can be converted to a string using IdentifierHelper::GetStringByIdentifier.
    - **Purpose:** This change allows the resource manager to handle hierarchical and structured resource paths efficiently and safely.

2. Replaced Name with Identifier Data Type 
    - The data type **Name** has been replaced with **Identifier** in all external resource management classes.
    - **Reason for Change:**
        - **Name** represents a single, non-hierarchical string label (e.g., "Logo" or "Scene1") and is suitable only for flat resources such as bitmap names or unique IDs obtained from ExternalResourceId.
        - **Identifier** supports hierarchical resource paths, improving the flexibility of resource management — mainly for the FileSystemResourceManager.
    - **Files Modified:**
        - ExternalBitmapProviderBehavior.cpp
        - ExternalBitmapProviderBehavior.h
        - ExternalResourceChangeConditionBehavior.cpp
        - ExternalResourceChangeConditionBehavior.h
        - SetExternalBitmapActionBehavior.cpp
        - SetExternalBitmapActionBehavior.h
        - ExternalBitmapProviderTest.cpp
        - ExternalResourceChangeConditionTest.cpp
        - SetExternalBitmapActionTest.cpp
3. Update in GetBitmapResource Member Function (ExternalResourceManager Class) 
    - The **GetBitmapResource** member function definition in **ExternalResourceManager** has been updated.
    - **Reason for Change:**   
        To retrieve a bitmap resource from a registered external resource manager using a **Manager ID** and a **Resource ID** (both as Name::SharedPointer).
    - The function converts the resource name to an **Identifier**, then delegates the actual bitmap retrieval to the selected resource manager.This design enables **flexible and modular access** to bitmap resources from different managers.

### Display Bitmap from File Path

1. **The Candera framework uses the LodePNG and IJG libraries to decode image files:** LodePNG handles PNG images.  
    IJG handles JPEG images.  
    During decoding, the compressed data is converted into raw bitmap data (e.g., RGBA for PNG or RGB for JPEG).

2. When the **ExternalBitmapProvider** **behavior** properties are configured with an External Resource Manager ID and a full file path,  
    The OnChanged() function of the behavior is triggered,  
    Which then calls updateImage() inside the function

3. ExternalResourceManager::GetBitmapResource (const FeatStd::Internal::Identifier::SharedPointer&amp; resourceId)
4. The GetBitmapResource() function retrieves the corresponding Resource Manager object based on the Resource Manager ID and reads the user-configured properties from ExternalBitmapProvider.
5. Depending on the ID, it invokes the LoadBitmapResource() function:
6. If the Resource ID is set to FileSystem,
7. the LoadBitmapResource() function defined inside the FileSystemResourceManager class is called.
8. LoadBitmapResource() takes the resource ID (image file path) as input and processes it based on the file extension (e.g., .png or .jpg).
9. It then calls the LoadImage() function with the file path and detected format.
10. This function is defined in ImageLoader.h and implemented in GenericImageLoader.cpp.
11. The GenericImageLoader class uses two specialized loaders:  
    GenericJpegLoader (GenericJpegLoader.cpp/h)  
    GenericPngLoader (GenericPngLoader.cpp/h)
12. When the Load() function of either loader is called:  
    The lodepng library loads PNG files.  
    The IJG (libjpeg) library loads JPEG files.
13. The image data is decoded and converted into raw pixel data, stored in a structure containing image properties (height, width, pixel info).
14. The decoded bitmap is then returned from LoadBitmapResource() to the updateImage() function of ExternalBitmapProviderBehavior, where:
15. The bitmap effect is applied.
16. The image properties are updated for display on the screen.
17. When the **SetExternalBitmapActionBehavior** is triggered (for example, by an event or property change), it sets the Resource Manager ID and Resource ID on the ExternalBitmapProviderBehavior,
18. after which the process continues as described above.

**For example: Call Stack (Reference):** Demonstrates how a relative image file path is converted into pixel data using the **lodepng** library during bitmap creation.

```
Courier::ViewScene::Update(renderHint)
CgiStudioControl::ExternalBitmapProviderBehavior::UpdateImage()
ExternalResourceManager::GetBitmapResource(resourceManagerId, resourceId)
FileSystemResourceManager::LoadBitmapResource(resourceId)   // when Manager ID = FileSystem
FeatStd::Internal::ImageLoader::LoadImage(filename, format, output)
FeatStd::Internal::Generic::GenericImageLoader::LoadImage(filename, format, output)
FeatStd::Internal::Generic::GenericPngLoader::Load(filename, output)
lodepng_decode32_file(out, w, h, filename)

```

### FileSystemResourceManager Overview:

The **FileSystemResourceManager** class, defined in *FileSystemResourceManager.h*/*cpp*, provides functionality to load bitmap images from external files. It handles image format detection, error reporting, and seamless integration with the existing resource management system.

This class is derived from the **ExternalResourceManager** base class and serves as a common parent for both the AndroidResourceManager and FileSystemResourceManager classes. It defines a shared interface and common functionality for managing and loading external resources, enabling consistent handling of bitmap images across different platforms and resource types.

#### Class Overview

The FileSystemResourceManager class includes the following member functions

<table border="1" id="bkmrk-filesystemresourcema-1" style="border-collapse: collapse; width: 800px; height: 662.094px;"><tbody><tr><td>*FileSystemResourceManager(**const** **FeatStd**::Internal::Name::**SharedPointer**&amp;resourceManagerId*</td><td>Initializes the resource manager with a unique identifier(FileSystem).  
Stores the provided resourceManagerId in the member variable m\_resourceManagerId.  
</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">*~**FileSystemResourceManager(**)*</td><td style="height: 29.7969px;"> </td></tr><tr style="height: 281.75px;"><td style="height: 281.75px;">*Bitmap::**SharedPointer** **LoadBitmapResource**(**const** **FeatStd**::Internal::Identifier::**SharedPointer**&amp; **resourceId**)*</td><td style="height: 281.75px;">Loads a bitmap image from the file system using the provided resource identifier. This function is called from ExternalBitmapProvider when the ExternalResourceManagerID is set to FileSystem.

**Path Extraction:**

Converts the identifier to a file path string using IdentifierHelper::GetStringByIdentifier.

**Format Detection:**

Determines the image format (PNG, JPEG) by checking the file extension or reading the file header.  
**File Access:**

Opens the file using FileStream. If the format is unknown, reads the header to detect PNG/JPEG signatures.  
**Image Loading:**

Uses ImageLoader::LoadImage to read the image data into a RawImageData structure.  
**Bitmap Creation:**

Calls Bitmap::Create to construct a bitmap object from the raw image data, pixel format, and other properties.  
**Return:**

Returns the created bitmap as a shared pointer

</td></tr><tr style="height: 80.1875px;"><td style="height: 80.1875px;">*bool **RegisterFileSystemResourceManager**(const FeatStd::Internal::Name::SharedPointer&amp; name)*</td><td style="height: 80.1875px;">Registers a new instance of FileSystemResourceManager with the global ExternalResourceManager registry.

Creates a new manager and calls ExternalResourceManager::Register with the provided name and manager instance.

</td></tr><tr style="height: 63.3906px;"><td style="height: 63.3906px;">*bool UnregisterFileSystemResourceManager(const FeatStd::Internal::Name::SharedPointer&amp; name*</td><td style="height: 63.3906px;">: Unregisters an existing FileSystemResourceManager from the global registry. : Unregisters an existing FileSystemResourceManager from the global registry.

</td></tr><tr style="height: 63.3906px;"><td style="height: 63.3906px;">*GetPixelFormat*()</td><td style="height: 63.3906px;">Converts an internal image format (e.g., RGBA, RGB) to the corresponding Bitmap::PixelFormat used by the Candera engine.</td></tr><tr style="height: 63.3906px;"><td style="height: 63.3906px;">*GetFileExtension()*</td><td style="height: 63.3906px;">Extracts the file extension from a file path (e.g. image path) string. Iterates through the string to find the last dot (**.**) and returns the substring after it, which is the extension.</td></tr></tbody></table>

### Dependent Classes of FileResourceManager for Converting File Path to Bitmap.

New files have been introduced to serve as a common, platform-independent interface. The files listed below have been added to the project and act as a common interface for handling different image formats. Based on the file format (PNG or JPEG), the lodepng and IJG (libjpeg) libraries are used to convert the image from the file system into pixel data

The following C++ files have been introduced:

<table id="bkmrk-genericimageloader.c" style="width: 70%;"><tbody><tr><td style="width: 100%;">GenericImageLoader.cpp/h

GenericJpegLoader.cpp/h   
GenericPngLoader.cpp/h   
ImageLoader.h

</td></tr></tbody></table>


#### Details about the classes defined above these files.

<table border="1" id="bkmrk-imageloader-the-imag" style="border-collapse: collapse; width: 800px;"><tbody><tr><td style="width: 193.5px;">ImageLoader</td><td style="width: 605.5px;">1. The ImageLoader class provides a platform-independent interface for loading image files (such as PNG, JPEG, BMP) into raw image data structures that can be used by the application.
2. **Identifier** supports hierarchical resource paths, improving the flexibility of resource management — mainly for the FileSystemResourceManager.

</td></tr><tr><td style="width: 193.5px;">GenericImageLoader</td><td style="width: 605.5px;">1. The GenericImageLoader class provides a unified, platform-independent interface for loading and storing image files in various formats (such as PNG and JPEG).
2. **Supported Formats:** PNG (calls GenericPngLoader::Store), JPEG (calls GenericJpegLoader::Store).
3. This class has one main member function,*LoadImage*(**const** **FeatStd**::Charfilename, ImageInputFormat), which loads and decodes an image file (e.g., PNG or JPEG) from disk using the file pathprovidedby **FileSystemResourceManager**, and stores it into a raw image structure.

</td></tr><tr><td style="width: 193.5px;">GenericJpegLoader</td><td style="width: 605.5px;">1. The GenericJpegLoader class is designed to load and decode JPEG image files into a raw image data structure that can be used FileSystemResourceManager.
2. This class has one main member function,*GenericJpegLoader*::Load(**const** **FeatStd**::*Char* filename, RawImageData&amp; output),which is called form the **GenericImageLoader** class when the file format is JPEG. It loads and decodes the JPEG image file into a **RawImageData** structure that can be used by the application.This function uses the **IJG** (Independent JPEG Group) library, a widely used open-source JPEG decoder, to read the JPEG file specified by filename(e.g. .png/jpeg). It decodes the compressed JPEG data into uncompressed pixel data and fills the output structure with the image’s width, height, pixel format, and pixel buffer.

</td></tr><tr><td style="width: 193.5px;">GenericPngLoader</td><td style="width: 605.5px;">1. The GenericPngLoader class is responsible for loading and decoding PNG image files into a raw image.
2. Uses a standard PNG decoding library (such as lodepng) to parse and decompress PNG images.
3. GenericPngLoader::Load(const FeatStd::Char filename, RawImageData&amp; output) is to load and decode a PNG image file into a raw image data structure (RawImageData) for use in ExteranalResourceBehaviors.
4. This function uses a PNG decoding library (Lodepng) to read the PNG file specified by filename. It parses the PNG format, decompresses the image data, and fills the output structure with the image’s width, height, pixel format, and pixel buffer.

</td></tr></tbody></table>

### Filesystem vs. Android Resource Manager ID

Resource managers in CGI Studio abstract the way external resources (such as images) are loaded and managed. Two commonly used managers are the FileSystem Resource Manager and the Android System Resource Manager. Each is designed for different platforms and use cases.

#### FileSystem Resource Manager

**Purpose:**

The FileSystem Resource Manager (FileSystemResourceManager) is designed to load resources directly from the device’s filesystem. It is platform-agnostic and works on desktop, embedded, and other systems where resources are stored as files.

Uses file paths or hierarchical identifiers to locate resources (e.g., images) on disk.

Supports common image formats like PNG and JPEG, with automatic format detection.

Reads files using standard file I/O operations and Convert to bitmap with help of Loadepng and ijg Opensource libraries.

#### Android System Resource Manager

**Purpose:**

The Android System Resource Manager is tailored for Android platforms, leveraging the Android resource system to access images and other assets packaged within the APK or available via Android’s resource APIs.

**How It Works:**

Uses Android resource IDs (not file paths) to locate resources.

Resources are typically bundled with the application and managed by the Android OS.

The resources read from the

- May have limitations on dynamic resource updates, as resources are often static once packaged.

#### Benefits of FileSystem Resource Manager :

1. Platform Flexibility:  
    Works across multiple platforms, not limited to Android.

2. Dynamic Resource Updates:  
    Resources can be updated, replaced, or added at runtime without rebuilding the application.

# Predefined Behaviors

# Examples Using Predefined Behaviors

<div class="contents" id="bkmrk-thermometer-example-"></div>#### Thermometer Example

1\. Drag&amp;drop a Slider Control and a Text Value Control from the Controls Panel of the Toolbox to the Scene Editor or the Scene Tree.

<div class="contents" id="bkmrk-"><div class="contents"><div class="textblock"><div drawio-diagram="2375"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217038.png" alt=""/></div>

</div></div></div>2\. Set the Slider's Minimum to "-50,00" and the maximum to "+50,00".

<div class="contents" id="bkmrk--0"><div class="contents"><div class="textblock"><div drawio-diagram="2376"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217059.png" alt=""/></div>

</div></div></div>3\. Change the Text Value Control's "Format Text" Property to "%d °C".

<div class="contents" id="bkmrk--1"><div class="contents"><div class="textblock"><div drawio-diagram="2377"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217081.png" alt=""/></div>

</div></div></div>4\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Forward Value](https://doc316en.candera.eu/link/647#bkmrk-forward-value)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Value Processing Behavior](https://doc316en.candera.eu/link/647#bkmrk-page-title)</span>) from the Behaviors Panel of the Toolbox onto the Slider in the Scene Tree.

<div class="contents" id="bkmrk--2"><div class="contents"><div class="textblock"><div drawio-diagram="2378"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217098.png" alt=""/></div>

</div></div></div>This is what the Scene Tree should look like now:

<div class="contents" id="bkmrk--3"><div class="contents"><div class="textblock"><div drawio-diagram="2379"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217109.png" alt=""/></div>

</div></div></div>5\. Select the <span style="color: rgb(230, 126, 35);">[Forward Value](https://doc316en.candera.eu/link/647#bkmrk-forward-value)</span> Behavior in the right side of the Scene Tree view. Set the <span style="color: rgb(230, 126, 35);">[Forward Value](https://doc316en.candera.eu/link/647#bkmrk-forward-value)</span> Behavior's Target Node to the Text Value Control you have added to the scene in step 1 by clicking on the magnifying glass on the right of the input field and selecting the Text Value Control in the "Choose Item" dialog.

<div class="contents" id="bkmrk--4"><div class="contents"><div class="textblock"><div drawio-diagram="2380"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217134.png" alt=""/></div>

</div></div></div>After that, the <span style="color: rgb(230, 126, 35);">[Forward Value](https://doc316en.candera.eu/link/647#bkmrk-forward-value)</span> Behavior's Properties will look as follows.

<div class="contents" id="bkmrk--5"><div class="contents"><div class="textblock"><div drawio-diagram="2381"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217146.png" alt=""/></div>

</div></div></div>6\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Value Behavior](https://doc316en.candera.eu/link/647#bkmrk-value)</span> (which is a <span style="color: rgb(230, 126, 35);">[Value Processing Behavior](https://doc316en.candera.eu/link/647#bkmrk-page-title)</span>) from the Behaviors Panel of the Toolbox onto the Text Value Control in the Scene Tree.

<div class="contents" id="bkmrk--6"><div class="contents"><div class="textblock"><div drawio-diagram="2382"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217166.png" alt=""/></div>

</div></div></div>7\. Select the [<span style="color: rgb(230, 126, 35);">Value Behavior</span>](https://doc316en.candera.eu/link/647#bkmrk-value) on the right side of the Scene Tree View. Set the <span style="color: rgb(230, 126, 35);">[Value Behavior](https://doc316en.candera.eu/link/647#bkmrk-value)</span>'s AcceptValueEvent Property to "true" by checking the checkbox.

<div class="contents" id="bkmrk--7"><div class="contents"><div class="textblock"><div drawio-diagram="2383"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217184.png" alt=""/></div>

</div></div></div>8\. Select the "Text Value" Control in the Scene Tree Panel and drag&amp;drop two <span style="color: rgb(230, 126, 35);">[Action on Value](https://doc316en.candera.eu/link/647#bkmrk-action-on-value)</span> Behaviors (which are <span style="color: rgb(230, 126, 35);">[Value Processing Behaviors](https://doc316en.candera.eu/link/647#bkmrk-page-title)</span>) from the Behaviors Panel of the Toolbox onto the "Receivers" of the "Value Behavior" in right side of the SceneTree Panel.

<div class="contents" id="bkmrk--8"><div class="contents"><div class="textblock"><div drawio-diagram="2384"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217211.png" alt=""/></div>

</div></div></div>9\. Add a condition to the <span style="color: rgb(230, 126, 35);">[Action on Value](https://doc316en.candera.eu/link/647#bkmrk-action-on-value)</span> Behaviors you have just added by dragging&amp;dropping a <span style="color: rgb(230, 126, 35);">[Check processed Value](https://doc316en.candera.eu/link/597#bkmrk-check-processed-valu)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Condition - Control Behavior](https://doc316en.candera.eu/link/597#bkmrk-control-condition-be-0)</span>) onto each of the <span style="color: rgb(230, 126, 35);">[Action on Value](https://doc316en.candera.eu/link/647#bkmrk-action-on-value)</span> Behaviors you have just added.

<div class="contents" id="bkmrk--9"><div class="contents"><div class="textblock"><div drawio-diagram="2385"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217229.png" alt=""/></div>

</div></div></div>10\. Configure one of the Conditions to "LowerThan 0,00" and the other one to "GreaterThan 0,00".

<div class="contents" id="bkmrk--10"><div class="contents"><div class="textblock"><div drawio-diagram="2386"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217255.png" alt=""/></div>

</div></div></div>11\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Set Color](https://doc316en.candera.eu/link/582#bkmrk-set-color)</span> SetColor Action (which is a <span style="color: rgb(230, 126, 35);">[Action - Property Behavior](https://doc316en.candera.eu/link/582#bkmrk-property-action-beha)</span>) from the Toolbox view onto the Actions of each of the <span style="color: rgb(230, 126, 35);">[Action on Value](https://doc316en.candera.eu/link/647#bkmrk-action-on-value)</span> Behaviors in the SceneTree.

<div class="contents" id="bkmrk--11"><div class="contents"><div class="textblock"><div drawio-diagram="2387"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217282.png" alt=""/></div>

</div></div></div>12\. Set the color to Blue on the <span style="color: rgb(230, 126, 35);">[Action on Value](https://doc316en.candera.eu/link/647#bkmrk-action-on-value)</span> Behavior with the Condition `Lower Than 0,00` and set the Color to Red on the <span style="color: rgb(230, 126, 35);">[Action on Value](https://doc316en.candera.eu/link/647#bkmrk-action-on-value)</span> Behavior with the Condition `Greater Than 0,00`.

<div class="contents" id="bkmrk--12"><div class="contents"><div class="textblock"><div drawio-diagram="2388"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217306.png" alt=""/></div>

</div></div></div>13\. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

<div class="contents" id="bkmrk--13"><div class="contents"><div class="textblock"><div drawio-diagram="2389"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217319.png" alt=""/></div>

</div></div></div>14\. The text color of the Text Value Control displaying the temperature in degrees celcius will turn blue once the value of the slider gets lower than zero and it will turn red once the value becomes greater than zero.

<div class="contents" id="bkmrk--14"><div class="contents"><div class="contents"><div class="textblock"><div drawio-diagram="2391"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217397.png" alt=""/></div>

</div></div></div></div>
#### Align Pivot Example

1\. Drag&amp;drop a Group from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree. Choose the follwing two Images from the Construction Kit (in the Solution Explorer) and drag&amp;drop them onto the Group node in the SceneTree: GaugeBmP and GaugeNeedleBmp

<div class="contents" id="bkmrk--15"><div class="contents"><div class="contents" id="bkmrk--16"><div class="contents"><div class="textblock"><div drawio-diagram="2395"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217510.png" alt=""/></div>

</div></div></div></div></div>2\. Arrange the Controls in the SceneEditor so that "GaugeNeedleBmp" is the last entry of the Group Node in the Scene Tree.

<div class="contents" id="bkmrk--17"><div class="contents"><div class="contents" id="bkmrk--18"><div class="contents"><div class="textblock"><div drawio-diagram="2396"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217525.png" alt=""/></div>

</div></div></div></div></div>3\. Select the "Pivot only" Translation tool in the toolbar and move the pivot of "GaugeBmP" to the center of the image and the pivot of "GaugeNeedleBmp" to the usual center of rotation of a gauge needle.

<div class="contents" id="bkmrk--19"><div class="contents"><div class="contents" id="bkmrk--20"><div class="contents"><div class="textblock"><div drawio-diagram="2400"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217601.png" alt=""/></div>

</div></div></div></div></div>4\. Drag&amp;drop the <span style="color: rgb(230, 126, 35);">[Align Pivot](https://doc316en.candera.eu/link/598#bkmrk-align-pivot)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control Behavior](https://doc316en.candera.eu/link/598#bkmrk-page-title)</span>) from the Toolbox view onto the Group node in the SceneTree.

<div class="contents" id="bkmrk--21"><div class="contents"><div class="contents" id="bkmrk--22"><div class="contents"><div class="textblock"><div drawio-diagram="2402"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217632.png" alt=""/></div>

</div></div></div></div></div>5\. The <span style="color: rgb(230, 126, 35);">[Align Pivot](https://doc316en.candera.eu/link/598#bkmrk-align-pivot)</span> Behavior does not have any properties to set. The pivots of the Bitmap Nodes are aligned and the result can be seen in the SceneEditor: The Needle image is positioned correctly in the Gauge image.

<div class="contents" id="bkmrk-don%27t-forget-to-rese"><div class="contents"><div class="contents"><div class="textblock"><div drawio-diagram="2403"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217647.png" alt=""/></div>

</div><div class="textblock"><dl class="note"><dt><p class="callout info">Don't forget to reset the Translation tool to "Pivot and Object".  
</p>

<div drawio-diagram="2405"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217718.png" alt=""/></div>

</dt></dl></div></div></div></div>
#### <span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Arc Align Example  
</span></span>

1\. Drag&amp;drop a Group from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree. And add four Text Nodes to this group by dragging&amp;dropping them onto the Group node in the SceneTree.

<div class="contents" id="bkmrk--23"><div class="contents"><div class="textblock"><div drawio-diagram="2407"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217869.png" alt=""/></div>

</div></div></div>2\. Change the texts of the Text Nodes to "Text", "Text\_1" etc. according to their names in the Scene Tree View.

<div class="contents" id="bkmrk--24"><div class="contents"><div class="textblock"><div drawio-diagram="2408"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217884.png" alt=""/></div>

</div></div></div>3\. Drag&amp;drop the <span style="color: rgb(230, 126, 35);">[Arc Align](https://doc316en.candera.eu/link/598#bkmrk-arc-align)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control Behavior](https://doc316en.candera.eu/link/598#bkmrk-page-title)</span>) from the Toolbox view onto the Group node in the SceneTree.

<div class="contents" id="bkmrk--25"><div class="contents"><div class="textblock"><div drawio-diagram="2410"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217902.png" alt=""/></div>

</div></div></div>4\. Configure the <span style="color: rgb(230, 126, 35);">[Arc Align](https://doc316en.candera.eu/link/598#bkmrk-arc-align)</span> Behavior with a radius of 50 and AngleMinMax values of 0 and 90.

<div class="contents" id="bkmrk--26"><div class="contents"><div class="textblock"><div drawio-diagram="2411"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217920.png" alt=""/></div>

</div></div></div>5\. The result can be seen in the Scene Editor view: All nodes are aligned like an arc from 0 to 90 degrees.

<div class="contents" id="bkmrk--27"><div class="contents"><div class="contents"><div class="textblock"><div drawio-diagram="2412"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677217929.png" alt=""/></div>

</div></div></div></div>
#### <span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Enable Rendering Example  
</span></span>

<div class="contents" id="bkmrk--28"></div>1\. Drag&amp;drop a TextButton Control from the Controls Panel of the Toolbox to the SceneEditor or the Scene Tree.

<div class="contents" id="bkmrk--29"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--30"><div class="contents"><div class="textblock"><div drawio-diagram="2426"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677221451.png" alt=""/></div>

</div></div></div></div></div></div>2\. Drag&amp;drop the <span style="color: rgb(230, 126, 35);">[OnClick](https://doc316en.candera.eu/link/598#bkmrk-onclick)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control Behavior](https://doc316en.candera.eu/link/598#bkmrk-page-title)</span>) from the Toolbox view onto the TextButton node in the SceneTree. Additionally, drag&amp;drop the <span style="color: rgb(230, 126, 35);">[Enable Rendering](https://doc316en.candera.eu/link/582#bkmrk-enable-rendering)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Action - Property Behavior](https://doc316en.candera.eu/link/582#bkmrk-property-action-beha)</span>) from the Toolbox view onto the "Actions" field of the OnClick Behavior on the right side of the Scene Tree.

<div class="contents" id="bkmrk--31"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--32"><div class="contents"><div class="textblock"><div drawio-diagram="2427"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677221472.png" alt=""/></div>

</div></div></div></div></div></div>3\. Check the properties of the <span style="color: rgb(230, 126, 35);">[Enable Rendering](https://doc316en.candera.eu/link/582#bkmrk-enable-rendering)</span> Behavior. We want to change the visibility of the TextButton to invisible when it has been clicked (onClick), so the checkbox "Visible" has to remain unchecked.

<div class="contents" id="bkmrk--33"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--34"><div class="contents"><div class="textblock"><div drawio-diagram="2428"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677221485.png" alt=""/></div>

</div></div></div></div></div></div>4\. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

<div class="contents" id="bkmrk--35"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="textblock"><div drawio-diagram="2429"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677221499.png" alt=""/></div>

</div></div></div></div></div></div>
#### <span style="color: rgb(0, 0, 0);">Format </span>String Example

1\. Drag&amp;drop a TextButton Control from the Controls panel and a TextNode from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree. Set the TextButton's Text to "Format String".

<div class="contents" id="bkmrk--36"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--37"><div class="contents"><div class="textblock"><div drawio-diagram="2430"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677221666.png" alt=""/></div>

</div></div></div></div></div></div></div></div>2\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Value Processing Behavior](https://doc316en.candera.eu/link/647#bkmrk-page-title)</span>) from the Toolbox view onto the TextNode in the SceneTree. Set the <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior's "AcceptValueEvent" property to true.

<div class="contents" id="bkmrk--38"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--39"><div class="contents"><div class="textblock"><div drawio-diagram="2431"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677221695.png" alt=""/></div>

</div></div></div></div></div></div></div></div>3\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Format String](https://doc316en.candera.eu/link/647#bkmrk-format-string)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Value Processing Behavior](https://doc316en.candera.eu/link/647#bkmrk-value)</span>) from the Toolbox view onto the <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior's Receivers.

<div class="contents" id="bkmrk--40"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--41"><div class="contents"><div class="textblock"><div drawio-diagram="2432"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677221725.png" alt=""/></div>

</div></div></div></div></div></div></div></div>4\. Set the <span style="color: rgb(230, 126, 35);">[Format String](https://doc316en.candera.eu/link/647#bkmrk-format-string)</span> Behavior's "Text" property to "Score: %0.2f", in order to represent the value as formatted string.

<div class="contents" id="bkmrk--42"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--43"><div class="contents"><div class="textblock"><div drawio-diagram="2433"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677221738.png" alt=""/></div>

</div></div></div></div></div></div></div></div>5\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Send Value as Event](https://doc316en.candera.eu/link/582#bkmrk-send-value-as-event)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Action - Property Behavior](https://doc316en.candera.eu/link/582#bkmrk-property-action-beha)</span>) from the Toolbox view onto the TextButton's Actions on the right side of the SceneTree view.

<div class="contents" id="bkmrk--44"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--45"><div class="contents"><div class="textblock"><div drawio-diagram="2434"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677221762.png" alt=""/></div>

</div></div></div></div></div></div></div></div>6\. Configure the <span style="color: rgb(230, 126, 35);">[Send Value as Event](https://doc316en.candera.eu/link/582#bkmrk-send-value-as-event)</span> Behavior's Value property to datatype Int32 and value 10. Adjust the behavior's TargetNode by clicking on the magnifying glass on the right of the property.

<div class="contents" id="bkmrk--46"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--47"><div class="contents"><div class="textblock"><div drawio-diagram="2435"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677221773.png" alt=""/></div>

</div></div></div></div></div></div></div></div>7\. Set the scene's TextNode as TargetNode for the <span style="color: rgb(230, 126, 35);">[Send Value as Event](https://doc316en.candera.eu/link/582#bkmrk-send-value-as-event)</span> Behavior: After clicking the magnifying glass in the properties panel, the "Select Item" Dialog is opened. Select the scene's TextNode and press OK.

<div class="contents" id="bkmrk--48"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--49"><div class="contents"><div class="textblock"><div drawio-diagram="2436"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677221811.png" alt=""/></div>

</div></div></div></div></div></div></div></div>8\. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

<div class="contents" id="bkmrk--50"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--51"><div class="contents"><div class="textblock"><div drawio-diagram="2437"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677221826.png" alt=""/></div>

</div></div></div></div></div></div></div></div>9\. When the TextButton is pressed, the Int32 value of 10 will be sent to the TextNode. This value is accepted by the TextNode and the behavior FormatString formats it to "Score: 10.00".

<div class="contents" id="bkmrk--52"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="textblock"><div drawio-diagram="2438"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677221861.png" alt=""/></div>

</div></div></div></div></div></div></div>
#### <span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Forward Value Example  
</span></span>

<div class="contents" id="bkmrk-1.-drag%26drop-a-slide-1"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--53"></div></div><div class="header" id="bkmrk-1.-drag%26drop-a-slide-2"><div class="header"><div class="headertitle"><div class="title">1. Drag&amp;drop a Slider Control and a Text Value Control the Controls panel and a TextNode from the Controls Panel of the Toolbox to the Scene Editor or the Scene Tree.  
</div></div></div></div><div class="header" id="bkmrk--54"><div class="header"><div class="headertitle"><div class="title"><div class="contents"><div class="contents"><div class="textblock"><div drawio-diagram="2443"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677222589.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div></div>2\. Position the Slider Control and Text Value Control in the Scene Editor View.

<div class="contents" id="bkmrk--55"><div class="contents"><div class="contents"><div class="contents"><div class="header" id="bkmrk--56"><div class="header"><div class="headertitle"><div class="title"><div class="contents"><div class="contents"><div class="textblock"><div drawio-diagram="2444"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677222616.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div></div>3\. Change the Text Value Control's "Format Text" Property to "Value: %d".

<div class="contents" id="bkmrk--57"><div class="contents"><div class="contents"><div class="contents"><div class="header" id="bkmrk--58"><div class="header"><div class="headertitle"><div class="title"><div class="contents"><div class="contents"><div class="textblock"><div drawio-diagram="2445"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677222688.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div></div>4\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Forward Value](https://doc316en.candera.eu/link/647#bkmrk-forward-value)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Value Processing Behavior](https://doc316en.candera.eu/link/647#bkmrk-page-title)</span>) from the Behaviors Panel of the Toolbox onto the Slider in the Scene Tree.

<div class="contents" id="bkmrk--59"><div class="contents"><div class="contents"><div class="contents"><div class="header" id="bkmrk--60"><div class="header"><div class="headertitle"><div class="title"><div class="contents"><div class="contents"><div class="textblock"><div drawio-diagram="2446"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677222705.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div></div>5\. Select the <span style="color: rgb(230, 126, 35);">[Forward Value](https://doc316en.candera.eu/link/647#bkmrk-forward-value)</span> Behavior in the right side of the Scene Tree view. Set the <span style="color: rgb(230, 126, 35);">[Forward Value](https://doc316en.candera.eu/link/647#bkmrk-forward-value)</span> Behavior's Target Node to the Text Value Control you have added to the scene in step 1 by clicking on the magnifying glass on the right of the input field and selecting the Text Value Control in the Choose Item dialog.

<div class="contents" id="bkmrk--61"><div class="contents"><div class="contents"><div class="contents"><div class="header" id="bkmrk--62"><div class="header"><div class="headertitle"><div class="title"><div class="contents"><div class="contents"><div class="textblock"><div drawio-diagram="2447"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677222726.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div></div>After that, the [Forward Value](https://doc316en.candera.eu/link/647#bkmrk-forward-value) Behavior's Properties will look as follows.

<div class="contents" id="bkmrk--63"><div class="contents"><div class="contents"><div class="contents"><div class="header" id="bkmrk--64"><div class="header"><div class="headertitle"><div class="title"><div class="contents"><div class="contents"><div class="textblock"><div drawio-diagram="2448"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677222739.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div></div>6\. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

<div class="contents" id="bkmrk--65"><div class="contents"><div class="contents"><div class="contents"><div class="header" id="bkmrk--66"><div class="header"><div class="headertitle"><div class="title"><div class="contents"><div class="contents"><div class="textblock"><div drawio-diagram="2449"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677222755.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div></div>7\. When manipulating the slider, the Value of the Text Value Control changes according to the alteration on the slider.

<div class="contents" id="bkmrk--67"><div class="contents"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="headertitle"><div class="title"><div class="contents"><div class="textblock"><div drawio-diagram="2450"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677222799.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>
#### <span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Hover - Hover Leave Example  
</span></span>

1\. Drag&amp;drop a Text Control from the Controls Panel of the Toolbox to the Scene Editor or the Scene Tree and change its text to "Hover".

<div class="contents" id="bkmrk--68"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--69"><div class="contents"><div class="textblock"><div drawio-diagram="2451"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677223245.png" alt=""/></div>

</div></div></div></div></div></div></div>2\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Hover](https://doc316en.candera.eu/link/598#bkmrk-hover)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control Behavior](https://doc316en.candera.eu/link/598#bkmrk-page-title)</span>) and a <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control - Internal Behavior](https://doc316en.candera.eu/link/598#bkmrk-internal-control-beh)</span>) from the Behaviors Panel of the ToolBox onto the Text Control in the SceneTree. The <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> Behavior is needed in order for the Text Control to receive Input Events.

<div class="contents" id="bkmrk--70"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--71"><div class="contents"><div class="textblock"><div drawio-diagram="2452"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677223271.png" alt=""/></div>

</div></div></div></div></div></div></div>3\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[SetColor](https://doc316en.candera.eu/link/582#bkmrk-set-color)</span> Behavior (which is an <span style="color: rgb(230, 126, 35);">[Action - Property Behavior](https://doc316en.candera.eu/link/582#bkmrk-property-action-beha)</span>) onto the Actions of the <span style="color: rgb(230, 126, 35);">[Hover](https://doc316en.candera.eu/link/598#bkmrk-hover)</span> Behavior on the right side of the SceneTree view.

<div class="contents" id="bkmrk--72"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--73"><div class="contents"><div class="textblock"><div drawio-diagram="2453"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677223296.png" alt=""/></div>

</div></div></div></div></div></div></div>4\. Select the <span style="color: rgb(230, 126, 35);">[Set Color](https://doc316en.candera.eu/link/582#bkmrk-set-color)</span> Behavior and change the Color to red.

<div class="contents" id="bkmrk--74"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--75"><div class="contents"><div class="textblock"><div drawio-diagram="2454"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677223305.png" alt=""/></div>

</div></div></div></div></div></div></div>5\. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

<div class="contents" id="bkmrk--76"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--77"><div class="contents"><div class="textblock"><div drawio-diagram="2455"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677223315.png" alt=""/></div>

</div></div></div></div></div></div></div>6\. When moving the mouse over the Text Control, the text color changes to red.

<div class="contents" id="bkmrk--78"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--79"><div class="contents"><div class="textblock"><div drawio-diagram="2456"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677223338.png" alt=""/></div>

</div></div></div></div></div></div></div>7\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Hover Leave](https://doc316en.candera.eu/link/598#bkmrk-hoverleave-0)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control Behavior](https://doc316en.candera.eu/link/598#bkmrk-page-title)</span>) onto the TextNode.

<div class="contents" id="bkmrk--80"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--81"><div class="contents"><div class="textblock"><div drawio-diagram="2457"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677223364.png" alt=""/></div>

</div></div></div></div></div></div></div>8\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Set Color](https://doc316en.candera.eu/link/582#bkmrk-set-color)</span> Behavior (which is an <span style="color: rgb(230, 126, 35);">[Action - Property Behavior](https://doc316en.candera.eu/link/582#bkmrk-property-action-beha)</span>) onto the Actions of the <span style="color: rgb(230, 126, 35);">[HoverLeave](https://doc316en.candera.eu/link/598#bkmrk-hoverleave-0)</span> Behavior on the right side of the SceneTree view.

<div class="contents" id="bkmrk--82"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--83"><div class="contents"><div class="textblock"><div drawio-diagram="2458"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677223385.png" alt=""/></div>

</div></div></div></div></div></div></div>9\. Select the <span style="color: rgb(230, 126, 35);">[Set Color](https://doc316en.candera.eu/link/582#bkmrk-set-color)</span> Behavior and change the Color to green.

<div class="contents" id="bkmrk--84"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--85"><div class="contents"><div class="textblock"><div drawio-diagram="2459"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677223403.png" alt=""/></div>

</div></div></div></div></div></div></div>10\. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

<div class="contents" id="bkmrk--86"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--87"><div class="contents"><div class="textblock"><div drawio-diagram="2460"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677223416.png" alt=""/></div>

</div></div></div></div></div></div></div>11\. When moving the mouse over the Text Control, the text color changes to red (as it did before). When moving the mouse away again, the Text Control's color changes to green. Whenever you hover, it's getting red, when leaving, it's turning green.

<div class="contents" id="bkmrk--88"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--89"><div class="contents"><div class="textblock"><div drawio-diagram="2461"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677223532.png" alt=""/></div>

</div></div></div></div></div></div></div>
#### <span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Interpolate Value Example  
</span></span>

<div class="contents" id="bkmrk--90"><div class="contents" id="bkmrk--91"><div class="contents" id="bkmrk--92"></div></div></div>1\. Drag&amp;drop a TextButton Control from the Controls panel and a TextNode from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree. Set the TextButton's Text to "Count to 10".

<div class="contents" id="bkmrk--93"><div class="contents"><div class="textblock"><div drawio-diagram="2472"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677224131.png" alt=""/></div>

</div></div></div>2\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Value Behavior](https://doc316en.candera.eu/link/647#bkmrk-value)</span> (which is a <span style="color: rgb(230, 126, 35);">[Value Processing Behavior](https://doc316en.candera.eu/link/647#bkmrk-page-title)</span>) from the Behaviors Panel of the Toolbox onto the TextNode in the Scene Tree.

<div class="contents" id="bkmrk--94"><div class="contents"><div class="textblock"><div drawio-diagram="2473"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677224160.png" alt=""/></div>

</div></div></div>3\. Select the <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior in the right side of the Scene Tree view. Set the <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior's AcceptValueEvent Property to "true" by checking the checkbox.

<div class="contents" id="bkmrk--95"><div class="contents"><div class="textblock"><div drawio-diagram="2474"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677224173.png" alt=""/></div>

</div></div></div>4\. Drag&amp;drop an <span style="color: rgb(230, 126, 35);">[Interpolate Value](https://doc316en.candera.eu/link/647#bkmrk-interpolate-value)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Value Processing Behavior](https://doc316en.candera.eu/link/647#bkmrk-page-title)</span>) onto the <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior's Receivers in the right side of the Scene Tree Panel.

<div class="contents" id="bkmrk--96"><div class="contents"><div class="textblock"><div drawio-diagram="2475"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677224204.png" alt=""/></div>

</div></div></div>5\. Select the <span style="color: rgb(230, 126, 35);">[Interpolate Value](https://doc316en.candera.eu/link/647#bkmrk-interpolate-value)</span> Behavior on the right side of the Scene Tree View and set the UnitsPerSecond to 1,00 in the Properties view on the bottom right.

<div class="contents" id="bkmrk--97"><div class="contents"><div class="textblock"><div drawio-diagram="2476"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677224216.png" alt=""/></div>

</div></div></div>6\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Format String](https://doc316en.candera.eu/link/647#bkmrk-format-string)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Value Processing Behavior](https://doc316en.candera.eu/link/647#bkmrk-page-title)</span>) from the Toolbox onto the <span style="color: rgb(230, 126, 35);">[Interpolate Value](https://doc316en.candera.eu/link/647#bkmrk-interpolate-value)</span> Behavior's Receivers on the right side of the Scene Tree Panel.

<div class="contents" id="bkmrk--98"><div class="contents"><div class="textblock"><div drawio-diagram="2477"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677224250.png" alt=""/></div>

</div></div></div>7\. Select the <span style="color: rgb(230, 126, 35);">[Format String](https://doc316en.candera.eu/link/647#bkmrk-format-string)</span> Behavior on the right side of the Scene Tree view and set the Text property to "%d" in the Properties view.

<div class="contents" id="bkmrk--99"><div class="contents"><div class="textblock"><div drawio-diagram="2478"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677224267.png" alt=""/></div>

</div></div></div>8\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Send Value as Event](https://doc316en.candera.eu/link/582#bkmrk-send-value-as-event)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Action - Property Behavior](https://doc316en.candera.eu/link/582#bkmrk-property-action-beha)</span>) from the Toolbox view onto the TextButton's Actions on the right side of the SceneTree view.

<div class="contents" id="bkmrk--100"><div class="contents"><div class="textblock"><div drawio-diagram="2479"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677224298.png" alt=""/></div>

</div></div></div>9\. Select the <span style="color: rgb(230, 126, 35);">[Send Value as Event](https://doc316en.candera.eu/link/582#bkmrk-send-value-as-event)</span> Behavior on the right side of the Scene Tree Panel. Set the Value property to datatype "Float" and value "10" in the Properties view. Adjust the behavior's TargetNode by clicking on the magnifying glass on the right of the property.

<div class="contents" id="bkmrk--101"><div class="contents"><div class="textblock"><div drawio-diagram="2480"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677224312.png" alt=""/></div>

</div></div></div>10\. Set the scene's TextNode as TargetNode for the <span style="color: rgb(230, 126, 35);">[Send Value as Event](https://doc316en.candera.eu/link/582#bkmrk-send-value-as-event)</span> Behavior: After clicking the magnifying glass in the properties panel, the "Select Item" Dialog is opened. Select the scene's TextNode and press OK.

<div class="contents" id="bkmrk--102"><div class="contents"><div class="textblock"><div drawio-diagram="2481"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677224346.png" alt=""/></div>

</div></div></div>11\. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

<div class="contents" id="bkmrk--103"><div class="contents"><div class="textblock"><div drawio-diagram="2482"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677224359.png" alt=""/></div>

</div></div></div>12\. When clicking on the TextButton, the value 10 gets sent to the TextNode, but the TextNode doesn't change to 10 immediately. The [Interpolate Value](https://doc316en.candera.eu/link/647#bkmrk-interpolate-value) Behavior makes the TextNode count up from 0 to 10 in one step per second.

<div class="contents" id="bkmrk--104"><div class="contents"><div class="textblock"><div drawio-diagram="2485"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677224502.png" alt=""/></div>

</div></div></div>
#### <span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Move Node Example  
</span></span>

 1. Drag&amp;drop a TextButton Control from the Controls Panel of the Toolbox to the SceneEditor or the Scene Tree and change the Text to "Move Node"

<div class="contents" id="bkmrk--105"><div class="contents"><div class="textblock"><div drawio-diagram="2462"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677223703.png" alt=""/></div>

</div></div></div>2\. Select the TextButton in the Scene Tree View and delete all Behaviors that are automatically attached to the TextButton from the right side of the Scene Tree View.

<div class="contents" id="bkmrk--106"><div class="contents"><div class="textblock"><div drawio-diagram="2463"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677223735.png" alt=""/></div>

</div></div></div>3\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Value Processing Behavior](https://doc316en.candera.eu/link/647#bkmrk-page-title)</span>) and a <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control - Internal Behavior](https://doc316en.candera.eu/link/598#bkmrk-internal-control-beh)</span>) from the Behaviors Panel of the ToolBox onto the TextButton Control in the SceneTree. The <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> Behavior is needed in order for the TextButton Control to receive Input Events.

<div class="contents" id="bkmrk--107"><div class="contents"><div class="textblock"><div drawio-diagram="2464"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677223783.png" alt=""/></div>

</div></div></div>4\. Select the <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior on the right of the Scene Tree View and set the <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior's AcceptValueEvent Property to "true" by checking the checkbox.

<div class="contents" id="bkmrk--108"><div class="contents"><div class="textblock"><div drawio-diagram="2465"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677223801.png" alt=""/></div>

</div></div></div>5\. Drag&amp;drop the <span style="color: rgb(230, 126, 35);">[Move Node](https://doc316en.candera.eu/link/647#bkmrk-move-node)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Value Processing - Transformation Behavior](https://doc316en.candera.eu/link/647#bkmrk-transformation-value)</span>) from the Behaviors Panel of the ToolBox onto the <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior's Receivers.

<div class="contents" id="bkmrk--109"><div class="contents"><div class="textblock"><div drawio-diagram="2466"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677223828.png" alt=""/></div>

</div></div></div>6\. Drag&amp;drop an <span style="color: rgb(230, 126, 35);">[OnClick](https://doc316en.candera.eu/link/598#bkmrk-onclick)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control Behavior](https://doc316en.candera.eu/link/598#bkmrk-page-title)</span>) from the Behaviors Panel of the ToolBox onto the TextButton Control.

<div class="contents" id="bkmrk--110"><div class="contents"><div class="textblock"><div drawio-diagram="2467"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677223850.png" alt=""/></div>

</div></div></div>7\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Send Value as Event](https://doc316en.candera.eu/link/582#bkmrk-send-value-as-event)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Action - Property Behavior](https://doc316en.candera.eu/link/582#bkmrk-property-action-beha)</span>) from the Behaviors Panel of the ToolBox onto the <span style="color: rgb(230, 126, 35);">[OnClick](https://doc316en.candera.eu/link/598#bkmrk-onclick)</span> Behavior's Actions Property.

<div class="contents" id="bkmrk--111"><div class="contents"><div class="textblock"><div drawio-diagram="2468"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677223875.png" alt=""/></div>

</div></div></div>8\. Select the <span style="color: rgb(230, 126, 35);">[Send Value as Event](https://doc316en.candera.eu/link/582#bkmrk-send-value-as-event)</span> Behavior on the right side of the Scene Tree View and set the value to datatype "Float" value "100,00" in the Properties view.

<div class="contents" id="bkmrk--112"><div class="contents"><div class="textblock"><div drawio-diagram="2469"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677223899.png" alt=""/></div>

</div></div></div>9\. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

<div class="contents" id="bkmrk--113"><div class="contents"><div class="textblock"><div drawio-diagram="2470"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677223911.png" alt=""/></div>

</div></div></div>10\. When Clicking on the TextButton in the Player, the Button moves to position 50, 50.

<div class="contents" id="bkmrk--114"><div class="contents"><div class="textblock"><div drawio-diagram="2471"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677223936.png" alt=""/></div>

</div>---

</div></div>#### OnClick Example

1\. Drag&amp;drop a SolidColorNode from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree.

<div class="contents" id="bkmrk--116"><div class="contents"><div class="contents" id="bkmrk--117"><div class="contents"><div class="textblock"><div drawio-diagram="2507"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677228014.png" alt=""/></div>

</div></div></div></div></div>2\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[OnClick](https://doc316en.candera.eu/link/598#bkmrk-onclick)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control Behavior](https://doc316en.candera.eu/link/598#bkmrk-page-title)</span>) and a <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control - Internal Behavior](https://doc316en.candera.eu/link/598#bkmrk-internal-control-beh)</span>) from the Behaviors Panel of the ToolBox onto the SolidColorNode in the SceneTree. The <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> Behavior is needed in order for the TextButton Control to receive Input Events.

<div class="contents" id="bkmrk--118"><div class="contents"><div class="contents" id="bkmrk--119"><div class="contents"><div class="textblock"><div drawio-diagram="2510"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677228098.png" alt=""/></div>

</div></div></div></div></div>3\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Set Color](https://doc316en.candera.eu/link/582#bkmrk-set-color)</span> SetColor Behavior (which is a <span style="color: rgb(230, 126, 35);">[Action - Property Behavior](https://doc316en.candera.eu/link/582#bkmrk-property-action-beha)</span>) from the Toolbox view onto the Actions of the <span style="color: rgb(230, 126, 35);">[OnClick](https://doc316en.candera.eu/link/598#bkmrk-onclick)</span> Behaviors in the SceneTree.

<div class="contents" id="bkmrk--120"><div class="contents"><div class="contents" id="bkmrk--121"><div class="contents"><div class="textblock"><div drawio-diagram="2509"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677228070.png" alt=""/></div>

</div></div></div></div></div>4\. Select the <span style="color: rgb(230, 126, 35);">[Set Color](https://doc316en.candera.eu/link/582#bkmrk-set-color)</span> Behavior and change the Color to red.

<div class="contents" id="bkmrk--122"><div class="contents"><div class="contents" id="bkmrk--123"><div class="contents"><div class="textblock"><div drawio-diagram="2511"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677228106.png" alt=""/></div>

</div></div></div></div></div>5\. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

<div class="contents" id="bkmrk--124"><div class="contents"><div class="contents" id="bkmrk--125"><div class="contents"><div class="textblock"><div drawio-diagram="2512"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677228115.png" alt=""/></div>

</div></div></div></div></div>6\. When clicking on the SolidColorNode, the SolidColorNode's color changes to red.

<div class="contents" id="bkmrk--126"><div class="contents"><div class="contents" id="bkmrk--127"><div class="contents"><div class="textblock"><div drawio-diagram="2513"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677228134.png" alt=""/></div>

</div></div></div></div></div>
#### <span style="vertical-align: inherit;"><span style="vertical-align: inherit;">OnPressed Example</span></span>

1\. Drag&amp;drop a SolidColorNode from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree.

<div class="contents" id="bkmrk--128"><div class="contents"><div class="textblock"><div drawio-diagram="2515"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677228338.png" alt=""/></div>

</div></div></div>2\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[OnPressed](https://doc316en.candera.eu/link/598#bkmrk-onpressed)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control Behavior](https://doc316en.candera.eu/link/598#bkmrk-page-title)</span>) and a <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control - Internal Behavior](https://doc316en.candera.eu/link/598#bkmrk-internal-control-beh)</span>) from the Behaviors Panel of the ToolBox onto the SolidColorNode in the SceneTree. The <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> Behavior is needed in order for the TextButton Control to receive Input Events.

<div class="contents" id="bkmrk--129"><div class="contents"><div class="textblock"><div drawio-diagram="2516"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677228366.png" alt=""/></div>

</div></div></div>3\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Set Color](https://doc316en.candera.eu/link/582#bkmrk-set-color)</span> SetColor Behavior (which is a <span style="color: rgb(230, 126, 35);">[Action - Property Behavior](https://doc316en.candera.eu/link/582#bkmrk-property-action-beha)</span>) from the Toolbox view onto the Actions of the <span style="color: rgb(230, 126, 35);">[OnPressed](https://doc316en.candera.eu/link/598#bkmrk-onpressed)</span> Behaviors in the SceneTree.

<div class="contents" id="bkmrk--130"><div class="contents"><div class="textblock"><div drawio-diagram="2518"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677228409.png" alt=""/></div>

</div></div></div>4\. Select the <span style="color: rgb(230, 126, 35);">[Set Color](https://doc316en.candera.eu/link/582#bkmrk-set-color)</span> Behavior and change the Color to red.

<div class="contents" id="bkmrk--131"><div class="contents"><div class="textblock"><div drawio-diagram="2519"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677228439.png" alt=""/></div>

</div></div></div>5\. Save your solution and start the CGIPlayer through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

<div class="contents" id="bkmrk--132"><div class="contents"><div class="textblock"><div drawio-diagram="2520"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677228460.png" alt=""/></div>

</div></div></div>6\. When pressing the mouse left button on the SolidColorNode, the SolidColorNode's color changes to red.

<div class="contents" id="bkmrk--133"><div class="contents"><div class="textblock"><div drawio-diagram="2522"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677228477.png" alt=""/></div>

</div></div></div>
#### Perform Transition Requests Example

1\. Drag&amp;drop a SolidColorNode from the "Nodes 2D" Panel of the Toolbox to the 2D scene "Scene2D" in the SceneEditor or the Scene Tree view. Change the Scale X and Scale Y propertes to 3,0 each in the Properties view.

<div class="contents" id="bkmrk--134"><div class="contents"><div class="textblock"><div drawio-diagram="2530"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677460607.png" alt=""/></div>

</div></div></div>2\. Open the already existing 3D scene "Scene3D" by double-clicking it in the Solution Explorer on the left.

<div class="contents" id="bkmrk--135"><div class="contents"><div class="textblock"><div drawio-diagram="2531"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677460624.png" alt=""/></div>

</div></div></div>3\. Drag&amp;drop a Cube Control from the Controls Panel of the Toolbox to the 3D Scene "Scene3D" in SceneEditor or the Scene Tree view.

<div class="contents" id="bkmrk--136"><div class="contents"><div class="textblock"><div drawio-diagram="2532"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677460648.png" alt=""/></div>

</div></div></div>4\. Select the Cube Control in the Scene Tree view and set the Position properties to (0, 0, 0).

<div class="contents" id="bkmrk--137"><div class="contents"><div class="textblock"><div drawio-diagram="2533"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677460668.png" alt=""/></div>

</div></div></div>5\. Switch back to the 2D scene "Scene2D" by double-clicking it in the Solution Explorer on the left.

<div class="contents" id="bkmrk--138"><div class="contents"><div class="textblock"><div drawio-diagram="2534"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677460682.png" alt=""/></div>

</div></div></div>6\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[OnClick](https://doc316en.candera.eu/link/598#bkmrk-onclick)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control Behavior](https://doc316en.candera.eu/link/598#bkmrk-page-title)</span>) and a <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control - Internal Behavior](https://doc316en.candera.eu/link/598#bkmrk-internal-control-beh)</span>) from the Behaviors Panel of the ToolBox onto the SolidColorNode in the SceneTree. The <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> Behavior is needed in order for the TextButton Control to receive Input Events.

<div class="contents" id="bkmrk--139"><div class="contents"><div class="textblock"><div drawio-diagram="2535"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677460707.png" alt=""/></div>

</div></div></div>7\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Perform Transition Requests](https://doc316en.candera.eu/link/582#bkmrk-perform-transition-r-0)</span> Perform Transition Requests Behavior (which is a <span style="color: rgb(230, 126, 35);">[Action - Transition Behavior](https://doc316en.candera.eu/link/582#bkmrk-transition-action-be)</span>) from the Toolbox view onto the Actions of the <span style="color: rgb(230, 126, 35);">[OnClick](https://doc316en.candera.eu/link/598#bkmrk-onclick)</span> Behaviors in right side of the SceneTree view.

<div class="contents" id="bkmrk--140"><div class="contents"><div class="textblock"><div drawio-diagram="2536"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677460734.png" alt=""/></div>

</div></div></div>8\. Drag&amp;drop two <span style="color: rgb(230, 126, 35);">[Transition Request](https://doc316en.candera.eu/link/582#bkmrk-transition-request-0)</span> Transition Request Behaviors (which are <span style="color: rgb(230, 126, 35);">[Action - Transition Behaviors](https://doc316en.candera.eu/link/582#bkmrk-transition-action-be)</span>) from the Toolbox view onto the Requests of the <span style="color: rgb(230, 126, 35);">[Perform Transition Requests](https://doc316en.candera.eu/link/582#bkmrk-perform-transition-r-0)</span> Perform Transition Requests Behavior in the right side of the SceneTree view.

<div class="contents" id="bkmrk--141"><div class="contents"><div class="textblock"><div drawio-diagram="2537"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677460756.png" alt=""/></div>

</div></div></div>9\. Select the first one of the two <span style="color: rgb(230, 126, 35);">[Transition Request](https://doc316en.candera.eu/link/582#bkmrk-transition-request-0)</span> Transition Request Behaviors. Set the <span style="color: rgb(230, 126, 35);">[Transition Request](https://doc316en.candera.eu/link/582#bkmrk-transition-request-0)</span> Transition Request Behavior's Identifier to the current scene (Scene2D) by clicking on the magnifying glass on the right of the input field and selecting the current 2D Scene (Scene2D) in the "Choose Item" dialog.

<div class="contents" id="bkmrk--142"><div class="contents"><div class="textblock"><div drawio-diagram="2538"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677460782.png" alt=""/></div>

</div></div></div>After that, the <span style="color: rgb(230, 126, 35);">[Transition Request](https://doc316en.candera.eu/link/582#bkmrk-transition-request-0)</span> Transition Request Behavior's Properties will look as follows.

<div class="contents" id="bkmrk--143"><div class="contents"><div class="textblock"><div drawio-diagram="2539"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677460805.png" alt=""/></div>

</div></div></div>10\. Now, select the second <span style="color: rgb(230, 126, 35);">[Transition Request](https://doc316en.candera.eu/link/582#bkmrk-transition-request-0)</span> Transition Request Behaviors. Set the <span style="color: rgb(230, 126, 35);">[Transition Request](https://doc316en.candera.eu/link/582#bkmrk-transition-request-0)</span> Transition Request Behavior's Identifier to the 3D scene (Scene3D) by clicking on the magnifying glass on the right of the input field and selecting the 3D Scene (Scene3D) in the "Choose Item" dialog.

<div class="contents" id="bkmrk--144"><div class="contents"><div class="textblock"><div drawio-diagram="2540"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677460836.png" alt=""/></div>

</div></div></div>After that, the <span style="color: rgb(230, 126, 35);">[Transition Request](https://doc316en.candera.eu/link/582#bkmrk-transition-request-0)</span> Transition Request Behavior's Properties will look as follows.

<div class="contents" id="bkmrk--145"><div class="contents"><div class="textblock"><div drawio-diagram="2541"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677460854.png" alt=""/></div>

</div></div></div>11\. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

<div class="contents" id="bkmrk--146"><div class="contents"><div class="textblock"><div drawio-diagram="2542"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677460867.png" alt=""/></div>

</div></div></div>12\. You can see your 2D scene with the white SolidColorNode. When clicking on the SolidColorNode, a transition to the 3D scene is performed.

<div class="contents" id="bkmrk-initially-displaying"><div class="contents"><div class="contents"><div class="textblock"><table border="0"><tbody><tr><td valign="top"><div class="image"><div drawio-diagram="2543"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677460901.png" alt=""/></div>

</div></td><td valign="top"><div class="image"><div drawio-diagram="2544"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677460916.png" alt=""/></div>

</div></td></tr><tr><td align="center">*Initially displaying Scene2D*</td><td align="center">*After Clicking, displaying Scene3D*</td></tr></tbody></table>

</div></div></div></div>
#### Render Child Nodes Example

1\. Drag&amp;drop two TextButton Controls from the Controls Panel of the Toolbox to the already existing Group Node of the Scene Tree and change their texts to "Button 1" and "Button 2".

<div class="contents" id="bkmrk--147"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--148"><div class="contents"><div class="textblock"><div drawio-diagram="2545"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677461065.png" alt=""/></div>

</div></div></div></div></div></div>2\. Drag&amp;drop an <span style="color: rgb(230, 126, 35);">[Event Handler](https://doc316en.candera.eu/link/598#bkmrk-event-handler)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control Behavior](https://doc316en.candera.eu/link/598#bkmrk-page-title)</span>) from the Toolbox view onto the Group Node in the Scene Tree view.

<div class="contents" id="bkmrk--149"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--150"><div class="contents"><div class="textblock"><div drawio-diagram="2546"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677461099.png" alt=""/></div>

</div></div></div></div></div></div>3\. Select the Group Node in the Scene Tree view and drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Check Click](https://doc316en.candera.eu/link/597#bkmrk-check-click)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Condition - Input Behavior](https://doc316en.candera.eu/link/597#bkmrk-%C2%A0-1)</span>) from the Toolbox view onto the Condition of the Group Node's EventHandler in the right side of the Scene Tree view.

<div class="contents" id="bkmrk--151"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--152"><div class="contents"><div class="textblock"><div drawio-diagram="2547"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677461124.png" alt=""/></div>

</div></div></div></div></div></div>4\. Keep the Group Node selected in the Scene Tree view and drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Render Child Nodes](https://doc316en.candera.eu/link/647#bkmrk-render-child-nodes)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Action - Property](https://doc316en.candera.eu/link/582#bkmrk-property-action-beha)</span> Behavior) from the Toolbox view onto the "Actions" of the Group Node's EventHandler on the right side of the Scene Tree view.

<div class="contents" id="bkmrk--153"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--154"><div class="contents"><div class="textblock"><div drawio-diagram="2548"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677461147.png" alt=""/></div>

</div></div></div></div></div></div>5\. Select the "Render Child Nodes" Behavior in the right side of the Scene Tree view. In the Properties view set Index to "1,0" and OperationMode to to "SingleNode".

<div class="contents" id="bkmrk--155"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--156"><div class="contents"><div class="textblock"><div drawio-diagram="2549"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677461167.png" alt=""/></div>

</div></div></div></div></div></div>6\. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

<div class="contents" id="bkmrk--157"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--158"><div class="contents"><div class="textblock"><div drawio-diagram="2550"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677461178.png" alt=""/></div>

</div></div></div></div></div></div>7\. After clicking on one of the two buttons (no matter which one), "Button 2" will disappear and "Button 1" will get rendered.

<div class="contents" id="bkmrk--159"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--160"><div class="contents"><div class="textblock"><div drawio-diagram="2551"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677461200.png" alt=""/></div>

</div></div></div></div></div></div>8\. Stop the Player by pressing on the Stop Button (next to the option "Generate and Play") and change the "Render Child Nodes" Behavior's Property: Set Index to "2,0".

<div class="contents" id="bkmrk--161"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--162"><div class="contents"><div class="textblock"><div drawio-diagram="2552"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677461219.png" alt=""/></div>

</div></div></div></div></div></div>9\. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

<div class="contents" id="bkmrk--163"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--164"><div class="contents"><div class="textblock"><div drawio-diagram="2553"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677461245.png" alt=""/></div>

</div></div></div></div></div></div>10\. After clicking on one of the two buttons (no matter which one), "Button 1" will disappear and "Button 2" will get rendered.

<div class="contents" id="bkmrk--165"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--166"><div class="contents"><div class="textblock"><div drawio-diagram="2555"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677461271.png" alt=""/></div>

</div></div></div></div></div></div>#### <span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Send Value As Event Example</span>  
</span>

<div class="contents" id="bkmrk-1.-drag%26drop-two-tex-1"><div class="contents"><div class="contents"><div class="header" id="bkmrk-1.-drag%26drop-two-tex-2"><div class="header"><div class="headertitle"><div class="title">1. Drag&amp;drop two TextButton Controls and a TextValue Control from the Controls Panel of the Toolbox to the Scene Editor or Scene Tree.  
</div></div></div></div><div class="header" id="bkmrk--167"><div class="header"><div class="headertitle"><div class="title"><div class="contents"><div class="contents"><div class="textblock"><div drawio-diagram="2559"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677461437.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>2\. Rename the TextButton Controls to "DecreaseButton" and "IncreaseButton". Change the text of the DecreaseButton to "-" and the text of the IncreaseButton to "+".

<div class="contents" id="bkmrk--168"><div class="contents"><div class="contents"><div class="header" id="bkmrk--169"><div class="header"><div class="headertitle"><div class="title"><div class="contents"><div class="contents"><div class="textblock"><div drawio-diagram="2564"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677461590.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>3\. Change the Text of the TextValue Control to "Count: %d" and arrange the three Controls as in the right picture below.

<div class="contents" id="bkmrk--170"><div class="contents"><div class="contents"><div class="header" id="bkmrk--171"><div class="header"><div class="headertitle"><div class="title"><div class="contents"><div class="contents"><div class="textblock"><div drawio-diagram="2565"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677461636.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>4\. The value of the TextValue Control should be increased or decreased according to the pressed Button. To connect the TextButton Controls with the TextValue Control select one of the TextButtons. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Send Value as Event](https://doc316en.candera.eu/link/582#bkmrk-send-value-as-event)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Action - Property Behavior](https://doc316en.candera.eu/link/582#bkmrk-property-action-beha)</span>) onto the Actions sections of both of the TextButton Controls' EventHandler.

<div class="contents" id="bkmrk--172"><div class="contents"><div class="contents"><div class="header" id="bkmrk--173"><div class="header"><div class="headertitle"><div class="title"><div class="contents"><div class="contents"><div class="textblock"><div drawio-diagram="2566"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677461678.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>5\. Select the "SendValueAsEvent" Behavior of the "DecreaseButton" and change the Value to "-1,00" in the Properties view. As the value should change relative to the current value, the "ChangeValue" property has to be set to "Relative". Select the "SendValueAsEvent" Behavior of the "IncreaseButton" and change the Value to "1,00" in the Properties view. Again, the "ChangeValue" property has to be set to "Relative"

<div class="contents" id="bkmrk--174"><div class="contents"><div class="contents"><div class="header" id="bkmrk--175"><div class="header"><div class="headertitle"><div class="title"><div class="contents"><div class="contents"><div class="textblock"><div drawio-diagram="2567"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677461711.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>6\. Both "SendValueAsEvent" Behaviors need to be configured with the "Text Value" Control as TargetNode by clicking on the magnifying glass on the right of the property.

<div class="contents" id="bkmrk--176"><div class="contents"><div class="contents"><div class="header" id="bkmrk--177"><div class="header"><div class="headertitle"><div class="title"><div class="contents"><div class="contents"><div class="textblock"><div drawio-diagram="2568"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677461727.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>7\. Set the scene's TextValue Node as TargetNode for the <span style="color: rgb(230, 126, 35);">[Send Value as Event](https://doc316en.candera.eu/link/582#bkmrk-send-value-as-event)</span> Behavior: After clicking the magnifying glass in the properties panel, the "Select Item" Dialog is opened. Select the scene's TextValue Node and press OK. Repeat this for the second "SendValueAsEvent" Behavior.

<div class="contents" id="bkmrk--178"><div class="contents"><div class="contents"><div class="header" id="bkmrk--179"><div class="header"><div class="headertitle"><div class="title"><div class="contents"><div class="contents"><div class="textblock"><div drawio-diagram="2569"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677461761.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>8\. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

<div class="contents" id="bkmrk--180"><div class="contents"><div class="contents"><div class="header" id="bkmrk--181"><div class="header"><div class="headertitle"><div class="title"><div class="contents"><div class="contents"><div class="textblock"><div drawio-diagram="2570"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677461780.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>9\. When pressing the "-" Button, the Count value is decreased by one. When pressing the "+" Button, the Count value is increased by one.

<div class="contents" id="bkmrk--182"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="headertitle"><div class="title"><div class="contents"><div class="textblock"><div drawio-diagram="2571"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677461844.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>
#### <span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Set Alpha Value Example</span></span>

1\. Drag&amp;drop a TextButton Control from the Controls Panel of the Toolbox to the SceneEditor or the Scene Tree and change the Text to "Set Alpha Value"

<div class="contents" id="bkmrk--183"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents" id="bkmrk--184"><div class="contents"><div class="textblock"><div drawio-diagram="2577"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677462561.png" alt=""/></div>

</div></div></div></div></div></div></div></div>2\. Select the TextButton in the Scene Tree View and delete all Behaviors that are automatically attached to the TextButton from the right side of the Scene Tree View.

<div class="contents" id="bkmrk-before-deleting-all-"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents" id="bkmrk-before-deleting-all--1"><div class="contents"><div class="textblock"><table border="0"><tbody><tr><td valign="top"><div class="image"><div drawio-diagram="2578"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677462609.png" alt=""/></div>

</div></td><td valign="top"><div class="image"><div drawio-diagram="2579"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677462633.png" alt=""/></div>

</div></td></tr><tr><td align="center">*before deleting all behaviors*</td><td align="center">*after deleting behaviors*</td></tr></tbody></table>

</div></div></div></div></div></div></div></div>3\. Select the TextButton Control in the SceneTree View and decrease its Alpha Value e.g. to 0,5 in the Item Tab of the Properties Panel.

<div class="contents" id="bkmrk--185"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents" id="bkmrk--186"><div class="contents"><div class="textblock"><div drawio-diagram="2580"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677462646.png" alt=""/></div>

</div></div></div></div></div></div></div></div>4\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Value Processing Behavior](https://doc316en.candera.eu/link/647#bkmrk-page-title)</span>) and a <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control - Internal Behavior](https://doc316en.candera.eu/link/598#bkmrk-internal-control-beh)</span>) from the Behaviors Panel of the ToolBox onto the TextButton Control in the SceneTree. The [<span style="color: rgb(230, 126, 35);">Handle Control State</span>](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state) Behavior is needed in order for the TextButton Control to receive Input Events.

<div class="contents" id="bkmrk--187"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents" id="bkmrk--188"><div class="contents"><div class="textblock"><div drawio-diagram="2582"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677462713.png" alt=""/></div>

</div></div></div></div></div></div></div></div>5\. Select the <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior on the right of the Scene Tree View and set the <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior's AcceptValueEvent Property to "true" by checking the checkbox.

<div class="contents" id="bkmrk--189"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents" id="bkmrk--190"><div class="contents"><div class="textblock"><div drawio-diagram="2583"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677462728.png" alt=""/></div>

</div></div></div></div></div></div></div></div>6\. Drag&amp;drop the <span style="color: rgb(230, 126, 35);">[Set Alpha Value](https://doc316en.candera.eu/link/647#bkmrk-set-alpha-value)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Value Processing - Effects Behavior](https://doc316en.candera.eu/link/647#bkmrk-effects-value-proces)</span>) from the Behaviors Panel of the ToolBox onto the <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior's Receivers.

<div class="contents" id="bkmrk--191"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents" id="bkmrk--192"><div class="contents"><div class="textblock"><div drawio-diagram="2584"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677462757.png" alt=""/></div>

</div></div></div></div></div></div></div></div>7\. Drag&amp;drop an <span style="color: rgb(230, 126, 35);">[OnClick](https://doc316en.candera.eu/link/598#bkmrk-onclick)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control Behavior](https://doc316en.candera.eu/link/598#bkmrk-page-title)</span>) from the Behaviors Panel of the ToolBox onto the TextButton Control.

<div class="contents" id="bkmrk--193"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents" id="bkmrk--194"><div class="contents"><div class="textblock"><div drawio-diagram="2586"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677462788.png" alt=""/></div>

</div></div></div></div></div></div></div></div>8\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Send Value as Event](https://doc316en.candera.eu/link/582#bkmrk-send-value-as-event)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Action - Property Behavior](https://doc316en.candera.eu/link/582#bkmrk-property-action-beha)</span>) from the Behaviors Panel of the ToolBox onto the [OnClick](https://doc316en.candera.eu/link/598#bkmrk-onclick) Behavior's Actions Property.

<div class="contents" id="bkmrk--195"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents" id="bkmrk--196"><div class="contents"><div class="textblock"><div drawio-diagram="2590"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677462835.png" alt=""/></div>

</div></div></div></div></div></div></div></div>9\. Select the <span style="color: rgb(230, 126, 35);">[Send Value as Event](https://doc316en.candera.eu/link/582#bkmrk-send-value-as-event)</span> Behavior on the right side of the Scene Tree View and set the value to datatype "Float" value "1,00" in the Properties view.

<div class="contents" id="bkmrk--197"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents" id="bkmrk--198"><div class="contents"><div class="textblock"><div drawio-diagram="2591"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677462851.png" alt=""/></div>

</div></div></div></div></div></div></div></div>10\. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

<div class="contents" id="bkmrk--199"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents" id="bkmrk--200"><div class="contents"><div class="textblock"><div drawio-diagram="2592"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677462862.png" alt=""/></div>

</div></div></div></div></div></div></div></div>11\. When Clicking on the TextButton in the Player, the Button moves to position 50, 50.

<div class="contents" id="bkmrk--201"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents" id="bkmrk--202"><div class="contents"><div class="textblock"><div drawio-diagram="2593"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677462890.png" alt=""/></div>

</div></div></div></div></div></div></div></div>
#### Set Image Example

1\. Drag&amp;drop a TextButton Control from the Controls Panel and a BitmapNode from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree.

<div class="contents" id="bkmrk--203"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents" id="bkmrk--204"><div class="contents"><div class="textblock"><div drawio-diagram="2594"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677463007.png" alt=""/></div>

</div></div></div></div></div></div></div></div>2\. Position the TextButton Control and the BitmapNode next to each other in the Scene Editor.

<div class="contents" id="bkmrk--205"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents" id="bkmrk--206"><div class="contents"><div class="textblock"><div drawio-diagram="2595"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677463025.png" alt=""/></div>

</div></div></div></div></div></div></div></div>3\. Drag&amp;Drop a <span style="color: rgb(230, 126, 35);">[Provide Image](https://doc316en.candera.eu/link/598#bkmrk-provide-image)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control - Public Property Behavior](https://doc316en.candera.eu/link/598#bkmrk-public-property-cont)</span>) from the Behaviors Panel of the ToolBox onto the BitmapNode in the Scene Tree view.

<div class="contents" id="bkmrk--207"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents" id="bkmrk--208"><div class="contents"><div class="textblock"><div drawio-diagram="2596"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677463058.png" alt=""/></div>

</div></div></div></div></div></div></div></div>4\. Select the TextButton Control in the Scene Tree view and change its Text to "Set Image" in the Properties view.

<div class="contents" id="bkmrk--209"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents" id="bkmrk--210"><div class="contents"><div class="textblock"><div drawio-diagram="2597"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677463073.png" alt=""/></div>

</div></div></div></div></div></div></div></div>5\. Drag&amp;Drop a <span style="color: rgb(230, 126, 35);">[Set Image](https://doc316en.candera.eu/link/582#bkmrk-set-image)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Action - Property Behavior](https://doc316en.candera.eu/link/582#bkmrk-property-action-beha)</span>) from the Behaviors Panel of the ToolBox onto the "Actions" field of the TextButton Control's EventHandler on the right side of the Scene Tree.

<div class="contents" id="bkmrk--211"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents" id="bkmrk--212"><div class="contents"><div class="textblock"><div drawio-diagram="2598"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677463107.png" alt=""/></div>

</div></div></div></div></div></div></div></div>6\. Select the newly added <span style="color: rgb(230, 126, 35);">[Set Image](https://doc316en.candera.eu/link/582#bkmrk-set-image)</span> Behavior in right side of the Scene Tree view. Adjust the "Set Image" Behavior's Image Property by clicking the magnifying glass on the right of the input field.

<div class="contents" id="bkmrk--213"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents" id="bkmrk--214"><div class="contents"><div class="textblock"><div drawio-diagram="2599"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677463121.png" alt=""/></div>

</div></div></div></div></div></div></div></div>7\. Set the "Set Image" Behavior's image property: After clicking the magnifying glass in the properties panel, the "Select Item" Dialog is opened. Select an image from the construction kit (a preview of the image is shown when moving the mouse over the image) and press OK.

<div class="contents" id="bkmrk--215"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents" id="bkmrk--216"><div class="contents"><div class="textblock"><div drawio-diagram="2600"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677463153.png" alt=""/></div>

</div></div></div></div></div></div></div></div>8\. Select the <span style="color: rgb(230, 126, 35);">[Set Image](https://doc316en.candera.eu/link/582#bkmrk-set-image)</span> Behavior on the right side of the Scene Tree view and drag&amp;drop it onto the BitmapNode on the left side of the Scene Tree view (you can see a little arrow and "Set Image").

<div class="contents" id="bkmrk--217"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents" id="bkmrk--218"><div class="contents"><div class="textblock"><div drawio-diagram="2601"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677463173.png" alt=""/></div>

</div></div></div></div></div></div></div></div>9\. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

<div class="contents" id="bkmrk--219"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents" id="bkmrk--220"><div class="contents"><div class="textblock"><div drawio-diagram="2602"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677463182.png" alt=""/></div>

</div></div></div></div></div></div></div></div>10\. When the TextButton is pressed, the configured image will be set to the BitmapNode and the image will appear.

<div class="contents" id="bkmrk--221"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="textblock"><div drawio-diagram="2603"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677463219.png" alt=""/></div>

</div></div></div></div></div></div></div></div>
#### Set Position Example

1\. Drag&amp;drop a TextButton Control from the Controls Panel of the Toolbox to the SceneEditor or the Scene Tree and change the Text to "Change Position".

<div class="contents" id="bkmrk--222"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--223"><div class="contents"><div class="textblock"><div drawio-diagram="2604"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677463851.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>2\. Select the TextButton in the Scene Tree View and delete all Behaviors that are automatically attached to the TextButton from the right side of the Scene Tree View.

<div class="contents" id="bkmrk-before-deleting-all--2"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk-before-deleting-all--0"><div class="contents"><div class="textblock"><table border="0"><tbody><tr><td valign="top"><div class="image"><div drawio-diagram="2605"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677463866.png" alt=""/></div>

</div></td><td valign="top"><div class="image"><div drawio-diagram="2606"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677463877.png" alt=""/></div>

</div></td></tr><tr><td align="center">*before deleting all behaviors*</td><td align="center">*after deleting behaviors*</td></tr></tbody></table>

</div></div></div></div></div></div></div></div></div>3\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Value Processing Behavior](https://doc316en.candera.eu/link/647#bkmrk-page-title)</span>) and a <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control - Internal Behavior](https://doc316en.candera.eu/link/598#bkmrk-internal-control-beh)</span>) from the Behaviors Panel of the ToolBox onto the TextButton Control in the SceneTree. The <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> Behavior is needed in order for the TextButton Control to receive Input Events.

<div class="contents" id="bkmrk--224"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--225"><div class="contents"><div class="textblock"><div drawio-diagram="2607"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677463921.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>4\. Select the <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior on the right side of the Scene Tree View and set the <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior's AcceptValueEvent Property to "true" by checking the checkbox.

<div class="contents" id="bkmrk--226"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--227"><div class="contents"><div class="textblock"><div drawio-diagram="2608"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677463936.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>5\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Set Position](https://doc316en.candera.eu/link/647#bkmrk-set-position)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Value Processing - Transformation Behavior](https://doc316en.candera.eu/link/647#bkmrk-transformation-value)</span>) from the Behaviors Panel of the ToolBox onto the <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior's Receivers.

<div class="contents" id="bkmrk--228"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--229"><div class="contents"><div class="textblock"><div drawio-diagram="2609"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677463971.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>6\. Select the <span style="color: rgb(0, 0, 0);">Set Position</span> Behavior on the right side of the Scene Tree view and set its TranslationAxis Property to "AxisX"

<div class="contents" id="bkmrk--230"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--231"><div class="contents"><div class="textblock"><div drawio-diagram="2610"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677463982.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>7\. Drag&amp;drop an <span style="color: rgb(230, 126, 35);">[OnClick](https://doc316en.candera.eu/link/598#bkmrk-onclick)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control Behavior](https://doc316en.candera.eu/link/598#bkmrk-page-title)</span>) from the Behaviors Panel of the ToolBox onto the TextButton Control.

<div class="contents" id="bkmrk--232"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--233"><div class="contents"><div class="textblock"><div drawio-diagram="2611"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677464010.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>8\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Send Value as Event](https://doc316en.candera.eu/link/582#bkmrk-send-value-as-event)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Action - Property Behavior](https://doc316en.candera.eu/link/582#bkmrk-property-action-beha)</span>) from the Behaviors Panel of the ToolBox onto the <span style="color: rgb(230, 126, 35);">[OnClick](https://doc316en.candera.eu/link/598#bkmrk-onclick)</span> Behavior's Actions Property.

<div class="contents" id="bkmrk--234"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--235"><div class="contents"><div class="textblock"><div drawio-diagram="2612"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677464048.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>9\. Select the <span style="color: rgb(230, 126, 35);">[Send Value as Event](https://doc316en.candera.eu/link/582#bkmrk-send-value-as-event)</span> Behavior on the right side of the Scene Tree View and set the value to datatype "Float" value "100,00" in the Properties view.

<div class="contents" id="bkmrk--236"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--237"><div class="contents"><div class="textblock"><div drawio-diagram="2613"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677464062.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>10\. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

<div class="contents" id="bkmrk--238"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--239"><div class="contents"><div class="textblock"><div drawio-diagram="2614"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677464071.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>11\. When Clicking on the TextButton in the Player, the Button's horizontal position (x coordinate) is set to 100, so it moves to the right.

<div class="contents" id="bkmrk--240"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--241"><div class="contents"><div class="textblock"><div drawio-diagram="2615"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677464100.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>
#### Set Rotation Example  


1\. Drag&amp;drop a TextButton Control from the Controls Panel of the Toolbox to the SceneEditor or the Scene Tree and change the Text to "Set Rotation".

<div class="contents" id="bkmrk--242"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--243"><div class="contents"><div class="textblock"><div drawio-diagram="2616"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677464616.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>2\. Select the TextButton in the Scene Tree View and delete all Behaviors that are automatically attached to the TextButton from the right side of the Scene Tree View.

<div class="contents" id="bkmrk-before-deleting-all--3"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk-before-deleting-all--4"><div class="contents"><div class="textblock"><table border="0"><tbody><tr><td valign="top"><div class="image"><div drawio-diagram="2617"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677464644.png" alt=""/></div>

</div></td><td valign="top"><div class="image"><div drawio-diagram="2618"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677464661.png" alt=""/></div>

</div></td></tr><tr><td align="center">*before deleting all behaviors*</td><td align="center">*after deleting behaviors*</td></tr></tbody></table>

</div></div></div></div></div></div></div></div></div>3\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Value Processing Behavior](https://doc316en.candera.eu/link/647#bkmrk-page-title)</span>) and a <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control - Internal Behavior](https://doc316en.candera.eu/link/598#bkmrk-internal-control-beh)</span>) from the Behaviors Panel of the ToolBox onto the TextButton Control in the SceneTree. The <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> Behavior is needed in order for the TextButton Control to receive Input Events.

<div class="contents" id="bkmrk--244"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--245"><div class="contents"><div class="textblock"><div drawio-diagram="2619"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677464698.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>4\. Select the <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior on the right side of the Scene Tree View and set the <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior's AcceptValueEvent Property to "true" by checking the checkbox.

<div class="contents" id="bkmrk--246"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--247"><div class="contents"><div class="textblock"><div drawio-diagram="2620"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677464712.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>5\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Set Rotation](https://doc316en.candera.eu/link/647#bkmrk-set-rotation)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Value Processing - Transformation Behavior](https://doc316en.candera.eu/link/647#bkmrk-transformation-value)</span>) from the Behaviors Panel of the ToolBox onto the <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior's Receivers.

<div class="contents" id="bkmrk--248"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--249"><div class="contents"><div class="textblock"><div drawio-diagram="2621"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677464744.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>6\. Drag&amp;drop an <span style="color: rgb(230, 126, 35);">[OnClick](https://doc316en.candera.eu/link/598#bkmrk-onclick)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control Behavior](https://doc316en.candera.eu/link/598#bkmrk-page-title)</span>) from the Behaviors Panel of the ToolBox onto the TextButton Control.

<div class="contents" id="bkmrk--250"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--251"><div class="contents"><div class="textblock"><div drawio-diagram="2622"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677464772.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>7\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Send Value as Event](https://doc316en.candera.eu/link/582#bkmrk-send-value-as-event)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Action - Property Behavior](https://doc316en.candera.eu/link/582#bkmrk-property-action-beha)</span>) from the Behaviors Panel of the ToolBox onto the <span style="color: rgb(230, 126, 35);">[OnClick](https://doc316en.candera.eu/link/598#bkmrk-onclick)</span> Behavior's Actions Property.

<div class="contents" id="bkmrk--252"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--253"><div class="contents"><div class="textblock"><div drawio-diagram="2623"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677464807.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>8\. Select the <span style="color: rgb(230, 126, 35);">[Send Value as Event](https://doc316en.candera.eu/link/582#bkmrk-send-value-as-event)</span> Behavior on the right side of the Scene Tree View and set the value to datatype "Float" value "40,00" in the Properties view.

<div class="contents" id="bkmrk--254"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--255"><div class="contents"><div class="textblock"><div drawio-diagram="2624"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677464829.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>9\. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

<div class="contents" id="bkmrk--256"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--257"><div class="contents"><div class="textblock"><div drawio-diagram="2625"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677464839.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>10\. When Clicking on the TextButton in the Player, the Button is rotated 40° clockwise.

<div class="contents" id="bkmrk--258"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--259"><div class="contents"><div class="textblock"><div drawio-diagram="2626"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677464862.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>
#### Set Scale Example  


1\. Drag&amp;drop a SolidColorNode from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree.

<div class="contents" id="bkmrk--260"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--261"><div class="contents"><div class="textblock"><div drawio-diagram="2627"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677464965.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>2\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Value Behavior](https://doc316en.candera.eu/link/647#bkmrk-value)</span> (which is a <span style="color: rgb(230, 126, 35);">[Value Processing Behavior](https://doc316en.candera.eu/link/647#bkmrk-page-title)</span>) from the Behaviors Panel of the Toolbox onto the Text Value Control in the Scene Tree.

<div class="contents" id="bkmrk--262"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--263"><div class="contents"><div class="textblock"><div drawio-diagram="2628"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677464995.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>3\. Select the <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior on the right side of the Scene Tree View. Set the <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior's AcceptValueEvent Property to "true" by checking the checkbox in the Properties view. Check the Minimum Checkbox and set the Minimum Value to 0,50. Check the Maximum Checkbox and set the Maximum Value to 3,00. Also, set the Variant Value to 1,00.

<div class="contents" id="bkmrk--264"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--265"><div class="contents"><div class="textblock"><div drawio-diagram="2629"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677465013.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>4\. Select the SolidColorNode in the Scene Tree view and drag&amp;drop an <span style="color: rgb(230, 126, 35);">[Interpolate Value](https://doc316en.candera.eu/link/647#bkmrk-interpolate-value)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Value Processing Behavior](https://doc316en.candera.eu/link/647#bkmrk-page-title)</span>) onto the <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior's Receivers in the right side of the Scene Tree Panel.

<div class="contents" id="bkmrk--266"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--267"><div class="contents"><div class="textblock"><div drawio-diagram="2631"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677465082.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>5\. Select the <span style="color: rgb(230, 126, 35);">[Interpolate Value](https://doc316en.candera.eu/link/647#bkmrk-interpolate-value)</span> Behavior on the right side of the Scene Tree view and set the property "Units Per Second" to 1,00 in the Properties view.

<div class="contents" id="bkmrk--268"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--269"><div class="contents"><div class="textblock"><div drawio-diagram="2632"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677465101.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>6\. Drag&amp;Drop a <span style="color: rgb(230, 126, 35);">[Set Scale](https://doc316en.candera.eu/link/647#bkmrk-set-scale)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Value Processing - Transformation Behavior](https://doc316en.candera.eu/link/647#bkmrk-transformation-value)</span>) onto the <span style="color: rgb(230, 126, 35);">[Interpolate Value](https://doc316en.candera.eu/link/647#bkmrk-interpolate-value)</span> Behavior's Receivers in the right side of the Scene Tree Panel.

<div class="contents" id="bkmrk--270"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--271"><div class="contents"><div class="textblock"><div drawio-diagram="2633"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677465130.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>7\. Select the <span style="color: rgb(230, 126, 35);">[Set Scale](https://doc316en.candera.eu/link/647#bkmrk-set-scale)</span> Behavior and check the ScaleAlongY checkbox in the Properties view. Set the ScaleVextor2D Property to (1, 1).

<div class="contents" id="bkmrk--272"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--451"><div class="contents"><div class="textblock"><div drawio-diagram="2634"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677465144.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>8\. Drag&amp;drop two TextButton Controls from the Controls Panel of the Toolbox to the SceneEditor or the Scene Tree.

<div class="contents" id="bkmrk--453"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--454"><div class="contents"><div class="textblock"><div drawio-diagram="2635"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677465180.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>9\. Configure the first TextButton Control to have the Text "Decrease". Configure the second TextButton Control to have the Text "Increase" and set it's Enabled Property to "false" by unchecking the Checkbox.

<div class="contents" id="bkmrk--456"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--457"><div class="contents"><div class="textblock"><div drawio-diagram="2636"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677465215.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>10\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Send Value as Event](https://doc316en.candera.eu/link/582#bkmrk-send-value-as-event)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Action - Property Behavior](https://doc316en.candera.eu/link/582#bkmrk-property-action-beha)</span>) from the Toolbox view onto the TextButton's Actions on the right side of the SceneTree view. Do this for both of the TextButton Controls.

<div class="contents" id="bkmrk--459"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--460"><div class="contents"><div class="textblock"><div drawio-diagram="2638"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677465306.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>11\. Select the first TextButton Control (the one with text "Decrease") and then select its <span style="color: rgb(230, 126, 35);">[Send Value as Event](https://doc316en.candera.eu/link/582#bkmrk-send-value-as-event)</span> Behavior on the right side of the Scene Tree view. Set the Value Property to 0,50. Adjust the behavior's TargetNode by clicking on the magnifying glass on the right of the property.

<div class="contents" id="bkmrk--462"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--463"><div class="contents"><div class="textblock"><div drawio-diagram="2639"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677465327.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>12\. Set the scene's TextNode as SolidColorNode for the <span style="color: rgb(230, 126, 35);">[Send Value as Event](https://doc316en.candera.eu/link/582#bkmrk-send-value-as-event)</span> Behavior: After clicking the magnifying glass in the properties panel, the "Select Item" Dialog is opened. Select the scene's SolidColorNode and press OK.

<div class="contents" id="bkmrk--465"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--466"><div class="contents"><div class="textblock"><div drawio-diagram="2640"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677465358.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>13\. Select the second TextButton Control (the one with text "Increase") and then select its <span style="color: rgb(230, 126, 35);">[Send Value as Event](https://doc316en.candera.eu/link/582#bkmrk-send-value-as-event)</span> Behavior on the right side of the Scene Tree view. Set the Value Property to 3,00. Set the behavior's TargetNode to the scene's SolidColorNode as you just did for the first TextButton Control.

<div class="contents" id="bkmrk--468"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--469"><div class="contents"><div class="textblock"><div drawio-diagram="2641"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677465376.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>14\. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

<div class="contents" id="bkmrk--471"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--472"><div class="contents"><div class="textblock"><div drawio-diagram="2642"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677465391.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>15\. When clicking on the TextButton "Increase" in the Player, the size of the SolidColorNode is slowly increased. When clicking on the TextButton "Decrease", the size of the SolidColorNode is slowly decreased.

<div class="contents" id="bkmrk--474"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--475"><div class="contents"><div class="textblock"><div drawio-diagram="2643"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677465415.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>
#### Set Text Example  


1\. Drag&amp;drop a TextButton Control from the Controls panel and a TextNode from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree. Set the TextButton's Text to "Change Text".

<div class="contents" id="bkmrk--477"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--478"><div class="contents"><div class="textblock"><div drawio-diagram="2644"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677465523.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>2\. Position the TextButton Control and the TextNode nicely in the Scene Editor.

<div class="contents" id="bkmrk--480"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--481"><div class="contents"><div class="textblock"><div drawio-diagram="2645"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677465539.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>3\. Drag&amp;Drop a <span style="color: rgb(230, 126, 35);">[Provide Text](https://doc316en.candera.eu/link/598#bkmrk-provide-text)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control - Public Property Behavior](https://doc316en.candera.eu/link/598#bkmrk-public-property-cont)</span>) from the Behaviors Panel of the ToolBox onto the TextNode in the Scene Tree view.

<div class="contents" id="bkmrk--483"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--484"><div class="contents"><div class="textblock"><div drawio-diagram="2646"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677465570.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>4\. Select the TextButton Control and drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Set Text](https://doc316en.candera.eu/link/582#bkmrk-set-text)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Action - Property Behavior](https://doc316en.candera.eu/link/582#bkmrk-property-action-beha)</span>) from the Behaviors Panel of the ToolBox onto the "Actions" field of the TextButton Control's EventHandler on the right side of the Scene Tree.

<div class="contents" id="bkmrk--486"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--487"><div class="contents"><div class="textblock"><div drawio-diagram="2647"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677465604.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>5\. Select the newly added [Set Text](https://doc316en.candera.eu/link/582#bkmrk-set-text) Behavior in right side of the Scene Tree view and change the Text property to "Hallo" in the Properties view.

<div class="contents" id="bkmrk--489"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--490"><div class="contents"><div class="textblock"><div drawio-diagram="2648"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677465618.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>6\. Select the <span style="color: rgb(230, 126, 35);">[Set Text](https://doc316en.candera.eu/link/582#bkmrk-set-text)</span> Behavior on the right side of the Scene Tree view and drag&amp;drop it onto the TextNode on the left side of the Scene Tree view (you can see a little arrow and "Set Text").

<div class="contents" id="bkmrk--492"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--493"><div class="contents"><div class="textblock"><div drawio-diagram="2649"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677465630.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>7\. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

<div class="contents" id="bkmrk--495"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--496"><div class="contents"><div class="textblock"><div drawio-diagram="2650"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677465645.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>8\. When the TextButton is pressed, the text of the TextNode will be changed to "Hallo".

<div class="contents" id="bkmrk--498"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--499"><div class="contents"><div class="textblock"><div drawio-diagram="2651"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677465664.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>
#### Start Timer Example  


1\. Drag&amp;drop a TextButton Control and a Text Control from the Controls panel of the Toolbox to the SceneEditor or the Scene Tree.

<div class="contents" id="bkmrk--501"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--502"><div class="contents"><div class="textblock"><div drawio-diagram="2652"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677466176.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>2\. Select the TextButton in the Scene Tree View and delete all Behaviors that are automatically attached to the TextButton from the right side of the Scene Tree View.

<div class="contents" id="bkmrk-before-deleting-all--5"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk-before-deleting-all--6"><div class="contents"><div class="textblock"><table border="0"><tbody><tr><td valign="top"><div class="image"><div drawio-diagram="2653"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677466205.png" alt=""/></div>

</div></td><td valign="top"><div class="image"><div drawio-diagram="2654"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677466222.png" alt=""/></div>

</div></td></tr><tr><td align="center">*before deleting all behaviors*</td><td align="center">*after deleting behaviors*</td></tr></tbody></table>

</div></div></div></div></div></div></div></div></div>3\. Set the TextButton Control's text to "Start Timer" and the Text Control's text to "Wait for Timer".

<div class="contents" id="bkmrk--506"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--507"><div class="contents"><div class="textblock"><div drawio-diagram="2655"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677466255.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>4\. Drag&amp;drop an <span style="color: rgb(230, 126, 35);">[OnClick](https://doc316en.candera.eu/link/598#bkmrk-onclick)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control Behavior](https://doc316en.candera.eu/link/598#bkmrk-page-title)</span>) and a <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control - Internal Behavior](https://doc316en.candera.eu/link/598#bkmrk-internal-control-beh)</span>) from the Behaviors Panel of the ToolBox onto the TextButton Control in the SceneTree. The <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> Behavior is needed in order for the Text Control to receive Input Events.

<div class="contents" id="bkmrk--509"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--510"><div class="contents"><div class="textblock"><div drawio-diagram="2656"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677466286.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>5\. Select the TextButton Control in the Scene Tree view and drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Start Timer](https://doc316en.candera.eu/link/582#bkmrk-start-timer)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Action - Control Behavior](https://doc316en.candera.eu/link/582#bkmrk-control-action-behav)</span>) from the Toolbox view onto the Actions of the TextButton Control's OnClick Behavior in the right side of the Scene Tree view.

<div class="contents" id="bkmrk--512"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--513"><div class="contents"><div class="textblock"><div drawio-diagram="2658"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677466318.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>6\. Select the <span style="color: rgb(230, 126, 35);">[Start Timer](https://doc316en.candera.eu/link/582#bkmrk-start-timer)</span> Behavior in the right side of the Scene Tree view and set the Delay property to "1000" in the properties view. Set the <span style="color: rgb(230, 126, 35);">[Start Timer](https://doc316en.candera.eu/link/582#bkmrk-start-timer)</span> Behavior's Target Node to the Text Control you have added to the scene in step 1 by clicking the magnifying glass on the right side of the input filed and selecting the Text Value Control in "Choose Item" dialog.

<div class="contents" id="bkmrk--515"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--516"><div class="contents"><div class="textblock"><div drawio-diagram="2659"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677466347.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>After that, the <span style="color: rgb(230, 126, 35);">[Start Timer](https://doc316en.candera.eu/link/582#bkmrk-start-timer)</span> Behavior's Properties will look as follows.

<div class="contents" id="bkmrk--518"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--519"><div class="contents"><div class="textblock"><div drawio-diagram="2660"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677466362.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>7\. Drag&amp;drop an <span style="color: rgb(230, 126, 35);">[On Timer](https://doc316en.candera.eu/link/598#bkmrk-ontimer)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control Behavior](https://doc316en.candera.eu/link/598#bkmrk-page-title)</span>) and a <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control - Internal Behavior](https://doc316en.candera.eu/link/598#bkmrk-internal-control-beh)</span>) from the Behaviors Panel of the ToolBox onto the TextButton Control in the SceneTree. The <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> Behavior is needed in order for the Text Control to receive Input Events.

<div class="contents" id="bkmrk--521"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--522"><div class="contents"><div class="textblock"><div drawio-diagram="2662"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677466421.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>8\. Select the Text Control in the Scene Tree view and drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Set Color](https://doc316en.candera.eu/link/582#bkmrk-set-color)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Action - Property Behavior](https://doc316en.candera.eu/link/582#bkmrk-property-action-beha)</span>) from the Toolbox view onto the Actions of the Text Control's <span style="color: rgb(230, 126, 35);">[On Timer](https://doc316en.candera.eu/link/598#bkmrk-ontimer)</span> Behavior in the right side of the Scene Tree view.

<div class="contents" id="bkmrk--524"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--525"><div class="contents"><div class="textblock"><div drawio-diagram="2663"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677466472.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>9\. Select the <span style="color: rgb(230, 126, 35);">[Set Color](https://doc316en.candera.eu/link/582#bkmrk-set-color)</span> Behavior and change the Color to red.

<div class="contents" id="bkmrk--527"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--528"><div class="contents"><div class="textblock"><div drawio-diagram="2664"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677466483.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>10\. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

<div class="contents" id="bkmrk--530"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--531"><div class="contents"><div class="textblock"><div drawio-diagram="2665"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677466498.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>11\. When the TextButton "Start Timer" is pressed, a timer is started and after some time the Text Control's text changes its color.

<div class="contents" id="bkmrk--533"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--534"><div class="contents"><div class="textblock"><div drawio-diagram="2666"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677466517.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>
#### Switch Image Example  


1\. Drag&amp;drop a FlipBook Control from the Controls panel of the Toolbox to the SceneEditor or the Scene Tree.

<div class="contents" id="bkmrk--536"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--537"><div class="contents"><div class="textblock"><div drawio-diagram="2669"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677466622.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>2\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Value Processing Behavior](https://doc316en.candera.eu/link/647#bkmrk-page-title)</span>) and a <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control - Internal Behavior](https://doc316en.candera.eu/link/598#bkmrk-internal-control-beh)</span>) from the Behaviors Panel of the ToolBox onto the TextButton Control in the SceneTree. The <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> Behavior is needed in order for the Text Control to receive Input Events.

<div class="contents" id="bkmrk--539"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--540"><div class="contents"><div class="textblock"><div drawio-diagram="2670"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677466649.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>3\. Select the [Value](https://doc316en.candera.eu/link/647#bkmrk-value) Behavior in the right side of the Scene Tree view and set the "AcceptValueEvent" property to "True" in the Properties view.

<div class="contents" id="bkmrk--542"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--543"><div class="contents"><div class="textblock"><div drawio-diagram="2671"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677466660.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>4\. Select the FlipBook Control in the Scene Tree view and drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Switch Image](https://doc316en.candera.eu/link/647#bkmrk-switch-image)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Value Processing - Effects Behavior](https://doc316en.candera.eu/link/647#bkmrk-effects-value-proces)</span>) from the Toolbox view onto the Receivers of the FlipBook Control's <span style="color: rgb(230, 126, 35);">[Value](https://doc316en.candera.eu/link/647#bkmrk-value)</span> Behavior in the right side of the Scene Tree view.

<div class="contents" id="bkmrk--545"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--546"><div class="contents"><div class="textblock"><div drawio-diagram="2672"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677466696.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>5\. Drag&amp;drop an <span style="color: rgb(230, 126, 35);">[OnClick](https://doc316en.candera.eu/link/598#bkmrk-onclick)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control Behavior](https://doc316en.candera.eu/link/598#bkmrk-page-title)</span>) from the Behaviors Panel of the ToolBox onto the FlipBook Control in the SceneTree.

<div class="contents" id="bkmrk--548"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--549"><div class="contents"><div class="textblock"><div drawio-diagram="2673"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677466717.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>6\. Select the FlipBook Control in the Scene Tree view and drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Send Value as Event](https://doc316en.candera.eu/link/582#bkmrk-send-value-as-event)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Action - Property Behavior](https://doc316en.candera.eu/link/582#bkmrk-property-action-beha)</span>) from the Toolbox view onto the Actions of the FlipBook Control's <span style="color: rgb(230, 126, 35);">[OnClick](https://doc316en.candera.eu/link/598#bkmrk-onclick)</span> Behavior in the right side of the Scene Tree view.

<div class="contents" id="bkmrk--551"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--552"><div class="contents"><div class="textblock"><div drawio-diagram="2675"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677466750.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>7\. Select the <span style="color: rgb(230, 126, 35);">[Send Value as Event](https://doc316en.candera.eu/link/582#bkmrk-send-value-as-event)</span> Behavior in the right side of the Scene Tree view and set the "Value" propert to "5,00".

<div class="contents" id="bkmrk--554"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--555"><div class="contents"><div class="textblock"><div drawio-diagram="2676"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677466761.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>8\. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

<div class="contents" id="bkmrk--557"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents" id="bkmrk--558"><div class="contents"><div class="textblock"><div drawio-diagram="2677"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677466774.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>9\. When the FlipBook Control is clicked in the Player, the image of the FlipBook is switched.

<div class="contents" id="bkmrk--560"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="textblock"><div drawio-diagram="2678"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677466812.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>
#### Transform Gesture Action Example  


1\. Drag&amp;drop a SolidColorNode from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree.

<div class="contents" id="bkmrk--562"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--563"><div class="contents"><div class="textblock"><div drawio-diagram="2685"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677471881.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>2\. Select the SolidColorNode's SolodColorBushBlend effect and change the Size properties to 100,00 and 100,0 in the Properties view.   
The SolidColorNode is going to be our touchable content, which should be large enough to touch it with two fingers. This could also be achieved by extending the touchable area of the RenderNode (defining the Bounding Rectangle). But please beware that this will have consequences on the laid out size.

<div class="contents" id="bkmrk--565"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--566"><div class="contents"><div class="textblock"><div drawio-diagram="2686"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677471909.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>3\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Transform Gesture](https://doc316en.candera.eu/link/582#bkmrk-transform-gesture-ac)</span> Action Behavior (which is a <span style="color: rgb(230, 126, 35);">[Action - Gesture Behavior](https://doc316en.candera.eu/link/582#bkmrk--8)</span>) and a <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control - Internal Behavior](https://doc316en.candera.eu/link/598#bkmrk-internal-control-beh)</span>) from the Behaviors Panel of the ToolBox onto the SolidColorNode in the SceneTree. The <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> Behavior is needed in order for the TextButton Control to receive Input Events.

<div class="contents" id="bkmrk--568"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--569"><div class="contents"><div class="textblock"><div drawio-diagram="2687"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677471949.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>4\. Select the <span style="color: rgb(230, 126, 35);">[Transform Gesture](https://doc316en.candera.eu/link/582#bkmrk-transform-gesture-ac)</span> Action Behavior and configure Panning Minimum and Maximum values for x and y coordinate.

<div class="contents" id="bkmrk--571"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--572"><div class="contents"><div class="textblock"><div drawio-diagram="2688"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677471964.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>5\. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

<div class="contents" id="bkmrk--574"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--575"><div class="contents"><div class="textblock"><div drawio-diagram="2689"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677471979.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>6\. When panning the SolidColorNode you can drag it around in the area that has been defined in the <span style="color: rgb(230, 126, 35);">[Transform Gesture](https://doc316en.candera.eu/link/582#bkmrk-transform-gesture-ac)</span> Action Behavior's Panning Properties. If you do have a touch screen available, you can also try pinching and rotating the SolidColorNode.

<div class="contents" id="bkmrk--577"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--578"><div class="contents"><div class="textblock"><div drawio-diagram="2690"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677471997.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>
#### Transform Gesture Condition Example  


1\. Drag&amp;drop a SolidColorNode from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree.

<div class="contents" id="bkmrk--580"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--581"><div class="contents"><div class="textblock"><div drawio-diagram="2691"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677472095.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>2\. Select the SolidColorNode's SolidColorBushBlend effect and change the Size properties to 100,00 and 100,0 in the Properties view.   
The SolidColorNode is going to be our touchable content, which should be large enough to touch it with two fingers. This could also be achieved by extending the touchable area of the RenderNode (defining the Bounding Rectangle). But please beware that this will have consequences on the laid out size.

<div class="contents" id="bkmrk--583"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--584"><div class="contents"><div class="textblock"><div drawio-diagram="2692"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677472127.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>3\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Event Handler](https://doc316en.candera.eu/link/598#bkmrk-event-handler)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control Behavior](https://doc316en.candera.eu/link/598#bkmrk-page-title)</span>) and a <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control - Internal Behavior](https://doc316en.candera.eu/link/598#bkmrk-internal-control-beh)</span>) from the Behaviors Panel of the ToolBox onto the SolidColorNode in the SceneTree. The <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> Behavior is needed in order for the TextButton Control to receive Input Events.

<div class="contents" id="bkmrk--586"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--587"><div class="contents"><div class="textblock"><div drawio-diagram="2694"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677472255.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>4\. Drag&amp;drop an <span style="color: rgb(230, 126, 35);">[Event Handler](https://doc316en.candera.eu/link/598#bkmrk-event-handler)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control Behavior](https://doc316en.candera.eu/link/598#bkmrk-page-title)</span>) from the Toolbox view onto the SolidColorNode or its parent node in the Scene Tree view.

<div class="contents" id="bkmrk--589"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--590"><div class="contents"><div class="textblock"><div drawio-diagram="2695"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677472287.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>5\. Select the SolidColorNode and drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Transform Gesture](https://doc316en.candera.eu/link/597#bkmrk-transform-gesture)</span> Condition Behavior (which is a <span style="color: rgb(230, 126, 35);">[Condition - Input Behavior](https://doc316en.candera.eu/link/597#bkmrk-%C2%A0-1)</span>) onto the <span style="color: rgb(230, 126, 35);">[Event Handler](https://doc316en.candera.eu/link/598#bkmrk-event-handler)</span> EventHandler's Condition on the right side of the Scene Tree View.

<div class="contents" id="bkmrk--592"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--593"><div class="contents"><div class="textblock"><div drawio-diagram="2696"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677472332.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>6\. Select the SolidColorNode and drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Set Color](https://doc316en.candera.eu/link/582#bkmrk-set-color)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Action - Property Behavior](https://doc316en.candera.eu/link/582#bkmrk-property-action-beha)</span>) onto the <span style="color: rgb(230, 126, 35);">[Event Handler](https://doc316en.candera.eu/link/598#bkmrk-event-handler)</span> EventHandler's Actions on the right side of the Scene Tree View.

<div class="contents" id="bkmrk--595"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--596"><div class="contents"><div class="textblock"><div drawio-diagram="2697"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677472363.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>7\. Select the <span style="color: rgb(230, 126, 35);">[Set Color](https://doc316en.candera.eu/link/582#bkmrk-set-color)</span> Behavior and change the Color to red.

<div class="contents" id="bkmrk--598"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--599"><div class="contents"><div class="textblock"><div drawio-diagram="2698"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677472383.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>8\. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

<div class="contents" id="bkmrk--601"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--602"><div class="contents"><div class="textblock"><div drawio-diagram="2699"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677472394.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>9\. When a transform gesture is detected, a TransformEvent is sent to the touched node. If the event matches the condition, the configured action will be performed. In our case, when a transform gesture is detected, the SetColor Action will be performed and the SolidColorNode changes its color.

<div class="contents" id="bkmrk--604"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--605"><div class="contents"><div class="textblock"><div drawio-diagram="2700"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677472413.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>
#### Swipe Gesture Example  


1\. Drag&amp;drop a SolidColorNode from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree.

<div class="contents" id="bkmrk--607"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--608"><div class="contents"><div class="textblock"><div drawio-diagram="2701"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677472523.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>2\. Select the SolidColorNode's SolidColorBushBlend effect and change the Size properties to 100,00 and 100,0 in the Properties view.   
The SolidColorNode is going to be our touchable content, which should be large enough to touch it with two fingers. This could also be achieved by extending the touchable area of the RenderNode (defining the Bounding Rectangle). But please beware that this will have consequences on the laid out size.

<div class="contents" id="bkmrk--610"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--611"><div class="contents"><div class="textblock"><div drawio-diagram="2702"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677472556.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>3\. Drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Event Handler](https://doc316en.candera.eu/link/598#bkmrk-event-handler)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control Behavior](https://doc316en.candera.eu/link/598#bkmrk-page-title)</span>) and a [<span style="color: rgb(230, 126, 35);">Handle Control State</span>](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state) Behavior (which is a <span style="color: rgb(230, 126, 35);">[Control - Internal Behavior](https://doc316en.candera.eu/link/598#bkmrk-internal-control-beh)</span>) from the Behaviors Panel of the ToolBox onto the SolidColorNode in the SceneTree. The <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> Behavior is needed in order for the TextButton Control to receive Input Events.

<div class="contents" id="bkmrk--613"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--614"><div class="contents"><div class="textblock"><div drawio-diagram="2703"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677472578.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>4\. Select the SolidColorNode and drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Swipe Gesture](https://doc316en.candera.eu/link/597#bkmrk-swipe-gesture-condit)</span> Condition Behavior (which is a <span style="color: rgb(230, 126, 35);">[Condition - Input Behavior](https://doc316en.candera.eu/link/597#bkmrk-%C2%A0-1)</span>) onto the <span style="color: rgb(230, 126, 35);">[Event Handler](https://doc316en.candera.eu/link/598#bkmrk-event-handler)</span> EventHandler's Condition on the right side of the Scene Tree View.

<div class="contents" id="bkmrk--616"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--617"><div class="contents"><div class="textblock"><div drawio-diagram="2704"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677472613.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>5\. Select the <span style="color: rgb(230, 126, 35);">[Swipe Gesture](https://doc316en.candera.eu/link/597#bkmrk-swipe-gesture-condit)</span> Condition Behavior and configure its direction to "Right".

<div class="contents" id="bkmrk--619"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--620"><div class="contents"><div class="textblock"><div drawio-diagram="2705"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677472642.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>6\. Select the SolidColorNode and drag&amp;drop a <span style="color: rgb(230, 126, 35);">[Set Color](https://doc316en.candera.eu/link/582#bkmrk-set-color)</span> Behavior (which is a <span style="color: rgb(230, 126, 35);">[Action - Property Behavior](https://doc316en.candera.eu/link/582#bkmrk-property-action-beha)</span>) onto the <span style="color: rgb(230, 126, 35);">[Event Handler](https://doc316en.candera.eu/link/598#bkmrk-event-handler)</span> EventHandler's Actions on the right side of the Scene Tree View.

<div class="contents" id="bkmrk--622"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--623"><div class="contents"><div class="textblock"><div drawio-diagram="2706"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677472735.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>7\. Select the <span style="color: rgb(230, 126, 35);">[Set Color](https://doc316en.candera.eu/link/582#bkmrk-set-color)</span> Behavior and change the Color to red.

<div class="contents" id="bkmrk--625"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--626"><div class="contents"><div class="textblock"><div drawio-diagram="2707"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677472750.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>8\. Copy the EventHandler (with both its Condition and its Action you configured in steps 3 - 6 of this example) by right-clicking on the EventHandler in the right side of the Scene Tree View and choosing "Copy" (or via keyboard shortcut use Ctrl+C). Paste the EventHandler by right-clicking on the Behaviors (the topmost entry, where it says "Behaviors") in the right side of the Scene Scene Tree view and choosing "Paste" (or via keyboard shortcut select the topmost entry where it says "Behaviors" and press Ctrl+V).

<div class="contents" id="bkmrk--628"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--629"><div class="contents"><div class="textblock"><div drawio-diagram="2709"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677472811.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>9\. By duplicating the EventHandler you have created "Event Handler\_1" with Condition "Swipe Gesture\_1" and Action "Set Color\_1".

<div class="contents" id="bkmrk--631"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--632"><div class="contents"><div class="textblock"><div drawio-diagram="2710"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677472824.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>10\. Select the "Swipe Gesture\_1" Condition and set its Direction to "Left". Select the "Set Color\_1" Action and configure its color to Green.

<div class="contents" id="bkmrk--634"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--635"><div class="contents"><div class="textblock"><div drawio-diagram="2711"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677472857.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>11\. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

<div class="contents" id="bkmrk--637"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--638"><div class="contents"><div class="textblock"><div drawio-diagram="2712"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677472871.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div>12\. In the beginning the SolidColorNode is white. But after a swipe to the right, the SolidColorNode is gets red. If you swipe to the left, the SolidColorNode gets green.

<div class="contents" id="bkmrk-initial-color-after-"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="textblock"><table border="0"><tbody><tr><td valign="top"><div class="image"><div drawio-diagram="2713"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677472911.png" alt=""/></div>

</div></td><td valign="top"><div class="image"><div drawio-diagram="2715"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677472931.png" alt=""/></div>

</div></td><td valign="top"><div class="image"><div drawio-diagram="2716"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677472948.png" alt=""/></div>

</div></td></tr><tr><td align="center">*Initial color*</td><td align="center">*After swipe right*</td><td align="center">*After swipe left*</td></tr></tbody></table>

</div></div></div></div></div></div></div></div></div></div>
#### Scroll View Example  


1\. Drag&amp;drop a ScrollView Control from the Controls Panel of the Toolbox to the Scene Editor or the Scene Tree.

<div class="contents" id="bkmrk--643"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--644"><div class="contents"><div class="textblock"><div drawio-diagram="2717"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677473077.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div></div>2\. Drag&amp;drop a StackLayout from the "Nodes2D" Panel of the ToolBox onto the ContentAnchor of the ScrollView Control in the Scene Tree.

<div class="contents" id="bkmrk--646"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--647"><div class="contents"><div class="textblock"><div drawio-diagram="2718"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677473134.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div></div>3\. Change the Layouter Arrangement of the StackLayout to "vertical".

<div class="contents" id="bkmrk--649"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--650"><div class="contents"><div class="textblock"><div drawio-diagram="2719"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677473146.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div></div>4\. Drag&amp;drop a Text Control from the Controls Panel, a BitmapNode from the "Nodes2D" Panel of the ToolBox and another Text Control from the Control Panel onto the StackLayout in the Scene Tree.

<div class="contents" id="bkmrk--652"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--653"><div class="contents"><div class="textblock"><div drawio-diagram="2720"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677473184.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div></div>5\. Select a Text Control in the Scene Tree View and set its width to "500" in the Layout Size Properties.

<div class="contents" id="bkmrk--655"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--656"><div class="contents"><div class="textblock"><div drawio-diagram="2721"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677473201.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div></div>6\. In the Control Properties change the Text Property to a longer, several lines long text (newlines can be achieved via *Ctrl+Enter*). Also set the Text Control to be Multiline and enable Word Wrap.

<div class="contents" id="bkmrk--658"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--659"><div class="contents"><div class="textblock"><div drawio-diagram="2722"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677473212.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div></div>7\. Repeat the previous two steps for the second Text Control.

<div class="contents" id="bkmrk--661"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--662"><div class="contents"><div class="textblock"><div drawio-diagram="2723"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677473240.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div></div>8\. Select the BitmapNode in the Scene Tree View before selecting the BitmapBrushBlend Effect on the right side of the Scene Tree View. Adjust the BitmapBrushBlend Effect's image by clicking on the magnifying glass on the right of the input field.

<div class="contents" id="bkmrk--664"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--665"><div class="contents"><div class="textblock"><div drawio-diagram="2724"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677473273.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div></div>9\. Set the BitmapBrushBlend Effect's image property: After clicking the magnifying glass in the properties panel, the "Select Item" Dialog is opened. Select an image from the construction kit (a preview of the image is shown when moving the mouse over the image) and press OK.

<div class="contents" id="bkmrk--667"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--668"><div class="contents"><div class="textblock"><div drawio-diagram="2725"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677473307.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div></div>10\. The SceneEditor now displays the ScrollView and its contents without the possibility to scroll.

<div class="contents" id="bkmrk--670"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--671"><div class="contents"><div class="textblock"><div drawio-diagram="2726"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677473323.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div></div>11\. Select the ScrollView Control in the Scene Tree View and set its Layout Size to a height of "400". After that, a vertical scrollbar is displayed in the SceneEditor.

<div class="contents" id="bkmrk--673"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--674"><div class="contents"><div class="textblock"><div drawio-diagram="2727"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677473358.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div></div>12\. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

<div class="contents" id="bkmrk--676"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--677"><div class="contents"><div class="textblock"><div drawio-diagram="2728"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677473378.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div></div>13\. The ScrollView is displayed with a full functional scrollbar. When scrolling, you can check that all configured content is available: both Text Controls and one BitmapNode.

<div class="contents" id="bkmrk--679"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="textblock"><div drawio-diagram="2729"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677473392.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div></div></div>
#### Process Value Changed Event - Slider Example  


<div class="contents" id="bkmrk-drag%26drop-a-slider-a"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents">1. Drag&amp;drop a Slider and a TextNode2D from the Toolbox into the Scene Editor or the Scene Tree and arrange them in a way that both are clearly visible.  
    [![grafik.png](https://doc316en.candera.eu/uploads/images/gallery/2023-04/scaled-1680-/YCOgrafik.png)](https://doc316en.candera.eu/uploads/images/gallery/2023-04/YCOgrafik.png)
2. Drag&amp;drop a Process Value Changed Event from the Toolbox onto the Slider in the Scene Tree.
3. Select the Slider in the Scene Tree and drag&amp;drop a Format String Behavior into the right side of the Scene Tree onto the Receivers part of the Process Value Changed Event.  
    [![grafik.png](https://doc316en.candera.eu/uploads/images/gallery/2023-04/scaled-1680-/Wzngrafik.png)](https://doc316en.candera.eu/uploads/images/gallery/2023-04/Wzngrafik.png)
4. Drag the Format String Behavior from the Slider's Process Value Changed Event's Receivers and drop it onto the TextNode in the Scene tree.
    
    [![grafik.png](https://doc316en.candera.eu/uploads/images/gallery/2023-04/scaled-1680-/Gx8grafik.png)](https://doc316en.candera.eu/uploads/images/gallery/2023-04/Gx8grafik.png)
5. Select the TextNode2D in the Scene Tree, so that its behaviors get visible on the right side of the Scene Tree and select the Format String Behavior. In the Properties panel configure the Text to "%d" so that the TextNode2D can correctly display the value given by the Slider  
    [![grafik.png](https://doc316en.candera.eu/uploads/images/gallery/2023-04/scaled-1680-/mzografik.png)](https://doc316en.candera.eu/uploads/images/gallery/2023-04/mzografik.png)
6. You can test the functionality already without starting the Player: Select the Slider and change its Value in the Properties panel (confirm the value by hitting the &lt;Enter&gt; key). The TextNode2D will always display the current value of the Slider.
    
    [![grafik.png](https://doc316en.candera.eu/uploads/images/gallery/2023-04/scaled-1680-/orOgrafik.png)](https://doc316en.candera.eu/uploads/images/gallery/2023-04/orOgrafik.png)
7. You can also start the Player. Manipulating the Slider knob will change the Slider's value. The TextNode2D will get updated whenever the Slider's value is changed, it will always display the Slider's value.[![grafik.png](https://doc316en.candera.eu/uploads/images/gallery/2023-04/scaled-1680-/grafik.png)](https://doc316en.candera.eu/uploads/images/gallery/2023-04/grafik.png)

</div></div></div></div></div></div></div></div></div>
#### Process Value Changed Event - State Machine Example

<div class="contents" id="bkmrk--681"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div id="bkmrk--682"></div><div class="header" id="bkmrk--683"></div></div></div></div></div></div></div></div></div></div>1\. Drag&amp;drop a Button and a TextNode2D from the Toolbox into the Scene Editor or Scene Tree and arrange them in a way that both are clearly visible.

[![grafik.png](https://doc316en.candera.eu/uploads/images/gallery/2023-04/scaled-1680-/2lVgrafik.png)](https://doc316en.candera.eu/uploads/images/gallery/2023-04/2lVgrafik.png)

<div class="contents" id="bkmrk--685"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--686"><div class="contents"><div class="textblock">  
</div></div></div></div></div></div></div></div></div></div></div></div>2\. Create a new State Machine through the menu "State Machine" - "New State Machine...", which will open the "Add New State Machine" dialog. Adapt the State Machine's name to your needs and press "OK".

[![grafik.png](https://doc316en.candera.eu/uploads/images/gallery/2023-04/scaled-1680-/OJEgrafik.png)](https://doc316en.candera.eu/uploads/images/gallery/2023-04/OJEgrafik.png)

<div class="contents" id="bkmrk--688"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--689"><div class="contents"><div class="textblock">  
</div></div></div></div></div></div></div></div></div></div></div></div>3\. Select the created State Machine and make it a global State Machine by checking the "Is Global" property in the Properties panel.

[![grafik.png](https://doc316en.candera.eu/uploads/images/gallery/2023-04/scaled-1680-/IGqgrafik.png)](https://doc316en.candera.eu/uploads/images/gallery/2023-04/IGqgrafik.png)

<div class="contents" id="bkmrk--691"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--692"><div class="contents"><div class="textblock">  
</div></div></div></div></div></div></div></div></div></div></div></div>4\. Double-click your Global State Machine to open it in the State Machine Editor. Drag&amp;drop a State from the tools in the top right corner of the State Machine Editor into the State Machine diagram.

[![grafik.png](https://doc316en.candera.eu/uploads/images/gallery/2023-04/scaled-1680-/IARgrafik.png)](https://doc316en.candera.eu/uploads/images/gallery/2023-04/IARgrafik.png)

<div class="contents" id="bkmrk--694"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--695"><div class="contents"><div class="textblock">  
</div></div></div></div></div></div></div></div></div></div></div></div>5\. Drag&amp;drop a Transition from the tools in the top right corner onto one of the States in the diagram, then move the mouse and click the second state of the diagram, which will draw a Transition from one State to the other.

[![grafik.png](https://doc316en.candera.eu/uploads/images/gallery/2023-04/scaled-1680-/ybGgrafik.png)](https://doc316en.candera.eu/uploads/images/gallery/2023-04/ybGgrafik.png)

<div class="contents" id="bkmrk--697"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--698"><div class="contents"><div class="textblock">  
</div></div></div></div></div></div></div></div></div></div></div></div>6\. Perform the same action again, drawing a Transition in the other direction.

[![grafik.png](https://doc316en.candera.eu/uploads/images/gallery/2023-04/scaled-1680-/p5xgrafik.png)](https://doc316en.candera.eu/uploads/images/gallery/2023-04/p5xgrafik.png)

<div class="contents" id="bkmrk--700"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--701"><div class="contents"><div class="textblock">  
</div></div></div></div></div></div></div></div></div></div></div></div>7\. Select a State and add an OnEntry Action. To do this, press the "+" sign. Choose the "Send Value Changed As Event" from the drop-down list and configure a Float value of "1.00".

[![grafik.png](https://doc316en.candera.eu/uploads/images/gallery/2023-04/scaled-1680-/hSNgrafik.png)](https://doc316en.candera.eu/uploads/images/gallery/2023-04/hSNgrafik.png)

<div class="contents" id="bkmrk--703"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--704"><div class="contents"><div class="textblock">  
</div></div></div></div></div></div></div></div></div></div></div></div>8\. Click the magnifying glass next to the Target Node property to open the "Choose Item" dialog, where you can select the Scene's TextNode2D.

[![grafik.png](https://doc316en.candera.eu/uploads/images/gallery/2023-04/scaled-1680-/37cgrafik.png)](https://doc316en.candera.eu/uploads/images/gallery/2023-04/37cgrafik.png)

<div class="contents" id="bkmrk--706"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--707"><div class="contents"><div class="textblock">  
</div></div></div></div></div></div></div></div></div></div></div></div>9\. Now, select the other State and perform the same action again, but configure a different value in the "Send Value Changed As Event", e.g. a Float value of "2.00".

10\. Drag&amp;drop a "Process Value Changed Event" from the Toolbox onto the TextNode2D in the Scene Tree and drag&amp;drop a "Format String" behavior onto the Receiver's part of the "Process Value Changed Event".

[![grafik.png](https://doc316en.candera.eu/uploads/images/gallery/2023-04/scaled-1680-/Yglgrafik.png)](https://doc316en.candera.eu/uploads/images/gallery/2023-04/Yglgrafik.png)

<div class="contents" id="bkmrk--709"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--710"><div class="contents"><div class="textblock">  
</div></div></div></div></div></div></div></div></div></div></div></div>11\. Select the Format String Behavior and enter "%d" in the Text Property.

[![grafik.png](https://doc316en.candera.eu/uploads/images/gallery/2023-04/scaled-1680-/3jEgrafik.png)](https://doc316en.candera.eu/uploads/images/gallery/2023-04/3jEgrafik.png)

<div class="contents" id="bkmrk--712"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="contents" id="bkmrk--713"><div class="contents"><div class="textblock">  
</div></div></div></div></div></div></div></div></div></div></div></div>12\. Save your solution and start the Player. Whenever you press the button, a state transition will be performed. Each of the two states is configured with a different value (1.00 or 2.00), which will be sent as event. The TextNode2D will receive this value and display it. So, repeatedly pressing the button will change the displayed value from 1 to 2 and back to 1 etc.

[![grafik.png](https://doc316en.candera.eu/uploads/images/gallery/2023-04/scaled-1680-/3RBgrafik.png)](https://doc316en.candera.eu/uploads/images/gallery/2023-04/3RBgrafik.png)


#### Usecase for Send Value Changed as Event and reception in state machine(s)   


**Triggering State Transitions using Buttons**

This example demonstrates the usage of "Send Value Changed as Event" in combination with a local as well as a global state machine.

**Setting up the Scene**

For this example, two groups are used each with two buttons and a color node. The buttons are used to send events with values "0" and "1". The color node is used to display the corresponding state of the associated state machine.

1\. Drag&amp;Drop a StackLayout onto the scene and rename to "Group"

2\. Drag&amp;Drop a StackLayout onto the root group and rename to "GlobalGroup". Set the property "Layouter &gt; Arrangement" to "Vertical"

3\. Drag&amp;Drop a TextNode into the GlobalGroup and change name and text to "Global". Add two TextButtons rename to "GlobalButton\_Send\_0" and "GlobalButton\_Send\_1" and change the text to "0" and "1". Add a SolidColorNode and rename to "GlobalTarget". Set property "StretchBehavior" to "Fill".

4\. Repeat Step 2. and 3. using "Local" for the names (as displayed in the screenshot).

<div class="contents" id="bkmrk--715"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div drawio-diagram="4110"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-09/drawing-7-1693531116.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>**Setting up the State Machines**

1\. In Solution Explorer in "Solution &gt; State Machines" from the context menu use "Add &gt; New Item…". In the dialog select "StateMachine" and change name to "GlobalChangeColorOnEvent"

2\. Open State Machine Editor by double clicking on the created state machine. It shows an initial state and a state with a transition.

3\. Drag&amp;Drop a new State onto StateMachine canvas. Rename the two states to "Value\_Is\_0" and "Value\_Is\_1".

4\. Drag&amp;Drop a Transition starting from State "Value\_Is\_0" to "Value\_Is\_1". Rename it to "If\_Value\_1". In the property panel in the "Transition" section set the property "Event" to "Value Changed" and property "Condition" to "Check Changed Value". In the "Condition parameters" section set "ConditionOperator" to "Equal" and "ConditionValue" to "Int32" and value "1".

5\. Repeat Step 4. for the transition in opposite direction. Use "If\_Value\_0" as a name, and for the "ConditionValue" property use value "0".

6\. In the "Solution Explorer" clone the state machine "GlobalChangeColorOnEvent" naming it "LocalChangeColorOnEvent".

7\. Set the property settings of the cloned state machine (set "Transition &gt; Event" to "Value Changed", "Transition &gt; Condition" to "Check Changed Value", "Condition parameters &gt; ConditionOperator" to "Equal" and "Condition parameters &gt; ConditionValue" to "Int32" and value "0" and "1", respectively).

**Connecting Scene and StateMachines**

1\. In Scene Tree open "GlobalButton\_Send\_1". From "Behaviors &gt; Action &gt; Property" drag&amp;drop a "Send Value Changed As Event" action onto the buttons "Actions" section in the "Behaviors" tree. In the property panel of the added action, change "Value" to "Int32" and value "1" and "EventDispatchStrategy" to "Bubble".

2\. Repeat Step 1 for the other buttons "GlobalButton\_Send\_0", "LocalButton\_Send\_1", and "LocalButton\_Send\_1", with values set accordingly.

3\. In Solution Explorer open state machine "GlobalChangeColorOnEvent". Select Transition "If\_Value\_1". In the properties panel set "Condition Parameters &gt; Sender" to "Scene2D &gt; Group &gt; GlobalGroup &gt; GlobalButton\_Send\_1".

4\. Repeat Step 3 for Transition "If\_Value\_0" using "GlobalButton\_Send\_0".

5\. In the State Machine Editor, select state "Value\_Is\_0". From "Behaviors &gt; Action &gt; Property" drag&amp;Drop a "Set Color" action onto the "On Entry Actions" section in the transition’s actions editor.

6\. Select the new action and in the properties panel set "TargetNode" to "Scene2D &gt; Group &gt; GlobalGroup &gt; GlobalTarget" and "Color" to a color that is associated with the global value "0" (for example #FFD900FF)

7\. Repeat step 5 and 6 for state "Value\_Is\_1" (using a different color, such as #0E00FFFF)

8\. Repeat Step 3 – 7 for state machine "LocalChangeColorOnEvent" referring to the nodes in "LocalGroup" instead and using different colors (for example #00FF00FF for value "0" and #FF0000FF for value "1").

9\. Select the state machine "GlobalChangeColorOnEvent" and change its property "Is Global" to "true".

10\. In Scene Tree select "Scene2D &gt; Group" and drag&amp;drop a StateMachine behavior onto its behavior tree. In the properties panel set "StateMachine" to "Solution &gt; State Machines &gt; LocalChangeColorOnEvent".

**Result and Conclusion**

Generate and play the solution to see the following result:

<div class="contents" id="bkmrk--718"><div class="contents"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div drawio-diagram="4109"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-09/drawing-7-1693531086.png" alt=""/></div>

</div></div></div></div></div></div></div></div></div>The following aspects have been considered in this example:

<div class="contents" id="bkmrk-a-combination-of-%22se"><div class="contents"><div class="header"><div class="header"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="textblock">- A combination of "Send Value Changed as Event" action and "Check Changed Value" behavior are used to trigger state transitions in a global and a local state machine.
- The "Send Value Changed as Event" action provides variants for the "EventDispatchStrategy" property. Please refer to <span style="color: rgb(230, 126, 35);">[Behaviors and Events](https://doc316en.candera.eu/link/565#bkmrk-page-title)</span>. In this example, the "Bubble" strategy was applied as it is very simple to understand.
- The global state machine receives all bubbling events that have not been consumed already.
- To avoid that the two state machines react on the same events, the "Sender" property in the condition parameters of the state transitions should be used.

</div></div></div></div></div></div></div></div></div></div></div>#### Set MVG Fill Colour

<div id="bkmrk--721">  
</div><div id="bkmrk-%E3%83%84%E3%83%BC%E3%83%AB%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%AB%EF%BC%9Etouch">1. Drag and drop TextButton (Controls &gt; Touchable) and MVG Rect Node (Nodes 2D) from the Toolbox onto the Scene Editor or Scene Tree.  
    <div drawio-diagram="9447"><img src="http://cgi316jp.candera.eu/uploads/images/drawio/2026-01/drawing-4-1767591704.png" alt=""/></div>
2. Select the TextButton node in the Scene Tree.  
    In the Properties panel, under Control &gt; Text, set the value to “Change Color.”  
    <div drawio-diagram="8877"><img src="https://doc316en.candera.eu/uploads/images/drawio/2026-01/drawing-4-1767685309.png" alt=""/></div>
3. Select the TextButton node again in the Scene Tree.  
    In the Extra Scene Tree, add a **Set MVG Fill Color** (Behavior: Action &gt; Property) to Event Handler &gt; Actions by dragging and dropping it from the Toolbox.  
    <div drawio-diagram="8878"><img src="https://doc316en.candera.eu/uploads/images/drawio/2026-01/drawing-4-1767685330.png" alt=""/></div>
4. Select the newly added **Set MVG Fill Color**.  
    In the Properties panel, change Color to any desired color.
5. In the **Set MVG Fill Color** properties, for TargetNode, click the item-selection icon. 
    - The **Choose Item** dialog opens.
6. In Scenes, choose Scene2D &gt; MVG Rect. 
    - The MVG Rect node is now set as the target node.
7. Next, in the Extra Scene Tree, select Condition: Check Click. 
    - Its properties appear in the Properties panel.
8. For the Sender property, click the item-selection icon. 
    - The **Choose Item** dialog opens.
9. In Scenes, choose Scene2D &gt; TextButton.
10. Click the Player button on the top toolbar to launch the Player and verify the result. 
    - When you press the TextButton, the MVG node’s fill color changes.

</div><div id="bkmrk--728">  
</div><div id="bkmrk--729">  
</div>#### Set MVG Stroke Color

<div id="bkmrk-drag-and-drop-textbu">1. Drag and drop TextButton (Controls &gt; Touchable) and MVG Rect Node (Nodes 2D) from the Toolbox onto the Scene Editor or Scene Tree.  
    <div drawio-diagram="9447"><img src="http://cgi316jp.candera.eu/uploads/images/drawio/2026-01/drawing-4-1767591704.png" alt=""/></div>
2. Select the TextButton node in the Scene Tree.  
    In the Properties panel, under Control &gt; Text, set the value to “Change Stroke Color.”  
    <div drawio-diagram="8875"><img src="https://doc316en.candera.eu/uploads/images/drawio/2026-01/drawing-4-1767685244.png" alt=""/></div>
3. Select the TextButton node again in the Scene Tree.  
    In the Extra Scene Tree, add a **Set MVG Stroke Color** (Behavior: Action &gt; Property) to Event Handler &gt; Actions by dragging and dropping it from the Toolbox.  
    <div drawio-diagram="8879"><img src="https://doc316en.candera.eu/uploads/images/drawio/2026-01/drawing-4-1767685379.png" alt=""/></div>
4. Select the newly added **Set MVG Stroke Color**.  
    In the Properties panel, change Color to any desired color.
5. In the **Set MVG Stroke Color properties, for TargetNode, click the item-selection icon. 
    - The **Choose Item** dialog opens.
6. In Scenes, choose Scene2D &gt; MVG Rect. 
    - The MVG Rect node is now set as the target node.
7. Next, in the Extra Scene Tree, select Condition: Check Click. 
    - Its properties appear in the Properties panel.
8. For the Sender property, click the item-selection icon. 
    - The **Choose Item** dialog opens.
9. In Scenes, choose Scene2D &gt; TextButton.
10. Click the Player button on the top toolbar to launch the Player and verify the result. 
    - When you press the TextButton, the MVG Rect node’s stroke color changes.

</div><div class="contents" id="bkmrk--737"></div>

# Action Behaviors

#### **Animation Action Behaviors**


##### **Configure and Play Animation**

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_animation_action_behavior.html)</small>

Starts, stops, pauses, resumes animations and offers additional properties for configuration. Also sends AnimationEvents with the state of the animation. These Events can be received by an AnimationStateCondition.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%; height: 467.267px;"><tbody><tr style="height: 29.4667px;"><th style="width: 25.0824%; height: 29.4667px;">**Property Name**</th><th style="width: 30.7656%; height: 29.4667px;">**Type**</th><th style="width: 44.1109%; height: 29.4667px;">**Description**</th></tr><tr style="height: 36.8667px;"><td style="width: 25.0824%; height: 36.8667px;">TargetNode  
</td><td style="width: 30.7656%; height: 36.8667px;"><span style="color: rgb(230, 126, 35);">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</span></td><td style="width: 44.1109%; height: 36.8667px;">The Node which is modified. If not set, then the node where the behavior is attached to, will be modified.  
</td></tr><tr style="height: 37.8667px;"><td style="width: 25.0824%; height: 37.8667px;">Animation</td><td style="width: 30.7656%; height: 37.8667px;">[<span style="color: rgb(230, 126, 35);"><span style="color: rgb(35, 111, 161);">Candera::Animation::AnimationPlayer</span></span>](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_animation_1_1_animation_player.html "AnimationPlayer is an AnimationPlayerBase that animates AnimationBlendedProperties.")</td><td style="width: 44.1109%; height: 37.8667px;">The animation that should be controlled.</td></tr><tr style="height: 46.2667px;"><td style="width: 25.0824%; height: 46.2667px;">Action</td><td style="width: 30.7656%; height: 46.2667px;">CgiStudioControl::AnimationAction::Enum</td><td style="width: 44.1109%; height: 46.2667px;">Action that shall be executed on the animation:  
Start, Stop, Pause, Resume, Speedup, Finish, Change.</td></tr><tr style="height: 46.2667px;"><td style="width: 25.0824%; height: 46.2667px;">Direction</td><td style="width: 30.7656%; height: 46.2667px;">CgiStudioControl::AnimationDirection::Enum</td><td style="width: 44.1109%; height: 46.2667px;">Playback direction of the animation.</td></tr><tr style="height: 29.4667px;"><td style="width: 25.0824%; height: 29.4667px;">Speed</td><td style="width: 30.7656%; height: 29.4667px;">FeatStd::Float</td><td style="width: 44.1109%; height: 29.4667px;">Playback speed of the animation.</td></tr><tr style="height: 60.2667px;"><td style="width: 25.0824%; height: 60.2667px;">RepeatMode  
</td><td style="width: 30.7656%; height: 60.2667px;">FeatStd::Optional&lt;AnimationRepeatMode::Enum&gt;  
</td><td style="width: 44.1109%; height: 60.2667px;">Defines how the animation shall be repeated.

*Possible values: Replay, Bounce*

</td></tr><tr style="height: 46.2667px;"><td style="width: 25.0824%; height: 46.2667px;">RepeatCount  
</td><td style="width: 30.7656%; height: 46.2667px;">FeatStd::Optional&lt;FeatStd::UInt32&gt;</td><td style="width: 44.1109%; height: 46.2667px;">Count of replays. If set to 0 the animation loops till it gets stopped.  
</td></tr><tr style="height: 29.4667px;"><td style="width: 25.0824%; height: 29.4667px;">EventDispatchStrategy  
</td><td style="width: 30.7656%; height: 29.4667px;">EventDispatchStrategyType::Enum</td><td style="width: 44.1109%; height: 29.4667px;">The way the event gets sent.  
</td></tr><tr style="height: 105.067px;"><td style="width: 25.0824%; height: 105.067px;">DedicatedBehavior  
</td><td style="width: 30.7656%; height: 105.067px;">Candera::Behavior\*</td><td style="width: 44.1109%; height: 105.067px;">A dedicated process value behavior that will receive the animation event.

*This property can be set in the right side of the Scene Tree Panel.*

</td></tr></tbody></table>

</div></div></div>**Advanced Properties**

<table class="doxtable" id="bkmrk-property-name-type-d-1" style="width: 100%;"><tbody><tr><th style="width: 25.0824%;">**Property Name**</th><th style="width: 27.8024%;">**Type**</th><th style="width: 47.0741%;">**Description**</th></tr><tr><td style="width: 25.0824%;">FinishTime  
</td><td style="width: 27.8024%;">FeatStd::Optional&lt;Candera::Animation::WorldTimeType&gt;  
</td><td style="width: 47.0741%;">Finish time in milliseconds.

*This property is only available if the property "Action" is checked and set to "Finish".*

</td></tr><tr><td style="width: 25.0824%;">IncreaseSdpeed  
</td><td style="width: 27.8024%;">FeatStd::Optional&lt;FeatStd::Float&gt;</td><td style="width: 47.0741%;">Increased playback speed of the animation. If set and Play is executed again during playback, animation will speed up (can be used only once per animation!). Zero means immediate position seek.

*This property is only available in the following configuration:*

*an "Animation" is configured*

*"Action" is set to "Start" or "SpeedUp"*

*"RepeatMode" is not checked*

*"RepeatCount" is not checked*

</td></tr><tr><td style="width: 25.0824%;">IncreasedSpeedRevertMargin  
</td><td style="width: 27.8024%;">FeatStd::Optional&lt;Candera::Animation::WorldTimeType&gt;</td><td style="width: 47.0741%;">Defines trailing part of animation (in milliseconds) that will be played at normal speed again. If not set, speedup will last until the end of animation.

*This property is only available if property "IncreasedSpeed" is checked.*

</td></tr><tr><td style="width: 25.0824%;">SequenceStartTime  
</td><td style="width: 27.8024%;">FeatStd::Optional&lt;Candera::Animation::SequenceTimeType&gt;</td><td style="width: 47.0741%;">The start point of the animation. \[ms\]

*This property is only available if an animation is set in the property "Animation".*

</td></tr><tr><td style="width: 25.0824%;">SequenceDurationTime  
</td><td style="width: 27.8024%;">FeatStd::Optional&lt;Candera::Animation::SequenceTimeType&gt;</td><td style="width: 47.0741%;">The duration of the animation. \[ms\]

*This property is only available if an animation is set in the property "Animation".*

</td></tr></tbody></table>

<div class="contents" id="bkmrk-property-name-type-d-0"><div class="contents"><div class="textblock">  
</div></div></div><div class="contents" id="bkmrk--0"><div class="textblock">---

</div></div>#### **Control Action Behaviors**

##### **Breadcrumb Action**<small></small>

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_breadcrumb_action_behavior.html)</small>

An Action Behavior that sends breadcrumb action events. It allows you to control a <span style="color: rgb(230, 126, 35);">[Breadcrumb](https://doc316en.candera.eu/books/controls-and-behaviors/page/common#bkmrk-breadcrumb)</span> or a node with a <span style="color: rgb(230, 126, 35);">[Breadcrumb Behavior](https://doc316en.candera.eu/link/598#bkmrk-%C2%A0-30)</span> attached. This behavior is available for 2D scenes only.

The operations that can be performed are:

<div class="contents" id="bkmrk-setpath---sets-eleme"><div class="contents"><div class="textblock">- SetPath - sets elements contained in the breadcrumb.
- BackToPrevious - calls breadcrumb to create a path without the last element from the ones existing in the breadcrumb.
- BackToElement - the action will be called if the element exists in the breadcrumb. It will create a path from beginning to the selected element from the breadcrumb.

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-2"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 16.1928%;">**Property Name**</th><th style="width: 36.8338%;">**Type**</th><th style="width: 46.9734%;">**Description**</th></tr><tr><td style="width: 16.1928%;">Action</td><td style="width: 36.8338%;">CgiStudioControl::AnimationAction::Enum</td><td style="width: 46.9734%;">Action that will be called on the breadcrumb.

*Possible values: SetPath, BackToPrevious, BackToElement*

</td></tr><tr><td style="width: 16.1928%;">Path</td><td style="width: 36.8338%;">String</td><td style="width: 46.9734%;">The path with a separator that will be passed when the action is called. The separator is defined in the receiving breadcrumb.

</td></tr><tr><td style="width: 16.1928%;">BreadcrumbNode</td><td style="width: 36.8338%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 46.9734%;">Breadcrumb Control Node.</td></tr></tbody></table>

</div></div></div><div class="header" id="bkmrk--2"></div>##### **Change Selection**

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_change_selection_action_behavior.html)</small>

Sends a ChangeSelectionEvent to the SelectionGroup. The SelectionGroup then sends a ChangeSelectionEvent to all of its receivers. The event is emitted via BubbleEventDispatchStrategy to a SelectionGroupBehavior.

**Common Properties**

This behavior does not have any configurable properties.

<div class="header" id="bkmrk--3"></div>##### **Conditional Action**

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_conditional_action_behavior.html)</small>

A conditional action can be used to add further checking of conditions while actions are already performed. E.g. a click may trigger one action in a specific control state and another if this state is not set.<small></small>

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-3"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 17.3053%;">**Property Name**</th><th style="width: 33.2483%;">**Type**</th><th style="width: 49.4464%;">**Description**</th></tr><tr><td style="width: 17.3053%;">Condition</td><td style="width: 33.2483%;">Candera::ConditionBehavior\*</td><td style="width: 49.4464%;">The ConditionBehavior that TriggerBehavior passes a value to and expect a response from to see if Action needs to be invoked.</td></tr><tr><td style="width: 17.3053%;">Actions</td><td style="width: 33.2483%;">Candera::ActionBehaviorArrayProperty</td><td style="width: 49.4464%;">The set of ActionBehaviors that TriggerBehavior invokes in the even that it receives a positive response from Condition.</td></tr><tr><td style="width: 17.3053%;">Postpone</td><td style="width: 33.2483%;">bool</td><td style="width: 49.4464%;">Set this flag to true to perform the actions after all other actions have been performed. This may become necessary if the actions alter the state and other conditional actions may be invoked due to that changed state.</td></tr></tbody></table>

</div></div>##### **Change Drawer State**

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_drawer_action_behavior.html)</small>

An Action that allows to hide/show the contents of a <span style="color: rgb(230, 126, 35);">[Drawer](https://doc316en.candera.eu/link/1156#bkmrk-drawer)</span> or a Node with a <span style="color: rgb(230, 126, 35);">[Drawer Behavior](https://doc316en.candera.eu/link/598#bkmrk-drawer-behavior)</span> attached. This behavior is available for 2D scenes only.

The operation that can be performed are: Close, Open or Toggle.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-4"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 20.14%;">**Property Name**</th><th style="width: 41.8863%;">**Type**</th><th style="width: 37.9325%;">**Description**</th></tr><tr><td style="width: 20.14%;">TargetNode</td><td style="width: 41.8863%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 37.9325%;">The Node which is modified. If not set, then the node where the behavior is attached to, will be modified.</td></tr><tr><td style="width: 20.14%;">Action</td><td style="width: 41.8863%;">CgiStudioControl::DrawerEventType::Enum</td><td style="width: 37.9325%;">The action that should be performed.

*Possible values: Open, Close, Toggle*

</td></tr><tr><td style="width: 20.14%;">EventDispatchStrategy</td><td style="width: 41.8863%;">CgiStudioControl::EventDispatchStrategyType::Enum</td><td style="width: 37.9325%;">The way the event gets sent.

*Possible values: Direct, Broadcast, Bubble, Tunnel, DedicatedBehavior*

</td></tr></tbody></table>

</div></div></div>**Advanced Properties**

<div class="contents" id="bkmrk-property-name-type-d-5"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 20.2719%;">**Property Name**</th><th style="width: 18.2982%;">**Type**</th><th style="width: 61.4299%;">**Description**</th></tr><tr><td style="width: 20.2719%;">DedicatedBehavior</td><td style="width: 18.2982%;">[Candera::Behavior](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_behavior.html "Behaviors are small re-usable functional blocks that communicate via events. Behaviors are based on W...")\*</td><td style="width: 61.4299%;">A dedicated behavior that will receive the event. Only available when Dispatch Strategy is set to 'DedicatedBehavior'.</td></tr></tbody></table>

</div></div>##### **Set Focus**

Sets keyboard focus to the selected control when triggered. Can be used for example to change focus between List controls.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-6"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 14.182%;">**Property Name**</th><th style="width: 26.338%;">**Type**</th><th style="width: 59.4691%;">**Description**</th></tr><tr><td style="width: 14.182%;">TargetNode</td><td style="width: 26.338%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 59.4691%;">The Node which is modified. If not set, then the node where the behavior is attached to, will be modified.</td></tr><tr><td style="width: 14.182%;">FocusCamera</td><td style="width: 26.338%;">Candera::AbstractNodePointer</td><td style="width: 59.4691%;">Set the camera node for this focus Action.</td></tr></tbody></table>

</div></div>##### **Interpolate Value Action**

Changes the animation mode (for example, SpeedBased) of the InterpolateProcessValue behavior when the relevant action is triggered.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-7"><div class="textblock"><table class="doxtable" style="width: 100%; height: 215.867px;"><tbody><tr style="height: 29.4667px;"><th style="width: 15.5684%; height: 29.4667px;">**Property Name**</th><th style="width: 29.7766%; height: 29.4667px;">**Type**</th><th style="width: 54.6139%; height: 29.4667px;">**Description**</th></tr><tr style="height: 49.0667px;"><td style="width: 15.5684%; height: 49.0667px;">TargetNode</td><td style="width: 29.7766%; height: 49.0667px;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 54.6139%; height: 49.0667px;">The Node which is modified. If not set, then the node where the behavior is attached to, will be modified.</td></tr><tr style="height: 57.4667px;"><td style="width: 15.5684%; height: 57.4667px;">Action</td><td style="width: 29.7766%; height: 57.4667px;">InterpolateValueAction::Enum  
</td><td style="width: 54.6139%; height: 57.4667px;">Action that will be called on the interpolate value behavior.

*Possible values: SetMode, Reset*

</td></tr><tr style="height: 79.8667px;"><td style="width: 15.5684%; height: 79.8667px;">AnimationMode</td><td style="width: 29.7766%; height: 79.8667px;">InterpolationAnimationMode::Enum  
</td><td style="width: 54.6139%; height: 79.8667px;">Use the InterpolationAnimationMode to select the desired type of animation in the InterpolateProcessValueBehavior.

*Possible values: SpeedBased, TimeBased, Instant*

</td></tr></tbody></table>

</div></div>##### **Interval Switch Action**

This action changes the state of the interval switch behavior (by selecting a target Node). With this behavior we can set the state to the following values: on, off, blinking.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-8"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 15.1977%;">**Property Name**</th><th style="width: 25.3291%;">**Type**</th><th style="width: 59.432%;">**Description**</th></tr><tr><td style="width: 15.1977%;">TargetNode</td><td style="width: 25.3291%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 59.432%;">The Node which is modified. If not set, then the node where the behavior is attached to, will be modified.</td></tr><tr><td style="width: 15.1977%;">SwitchState</td><td style="width: 25.3291%;">IntervalSwitchState::Enum</td><td style="width: 59.432%;">SwitchState: IntervalSwitchState: Enum

*Possible values: On, Off, Blinking*

</td></tr></tbody></table>

</div></div><div class="header" id="bkmrk-back-to-the-menu-6"><div class="headertitle">  
</div></div>##### **Keyboard Action**

Manages keyboard control by executing configured actions such as open, close, toggle, and layout switch on the target keyboard node, using defined layout and auto-hide settings when triggered.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-9"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 16.804%;">**<span style="text-decoration: underline;"><span style="color: rgb(0, 0, 0); text-decoration: underline;">Property Name</span></span>**</th><th style="width: 26.5606%;">**<span style="text-decoration: underline;"><span style="color: rgb(0, 0, 0); text-decoration: underline;">Type</span></span>**</th><th style="width: 56.5943%;">**<span style="text-decoration: underline;"><span style="color: rgb(0, 0, 0); text-decoration: underline;">Description</span></span>**</th></tr><tr><td style="width: 16.804%;">Action</td><td style="width: 26.5606%;">KeyboardAction::Enum  
</td><td style="width: 56.5943%;">Keyboard action to execute.

*Possible values: Open, Close, Toggle, InvokeKey, ShiftLayout, SwitchLayout, SetConfiguration*

</td></tr><tr><td style="width: 16.804%;">KeyboardNode</td><td style="width: 26.5606%;">Candera::AbstractNodePointer</td><td style="width: 56.5943%;">Keyboard Node.</td></tr><tr><td style="width: 16.804%;">AutoHideKeyboard</td><td style="width: 26.5606%;">bool</td><td style="width: 56.5943%;">Should keyboard be hidden when node loses focus and show again when node is focused?</td></tr></tbody></table>

</div></div></div>**Advanced Properties**

<table class="doxtable" id="bkmrk-property-name-type-d-10" style="width: 100%;"><tbody><tr><th style="width: 16.804%;">**<span style="text-decoration: underline;"><span style="color: rgb(0, 0, 0); text-decoration: underline;">Property Name</span></span>**</th><th style="width: 26.5631%;">**<span style="text-decoration: underline;"><span style="color: rgb(0, 0, 0); text-decoration: underline;">Type</span></span>**</th><th style="width: 56.5917%;">**<span style="text-decoration: underline;"><span style="color: rgb(0, 0, 0); text-decoration: underline;">Description</span></span>**</th></tr><tr><td style="width: 16.804%;">Layout</td><td style="width: 26.5631%;">String</td><td style="width: 56.5917%;">Layout name.

*This property is only available if "Action" is set to "Open", "ShiftLayout" or "SwitchLayout".*

</td></tr><tr><td style="width: 16.804%;">Notifier  
</td><td style="width: 26.5631%;">Candera::AbstractNodePointer</td><td style="width: 56.5917%;">Event sender. If Notifier is invalid then default is node which has attached behavior.

*This property is only available if "Action" is set to "InvokeKey".*

</td></tr><tr><td style="width: 16.804%;">TextNode  
</td><td style="width: 26.5631%;">Candera::AbstractNodePointer</td><td style="width: 56.5917%;">Text node.

*This property is only available if "Action" is set to "InvokeKey".*

</td></tr><tr><td style="width: 16.804%;">ImageNode  
</td><td style="width: 26.5631%;">Candera::AbstractNodePointer</td><td style="width: 56.5917%;">ImageNode node.

*This property is only available if "Action" is set to "InvokeKey".*

</td></tr><tr><td style="width: 16.804%;">FocusNode  
</td><td style="width: 26.5631%;">Candera::AbstractNodePointer</td><td style="width: 56.5917%;">FocusNode node.

*This property is only available if "Action" is set to "InvokeKey".*

</td></tr><tr><td style="width: 16.804%;">Configuration  
</td><td style="width: 26.5631%;">String  
</td><td style="width: 56.5917%;">Keyboard configuration.

*This property is only available if "Action" is set to "SetConfiguration".*

</td></tr></tbody></table>

##### **Map Action**

Call a specified action on selected MapBehavior.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-11"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 15.8155%;">**Property Name**</th><th style="width: 26.0698%;">**Type**</th><th style="width: 58.0735%;">**Description**</th></tr><tr><td style="width: 15.8155%;">MapNode</td><td style="width: 26.0698%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 58.0735%;">Map node on which this action should be called.</td></tr><tr><td style="width: 15.8155%;">Action</td><td style="width: 26.0698%;">MapAction::Enum</td><td style="width: 58.0735%;">Action that will be called on the MapBehavior.

*Possible values: Reset, Pan, Zoom, Tilt, LookAt, CenterAtLocation, Rotate, SetRotation, ChangeTheme.*

</td></tr><tr><td style="width: 15.8155%;">Latitude</td><td style="width: 26.0698%;">Float</td><td style="width: 58.0735%;">GPS latitude at which the camera looks at.</td></tr><tr><td style="width: 15.8155%;">Longitude</td><td style="width: 26.0698%;">Float</td><td style="width: 58.0735%;">GPS longitude at which the camera looks at.</td></tr><tr><td style="width: 15.8155%;">Zoomlevel</td><td style="width: 26.0698%;">Float</td><td style="width: 58.0735%;">Determines how close is the camera to the ground level.</td></tr><tr><td style="width: 15.8155%;">Bearing</td><td style="width: 26.0698%;">Float</td><td style="width: 58.0735%;">Determines the bearing angle at which the camera is rotated relative to north.</td></tr><tr><td style="width: 15.8155%;">Tilt</td><td style="width: 26.0698%;">Float</td><td style="width: 58.0735%;">Determines the tilt angle at which the camera looks at specified location.</td></tr><tr><td style="width: 15.8155%;">SyleUrl</td><td style="width: 26.0698%;">String</td><td style="width: 58.0735%;">Theme that describes how the map looks like and how is styled.</td></tr></tbody></table>

</div></div>##### **Map Location Action**

Represents a location on the map which can be sent to MapBehavior.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-12"><div class="textblock"><table class="doxtable" style="width: 92.5926%; height: 147.334px;"><tbody><tr style="height: 29.4667px;"><th style="width: 21.7527%; height: 29.4667px;">**Property Name**</th><th style="width: 28.0327%; height: 29.4667px;">**Type**</th><th style="width: 50.1701%; height: 29.4667px;">**Description**</th></tr><tr style="height: 29.4667px;"><td style="width: 21.7527%; height: 29.4667px;">TargetNode</td><td style="width: 28.0327%; height: 29.4667px;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 50.1701%; height: 29.4667px;">Map node on which this action should be called.</td></tr><tr style="height: 29.4667px;"><td style="width: 21.7527%; height: 29.4667px;">Latitude</td><td style="width: 28.0327%; height: 29.4667px;">Float</td><td style="width: 50.1701%; height: 29.4667px;">Latitude of the location.</td></tr><tr style="height: 29.4667px;"><td style="width: 21.7527%; height: 29.4667px;">Longitude</td><td style="width: 28.0327%; height: 29.4667px;">Float</td><td style="width: 50.1701%; height: 29.4667px;">Longitude of the location.</td></tr><tr><td style="width: 21.7527%;">LocationName  
</td><td style="width: 28.0327%;">String  
</td><td style="width: 50.1701%;">Human-readable name of the location.  
</td></tr><tr style="height: 29.4667px;"><td style="width: 21.7527%; height: 29.4667px;">Address</td><td style="width: 28.0327%; height: 29.4667px;">String</td><td style="width: 50.1701%; height: 29.4667px;">Address of the location (usually street name).</td></tr></tbody></table>

</div></div><div class="header" id="bkmrk-back-to-the-menu-9"><div class="headertitle">  
</div></div>##### **Navigation Action**

Invoke a specified navigation action on selected Map

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-13"><div class="textblock"><table class="doxtable"><tbody><tr><th>**Property Name**</th><th>**Type**</th><th>**Description**</th></tr><tr><td>MapNode</td><td>[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td>Map node on which this action should be called.</td></tr><tr><td>Action</td><td>MapNavigationAction::Enum</td><td>Action that will be called on the MapNode.

*Possible values: StartNavi, StopNavi, ReverseRoute*

</td></tr></tbody></table>

</div></div>##### **MenuScreenAction**

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_menu_screen_action_behavior.html)</small>

**Description**

Action Behavior which sends MenuScreen action event allows you control the menu screen. The operations it can do are: add, delete element and change screen page. This behavior is available for 2D scenes only.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-14"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 16.0626%;">**Property Name**</th><th style="width: 25.4526%;">**Type**</th><th style="width: 58.4436%;">**Description**</th></tr><tr><td style="width: 16.0626%;">Action</td><td style="width: 25.4526%;">MenuScreenAction::Enum</td><td style="width: 58.4436%;">Action that will be called on the menu screen.

*Possible values: EditMode, Delete, SwapRight, SwapLeft, AddScreen, DeleteLastScreen*

</td></tr><tr><td style="width: 16.0626%;">MenuItemNode</td><td style="width: 25.4526%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 58.4436%;">Needed to identify which node should be deleted.</td></tr><tr><td style="width: 16.0626%;">MenuScreenNode</td><td style="width: 25.4526%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 58.4436%;">MenuScreen node to which event will be sent.</td></tr></tbody></table>

</div></div><div class="header" id="bkmrk-back-to-the-menu-11"><div class="headertitle">  
</div></div>##### **Page Indicator Action**

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_page_indicator_action_behavior.html)</small>

Sends an event to PageIndicator from external control (change number of pages, change active index)

It is also used by PageIndicatorElement (ActivateDot) to activate clicked element and to define visual properties of the PageIndicatorElement. This behavior is available for 2D scenes only.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-15"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 17.5453%;">**Property Name**</th><th style="width: 25.8237%;">**Type**</th><th style="width: 56.5898%;">**Description**</th></tr><tr><td style="width: 17.5453%;">Action</td><td style="width: 25.8237%;">PageIndicatorAction::Enum</td><td style="width: 56.5898%;">Action to perform on PageIndicator (change number of pages, change active index)

*Possible values: ChangeActiveIndex, ChangeNumberOfPages, ActiveDot*

</td></tr></tbody></table>

</div></div></div>**Properties available when *Action* is set to *ChangeActiveIndex* or *ChangeNumberOf Pages***

<table class="doxtable" id="bkmrk-property-name-type-d-16" style="width: 100%;"><tbody><tr><th style="width: 25.453%;">**Property Name**</th><th style="width: 25.8237%;">**Type**</th><th style="width: 48.682%;">**Description**</th></tr><tr><td style="width: 25.453%;">Value</td><td style="width: 25.8237%;">FeatStd::Int32</td><td style="width: 48.682%;">Value to be sent to PageIndicator (for ChangeActiveIndex and ChangeNumberOfPages actions)</td></tr><tr><td style="width: 25.453%;">ChangeValue</td><td style="width: 25.8237%;">ChangeValue::Enum</td><td style="width: 48.682%;">Type of value change to be sent to PageIndicator (for ChangeActiveIndex and ChangeNumberOfPages actions)

*Possible values: Absolute or Relative*

</td></tr><tr><td style="width: 25.453%;">PageIndicatorNode</td><td style="width: 25.8237%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 48.682%;">PageIndicator node to communicate with.</td></tr></tbody></table>

**Properties for usage within PageIndicatorElement (ActivateDot)**

These properties are used only when the behavior is used within PageIndicatorElement and action is set to ActivateDot.

<div class="contents" id="bkmrk-property-name-type-d-17"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 25.453%;">**Property Name**</th><th style="width: 25.8237%;">**Type**</th><th style="width: 48.682%;">**Description**</th></tr><tr><td style="width: 25.453%;">RenderNode  
</td><td style="width: 25.8237%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 48.682%;">Render node for current PageIndicatorElement (used only for PageIndicatorElement)</td></tr><tr><td style="width: 25.453%;">NormalImagePropertyProvider  
</td><td style="width: 25.8237%;">CgiStudioControl::PropertyProviderBehavior\*</td><td style="width: 48.682%;">Property Behavior which contains the image of normal (unselected) PageIndicatorElement (defines visual aspect of current PageIndicatorElement).

*This property can be set in the right side of the Scene Tree panel.*

</td></tr><tr><td style="width: 25.453%;">ActiveImagePropertyProvider  
</td><td style="width: 25.8237%;">CgiStudioControl::PropertyProviderBehavior\*</td><td style="width: 48.682%;">Property Behavior which contains the image of active (selected) PageIndicatorElement (defines visual aspect of current PageIndicatorElement).

*This property can be set in the right side of the Scene Tree panel.*

</td></tr></tbody></table>

</div></div><div class="header" id="bkmrk-back-to-the-menu-12"><div class="headertitle">  
</div></div>##### **Set Control State**<small></small>

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_set_control_state_action_behavior.html)</small>

Sets the <span style="color: rgb(230, 126, 35);">[state](https://doc316en.candera.eu/books/controls-and-behaviors/page/control-states)</span> of a control by sending an Event to a control considering the selected EventDispatchStrategy.

**Supports:** Any Node with a <span style="color: rgb(230, 126, 35);">[Handle Control State](https://doc316en.candera.eu/link/598#bkmrk-handle-control-state)</span> attached.

**Used in:** <span style="color: rgb(230, 126, 35);">[SpinBox](https://doc316en.candera.eu/link/1156#bkmrk-spinbox)</span>

**See also:** <span style="color: rgb(230, 126, 35);">[Set Image](https://doc316en.candera.eu/link/582#bkmrk-set-image)</span>, <span style="color: rgb(230, 126, 35);">[Set Text](https://doc316en.candera.eu/link/582#bkmrk-set-text)</span>, <span style="color: rgb(230, 126, 35);">[Set Color](https://doc316en.candera.eu/link/582#bkmrk-set-color)</span>

**Example Usage**

<div class="contents" id="bkmrk-hover---hover-leave-"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Hover - Hover Leave Example](https://doc316en.candera.eu/link/572#bkmrk-hover---hover-leave-)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-18"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 19.3987%;">**Property Name**</th><th style="width: 28.0455%;">**Type**</th><th style="width: 52.5146%;">**Description**</th></tr><tr><td style="width: 19.3987%;">State</td><td style="width: 28.0455%;">ControlStateEnum::Enum</td><td style="width: 52.5146%;">Choose the State which has to be changed to True or False.

*Possible values: Selected, Pressed, Enabled, Highlighted, KeyboardFocused, ScopeFocused, Hover, Touched*

</td></tr><tr><td style="width: 19.3987%;">ChangeTo</td><td style="width: 28.0455%;">bool</td><td style="width: 52.5146%;">Switch the state of the control to True or False.</td></tr><tr><td style="width: 19.3987%;">UseForChildNodes  
</td><td style="width: 28.0455%;">bool  
</td><td style="width: 52.5146%;">State change will also affect all child nodes of the target node</td></tr><tr><td style="width: 19.3987%;">EventDispatchStrategy</td><td style="width: 28.0455%;">[EventDispatchStrategyType::Enum](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 52.5146%;">The way the event gets sent.

*Possible values: Direct, Broadcast, Bubble, Tunnel, DedicatedBehavior*

</td></tr><tr><td style="width: 19.3987%;">TargetNode</td><td style="width: 28.0455%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 52.5146%;">The Node which is modified. If not set, then the node where the behavior is attached to, will be modified.</td></tr></tbody></table>

</div></div></div>**Advanced Properties**

<div class="contents" id="bkmrk-property-name-type-d-19"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 17.0581%;">**Property Name**</th><th style="width: 17.4308%;">**Type**</th><th style="width: 65.5111%;">**Description**</th></tr><tr><td style="width: 17.0581%;">DedicatedBehavior</td><td style="width: 17.4308%;">[Candera::Behavior](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_behavior.html "Behaviors are small re-usable functional blocks that communicate via events. Behaviors are based on W...")\*</td><td style="width: 65.5111%;">A dedicated behavior that will receive the event.

*This property is only available when Dispatch Strategy is set to 'DedicatedBehavior'.*

</td></tr></tbody></table>

</div></div></div><div class="header" id="bkmrk-back-to-the-menu-13"><div class="headertitle">  
</div></div>##### **Start Timer**<small></small>

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_timer_action_behavior.html)</small>

Start Timer Behavior starts a timer. If the delay time is passed the behavior's node or target node will receive a Timer Event. The Timer Event can then be handled by an Event Handler with a Check Timer Behavior to trigger an action.

**Used in:** <span style="color: rgb(230, 126, 35);">[ScrollBar](https://doc316en.candera.eu/link/1156#bkmrk-scrollbar)</span>

**See also:** <span style="color: rgb(230, 126, 35);">[Check Timer](https://doc316en.candera.eu/link/597#bkmrk-check-timer)</span>, [<span style="color: rgb(230, 126, 35);">OnTimer</span>](https://doc316en.candera.eu/link/598#bkmrk-ontimer)

**Example Usage**

<div class="contents" id="bkmrk-start-timer-example"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Start Timer Example](https://doc316en.candera.eu/link/572#bkmrk-start-timer-example)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-20"><div class="contents"><div class="textblock"><table class="doxtable"><tbody><tr><th>**Property Name**</th><th>**Type**</th><th>**Description**</th></tr><tr><td>TargetNode</td><td>[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td>The Node which is modified. If not set, then the node where the behavior is attached to, will be modified.</td></tr><tr><td>Delay</td><td>FeatStd::UInt32</td><td>Delay time for the timer event (specification in milliseconds)</td></tr></tbody></table>

</div></div></div>---

#### **Custom Action Behaviors** 

##### **Click to Message**

Sends a custom message on invoke action event.

**Common Properties**

<table class="doxtable" id="bkmrk-property-name-type-d-21" style="width: 99.2593%;"><tbody><tr><th style="width: 19.167%;">**Property Name**</th><th style="width: 23.5301%;">**Type**</th><th style="width: 57.3859%;">**Description**</th></tr><tr><td style="width: 19.167%;">Identifier</td><td style="width: 23.5301%;">String</td><td style="width: 57.3859%;">The identifier of the click message.</td></tr></tbody></table>

<div class="header" id="bkmrk-back-to-the-menu-15"><div class="headertitle">  
</div></div>##### **Copy Textures**  


When triggered, the textures of an appearance are used on the appearance of the node. This behavior is available for 3D scenes only.

**Common Properties**

<table class="doxtable" id="bkmrk-property-name-type-d-22" style="width: 99.2593%;"><tbody><tr><th style="width: 19.1701%;">**Property Name**</th><th style="width: 25.6414%;">**Type**</th><th style="width: 55.2715%;">**Description**</th></tr><tr><td style="width: 19.1701%;">TargetNode</td><td style="width: 25.6414%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 55.2715%;">The Node which is modified. If not set, then the node where the behavior is attached to, will be modified.</td></tr><tr><td style="width: 19.1701%;">Appearance  
</td><td style="width: 25.6414%;">SharedPointer&lt;Candera::Appearance&gt;</td><td style="width: 55.2715%;">The appearance to set on the node.  
</td></tr></tbody></table>

<div class="contents" id="bkmrk--7"><div class="contents"><div class="textblock">---

</div></div></div>#### **Gesture Action Behaviors**

<div class="contents" id="bkmrk--9"></div>##### **Transform Gesture** 

Use the transform gesture action to apply the transformation of a transform gesture event (pan, pinch and rotate) to a node. You can use this behavior as an action or directly without an event handler. This behavior is available for 2D scenes only.

**Pan**

If you touch the Render Node with one finger, the content that you have touched will follow your finger. If you touch it with two fingers the point of the content that hits the center between your fingers will follow the center between your fingers.

<div class="contents" id="bkmrk-use-the-maximum%2Fmini"><div class="contents"><div class="textblock">- Use the Maximum/Minimum properties for X/Y to limit the movement of the position to a certain area.
- Use the Pan mode selector to limit the transformation to X or Y axis.
- Deactivate the Pan to disallow any position change.

</div></div></div>**Pinch**

If you pinch/stretch the content with your fingers the content will be scaled down/up.

<div class="contents" id="bkmrk-use-the-maximum%2Fmini-0"><div class="contents"><div class="textblock">- Use the Maximum/Minimum properties to limit the absolute scale of the node.
- Use the Pinch mode selector to either limit the scaling to X or Y axis or to switch to non-uniform scaling where both axis are scaled individually.
- Deactivate the Pinch to disallow any scale change.

</div></div></div>**Rotate**

If you touch the content with two fingers and drag them around the rotation change of the line between your fingers will be applied on the content.

<div class="contents" id="bkmrk-use-the-maximum%2Fmini-1"><div class="contents"><div class="textblock">- Use the Maximum/Minimum properties to limit the absolute scale of the node.
- Use the Pinch mode selector to either limit the scaling to X or Y axis or to switch to none uniform scaling where both axis are scaled individually.

</div></div></div><p class="callout info">Only if all transformations are allowed the content is able to follow your fingers. Otherwise there may be a displacement that matches the configuration but not the finger position (e.g. if the pan/scale is locked to an axis or Rotation is disabled but scale is still set to uniform scale). The default values are chosen to most fit the common use cases (e.g. it is more likely that uniform scale is required than a non-uniform scale).</p>

**Example Usage**

<div class="contents" id="bkmrk-transform-gesture-ac-0"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Transform Gesture Example](https://doc316en.candera.eu/link/572#bkmrk-transform-gesture-ac)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-23"><div class="contents"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 18.4102%;">**Property Name**</th><th style="width: 36.4531%;">**Type**</th><th style="width: 45.0955%;">**Description**</th></tr><tr><td style="width: 18.4102%;">TargetNode</td><td style="width: 36.4531%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 45.0955%;">The Node which is modified. If not set, then the node where the behavior is attached to, will be modified.</td></tr><tr><td style="width: 18.4102%;">Pan</td><td style="width: 36.4531%;">[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt;PanGestureType::Enum&gt;</td><td style="width: 45.0955%;">The pan transformation of a pan gesture is applied to the node.</td></tr><tr><td style="width: 18.4102%;">Pinch</td><td style="width: 36.4531%;">[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt;PinchGestureType::Enum&gt;</td><td style="width: 45.0955%;">The scale transformation of a pinch gesture is applied to the node.</td></tr><tr><td style="width: 18.4102%;">Rotate</td><td style="width: 36.4531%;">bool</td><td style="width: 45.0955%;">The rotate transformation of a rotate gesture is applied to the node.</td></tr></tbody></table>

</div></div></div></div>**Advanced Properties**

<table class="doxtable" id="bkmrk-property-name-type-d-24" style="width: 100%;"><tbody><tr><th style="width: 20.8814%;">**Property Name**</th><th style="width: 29.661%;">**Type**</th><th style="width: 49.4165%;">**Description**</th></tr><tr><td style="width: 20.8814%;">PanMinimumX</td><td style="width: 29.661%;">[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt;FeatStd::Float&gt;</td><td style="width: 49.4165%;">The minimum pan X value.

*This property is only available if panning in x direction is enabled.*

</td></tr><tr><td style="width: 20.8814%;">PanMinimumY</td><td style="width: 29.661%;">[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt;FeatStd::Float&gt;</td><td style="width: 49.4165%;">The minimum pan Y value.

*This property is only available if panning in y direction is enabled.*

</td></tr><tr><td style="width: 20.8814%;">PanMaximumY</td><td style="width: 29.661%;">[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt;FeatStd::Float&gt;</td><td style="width: 49.4165%;">The maximum pan X value.

*This property is only available if panning in x direction is enabled.*

</td></tr><tr><td style="width: 20.8814%;">PanMaximumX</td><td style="width: 29.661%;">[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt;FeatStd::Float&gt;</td><td style="width: 49.4165%;">The maximum pan Y value.

*This property is only available if panning in y direction is enabled.*

</td></tr><tr><td style="width: 20.8814%;">PinchMinimumX</td><td style="width: 29.661%;">[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt;FeatStd::Float&gt;</td><td style="width: 49.4165%;">The minimum pinch X value.

*This property is only available if pinching in x direction is enabled.*

</td></tr><tr><td style="width: 20.8814%;">PinchMinimumY</td><td style="width: 29.661%;">[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt;FeatStd::Float&gt;</td><td style="width: 49.4165%;">The minimum pinch Y value.

*This property is only available if pinching in y direction is enabled.*

</td></tr><tr><td style="width: 20.8814%;">PinchMaximumX</td><td style="width: 29.661%;">[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt;FeatStd::Float&gt;</td><td style="width: 49.4165%;">The maximum pinch X value.

*This property is only available if pinching in x direction is enabled.*

</td></tr><tr><td style="width: 20.8814%;">PinchMaximumY</td><td style="width: 29.661%;">[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt;FeatStd::Float&gt;</td><td style="width: 49.4165%;">The maximum pinch Y value.

*This property is only available if pinching in y direction is enabled.*

</td></tr><tr><td style="width: 20.8814%;">PinchMinimumUniform</td><td style="width: 29.661%;">[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt;FeatStd::Float&gt;</td><td style="width: 49.4165%;">The minimum pinch uniform value.

*This property is only available if pinching is enabled and configured for ScaleUniform.*

</td></tr><tr><td style="width: 20.8814%;">PinchMaximumUniform</td><td style="width: 29.661%;">[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt;FeatStd::Float&gt;</td><td style="width: 49.4165%;">The maximum pinch uniform value.

*This property is only available if pinching is enabled and configured for ScaleUniform.*

</td></tr><tr><td style="width: 20.8814%;">RotateMinimum</td><td style="width: 29.661%;">[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt;FeatStd::Float&gt;</td><td style="width: 49.4165%;">The minimum rotate value

*This property is only available if rotation is enabled.*

</td></tr><tr><td style="width: 20.8814%;">RotateMaximum</td><td style="width: 29.661%;">[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt;FeatStd::Float&gt;</td><td style="width: 49.4165%;">The maximum rotate value

*This property is only available if rotation is enabled.*

</td></tr></tbody></table>

<div class="contents" id="bkmrk--10"><div class="textblock">---

</div></div>#### **Property Action Behaviors**

<div class="header" id="bkmrk--4"></div>
##### **Set Appearance**

Sets or changes the appearance of a 3D node. Adjusts its material, color, transparency, or texture to update how the node looks when triggered. This behavior is available for 3D scenes only.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-25"><div class="contents"><div class="contents"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 18.4102%;">**Property Name**</th><th style="width: 36.4531%;">**Type**</th><th style="width: 45.0955%;">**Description**</th></tr><tr><td style="width: 18.4102%;">TargetNode</td><td style="width: 36.4531%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 45.0955%;">The Node which is modified. If not set, then the node where the behavior is attached to, will be modified.</td></tr><tr><td style="width: 18.4102%;">PropertyReference  
</td><td style="width: 36.4531%;">PropertyReference::Enum</td><td style="width: 45.0955%;">Choose how the property gets set. Via own property or from another Behavior.

*Possible values: Self, Other*

</td></tr><tr><td style="width: 18.4102%;">Appearance  
</td><td style="width: 36.4531%;">SharedPointer&lt;Candera::Appearance&gt;</td><td style="width: 45.0955%;">The appearance to set on the node.

*This property is only available if the PropertyReference is set to "Self".*

</td></tr><tr><td style="width: 18.4102%;">PropertyProvider  
</td><td style="width: 36.4531%;">PropertyProviderBehavior\*</td><td style="width: 45.0955%;">Property Behavior which contains the color which has to be set on the effect.

*This property is only available if the PropertyReference is set to "Other".*

</td></tr><tr><td style="width: 18.4102%;">UseAsDefault  
</td><td style="width: 36.4531%;">bool  
</td><td style="width: 45.0955%;">True if the image shall be used as default image.</td></tr></tbody></table>

</div></div></div></div></div>##### **Send Value as Event**<small></small>

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_change_value_action_behavior.html)</small>

Sends out a new value. Associated controls with a value property receive the new value.

**Example Usage**

<div class="contents" id="bkmrk-format-string-exampl"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Format String Example](https://doc316en.candera.eu/link/572#bkmrk-format-string-exampl)</span>
- <span style="color: rgb(230, 126, 35);">[Interpolate Value Example](https://doc316en.candera.eu/link/572#bkmrk-interpolate-value-ex)</span>
- <span style="color: rgb(230, 126, 35);">[Move Node Example](https://doc316en.candera.eu/link/572#bkmrk-move-node-example)</span>
- <span style="color: rgb(230, 126, 35);">[Send Value As Event Example](https://doc316en.candera.eu/link/572#bkmrk-%C2%A0-5)</span>
- <span style="color: rgb(230, 126, 35);">[Set Position Example](https://doc316en.candera.eu/link/572#bkmrk-set-position-example)</span>
- <span style="color: rgb(230, 126, 35);">[Set Rotation Example](https://doc316en.candera.eu/link/572#bkmrk-set-rotation-example)</span>
- <span style="color: rgb(230, 126, 35);">[Switch Image Example](https://doc316en.candera.eu/link/572#bkmrk-switch-image-example)</span>
- <span style="color: rgb(230, 126, 35);">[Set Scale Example](https://doc316en.candera.eu/link/572#bkmrk-set-scale-example)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-26"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 20.5115%;">**Property Name**</th><th style="width: 28.5412%;">**Type**</th><th style="width: 50.9061%;">**Description**</th></tr><tr><td style="width: 20.5115%;">TargetNode</td><td style="width: 28.5412%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 50.9061%;">The Node which is modified. If not set, then the node where the behavior is attached to, will be modified.</td></tr><tr><td style="width: 20.5115%;">PropertyReference</td><td style="width: 28.5412%;">CgiStudioControl::PropertyReference::Enum</td><td style="width: 50.9061%;">Choose how the property gets set. Via own property or from another Behavior.

*Possible values: Self, Other*

</td></tr><tr><td style="width: 20.5115%;">ChangeValue</td><td style="width: 28.5412%;">ChangeValue::Enum  
</td><td style="width: 50.9061%;">How the event value shall be handled by the receiving.

*Possible values: Absolute, Relative*

</td></tr><tr><td style="width: 20.5115%;">EventDispatchStrategy</td><td style="width: 28.5412%;">[EventDispatchStrategyType::Enum](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 50.9061%;">The way the event gets sent.

*Possible values: Direct, Broadcast, Bubble, Tunnel, DedicatedBehavior*

</td></tr></tbody></table>

</div></div></div>**Advanced Properties**

<div class="contents" id="bkmrk-property-name-type-d-27"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 16.9275%;">**Property Name**</th><th style="width: 26.4415%;">**Type**</th><th style="width: 56.5898%;">**Description**</th></tr><tr><td style="width: 16.9275%;">Value</td><td style="width: 26.4415%;">FeatStd::Variant</td><td style="width: 56.5898%;">The value of the event which gets sent.

*This property is only available when the PropertyReference is set to "Self".*

</td></tr><tr><td style="width: 16.9275%;">PropertyProvider</td><td style="width: 26.4415%;">PropertyProviderBehavior\*</td><td style="width: 56.5898%;">Property provider which contains the value which has to be set on the send value as event action.

*This property can be set in the right side of the Scene Tree panel.*

*It is only available when the PropertyReference is set to "Other".*

</td></tr><tr><td style="width: 16.9275%;">DedicatedBehavior</td><td style="width: 26.4415%;">[Candera::ProcessValueBehavior](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_process_value_behavior.html "The ProcessValueBehavior provides a Variant data type which is bindable. A value change results in a ...")\*</td><td style="width: 56.5898%;">The dedicated process value behavior that will receive the change value event.

*This property can be set in the right side of the Scene Tree panel.*

*It is only available if the EventDispatchStrategy is set to "DedicatedBehavior".*

</td></tr></tbody></table>

</div></div><div class="header" id="bkmrk--6"></div>##### **Set Color**<small></small>

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_color_action_behavior.html)</small>

Sets the color of a node with a Color effect attached (e.g. BitmapBrushColorBlend or SolidColorBrush). In 3D, it sets the diffuse color of the material.

**Supports**

<div class="contents" id="bkmrk-controls%3A-text-text-"><div class="contents"><div class="textblock">- Controls: 
    - Text
    - Text Value
- Effects: 
    - BitmapBrushColorBlend (as used in TextNode)
    - GlBitmapBrushColorMaskBlend
    - GlDropShadowBitmapBrushColorBlend
    - GlFlipBitmapBrushColorBlend
    - GlOutlineBitmapBrushColorBlend
    - SolidColorBrushColorBlend (as used in SolidColorNode)

</div></div></div>**See also:** <span style="color: rgb(230, 126, 35);">[Set Image](https://doc316en.candera.eu/link/582#bkmrk-set-image)</span>, <span style="color: rgb(230, 126, 35);">[Set Text](https://doc316en.candera.eu/link/582#bkmrk-set-text)</span>, <span style="color: rgb(230, 126, 35);">[Set Control State](https://doc316en.candera.eu/link/582#bkmrk-set-control-state)</span>

**Example Usage**

<div class="contents" id="bkmrk-button-thermometer-e"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Thermometer Example](https://doc316en.candera.eu/link/572#bkmrk-thermometer-example)</span>
- <span style="color: rgb(230, 126, 35);">[Hover - Hover Leave Example](https://doc316en.candera.eu/link/572#bkmrk-hover---hover-leave-)</span>
- <span style="color: rgb(230, 126, 35);">[OnClick Example](https://doc316en.candera.eu/link/572#bkmrk-%C2%A0-2)</span>
- <span style="color: rgb(230, 126, 35);">[Set Image Example](https://doc316en.candera.eu/link/572#bkmrk-set-image-example)</span>
- <span style="color: rgb(230, 126, 35);">[Start Timer Example](https://doc316en.candera.eu/link/572#bkmrk-start-timer-example)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-28"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 20.5192%;">**Property Name**</th><th style="width: 17.6786%;">**Type**</th><th style="width: 61.8023%;">**Description**</th></tr><tr><td style="width: 20.5192%;">Property Reference</td><td style="width: 17.6786%;">PropertyReference::Enum</td><td style="width: 61.8023%;">Choose how the property gets set. Via own property or from another Behavior.

*Possible values: Self, Other*

</td></tr><tr><td style="width: 20.5192%;">Color</td><td style="width: 17.6786%;">Candera::Color</td><td style="width: 61.8023%;">The color to set.

*This property is only available if PropertyReference is set to "Self".*

</td></tr><tr><td style="width: 20.5192%;">Use For Child Nodes</td><td style="width: 17.6786%;">bool</td><td style="width: 61.8023%;">If set to true, also child nodes are affected by this action.</td></tr><tr><td style="width: 20.5192%;">Levels</td><td style="width: 17.6786%;">UInt8</td><td style="width: 61.8023%;">Number of levels to step down through groups. Default is zero.

*This property is only available if UseForChildNodes is checked.*

</td></tr><tr><td style="width: 20.5192%;">TargetNode</td><td style="width: 17.6786%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 61.8023%;">The node which is modified. If not set, then the node where the behavior is attached to, will be modified.</td></tr></tbody></table>

</div></div></div>**Advanced Properties**

<div class="contents" id="bkmrk-property-name-type-d-29"><div class="textblock"><table class="doxtable"><tbody><tr><th>**Property Name**</th><th>**Type**</th><th>**Description**</th></tr><tr><td>Property Provider</td><td>PropertyProviderBehavior\*</td><td>Property Provider which contains the color which has to be set on the effect.

*This property can be set in the right side of the Scene Tree panel.*

*It is only available if PropertyReference is set to"Other".*

</td></tr></tbody></table>

</div></div>##### **Set Image**<small></small>

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_image_action_behavior.html)</small>

Sets or changes the image of a node (such as Bitmap) with an attached effect (BitmapBrush) when an action is triggered. Can be used to update the image property of a BitmapBrush effect when used with OnClick.

**See also:** <span style="color: rgb(230, 126, 35);">[Set Text](https://doc316en.candera.eu/link/582#bkmrk-set-text)</span>, <span style="color: rgb(230, 126, 35);">[Set Color](https://doc316en.candera.eu/link/582#bkmrk-set-color)</span>, <span style="color: rgb(230, 126, 35);">[Set Control State](https://doc316en.candera.eu/link/582#bkmrk-set-control-state)</span>

**Example Usage**

- <span style="color: rgb(230, 126, 35);">[Set Image Example](https://doc316en.candera.eu/link/572#bkmrk-set-image-example)</span>

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-30"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 16.804%;">**Property Name**</th><th style="width: 22.9819%;">**Type**</th><th style="width: 60.173%;">**Description**</th></tr><tr><td style="width: 16.804%;">Target Node</td><td style="width: 22.9819%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 60.173%;">The node which gets the given image. If not set, then the node where the behavior is attached too, will be modified.</td></tr><tr><td style="width: 16.804%;">Property Reference</td><td style="width: 22.9819%;">PropertyReference::Enum</td><td style="width: 60.173%;">Choose how the property gets set. Via own property or from another Behavior.

*Possible values: Self, Other*

</td></tr><tr><td style="width: 16.804%;">Image</td><td style="width: 22.9819%;">[SharedPointer&lt;Image2D&gt;](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_memory_management_1_1_shared_pointer.html)</td><td style="width: 60.173%;">The image to set on the effect.

*This property is only available for 2D scenes.*

</td></tr><tr><td style="width: 16.804%;">Use As Default</td><td style="width: 22.9819%;">bool</td><td style="width: 60.173%;">True if the image shall be used as default image.</td></tr></tbody></table>

</div></div></div>**Advanced Properties**

<div class="contents" id="bkmrk-property-name-type-d-31"><div class="textblock"><table class="doxtable" style="width: 100%; height: 169.8px;"><tbody><tr style="height: 29.4667px;"><th style="width: 16.6804%; height: 29.4667px;">**Property Name**</th><th style="width: 33.1179%; height: 29.4667px;">**Type**</th><th style="width: 50.284%; height: 29.4667px;">**Description**</th></tr><tr style="height: 57.4667px;"><td style="width: 16.6804%; height: 57.4667px;">Texture</td><td style="width: 33.1179%; height: 57.4667px;">SharedPointer&lt;[Candera::TextureImage](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_texture_image.html "Abstract base class for Texture images.A texture image mainly encapsulates a texture handle in VRAM a...")&gt;</td><td style="width: 50.284%; height: 57.4667px;">The image to set on the appearance.

*This property is only available for 3D scenes.*

</td></tr><tr style="height: 82.867px;"><td style="width: 16.6804%; height: 82.867px;">PropertyProvider</td><td style="width: 33.1179%; height: 82.867px;">PropertyProviderBehavior\*</td><td style="width: 50.284%; height: 82.867px;">Property Provider which contains the color which has to be set on the effect.

*This property can be set in the right side of the Scene Tree panel.*

*It is only available if PropertyReference is set to "Other"*

</td></tr></tbody></table>

</div></div>##### **Set MVG Fill Color**

Sets the fill color of an MVG node using an MVG brush effect (for example, MVGRectBrush) when an action behavior is triggered.

<table class="doxtable" id="bkmrk-property-name-type-d-32" style="width: 100%; height: 163.366px;"><tbody><tr style="height: 29.7017px;"><th style="width: 16.6804%; height: 29.7017px;">**Property Name**</th><th style="width: 33.1179%; height: 29.7017px;">**Type**</th><th style="width: 50.284%; height: 29.7017px;">**Description**</th></tr><tr style="height: 57.4574px;"><td style="width: 16.6804%; height: 57.4574px;">PropertyReference</td><td style="width: 33.1179%; height: 57.4574px;">CgiStudioControl::PropertyReference::Enum </td><td style="width: 50.284%; height: 57.4574px;">Choose how the property gets set. Via own property or from another Behavior.</td></tr><tr style="height: 29.7017px;"><td style="width: 16.6804%; height: 29.7017px;">Color</td><td style="width: 33.1179%; height: 29.7017px;">Candera::Color</td><td style="width: 50.284%; height: 29.7017px;">The fill color to be set.</td></tr><tr style="height: 46.5057px;"><td style="width: 16.6804%; height: 46.5057px;">PropertyProvider</td><td style="width: 33.1179%; height: 46.5057px;">CgiStudioControl::PropertyProviderBehavior</td><td style="width: 50.284%; height: 46.5057px;">Property Behavior which contains the color which has to be set on the effect.

</td></tr></tbody></table>

##### **Set MVG Stroke Color**

<div class="headertitle" id="bkmrk-sets-the-stroke-%28out">Sets the stroke (outline/border) color of an MVG node using an effect. The color can be applied dynamically when an action behavior is triggered. Can set the stroke color of an MVGArc node when used with OnPress.</div><div class="headertitle" id="bkmrk-property-name-type-d-33"><table class="doxtable" style="width: 100%; height: 163.366px;"><tbody><tr style="height: 29.7017px;"><th style="width: 16.6804%; height: 29.7017px;">**Property Name**</th><th style="width: 33.1179%; height: 29.7017px;">**Type**</th><th style="width: 50.284%; height: 29.7017px;">**Description**</th></tr><tr style="height: 57.4574px;"><td style="width: 16.6804%; height: 57.4574px;">PropertyReference</td><td style="width: 33.1179%; height: 57.4574px;">CgiStudioControl::PropertyReference::Enum </td><td style="width: 50.284%; height: 57.4574px;">Choose how the property gets set. Via own property or from another Behavior.</td></tr><tr style="height: 29.7017px;"><td style="width: 16.6804%; height: 29.7017px;">Color</td><td style="width: 33.1179%; height: 29.7017px;">Candera::Color</td><td style="width: 50.284%; height: 29.7017px;">The fill color to be set.</td></tr><tr style="height: 46.5057px;"><td style="width: 16.6804%; height: 46.5057px;">PropertyProvider</td><td style="width: 33.1179%; height: 46.5057px;">CgiStudioControl::PropertyProviderBehavior</td><td style="width: 50.284%; height: 46.5057px;">Property Behavior which contains the color which has to be set on the effect.

</td></tr></tbody></table>

</div><div class="headertitle" id="bkmrk-"></div><div class="headertitle" id="bkmrk--8"></div>##### **Render Child Nodes**  


<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_switch_action_behavior.html)</small>

Enables or disables child nodes of a group according to the operation mode. The same float input is used to select a single node or affect multiple nodes. When the action triggred.

**Example Usage**

<div class="contents" id="bkmrk-render-child-nodes-e"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Render Child Nodes Example](https://doc316en.candera.eu/link/572#bkmrk-render-child-nodes-e)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-34"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 16.0626%;">**Property Name**</th><th style="width: 29.4069%;">**Type**</th><th style="width: 54.4893%;">**Description**</th></tr><tr><td style="width: 16.0626%;">TargetNode</td><td style="width: 29.4069%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 54.4893%;">The node which switches child nodes. If not set, then the node where the behavior is attached to, will modified its children.</td></tr><tr><td style="width: 16.0626%;">Index</td><td style="width: 29.4069%;">Float</td><td style="width: 54.4893%;">Index of the child node which shall be active.</td></tr><tr><td style="width: 16.0626%;">OperationMode</td><td style="width: 29.4069%;">OperationMode::Enum</td><td style="width: 54.4893%;">When set to MultipleNodes, EnableChildNodes will enable the first N children of Group Node. When Operation Mode is set to SingleNode, only the Nth node is enabled.

*Possible values: MultipleNodes, SingleNode*

</td></tr><tr><td style="width: 16.0626%;">Levels</td><td style="width: 29.4069%;">UInt8</td><td style="width: 54.4893%;">Number of levels to step down through groups. Default is zero.</td></tr><tr><td style="width: 16.0626%;">NormalizeValue</td><td style="width: 29.4069%;">bool</td><td style="width: 54.4893%;">If set to true, the received value has to be between 0 and 1 and will be mapped to the number of children. Otherwise the value has to be the index of the child.</td></tr></tbody></table>

</div></div><div class="header" id="bkmrk-back-to-the-menu-23"><div class="headertitle">  
</div></div>##### **Set Text**<small></small>

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_text_action_behavior.html)</small>

Sets/Changes the text of a TextNode.

**See also:** <span style="color: rgb(230, 126, 35);">[Set Image](https://doc316en.candera.eu/link/582#bkmrk-set-image)</span>, <span style="color: rgb(230, 126, 35);">[Set Color](https://doc316en.candera.eu/link/582#bkmrk-set-color)</span>, <span style="color: rgb(230, 126, 35);">[Set Control State](https://doc316en.candera.eu/link/582#bkmrk-set-control-state)</span>

**Example Usage**

<div class="contents" id="bkmrk-set-text-example"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Set Text Example](https://doc316en.candera.eu/link/572#bkmrk-set-text-example)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-35"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 17.6689%;">**Property Name**</th><th style="width: 19.028%;">**Type**</th><th style="width: 63.2619%;">**Description**</th></tr><tr><td style="width: 17.6689%;">TargetNode</td><td style="width: 19.028%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 63.2619%;">The Node which gets the given text. If not set, then the node where the behavior is attached to, will be modified.</td></tr><tr><td style="width: 17.6689%;">PropertyReference</td><td style="width: 19.028%;">PropertyReference::Enum</td><td style="width: 63.2619%;">Choose how the property gets set. Via own property or from another Behavior.

*Possible values: Self, Other*

</td></tr><tr><td style="width: 17.6689%;">Text</td><td style="width: 19.028%;">String</td><td style="width: 63.2619%;">The text that will be set to the Text Node.

*This property is available if the PropertyReference is set to "Self".*

</td></tr></tbody></table>

</div></div></div>**Advanced Properties**

<div class="contents" id="bkmrk-property-name-type-d-36"><div class="textblock"><table class="doxtable"><tbody><tr><th>**Property Name**</th><th>**Type**</th><th>**Description**</th></tr><tr><td>PropertyProvider</td><td>PropertyProviderBehavior\*</td><td>Property Behavior which contains the color which has to be set on the effect.

*This property can be set in the right side of the Scene Tree panel.*

*It is only available if the PropertyReference is configured with "Other".*

</td></tr></tbody></table>

</div></div><div class="header" id="bkmrk-back-to-the-menu-24"><div class="headertitle">  
</div></div>##### **Set Text Style**

Sets the configured text style to a text node when the action is triggered.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-37"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 12.8501%;">**Property Name**</th><th style="width: 25.3218%;">**Type**</th><th style="width: 61.787%;">**Description**</th></tr><tr><td style="width: 12.8501%;">TargetNode</td><td style="width: 25.3218%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 61.787%;">The Node which gets the given text. If not set, then the node where the behavior is attached to, will be modified.</td></tr><tr><td style="width: 12.8501%;">Style</td><td style="width: 25.3218%;">SharedPointer&lt;TextRendering::SharedStyle&gt;</td><td style="width: 61.787%;">The Style that will be set to the Text Node.</td></tr></tbody></table>

</div></div><div class="header" id="bkmrk-back-to-the-menu-25"><div class="headertitle">  
</div></div>##### **Enable Rendering**

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_toggle_action_behavior.html)</small>

If invoked by a TriggerBehavior, changes the visibility of a node.

**Example Usage**

<div class="contents" id="bkmrk-enable-rendering-exa"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Enable Rendering Example](https://doc316en.candera.eu/link/572#bkmrk-enable-rendering-exa)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-38"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 16.9275%;">**Property Name**</th><th style="width: 18.7809%;">**Type**</th><th style="width: 64.2504%;">**Description**</th></tr><tr><td style="width: 16.9275%;">TargetNode</td><td style="width: 18.7809%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 64.2504%;">The node which gets the visibility flag. If not set, then the node where the behavior is attached to, will be modified.</td></tr><tr><td style="width: 16.9275%;">Visible</td><td style="width: 18.7809%;">bool</td><td style="width: 64.2504%;">According to this value, the affected node gets rendered or not.</td></tr></tbody></table>

</div></div></div>##### **<span style="color: rgb(0, 0, 0);">Send Value Changed As Event  
</span>**

<span style="color: rgb(0, 0, 0);">Sends out a new value. Associated controls with a value property receive the new value.</span>

**<span style="color: rgb(0, 0, 0);">Example Usage</span>**

<div class="contents" id="bkmrk-process-value-change"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Process Value Changed Event - State Machine Example](https://doc316en.candera.eu/books/controls-and-behaviors/page/examples-using-predefined-behaviors#bkmrk-process-value-change-1)</span>
- [<span style="color: rgb(230, 126, 35);">Usecase for Send Value Changed as Event and reception in state machine(s)</span>](https://doc316en.candera.eu/link/572#bkmrk-usecase-for-send-val)

</div></div>**<span style="color: rgb(0, 0, 0);">Common Properties</span>**

<div class="contents" id="bkmrk-property-name-type-d-39"><div class="contents"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 16.9345%;">**Property Name**</th><th style="width: 18.7853%;">**Type**</th><th style="width: 64.2802%;">**Description**</th></tr><tr><td style="width: 16.9345%;">Value  
</td><td style="width: 18.7853%;">FeatStd::Variant</td><td style="width: 64.2802%;">The value of the event which gets sent.

*This property is only available if PropertyReference is set to "Self".*

</td></tr><tr><td style="width: 16.9345%;">Sender  
</td><td style="width: 18.7853%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 64.2802%;">The node for which the event shall be emitted. If it is not set then the TargetNode or Node (if TargetNode is not set) will be taken instead.</td></tr><tr><td style="width: 16.9345%;">EventDispatchStrategy  
</td><td style="width: 18.7853%;">c</td><td style="width: 64.2802%;">The way the event gets sent.

*Possible values: Direct, Broadcast, Bubble, Tunnel, DedicatedBehavior*

</td></tr><tr><td style="width: 16.9345%;">TargetNode  
</td><td style="width: 18.7853%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 64.2802%;">The node on which the for which the EventDispatchStrategy will be applied. If it is not set then the Node will be taken instead.</td></tr><tr><td style="width: 16.9345%;">PropertyReference  
</td><td style="width: 18.7853%;">PropertyReference::Enum</td><td style="width: 64.2802%;">Choose how the property gets set. Via own property or from another Behavior.

*Possible values: Self, Other*

</td></tr><tr><td style="width: 16.9345%;">Target Node</td><td style="width: 18.7853%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 64.2802%;">The target node to which the events are routed from the source node. If this property is not set, the event will be routed to the node of the behavior.</td></tr></tbody></table>

</div></div></div></div>**Advanced Properties**

<div class="contents" id="bkmrk-property-name-type-d-40"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 17.1746%;">**Property Name**</th><th style="width: 17.4223%;">**Type**</th><th style="width: 65.3619%;">**Description**</th></tr><tr><td style="width: 17.1746%;">DedicatedBehavior  
</td><td style="width: 17.4223%;">ProcessValueBehavior\*</td><td style="width: 65.3619%;">The dedicated process value behavior that will receive the change value event.

*This property can be set in the right side of the Scene Tree panel.*

*It is only available if the EventDispatchStrategy is set to "DedicatedBehavior".*

</td></tr><tr><td style="width: 17.1746%;">PropertyProvider</td><td style="width: 17.4223%;">PropertyProviderBehavior\*</td><td style="width: 65.3619%;">Property Behavior which contains the color which has to be set on the effect.

*This property can be set in the right side of the Scene Tree panel.*

*It is only available if the PropertyReference is set to "Other".*

</td></tr></tbody></table>

</div></div>---

#### **Scroll Action Behaviors**

<div class="header" id="bkmrk--15"><div class="headertitle">  
</div></div>##### **Send Scrollable Event**  


<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_scrollable_event_action_behavior.html)</small>

Enables a scrollable behavior (for example, a List behavior) to scroll to a specific target position based on the selected scrolling type (horizontal or vertical) and value (item-wise or page-wise) when triggered. Can be used to manage the scroll direction of a list control.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-41"><div class="contents"><div class="contents"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 19.7683%;">**Property Name**</th><th style="width: 17.2992%;">**Type**</th><th style="width: 62.8913%;">**Description**</th></tr><tr><td style="width: 19.7683%;">Target Node</td><td style="width: 17.2992%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 62.8913%;">The node which is modified. If not set, then the node where the behavior is attached to, will be modified.  
</td></tr><tr><td style="width: 19.7683%;">Direction</td><td style="width: 17.2992%;">Optional&lt;ScrollDirection::Enum&gt;</td><td style="width: 62.8913%;">The direction in which the scroll should be performed.

*Possible values: Vertical, Horizontal*

</td></tr><tr><td style="width: 19.7683%;">Type</td><td style="width: 17.2992%;">ScrollableEventType::Enum</td><td style="width: 62.8913%;">The scrolling type. It can be either relative or absolute scrolling in combination of being either itemwise or pagewise scrolling.</td></tr><tr><td style="width: 19.7683%;">Value</td><td style="width: 17.2992%;">Float</td><td style="width: 62.8913%;">The number of items or pages scrolled to.</td></tr><tr><td style="width: 19.7683%;">TreatAnimationDurationZeroAsNotSet  
</td><td style="width: 17.2992%;">bool  
</td><td style="width: 62.8913%;">When the AnimationDuration is set to 0 it will not be used as a valid animation duration. If a immediate scroll to the target position is intended this flag has to be set to false.</td></tr><tr><td style="width: 19.7683%;">AnimationDuration  
</td><td style="width: 17.2992%;">UInt32  
</td><td style="width: 62.8913%;">Duration of the scrolling animation.</td></tr><tr><td style="width: 19.7683%;">EventDispatchStrategy  
</td><td style="width: 17.2992%;">EventDispatchStrategyType::Enum</td><td style="width: 62.8913%;">The way the event gets sent.

*Possible values: Direct, Broadcast, Bubble, Tunnel, DedicatedBehavior*

</td></tr></tbody></table>

</div></div></div></div></div>**Advanced Properties**

<table class="doxtable" id="bkmrk-property-name-type-d-42" style="width: 100%;"><tbody><tr><th style="width: 19.7694%;">**Property Name**</th><th style="width: 17.2982%;">**Type**</th><th style="width: 62.8913%;">**Description**</th></tr><tr><td style="width: 19.7694%;">DedicatedBehavior  
</td><td style="width: 17.2982%;">Behavior\*</td><td style="width: 62.8913%;">The dedicated process value behavior that will receive the change value event.

*This property can be set in the right side of the Scene Tree panel.*

*It is only available if the EventDispatchStrategy is set to "DedicatedBehavior".*

</td></tr></tbody></table>

<div class="contents" id="bkmrk--16"><div class="textblock">---

</div></div>#### **Streaming Action Behaviors**

<div class="header" id="bkmrk--17"><div class="headertitle"><div class="title">  
</div></div></div>##### **Configure and Play Stream**<small></small>

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_video_stream_action_behavior.html)</small>

Starts, stops, pauses, resumes video streams by emitting an VideoControl Event. These Events can be received by <span style="color: rgb(230, 126, 35);">[Video Stream](https://doc316en.candera.eu/link/646#bkmrk-video-stream)</span> Behaviors.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-43"><div class="contents"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 20.0165%;">**Property Name**</th><th style="width: 28.0548%;">**Type**</th><th style="width: 51.8875%;">**Description**</th></tr><tr><td style="width: 20.0165%;">TargetNode</td><td style="width: 28.0548%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 51.8875%;">The node which receives the event. If not set, then the node where the behavior is attached to, will receive it.</td></tr><tr><td style="width: 20.0165%;">Action</td><td style="width: 28.0548%;">VideoControl::Enum</td><td style="width: 51.8875%;">Action that will be executed on the stream.

*Possible values:* *Play, Replay, Pause, Resume, Stop.*

</td></tr><tr><td style="width: 20.0165%;">EventDispatchStrategy</td><td style="width: 28.0548%;">EventDispatchStrategyType::Enum</td><td style="width: 51.8875%;">The strategy in which the event is sent.

*Possible values: Direct, Broadcast, Bubble, Tunnel, DedicatedBehavior.*

</td></tr></tbody></table>

</div></div></div></div>Advanced Properties

<table class="doxtable" id="bkmrk-property-name-type-d-44" style="width: 100%;"><tbody><tr><th style="width: 20.0165%;">**Property Name**</th><th style="width: 20.2652%;">**Type**</th><th style="width: 59.6771%;">**Description**</th></tr><tr><td style="width: 20.0165%;">DedicatedBehavior</td><td style="width: 20.2652%;">[Candera::Behavior](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_behavior.html "Behaviors are small re-usable functional blocks that communicate via events. Behaviors are based on W...")\*</td><td style="width: 59.6771%;">A dedicated behavior that will receive the event.

*This property can be set in the right side of the Scene Tree panel.*

*It is only available if the EventDispatchStrategy is set to "DedicatedBehavior".*

</td></tr></tbody></table>

<div class="contents" id="bkmrk--18"><div class="textblock">---

</div></div>#### **Transition Action Behaviors**

##### **Perform Transition Requests**<small></small>

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_transition_action_behavior.html)</small>

Used to specify whether a node should be activated or deactivated by the transition framework when the associated TransitionActionBehavior is triggered.

Used to execute transitions via TransitionRequestBehaviors.

**See also:** <span style="color: rgb(230, 126, 35);">[Transition Request](https://doc316en.candera.eu/link/582#bkmrk-transition-request-0)</span>

**Example Usage**

<div class="contents" id="bkmrk-perform-transition-r-1"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Perform Transition Requests Example](https://doc316en.candera.eu/link/572#bkmrk-perform-transition-r)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-45"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 13.3498%;">**Property Name**</th><th style="width: 36.833%;">**Type**</th><th style="width: 49.8172%;">**Description**</th></tr><tr><td style="width: 13.3498%;">Requests</td><td style="width: 36.833%;">ArrayProperty&lt;TransitionRequestBehavior \*&gt;</td><td style="width: 49.8172%;">The first TransitionRequestBehavior in the request-set.</td></tr><tr><td style="width: 13.3498%;">Variant</td><td style="width: 36.833%;">String</td><td style="width: 49.8172%;">Default Variant which will be used for attached Requests. Not that Requests can also have their own Variant.</td></tr></tbody></table>

</div></div>##### **Transition Request**<small></small>

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_transition_request_behavior.html)</small>

Used to specify whether a node should be activated or deactivated by the transition framework when the associated TransitionActionBehavior is triggered.

**Example Usage**

<div class="contents" id="bkmrk-perform-transition-r-2"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Perform Transition Requests Example](https://doc316en.candera.eu/link/572#bkmrk-perform-transition-r)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-46"><div class="contents"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 16.3164%;">**Property Name**</th><th style="width: 38.0688%;">**Type**</th><th style="width: 45.6148%;">**Description**</th></tr><tr><td style="width: 16.3164%;">RequestType</td><td style="width: 38.0688%;">CgiStudioControl::TransitionRequestType::Enum</td><td style="width: 45.6148%;">Whether a node should be Activated or Deactivated by the transition. Currently running transitions on a node can be ended using the Finish transition type.

*Possible values: Activate, Deactivate, Finish*

</td></tr><tr><td style="width: 16.3164%;">Variant</td><td style="width: 38.0688%;">[FeatStd::String](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_string.html)</td><td style="width: 45.6148%;">Variant which will be used for this Request.</td></tr><tr><td style="width: 16.3164%;">Identifier</td><td style="width: 38.0688%;">[Candera::Transitions::Identifier](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_transitions_1_1_identifier.html "Currently known limitation: there is currently no suitable identification available of nodes that are...")</td><td style="width: 45.6148%;">The Node or Scene that will be subject to the transition.</td></tr></tbody></table>

</div></div></div></div><div class="contents" id="bkmrk--19"><div class="contents"><div class="textblock">---

</div></div></div>#### **Views**

##### **Jump to View**

<span style="color: rgb(0, 0, 0);">Use this action to request jump/switching to the configured view (via the configured node). Depending on the view state setup (e.g. with view trees or a state machine) the request will be accepted or denied. The action itself will emit a JumpToViewEvent on the configured node.</span>

**<span style="color: rgb(0, 0, 0);">Common Properties</span>**

<table class="doxtable" id="bkmrk-property-name-type-d-47" style="width: 100%;"><tbody><tr><th style="width: 16.3164%;">**Property Name**</th><th style="width: 38.0688%;">**Type**</th><th style="width: 45.6148%;">**Description**</th></tr><tr><td style="width: 16.3164%;">TargetNode</td><td style="width: 38.0688%;">Candera::AbstractNodePointer</td><td style="width: 45.6148%;">The Node which is modified. If not set, then the node where the behavior is attached to, will be modified.</td></tr><tr><td style="width: 16.3164%;">View</td><td style="width: 38.0688%;">ViewIdentifier</td><td style="width: 45.6148%;">Identifier of the view that is requested to be shown.</td></tr></tbody></table>

<p class="callout warning">There is **no documentation** for behaviors of the **Internal** subcategory as they are used internally by Scene Composer and **not intended for customer use**.</p>

---

#### **Send Virtual Key**

When triggered the action behavior sends a KeyEvent for down and one frame later a KeyEvent for up

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-48"><div class="contents"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 97.6543%;"><tbody><tr><th style="width: 15.388%;">**Property Name**</th><th style="width: 22.4901%;">**Type**</th><th style="width: 62.078%;">**Description**</th></tr><tr><td style="width: 15.388%;">KeyType</td><td style="width: 22.4901%;">KeyType::Enum</td><td style="width: 62.078%;">Choose the type of the key. With KeyCode you can select any key.

*Possible values: KeyCode, Modifier*

</td></tr><tr><td style="width: 15.388%;">Modifier  
</td><td style="width: 22.4901%;">KeyModifierEnum::Enum</td><td style="width: 62.078%;">Modifier Key (e.g. Shift)

*Possible values: None, Key\_Shift, Key\_Alt, Key\_Ctrl, Key\_CapsLock, Key\_Num*

*This property is only available if "KeyType" is set to "Modifier".*

</td></tr><tr><td style="width: 15.388%;">KeyCode  
</td><td style="width: 22.4901%;">KeyboardKeyCode::Enum</td><td style="width: 62.078%;">With KeyCode you can select any key.

*Possible values: Key\_None, ...&lt;all keyboard key codes&gt;... Key\_OEM8*

*This property is only available if "KeyType" is set to "KeyCode".*

</td></tr></tbody></table>

</div></div></div></div>---

#### **Set Culture**

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_set_culture_action_behavior.html)</small>

Action Behavior which activates a culture based on its 'locale' value. Receives a locale as value. Invoking the action changes the application culture to a culture fitting to this locale.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-49"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100.494%;"><tbody><tr><th style="width: 18.3866%;">**Property Name**</th><th style="width: 16.5008%;">**Type**</th><th style="width: 65.0603%;">**Description**</th></tr><tr><td style="width: 18.3866%;">Locale</td><td style="width: 16.5008%;">[FeatStd::String](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_string.html)</td><td style="width: 65.0603%;">Locale of a culture. Invoking the action will set the culture active.</td></tr></tbody></table>

</div></div></div>

# Condition Behaviors

#### **Control Condition Behaviors**

<div class="header" id="bkmrk--0"><div class="headertitle">  
</div></div><div class="title" id="bkmrk--1"></div>##### **Check Animation State**

Checks the current state of an animation (for example, play, paused, or direction changed) from the Configure and Play Animation behavior and triggers an action behavior when the condition is met.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 14.7011%;">**Property Name**</th><th style="width: 30.892%;">**Type**</th><th style="width: 54.3657%;">**Description**</th></tr><tr><td style="width: 14.7011%;">AnimationState</td><td style="width: 30.892%;">AnimationState::Enum</td><td style="width: 54.3657%;">State of the AnimationEvent which fulfills the Condition.

*Possible values: PastEnd, Start, Stop, Finish, Resume, Pause, ApplyChanges, DirectionChange*

</td></tr><tr><td style="width: 14.7011%;">Sender  
</td><td style="width: 30.892%;">SharedPointer&lt;Candera::Animation::AnimationPlayer&gt;</td><td style="width: 54.3657%;">The sender of AnimationEvent.</td></tr></tbody></table>

<dl class="note"></dl></div></div><p class="callout info">When this condition is used in a global state machine, the event dispatch strategy of 'Configure and Play Animation Behavior' must be set to bubble or tunnel.</p>

##### **Check Enter or Exit**

Expects an EnterExit Event (generated by Edit Text Behavior) and returns either a positive or negative response.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-0"><div class="textblock"><table class="doxtable"><tbody><tr><th>**Property Name**</th><th>**Type**</th><th>**Description**</th></tr><tr><td>EnterOrExit</td><td>bool</td><td>True means Enter, false means Exit.</td></tr></tbody></table>

</div></div><div class="header" id="bkmrk--2"><div class="headertitle">  
</div></div>##### **Check Interval Switch**

Checks if the visualization state from the IntervalSwitch behavior matches the configured state (On or Off). Triggers an action when the condition is met. Can be used to check the state of a IntervalSwitch behavior.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-1"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 16.6873%;">**Property Name**</th><th style="width: 22.6156%;">**Type**</th><th style="width: 60.6971%;">**Description**</th></tr><tr><td style="width: 16.6873%;">VisualizationState</td><td style="width: 22.6156%;">IntervalSwitchState::Enum</td><td style="width: 60.6971%;">If the value (received by the IntervalSwitchConditionBehavior) matches the Visualization State set, it will return a positive response.

*Possible values: On, Off, Blinking*

</td></tr></tbody></table>

</div></div>##### **Check Selection ID** 

Compares the ID from the ChangeSelectionEvent with the ID from its own Control.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-2"><div class="textblock"><table class="doxtable"><tbody><tr><th>**Property Name**</th><th>**Type**</th><th>**Description**</th></tr><tr><td>SelectionCondition</td><td>SelectionConditionEnum::Enum</td><td>The condition that the ID from the ChangeSelectionEvent has to fulfill.

*Possible values: Same, NotSame*

</td></tr></tbody></table>

</div></div><div class="header" id="bkmrk--3"><div class="headertitle">  
</div></div>##### **Check Control State**

Checks a specific state event generated by the ControlState behavior (pressed, enabled, etc.) in conjunction with the configured state and condition (e.g. pressed and is true). If the condition is met, an action behavior is triggered.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-3"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 14.5784%;">**Property Name**</th><th style="width: 17.7939%;">**Type**</th><th style="width: 67.5865%;">**Description**</th></tr><tr><td style="width: 14.5784%;">State</td><td style="width: 17.7939%;">ControlStateEnum::Enum</td><td style="width: 67.5865%;">State which has to be checked.

*Possible values: Selected, Pressed, Enabled, Highlighted, KeyboardFocused, ScopeFocused, Hover, Touched*

</td></tr><tr><td style="width: 14.5784%;">StateCondition</td><td style="width: 17.7939%;">StateConditionEnum::Enum</td><td style="width: 67.5865%;">The condition the state has to fulfill.

*Possible values:* *ChangedToTrue, ChangedToFalse, IsTrue, IsFalse*

</td></tr></tbody></table>

</div></div><div class="header" id="bkmrk--4"><div class="headertitle">  
</div></div>##### **Check Timer**

**See also:** <span style="color: rgb(230, 126, 35);">[Start Timer](https://doc316en.candera.eu/link/582#bkmrk-start-timer)</span>, <span style="color: rgb(230, 126, 35);">[OnTimer](https://doc316en.candera.eu/link/598#bkmrk-ontimer)</span>

Checks the time (in milliseconds) received from the StartTimer behavior. If the timer reaches the configured delay, it invokes an Action behavior. Can be used as a transition condition in a state machine.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-4"><div class="textblock"><table class="doxtable"><tbody><tr><th>**Property Name**</th><th>**Type**</th><th>**Description**</th></tr><tr><td>Sender</td><td style="width: 30.892%;">AbstractNodePointer</td><td style="width: 54.3657%;">The node from which the event has to be emitted. If it is not set then all events of the proper event type are handled.</td></tr></tbody></table>

</div></div>##### **Check Changed Value**

Evaluates the configured value condition. To be used within a trigger behavior to trigger a certain action if the value matches the condition.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-5"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 18.5306%;">**Property Name**</th><th style="width: 27.0625%;">**Type**</th><th style="width: 54.3657%;">**Description**</th></tr><tr><td style="width: 18.5306%;">Sender</td><td style="width: 27.0625%;">AbstractNodePointer</td><td style="width: 54.3657%;">The node from which the event has to be emitted. If it is not set then all events of the proper event type are handled.</td></tr><tr><td style="width: 18.5306%;">ConditionOperator</td><td style="width: 27.0625%;">Operators::Enum</td><td style="width: 54.3657%;">The condition operator.

*Possible values: GreaterThan, LowerThan, Equal, AlmostEqual, GreaterOrEqual, LowerOrEqual*

</td></tr><tr><td style="width: 18.5306%;">ConditionValue</td><td style="width: 27.0625%;">[FeatStd::Variant](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_variant.html)</td><td style="width: 54.3657%;">The condition value.</td></tr></tbody></table>

</div></div></div><div class="title" id="bkmrk--5"></div>##### **Check Processed Value**

Checks whether a Value meets certain condition.

The following values can take part in the comparison, depending on the Operation Mode selected:

<div class="contents" id="bkmrk-value-sent-in-proces"><div class="contents"><div class="textblock">- Value sent in Process Value
- External value from ValueBehavior
- Value set directly in this ValueConditionBehavior

</div></div></div>**Example Usage**

<div class="contents" id="bkmrk-thermometer-example"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Thermometer Example](https://doc316en.candera.eu/link/572#bkmrk-thermometer-example)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-6"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 16.6873%;">**Property Name**</th><th style="width: 28.3029%;">**Type**</th><th style="width: 55.0098%;">**Description**</th></tr><tr><td style="width: 16.6873%;">OperationMode</td><td style="width: 28.3029%;">Operators::Enum</td><td style="width: 55.0098%;">Operation mode of behavior, defining which values should be compared.

*Possible values: CompareProcessedValueWithConditionValue, CompareExternalValueWithConditionValue, CompareProcessedValueWithExternalValue*

</td></tr><tr><td style="width: 16.6873%;">ConditionOperator</td><td style="width: 28.3029%;">Operators::Enum</td><td style="width: 55.0098%;">The condition operator.

*Possible values: GreaterThan, LowerThan, Equal, AlmostEqual, GreaterOrEqual, LowerOrEqual*

</td></tr><tr><td style="width: 16.6873%;">ConditionValue</td><td style="width: 28.3029%;">[FeatStd::Variant](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_variant.html)</td><td style="width: 55.0098%;">The condition value.

*This property is only available if "OperationMode" is set to "CompareProcessedValueWithConditionValue" or "CompareExternalValueWithConditionValue".*  
</td></tr><tr><td style="width: 16.6873%;">ValueBehavior</td><td style="width: 28.3029%;">[CgiStudioControl::ValueBehavior](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_value_behavior.html "Receives a ChangeValueEvent and passes its changed value to the receivers (Value Processing Behaviors...") \*</td><td style="width: 55.0098%;">Value behavior to be checked for changes if OperationMode requires external value.

*This property is only available if "OperationMode" is set to "CompareExternalValueWithConditionValue" or "CompareProcessedValueWithExternalValue".*

*This property can be set in the right side of the Scene Tree Panel.*

</td></tr></tbody></table>

</div></div><div class="header" id="bkmrk--6"><div class="headertitle">  
</div></div>##### **Check Video State**

Checks the state of an VideoStateEvent received from an 'Video Stream Behavior'.

Expects a VideoState event (generated by <span style="color: rgb(230, 126, 35);">[Video Stream](https://doc316en.candera.eu/link/646#bkmrk-video-stream)</span> Behavior) and evaluates the configured state condition. To be used within a trigger behavior.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-7"><div class="contents"><div class="contents"><div class="textblock"><table class="doxtable"><tbody><tr><th>**Property Name**</th><th>**Type**</th><th>**Description**</th></tr><tr><td>VideoState</td><td>VideoState::Enum</td><td>State of the VideoEvent which fulfills the Condition.

*Possible values: Null, Ready, Playing, Paused, EndOfStream*

</td></tr></tbody></table>

</div></div></div></div><div class="contents" id="bkmrk--7"><div class="contents"><div class="textblock">---

</div></div></div>#### **Input Condition Behaviors**

##### **Check Click**

Evaluates the configured click event condition. To be used within a trigger behavior to trigger a certain action.

**Example Usage**

<div class="contents" id="bkmrk-render-child-nodes-e"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Render Child Nodes Example](https://doc316en.candera.eu/link/572#bkmrk-render-child-nodes-e)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-8"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 15.8155%;">**Property Name**</th><th style="width: 30.5189%;">**Type**</th><th style="width: 53.6244%;">**Description**</th></tr><tr><td style="width: 15.8155%;">Sender</td><td style="width: 30.5189%;">AbstractNodePointer</td><td style="width: 53.6244%;">The node from which the event has to be emitted. If it is not set then all events of the proper event type are handled.</td></tr><tr><td style="width: 15.8155%;">ClickCount</td><td style="width: 30.5189%;">CgiStudioControl::ClickCount::Enum</td><td style="width: 53.6244%;">If the value ClickConditionBehavior receives matches the Click Count set, it will return a positive response.

*Possible values: AnyClick, SingleClick, DoubleClick, TripleClick*

</td></tr><tr><td style="width: 15.8155%;">TouchId</td><td style="width: 30.5189%;">FeatStd::UInt</td><td style="width: 53.6244%;">The id of the finger that performed the click (the default value of 0 indicates the first finger, 1 the second ...).</td></tr></tbody></table>

</div></div>##### **Check Drag Drop**

Evaluates the configured DragDrop event condition. To be used within a trigger behavior to trigger a certain action.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-9"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 14.9506%;">**Property Name**</th><th style="width: 38.9209%;">**Type**</th><th style="width: 46.0873%;">**Description**</th></tr><tr><td style="width: 14.9506%;">Sender</td><td style="width: 38.9209%;">AbstractNodePointer</td><td style="width: 46.0873%;">The node from which the event has to be emitted. If it is not set then all events of the proper event type are handled.</td></tr><tr><td style="width: 14.9506%;">Type</td><td style="width: 38.9209%;">[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt;DragDropEventType::Enum&gt;</td><td style="width: 46.0873%;">The optional type of the event. If not provided then any DragDropEvent will be evaluated to true.

*Possible values: Drag, DragMove, Drop, DragEnter, DragLeave*

</td></tr><tr><td style="width: 14.9506%;">TouchId</td><td style="width: 38.9209%;">FeatStd::UInt</td><td style="width: 46.0873%;">The id of the finger that performed the drag (the default value of 0 indicates the first finger, 1 the second ...).</td></tr></tbody></table>

</div></div>##### **Check Hover**

Evaluates the configured Hover event condition. To be used within a trigger behavior to trigger a certain action.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-10"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 16.1862%;">**Property Name**</th><th style="width: 39.2916%;">**Type**</th><th style="width: 44.4811%;">**Description**</th></tr><tr><td style="width: 16.1862%;">Sender</td><td style="width: 39.2916%;">AbstractNodePointer</td><td style="width: 44.4811%;">The node from which the event has to be emitted. If it is not set then all events of the proper event type are handled.</td></tr><tr><td style="width: 16.1862%;">Type</td><td style="width: 39.2916%;">[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt;DragDropEventType::Enum&gt;</td><td style="width: 44.4811%;">The optional type of the event. If not provided then any DragDropEvent will be evaluated to true.

*Possible values: Hover, HoverEnter, HoverLeave*

</td></tr><tr><td style="width: 16.1862%;">TouchId</td><td style="width: 39.2916%;">FeatStd::UInt</td><td style="width: 44.4811%;">The id of the finger that performed the drag (the default value of 0 indicates the first finger, 1 the second ...).</td></tr></tbody></table>

</div></div>##### **Check Key Input**

Checks a received KeyEvent (Control or Node with ControlStateBehavior / 'Handle Control State' must have focus).

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-11"><div class="contents"><div class="textblock"><table class="doxtable"><tbody><tr><th>**Property Name**</th><th>**Type**</th><th>**Description**</th></tr><tr><td>KeyType</td><td>CgiStudioControl::KeyType::KeyCode</td><td>Choose type of key.

*Possible values: KeyCode, Modifier*

</td></tr><tr><td>KeyCode</td><td>Candera::KeyboardKeyCode::Enum</td><td>Check the KeyCode of the pressed key (can also be modifier).

*Possible values: Key\_None, ...&lt;all keyboard key codes&gt;... Key\_OEM8*

*This property is only available if "KeyType" is set to "KeyCode".*

</td></tr></tbody></table>

</div></div></div>Advanced Properties

<div class="contents" id="bkmrk-property-name-type-d-12"><div class="textblock"><table class="doxtable" style="width: 101.358%;"><tbody><tr><th style="width: 14.8267%;">**Property Name**</th><th style="width: 28.4188%;">**Type**</th><th style="width: 56.7134%;">**Description**</th></tr><tr><td style="width: 14.8267%;">Modifier</td><td style="width: 28.4188%;">Candera::KeyModifierEnum::Enum</td><td style="width: 56.7134%;">Check a modifier key.

*Possible values: None, Key\_Shift, Key\_Alt, Key\_Ctrl, Key\_CapsLock, Key\_Num*

*This property is only available if "KeyType" is set to "Modifier".*

</td></tr></tbody></table>

</div></div>##### **Check Pressed**

Evaluates the configured Pressed event condition. To be used within a trigger behavior to trigger a certain action.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-13"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 17.2982%;">**Property Name**</th><th style="width: 39.6623%;">**Type**</th><th style="width: 42.9984%;">**Description**</th></tr><tr><td style="width: 17.2982%;">Sender</td><td style="width: 39.6623%;">AbstractNodePointer</td><td style="width: 42.9984%;">The node from which the event has to be emitted. If it is not set then all events of the proper event type are handled.</td></tr><tr><td style="width: 17.2982%;">Type</td><td style="width: 39.6623%;">[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt;DragDropEventType::Enum&gt;</td><td style="width: 42.9984%;">The optional type of the event. If not provided then any DragDropEvent will be evaluated to true.

*Possible values: Pressed, Released, LongPressed*

</td></tr><tr><td style="width: 17.2982%;">TouchId</td><td style="width: 39.6623%;">FeatStd::UInt</td><td style="width: 42.9984%;">The id of the finger that performed the drag (the default value of 0 indicates the first finger, 1 the second ...).</td></tr></tbody></table>

</div></div>##### **Swipe Gesture** 

The swipe condition checks if a swipe/flick has been performed according to the configured settings.

**Configuration**

The type of swipe event and the direction can be configured. By default, it is configured to the end of the swipe (removing the finger from the screen) in any direction. Other configurations are:

***Begin***

The finger has touched the control and moved over the threshold.

<div class="contents" id="bkmrk-the-threshold-in-pix"><div class="contents"><div class="textblock">- The threshold in pixel is independent of the unit size of the control local coordinate system. You do not have to take care of that transformation.
- The default threshold is set to 10 pixel.
- The threshold can be changed by calling this method: `<a class="el" href="http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_swipe_gesture_detector.html" title="The SwipeGestureDetector handles TouchEvents and emits a SwipeEvent when a Swipe gesture is detected...">CgiStudioControl::SwipeGestureDetector</a>:: GetInstance().SetSwipeDistanceThreshold(…)`.

</div></div></div>***Swiping***

The swipe is in progress and the finger is moving over the screen.

***Flick***

In addition to the Swipe End a Swipe Flick will be sent if the velocity at the Swipe End exceeds the flick velocity threshold.

<div class="contents" id="bkmrk-the-threshold-is-in-"><div class="contents"><div class="textblock">- The threshold is in pixel per second independent of the unit size of the control local coordinate system. You do not have to take care of that transformation.
- The default threshold is set to 0,01 pixel per second.
- The threshold can be changed by calling this method `<a class="el" href="http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_swipe_gesture_detector.html" title="The SwipeGestureDetector handles TouchEvents and emits a SwipeEvent when a Swipe gesture is detected...">CgiStudioControl::SwipeGestureDetector</a>:: GetInstance().SetFlickVelocityThreshold(…)`.

</div></div></div>***Abort***

An external actor has aborted the swipe. The finger is still on the screen. But the gesture detector will no longer process the swipe gesture. This can be caused for example when a behavior is taking exclusive control over the touch event handling. Like the list behavior does it when it enters touch based scrolling mode.

To limit the condition to a certain direction just enable the direction. The default will be set to left (e.g. a next gesture in a menu screen or delete gesture in a message list). You can change it to Right, Up or Down. The direction is always in the local coordinate system of your control (e.g. if you have to implement a UI for a rotated display you will still receive the swipe up event even if it is swipe right in the display coordinate system).

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-14"><div class="textblock"><table class="doxtable"><tbody><tr><th>**Property Name**</th><th>**Type**</th><th>**Description**</th></tr><tr><td>Type</td><td>[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt;SwipeType::Enum&gt;</td><td>The type of the swipe gesture.

*Possible values: Begin, Swiping, End, Flick, Abort*

</td></tr><tr><td>Direction</td><td>[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt;SwipeDirection::Enum&gt;</td><td>The direction of the swipe.

*Possible values: Left, Right, Up, Down*

</td></tr></tbody></table>

</div></div>##### **Transform Gesture**

Use this condition to trigger actions in an event handler whenever a transform gesture has been detected (pan, pinch and rotate).

**Common Properties**

This behavior does not have any configurable properties.

---

#### **Logic Condition Behaviors**

##### **Check Logic Condition**

The logic condition combines multiple conditions with the configured logical operation.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-15"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 16.5637%;">**Property Name**</th><th style="width: 34.8554%;">**Type**</th><th style="width: 48.5809%;">**Description**</th></tr><tr><td style="width: 16.5637%;">Operation</td><td style="width: 34.8554%;">LogicConditionBehaviorOperator::Enum</td><td style="width: 48.5809%;">Specifies logical operator that is used on values returned by the Conditions. The resulting value is returned.

*Possible values: And, Or, XOr*

</td></tr><tr><td style="width: 16.5637%;">Conditions</td><td style="width: 34.8554%;">Candera::ConditionBehaviorArrayProperty</td><td style="width: 48.5809%;">ConditionBehaviors that are combined with the ConditionOperator.</td></tr></tbody></table>

</div></div>##### **Check Not Condition**

Acts as a 'NOT' operand by inverting a value returned by a ConditionBehavior and returns it.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-16"><div class="textblock"><table class="doxtable"><tbody><tr><th>**Property Name**</th><th>**Type**</th><th>**Description**</th></tr><tr><td>Condition</td><td>Candera::ConditionBehavior\*</td><td>ConditionBehavior whose value NotConditionBehavior inverts.</td></tr></tbody></table>

</div></div>---

#### **Scroll Condition Behaviors**

##### **Check Scroll Condition**

Evaluates the configured ScrollableDirectionChanged event condition. The event gets sent from Scroll View Behavior. To be used within a trigger behavior to trigger a certain action.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-17"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 16.8109%;">**Property Name**</th><th style="width: 19.5349%;">**Type**</th><th style="width: 63.6543%;">**Description**</th></tr><tr><td style="width: 16.8109%;">ScrollDirection</td><td style="width: 19.5349%;">ScrollDirection::Enum</td><td style="width: 63.6543%;">If the value that the ScrollDirectionConditionBehavior receives matches the set ScrollDirection, it will return a positive response.

*Possible values: Vertical, Horizontal*

</td></tr></tbody></table>

</div></div>---

#### **Check Culture Change**

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_set_culture_action_behavior.html)</small>

Checks if the culture has changed. This condition is satisfied when the culture matches the culture ID specified in the Local property, and an action behavior is subsequently invoked. Can be used to change the text culture with a button press.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-18"><div class="textblock"><table class="doxtable"><tbody><tr><th>**Property Name**</th><th>**Type**</th><th>**Description**</th></tr><tr><td>Locale</td><td>[FeatStd::String](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_string.html)</td><td>Locale of a culture which will be checked.  
</td></tr></tbody></table>

</div></div>

# Control Behaviors

### **Construction Kit Control Behaviors**

#### **Map Control Behaviors**

##### **Map**

Provides the map rendering and navigation functionality.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d"><div class="textblock"><table class="doxtable"><tbody><tr><th>**Property Name**</th><th>**Type**</th><th>**Description**</th></tr><tr><td>TouchableId  
</td><td>String  
</td><td>Touchable Id of the behavior.</td></tr><tr><td>Bearing</td><td>Float</td><td>Clockwise angle relative to North that the users currently faces.</td></tr><tr><td>Longitude</td><td>Candera::Variant</td><td>Longitude of current users location.</td></tr><tr><td>Latitude</td><td>Candera::Variant</td><td>Latitude of current users location.</td></tr><tr><td>SimulateDriving</td><td>bool</td><td>Simulate driving along computed route when in navigation mode.</td></tr><tr><td>NaviMessageNode</td><td>AbstractNodePointer</td><td>Node to which navigation instructions will be sent.</td></tr><tr><td>LocationMesh</td><td>AbstractNodePointer</td><td>Node containing mesh(es) used to render the location indicator.</td></tr><tr><td>RouteOverlayColor</td><td>Candera::Color</td><td>Color used by the route overlay.</td></tr><tr><td>AvoidTolls</td><td>bool</td><td>Avoid tolls during route computation.</td></tr><tr><td>AvoidMotorways</td><td>bool</td><td>Avoid motorways during route computation.</td></tr><tr><td>AvoidFerry</td><td>bool</td><td>Avoid ferrys during route computation.</td></tr></tbody></table>

</div></div>##### **Map Bridge**

Builds a bridge to MapBehavior forwarding touch events.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-0"><div class="contents"><div class="textblock"><table class="doxtable"><tbody><tr><th>**Property Name**</th><th>**Type**</th><th>**Description**</th></tr><tr><td>TouchableId  
</td><td>String  
</td><td>Touchable Id of the behavior.</td></tr><tr><td>TargetNode</td><td>AbstractNodePointer</td><td>Node containing the target MapBehavior to which events will be forwarded.</td></tr></tbody></table>

</div></div></div>---

#### **Scroll Control Behaviors**

##### **List Behavior**

ListBehavior is a list supporting scrolling itemwise and pagewise combined with either relative or absolute scrolling.

**About implicit roles of ChildNodes**

The first child node is used as content (Group2D) and the second as scrollable (Scrollbar).

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-1"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 22.3641%;">**Property Name**</th><th style="width: 20.6343%;">**Type**</th><th style="width: 56.9605%;">**Description**</th></tr><tr><td style="width: 22.3641%;">TouchableId  
</td><td style="width: 20.6343%;">String  
</td><td style="width: 56.9605%;">Touchable Id of the behavior.</td></tr><tr><td style="width: 22.3641%;">ScrollDirection</td><td style="width: 20.6343%;">ScrollDirection::Enum</td><td style="width: 56.9605%;">The direction in which the ListBehavior scrolls.

*Possible values: Vertical, Horizontal*

</td></tr><tr><td style="width: 22.3641%;">Position</td><td style="width: 20.6343%;">FeatStd::Float</td><td style="width: 56.9605%;">The pixel position of the visible content within the list content.</td></tr><tr><td style="width: 22.3641%;">AnimationDuration</td><td style="width: 20.6343%;">FeatStd::UInt32</td><td style="width: 56.9605%;">Duration of the scrolling animation.</td></tr><tr><td style="width: 22.3641%;">DecelerationFactor</td><td style="width: 20.6343%;">FeatStd::Float</td><td style="width: 56.9605%;">Loss of flick animation speed over time.</td></tr><tr><td style="width: 22.3641%;">MaxSpeedPerFlick</td><td style="width: 20.6343%;">FeatStd::Float</td><td style="width: 56.9605%;">Maximum amount of speed each flick motion adds to the flick animation.</td></tr><tr><td style="width: 22.3641%;">MinSpeedPerFlick</td><td style="width: 20.6343%;">FeatStd::Float</td><td style="width: 56.9605%;">Minimum speed required to count a touch gesture as a flick and start or continue the flick animation.</td></tr><tr><td style="width: 22.3641%;">MinMovementToScrolling</td><td style="width: 20.6343%;">FeatStd::UInt32</td><td style="width: 56.9605%;">Minimum distance a touch gesture needs to move to start a scrolling animation.</td></tr><tr><td style="width: 22.3641%;">MaxTouchSampleAge</td><td style="width: 20.6343%;">FeatStd::UInt32</td><td style="width: 56.9605%;">Maximum age in milliseconds of touch movement speed counted towards generating flick animation speed.</td></tr><tr><td style="width: 22.3641%;">Items</td><td style="width: 20.6343%;">ListPropertyType&lt;DataContextItem::SharedPointer&gt;  
</td><td style="width: 56.9605%;">The items property is used for binding of dynamic items. It can only be set via databinding. Only one visible list control should be bound to a fragment list in the model. Otherwise the list fragments in the model are not able to provide data for both list controls. Use a separate list model that is filled with the same data if such a use case is required.</td></tr><tr><td style="width: 22.3641%;">ListFragmentTriggerOffset</td><td style="width: 20.6343%;">FeatStd::SizeType</td><td style="width: 56.9605%;">A dynamic list is requested in fragments to reduce memory consumption and overall performance overhead. This trigger offset value defines an area at the begin and end of the list fragment. Whenever the list shows a part of these areas a new fragment is requested from the model.</td></tr><tr><td style="width: 22.3641%;">ListFragmentSize</td><td style="width: 20.6343%;">FeatStd::SizeType</td><td style="width: 56.9605%;">A dynamic list is requested in fragments to reduce memory consumption and overall performance overhead. This buffer size defines how large this fragment should be. By default it is set to 0 which results in an automatic calculation. The automatic calculation assumes the number of item nodes is configured to match the maximum number of visible nodes for one page. By multiplying this number by three and adding the trigger offset one time for the begin and one additional time for the end to calculate for the automatic buffer size the list has a spare page on each side before a new fragment has to be requested</td></tr><tr><td style="width: 22.3641%;">HandleKeyboardEvents  
</td><td style="width: 20.6343%;">bool  
</td><td style="width: 56.9605%;">Makes the behavior handle KeyboardFocusNavigation events internally.</td></tr><tr><td style="width: 22.3641%;">WrapAround  
</td><td style="width: 20.6343%;">bool  
</td><td style="width: 56.9605%;">Set this flag to true for static list to wrap around the list items on the top and bottom of the list</td></tr></tbody></table>

</div></div></div>##### **Scrollbar**

Reflects the position of the scrollable behavior. E.g. ListBehavior2D.

**About implicit roles of ChildNodes**

A variable number of child nodes is used to control the following features.

\- background: a RenderNode2D used as background  
\- prevItem: a control to navigate to the previous item  
\- nextItem: a control to navigate to the next item  
\- prevPage: a control to navigate to the previous page  
\- nextPage: a control to navigate to the next page  
\- marker: a control used as a thumb

Depending on the number of provided child nodes, the nodes are interpreted as follows.

\- 1 child: marker  
\- 2 children: background, marker  
\- 3 children: prevPage, nextPage, marker  
\- 4 children: background, prevPage, nextPage, marker  
\- 5 children: prevItem, nextItem, prevPage, nextPage, marker  
\- 6 children: background, prevItem, nextItem, prevPage, nextPage, marker

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-2"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%; height: 305.156px;"><tbody><tr style="height: 46.7969px;"><th style="width: 22.2405%; height: 46.7969px;">**Property Name**</th><th style="width: 25.2059%; height: 46.7969px;">**Type**</th><th style="width: 52.5124%; height: 46.7969px;">**Description**</th></tr><tr><td style="width: 22.2405%;">TouchableId  
</td><td style="width: 25.2059%;">String  
</td><td style="width: 52.5124%;">Touchable Id of the behavior.</td></tr><tr style="height: 49.5938px;"><td style="width: 22.2405%; height: 49.5938px;">TouchListenerNode</td><td style="width: 25.2059%; height: 49.5938px;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 52.5124%; height: 49.5938px;">This node defines the area on which the ScrollbarBehavior will listen for the touch events.</td></tr><tr style="height: 52.1875px;"><td style="width: 22.2405%; height: 52.1875px;">ScrollDirection</td><td style="width: 25.2059%; height: 52.1875px;">[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt; ScrollDirection::Enum &gt;</td><td style="width: 52.5124%; height: 52.1875px;">The direction in which the ListBehavior scrolls. By default it is configured as a vertical scrollbar.</td></tr><tr style="height: 63.3906px;"><td style="width: 22.2405%; height: 63.3906px;">ScrollbarVisibility</td><td style="width: 25.2059%; height: 63.3906px;">ScrollbarVisibility::Enum</td><td style="width: 52.5124%; height: 63.3906px;">Configure the visibility of the scrollbar. By default it is set to Automatic which will determine the visibility based on the actual content.

*Possible values: Automatic, Collapsed, Visible*

</td></tr><tr style="height: 46.5938px;"><td style="width: 22.2405%; height: 46.5938px;">HandleMinimumSize</td><td style="width: 25.2059%; height: 46.5938px;">FeatStd::UInt32</td><td style="width: 52.5124%; height: 46.5938px;">The minimum height (for vertical scrollbar) or minimum width (for horizontal scrollbar) of the handle in pixels.</td></tr><tr style="height: 46.5938px;"><td style="width: 22.2405%; height: 46.5938px;">MinMovementToScrolling</td><td style="width: 25.2059%; height: 46.5938px;">FeatStd::UInt32</td><td style="width: 52.5124%; height: 46.5938px;">Minimum distance a touch gesture needs to move to start scrolling.</td></tr><tr><td style="width: 22.2405%;">ScrollableNode  
</td><td style="width: 25.2059%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 52.5124%;">Node of the scrollable behavior.</td></tr></tbody></table>

</div></div></div>##### **Scroll View**

Scroll View is a Touchable Control that has a ContentAnchor which can be filled with various content. Depending on the size of the content and the configured Scroll View's Layout Size, a horizontal and/or vertical scrollbar appears.

Because of the fact that Scroll View supports horizontal and vertical scrolling, it receives the ScrollableEvent from Send Scrollable Event Behavior (can also be forwarded from a <span style="color: rgb(230, 126, 35);">[Scrollbar Behavior](https://doc316en.candera.eu/link/598#bkmrk-scrollbar-behavior)</span> Scrollbar via <span style="color: rgb(230, 126, 35);">[Event Bridge Behavior](https://doc316en.candera.eu/link/598#bkmrk-event-bridge)</span>).

Example Usage

<div class="contents" id="bkmrk-scroll-view-example"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Scroll View Example](https://doc316en.candera.eu/link/572#bkmrk-scroll-view-example)</span>

</div></div></div>**Common Properties**

This behavior does not have any configurable properties.

**About implicit roles of ChildNodes**

The first child node is used as content (Group2D), the second as vertical scrollbar (Scrollbar) and the third as horizontal scrollbar (Scrollbar).

##### **Snap List Item Configuration**

Allows the user to define the snap position of a list or list item by setting its item alignment (for example, Center) and offset. This is then applied when navigating or scrolling to align the list item. Can be used with the [<span style="color: rgb(230, 126, 35);">List Control</span>](https://doc316en.candera.eu/books/controls-and-behaviors/page/touchable#bkmrk-list).

**Common Properties**

<table border="1" class="doxtable" id="bkmrk-property-name-type-d-4" style="border-collapse: collapse; width: 800px;"><tbody><tr><th style="width: 167.375px;">**Property Name**</th><th style="width: 133.75px;">**Type**</th><th style="width: 497.875px;">**Description**</th></tr><tr><td style="width: 167.375px;">ItemAlignment</td><td style="width: 133.75px;">SnapAlignmentOrientation::Enum</td><td style="width: 497.875px;">The location of the alignment base point within the list item.

*Possible values: Begin, Center, End*

</td></tr><tr><td style="width: 167.375px;">ItemAlignmentOffset</td><td style="width: 133.75px;">FeatStd::Float</td><td style="width: 497.875px;">The offset of the alignment point from the configured alignment base point. For End alignment a positive offset will move the alignment point from the list item end towards the list item begin.

</td></tr><tr><td style="width: 167.375px;">ItemAlignmentOffsetInPercent</td><td style="width: 133.75px;">bool</td><td style="width: 497.875px;">The offset is either in percent (when set to true) or in pixel (when set to false). In case of percent the item size will be taken to calculate the pixel offset.

</td></tr></tbody></table>

##### **Snap List Item Extension**

SnapListItemExtensionBehavior registers a ListBehaviorExtension on the given ListBehavior for snapping the focused item to the configured list according to the snapping configuration of the list and the list item node.

Information on how to use this behavior can be found in the chapter of the [List Control](https://doc316en.candera.eu/books/controls-and-behaviors/page/touchable#bkmrk-list).

**Common Properties**

<table border="1" class="doxtable" id="bkmrk-property-name-type-d-3" style="border-collapse: collapse; width: 800px;"><tbody><tr><th style="width: 152.433px;">**Property Name**</th><th style="width: 154.8px;">**Type**</th><th style="width: 492.1px;">**Description**</th></tr><tr><td style="width: 152.433px;">ListBehavior</td><td style="width: 154.8px;">ListBehavior\*</td><td style="width: 492.1px;">The ListBehavior that shall be extended.

*This property can be set in the right side of the Scene Tree Panel.*

</td></tr><tr><td style="width: 152.433px;">ListAlignment</td><td style="width: 154.8px;">SnapAlignmentOrientation::Enum</td><td style="width: 492.1px;">The location of the alignment base point within the list item.

*Possible values: Begin, Center, End*

</td></tr><tr><td style="width: 152.433px;">ListAlignmentOffset</td><td style="width: 154.8px;">FeatStd::Float</td><td style="width: 492.1px;">The offset of the alignment point from the configured alignment base point. For End alignment a positive offset will move the alignment point from the list item end towards the list item begin.</td></tr><tr><td style="width: 152.433px;">ListAlignmentOffsetInPercent</td><td style="width: 154.8px;">bool</td><td style="width: 492.1px;">The offset is either in percent (when set to true) or in pixel (when set to false). In case of percent the item size will be taken to calculate the pixel offset.</td></tr><tr><td style="width: 152.433px;">ItemAlignment</td><td style="width: 154.8px;">SnapAlignmentOrientation::Enum</td><td style="width: 492.1px;">The location of the alignment base point within the list item. *Possible values: Begin, Center, End*

</td></tr><tr><td style="width: 152.433px;">ItemAlignmentOffset</td><td style="width: 154.8px;">FeatStd::Float</td><td style="width: 492.1px;">The offset of the alignment point from the configured alignment base point. For End alignment a positive offset will move the alignment point from the list item end towards the list item begin.</td></tr><tr><td style="width: 152.433px;">ItemAlignmentOffsetInPercent</td><td style="width: 154.8px;">bool</td><td style="width: 492.1px;">The offset is either in percent (when set to true) or in pixel (when set to false). In case of percent the item size will be taken to calculate the pixel offset.</td></tr></tbody></table>

##### **SubList Behavior**

SubListBehavior extends the ListBehavior by special handling when being used in a child node of a ListBehavior.

SubListBehavior is a list supporting scrolling itemwise and pagewise combined with either relative or absolute scrolling.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-5"><div class="textblock"><table class="doxtable" style="width: 100%; height: 714.934px;"><tbody><tr style="height: 29.4667px;"><th style="width: 22.3641%; height: 29.4667px;">**Property Name**</th><th style="width: 19.2751%; height: 29.4667px;">**Type**</th><th style="width: 58.3196%; height: 29.4667px;">**Description**</th></tr><tr style="height: 29.4667px;"><td style="width: 22.3641%; height: 29.4667px;">TouchableId  
</td><td style="width: 19.2751%; height: 29.4667px;">String  
</td><td style="width: 58.3196%; height: 29.4667px;">Touchable Id of the behavior.</td></tr><tr style="height: 29.4667px;"><td style="width: 22.3641%; height: 29.4667px;">ScrollDirection</td><td style="width: 19.2751%; height: 29.4667px;">ScrollDirection::Enum</td><td style="width: 58.3196%; height: 29.4667px;">The direction in which the SubListBehavior scrolls.

*Possible values: Vertical, Horizontal*

</td></tr><tr style="height: 29.4667px;"><td style="width: 22.3641%; height: 29.4667px;">Position</td><td style="width: 19.2751%; height: 29.4667px;">FeatStd::Float</td><td style="width: 58.3196%; height: 29.4667px;">The pixel position of the visible content within the list content.</td></tr><tr style="height: 29.4667px;"><td style="width: 22.3641%; height: 29.4667px;">AnimationDuration</td><td style="width: 19.2751%; height: 29.4667px;">FeatStd::UInt32</td><td style="width: 58.3196%; height: 29.4667px;">Duration of the scrolling animation.</td></tr><tr style="height: 29.4667px;"><td style="width: 22.3641%; height: 29.4667px;">DecelerationFactor</td><td style="width: 19.2751%; height: 29.4667px;">FeatStd::Float</td><td style="width: 58.3196%; height: 29.4667px;">Loss of flick animation speed over time.</td></tr><tr style="height: 29.4667px;"><td style="width: 22.3641%; height: 29.4667px;">MaxSpeedPerFlick</td><td style="width: 19.2751%; height: 29.4667px;">FeatStd::Float</td><td style="width: 58.3196%; height: 29.4667px;">Maximum amount of speed each flick motion adds to the flick animation.</td></tr><tr style="height: 46.2667px;"><td style="width: 22.3641%; height: 46.2667px;">MinSpeedPerFlick</td><td style="width: 19.2751%; height: 46.2667px;">FeatStd::Float</td><td style="width: 58.3196%; height: 46.2667px;">Minimum speed required to count a touch gesture as a flick and start or continue the flick animation.</td></tr><tr style="height: 46.2667px;"><td style="width: 22.3641%; height: 46.2667px;">MinMovementToScrolling</td><td style="width: 19.2751%; height: 46.2667px;">FeatStd::UInt32</td><td style="width: 58.3196%; height: 46.2667px;">Minimum distance a touch gesture needs to move to start a scrolling animation.</td></tr><tr style="height: 46.2667px;"><td style="width: 22.3641%; height: 46.2667px;">MaxTouchSampleAge</td><td style="width: 19.2751%; height: 46.2667px;">FeatStd::UInt32</td><td style="width: 58.3196%; height: 46.2667px;">Maximum age in milliseconds of touch movement speed counted towards generating flick animation speed.</td></tr><tr style="height: 96.6667px;"><td style="width: 22.3641%; height: 96.6667px;">Items</td><td style="width: 19.2751%; height: 96.6667px;">ListPropertyType&lt; ::Courier::DataContextItem::SharedPointer &gt;</td><td style="width: 58.3196%; height: 96.6667px;">The items property is used for binding of dynamic items. It can only be set via databinding. Only one visible list control should be bound to a fragment list in the model. Otherwise the list fragments in the model are not able to provide data for both list controls. Use a separate list model that is filled with the same data if such a use case is required.</td></tr><tr style="height: 79.8667px;"><td style="width: 22.3641%; height: 79.8667px;">ListFragmentTriggerOffset</td><td style="width: 19.2751%; height: 79.8667px;">FeatStd::SizeType</td><td style="width: 58.3196%; height: 79.8667px;">A dynamic list is requested in fragments to reduce memory consumption and overall performance overhead. This trigger offset value defines an area at the begin and end of the list fragment. Whenever the list shows a part of these areas a new fragment is requested from the model.</td></tr><tr style="height: 163.867px;"><td style="width: 22.3641%; height: 163.867px;">ListFragmentSize</td><td style="width: 19.2751%; height: 163.867px;">FeatStd::SizeType</td><td style="width: 58.3196%; height: 163.867px;">A dynamic list is requested in fragments to reduce memory consumption and overall performance overhead. This buffer size defines how large this fragment should be. By default it is set to 0 which results in an automatic calculation. The automatic calculation assumes the number of item nodes is configured to match the maximum number of visible nodes for one page. By multiplying this number by three and adding the trigger offset one time for the begin and one additional time for the end to calculate for the automatic buffer size the list has a spare page on each side before a new fragment has to be requested</td></tr><tr style="height: 29.4667px;"><td style="width: 22.3641%; height: 29.4667px;">HandleKeyboardEvents  
</td><td style="width: 19.2751%; height: 29.4667px;">bool  
</td><td style="width: 58.3196%; height: 29.4667px;">Makes the behavior handle KeyboardFocusNavigation events internally.</td></tr><tr><td style="width: 22.3641%;">ParentListNode  
</td><td style="width: 19.2751%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 58.3196%;">The node with a ListBehavior that acts as a parent to this SubListBehavior.</td></tr></tbody></table>

</div></div>---


##### **Circular Slider Behavior**

This behavior provides the functionality of CircularSlider control by creating a radial mask and setting a rotation of knob node. This behavior is available for 2D scenes only.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-6"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 15.3195%;">**Property Name**</th><th style="width: 20.5124%;">**Type**</th><th style="width: 64.1269%;">**Description**</th></tr><tr><td style="width: 15.3195%;">Receivers  
</td><td style="width: 20.5124%;">Candera::ProcessValueBehaviorArrayProperty</td><td style="width: 64.1269%;">The process value behaviors that will receive the value as next in the value processing chain.

*This property can be set in the right side of the Scene Tree Panel.*

</td></tr><tr><td style="width: 15.3195%;">Value</td><td style="width: 20.5124%;">[FeatStd::Variant](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_variant.html)</td><td style="width: 64.1269%;">Value of the slider</td></tr><tr><td style="width: 15.3195%;">MinimumValue</td><td style="width: 20.5124%;">[FeatStd::Variant](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_variant.html)</td><td style="width: 64.1269%;">Minimum value of the slider</td></tr><tr><td style="width: 15.3195%;">MaximumValue</td><td style="width: 20.5124%;">[FeatStd::Variant](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_variant.html)</td><td style="width: 64.1269%;">Maximum value of the slider</td></tr><tr><td style="width: 15.3195%;">StepSize</td><td style="width: 20.5124%;">[FeatStd::Variant](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_variant.html)</td><td style="width: 64.1269%;">Step size for Value</td></tr><tr><td style="width: 15.3195%;">MinimumAngle</td><td style="width: 20.5124%;">FeatStd::Float</td><td style="width: 64.1269%;">Angle of the slider, corresponding to minimum value.</td></tr><tr><td style="width: 15.3195%;">MaximumAngle</td><td style="width: 20.5124%;">FeatStd::Float</td><td style="width: 64.1269%;">Angle of the slider, corresponding to maximum value.</td></tr><tr><td style="width: 15.3195%;">ThumbNode</td><td style="width: 20.5124%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 64.1269%;">Thumb node which will be rotated.</td></tr><tr><td style="width: 15.3195%;">ImageNode</td><td style="width: 20.5124%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 64.1269%;">Image node which will be masked.</td></tr></tbody></table>

</div></div>##### **Drawer Behavior** 

The Drawer is a Layouting Behavior that can hide or show its content via Events or Touch Inputs. This will only work if the Node has a Group called 'Content' as Child. To support Touch Inputs there needs to be a Node called 'Knob' as Child.

Drawer Behavior to switch node on/off.

This behavior is available for 2D scenes only.

**About implicit roles of ChildNodes**

The first child node is used as content (Group2D) and the second as knob (RenderNode2D).  
The knob node must be named "Knob" for proper dragging support (Touch).

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-7"><div class="contents"><div class="textblock"><table class="doxtable"><tbody><tr><th>**Property Name**</th><th>**Type**</th><th>**Description**</th></tr><tr><td style="width: 15.3195%;">Receivers  
</td><td style="width: 20.5124%;">Candera::ProcessValueBehaviorArrayProperty</td><td style="width: 64.1269%;">The process value behaviors that will receive the value as next in the value processing chain.

*This property can be set in the right side of the Scene Tree Panel.*

</td></tr><tr><td>Open</td><td>bool</td><td>Shows the Drawer in its opened appearance.</td></tr><tr><td>AppearDirection</td><td>AppearDirection::Enum</td><td>The direction from which the Drawer will open.

*Possible values: Top, Left, Right, Bottom*

</td></tr><tr><td>DragEnabled</td><td>bool</td><td>Set to true to allow the Drawer to be controlled by Touch Inputs.</td></tr></tbody></table>

</div></div></div>##### **Linear Slider Behavior**

This behavior provides the functionality of a linear Slider control. It must be used as a receiver in a process value chain and expects a normalized value in the range of 0.0 to 1.0.

This behavior is available for 2D scenes only.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-8"><div class="contents"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%; height: 230.619px;"><tbody><tr style="height: 29.7017px;"><th style="width: 17.6381%; height: 29.7017px;">**Property Name**</th><th style="width: 26.6929%; height: 29.7017px;">**Type**</th><th style="width: 55.6582%; height: 29.7017px;">**Description**</th></tr><tr style="height: 63.3097px;"><td style="width: 17.6381%; height: 63.3097px;">Receivers  
</td><td style="width: 26.6929%; height: 63.3097px;">Candera::ProcessValueBehaviorArrayProperty</td><td style="width: 55.6582%; height: 63.3097px;">The process value behaviors that will receive the value as next in the value processing chain.

*This property can be set in the right side of the Scene Tree Panel.*

</td></tr><tr style="height: 35.2983px;"><td style="width: 17.6381%; height: 35.2983px;">KnobNode  
</td><td style="width: 26.6929%; height: 35.2983px;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 55.6582%; height: 35.2983px;">Knob node which will be shifted.</td></tr><tr style="height: 35.2983px;"><td style="width: 17.6381%; height: 35.2983px;">SliderBarNode</td><td style="width: 26.6929%; height: 35.2983px;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 55.6582%; height: 35.2983px;">Image node which will be scaled according to value.</td></tr><tr style="height: 46.5057px;"><td style="width: 17.6381%; height: 46.5057px;">BackgroundNode</td><td style="width: 26.6929%; height: 46.5057px;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 55.6582%; height: 46.5057px;">Image node which will provide background image and also control slider total size.</td></tr><tr style="height: 20.5057px;"><td style="width: 17.6381%; height: 20.5057px;">UseBitmapClipping</td><td style="width: 26.6929%; height: 20.5057px;">bool</td><td style="width: 55.6582%; height: 20.5057px;">If true, the slider bar image will be resized using bitmap clipping instead of the layouter.</td></tr></tbody></table>

</div></div></div></div>---

#### **Internal Control Behaviors**

##### **Caret**

Behavior which receives the CaretPositionChanged Event from the EditTextBehavior. It forwards the value to other behaviors (e.g. SetSize) and switches the blinking state.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-9"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 19.6458%;">**Property Name**</th><th style="width: 25.7002%;">**Type**</th><th style="width: 54.6128%;">**Description**</th></tr><tr><td style="width: 19.6458%;">Receivers  
</td><td style="width: 25.7002%;">Candera::ProcessValueBehaviorArrayProperty</td><td style="width: 54.6128%;">The process value behaviors that will receive the value as next in the value processing chain.

*This property can be set in the right side of the Scene Tree Panel.*

</td></tr><tr><td style="width: 19.6458%;">CaretNode</td><td style="width: 25.7002%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 54.6128%;">Node which will be set as caret..</td></tr><tr><td style="width: 19.6458%;">IntervalSwitchBehavior</td><td style="width: 25.7002%;">[Candera::Behavior](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_behavior.html "Behaviors are small re-usable functional blocks that communicate via events. Behaviors are based on W...")\*</td><td style="width: 54.6128%;">The Caret Behavior will change the state of the given IntervalSwitch Behavior.

*This property can be set in the right side of the Scene Tree Panel.*

</td></tr></tbody></table>

</div></div>##### **Handle Control State**

Manages how a control responds to user actions like clicks, touches, or hover. Sends state events when the control is pressed, selected, or highlighted. State conditions behaviors react to these events to update the control accordingly.

**Example Usage**

<div class="contents" id="bkmrk-hover---hover-leave-"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Hover - Hover Leave Example](https://doc316en.candera.eu/link/572#bkmrk-hover---hover-leave-)</span>
- <span style="color: rgb(230, 126, 35);">[Move Node Example](https://doc316en.candera.eu/link/572#bkmrk-move-node-example)</span>
- <span style="color: rgb(230, 126, 35);">[OnClick Example](https://doc316en.candera.eu/link/572#bkmrk-onclick-example)</span>
- <span style="color: rgb(230, 126, 35);">[Set Alpha Value Example](https://doc316en.candera.eu/link/572#bkmrk-set-alpha-value-exam)</span>
- <span style="color: rgb(230, 126, 35);">[Set Position Example](https://doc316en.candera.eu/link/572#bkmrk-set-position-example)</span>
- <span style="color: rgb(230, 126, 35);">[Set Rotation Example](https://doc316en.candera.eu/link/572#bkmrk-set-rotation-example)</span>
- <span style="color: rgb(230, 126, 35);">[Start Timer Example](https://doc316en.candera.eu/link/572#bkmrk-start-timer-example)</span>
- <span style="color: rgb(230, 126, 35);">[Switch Image Example](https://doc316en.candera.eu/link/572#bkmrk-switch-image-example)</span>
- <span style="color: rgb(230, 126, 35);">[Perform Transition Requests Example](https://doc316en.candera.eu/link/572#bkmrk-perform-transition-r)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-10"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 14.827%;">**Property Name**</th><th style="width: 26.0699%;">**Type**</th><th style="width: 59.0619%;">**Description**</th></tr><tr><td style="width: 14.827%; height: 29.4667px;">TouchableId  
</td><td style="width: 26.0699%; height: 29.4667px;">String  
</td><td style="width: 59.0619%; height: 29.4667px;">Touchable Id of the behavior.</td></tr><tr><td style="width: 14.827%;">Enabled</td><td style="width: 26.0699%;">bool</td><td style="width: 59.0619%;">If set to false it will not react on focus events and does not have to support different visualizations for the different states.</td></tr><tr><td style="width: 14.827%;">Highlighted</td><td style="width: 26.0699%;">bool</td><td style="width: 59.0619%;">If true, the controls state Highlighted is set to true.</td></tr><tr><td style="width: 14.827%;">Selected  
</td><td style="width: 26.0699%;">bool  
</td><td style="width: 59.0619%;">If true, the controls state Selected is set to true.</td></tr><tr><td style="width: 14.827%;">Focusable</td><td style="width: 26.0699%;">bool</td><td style="width: 59.0619%;">If true, the control is focusable. Otherwise the control can not be focused.</td></tr><tr><td style="width: 14.827%;">Identifier</td><td style="width: 26.0699%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 59.0619%;">Identifier which is used when emitting an Event (e.g. Click Event).</td></tr></tbody></table>

</div></div>##### **DataContext**

This behavior provides a local data context on the associated node that can act as a set of binding sources (if a binding source is set at that data context). It is internally used by other behaviors like the list behavior to set individual binding sources for items.

**Common Properties**

This behavior does not have any configurable properties.

##### **Edit Text**

Control Behavior to make a TextNode editable. Receives KeyEvents and emits CaretPositionChanged Events. These can be received by the CaretBehavior to set the position of the caret node.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-11"><div class="textblock"><table class="doxtable"><tbody><tr><th>**Property Name**</th><th>**Type**</th><th>**Description**</th></tr><tr><td style="width: 15.3195%;">Receivers  
</td><td style="width: 20.5124%;">Candera::ProcessValueBehaviorArrayProperty</td><td style="width: 64.1269%;">The process value behaviors that will receive the value as next in the value processing chain.

*This property can be set in the right side of the Scene Tree Panel.*

</td></tr><tr><td>InputText</td><td>[FeatStd::String](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_string.html)</td><td>Text which will be set as default text.</td></tr><tr><td>TextNode</td><td>[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td>Text Node which will be edited.</td></tr><tr><td>Placeholder</td><td>[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td>Text which will be shown as placeholder.</td></tr><tr><td>SetValueOnEachChange</td><td>bool</td><td>If true, the value will be set on each input.</td></tr><tr><td>MaxTextLength</td><td>FeatStd::UInt16</td><td>Maximum count of characters.</td></tr><tr><td>JustDigits</td><td>bool</td><td>If true, the Inputfield will receive just digits.</td></tr></tbody></table>

</div></div>##### **Selection Group**

Provides an ArrayProperty for Selection Objects. If one of them gets selected the others get deselected (Objects need a ChangeSelectionActionBehavior). Needs to be attached to a value Behavior.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-12"><div class="textblock"><table class="doxtable"><tbody><tr><th>**Property Name**</th><th>**Type**</th><th>**Description**</th></tr><tr><td>DefaultSelectedObject</td><td>[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td>Selection Object (e.g. RadioButton) which shall be selected by default.</td></tr></tbody></table>

</div></div>---

#### **Public Property Control Behaviors**

##### **Provide Alignment**

Provides properties to set the horizontal and vertical alignment. Especially for Controls.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-13"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 18.4178%;">**Property Name**</th><th style="width: 25.2146%;">**Type**</th><th style="width: 56.3676%;">**Description**</th></tr><tr><td style="width: 18.4178%;">HorizontalAlignment</td><td style="width: 25.2146%;">Candera::HorizontalAlignment</td><td style="width: 56.3676%;">Provides property to set the Horizontal Alignment (especially for Controls).

*Possible values: HLeft, HCenter, HRight, Hstretch, HstrechRight, HstrechCenter*

</td></tr><tr><td style="width: 18.4178%;">VerticalAlignment</td><td style="width: 25.2146%;">Candera::VerticalAlignment</td><td style="width: 56.3676%;">Provides property to set the Vertical Alignment (especially for Controls).

*Possible values: VTop, VCenter, VBottom, Vstretch, VstrechCenter, VstrechBottom*

</td></tr></tbody></table>

</div></div>##### **Copy Size**

Copies the layout size to a target node. Especially for Controls to transfer the size from the control node to an inner node.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-14"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 14.578%;">**Property Name**</th><th style="width: 23.478%;">**Type**</th><th style="width: 61.9028%;">**Description**</th></tr><tr><td style="width: 14.578%;">TargetNode</td><td style="width: 23.478%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 61.9028%;">The target node to which the events are routed from the source node. If the property is not set, the event will be routed to the node of the behavior</td></tr></tbody></table>

</div></div>##### **Provide Color**

Sets the color of a 2D node with a Color effect (e.g. BitmapBrushColorBlend, SolidColorBrush, MVGRender) or the diffuse color of a material in 3D.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-15"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 17.3053%;">**Property Name**</th><th style="width: 35.0971%;">**Type**</th><th style="width: 47.5976%;">**Description**</th></tr><tr><td style="width: 17.3053%;">PropertyReference</td><td style="width: 35.0971%;">CgiStudioControl::PropertyReference::Enum</td><td style="width: 47.5976%;">Choose how the property gets set. Via own property or from another Behavior.

*Possible values: Self, Other*

</td></tr><tr><td style="width: 17.3053%;">Color</td><td style="width: 35.0971%;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td style="width: 47.5976%;">The color to set.

*This property is only available if the PropertyReference is set to "Self".*

</td></tr></tbody></table>

</div></div></div>**Advanced Properties**

<div class="contents" id="bkmrk-property-name-type-d-16"><div class="textblock"><table class="doxtable" style="width: 102.469%;"><tbody><tr><th style="width: 21.1285%;">**Property Name**</th><th style="width: 26.083%;">**Type**</th><th style="width: 52.7473%;">**Description**</th></tr><tr><td style="width: 21.1285%;">PropertyProvider</td><td style="width: 26.083%;">Behavior\*</td><td style="width: 52.7473%;">Property Behavior which contains the color which has to be set on the effect.

*This property can be set in the right side of the Scene Tree Panel.*

*This property is only available if PropertyReference is set to "Other".*

</td></tr></tbody></table>

</div></div>##### **Provide Margin**

Provides property to set the margin. Especially for Controls.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-17"><div class="textblock"><table class="doxtable" style="width: 99.2593%;"><tbody><tr><th style="width: 20.4149%;">**Property Name**</th><th style="width: 27.2688%;">**Type**</th><th style="width: 52.2747%;">**Description**</th></tr><tr><td style="width: 20.4149%;">Margin</td><td style="width: 27.2688%;">[Candera::Margin](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_margin.html "A non-zero margin applies space outside the element layout's width and height. The values can be set ...")</td><td style="width: 52.2747%;">Provides property to set the Margin (especially for Controls).</td></tr></tbody></table>

</div></div>##### **Property Provider**

Offers to set a property of a selectable type. This property can then be used for other Behaviors (e.g. an image for Set Image or Provide Image).

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-18"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 17.1732%;">**Property Name**</th><th style="width: 33.2387%;">**Type**</th><th style="width: 49.547%;">**Description**</th></tr><tr><td style="width: 17.1732%;">PropertyDataType</td><td style="width: 33.2387%;">CgiStudioControl::PropertyDataTypes::Enum</td><td style="width: 49.547%;">Choose the type which should be offered by this behavior.

*Possible values: Color, Text, Style, Image, Appearance, Value, BlendType, Layout, VertexBuffer*

</td></tr></tbody></table>

</div></div></div>**Advanced Properties**

<div class="contents" id="bkmrk-property-name-type-d-19"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 14.5799%;">**Property Name**</th><th style="width: 35.832%;">**Type**</th><th style="width: 49.547%;">**Description**</th></tr><tr><td style="width: 14.5799%;">Color</td><td style="width: 35.832%;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td style="width: 49.547%;">The color which can be used from other Behaviors.

*This property is only available if PropertyDataType is set to "Color".*

</td></tr><tr><td style="width: 14.5799%;">Text</td><td style="width: 35.832%;">[FeatStd::String](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_string.html)</td><td style="width: 49.547%;">The Text that will be set to the Text Node.

*This property is only available if PropertyDataType is set to "Text*".

</td></tr><tr><td style="width: 14.5799%;">Style  
</td><td style="width: 35.832%;">SharedPointer&lt;Candera::TextRendering::SharedStyle&gt;</td><td style="width: 49.547%;">The Style that will be set to the Text Node.

*This property is only available if PropertyDataType is set to "Style*".

</td></tr><tr><td style="width: 14.5799%;">Image</td><td style="width: 35.832%;">SharedPointer&lt;[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")&gt;</td><td style="width: 49.547%;">The image to set on the effect.

*This property is only available for 2D scenes if PropertyDataType is set to "Image*".

</td></tr><tr><td style="width: 14.5799%;">Texture</td><td style="width: 35.832%;">SharedPointer&lt;[Candera::TextureImage](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_texture_image.html "Abstract base class for Texture images.A texture image mainly encapsulates a texture handle in VRAM a...")&gt;</td><td style="width: 49.547%;">The texture to set on the effect.

*This property is only available for 3D scenes if PropertyDataType is set to "Image*".

</td></tr><tr><td style="width: 14.5799%;">Appearance</td><td style="width: 35.832%;">SharedPointer&lt;[Candera::Appearance](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_appearance.html "The class Appearance groups following render attributes: Material, Textures, RenderMode, and Shader. Render attributes define the distinctive visualization of a geometry like Mesh, Billboard, and PointSprite. Further, render attributes can be shared across multiple objects, which conserves memory and enables sharing of appearance characteristics. An Appearance object is mandatory for any object in order to get rendered. Per default all render attributes are initialized to null, which is a valid setting. If the Appearance is activated, all render attributes that are set become activated. If no RenderMode is defined (null), then the default RenderMode is used instead;.")&gt;</td><td style="width: 49.547%;">The appearance to set on the node.

*This property is only available for 3D scenes if PropertyDataType is set to "Appearance".*

</td></tr><tr><td style="width: 14.5799%;">Value</td><td style="width: 35.832%;">[FeatStd::Variant](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_variant.html)</td><td style="width: 49.547%;">The value that will be set to the Send Value as Event action.

*This property is only available if PropertyDataType is set to "Value*".

</td></tr><tr><td style="width: 14.5799%;">BlendType  
</td><td style="width: 35.832%;">BlendType::Enum  
</td><td style="width: 49.547%;">The blend type that will be set.

*Possible values: Default, DefaultPremultiplied, DefaultTransparentLayer, Add, Multiply, Screen, Darken, Lighten, SourceAtop, SourceIn, SourceOut, SourceOver, DestinationIn, DestinationOut, DestinationOver, Off.*

*This property is only available if PropertyDataType is set to "BlendType*".

</td></tr><tr><td style="width: 14.5799%;">Layout</td><td style="width: 35.832%;">CgiStudioControl::LayoutType::Enum</td><td style="width: 49.547%;">The layouter type for node. See [Set Layout](#bkmrk-set-layout) for more information.

*Possible values: Horizontal, Vertical*

*This property is only available for 2D scenes if PropertyDataType is set to "Layout".*

</td></tr><tr><td style="width: 14.5799%;">StackArrangement  
</td><td style="width: 35.832%;">StackLayouter::Arrangement</td><td style="width: 49.547%;">Selects arrangement for stack layouter.

*This property is only available for 2D scenes if PropertyDataType is set to "Layout" and the property Layout is set to "Stack".*

</td></tr><tr><td style="width: 14.5799%;">VertexBuffer</td><td style="width: 35.832%;">SharedPointer&lt;[Candera::VertexBuffer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_vertex_buffer.html)&gt;</td><td style="width: 49.547%;">*You can set the VertexBuffer held by the mesh created when importing FBX. This property is only available for 3D scenes if PropertyDataType is set to "VertexBuffer*".

</td></tr></tbody></table>

</div></div>##### **Render Node**

Sets rendering of a node to enabled or disabled and provides the setting as a property for Controls.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-20"><div class="textblock"><table class="doxtable" style="width: 117.161%; height: 89.1051px;"><tbody><tr style="height: 29.7017px;"><th style="width: 20.3981%; height: 29.7017px;">**Property Name**</th><th style="width: 31.7435%; height: 29.7017px;">**Type**</th><th style="width: 47.8171%; height: 29.7017px;">**Description**</th></tr><tr style="height: 29.7017px;"><td style="width: 20.3981%; height: 29.7017px;">EnableRendering</td><td style="width: 31.7435%; height: 29.7017px;">bool</td><td style="width: 47.8171%; height: 29.7017px;">If true, rendering is enabled.</td></tr><tr style="height: 29.7017px;"><td style="width: 20.3981%; height: 29.7017px;">PostponeChange</td><td style="width: 31.7435%; height: 29.7017px;">bool</td><td style="width: 47.8171%; height: 29.7017px;">If set to true the render change will be handled during the next Update cyle, if false it will be handled immediately.</td></tr></tbody></table>

</div></div>##### **Provide Appearance**

Sets the Appearance of a Render Node and provides the Appearance as a property for Controls.

This behavior is available for 3D scenes only.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-21"><div class="textblock"><table class="doxtable" style="width: 117.161%;"><tbody><tr><th style="width: 20.3872%;">**Property Name**</th><th style="width: 31.7545%;">**Type**</th><th style="width: 47.8171%;">**Description**</th></tr><tr><td style="width: 20.3872%;">PropertyReference</td><td style="width: 31.7545%;">CgiStudioControl::PropertyReference::Enum</td><td style="width: 47.8171%;">Choose how the property gets set. Via own property or from another Behavior.

*Possible values: Self, Other*

</td></tr><tr><td style="width: 20.3872%;">Appearance  
</td><td style="width: 31.7545%;">  
</td><td style="width: 47.8171%;">*This property is only available if "PropertyReference" is set to "Self".*</td></tr><tr><td style="width: 20.3872%;">PropertyProvider</td><td style="width: 31.7545%;">Behavior\*</td><td style="width: 47.8171%;">Property Behavior which contains the color which has to be set on the effect.

*This property is only available if "PropertyReference" is set to "Other".*

*This property can be set in the right side of the Scene Tree Panel.*

</td></tr></tbody></table>

</div></div>##### **Provide Image**

Sets the image of a node and provides the Image as a property for Controls.

**Example Usage**

<div class="contents" id="bkmrk-set-image-example"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Set Image Example](https://doc316en.candera.eu/link/572#bkmrk-set-image-example)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-22"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 16.4333%;">**Property Name**</th><th style="width: 37.9325%;">**Type**</th><th style="width: 45.5931%;">**Description**</th></tr><tr><td style="width: 16.4333%;">PropertyReference</td><td style="width: 37.9325%;">CgiStudioControl::PropertyReference::Enum</td><td style="width: 45.5931%;">Choose how the property gets set. Via own property or from another Behavior.

*Possible values: Self, Other*

</td></tr></tbody></table>

</div></div></div>**<span style="color: rgb(0, 0, 0);">Advanced Properties</span>**

<table class="doxtable" id="bkmrk-property-name-type-d-23" style="width: 100%;"><tbody><tr><th style="width: 16.4333%;">**Property Name**</th><th style="width: 37.9325%;">**Type**</th><th style="width: 45.5931%;">**Description**</th></tr><tr><td style="width: 16.4333%;">PropertyProvider</td><td style="width: 37.9325%;">Behavior\*</td><td style="width: 45.5931%;">Property Behavior which contains the color which has to be set on the effect.

*This property is only available if "PropertyReference" is set to "Other".*

*This property can be set in the right side of the Scene Tree Panel.*

</td></tr><tr><td style="width: 16.4333%;">Image</td><td style="width: 37.9325%;">SharedPointer&lt;[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")&gt;</td><td style="width: 45.5931%;">The image to set on the effect.

*This property is only available for 2D scenes if "PropertyReference" is set to "Self".*

</td></tr><tr><td style="width: 16.4333%;">Texture</td><td style="width: 37.9325%;">SharedPointer&lt;[Candera::TextureImage](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_texture_image.html "Abstract base class for Texture images.A texture image mainly encapsulates a texture handle in VRAM a...")&gt;</td><td style="width: 45.5931%;">The image to set on the appearance.

*This property is only available for 3D scenes if "PropertyReference" is set to "Self".*

</td></tr></tbody></table>

<div class="header" id="bkmrk-back-to-the-menu-5"><div class="headertitle">  
</div></div>##### **Set Layout**

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_set_layout_behavior.html)</small>

Provides a published property to set the layout for Controls.

**Limitations**

<div class="contents" id="bkmrk-only-certain-built-i"><div class="textblock">- Only certain built-in layout mechanisms are supported
- Scene Composer does not support displaying layout-related properties when layouter is assigned using SetLayout behavior.

</div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-24"><div class="contents"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 16.9345%;">**Property Name**</th><th style="width: 35.3506%;">**Type**</th><th style="width: 47.7149%;">**Description**</th></tr><tr><td style="width: 16.9345%;">Layout</td><td style="width: 35.3506%;">CgiStudioControl::LayoutType::Enum</td><td style="width: 47.7149%;">Selects layout type for node.

*Possible values: None, Overlay, Stack, Baseline.*

*This property is only available if "PropertyReference" is set to "Self".*

</td></tr><tr><td style="width: 16.9345%;">PropertyReference</td><td style="width: 35.3506%;">CgiStudioControl::PropertyReference::Enum</td><td style="width: 47.7149%;">Choose how the property gets set. Via own property or from another Behavior.

*Possible values: Self, Other*

</td></tr></tbody></table>

</div></div></div></div>**Advanced Properties**

<table class="doxtable" id="bkmrk-property-name-type-d-25" style="width: 100%;"><tbody><tr><th style="width: 16.9275%;">**Property Name**</th><th style="width: 35.3377%;">**Type**</th><th style="width: 47.6936%;">**Description**</th></tr><tr><td style="width: 16.9275%;">StackArrangement</td><td style="width: 35.3377%;">[Candera::StackLayouter::Arrangement](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_stack_layouter.html#a9fba093bd1960e18bd662b0785c7d773)</td><td style="width: 47.6936%;">Selects arrangement for stack layouter.

*This property is only available if Layout is set to "Stack".*

</td></tr><tr><td style="width: 16.9275%;">PropertyProvider</td><td style="width: 35.3377%;">Behavior\*</td><td style="width: 47.6936%;">Property Behavior which contains the layout which has to be set on the effect. See <span style="color: rgb(230, 126, 35);">[Property Provider](https://doc316en.candera.eu/link/598#bkmrk-property-provider)</span> for more information.

*This property is only available if "PropertyReference"" is set to "Other".*

</td></tr></tbody></table>

##### **Provide Text**

Modifies the text of a TextNode or CanvasText and provides the text as property for Controls.

**Example Usage**

<div class="contents" id="bkmrk-set-text-example"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Set Text Example](https://doc316en.candera.eu/link/572#bkmrk-set-text-example)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-26"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 17.0581%;">**Property Name**</th><th style="width: 37.7025%;">**Type**</th><th style="width: 45.2394%;">**Description**</th></tr><tr><td style="width: 17.0581%;">PropertyReference</td><td style="width: 37.7025%;">CgiStudioControl::PropertyReference::Enum</td><td style="width: 45.2394%;">Choose how the property gets set. Via own property or from another Behavior.</td></tr><tr><td style="width: 17.0581%;">Text</td><td style="width: 37.7025%;">[FeatStd::String](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_string.html)</td><td style="width: 45.2394%;">The Text that will be set to the Text Node.</td></tr><tr><td style="width: 17.0581%;">Style</td><td style="width: 37.7025%;">SharedPointer&lt;[Candera::TextRendering::SharedStyle](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_text_rendering_1_1_shared_style.html)&gt;</td><td style="width: 45.2394%;">The Style that will be set to the Text Node.

</td></tr><tr><td style="width: 17.0581%;">Alignment</td><td style="width: 37.7025%;">Candera::TextNode2DLayouter::TextAlignment</td><td style="width: 45.2394%;">The horizontal text alignment, using the culture text direction, is used to define how text will be horizontally aligned within its layout area.

*Possible values: Auto, Left, Center, Right.*

</td></tr><tr><td style="width: 17.0581%;">Multiline</td><td style="width: 37.7025%;">bool</td><td style="width: 45.2394%;">If multi line is disabled then the new line control characters will be ignored and text will always be rendered in one line.

</td></tr><tr><td style="width: 17.0581%;">LineSpacing</td><td style="width: 37.7025%;">Candera::TextRendering::PixelSize</td><td style="width: 45.2394%;">Defines the distance between the baselines of successive lines of text.

</td></tr><tr><td style="width: 17.0581%;">WordWrap</td><td style="width: 37.7025%;">bool</td><td style="width: 45.2394%;">If word wrapping is enabled then the lines that exceed the client area will be split during arrangement into multiple lines.

</td></tr><tr><td style="width: 17.0581%;">Trimming</td><td style="width: 37.7025%;">Candera::TextNode2DLayouter::Trimming</td><td style="width: 45.2394%;">Trimming defines the behavior to employ when content overflows the content area.

*Possible values: None, Ellipsis, CustomText.*

</td></tr></tbody></table>

</div></div></div>**Advanced Properties**

<table class="doxtable" id="bkmrk-property-name-type-d-27" style="width: 100%;"><tbody><tr><th style="width: 17.0511%;">**Property Name**</th><th style="width: 37.6853%;">**Type**</th><th style="width: 45.2224%;">**Description**</th></tr><tr><td style="width: 17.0511%;">PropertyProvider</td><td style="width: 37.6853%;">Behavior\*</td><td style="width: 45.2224%;">Property Behavior which contains the color which has to be set on the effect.

*This property is only available if "PropertyReference"" is set to "Other".*

</td></tr><tr><td style="width: 17.0511%;">TrimmingText</td><td style="width: 37.6853%;">[FeatStd::String](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_string.html)</td><td style="width: 45.2224%;">Trimming text defines the text which replaces content overflowing the content area.

*This property is only available if "Trimming" is set to "CustomText".*

</td></tr></tbody></table>

---

#### **Align Pivot**

Aligns all child nodes according to their pivot point.

**Example Usage**

<div class="contents" id="bkmrk-align-pivot-example"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Align Pivot Example](https://doc316en.candera.eu/link/572#bkmrk-align-pivot-example)</span>

</div></div></div>**Common Properties**

This behavior does not have any configurable properties.

#### **Android Event Bridge**

Builds a bridge for events between CGIStudio and an Android application. Receives JsonEvents from an Android Control and transforms them to an equivalent CGI Studio event.

This behavior is only available for Android platform.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-28"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 16.5637%;">**Property Name**</th><th style="width: 26.4507%;">**Type**</th><th style="width: 56.9856%;">**Description**</th></tr><tr><td style="width: 16.5637%;">TargetNode</td><td style="width: 26.4507%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 56.9856%;">The target node to which the events are sent. If the property is not set, the event will be routed to the node of the behavior.</td></tr></tbody></table>

</div></div>#### **Arc Align**

Aligns child nodes in a circular layout. Provides properties for the radius, orientation offset and the min and max angle.

**Example Usage**

<div class="contents" id="bkmrk-arc-align-example"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Arc Align Example](https://doc316en.candera.eu/link/572#bkmrk-arc-align-example)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-29"><div class="textblock"><table class="doxtable"><tbody><tr><th>**Property Name**</th><th>**Type**</th><th>**Description**</th></tr><tr><td>Radius</td><td>Float</td><td>Radius of the digital needle indicators.</td></tr><tr><td>Orientation Offset</td><td>Float</td><td>Offset in the orientation of the needle indicators.</td></tr><tr><td>Angle Min Max</td><td>Vector2</td><td>Min/Max angle values (e.g. indicators displayed from -25 to 210 degrees).</td></tr></tbody></table>

</div></div>#### **Blend Mode**

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_blend_option_behavior.html)</small>

Sets a blend mode from a given list of options. Depending on that option the behavior chooses the appropriate blend factors and operations. In 2D it sets the values on the effect and in 3D on the render-mode if one is attached on the same node.

The following blend modes are available:

<div drawio-diagram="2843"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1677553381.png" alt=""/></div>

<div class="contents" id="bkmrk-default-add-multiply"><div class="contents"><div class="textblock"><table border="0"><tbody><tr><td> </td><td style="vertical-align: top;">- Default
- DefaultPremultiplied
- DefaultTransparentLayer
- Add
- Multiply
- Screen
- Darken (3D only)
- Lighten (3D only)
- Source Atop
- Source In
- SourceOut
- Source Over
- Destination Atop
- Destination In
- Destination Out
- Destination Over
- Off

</td></tr></tbody></table>

</div></div></div>The default blend mode comes in different variations, e.g. pre-multiplied, which should be applied if the alpha channel is pre-multiplied. The other blend modes are implemented according to the Porter-Duff composition modes.  
In 3D there are two additional blend modes available:

<div class="contents" id="bkmrk-lighten-darken."><div class="contents"><div class="textblock">- Lighten
- Darken

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-30"><div class="textblock"><table class="doxtable" style="width: 100%; height: 151.467px;"><tbody><tr style="height: 29.4667px;"><th style="width: 16.5568%; height: 29.4667px;">**Property Name**</th><th style="width: 31.0153%; height: 29.4667px;">**Type**</th><th style="width: 52.3867%; height: 29.4667px;">**Description**</th></tr><tr style="height: 46.2667px;"><td style="width: 16.5568%; height: 46.2667px;">PropertyReference</td><td style="width: 31.0153%; height: 46.2667px;">CgiStudioControl::PropertyReference::Enum</td><td style="width: 52.3867%; height: 46.2667px;">Choose how the property gets set. Via own property or from another Behavior.

*Possible values: Self, Other*

</td></tr><tr style="height: 46.2667px;"><td style="width: 16.5568%; height: 46.2667px;">PropertyProvider</td><td style="width: 31.0153%; height: 46.2667px;">PropertyProviderBehavior\*   
</td><td style="width: 52.3867%; height: 46.2667px;">Property Behavior which contains the color which has to be set on the effect.

*This property is only available if PropertyReference is set to "Other".*

*This property can be set in the right side of the Scene Tree Panel.*

</td></tr><tr><td style="width: 16.5568%; height: 29.4667px;">Mode</td><td style="width: 31.0153%; height: 29.4667px;">BlendType::Enum</td><td style="width: 52.3867%; height: 29.4667px;">Sets a blend mode from a given list of options.

*Possible values: Default, DefaultPremultiplied, DefaultTransparentLayer, Add, Multiply, Screen, Darken (3D only), Lighten (3D only), Source Atop, Source In, SourceOut, Source Over, Destination Atop, Destination In, Destination Out, Destination Over, Off*

</td></tr></tbody></table>

</div></div>#### **Breadcrumb Behavior**

A breadcrumb used as a navigational aid in user interfaces. It allows users to keep track and maintain awareness of their location.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-31"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 17.9234%;">**Property Name**</th><th style="width: 25.4626%;">**Type**</th><th style="width: 56.614%;">**Description**</th></tr><tr><td style="width: 17.9234%;">StateMachineNode</td><td style="width: 25.4626%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 56.614%;">The node of the State Machine</td></tr><tr><td style="width: 17.9234%;">EllipsisText</td><td style="width: 25.4626%;">[FeatStd::String](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_string.html)</td><td style="width: 56.614%;">When more elements are added than the breadcrumb can show, one element will be replaced with the text from this field (collapse effect).</td></tr><tr><td style="width: 17.9234%;">PathDelimiter</td><td style="width: 25.4626%;">[FeatStd::String](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_string.html)</td><td style="width: 56.614%;">Tag that separates the elements that a path contains.</td></tr></tbody></table>

</div></div>#### **Disable Control**

This behavior is a Behavior Block. It can be dragged&amp;dropped on nodes just like any Behavior.

A set of actions can be configured, which will be executed when the node **gets disabled**.

#### **Enable Control**

This behavior is a Behavior Block. It can be dragged&amp;dropped on nodes just like any Behavior.

A set of actions can be configured, which will be executed when the node **gets enabled**.

#### **Event Bridge**

Builds a bridge for events between two nodes for direct event dispatching. The events are routed from the source node to the target node (only in one direction).

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-32"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 14.5859%;">**Property Name**</th><th style="width: 25.3367%;">**Type**</th><th style="width: 60.0774%;">**Description**</th></tr><tr><td style="width: 14.5859%;">TargetNode</td><td style="width: 25.3367%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 60.0774%;">The target node to which the events are routed from the source node. If the property is not set, the event will be routed to the node of the behavior.</td></tr></tbody></table>

</div></div>#### **Focus**

This behavior is a Behavior Block. It can be dragged&amp;dropped on nodes just like any Behavior.

A set of actions can be configured, which will be executed when the node **gets focused**.

#### **Focus Leave**

This behavior is a Behavior Block. It can be dragged&amp;dropped on nodes just like any Behavior.

A set of actions can be configured, which will be executed when the node's **focus is left**.

#### **Hover**

**See also:** <span style="color: rgb(230, 126, 35);">[HoverLeave](https://doc316en.candera.eu/link/598#bkmrk-hoverleave-0)</span>

This behavior is a Behavior Block. It can be dragged&amp;dropped on nodes just like any Behavior.

A set of actions can be configured, which will be executed when the node **gets hovered**.

**Example Usage**

<div class="contents" id="bkmrk-hover---hover-leave--0"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Hover - Hover Leave Example](https://doc316en.candera.eu/link/572#bkmrk-hover---hover-leave-)</span>

</div></div>#### **HoverLeave**

This behavior is a Behavior Block. It can be dragged&amp;dropped on nodes just like any Behavior.

A set of actions can be configured, which will be executed when the node's **hovering is left**.

**Example Usage**

<div class="contents" id="bkmrk-hover---hover-leave--1"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Hover - Hover Leave Example](https://doc316en.candera.eu/link/572#bkmrk-hover---hover-leave-)</span>

</div></div>#### **IntervalSwitch**

Sends Off or On value to Trigger Behaviors that belong to same node.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-33"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 15.822%;">**Property Name**</th><th style="width: 22.3722%;">**Type**</th><th style="width: 61.8058%;">**Description**</th></tr><tr><td style="width: 15.822%;">State</td><td style="width: 22.3722%;">IntervalSwitchState::Enum</td><td style="width: 61.8058%;">If set to On, sends only On value to Trigger Behaviors in the same node. If set to Off, sends only Off value to Trigger Behaviors in the same node. If set to Blinking, alternates between sending On or Off values. Use On Time Ms and Off Time Ms to specify the speed of blinking.

*Possible values: On, Off, Blinking*

</td></tr><tr><td style="width: 15.822%;">OnTimeMs</td><td style="width: 22.3722%;">FeatStd::UInt32</td><td style="width: 61.8058%;">If State is set to Blinking, IntervalSwitchBehavior will be sending On value for On Time Ms milliseconds before switching to sending Off value.</td></tr><tr><td style="width: 15.822%;">OffTimeMs</td><td style="width: 22.3722%;">FeatStd::UInt32</td><td style="width: 61.8058%;">If State is set to Blinking, IntervalSwitchBehavior will be sending Off value for Off Time Ms milliseconds before switching to sending On value.</td></tr><tr><td style="width: 15.822%;">AcceptValueEvent  
</td><td style="width: 22.3722%;">bool  
</td><td style="width: 61.8058%;">Set this flag to true to make the behavior changeable by events/actions.</td></tr></tbody></table>

</div></div>#### **Keyboard** 

This behavior provides the functionality of Keyboard control by managing the Keyboard Keys and setting their properties according to the Configuration Script.

This behavior is available for 2D scenes only.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-34"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%; height: 1316.83px;"><tbody><tr style="height: 29.7969px;"><th style="width: 22.3641%; height: 29.7969px;">**Property Name**</th><th style="width: 30.7661%; height: 29.7969px;">**Type**</th><th style="width: 46.8287%; height: 29.7969px;">**Description**</th></tr><tr style="height: 35.3906px;"><td style="width: 22.3641%; height: 35.3906px;">ConfigurationScript</td><td style="width: 30.7661%; height: 35.3906px;">[FeatStd::String](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_string.html)</td><td style="width: 46.8287%; height: 35.3906px;">String that specifies symbols and layout of the Control</td></tr><tr><td style="width: 22.3641%;">KeyContent  
</td><td style="width: 30.7661%;">AbstractNodePointer</td><td style="width: 46.8287%;">Node containing Keyboard Keys.</td></tr><tr style="height: 46.5938px;"><td style="width: 22.3641%; height: 46.5938px;">StateMachineNode</td><td style="width: 30.7661%; height: 46.5938px;">AbstractNodePointer</td><td style="width: 46.8287%; height: 46.5938px;">State machine that reacts on events sent by a special key to change keyboard layout</td></tr><tr style="height: 29.7969px;"><td style="width: 22.3641%; height: 29.7969px;">KeyBackContentType</td><td style="width: 30.7661%; height: 29.7969px;">CgiStudioControl::KeyContent::Enum</td><td style="width: 46.8287%; height: 29.7969px;">Switch for Content of KEY\_BACK special key.

*Possible values: Text, Icon*

</td></tr><tr style="height: 49.5938px;"><td style="width: 22.3641%; height: 49.5938px;">KeyBackText</td><td style="width: 30.7661%; height: 49.5938px;">[FeatStd::String](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_string.html)</td><td style="width: 46.8287%; height: 49.5938px;">KEY\_BACK is labeled with the text.

*This property is only visible if KeyBackContentType is set to "Text".*

</td></tr><tr><td style="width: 22.3641%; height: 46.5938px;">KeyBackImage</td><td style="width: 30.7661%; height: 46.5938px;">SharedPointer&lt;Candera::Image2D&gt;</td><td style="width: 46.8287%; height: 46.5938px;">KEY\_BACK is labeled with the image.

*This property is only visible if KeyBackContentType is set to "Icon".*

</td></tr><tr><td style="width: 22.3641%; height: 29.7969px;">KeyEnterContentType</td><td style="width: 30.7661%; height: 29.7969px;">CgiStudioControl::KeyContent::Enum</td><td style="width: 46.8287%; height: 29.7969px;">Switch for Content of KEY\_ENTER special key.

*Possible values: Text, Icon*

</td></tr><tr><td style="width: 22.3641%; height: 49.5938px;">KeyEnterText</td><td style="width: 30.7661%; height: 49.5938px;">[FeatStd::String](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_string.html)</td><td style="width: 46.8287%; height: 49.5938px;">KEY\_ENTER is labeled with the text.

*This property is only visible if KeyBackContentType is set to "Text".*

</td></tr><tr><td style="width: 22.3641%; height: 46.5938px;">KeyEnterImage</td><td style="width: 30.7661%; height: 46.5938px;">SharedPointer&lt;Candera::Image2D&gt;</td><td style="width: 46.8287%; height: 46.5938px;">KEY\_ENTER is labeled with the image.

*This property is only visible if KeyBackContentType is set to "Icon".*

</td></tr><tr><td style="width: 22.3641%; height: 29.7969px;">KeySpaceContentType</td><td style="width: 30.7661%; height: 29.7969px;">CgiStudioControl::KeyContent::Enum</td><td style="width: 46.8287%; height: 29.7969px;">Switch for Content of KEY\_SPACE special key.

*Possible values: Text, Icon*

</td></tr><tr><td style="width: 22.3641%; height: 49.5938px;">KeySpaceText</td><td style="width: 30.7661%; height: 49.5938px;">[FeatStd::String](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_string.html)</td><td style="width: 46.8287%; height: 49.5938px;">KEY\_SPACE is labeled with the text.

*This property is only visible if KeyBackContentType is set to "Text".*

</td></tr><tr style="height: 46.5938px;"><td style="width: 22.3641%; height: 46.5938px;">KeySpaceImage</td><td style="width: 30.7661%; height: 46.5938px;">SharedPointer&lt;Candera::Image2D&gt;</td><td style="width: 46.8287%; height: 46.5938px;">KEY\_SPACE is labeled with the image.

*This property is only visible if KeyBackContentType is set to "Icon".*

</td></tr><tr style="height: 29.7969px;"><td style="width: 22.3641%; height: 29.7969px;">KeySwitchContentType</td><td style="width: 30.7661%; height: 29.7969px;">CgiStudioControl::KeyContent::Enum</td><td style="width: 46.8287%; height: 29.7969px;">Switch for Content of SWITCH special key</td></tr><tr style="height: 49.5938px;"><td style="width: 22.3641%; height: 49.5938px;">KeySwitchText</td><td style="width: 30.7661%; height: 49.5938px;">[FeatStd::String](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_string.html)</td><td style="width: 46.8287%; height: 49.5938px;">SWITCH is labeled with the text.

*This property is only visible if KeySwitchContentType is set to "Text".*

</td></tr><tr style="height: 46.5938px;"><td style="width: 22.3641%; height: 46.5938px;">KeySwitchImage</td><td style="width: 30.7661%; height: 46.5938px;">SharedPointer&lt;Candera::Image2D&gt;</td><td style="width: 46.8287%; height: 46.5938px;">SWITCH is labeled with the image.

*This property is only visible if KeySwitchContentType is set to "Icon".*

</td></tr><tr style="height: 29.7969px;"><td style="width: 22.3641%; height: 29.7969px;">KeyShiftContentType</td><td style="width: 30.7661%; height: 29.7969px;">CgiStudioControl::KeyContent::Enum</td><td style="width: 46.8287%; height: 29.7969px;">Switch for Content of SHIFT special key</td></tr><tr style="height: 49.5938px;"><td style="width: 22.3641%; height: 49.5938px;">KeyShiftText</td><td style="width: 30.7661%; height: 49.5938px;">[FeatStd::String](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_string.html)</td><td style="width: 46.8287%; height: 49.5938px;">SHIFT is labeled with the text.

*This property is only visible if KeyShiftContentType is set to "Text".*

</td></tr><tr style="height: 46.5938px;"><td style="width: 22.3641%; height: 46.5938px;">KeyShiftImage</td><td style="width: 30.7661%; height: 46.5938px;">SharedPointer&lt;Candera::Image2D&gt;</td><td style="width: 46.8287%; height: 46.5938px;">SHIFT is labeled with the image.

*This property is only visible if KeyShiftContentType is set to "Icon".*

</td></tr><tr style="height: 29.7969px;"><td style="width: 22.3641%; height: 29.7969px;">KeyShiftOnceContentType</td><td style="width: 30.7661%; height: 29.7969px;">CgiStudioControl::KeyContent::Enum</td><td style="width: 46.8287%; height: 29.7969px;">Switch for Content of SHIFT ONCE special key</td></tr><tr style="height: 49.5938px;"><td style="width: 22.3641%; height: 49.5938px;">KeyShiftOnceText</td><td style="width: 30.7661%; height: 49.5938px;">[FeatStd::String](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_string.html)</td><td style="width: 46.8287%; height: 49.5938px;">SHIFT ONCE is labeled with the text*:*

*This property is only visible if KeyShiftOnceContentType is set to "Text".*

</td></tr><tr style="height: 46.5938px;"><td style="width: 22.3641%; height: 46.5938px;">KeyShiftOnceImage</td><td style="width: 30.7661%; height: 46.5938px;">SharedPointer&lt;Candera::Image2D&gt;</td><td style="width: 46.8287%; height: 46.5938px;">SHIFT ONCE is labeled with the image.

*This property is only visible if KeyShiftOnceContentType is set to "icon".*

</td></tr><tr style="height: 29.7969px;"><td style="width: 22.3641%; height: 29.7969px;">KeyShiftLockContentType</td><td style="width: 30.7661%; height: 29.7969px;">CgiStudioControl::KeyContent::Enum</td><td style="width: 46.8287%; height: 29.7969px;">Switch for Content of SHIFT LOCK special key</td></tr><tr style="height: 49.5938px;"><td style="width: 22.3641%; height: 49.5938px;">KeyShiftLockText</td><td style="width: 30.7661%; height: 49.5938px;">[FeatStd::String](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_string.html)</td><td style="width: 46.8287%; height: 49.5938px;">SHIFT LOCK is labeled with the text.

*This property is only visible if KeyShiftLockContentType is set to "Text".*

</td></tr><tr style="height: 46.5938px;"><td style="width: 22.3641%; height: 46.5938px;">KeyShiftLockImage</td><td style="width: 30.7661%; height: 46.5938px;">SharedPointer&lt;Candera::Image2D&gt;</td><td style="width: 46.8287%; height: 46.5938px;">LEFT is labeled with the image.

*This property is only visible if KeyShiftLockContentType is set to "Icon".*

</td></tr><tr><td style="width: 22.3641%; height: 29.7969px;">KeyCloseContentType</td><td style="width: 30.7661%; height: 29.7969px;">CgiStudioControl::KeyContent::Enum</td><td style="width: 46.8287%; height: 29.7969px;">Switch for Content of SHIFT LOCK special key</td></tr><tr style="height: 29.7969px;"><td style="width: 22.3641%; height: 49.5938px;">KeyCloseText</td><td style="width: 30.7661%; height: 49.5938px;">[FeatStd::String](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_string.html)</td><td style="width: 46.8287%; height: 49.5938px;">CLOSE is labeled with the text.

*This property is only visible if KeyCloseContentType is set to "Text".*

</td></tr><tr style="height: 49.5938px;"><td style="width: 22.3641%; height: 46.5938px;">KeyCloseImage</td><td style="width: 30.7661%; height: 46.5938px;">SharedPointer&lt;Candera::Image2D&gt;</td><td style="width: 46.8287%; height: 46.5938px;">CLOSE is labeled with the image.

*This property is only visible if KeyCloseContentType is set to "Icon".*

</td></tr><tr style="height: 46.5938px;"><td style="width: 22.3641%; height: 46.5938px;">KeyLeftContentType</td><td style="width: 30.7661%; height: 29.7969px;">CgiStudioControl::KeyContent::Enum</td><td style="width: 46.8287%; height: 29.7969px;">Switch for Content of LEFT special key</td></tr><tr><td style="width: 22.3641%;">KeyLeftText  
</td><td style="width: 30.7661%; height: 49.5938px;">[FeatStd::String](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_string.html)</td><td style="width: 46.8287%; height: 49.5938px;">LEFT is labeled with the text.

*This property is only visible if KeyLeftContentType is set to "Text".*

</td></tr><tr><td style="width: 22.3641%;">KeyLeftImage  
</td><td style="width: 30.7661%; height: 46.5938px;">SharedPointer&lt;Candera::Image2D&gt;</td><td style="width: 46.8287%; height: 46.5938px;">LEFT is labeled with the image.

*This property is only visible if KeyLeftContentType is set to "Icon".*

</td></tr><tr><td style="width: 22.3641%;">KeyRightContentType  
</td><td style="width: 30.7661%; height: 29.7969px;">CgiStudioControl::KeyContent::Enum</td><td style="width: 46.8287%; height: 29.7969px;">Switch for Content of RIGHT special key</td></tr><tr><td style="width: 22.3641%;">KeyRightText  
</td><td style="width: 30.7661%; height: 49.5938px;">[FeatStd::String](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_string.html)</td><td style="width: 46.8287%; height: 49.5938px;">RIGHT is labeled with the text.

*This property is only visible if KeyRightContentType is set to "Text".*

</td></tr><tr><td style="width: 22.3641%;">KeyRightImage  
</td><td style="width: 30.7661%; height: 46.5938px;">SharedPointer&lt;Candera::Image2D&gt;</td><td style="width: 46.8287%; height: 46.5938px;">RIGHT is labeled with the image.

*This property is only visible if KeyRightContentType is set to "Icon".*

</td></tr><tr><td style="width: 22.3641%; height: 46.5938px;">NavigateUpKeyCode</td><td style="width: 30.7661%; height: 46.5938px;">Candera::KeyboardKeyCode::Enum</td><td style="width: 46.8287%; height: 46.5938px;">Key from a physical keyboard that moves focus to a key above the current focused</td></tr><tr style="height: 46.5938px;"><td style="width: 22.3641%; height: 46.5938px;">NavigateDownKeyCode</td><td style="width: 30.7661%; height: 46.5938px;">Candera::KeyboardKeyCode::Enum</td><td style="width: 46.8287%; height: 46.5938px;">Key from a physical keyboard that moves focus to a key below the current focused</td></tr><tr style="height: 46.5938px;"><td style="width: 22.3641%; height: 46.5938px;">NavigateNextKeyCode</td><td style="width: 30.7661%; height: 46.5938px;">Candera::KeyboardKeyCode::Enum</td><td style="width: 46.8287%; height: 46.5938px;">Key from a physical keyboard that moves focus to a key on the right from the current focused</td></tr><tr style="height: 46.5938px;"><td style="width: 22.3641%; height: 46.5938px;">NavigatePreviousKeyCode</td><td style="width: 30.7661%; height: 46.5938px;">Candera::KeyboardKeyCode::Enum</td><td style="width: 46.8287%; height: 46.5938px;">Key from a physical keyboard that moves focus to a key on the left from the current focused</td></tr><tr style="height: 46.5938px;"><td style="width: 22.3641%; height: 46.5938px;">NavigateStartOnDown</td><td style="width: 30.7661%; height: 46.5938px;">bool</td><td style="width: 46.8287%; height: 46.5938px;">Enables starting navigation with the same key as NavigateDownKeyCode</td></tr><tr style="height: 46.5938px;"><td style="width: 22.3641%; height: 46.5938px;">NavigateEndOnUp</td><td style="width: 30.7661%; height: 46.5938px;">bool</td><td style="width: 46.8287%; height: 46.5938px;">Enables finishing navigation with the same key as NavigateUpKeyCode</td></tr><tr style="height: 46.5938px;"><td style="width: 22.3641%; height: 46.5938px;">NavigateStartKeyCode</td><td style="width: 30.7661%; height: 46.5938px;">Candera::KeyboardKeyCode::Enum</td><td style="width: 46.8287%; height: 46.5938px;">Key from a physical keyboard that starts navigation within the Control</td></tr><tr style="height: 46.5938px;"><td style="width: 22.3641%; height: 46.5938px;">NavigateEndKeyCode</td><td style="width: 30.7661%; height: 46.5938px;">Candera::KeyboardKeyCode::Enum</td><td style="width: 46.8287%; height: 46.5938px;">Key from a physical keyboard that finishes navigation within the Control</td></tr><tr style="height: 29.7969px;"><td style="width: 22.3641%; height: 29.7969px;">NavigateCloseKeyCode</td><td style="width: 30.7661%; height: 29.7969px;">Candera::KeyboardKeyCode::Enum</td><td style="width: 46.8287%; height: 29.7969px;">Key from a physical keyboard that hides the Control</td></tr><tr style="height: 46.5938px;"><td style="width: 22.3641%; height: 46.5938px;">NavigateInvokeKeyCode</td><td style="width: 30.7661%; height: 46.5938px;">Candera::KeyboardKeyCode::Enum</td><td style="width: 46.8287%; height: 46.5938px;">Key from a physical keyboard that emulates clicking the current focused Key from the Control</td></tr></tbody></table>

</div></div></div>**Configuration String**

The most important feature of the Keyboard Control is Configuration Script. It is parsed during layouting a scene which a keyboard is embedded on and keys (their appearance and their special functionalities) are arranged according to it.

The configuration script is simply a string. Each line of the string specifies a row of keys in the instance of keyboard and consists of space-separated list of key strings. A key string specifies a value that will be sent to a connected InputField. The most typical key string is simply a character or figure but it is not limited to it.

Following key strings have a special meaning:

<div class="contents" id="bkmrk-key-string-meaning-e"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 28.9225%;">**Key String**</th><th style="width: 71.0775%;">**Meaning**</th></tr><tr><td style="width: 28.9225%;">enum from Candera::KeyboardKeyCode::Enum:  
KEY\_BACK, KEY\_SPACE, KEY\_ENTER</td><td style="width: 71.0775%;">For most keys KEY\_\* has the same meaning as \* (e.g. „KEY\_A“ is the same as simply „A“); it enables keys with non-printable characters like backspace etc.</td></tr><tr><td style="width: 28.9225%;">CLOSE()</td><td style="width: 71.0775%;">Represents a key that sends Close KeyboardAction to a state machine; it is designed to enable hiding (setting EnableRendering to false) an instance of the Control</td></tr><tr><td style="width: 28.9225%;">SWITCH(layoutName)</td><td style="width: 71.0775%;">Represents a key that sends ¬¬to a state machine an event with its argument; it is designed to enable permanent changing layout e.g. to uppercase letters, symbols or digits</td></tr><tr><td style="width: 28.9225%;">SHIFT(layoutName)</td><td style="width: 71.0775%;">Mostly the same as SWITCH() but is separated to enable changing layout only for a single input, it means after entering a single letter (e.g. first capital letter in a sentence) the layout will be reset to the previous one</td></tr><tr><td style="width: 28.9225%;">NULL()</td><td style="width: 71.0775%;">Represents a key that will NOT be rendered; it is designed for a layouting/padding purpose</td></tr></tbody></table>

</div></div></div>Keyboard Control has public properties that customize labels of keys with the special meaning described above. One can set them custom text or image label.

Each key string (both regular and special) can be extended by a scaling factor in square brackets, e.g. SHIFT(Uppercase/en/US)\[2\] defines a key that sends to a state machine event with “Uppercase/en/US” string and the key itself is counted “2” times (like two different keys) when counting default width of a key in its row.

It is not obligatory to connect the Control to a state machine. There is a default set of layouts with lower- and uppercase english letters as well as digits and symbols with full switching support without a state machine.

#### **Menu Item**

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_menu_item_behavior.html)</small>

Menu Item Behavior defines the attached Node as an Menu Item. A Menu Item can interact with the Menu Screen Behavior. Sends Off or On value to Trigger Behaviors that belong to same node.

This behavior is available for 2D scenes only.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-35"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 21.3844%;">**Property Name**</th><th style="width: 37.9452%;">**Type**</th><th style="width: 40.794%;">**Description**</th></tr><tr><td style="width: 21.3844%;">DeleteButtonNode</td><td style="width: 37.9452%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 40.794%;">Delete button node needed to control visibility (render on/off).</td></tr><tr><td style="width: 21.3844%;">Focusable</td><td style="width: 37.9452%;">bool</td><td style="width: 40.794%;">If true then focus node will be visible.</td></tr><tr><td style="width: 21.3844%;">FocusNode</td><td style="width: 37.9452%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 40.794%;">Focus node needed to control visibility (render on/off) and change focus image.</td></tr><tr><td style="width: 21.3844%;">Enabled</td><td style="width: 37.9452%;">bool</td><td style="width: 40.794%;">If true then item is visible.</td></tr><tr><td style="width: 21.3844%;">FocusImageOnSelection</td><td style="width: 37.9452%;">SharedPointer&lt;[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")&gt;</td><td style="width: 40.794%;">The image to set on the effect.</td></tr><tr><td style="width: 21.3844%;">FocusImageOnDragging</td><td style="width: 37.9452%;">SharedPointer&lt;[Candera::Image2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_image2_d.html "Image2D encapsulates a surface handle which is retrieved when uploading an image.")&gt;</td><td style="width: 40.794%;">The image to set on the effect.</td></tr></tbody></table>

</div></div>#### **MenuScreen**

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_menu_screen_behavior.html)</small>

The Control represents a menu in the form of a grid of icons (instances of the Menu Item Control). It has configurable number of rows and columns as well as default and maximum number of screens. A user can swipe between neighbouring screens. The Control handles user input and forwards proper information to children MenuItem nodes. The children nodes may be removed and reordered in runtime.

This behavior is available for 2D scenes only.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-36"><div class="textblock"><table class="doxtable" style="width: 100%; height: 1006.4px;"><tbody><tr style="height: 46.2667px;"><th style="width: 26.8122%; height: 46.2667px;">**Property Name**</th><th style="width: 22.4861%; height: 46.2667px;">**Type**</th><th style="width: 50.6605%; height: 46.2667px;">**Description**</th></tr><tr style="height: 46.2667px;"><td style="width: 26.8122%; height: 46.2667px;">ActiveScreenIndex  
</td><td style="width: 22.4861%; height: 46.2667px;">UInt32  
</td><td style="width: 50.6605%; height: 46.2667px;">Currently active index.</td></tr><tr style="height: 46.2667px;"><td style="width: 26.8122%; height: 46.2667px;">NumberOfScreens  
</td><td style="width: 22.4861%; height: 46.2667px;">UInt32</td><td style="width: 50.6605%; height: 46.2667px;">Number of active screens.</td></tr><tr style="height: 46.2667px;"><td style="width: 26.8122%; height: 46.2667px;">LimitOfScreens  
</td><td style="width: 22.4861%; height: 46.2667px;">UInt32</td><td style="width: 50.6605%; height: 46.2667px;">Limit of active screens.</td></tr><tr style="height: 29.4667px;"><td style="width: 26.8122%; height: 29.4667px;">Rows  
</td><td style="width: 22.4861%; height: 29.4667px;">UInt32</td><td style="width: 50.6605%; height: 29.4667px;">Number of rows.</td></tr><tr style="height: 29.4667px;"><td style="width: 26.8122%; height: 29.4667px;">Columns  
</td><td style="width: 22.4861%; height: 29.4667px;">UInt32</td><td style="width: 50.6605%; height: 29.4667px;">Number of columns.</td></tr><tr style="height: 46.2667px;"><td style="width: 26.8122%; height: 46.2667px;">ScreenChangeTime  
</td><td style="width: 22.4861%; height: 46.2667px;">Float  
</td><td style="width: 50.6605%; height: 46.2667px;">Time of dragging a Menu Item outside boundaries of the Menu Screen to change its screen to a neighbour.</td></tr><tr style="height: 82.6667px;"><td style="width: 26.8122%; height: 82.6667px;">SwapItemAnimationEasingFunction  
</td><td style="width: 22.4861%; height: 82.6667px;">EasingFunctions::Enum</td><td style="width: 50.6605%; height: 82.6667px;">Swap item animation easing function.

*Possible values: CircularInOut, Linear, SineIn, SineOut, SineInOut*

</td></tr><tr style="height: 63.0667px;"><td style="width: 26.8122%; height: 63.0667px;">SwapItemAnimationLength  
</td><td style="width: 22.4861%; height: 63.0667px;">Float  
</td><td style="width: 50.6605%; height: 63.0667px;">Swap item animation length</td></tr><tr style="height: 82.6667px;"><td style="width: 26.8122%; height: 82.6667px;">ChangeScreenAnimationEasingFunction  
</td><td style="width: 22.4861%; height: 82.6667px;">EasingFunctions::Enum</td><td style="width: 50.6605%; height: 82.6667px;">Change screen animation easing function.

*Possible values: CircularInOut, Linear, SineIn, SineOut, SineInOut*

</td></tr><tr style="height: 63.0667px;"><td style="width: 26.8122%; height: 63.0667px;">ChangeScreenAnimationLength  
</td><td style="width: 22.4861%; height: 63.0667px;">Float  
</td><td style="width: 50.6605%; height: 63.0667px;">Change screen animation length.</td></tr><tr style="height: 63.0667px;"><td style="width: 26.8122%; height: 63.0667px;">KeyCodeToMoveSelectionLeft  
</td><td style="width: 22.4861%; height: 63.0667px;">KeyboardKeyCode::Enum</td><td style="width: 50.6605%; height: 63.0667px;">Key code to move selection left.

*Possible values: Key\_None, ...&lt;all keyboard key codes&gt;... Key\_OEM8*

</td></tr><tr style="height: 63.0667px;"><td style="width: 26.8122%; height: 63.0667px;">KeyCodeToMoveSelectionRight</td><td style="width: 22.4861%; height: 63.0667px;">KeyboardKeyCode::Enum</td><td style="width: 50.6605%; height: 63.0667px;">Key code to move selection right.

*Possible values: Key\_None, ...&lt;all keyboard key codes&gt;... Key\_OEM8*

</td></tr><tr style="height: 63.0667px;"><td style="width: 26.8122%; height: 63.0667px;">KeyCodeToMoveSelectionUp</td><td style="width: 22.4861%; height: 63.0667px;">KeyboardKeyCode::Enum</td><td style="width: 50.6605%; height: 63.0667px;">Key code to move selection up.

*Possible values: Key\_None, ...&lt;all keyboard key codes&gt;... Key\_OEM8*

</td></tr><tr style="height: 63.0667px;"><td style="width: 26.8122%; height: 63.0667px;">KeyCodeToMoveSelectionDown</td><td style="width: 22.4861%; height: 63.0667px;">KeyboardKeyCode::Enum</td><td style="width: 50.6605%; height: 63.0667px;">Key code to move selection down.

*Possible values: Key\_None, ...&lt;all keyboard key codes&gt;... Key\_OEM8*

</td></tr><tr style="height: 46.2667px;"><td style="width: 26.8122%; height: 46.2667px;">PageIndicatorNode</td><td style="width: 22.4861%; height: 46.2667px;">Candera::AbstractNodePointer</td><td style="width: 50.6605%; height: 46.2667px;">Page indicator node.</td></tr><tr style="height: 79.8667px;"><td style="width: 26.8122%; height: 79.8667px;">Items</td><td style="width: 22.4861%; height: 79.8667px;">ListPropertyType&lt;::Courier::DataContextItem::SharedPointer&gt;</td><td style="width: 50.6605%; height: 79.8667px;">The items property is used for binding of dynamic items. It can only be set via databinding. Only one visible list control should be bound to a fragment list in the model. Otherwise the list fragments in the model are not able to provide data for both list controls. Use a separate list model that is filled with the same data if such a use case is required.</td></tr><tr style="height: 46.2667px;"><td style="width: 26.8122%; height: 46.2667px;">ContentNode</td><td style="width: 22.4861%; height: 46.2667px;">Candera::AbstractNodePointer</td><td style="width: 50.6605%; height: 46.2667px;">Content node.</td></tr></tbody></table>

</div></div>#### **Navigation Instruction View**

Behavior for displaying the instructions during navigation.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-37"><div class="textblock"><table class="doxtable"><tbody><tr><th>**Property Name**</th><th>**Type**</th><th>**Description**</th></tr><tr><td>SignDisplayNode</td><td>Candera::AbstractNodePointer</td><td>Node used to display the graphical sign.</td></tr><tr><td>PrimaryTextNode</td><td>Candera::AbstractNodePointer</td><td>Node used to display the primary message.</td></tr><tr><td>SecondaryTextNode</td><td>Candera::AbstractNodePointer</td><td>Node used to display the secondary message.</td></tr><tr><td>ManeuverTypeTextNode</td><td>Candera::AbstractNodePointer</td><td>Node used to display the maneuver type (as text).</td></tr></tbody></table>

</div></div>#### **OnClick**

This behavior is a Behavior Block. It can be dragged&amp;dropped on nodes just like any Behavior.

A set of actions can be configured, which will be executed when the node **is clicked**.

OnClick behavior allows to check for single, double or tripple (or any) Click events.

<div class="contents" id="bkmrk-note%3A-click-is-a-syn"><div class="contents"><div class="textblock"><dl class="note"><dt>**Note:**</dt><dd>Click is a synthetic event composed by combining two basic events: Press and Release.</dd></dl></div></div></div>**Example Usage**

<div class="contents" id="bkmrk-enable-rendering-exa"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Enable Rendering Example](https://doc316en.candera.eu/link/572#bkmrk-enable-rendering-exa)</span>
- <span style="color: rgb(230, 126, 35);">[Move Node Example](https://doc316en.candera.eu/link/572#bkmrk-move-node-example)</span>
- <span style="color: rgb(230, 126, 35);">[OnClick Example](https://doc316en.candera.eu/link/572#bkmrk-onclick-example)</span>
- <span style="color: rgb(230, 126, 35);">[Set Position Example](https://doc316en.candera.eu/link/572#bkmrk-set-position-example)</span>
- <span style="color: rgb(230, 126, 35);">[Set Rotation Example](https://doc316en.candera.eu/link/572#bkmrk-set-rotation-example)</span>
- <span style="color: rgb(230, 126, 35);">[Start Timer Example](https://doc316en.candera.eu/link/572#bkmrk-start-timer-example)</span>
- <span style="color: rgb(230, 126, 35);">[Perform Transition Requests Example](https://doc316en.candera.eu/link/572#bkmrk-perform-transition-r)</span>
- <span style="color: rgb(230, 126, 35);">[Switch Image Example](https://doc316en.candera.eu/link/572#bkmrk-switch-image-example)</span>

</div></div></div>#### **OnPressed**

This behavior is a Behavior Block. It can be dragged&amp;dropped on nodes just like any Behavior.

A set of actions can be configured, which will be executed when the node **is pressed**.

OnPressed behavior allows to check for Pressed and Released (and LongPressed) events.

**Example Usage**

<div class="contents" id="bkmrk-onpressed-example"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[OnPressed Example](https://doc316en.candera.eu/link/572#bkmrk-onpressed-example)</span>

</div></div>#### **OnTimer**

This behavior is a Behavior Block. It can be dragged&amp;dropped on nodes just like any Behavior.

A timer node and a set of actions can be configured. These actions will be executed when the **timer expires**.

**See also:** <span style="color: rgb(230, 126, 35);">[Check Timer](https://doc316en.candera.eu/link/597#bkmrk-check-timer)</span>, <span style="color: rgb(230, 126, 35);">[Start Timer](https://doc316en.candera.eu/link/582#bkmrk-start-timer)</span>

This behavior is a Behavior Block.

**Example Usage**

<div class="contents" id="bkmrk-start-timer-example"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Start Timer Example](https://doc316en.candera.eu/link/572#bkmrk-start-timer-example)</span>

</div></div>#### **Orbit Camera Transform**

When attached to a Node, the specified camera will orbit around that Node. PLAYER USE ONLY.

<span lang="EN-US" style="mso-fareast-language: ZH-CN;">And the options to limit the movement of the camera to specific parts of the spherical orbit. Setting the flag IsOrbitLimited allows the user to set minimum and maximum angles between the camera and the axes of the coordinate system, preventing the camera from moving too close to an axis. In this way, the user can define unwanted areas that the camera cannot move to, e.g., below the ground.</span>

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-38"><div class="textblock"><table border="1" class="doxtable" style="border-collapse: collapse; width: 700px;"><tbody><tr><th style="width: 175.05px;">**Property Name**</th><th style="width: 182.05px;">**Type**</th><th style="width: 342.1px;">**Description**</th></tr><tr><td style="width: 175.05px;">TouchableId  
</td><td style="width: 182.05px;">String  
</td><td style="width: 342.1px;">Touchable Id  
</td></tr><tr><td style="width: 175.05px;">Camera</td><td style="width: 182.05px;">CameraType</td><td style="width: 342.1px;">The camera that looks at the associated node.</td></tr></tbody></table>

</div></div>**Advanced Properties**

<table border="1" class="doxtable" id="bkmrk-property-name-type-d-39" style="border-collapse: collapse; width: 700px;"><tbody><tr><th style="width: 171.05px;">**Property Name**</th><th style="width: 191.05px;">**Type**</th><th style="width: 337.1px;">**Description**</th></tr><tr><td style="width: 171.05px;">IsOrbitLimited  
</td><td style="width: 191.05px;">bool  
</td><td style="width: 337.1px;">Enables setting of boundaries for the camera within the orbit.  
</td></tr><tr><td style="width: 171.05px;">AngleMinX</td><td style="width: 191.05px;">FeatStd::Float</td><td style="width: 337.1px;">Min angle between camera and X-axis (from 0 to 180 degrees). Must be less than AngleMaxX.</td></tr><tr><td style="width: 171.05px;">AngleMaxX</td><td style="width: 191.05px;">FeatStd::Float</td><td style="width: 337.1px;">Max angle between camera and X-axis (from 0 to 180 degrees). Must be greater than AngleMinX.</td></tr><tr><td style="width: 171.05px;">AngleMinY</td><td style="width: 191.05px;">FeatStd::Float</td><td style="width: 337.1px;">Min angle between camera and Y-axis (from 0 to 180 degrees). Must be less than AngleMaxY.</td></tr><tr><td style="width: 171.05px;">AngleMaxY</td><td style="width: 191.05px;">FeatStd::Float</td><td style="width: 337.1px;">Max angle between camera and Y-axis (from 0 to 180 degrees). Must be greater than AngleMinY.</td></tr><tr><td style="width: 171.05px;">AngleMinZ</td><td style="width: 191.05px;">FeatStd::Float</td><td style="width: 337.1px;">Min angle between camera and Z-axis (from 0 to 180 degrees). Must be less than AngleMaxZ.</td></tr><tr><td style="width: 171.05px;">AngleMaxZ</td><td style="width: 191.05px;">FeatStd::Float</td><td style="width: 337.1px;">Max angle between camera and Z-axis (from 0 to 180 degrees). Must be greater than AngleMinZ.</td></tr></tbody></table>

#### **Page Indicator**

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_page_indicator_behavior.html)</small>

Send events to a PageIndicator behavior to update its state. Can change the number of pages, set the active page, or activate a specific dot via external controls or PageIndicatorElement. This behavior is available for 2D scenes only.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-40"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 18.0395%;">**Property Name**</th><th style="width: 28.7891%;">**Type**</th><th style="width: 53.1302%;">**Description**</th></tr><tr><td style="width: 18.0395%;">TargetNode</td><td style="width: 28.7891%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 53.1302%;">Target node that will receive a ChangeValueEvent when ActivePageIndex changes</td></tr><tr><td style="width: 18.0395%;">ActivePageIndex</td><td style="width: 28.7891%;">FeatStd::Int32</td><td style="width: 53.1302%;">Index of active page (range from 0 to NumberOfPages - 1)</td></tr><tr><td style="width: 18.0395%;">NumberOfPages</td><td style="width: 28.7891%;">FeatStd::Int32</td><td style="width: 53.1302%;">Total number of pages (you have to ensure that PageIndicator has at least this number of child elements)</td></tr><tr><td style="width: 18.0395%;">DecrementKeyCode</td><td style="width: 28.7891%;">Candera::KeyboardKeyCode::Enum</td><td style="width: 53.1302%;">Key used for decrementing value (if value is actually decremented, focus handling is suspended)

*Possible values: Key\_None, ...&lt;all keyboard key codes&gt;... Key\_OEM8*

</td></tr><tr><td style="width: 18.0395%;">IncrementKeyCode</td><td style="width: 28.7891%;">Candera::KeyboardKeyCode::Enum</td><td style="width: 53.1302%;">Key used for incrementing value (if value is actually incremented, focus handling is suspended)

*Possible values: Key\_None, ...&lt;all keyboard key codes&gt;... Key\_OEM8*

</td></tr></tbody></table>

</div></div>#### **Rectangle Clipping Behavior**

Clips the control to given rectangle.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-41"><div class="textblock"><table class="doxtable"><tbody><tr><th>**Property Name**</th><th>**Type**</th><th>**Description**</th></tr><tr><td>Width</td><td>Float</td><td>Width of the clipping rectangle.</td></tr><tr><td>Height</td><td>Float</td><td>Height of the clipping rectangle.</td></tr><tr><td>ClipPositionEnabled</td><td>bool</td><td>Enable Clipping Position.</td></tr><tr><td>ClipPosition  
</td><td>Candera::Vector2</td><td>Position of the clipping rectangle.

*This property is only available if ClipPositionEnabled is set to true.*

</td></tr></tbody></table>

</div></div>#### **Roll**

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_roll_behavior.html)</small>

Displays a list of float values within a specified range, and lets the user select a value by rolling with touch or scrolling via configured arrow keys. This behavior is available for 2D scenes only.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-42"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%; height: 541.334px;"><tbody><tr style="height: 29.4667px;"><th style="width: 20.6343%; height: 29.4667px;">**Property Name**</th><th style="width: 28.5426%; height: 29.4667px;">**Type**</th><th style="width: 50.7819%; height: 29.4667px;">**Description**</th></tr><tr style="height: 35.0667px;"><td style="width: 20.6343%; height: 35.0667px;">ValueGroup</td><td style="width: 28.5426%; height: 35.0667px;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 50.7819%; height: 35.0667px;">Node containing a range of displayed values</td></tr><tr style="height: 35.0667px;"><td style="width: 20.6343%; height: 35.0667px;">LensGroup</td><td style="width: 28.5426%; height: 35.0667px;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 50.7819%; height: 35.0667px;">Node containing current value.

*This property is only available if 'LensVisible' is set to 'true'.*

</td></tr><tr style="height: 35.0667px;"><td style="width: 20.6343%; height: 35.0667px;">DecorationGroup</td><td style="width: 28.5426%; height: 35.0667px;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 50.7819%; height: 35.0667px;">Node containing lens decoration.

*This property is only available if 'LensVisible' is set to 'true'.*

</td></tr><tr style="height: 29.4667px;"><td style="width: 20.6343%; height: 29.4667px;">Value</td><td style="width: 28.5426%; height: 29.4667px;">FeatStd::Float</td><td style="width: 50.7819%; height: 29.4667px;">Current value</td></tr><tr style="height: 29.4667px;"><td style="width: 20.6343%; height: 29.4667px;">Min</td><td style="width: 28.5426%; height: 29.4667px;">FeatStd::Float</td><td style="width: 50.7819%; height: 29.4667px;">Minimum value</td></tr><tr style="height: 29.4667px;"><td style="width: 20.6343%; height: 29.4667px;">Max</td><td style="width: 28.5426%; height: 29.4667px;">FeatStd::Float</td><td style="width: 50.7819%; height: 29.4667px;">Maximum value</td></tr><tr style="height: 29.4667px;"><td style="width: 20.6343%; height: 29.4667px;">LensVisible</td><td style="width: 28.5426%; height: 29.4667px;">bool</td><td style="width: 50.7819%; height: 29.4667px;">Is lens group visible?</td></tr><tr style="height: 29.4667px;"><td style="width: 20.6343%; height: 29.4667px;">UseCyclicRoll</td><td style="width: 28.5426%; height: 29.4667px;">bool</td><td style="width: 50.7819%; height: 29.4667px;">Is roll cyclic?</td></tr><tr style="height: 46.2667px;"><td style="width: 20.6343%; height: 46.2667px;">AllowDraggingPastLimit</td><td style="width: 28.5426%; height: 46.2667px;">bool</td><td style="width: 50.7819%; height: 46.2667px;">Allow temporary over-dragging (dragging to blank values before first and after last entry)

*This property is only available if 'UseCyclicRoll' is set to 'false'.*

</td></tr><tr style="height: 102.267px;"><td style="width: 20.6343%; height: 102.267px;">DecrementKeyCode</td><td style="width: 28.5426%; height: 102.267px;">Candera::KeyboardKeyCode::Enum</td><td style="width: 50.7819%; height: 102.267px;">Key used for decrementing value (if value is actually decremented, focus handling is suspended)

*Possible values: Key\_None, ...&lt;all keyboard key codes&gt;... Key\_OEM8*

</td></tr><tr style="height: 46.2667px;"><td style="width: 20.6343%; height: 46.2667px;">IncrementKeyCode</td><td style="width: 28.5426%; height: 46.2667px;">Candera::KeyboardKeyCode::Enum</td><td style="width: 50.7819%; height: 46.2667px;">Key used for incrementing value (if value is actually incremented, focus handling is suspended)

*Possible values: Key\_None, ...&lt;all keyboard key codes&gt;... Key\_OEM8*

</td></tr><tr style="height: 35.0667px;"><td style="width: 20.6343%; height: 35.0667px;">TextEditNode</td><td style="width: 28.5426%; height: 35.0667px;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 50.7819%; height: 35.0667px;">Node containing text edit field</td></tr><tr style="height: 29.4667px;"><td style="width: 20.6343%; height: 29.4667px;">Step</td><td style="width: 28.5426%; height: 29.4667px;">FeatStd::Float</td><td style="width: 50.7819%; height: 29.4667px;">Value step (positive float value).</td></tr></tbody></table>

</div></div></div>**Advanced Properties**

<div class="contents" id="bkmrk-property-name-type-d-43"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 20.6428%;">**Property Name**</th><th style="width: 32.0106%;">**Type**</th><th style="width: 47.3467%;">**Description**</th></tr><tr><td style="width: 20.6428%;">Format</td><td style="width: 32.0106%;">[FeatStd::String](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_string.html)</td><td style="width: 47.3467%;">Value display format (use '%f' for value)

*This property is only available if 'LensVisible' is set to 'false'.*

</td></tr><tr><td style="width: 20.6428%;">EditKeyCode</td><td style="width: 32.0106%;">Candera::KeyboardKeyCode::Key\_Enter</td><td style="width: 47.3467%;">Key used for entering text edit mode

*Possible values: Key\_None, ...&lt;all keyboard key codes&gt;... Key\_OEM8*

*This property is only available if 'LensVisible' is set to 'true' and a 'TextEditNode' is configured.*

</td></tr></tbody></table>

</div></div>#### **Touch Indication**

Used to display a touch indicator at the position where the screen is touched. Control must be positioned at position (0;0) if no offset to the touch location is desired.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-44"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 19.5222%;">**Property Name**</th><th style="width: 28.1713%;">**Type**</th><th style="width: 52.2652%;">**Description**</th></tr><tr><td style="width: 19.5222%;">TouchableId  
</td><td style="width: 28.1713%;">String  
</td><td style="width: 52.2652%;">Touchable Id  
</td></tr><tr><td style="width: 19.5222%;">IndicationNode</td><td style="width: 28.1713%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 52.2652%;">The node moved by the Touch Indication Behavior. It is moved to the touch location to point it out.</td></tr><tr><td style="width: 19.5222%;">TouchAreaNode</td><td style="width: 28.1713%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 52.2652%;">The node whose area the Touch Indication Behavior should indicate touch events on.</td></tr><tr><td style="width: 19.5222%;">Camera</td><td style="width: 28.1713%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 52.2652%;">The camera used to render the touch indicator. Will be used to correctly match touch position with object position in case the camera has a position offset.</td></tr><tr><td style="width: 19.5222%;">DistanceFromCamera</td><td style="width: 28.1713%;">FeatStd::Float</td><td style="width: 52.2652%;">How far from the camera should the touch indication node be rendered.

*This property is only available for 3D scenes.*

</td></tr><tr><td style="width: 19.5222%;">OnAnimation</td><td style="width: 28.1713%;">Candera::MemoryManagement::SharedPointer&lt;[Candera::Animation::AnimationPlayer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_animation_1_1_animation_player.html "AnimationPlayer is an AnimationPlayerBase that animates AnimationBlendedProperties.")&gt;</td><td style="width: 52.2652%;">Optional animation played when the indicator is shown.</td></tr><tr><td style="width: 19.5222%;">OffAnimation</td><td style="width: 28.1713%;">Candera::MemoryManagement::SharedPointer&lt;[Candera::Animation::AnimationPlayer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_animation_1_1_animation_player.html "AnimationPlayer is an AnimationPlayerBase that animates AnimationBlendedProperties.")&gt;</td><td style="width: 52.2652%;">Optional animation played when the indicator is hidden.</td></tr><tr><td style="width: 19.5222%;">HideIndicatorOnMove</td><td style="width: 28.1713%;">bool</td><td style="width: 52.2652%;">Hide the touch indicator when a move is detected, otherwise the indicator will stay visible during movement until the finger is lifted from the screen.</td></tr></tbody></table>

</div></div>#### **Transform Mesh2D**

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_transform_mesh2_d_behavior.html)</small>

Performs a perspective projection of a 3D rotated effect (e.g. Bitmap or SolidColor effects) based on the configured origin, rotation and field of view.

This behavior is available for 2D scenes only.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-45"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 23.2386%;">**Property Name**</th><th style="width: 34.7222%;">**Type**</th><th style="width: 42.0392%;">**Description**</th></tr><tr><td style="width: 23.2386%;">Rotation</td><td style="width: 34.7222%;">FeatStd::Float</td><td style="width: 42.0392%;">Defines the rotation angle in degree around configured rotation axis at the configured origin</td></tr><tr><td style="width: 23.2386%;">CameraDistance</td><td style="width: 34.7222%;">FeatStd::Float</td><td style="width: 42.0392%;">Defines a normalized camera distance (the projection is based on a normalized geometry of widht and height 1) with a default value of 1.</td></tr><tr><td style="width: 23.2386%;">FitToMaximumSizeRotation</td><td style="width: 34.7222%;">FeatStd::Float</td><td style="width: 42.0392%;">Defines the rotation angle in degree that will be uses as maximum for the FitToMaximumSize fit strategy. Default is an angle of 90 degree.</td></tr><tr><td style="width: 23.2386%;">RotationAxis</td><td style="width: 34.7222%;">[Candera::Vector3](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_vector3.html "The default Vector3 class.")</td><td style="width: 42.0392%;">Defines the axis (default is the y axis) for the rotation as a 3D direction vector (the vector will be internally normalized).</td></tr><tr><td style="width: 23.2386%;">FieldOfView</td><td style="width: 34.7222%;">FeatStd::Float</td><td style="width: 42.0392%;">The area on the Y axis view field in degrees. It influences the perspective distortion of the projection. Higher angles will result in more distorted projection. Lower angles will result in less perspective distorted projections. The angle has to be higher than 0 and less than 180.</td></tr><tr><td style="width: 23.2386%;">FitStrategy</td><td style="width: 34.7222%;">TransformMesh2DFitStrategy::Enum</td><td style="width: 42.0392%;">Defines how the perspective projected mesh should fit into the original boundaries.</td></tr><tr><td style="width: 23.2386%;">HorizontalOrigin</td><td style="width: 34.7222%;">CgiStudioControl::HorizontalOrigin::Enum</td><td style="width: 42.0392%;">The origin influences where the rotation is performed and how the perspective projection looks. It is defined as a normalized (bitmap resolution independent) origin on the y axis as Left (0), Center (0.5), Right (1.0) or Custom (see CustomHorizontalOrigin).</td></tr><tr><td style="width: 23.2386%;">VerticalOrigin</td><td style="width: 34.7222%;">CgiStudioControl::VerticalOrigin::Enum</td><td style="width: 42.0392%;">The origin influences where the rotation is performed and how the perspective projection looks. It is defined as a normalized (bitmap resolution independent) origin on the y axis as Top (0), Center (0.5), Bottom (1.0) or Custom (see CustomVerticalOrigin).</td></tr><tr><td style="width: 23.2386%;">CustomHorizontalOrigin</td><td style="width: 34.7222%;">FeatStd::Float</td><td style="width: 42.0392%;">Defines a normalized (bitmap resolution independent) custom origin that can not be defined with Left, Center or Right.</td></tr><tr><td style="width: 23.2386%;">CustomVerticalOrigin</td><td style="width: 34.7222%;">FeatStd::Float</td><td style="width: 42.0392%;">Defines a normalized (bitmap resolution independent) custom origin that can not be defined with Top, Center or Bottom.</td></tr><tr><td style="width: 23.2386%;">OriginOffset</td><td style="width: 34.7222%;">[Candera::Vector2](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_vector2.html "The default Vector2 class.")</td><td style="width: 42.0392%;">In addition to the configured normalized origin this pixel based origin offset is added.</td></tr></tbody></table>

</div></div>#### **Event Handler**

Passes a value to a Condition Behavior and if the response is positive, invokes an Action behavior.

**Example Usage**

<div class="contents" id="bkmrk-render-child-nodes-e"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Render Child Nodes Example](https://doc316en.candera.eu/link/572#bkmrk-render-child-nodes-e)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-46"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 15.5748%;">**Property Name**</th><th style="width: 25.1046%;">**Type**</th><th style="width: 59.3206%;">**Description**</th></tr><tr><td style="width: 15.5748%;">Condition</td><td style="width: 25.1046%;">Candera::ConditionBehavior\*</td><td style="width: 59.3206%;">The ConditionBehavior that TriggerBehavior passes a value to and expect a response from to see if Action needs to be invoked.</td></tr><tr><td style="width: 15.5748%;">Actions</td><td style="width: 25.1046%;">ActionBehaviorArrayProperty</td><td style="width: 59.3206%;">The set of ActionBehaviors that TriggerBehavior invokes in the even that it receives a positive response from Condition.</td></tr><tr><td style="width: 15.5748%;">ConsumeEvent  
</td><td style="width: 25.1046%;">bool  
</td><td style="width: 59.3206%;">Set this flag to false if the event should not be consumed by the trigger. By default it is set to true and if the trigger evaluates to true the event will not be routed to any other behavior.</td></tr></tbody></table>

</div></div>#### **Virtual Key**

Receives a Change Value Event with a boolean. True will start emitting Key Events, false will stop emitting Key Events.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-47"><div class="textblock"><table class="doxtable" style="width: 100.494%; height: 88.4001px;"><tbody><tr style="height: 29.4667px;"><th style="width: 17.6705%; height: 29.4667px;">**Property Name**</th><th style="width: 23.598%; height: 29.4667px;">**Type**</th><th style="width: 58.6903%; height: 29.4667px;">**Description**</th></tr><tr><td style="width: 17.6705%;">KeyType  
</td><td style="width: 23.598%;">CgiStudioControl::KeyType::Enum</td><td style="width: 58.6903%;">Choose the type of key. With KeyCode you can select any key.

*Possible values: Modifier, KeyCode*

</td></tr><tr style="height: 29.4667px;"><td style="width: 17.6705%; height: 29.4667px;">KeyCode</td><td style="width: 23.598%; height: 29.4667px;">Candera::KeyboardKeyCode::Enum</td><td style="width: 58.6903%; height: 29.4667px;">With KeyCode you can select any key.

*Possible values: Key\_None, ...&lt;all keyboard key codes&gt;... Key\_OEM8*

*This property is only available if "KeyType" is set to "KeyCode".*

</td></tr><tr><td style="width: 17.6705%; height: 29.4667px;">Modifier</td><td style="width: 23.598%; height: 29.4667px;">Candera::KeyModifierEnum::Enum</td><td style="width: 58.6903%; height: 29.4667px;">Modifier Key (e.g. Shift)

*Possible values: None, Key\_Shift, Key\_Alt, Key\_Ctrl, Key\_CapsLock, Key\_Num*

*This property is only available if "KeyType" is set to "Modifier".*

</td></tr></tbody></table>

</div></div>---

# Demonstration

#### **Demo Mode Action**

Action to start or end the demo mode.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d"><div class="contents"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 18.4102%;">**Property Name**</th><th style="width: 33.1087%;">**Type**</th><th style="width: 48.4399%;">**Description**</th></tr><tr><td style="width: 18.4102%;">Activate</td><td style="width: 33.1087%;">bool</td><td style="width: 48.4399%;">Activates or deactivates a demo mode</td></tr><tr><td style="width: 18.4102%;">DemoModeExecutor</td><td style="width: 33.1087%;">CgiStudioControl::DemoModeBehavior\*</td><td style="width: 48.4399%;">Target demo mode behavior receiving the action</td></tr></tbody></table>

</div></div></div></div>#### **Demo Mode Execution**

Execution of user input simulation.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-1"><div class="contents"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 19.272%;">**Property Name**</th><th style="width: 26.1976%;">**Type**</th><th style="width: 54.4893%;">**Description**</th></tr><tr><td style="width: 19.272%;">ExecutionResource</td><td style="width: 26.1976%;">FeatStd::String</td><td style="width: 54.4893%;">Resource containing the simulation instructions.</td></tr><tr><td style="width: 19.272%;">RestartDelay</td><td style="width: 26.1976%;">FeatStd::UInt32</td><td style="width: 54.4893%;">Delay in milliseconds between each repeat loop.</td></tr></tbody></table>

</div></div></div></div>#### **Demo Mode Changed**

Condition which reacts on 'activated' or 'deactivated' demo mode.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-2"><div class="contents"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%; height: 88.4001px;"><tbody><tr style="height: 29.4667px;"><th style="width: 15.4448%; height: 29.4667px;">**Property Name**</th><th style="width: 30.0239%; height: 29.4667px;">**Type**</th><th style="width: 54.4901%; height: 29.4667px;">**Description**</th></tr><tr style="height: 29.4667px;"><td style="width: 15.4448%; height: 29.4667px;">Activated</td><td style="width: 30.0239%; height: 29.4667px;">bool</td><td style="width: 54.4901%; height: 29.4667px;">Condition matches if input is activated (ON) or deactivated (OFF)</td></tr></tbody></table>

</div></div></div></div>#### **Demo Mode Check Input type**

Condition behavior which reacts on input in respect of whether it is simulated input or not.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-3"><div class="contents"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 15.4448%;">**Property Name**</th><th style="width: 30.0247%;">**Type**</th><th style="width: 54.4893%;">**Description**</th></tr><tr><td style="width: 15.4448%;">SimulatedInput</td><td style="width: 30.0247%;">bool</td><td style="width: 54.4893%;">Condition matches if input is simulated (ON) or user generated (OFF)</td></tr><tr><td style="width: 15.4448%;">MatchOnHover</td><td style="width: 30.0247%;">bool</td><td style="width: 54.4893%;">Condition matches in case of hover input (ON) or not (OFF)</td></tr></tbody></table>

</div></div></div></div>#### **Demo Mode Record Action**

Action to start or end the demo mode recording.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-4"><div class="contents"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%; height: 105.2px;"><tbody><tr style="height: 29.4667px;"><th style="width: 18.2867%; height: 29.4667px;">**Property Name**</th><th style="width: 38.056%; height: 29.4667px;">**Type**</th><th style="width: 43.6161%; height: 29.4667px;">**Description**</th></tr><tr style="height: 29.4667px;"><td style="width: 18.2867%; height: 29.4667px;">Activate</td><td style="width: 38.056%; height: 29.4667px;">bool</td><td style="width: 43.6161%; height: 29.4667px;">Activates or deactivates a demo mode recording</td></tr><tr style="height: 46.2667px;"><td style="width: 18.2867%; height: 46.2667px;">DemoModeRecorder</td><td style="width: 38.056%; height: 46.2667px;">CgiStudioControl::DemoModeRecordBehavior\*</td><td style="width: 43.6161%; height: 46.2667px;">Target demo mode record behavior receiving the action.</td></tr></tbody></table>

</div></div></div></div>#### **Demo Mode Recording**

Execution of user input recording.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-5"><div class="contents"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 15.4448%;">**Property Name**</th><th style="width: 30.0239%;">**Type**</th><th style="width: 54.4901%;">**Description**</th></tr><tr><td style="width: 15.4448%;">OutputFilePath</td><td style="width: 30.0239%;">FeatStd::String</td><td style="width: 54.4901%;">Location in which the output shall be stored.</td></tr></tbody></table>

</div></div></div></div>

# External Resource

This page explains how to use the behaviors that operate on external resources (such as images) located **outside** the Scene Composer solution: External Bitmap Provider, Set External Bitmap and Check External Resource Change.

<p class="callout info">For how to reference external resource files, see <span style="color: rgb(230, 126, 35);">[Referencing external resource](https://doc316en.candera.eu/books/scene-design/page/referencing-external-resource)</span>.</p>

A new **FileSystemResourceManager** (identified as `FileSystem`) has been introduced, extending the functionality of the **External Resource Behaviors** (such as `Set External Bitmap` and `External Bitmap Provider`), **removing execution device restrictions**. These behaviors are now available across **all platforms**. This allows users to dynamically load image files, such as PNG and JPEG files, from the file system at runtime using **relative paths**, without embedding them in the asset binary file. This functionality is primarily used for setting images on **2D Bitmap Nodes**. Since the `ExternalResourceManager ID` property defaults to `AndroidSystem`, users must **manually enter "FileSystem"** as the value to enable file system resource support.

For further details and limitations, please refer to the <span style="color: rgb(230, 126, 35);">[External Image Behavior](https://doc316en.candera.eu/books/controls-and-behaviors/page/external-image-behaviour)</span> page.

#### Use cases

- **Render external images:** Preview images residing under an Android Studio project in Scene Composer and verify the display in Player.
- **Switch the displayed image from the UI:** Attach <span style="color: rgb(230, 126, 35);">[External Bitmap Provider](#bkmrk-external-bitmap-prov)</span> to a bitmap node, then use a button with <span style="color: rgb(230, 126, 35);">[Set External Bitmap](#bkmrk-set-external-bitmap)</span> to switch the image according to `ExternalResourceId`.
- **Detect external-resource changes:** Use <span style="color: rgb(230, 126, 35);">[Check External Resource Change](#bkmrk-check-external-resou)</span> to detect changes in the external resource setup and reload cached external objects as needed.

---

#### Action External Resource Behavior

##### Set External Bitmap

Sets ExternalResourceId and ExternalResourceManagerId properties of an associated ExternalBitmapProvider when its action is triggered.

**Common Properties**

<table border="1" id="bkmrk-property-name-type-d" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 33.3745%;"></col><col style="width: 27.3177%;"></col><col style="width: 39.4314%;"></col></colgroup><tbody><tr><th>**Property Name**</th><th>**Type**</th><th>**Description**</th></tr><tr><td>ExternalResourceId</td><td>String</td><td>Full path to resource. (A unique ID to be provided.)

If the **ExternalResourceManagerId** is *Android*, provide the full path to the resource (a unique ID should be specified).

If the **ExternalResourceManagerId** is *FileSystemExternal*, provide the file system path in .*png* or *.jpg* format.

</td></tr><tr><td>ExternalResourceManagerId</td><td>String</td><td>External resource manager ID. (e.g., *Android*, *FileSystem*) used to retrieve the external resource.

</td></tr><tr><td>ImageProvider</td><td>ExternalBitmapProviderBehavior\*</td><td>External Bitmap Provider Behavior which sets an external image on a node and is the target receiving set resource on action.

</td></tr></tbody></table>


#### Condition External Resource Behavior

##### Check External Resource Change

Checks is external resource setup changed if test pass need to reload extand whole cache for external objects needs reload.

Reacts on ExternalResourceEvent if and only if the ExternalResourceId and ExternalResourceManagerId of the event match the condition’s properties, triggering the associated action.

**Common Properties**

<table border="1" id="bkmrk-property-name-type-d-1" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 33.3745%;"></col><col style="width: 27.3177%;"></col><col style="width: 39.4314%;"></col></colgroup><tbody><tr><th>**Property Name**</th><th>**Type**</th><th>**Description**</th></tr><tr><td>ExternalResourceId</td><td>String</td><td>External resource name ID. (A unique ID to be provided.)  
</td></tr><tr><td>ExternalResourceManagerId</td><td>String</td><td>External resource manager ID. (A unique ID to retrieve the external resource from.)

</td></tr></tbody></table>




#### Value Processing External Resource Behavior

##### External Bitmap Provider

<span lang="EN-US">Sets an image on a Render Node based on External resource Id. Retrieves an external bitmap with ExternalResourceId from an external resource provider with ExternalResourceManagerId and provides the bitmap to an associated bitmap node.</span>

**Common Properties**

<table border="1" id="bkmrk-property-name-type-d-2" style="border-collapse: collapse; width: 100%; height: 169.563px;"><colgroup><col style="width: 33.3745%;"></col><col style="width: 27.3177%;"></col><col style="width: 39.4314%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><th style="height: 29.7969px;">**Property Name**</th><th style="height: 29.7969px;">**Type**</th><th style="height: 29.7969px;">**Description**</th></tr><tr style="height: 80.1719px;"><td style="height: 80.1719px;">TargetNode</td><td style="height: 80.1719px;">Candera::AbstractNodePointer</td><td style="height: 80.1719px;">The Node which is modified. If not set, then the node where the behavior is attached to, will be modified.

</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">ExternalResourceId</td><td style="height: 29.7969px;">String</td><td style="height: 29.7969px;">Full path to resource. (A unique id of an external resource to be provided.)

If the **ExternalResourceManagerId** is *Android*, provide the full path to the resource (a unique ID should be specified).

If the **ExternalResourceManagerId** is *FileSystemExternal*, provide the file system path in \*.\**png* or *.jpg* format.

</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">ExternalResourceManagerId</td><td style="height: 29.7969px;">String</td><td style="height: 29.7969px;">External resource manager ID. (e.g., *Android*, *FileSystem*) used to retrieve the external resource.

</td></tr></tbody></table>

---

#### Example Usage of External Resource Behaviors

Here is an example of the use of each External Resource behavior.

#### How to reference external resources

For information on referencing external resource files, see <span style="color: rgb(230, 126, 35);">[Referencing external resource](https://doc316en.candera.eu/books/scene-design/page/referencing-external-resource)</span>. The following usage example uses an external resource that was loaded into the solution during this operation.

#### External Bitmap Provider

1. Drag and drop the \[ Node 2D &gt; Bitmap Node \] from the toolbox onto the scene editor, or the scene tree.
2. Attach \[ Behavior &gt; External Resource &gt; Value Processing &gt; External Bitmap Provider \] in the Toolbox to the Behavior in the Extra Scene Tree of the placed bitmap node by drag-and-drop operation.  
    <div drawio-diagram="8560"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-09/drawing-4-1757035722.png" alt=""/></div>
3. Click ***External Bitmap Provider*** behavior and and specify the target image file to ExternalResourceId in the properties panel that appears. ExternalResourceId can be set in the following two ways. 
    1. - Enter the resource ID directly into the ExternalResourceId text box.
        - Press the select item button on the right side of ExternalResourceId, select the target file from the displayed dialog box, and press the \[ OK \] button.  
            <div drawio-diagram="8547"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-09/drawing-4-1756710241.png" alt=""/></div>
4. The selected external resource will appear in the scene editor. 
    - Save the solution and launch Player to confirm that this external resource is displayed.


#### Set External Bitmap

1. Drag and drop the \[ Node 2D &gt; Bitmap Node \] from the toolbox onto the scene editor, or the scene tree.
2. Attach \[ Behavior &gt; External Resource &gt; Value Processing &gt; External Bitmap Provider \] in the Toolbox to the Behavior in the Extra Scene Tree of the placed bitmap node by drag-and-drop operation.  
    <div drawio-diagram="8548"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-09/drawing-4-1756710276.png" alt=""/></div>
3. Drag and drop the \[ Controls &gt; Touchable &gt; Button \] from the toolbox onto the scene editor, or the scene tree. Take place this operation twice (add two button control nodes).
4. Attach \[ Behavior &gt; External Resource &gt; Action &gt; Set External Bitmap \] in the Toolbox to the Actions in the Extra Scene Tree of the placed Button control nodes by drag-and-drop operation.  
    <div drawio-diagram="8550"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-09/drawing-4-1756710338.png" alt=""/></div>
5. Select the Button control, then select the Set External Bitmap behavior in the Extra Scene tree that appears.
6. Click the select item button on the ImageProvider in the properties panel that appears and select the External Bitmap Provider connected to the BitmapNode (this operation is performed for the two Button controls).  
    <div drawio-diagram="8551"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-09/drawing-4-1756710563.png" alt=""/></div>
7. Select the Button control, then select the Set External Bitmap behavior in the Extra Scene tree that appears.
8. Click the select item button on the ExternalResourceId in the properties panel that appears and select the External Bitmap Provider connected to the BitmapNode (this operation is performed for the two Button controls).  
    <div drawio-diagram="8552"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-09/drawing-4-1756710635.png" alt=""/></div>
9. Run the player and press the placed buttons. By pressing each button, the image specified in Set External Bitmap will be displayed.   
    <div drawio-diagram="3911"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-06/drawing-4-1686892990.png" alt=""/></div>

#### Check External Resource Change

1. Drag and drop the \[ Node 2D &gt; Bitmap Node \] from the toolbox onto the scene editor, or the scene tree.
2. Attach \[ Behavior &gt; External Resource &gt; Value Processing &gt; External Bitmap Provider \] in the Toolbox to the Behavior in the Extra Scene Tree of the placed bitmap node by drag-and-drop operation.
3. <span lang="EN-US" style="mso-ansi-language: EN-US;"><span lang="EN-US" style="mso-ansi-language: EN-US;">Select Scene2D in the scene tree and attach \[ Behaviors &gt; Control &gt; Event Handler \] to the displayed extra scene tree by drag-and-drop operation.  
    </span></span><div drawio-diagram="8553"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-09/drawing-4-1756710711.png" alt=""/></div>
    
    <span lang="EN-US" style="mso-ansi-language: EN-US;">  
      
    </span>
4. Select the Scene2D in the scene tree, in the displayed extra scene tree, attach \[ Behavior &gt; External Resource &gt; Condition &gt; Check External Resource Change \] to the Condition of the Event Handler by drag-and-drop operation.  
    <div drawio-diagram="8554"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-09/drawing-4-1756710806.png" alt=""/></div>
5. Select the Scene2D in the scene tree, in the displayed extra scene tree, attach \[ Behavior &gt; External Resource &gt; Action &gt; Set External Bitmap \] to the Actions of the Event Handler by drag-and-drop operation.  
    <div drawio-diagram="8555"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-09/drawing-4-1756710880.png" alt=""/></div>
6. Select the Set External Bitmap behavior you added.
7. <span lang="EN-US" style="font-size: 11.0pt; line-height: 107%; font-family: 'Calibri',sans-serif; mso-ascii-theme-font: minor-latin; mso-fareast-font-family: 游明朝; mso-fareast-theme-font: minor-fareast; mso-hansi-theme-font: minor-latin; mso-bidi-font-family: 'Times New Roman'; mso-bidi-theme-font: minor-bidi; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA;"><span lang="EN-US" style="font-size: 11.0pt; line-height: 107%; font-family: 'Calibri',sans-serif; mso-ascii-theme-font: minor-latin; mso-fareast-font-family: 游明朝; mso-fareast-theme-font: minor-fareast; mso-hansi-theme-font: minor-latin; mso-bidi-font-family: 'Times New Roman'; mso-bidi-theme-font: minor-bidi; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA;">Click the select item button on the ImageProvider in the properties panel that appears and select the External Bitmap Provider connected to the BitmapNode.  
    </span></span><div drawio-diagram="8556"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-09/drawing-4-1756711003.png" alt=""/></div>
    
    <span lang="EN-US" style="font-size: 11.0pt; line-height: 107%; font-family: 'Calibri',sans-serif; mso-ascii-theme-font: minor-latin; mso-fareast-font-family: 游明朝; mso-fareast-theme-font: minor-fareast; mso-hansi-theme-font: minor-latin; mso-bidi-font-family: 'Times New Roman'; mso-bidi-theme-font: minor-bidi; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA;">  
    </span>
8. Select the Set External Bitmap behavior you added.
9. Click External Bitmap Provider behavior and and specify the target image file to ExternalResourceId in the properties panel that appears. ExternalResourceId can be set in the following two ways. 
    - Enter the resource ID directly into the ExternalResourceId text box.
    - Press the select item button on the right side of ExternalResourceId, select the target file from the displayed dialog box, and press the \[ OK \] button.
10. Select Check External Resource Change in the Event Handler.
11. Click the Select Item button for ExternalResourceId in the Properties panel that appears and select any external resource specified in step 9.
12. Each time the image definition is changed, the displayed image should be updated.

# Graph

#### **Bar Graph**

Creates a bar graph based on a provided list of numeric values, with configurable bar width, height, spacing between bars, and color for each value. This behavior is available for 2D scenes only.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d"><div class="textblock"><table class="doxtable"><tbody><tr><th>**Property Name**</th><th>**Type**</th><th>**Description**</th></tr><tr><td>TemplateNode  
</td><td>  
</td><td>  
</td></tr><tr><td>BarWidth</td><td>FeatStd::UInt16</td><td>Width of each bar.</td></tr><tr><td>BarHeight</td><td>FeatStd::UInt16</td><td>Height of each bar.</td></tr><tr><td>SpaceWidth</td><td>FeatStd::UInt16</td><td>Width of space between each bar.</td></tr><tr><td>Color</td><td>[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td>Color of bars.</td></tr><tr><td>Value List</td><td>Courier::ListPropertyType&lt; FeatStd::Float &gt;</td><td>List of values.</td></tr></tbody></table>

</div></div>#### **Line Graph**

Draws a 2D line using a list of values with a specified width and color. Displays the result in the scene. Can be attached to a group node. This behavior is available for 2D scenes only.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-1"><div class="contents"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 17.1817%;">**Property Name**</th><th style="width: 28.3043%;">**Type**</th><th style="width: 54.514%;">**Description**</th></tr><tr><td style="width: 17.1817%;">Values</td><td style="width: 28.3043%;">Courier::ListPropertyType&lt; Candera::Vector2 &gt;</td><td style="width: 54.514%;">List of values which will create the graph.</td></tr><tr><td style="width: 17.1817%;">MinX</td><td style="width: 28.3043%;">FeatStd::Optional&lt;FeatStd::Float&gt;</td><td style="width: 54.514%;">The minimal X value restricts the graph's X value range and creates its lower bounds.</td></tr><tr><td style="width: 17.1817%;">MaxX</td><td style="width: 28.3043%;">FeatStd::Optional&lt;FeatStd::Float&gt;</td><td style="width: 54.514%;">The maximal X value restricts the graph's X value range and creates its upper bounds.</td></tr><tr><td style="width: 17.1817%;">MinY</td><td style="width: 28.3043%;">FeatStd::Optional&lt;FeatStd::Float&gt;</td><td style="width: 54.514%;">The minimal Y value restricts the graph's Y value range and creates its lower bounds.</td></tr><tr><td style="width: 17.1817%;">MaxY</td><td style="width: 28.3043%;">FeatStd::Optional&lt;FeatStd::Float&gt;</td><td style="width: 54.514%;">The maximal Y value restricts the graph's Y value range and creates its upper bounds.</td></tr><tr><td style="width: 17.1817%;">Line Width</td><td style="width: 28.3043%;">FeatStd::Float</td><td style="width: 54.514%;">The line width defines the thickness of the line.</td></tr><tr><td style="width: 17.1817%;">Interpolation</td><td style="width: 28.3043%;">GraphInterpolationType::Enum</td><td style="width: 54.514%;">Defines the interpolation type of the line chart.</td></tr><tr><td style="width: 17.1817%;">Interpolation Steps</td><td style="width: 28.3043%;">FeatStd::UInt16</td><td style="width: 54.514%;">Defines the amount of interpolation points between each value. This increase the spline resolution by the cost of performance and memory.</td></tr><tr><td style="width: 17.1817%;">Color of line</td><td style="width: 28.3043%;">[Candera::Color](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_color.html "Represents a color by its red-, green-, blue- and alpha-value. Provides color arithmetic functions an...")</td><td style="width: 54.514%;">Color of line.</td></tr></tbody></table>

</div></div></div></div>

# IdentifierValueMap

Behaviors that can be used to check for certain keys and values in IdentifierValueMapEvents and execute actions accordingly. Such events are sent from application code to the node or behavior.

#### **Mapped Value Action**

Extracts and sends the value from a key-value pair inside an incoming map as value changed event.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d"><div class="contents"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 18.4132%;">**Property Name**</th><th style="width: 27.4401%;">**Type**</th><th style="width: 54.1219%;">**Description**</th></tr><tr><td style="width: 18.4132%;">TargetNode</td><td style="width: 27.4401%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html)</td><td style="width: 54.1219%;">The Node which is modified. If not set, then the node where the behavior is attached to, will be modified.</td></tr><tr><td style="width: 18.4132%;">Keyword</td><td style="width: 27.4401%;">FeatStd::String</td><td style="width: 54.1219%;">Specifies the keyword of the map entry which value should be sent as value changed event.</td></tr></tbody></table>

</div></div></div></div>**Advanced Properties**

<table class="doxtable" id="bkmrk-property-name-type-d-1" style="width: 100%;"><tbody><tr><th style="width: 18.4132%;">**Property Name**</th><th style="width: 27.9292%;">**Type**</th><th style="width: 53.6329%;">**Description**</th></tr><tr><td style="width: 18.4132%;">Action</td><td style="width: 27.9292%;">Candera::ActionBehaviorArrayProperty</td><td style="width: 53.6329%;">The set of ActionBehaviors that receive the value changed event.</td></tr></tbody></table>

#### <span style="color: rgb(0, 0, 0);">**Mapped Key Condition**</span>

Checks the key from a key-value pair inside an incoming Identifier Value Map Event.

**Common Properties**

<div class="textblock" id="bkmrk-"></div><div class="textblock" id="bkmrk-property-name-type-d-2"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 18.4132%;">**Property Name**</th><th style="width: 27.9339%;">**Type**</th><th style="width: 53.6281%;">**Description**</th></tr><tr><td style="width: 18.4132%;">Keyword</td><td style="width: 27.9339%;">FeatStd::String</td><td style="width: 53.6281%;">Specifies the keyword which shall be present in the map.</td></tr><tr><td style="width: 18.4132%;">ValueCondition</td><td style="width: 27.9339%;">Candera::ConditionBehavior</td><td style="width: 53.6281%;">Condition which is checked on the value of matching keyword. The value can be checked by "Check Value Changed".</td></tr></tbody></table>

</div><div class="textblock" id="bkmrk--2"></div><div class="textblock" id="bkmrk--3"></div>

# Layer

#### **Switch Layer Image**

Sets on an Image Layer. This special functionality is only available for Amber and Traveo2 platform due to hardware support.

This behavior is available for 2D scenes only.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d"><div class="contents"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 15.4448%;">**Property Name**</th><th style="width: 30.0239%;">**Type**</th><th style="width: 54.4901%;">**Description**</th></tr><tr><td style="width: 15.4448%;">Images</td><td style="width: 30.0239%;">SharedPointer&lt;Candera::Image2D&gt; </td><td style="width: 54.4901%;">Images: [Candera](http://dev.doc.cgistudio.at/APILINK/namespace_candera.html "[DataBinding_RefTypeSample]"):ArrayProperty&lt;FeatStd::MemoryManagement::SharedPointer&lt;Candera::Image2d&gt;&gt;.</td></tr><tr><td style="width: 15.4448%;">Rendertarget</td><td style="width: 30.0239%;">RenderTarget2D\*</td><td style="width: 54.4901%;">Rendertarget:Candera::RenderTarget2D\*.</td></tr></tbody></table>

</div></div></div></div><div class="contents" id="bkmrk--1"><div class="contents"><div class="textblock">---

</div></div></div>

# Map

#### **Geocoding**

Provides forward and reverse geocoding functionality.

**About implicit roles of ChildNodes**

- For forward geocoding the text from a child node with name "Name" is used.
- For backward geocoding the text from a child node with name "Address" is used.
- The child nodes should be of type Node2D with one child TextNode2D.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d"><div class="contents"><div class="contents"><div class="contents"><div class="textblock"><table class="doxtable"><tbody><tr><th>**Property Name**</th><th>**Type**</th><th>**Description**</th></tr><tr><td>LocationList</td><td>Candera::AbstractNodePointer</td><td>List to populate with matched locations.</td></tr><tr><td>ItemTemplate</td><td>Candera::AbstractNodePointer</td><td>Template used to populate the list.</td></tr><tr><td>MaxItems</td><td>FeatStd::Int16</td><td>Maximum number of matches to show.</td></tr><tr><td>DelayBetweenRequests</td><td>FeatStd::UInt32</td><td>Number of milliseconds to wait between geocoding requests.</td></tr></tbody></table>

</div></div></div></div></div>

# Mixed Reality Behaviors

### Internal

#### Poi Metadata Handler

Behavior that handles the meta data of a single poi.

This behavior is available for 3D scenes only.

**Common Properties**

<table class="doxtable" id="bkmrk-property-name-type-d" style="width: 100%;"><tbody><tr><th style="width: 16.804%;">**Property Name**</th><th style="width: 38.3031%;">**Type**</th><th style="width: 44.9753%;">**Description**</th></tr><tr><td style="width: 16.804%;">IconNodes</td><td style="width: 38.3031%;">ArrayProperty&lt;Candera::AbstractNodePointer&gt;</td><td style="width: 44.9753%;">A process value event is sent to this nodes, if a respective poi update event arrives.</td></tr><tr><td style="width: 16.804%;">NameNodes  
</td><td style="width: 38.3031%;">ArrayProperty&lt;Candera::AbstractNodePointer&gt;</td><td style="width: 44.9753%;">A process value event is sent to this nodes, if a respective poi update event arrives.</td></tr><tr><td style="width: 16.804%;">OpenNowNodes  
</td><td style="width: 38.3031%;">ArrayProperty&lt;Candera::AbstractNodePointer&gt;</td><td style="width: 44.9753%;">A process value event is sent to this nodes, if a respective poi update event arrives.</td></tr><tr><td style="width: 16.804%;">RatingNodes  
</td><td style="width: 38.3031%;">ArrayProperty&lt;Candera::AbstractNodePointer&gt;</td><td style="width: 44.9753%;">A process value event is sent to this nodes, if a respective poi update event arrives.</td></tr><tr><td style="width: 16.804%;">PriceLevelNodes  
</td><td style="width: 38.3031%;">ArrayProperty&lt;Candera::AbstractNodePointer&gt;</td><td style="width: 44.9753%;">A process value event is sent to this nodes, if a respective poi update event arrives.</td></tr><tr><td style="width: 16.804%;">InfoTextNodes  
</td><td style="width: 38.3031%;">ArrayProperty&lt;Candera::AbstractNodePointer&gt;</td><td style="width: 44.9753%;">A process value event is sent to this nodes, if a respective poi update event arrives.</td></tr></tbody></table>

---

#### Distance Alpha Fading

**Description**

Distance Alpha Fading is a Behavior Building Block available in Construction Kit.

It receives a value representing the camera position and performs arithmetic operations on it to calculate target node alpha value.

The following operations are performed on input value:

<div class="contents" id="bkmrk-map-%28scale%29-value-fr"><div class="contents"><div class="textblock">- Map (scale) value from initial range (default 0.00..100.00) to target range (default 0.00..1.00)
- Negate scaled value (changes the range to 0.00..-1.00) by multiplication (default multiplicand is -1.00)
- Increase negated value (changes the range to 1.00..0.00) by addition (default addend is +1.00)
- Sets calculated alpha value on target node using <span style="color: rgb(230, 126, 35);">[Set Alpha Value](https://doc316en.candera.eu/link/647#bkmrk-set-alpha-value)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-0"><div class="textblock"><table class="doxtable"><tbody><tr><th>**Property Name**</th><th>**Type**</th><th>**Description**</th></tr><tr><td>Input Min</td><td>FeatStd::Optional&lt;FeatStd::Variant&gt;  
</td><td>This minimum value has to be set for input value scaling to take effect.

*FeatStd::Float expected.*

</td></tr><tr><td>Input Max</td><td>FeatStd::Optional&lt;FeatStd::Variant&gt;  
</td><td>This maximum value has to be set for input value scaling to take effect.

*FeatStd::Float expected.*

</td></tr><tr><td>Multiplication Value</td><td>[FeatStd::Variant](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_variant.html)  
</td><td>Multiplies received value by this number (after scaling).

*FeatStd::Float expected.*

</td></tr><tr><td>Addition Value</td><td>[FeatStd::Variant](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_variant.html)  
</td><td>Adds this number to received value (after multiplication).

*FeatStd::Float expected.*

</td></tr><tr><td>Target Node</td><td>[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td>Target node that will have its alpha value set.</td></tr></tbody></table>

</div></div>#### Navigation Path

Registers to navigation points and displays them as mesh in world space.

This behavior is available for 3D scenes only.

**Common Properties**

<table class="doxtable" id="bkmrk-property-name-type-d-1" style="width: 100%; height: 385.734px;"><tbody><tr style="height: 29.4667px;"><th style="width: 19.028%; height: 29.4667px;">**Property Name**</th><th style="width: 30.1483%; height: 29.4667px;">**Type**</th><th style="width: 50.9061%; height: 29.4667px;">**Description**</th></tr><tr style="height: 57.4667px;"><td style="width: 19.028%; height: 57.4667px;">ColorMode</td><td style="width: 30.1483%; height: 57.4667px;">ColorMode::Enum</td><td style="width: 50.9061%; height: 57.4667px;">Select how color is displayed.

*Possible values: Color, RGBA*

</td></tr><tr style="height: 29.4667px;"><td style="width: 19.028%; height: 29.4667px;">Color  
</td><td style="width: 30.1483%; height: 29.4667px;">Candera::Color</td><td style="width: 50.9061%; height: 29.4667px;">Determines the color of the mesh.  
</td></tr><tr style="height: 29.4667px;"><td style="width: 19.028%; height: 29.4667px;">Width  
</td><td style="width: 30.1483%; height: 29.4667px;">FeatStd::Float</td><td style="width: 50.9061%; height: 29.4667px;">Determines the width of the mesh.</td></tr><tr style="height: 29.4667px;"><td style="width: 19.028%; height: 29.4667px;">Length  
</td><td style="width: 30.1483%; height: 29.4667px;">FeatStd::Float</td><td style="width: 50.9061%; height: 29.4667px;">Determines the length of the mesh</td></tr><tr style="height: 29.4667px;"><td style="width: 19.028%; height: 29.4667px;">YOffset  
</td><td style="width: 30.1483%; height: 29.4667px;">FeatStd::Float</td><td style="width: 50.9061%; height: 29.4667px;">Applies y-offset to the mesh.</td></tr><tr style="height: 63.0667px;"><td style="width: 19.028%; height: 63.0667px;">InputPoints  
</td><td style="width: 30.1483%; height: 63.0667px;">ListPropertyType&lt; CgiStudioControl::Internal::AR::ArPoint&gt;</td><td style="width: 50.9061%; height: 63.0667px;">This property is used to bind input points.</td></tr><tr style="height: 29.4667px;"><td style="width: 19.028%; height: 29.4667px;">InputPointHandling  
</td><td style="width: 30.1483%; height: 29.4667px;">InputPointHandling::Enum</td><td style="width: 50.9061%; height: 29.4667px;">Determines how new input points are used for the mesh.

*Possible values. Attach, Replace*

</td></tr><tr style="height: 29.4667px;"><td style="width: 19.028%; height: 29.4667px;">InterpolationType  
</td><td style="width: 30.1483%; height: 29.4667px;">InterpolationType::Enum</td><td style="width: 50.9061%; height: 29.4667px;">Determines which interpolation method is used.

*Possible values: Linear, Bezier, Spline, None*

</td></tr><tr style="height: 29.4667px;"><td style="width: 19.028%; height: 29.4667px;">MeshType  
</td><td style="width: 30.1483%; height: 29.4667px;">MeshType::Enum</td><td style="width: 50.9061%; height: 29.4667px;">Determines which primitive type is used.

*Possible values: Solid, Points*

</td></tr><tr style="height: 29.4667px;"><td style="width: 19.028%; height: 29.4667px;">IsAdvanced  
</td><td style="width: 30.1483%; height: 29.4667px;">bool  
</td><td style="width: 50.9061%; height: 29.4667px;">Enables advanced settings of the behavior.</td></tr></tbody></table>

**Advanced Properties**

<table class="doxtable" id="bkmrk-property-name-type-d-2" style="width: 100%;"><tbody><tr><th style="width: 20.1391%;">**Property Name**</th><th style="width: 18.4111%;">**Type**</th><th style="width: 61.5321%;">**Description**</th></tr><tr><td style="width: 20.1391%;">Red  
</td><td style="width: 18.4111%;">FeatStd::UInt32</td><td style="width: 61.5321%;">Red color channel.

*This property is only available if 'ColorMode' is set to 'RGBA'.*

</td></tr><tr><td style="width: 20.1391%;">Green  
</td><td style="width: 18.4111%;">FeatStd::UInt32</td><td style="width: 61.5321%;">Green color channel.

*This property is only available if 'ColorMode' is set to 'RGBA'.*

</td></tr><tr><td style="width: 20.1391%;">Blue  
</td><td style="width: 18.4111%;">FeatStd::UInt32</td><td style="width: 61.5321%;">Blue color channel.

*This property is only available if 'ColorMode' is set to 'RGBA'.*

</td></tr><tr><td style="width: 20.1391%;">Alpha  
</td><td style="width: 18.4111%;">FeatStd::UInt32</td><td style="width: 61.5321%;">Alpha color channel.

*This property is only available if 'ColorMode' is set to 'RGBA'.*

</td></tr><tr><td style="width: 20.1391%;">InputPointMinDistance  
</td><td style="width: 18.4111%;">FeatStd::Float</td><td style="width: 61.5321%;">Minimum distance of two control points. Input points that are closer together will be rejected.

*This property is only available if 'IsAdvanced' is checked.*

</td></tr><tr><td style="width: 20.1391%;">ReqFragmentSize  
</td><td style="width: 18.4111%;">FeatStd::SizeType</td><td style="width: 61.5321%;">Size of the fragment that is requested from the input point list.

*This property is only available if 'IsAdvanced' is checked.*

</td></tr><tr><td style="width: 20.1391%;">ReqThresholdDistance  
</td><td style="width: 18.4111%;">FeatStd::Float</td><td style="width: 61.5321%;">If the distance between camera and the last point is below this threshold, request a new fragment of input points.

*This property is only available if 'IsAdvanced' is checked.*

</td></tr><tr><td style="width: 20.1391%;">PointSize  
</td><td style="width: 18.4111%;">FeatStd::Float</td><td style="width: 61.5321%;">Determines the point size.

*This property is only available if 'MeshType' is set to 'Points'.*

</td></tr><tr><td style="width: 20.1391%;">NumOfRowsPerInputPoint  
</td><td style="width: 18.4111%;">FeatStd::UInt32</td><td style="width: 61.5321%;">Determines how many vertex rows are used to interpolate between two input points. Increasing this value makes the mesh smoother, but will also shorten the distance of the overlay, as number of vertices per row remain constant.

*This property is only available if 'IsAdvanced' is checked and 'InterpolationType' is set to 'None'.*

</td></tr><tr><td style="width: 20.1391%;">NumOfVertexRows  
</td><td style="width: 18.4111%;">FeatStd::UInt32</td><td style="width: 61.5321%;">Amount of vertical vertices in the mesh.

*This property is only available if 'IsAdvanced' is checked.*

</td></tr><tr><td style="width: 20.1391%;">NumOfVertexColums  
</td><td style="width: 18.4111%;">FeatStd::UInt32</td><td style="width: 61.5321%;">Amount of horizontal vertices in the mesh.

*This property is only available if 'IsAdvanced' is checked.*

</td></tr></tbody></table>

#### Poi Configuration

Behavior that configures the mapping of a name to a assetId, such that it can be found by the PoiFactory.

This behavior is available for 3D scenes only.

**Common Properties**

<table class="doxtable" id="bkmrk-property-name-type-d-3" style="width: 100%; height: 88.4001px;"><tbody><tr style="height: 29.4667px;"><th style="width: 19.0228%; height: 29.4667px;">**Property Name**</th><th style="width: 33.9838%; height: 29.4667px;">**Type**</th><th style="width: 47.0758%; height: 29.4667px;">**Description**</th></tr><tr style="height: 29.4667px;"><td style="width: 19.0228%; height: 29.4667px;">PoiName</td><td style="width: 33.9838%; height: 29.4667px;">FeatStd::UInt32</td><td style="width: 47.0758%; height: 29.4667px;">Name of this poi.</td></tr><tr style="height: 29.4667px;"><td style="width: 19.0228%; height: 29.4667px;">PoiControlAssetId  
</td><td style="width: 33.9838%; height: 29.4667px;">FeatStd::UInt32</td><td style="width: 47.0758%; height: 29.4667px;">ID of the control that is associated with PoiName.</td></tr></tbody></table>

#### Poi Manager

Manager of the poi control nodes.

This behavior is available for 3D scenes only.

**Common Properties**

<table class="doxtable" id="bkmrk-property-name-type-d-4" style="width: 100%; height: 227.2px;"><tbody><tr style="height: 29.4667px;"><th style="width: 21.4971%; height: 29.4667px;">**Property Name**</th><th style="width: 31.5094%; height: 29.4667px;">**Type**</th><th style="width: 47.0758%; height: 29.4667px;">**Description**</th></tr><tr style="height: 46.2667px;"><td style="width: 21.4971%; height: 46.2667px;">StreetPoints</td><td style="width: 31.5094%; height: 46.2667px;">ListPropertyType&lt;CgiStudioControl::Internal::AR::ArPoint&gt;</td><td style="width: 47.0758%; height: 46.2667px;">List of points of the street. Used to align the rotation of POIs.</td></tr><tr style="height: 46.2667px;"><td style="width: 21.4971%; height: 46.2667px;">StreetPointsMinDistance</td><td style="width: 31.5094%; height: 46.2667px;">FeatStd::Float</td><td style="width: 47.0758%; height: 46.2667px;">Minimum distance between two street points. Street points that are closer together will be rejected.</td></tr><tr style="height: 29.4667px;"><td style="width: 21.4971%; height: 29.4667px;">ReqDistance</td><td style="width: 31.5094%; height: 29.4667px;">FeatStd::Float</td><td style="width: 47.0758%; height: 29.4667px;">The distance in which POIs are requested from the model.</td></tr><tr style="height: 46.2667px;"><td style="width: 21.4971%; height: 46.2667px;">ReqThresholdDistance</td><td style="width: 31.5094%; height: 46.2667px;">FeatStd::Float</td><td style="width: 47.0758%; height: 46.2667px;">Once the camera has moved this specified distance a new request will be sent.</td></tr><tr style="height: 29.4667px;"><td style="width: 21.4971%; height: 29.4667px;">PoiMetaData</td><td style="width: 31.5094%; height: 29.4667px;">ArrayProperty&lt;FeatStd::String&gt;</td><td style="width: 47.0758%; height: 29.4667px;">Use databinding to receive metadata updates for the POIs</td></tr></tbody></table>

#### Pose Tracking

Behavior that sets the pose of a target node.

This behavior is available for 3D scenes only.

**Common Properties**

<table class="doxtable" id="bkmrk-property-name-type-d-5" style="width: 100%;"><tbody><tr><th style="width: 19.0228%;">**Property Name**</th><th style="width: 33.9838%;">**Type**</th><th style="width: 47.0758%;">**Description**</th></tr><tr><td style="width: 19.0228%;">Position</td><td style="width: 33.9838%;">Candera::Vector3</td><td style="width: 47.0758%;">Position on the target node.</td></tr><tr><td style="width: 19.0228%;">Rotation</td><td style="width: 33.9838%;">Candera::Vector3</td><td style="width: 47.0758%;">Rotation on the target node.</td></tr><tr><td style="width: 19.0228%;">EnableUserControl</td><td style="width: 33.9838%;">bool  
</td><td style="width: 47.0758%;">Enable to use WASD control to navigate the camera instead of databinding.</td></tr><tr><td style="width: 19.0228%;">EventReceivers</td><td style="width: 33.9838%;">ArrayProperty&lt;Candera::AbstractNodePointer&gt;</td><td style="width: 47.0758%;">List of nodes that will receive position and rotation update events.</td></tr></tbody></table>

# Particle

#### **Particle Emitter** 

Emits Particles when attached to a Node with a Bounding Box. The Appearance of the Node will be used for the Particles and needs to be configured as specified in the Documentation.

This behavior is available for 3D scenes only.

**Emitter Settings**

<div class="contents" id="bkmrk-property-name-type-d"><div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 18.9016%;">**Property Name**</th><th style="width: 26.5679%;">**Type**</th><th style="width: 54.4893%;">**Description**</th></tr><tr><td style="width: 18.9016%;">Emit Particles</td><td style="width: 26.5679%;">bool</td><td style="width: 54.4893%;">If set to true then the behavior will emit particles.</td></tr><tr><td style="width: 18.9016%;">Emitter Type</td><td style="width: 26.5679%;">ParticleEmitterType::Enum</td><td style="width: 54.4893%;">Specifies the behavior of the emitted Particle.

*Possible values: BoxEmitter, SphereEmitter*

</td></tr><tr><td style="width: 18.9016%;">Maximum Particles  
</td><td style="width: 26.5679%;">UInt32  
</td><td style="width: 54.4893%;">Determines the maximum number of particles that can be displayed (Requires Scene Refresh).</td></tr><tr><td style="width: 18.9016%;">Particles Per Second  
</td><td style="width: 26.5679%;">UInt32  
</td><td style="width: 54.4893%;">Determines how many particles will be generated each second</td></tr></tbody></table>

</div></div></div></div></div></div>**Particle Settings**

<table class="doxtable" id="bkmrk-property-name-type-d-1" style="width: 100%;"><tbody><tr><th style="width: 15.4448%;">**Property Name**</th><th style="width: 30.0239%;">**Type**</th><th style="width: 54.4901%;">**Description**</th></tr><tr><td style="width: 15.4448%;">Life Time</td><td style="width: 30.0239%;">UInt32</td><td style="width: 54.4901%;">Determines how long a particle will live in Milliseconds.</td></tr><tr><td style="width: 15.4448%;">Random Life Time</td><td style="width: 30.0239%;">UInt32</td><td style="width: 54.4901%;">Determines how long a particle will live in Milliseconds.</td></tr><tr><td style="width: 15.4448%;">Velocity  
</td><td style="width: 30.0239%;">Candera::Vector3  
</td><td style="width: 54.4901%;">Determines the initial velocity of an emitted particle.</td></tr><tr><td style="width: 15.4448%;">Gravity  
</td><td style="width: 30.0239%;">Candera::Vector3</td><td style="width: 54.4901%;">Determines the gravity effects for all emitted particles.</td></tr><tr><td style="width: 15.4448%;">Random Spread  
</td><td style="width: 30.0239%;">Float  
</td><td style="width: 54.4901%;">Determines how the randomness of the initial velocity angle.</td></tr><tr><td style="width: 15.4448%;">Start Size  
</td><td style="width: 30.0239%;">Float  
</td><td style="width: 54.4901%;">Determines how big a particle will be when it is emitted.</td></tr><tr><td style="width: 15.4448%;">End Size  
</td><td style="width: 30.0239%;">Float  
</td><td style="width: 54.4901%;">Determines how big a particle will be when it vanishes.</td></tr><tr><td style="width: 15.4448%;">Start Color  
</td><td style="width: 30.0239%;">Candera::Color  
</td><td style="width: 54.4901%;">Determines what color a particle has be when it is emitted.</td></tr><tr><td style="width: 15.4448%;">End Color  
</td><td style="width: 30.0239%;">Candera::Color</td><td style="width: 54.4901%;">Determines what color a particle has when it vanishes.</td></tr><tr><td style="width: 15.4448%;">Fade In Time  
</td><td style="width: 30.0239%;">Optional&lt;FeatStd::UInt32&gt;  
</td><td style="width: 54.4901%;">Determines how long a new particle needs to be alive until it is fully visible.</td></tr><tr><td style="width: 15.4448%;">Fade Out Time  
</td><td style="width: 30.0239%;">Optional&lt;FeatStd::UInt32&gt;</td><td style="width: 54.4901%;">Determines how long a particle will fade out before it vanishes.</td></tr></tbody></table>

# Scripting Behaviors

#### **Enable Scripting System**

Enables or disables the scripting system. For example, dragging and dropping to the scene tree disables script system execution at runtime using a checkbox, and it can be enabled again using the same checkbox.

<table class="doxtable" id="bkmrk-property-name-type-d" style="width: 100%;"><tbody><tr><th style="width: 16.5655%;">**Property Name**</th><th style="width: 23.7316%;">**Type**</th><th style="width: 59.692%;">**Description**</th></tr><tr><td style="width: 16.5655%;">Enabled</td><td style="width: 23.7316%;">bool</td><td style="width: 59.692%;">Enables/disables the scripting system.</td></tr></tbody></table>

#### **Set Script Parameters**

This behavior allows users to set public variables of Lua scripts.

1. The value to set. Lua variables can have the following types: 
    - bool
    - int64
    - double (if you have floats in the behavior, cast them to double)
    - char\* (a null-terminated character string).

<table class="doxtable" id="bkmrk-property-name-type-d-1" style="width: 100%;"><tbody><tr><th style="width: 21.9285%;">**Property Name**</th><th style="width: 26.9246%;">**Type**</th><th style="width: 51.136%;">**Description**</th></tr><tr><td style="width: 21.9285%;">ScriptParameterName</td><td style="width: 26.9246%;">FeatStd::String</td><td style="width: 51.136%;">The name of the script parameter whose value will be set.

</td></tr><tr><td style="width: 21.9285%;">NodeWithScript</td><td style="width: 26.9246%;">Candera::AbstractNodePointer</td><td style="width: 51.136%;">Node whose script parameter will be changed.

</td></tr></tbody></table>

####  

#### **Set Script Property as Animation Property**

Binds an Animation to a declared Animation property inside a script's table. The 'PropertyName' has to match the Animation property name in the script and 'Animation' sets the actual Animation value. This Behavior as well as the script need to be placed on the same node. Multiple instances of this Behavior on a node can handle the respective amount of script Animation properties.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-2"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 16.5637%;">**Property Name**</th><th style="width: 38.0723%;">**Type**</th><th style="width: 45.364%;">**Description**</th></tr><tr><td style="width: 16.5637%;">PropertyName</td><td style="width: 38.0723%;">[FeatStd::String](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_string.html)</td><td style="width: 45.364%;">The name of the property in the script.</td></tr><tr><td style="width: 16.5637%;">Animation</td><td style="width: 38.0723%;">SharedPointer&lt;[Candera::Animation::AnimationPlayer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_animation_1_1_animation_player.html "AnimationPlayer is an AnimationPlayerBase that animates AnimationBlendedProperties.")&gt;</td><td style="width: 45.364%;">The animation that should be set as the value of the script animation property.</td></tr></tbody></table>

</div></div></div>

# State Machine Behaviors

#### **State Machine**

A state machine is able to implement the complex states of a node/scene/application (including sub state machines and history state machines). Transitions with conditions and actions are used to change between states.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d"><div class="contents"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 14.9567%;">**Property Name**</th><th style="width: 38.4398%;">**Type**</th><th style="width: 46.6035%;">**Description**</th></tr><tr><td style="width: 14.9567%;">StateMachine</td><td style="width: 38.4398%;">Candera::Internal::StateMachineBehaviorData\*</td><td style="width: 46.6035%;">A state machine is able to implement the complex states of a node/scene/application (including sub state machines and history state machines). Transitions with conditions and actions are used to change between states.</td></tr><tr><td style="width: 14.9567%;">ConsumeEvent</td><td style="width: 38.4398%;">bool</td><td style="width: 46.6035%;">Set this flag to false if the event should not be consumed by the trigger. By default it is set to true and if the trigger evaluates to true the event will not be routed to any other behavior.</td></tr><tr><td style="width: 14.9567%;">ExecutePostponedActions</td><td style="width: 38.4398%;">bool</td><td style="width: 46.6035%;">When set to true (default is true) this event handler is the one that will execute the postponed asynchronous actions that are part of this event handler (directly or indirectly). When set to false the surrounding event handler will execute the postponed actions.</td></tr></tbody></table>

</div></div></div></div>

# Streaming Behaviors

#### **Video Stream**

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_video_stream_behavior.html)</small>

Displays a video stream from a given source on a texture. Reacts on VideoControl events (see also <span style="color: rgb(230, 126, 35);">[Configure and Play Stream](https://doc316en.candera.eu/link/582#bkmrk-configure-and-play-s)</span>), and emits VideoState events (see also <span style="color: rgb(230, 126, 35);">[Check Video State](https://doc316en.candera.eu/link/597#bkmrk-check-video-state)</span>).

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d"><div class="contents"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 17.6689%;">**Property Name**</th><th style="width: 26.5651%;">**Type**</th><th style="width: 55.7249%;">**Description**</th></tr><tr><td style="width: 17.6689%;">TargetNode</td><td style="width: 26.5651%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 55.7249%;">The node on which the video will be displayed. If nothing is selected, the node on the anchor will be used.</td></tr><tr><td style="width: 17.6689%;">VideoSource</td><td style="width: 26.5651%;">[FeatStd::String](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_string.html)</td><td style="width: 55.7249%;">URI to video resource (e.g. path to file or URL).</td></tr><tr><td style="width: 17.6689%;">ScaleToVideoSource</td><td style="width: 26.5651%;">bool</td><td style="width: 55.7249%;">If enabled the texture will be resized to the video size, otherwise the size of the current texture will persist.</td></tr><tr><td style="width: 17.6689%;">FlipVertically</td><td style="width: 26.5651%;">bool</td><td style="width: 55.7249%;">Flips video vertically.</td></tr><tr><td style="width: 17.6689%;">Timestamp</td><td style="width: 26.5651%;">FeatStd::UInt32</td><td style="width: 55.7249%;"><span lang="EN-IN" style="font-size: 11.0pt; line-height: 115%;">Plays a video from a given source (file path or URL) on a texture or image, with the option to play it normally or flipped vertically.</span>

</td></tr></tbody></table>

</div></div></div></div>

# Value Processing Behaviors

#### **Animation Value Processing Behaviors**

##### **Jump to Animation Keyframe**

Expects a Float value between 0 and 1 (inclusive) as an event. Sets a selected animation to a frame corresponding to the value that the AnimationProcessValueBehavior receives.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d"><div class="contents"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 18.6573%;">**Property Name**</th><th style="width: 35.7127%;">**Type**</th><th style="width: 45.5888%;">**Description**</th></tr><tr><td style="width: 18.6573%;">Animation</td><td style="width: 35.7127%;">SharedPointer&lt;[Candera::Animation::AnimationPlayer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_animation_1_1_animation_player.html "AnimationPlayer is an AnimationPlayerBase that animates AnimationBlendedProperties.")&gt;</td><td style="width: 45.5888%;">The animation controlled. AnimationProcessValueBehavior sets the animation to the frame corresponding to the value it receives.</td></tr><tr><td style="width: 18.6573%; height: 33.2667px; border-width: 1px;">SequenceStartTime</td><td style="width: 35.7127%; height: 33.2667px; border-width: 1px;">[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt;Candera::Animation::SequenceTimeType&gt;</td><td style="width: 45.5888%; height: 33.2667px; border-width: 1px;">The start point of the animation. \[ms\]</td></tr><tr><td style="width: 18.6573%; height: 31.2667px; border-width: 1px;">SequenceDurationTime</td><td style="width: 35.7127%; height: 31.2667px; border-width: 1px;">[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt;Candera::Animation::SequenceTimeType&gt;</td><td style="width: 45.5888%; height: 31.2667px; border-width: 1px;">The duration of the animation. \[ms\]</td></tr><tr><td style="width: 18.6573%;">ControlNode  
</td><td style="width: 35.7127%;"><span style="color: rgb(230, 126, 35);">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</span></td><td style="width: 45.5888%;">  
</td></tr></tbody></table>

</div></div></div><div class="contents" id="bkmrk-property-name-type-d-0"><div class="contents">  
</div></div><div class="contents" id="bkmrk--0"><div class="textblock">---

</div></div>#### **Diagnostics Value Processing Behaviors**

##### **Frame Measurement**

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_frame_measurement_behavior.html)</small>

Outputs Frame Measure information of the specified Render Target. These Measurements can be Frames Per Seconds, Current Frame and Frame Time. This Behavior acts as Source for Process Value Behaviors.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-5"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 18.5338%;">**Property Name**</th><th style="width: 30.2718%;">**Type**</th><th style="width: 51.1532%;">**Description**</th></tr><tr><td style="width: 18.5338%;">RenderTarget</td><td style="width: 30.2718%;">Candera::GraphicDeviceUnit\*</td><td style="width: 51.1532%;">The render target which FPS should be monitored.</td></tr><tr><td style="width: 18.5338%;">Output</td><td style="width: 30.2718%;">OutputType::Enum</td><td style="width: 51.1532%;">Specifies which information will be output.</td></tr><tr><td style="width: 18.5338%;">DispatchThreshold</td><td style="width: 30.2718%;">[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt; [FeatStd::Variant](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_variant.html) &gt;</td><td style="width: 51.1532%;">Specifies how much the Output has to change to dispatch an event to its receivers.</td></tr><tr><td style="width: 18.5338%;">Receivers  
</td><td style="width: 30.2718%;"><span style="color: rgb(0, 0, 0);">Candera::ProcessValueBehaviorArrayProperty</span></td><td style="width: 51.1532%;">The process value behaviors that will receive the value as next in the value processing chain.

*This property can be set in the right side of the Scene Tree panel.*

</td></tr></tbody></table>

</div></div>---

#### **Effects Value Processing Behaviors**

##### **Set Alpha Value**

Sets the Alpha value of a node (expects a Float value).

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-1"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 14.5799%;">**Property Name**</th><th style="width: 17.6636%;">**Type**</th><th style="width: 67.7153%;">**Description**</th></tr><tr><td style="width: 14.5799%;">Target Node</td><td style="width: 17.6636%;"><span style="color: rgb(230, 126, 35);">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</span></td><td style="width: 67.7153%;">The Node which gets the resulting alpha value. If not set, then the node where the behavior is attached to, will be modified.</td></tr></tbody></table>

</div></div>##### **Switch Image**

Sets an image on a Render Node based on a float index received as event.

**Supports**

<div class="contents" id="bkmrk-controls%3A-flipbook"><div class="contents"><div class="textblock">- Controls: 
    - [<span style="color: rgb(230, 126, 35);">FlipBook</span>](https://doc316en.candera.eu/books/controls-and-behaviors/page/common#bkmrk-flipbook)

</div></div></div>**Example Usage**

<div class="contents" id="bkmrk-flipbook-switch-imag"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Switch Image Example](https://doc316en.candera.eu/link/572#bkmrk-switch-image-example)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-2"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 16.4333%;">**Property Name**</th><th style="width: 19.0252%;">**Type**</th><th style="width: 64.5004%;">**Description**</th></tr><tr><td style="width: 16.4333%;">Upload Strategy</td><td style="width: 19.0252%;">Enum (OnInit, OnDemand)</td><td style="width: 64.5004%;">Specifies if images are uploaded on demand or when the behavior is instantiated. OnInit may cause an initial delay and keeps all images loaded. OnDemand avoids an initial delay and only keeps one image loaded.

*Possible values: OnInit, OnDemand*

</td></tr><tr><td style="width: 16.4333%;">Target Node</td><td style="width: 19.0252%;">RenderNode \*</td><td style="width: 64.5004%;">The Render Node SwitchImageProcessValueBehavior will switch images on.</td></tr><tr><td style="width: 16.4333%;">Images  
</td><td style="width: 19.0252%;">SharedPointer&lt;Candera::Image2D&gt;</td><td style="width: 64.5004%;">A list of images which should be available for selection.

*This property is only available for 2D scenes.*

</td></tr><tr><td style="width: 16.4333%;">Textures  
</td><td style="width: 19.0252%;">SharedPointer&lt;Candera::TextureImage&gt;</td><td style="width: 64.5004%;">A list of images which should be available for selection.

*This property is only available for 3D scenes.*

</td></tr><tr><td style="width: 16.4333%;">OutOfBoundsHandlingMode  
</td><td style="width: 19.0252%;">OutOfBoundsHandlingMode::Enum</td><td style="width: 64.5004%;">Behavior when an index greater than the number of images is given.

*Possible values: Hold, Clamping*

</td></tr></tbody></table>

</div></div>##### **Switch Text**

Sets a text on a Render Node based on a float index received as event.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-3"><div class="textblock"><table class="doxtable" style="width: 100%; height: 59.5938px;"><tbody><tr style="height: 29.7969px;"><th style="width: 16.4333%; height: 29.7969px;">**Property Name**</th><th style="width: 21.0005%; height: 29.7969px;">**Type**</th><th style="width: 62.5251%; height: 29.7969px;">**Description**</th></tr><tr style="height: 29.7969px;"><td style="width: 16.4333%; height: 29.7969px;">Target Node</td><td style="width: 21.0005%; height: 29.7969px;"><span style="color: rgb(230, 126, 35);">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</span></td><td style="width: 62.5251%; height: 29.7969px;">The Render Node SwitchTextProcessValueBehavior will switch the text on.</td></tr><tr><td style="width: 16.4333%;">Texts  
</td><td style="width: 21.0005%;">ArrayProperty&lt;FeatStd::String&gt;</td><td style="width: 62.5251%;">Use list of texts (strings) and switch between them.</td></tr></tbody></table>

</div></div>
##### **Zoom Effect**

Expects a Float value between 0 and 1 (inclusive) as an event. Applies scale and alpha on children of a group.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-4"><div class="textblock"><table border="1" class="doxtable" style="border-collapse: collapse; width: 100%;"><tbody><tr><th style="width: 21.9934%;">**Property Name**</th><th style="width: 21.9901%;">**Type**</th><th style="width: 55.9754%;">**Description**</th></tr><tr><td style="width: 21.9934%;">Target Node  
</td><td style="width: 21.9901%;"><span style="color: rgb(230, 126, 35);">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</span></td><td style="width: 55.9754%;">The node whose children are enabled or disabled by ZoomProcessValueBehavior. If not set, then the node where the behavior is attached to will be considered.</td></tr><tr><td style="width: 21.9934%;">Alpha Factors</td><td style="width: 21.9901%;">Vector2</td><td style="width: 55.9754%;">Min/Max transparency factors</td></tr><tr><td style="width: 21.9934%;">Zoom Factors</td><td style="width: 21.9901%;">Vector2</td><td style="width: 55.9754%;">Min/Max zoom factors</td></tr><tr><td style="width: 21.9934%;">Zoom Distribution</td><td style="width: 21.9901%;">Float</td><td style="width: 55.9754%;">Distribution of Zoom/Alpha to each side of the selection.</td></tr><tr><td style="width: 21.9934%;">ZoomByLayout</td><td style="width: 21.9901%;">bool</td><td style="width: 55.9754%;">Whether the zoom is accomplished by layout size.</td></tr></tbody></table>

</div></div>---

#### **Transformation Value Processing Behaviors**

##### **Resize Group Node**  


Expects a Float value as an event, and changes the layout size of a group node it is placed on. When mode is 'Relative' it scales the layout size (expected value is a normalized value). When mode is 'Absolute' the layout size is set in pixels.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-6"><div class="textblock"><table class="doxtable" style="width: 100%; height: 138.8px;"><tbody><tr style="height: 46.2667px;"><th style="width: 12.603%; height: 46.2667px;">**Property Name**</th><th style="width: 22.116%; height: 46.2667px;">**Type**</th><th style="width: 65.2399%; height: 46.2667px;">**Description**</th></tr><tr style="height: 46.2667px;"><td style="width: 12.603%; height: 46.2667px;">AffectXAxis</td><td style="width: 22.116%; height: 46.2667px;">bool</td><td style="width: 65.2399%; height: 46.2667px;">Enables or disables scaling in horizontal direction.</td></tr><tr style="height: 46.2667px;"><td style="width: 12.603%; height: 46.2667px;">AffectYAxis</td><td style="width: 22.116%; height: 46.2667px;">bool</td><td style="width: 65.2399%; height: 46.2667px;">Enables or disables scaling in vertical direction.</td></tr><tr><td style="width: 12.603%;">Mode  
</td><td style="width: 22.116%;">Mode::Enum</td><td style="width: 65.2399%;">Determines how the received value will be interpreted.</td></tr><tr><td style="width: 12.603%;">ScaleVector  
</td><td style="width: 22.116%;">Vector2  
</td><td style="width: 65.2399%;">This vector is multiplied by the received value and specifies the magnitude by which the node is scaled.</td></tr></tbody></table>

</div></div>##### **Set Node Size**

Expects a Float value as an event. Sets the layout size of a node on a given axis by the received value in pixels.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-7"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 12.603%;">**Property Name**</th><th style="width: 22.7309%;">**Type**</th><th style="width: 64.625%;">**Description**</th></tr><tr><td style="width: 12.603%;">Target Node</td><td style="width: 22.7309%;"><span style="color: rgb(230, 126, 35);">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</span></td><td style="width: 64.625%;">The target node which is modified. if not set, then the node where the behavior is attached to, will be modified.</td></tr><tr><td style="width: 12.603%;">Size Axis</td><td style="width: 22.7309%;">AxisType2D::Enum </td><td style="width: 64.625%;">The axis along which the size is set.

*Possible values: AxisX, AxisY*

</td></tr></tbody></table>

</div></div>##### **Set Position**

Expects a Float value as an event. Translates Position Node along given axis by the received value in pixels.

**Example Usage**

<div class="contents" id="bkmrk-set-position-example"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Set Position Example](https://doc316en.candera.eu/link/572#bkmrk-set-position-example)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-8"><div class="textblock"><table border="1" class="doxtable" style="border-collapse: collapse; width: 100%;"><tbody><tr><th style="width: 21.0049%;">**Property Name**</th><th style="width: 25.208%;">**Type**</th><th style="width: 53.8695%;">**Description**</th></tr><tr><td style="width: 21.0049%;">Target Node</td><td style="width: 25.208%;"><span style="color: rgb(230, 126, 35);">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</span></td><td style="width: 53.8695%;">The target node to which the events are routed from the source node.</td></tr><tr><td style="width: 21.0049%;">Translation Axis 2D  
</td><td style="width: 25.208%;">AxisType2D::Enum</td><td style="width: 53.8695%;">The axis along which the position is set.

*Possible values: AxisX, AxisY*

*This property is only available for 2D scenes.*

</td></tr><tr><td style="width: 21.0049%;">Translation Axis 3D  
</td><td style="width: 25.208%;">AxisType3D::Enum</td><td style="width: 53.8695%;">The axis along which the position is set.

*Possible values: AxisX, AxisY,, AxisZ*

*This property is only available for 3D scenes.*

</td></tr></tbody></table>

</div></div>##### **Set Rotation**

Expects a Float value as an event. Rotates Rotation Node clockwise by the received value in degrees.

**Example Usage**

<div class="contents" id="bkmrk-set-rotation-example"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Set Rotation Example](https://doc316en.candera.eu/link/572#bkmrk-set-rotation-example)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-9"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 14.8331%;">**Property Name**</th><th style="width: 20.0237%;">**Type**</th><th style="width: 65.1432%;">**Description**</th></tr><tr><td style="width: 14.8331%;">Target Node</td><td style="width: 20.0237%;"><span style="color: rgb(230, 126, 35);">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</span></td><td style="width: 65.1432%;">The node which is modified. If not set, then the node where the behavior is attached to, will be modified.</td></tr><tr><td style="width: 14.8331%;">RotationAxis  
</td><td style="width: 20.0237%;"><span style="color: rgb(0, 0, 0);">AxisType3D::Enum</span></td><td style="width: 65.1432%;">The axis to rotate the node around.

*Possible values: AxisX, AxisY,, AxisZ*

*This property is only available for 3D scenes.*

</td></tr></tbody></table>

</div></div>##### **Set Scale**

Expects a Float value as an event. Scales Scaled Node by the received (scalar) value multiplied by Vector (X value for horizontal scaling, Y value for vertical scaling). Scaling along either axis can be enabled or disabled.

**Example Usage**

<div class="contents" id="bkmrk-set-scale-example"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Set Scale Example](https://doc316en.candera.eu/link/572#bkmrk-set-scale-example)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-10"><div class="textblock"><table class="doxtable" style="width: 100%; height: 256.667px;"><tbody><tr style="height: 29.4667px;"><th style="width: 14.7095%; height: 29.4667px;">**Property Name**</th><th style="width: 21.1412%; height: 29.4667px;">**Type**</th><th style="width: 64.1493%; height: 29.4667px;">**Description**</th></tr><tr style="height: 46.2667px;"><td style="width: 14.7095%; height: 46.2667px;">TargetNode</td><td style="width: 21.1412%; height: 46.2667px;"><span style="color: rgb(230, 126, 35);">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</span></td><td style="width: 64.1493%; height: 46.2667px;">The Node which is modified. If not set, then the node where the behavior is attached to, will be modified.</td></tr><tr style="height: 29.4667px;"><td style="width: 14.7095%; height: 29.4667px;">ScaleAlongX</td><td style="width: 21.1412%; height: 29.4667px;">bool</td><td style="width: 64.1493%; height: 29.4667px;">Enables or disables scaling in horizontal direction.</td></tr><tr style="height: 29.4667px;"><td style="width: 14.7095%; height: 29.4667px;">ScaleAlongY</td><td style="width: 21.1412%; height: 29.4667px;">bool</td><td style="width: 64.1493%; height: 29.4667px;">Enables or disables scaling in vertical direction.</td></tr><tr style="height: 29.4667px;"><td style="width: 14.7095%; height: 29.4667px;">ScaleAlongZ</td><td style="width: 21.1412%; height: 29.4667px;">bool</td><td style="width: 64.1493%; height: 29.4667px;">Enables or disables scaling in Z-direction.

*This property is only available for 3D scenes.*

</td></tr><tr style="height: 46.2667px;"><td style="width: 14.7095%; height: 46.2667px;">ScaleVector2D</td><td style="width: 21.1412%; height: 46.2667px;">Vector2</td><td style="width: 64.1493%; height: 46.2667px;">This vector is multiplied by the received value and specifies the magnitude by which the node is scaled.

*This property is only available for 2D scenes.*

</td></tr><tr style="height: 46.2667px;"><td style="width: 14.7095%; height: 46.2667px;">ScaleVector3D</td><td style="width: 21.1412%; height: 46.2667px;">Vector3</td><td style="width: 64.1493%; height: 46.2667px;">This vector is multiplied by the received value and specifies the magnitude by which the node is scaled.

*This property is only available for 3D scenes.*

</td></tr></tbody></table>

</div></div>##### **Move Node**

Expects a Float value as an event. Translates Translated Node by the received (scalar) value multiplied by Vector X Y (Z).

**Example Usage**

<div class="contents" id="bkmrk-move-node-example"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Move Node Example](https://doc316en.candera.eu/link/572#bkmrk-move-node-example)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-11"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 15.9403%;">**Property Name**</th><th style="width: 19.3975%;">**Type**</th><th style="width: 64.6211%;">**Description**</th></tr><tr><td style="width: 15.9403%;">Target Node</td><td style="width: 19.3975%;"><span style="color: rgb(230, 126, 35);">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</span></td><td style="width: 64.6211%;">The node TranslateProcessBehavior moves.</td></tr><tr><td style="width: 15.9403%;">Multiplied Vector</td><td style="width: 19.3975%;">Vector3</td><td style="width: 64.6211%;">This vector is multiplied by the value TranslateProcessValueBehavior receives and specifies direction and magnitude by which TranslateProcessValueBehavior moves Translated Node. If not set, then the node where the behavior is attached to, will be modified.</td></tr></tbody></table>

</div></div>---

#### **AnimationMeter**

This behavior is a Behavior Block. It can be dragged&amp;dropped on nodes just like any Behavior. Controls an animation according to the passed value.

<table class="doxtable" id="bkmrk-property-name-type-d-12" style="width: 100%; height: 93.0114px;"><tbody><tr style="height: 29.7017px;"><th style="width: 15.9403%; height: 29.7017px;">**Property Name**</th><th style="width: 19.3975%; height: 29.7017px;">**Type**</th><th style="width: 64.6211%; height: 29.7017px;">**Description**</th></tr><tr style="height: 63.3097px;"><td style="width: 15.9403%; height: 63.3097px;">Animation</td><td style="width: 19.3975%; height: 63.3097px;">Candera::Animation::AnimationPlayer</td><td style="width: 64.6211%; height: 63.3097px;">TThe animation controlled. AnimtionMeter sets the animation to the frame corresponding to a mapped value it receives.

</td></tr><tr><td style="width: 15.9403%;">Minimum</td><td style="width: 19.3975%;"><span style="color: rgb(0, 0, 0);">FeatStd::Variant</span></td><td style="width: 64.6211%;">Minimum of the Variant value which will be mapped between 0 and 1.

</td></tr><tr><td style="width: 15.9403%;">Maximum</td><td style="width: 19.3975%;"><span style="color: rgb(0, 0, 0);">FeatStd::Variant</span></td><td style="width: 64.6211%;">Maximum of the Variant value which will be mapped between 0 and 1.

</td></tr></tbody></table>

#### **Arithmetic Operation**

Arithmetic operation behavior allows to perform addition, subtraction, multiplication and division operations on the passed value.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-13"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 16.1862%;">**Property Name**</th><th style="width: 36.9425%;">**Type**</th><th style="width: 46.8302%;">**Description**</th></tr><tr><td style="width: 16.1862%;">Operation</td><td style="width: 36.9425%;">ArithmeticOperationType::Enum</td><td style="width: 46.8302%;">Arithmetic operation to be performed.

*Possible values: Addition, Subtraction, Multiplication, Division, Modulo, Absolute*

</td></tr><tr><td style="width: 16.1862%;">Operand</td><td style="width: 36.9425%;">[FeatStd::Variant](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_variant.html)</td><td style="width: 46.8302%;">A number to be used as addend/subtrahend/multiplicant/divisor on provided value.</td></tr><tr><td style="width: 16.1862%;">OutputType</td><td style="width: 36.9425%;">VariantValueType::Enum</td><td style="width: 46.8302%;">Type of the Variant forwarded as result.

*Possible values: FloatValue, Int32Value, UInt32Value, BoolValue, DoubleValue, Int8Value, Int16Value, Int64Value, UInt8Value, UInt16Value, UInt64Value, StringValue*

</td></tr><tr><td style="width: 16.1862%;">Receivers  
</td><td style="width: 36.9425%;"><span style="color: rgb(0, 0, 0);">Candera::ProcessValueBehaviorArrayProperty</span></td><td style="width: 46.8302%;">The process value behaviors that will receive the value as next in the value processing chain.

*This property can be set in the right side of the Scene Tree panel.*

</td></tr></tbody></table>

</div></div>#### **Clock**

Converts a time integer into seconds, minutes and hours and passes those values to behavior-properties.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-14"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 27.3064%;">**Property Name**</th><th style="width: 31.5031%;">**Type**</th><th style="width: 41.2728%;">**Description**</th></tr><tr><td style="width: 27.3064%;">SecondsProcessValueBehavior</td><td style="width: 31.5031%;">[Candera::ProcessValueBehavior](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_process_value_behavior.html "The ProcessValueBehavior provides a Variant data type which is bindable. A value change results in a ...")\*</td><td style="width: 41.2728%;">The behavior that receives the seconds.

*This property can be set in the right side of the Scene Tree panel.*

</td></tr><tr><td style="width: 27.3064%;">MinutesProcessValueBehavior</td><td style="width: 31.5031%;">[Candera::ProcessValueBehavior](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_process_value_behavior.html "The ProcessValueBehavior provides a Variant data type which is bindable. A value change results in a ...")\*</td><td style="width: 41.2728%;">The behavior that receives the minutes.

*This property can be set in the right side of the Scene Tree panel.*

</td></tr><tr><td style="width: 27.3064%;">HoursProcessValueBehavior</td><td style="width: 31.5031%;">[Candera::ProcessValueBehavior](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_process_value_behavior.html "The ProcessValueBehavior provides a Variant data type which is bindable. A value change results in a ...")\*</td><td style="width: 41.2728%;">The behavior that receives the hours.

*This property can be set in the right side of the Scene Tree panel.*

</td></tr><tr><td style="width: 27.3064%;">OffsetInMinutes</td><td style="width: 31.5031%;">FeatStd::Int32</td><td style="width: 41.2728%;">Offset in minutes to add to time (i.e. for different time zones).</td></tr><tr><td style="width: 27.3064%;">ShowFull24Hours</td><td style="width: 31.5031%;">bool</td><td style="width: 41.2728%;">If true, hours will be shown from 0-23, otherwise in AM/PM format.</td></tr><tr><td style="width: 27.3064%;">AMText</td><td style="width: 31.5031%;">[FeatStd::String](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_string.html)</td><td style="width: 41.2728%;">The string of the AM label.</td></tr><tr><td style="width: 27.3064%;">PMText</td><td style="width: 31.5031%;">[FeatStd::String](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_string.html)</td><td style="width: 41.2728%;">The string of the PM label.</td></tr><tr><td style="width: 27.3064%;">AMPMTextBehavior</td><td style="width: 31.5031%;">[Candera::Behavior](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_behavior.html "Behaviors are small re-usable functional blocks that communicate via events. Behaviors are based on W...")\*</td><td style="width: 41.2728%;">Sets text 'AM' or 'PM'.

*This property can be set in the right side of the Scene Tree panel.*

</td></tr><tr><td style="width: 27.3064%;">ShowSeconds</td><td style="width: 31.5031%;">bool</td><td style="width: 41.2728%;">If true, seconds will be shown.</td></tr><tr><td style="width: 27.3064%;">SecondsNode</td><td style="width: 31.5031%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 41.2728%;">The node that will be turned off if showing of seconds is disabled.</td></tr></tbody></table>

</div></div>#### **Dial**

Receives an angle from a ProcessValueEvent or a value in a ChangeValueEvent. The knob changes its rotation according to that angle. The Behavior Transmits the changed value through events (ValueChangedEvent and ProcessValueEvent).

This behavior is available for 2D scenes only.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-15"><div class="textblock"><table border="1" class="doxtable" style="border-collapse: collapse; width: 100%;"><tbody><tr><th style="width: 23.5997%;">**Property Name**</th><th style="width: 26.9357%;">**Type**</th><th style="width: 49.547%;">**Description**</th></tr><tr><td style="width: 23.5997%;">CurrentValue</td><td style="width: 26.9357%;">FeatStd::Int32</td><td style="width: 49.547%;">Current value for the dial.</td></tr><tr><td style="width: 23.5997%;">MinimumRotation</td><td style="width: 26.9357%;">FeatStd::Float</td><td style="width: 49.547%;">Minimum rotation of the dial.</td></tr><tr><td style="width: 23.5997%;">MaximumRotation</td><td style="width: 26.9357%;">FeatStd::Float</td><td style="width: 49.547%;">Maximum rotation of the dial.</td></tr><tr><td style="width: 23.5997%;">StepSize</td><td style="width: 26.9357%;">FeatStd::Float</td><td style="width: 49.547%;">Step size in degrees.</td></tr><tr><td style="width: 23.5997%;">KnobNode</td><td style="width: 26.9357%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 49.547%;">Knob node which will be rotated.</td></tr><tr><td style="width: 23.5997%;">Receivers  
</td><td style="width: 26.9357%;"><span style="color: rgb(0, 0, 0);">Candera::ProcessValueBehaviorArrayProperty</span></td><td style="width: 49.547%;">The process value behaviors that will receive the value as next in the value processing chain.

*This property can be set in the right side of the Scene Tree panel.*

</td></tr></tbody></table>

</div></div>#### **Filter**

Filters the processed value via an attached Condition (e.g. Check processed Value).

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-16"><div class="textblock"><table class="doxtable" style="width: 97.9012%;"><tbody><tr><th style="width: 14.7668%;">**Property Name**</th><th style="width: 26.2521%;">**Type**</th><th style="width: 58.9411%;">**Description**</th></tr><tr><td style="width: 14.7668%;">Condition</td><td style="width: 26.2521%;">Candera::ConditionBehavior\*</td><td style="width: 58.9411%;">ConditionBehavior for passing the value to the next process value behavior.</td></tr><tr><td style="width: 14.7668%;">Receivers  
</td><td style="width: 26.2521%;"><span style="color: rgb(0, 0, 0);">Candera::ProcessValueBehaviorArrayProperty</span></td><td style="width: 58.9411%;">The process value behaviors that will receive the value as next in the value processing chain.

*This property can be set in the right side of the Scene Tree panel.*

</td></tr></tbody></table>

</div></div>#### **Forward Value**

Forwards a received value to the associated target (associated controls with a value property). Receives a ValueChanged-Event (change notification) and forwards it as a ChangeValue-Event(change request) to the target. The common usecase is to send the Value from a Value behavior to another Value behavior(or Control with a Value).

Emits a ChangeValueEvent which will be received by a Value Behavior.

<p class="callout info">Note that the target Value - Behavior must have 'Accept Value Event' property enabled.</p>

**Example Usage**

<div class="contents" id="bkmrk-forward-value-exampl"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Forward Value Example](https://doc316en.candera.eu/link/572#bkmrk-forward-value-exampl)</span>
- <span style="color: rgb(230, 126, 35);">[Thermometer Example](https://doc316en.candera.eu/link/572#bkmrk-thermometer-example)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-17"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 20.1483%;">**Property Name**</th><th style="width: 28.0522%;">**Type**</th><th style="width: 51.7995%;">**Description**</th></tr><tr><td style="width: 20.1483%;">Event Dispatch Strategy</td><td style="width: 28.0522%;">EventDispatchStrategyType::Enum</td><td style="width: 51.7995%;">The way the event gets sent.

*Possible values: Direct, Broadcast, Bubble, Tunnel, DedicatedBehavior*

</td></tr><tr><td style="width: 20.1483%;">Target Node</td><td style="width: 28.0522%;"><span style="color: rgb(230, 126, 35);">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</span></td><td style="width: 51.7995%;">The target node to which the events are routed. If this property is not set, the event will be routed to the node of the behavior.</td></tr><tr><td style="width: 20.1483%;">Dedicated Behavior  
</td><td style="width: 28.0522%;"><span style="color: rgb(0, 0, 0);">Candera::ProcessValueBehavior\*</span></td><td style="width: 51.7995%;">The dedicated process value behavior that will receive the change value event.

*This property can be set in the right side of the Scene Tree panel.*

</td></tr></tbody></table>

</div></div>#### **Interpolate Value**

Expects a Float value as an event. This behavior holds an internal Float value. It changes this internal value with given speed (Units Per Second) until it reaches the received value. Unless received value matches internal value, it sends internal value to a Process Value Behavior every frame.

If the *Animation Mode* property is set to *Instant*, no interpolation will be taking place - the received value will be applied immediately.

**Example Usage**

<div class="contents" id="bkmrk-interpolate-value-ex"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Interpolate Value Example](https://doc316en.candera.eu/link/572#bkmrk-interpolate-value-ex)</span>
- [<span style="color: rgb(230, 126, 35);">Set Scale Example</span>](https://doc316en.candera.eu/link/572#bkmrk-set-scale-example)

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-18"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 18.0395%;">**Property Name**</th><th style="width: 25.1965%;">**Type**</th><th style="width: 56.7228%;">**Description**</th></tr><tr><td style="width: 18.0395%;">Animation Mode</td><td style="width: 25.1965%;">InterpolationAnimationMode::Enum</td><td style="width: 56.7228%;">Animation mode sets a specific interpolation type.

*Possible values: SpeedBased, TimeBased, Instant*

</td></tr><tr><td style="width: 18.0395%;">Units Per Second</td><td style="width: 25.1965%;">Float</td><td style="width: 56.7228%;">Speed at which InterpolateProcessValueBehavior changes its internal value.

*This property can only be set when AnimationMode is set to "SpeedBased".*

</td></tr><tr><td style="width: 18.0395%;">Interpolation Time  
</td><td style="width: 25.1965%;">UInt32  
</td><td style="width: 56.7228%;">Time in ms the InterpolateProcessValueBehavior changes its internal value.

*This Property can only be set when AnimationMode is set to "TimeBased"*

</td></tr><tr><td style="width: 18.0395%;">Filter Time Constant</td><td style="width: 25.1965%;">Float</td><td style="width: 56.7228%;">The moment before InterpolateProcessValueBehavior’s internal value reaches the received value, the speed at which the former is changing slows down. This prevents a sudden end of movement that can be felt as artificial in some cases.

*This property can only be set when AnimationMode is set to either "SpeedBased" or "Timebased".*

</td></tr><tr><td style="width: 18.0395%;">Receivers  
</td><td style="width: 25.1965%;"><span style="color: rgb(0, 0, 0);">Candera::ProcessValueBehaviorArrayProperty</span></td><td style="width: 56.7228%;">The process value behaviors that will receive the value as next in the value processing chain.

*This property can be set in the right side of the Scene Tree panel.*

</td></tr></tbody></table>

</div></div>#### **Map Value**

Expects a Float value as an event. Maps the received value from one interval to another.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-19"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 15.3213%;">**Property Name**</th><th style="width: 31.5074%;">**Type**</th><th style="width: 53.1301%;">**Description**</th></tr><tr><td style="width: 15.3213%;">InputMin</td><td style="width: 31.5074%;">[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt; [FeatStd::Variant](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_variant.html) &gt;</td><td style="width: 53.1301%;">\[Optional\] Smallest value of the interval to check. If Minimum is given as greater than Maximum then the values are internally swapped.</td></tr><tr><td style="width: 15.3213%;">InputMax</td><td style="width: 31.5074%;">[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt; [FeatStd::Variant](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_variant.html) &gt;</td><td style="width: 53.1301%;">\[Optional\] Largest value of the interval to check. If Maximum is given as smaller than Minimum then the values are internally swapped.</td></tr><tr><td style="width: 15.3213%;">OutputMin</td><td style="width: 31.5074%;">FeatStd::Float</td><td style="width: 53.1301%;">Smallest value of the interval mapped to.</td></tr><tr><td style="width: 15.3213%;">OutputMax</td><td style="width: 31.5074%;">FeatStd::Float</td><td style="width: 53.1301%;">Largest value of the interval mapped to.</td></tr><tr><td style="width: 15.3213%;">OutputType</td><td style="width: 31.5074%;">VariantValueType::Enum</td><td style="width: 53.1301%;">Type of the Variant forwarded as result.

*Possible values: FloatValue, Int32Value, UInt32Value, BoolValue, DoubleValue, Int8Value, Int16Value, Int64Value, UInt8Value, UInt16Value, UInt64Value, StringValue*

</td></tr><tr><td style="width: 15.3213%;">Receivers  
</td><td style="width: 31.5074%;"><span style="color: rgb(0, 0, 0);">Candera::ProcessValueBehaviorArrayProperty</span></td><td style="width: 53.1301%;">The process value behaviors that will receive the value as next in the value processing chain.

*This property can be set in the right side of the Scene Tree panel.*

</td></tr></tbody></table>

</div></div>#### **Map Value Normalized**

Maps the numeric value received via 'ProcessValueEvent' within an arbitrary range to the normalized range from 0.0 to 1.0 and dispatches the result locally to its receivers. Receivers of this Behavior must therefore be value processing behaviors operating on normalized values.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-20"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 15.939%;">**Property Name**</th><th style="width: 20.7559%;">**Type**</th><th style="width: 63.2639%;">**Description**</th></tr><tr><td style="width: 15.939%;">Reverse</td><td style="width: 20.7559%;">bool</td><td style="width: 63.2639%;">Toggles the mapping direction. If this property is true, the received value is assumed to be within range from 0.0 to 1.0 and the emitted value is mapped accordingly.</td></tr><tr><td style="width: 15.939%;">ValueForRange</td><td style="width: 20.7559%;">ValueBehaviorBase\*</td><td style="width: 63.2639%;">The input value behavior for defining the mapped range.

*This property can be set in the right side of the Scene Tree panel.*

</td></tr><tr><td style="width: 15.939%;">Receivers  
</td><td style="width: 20.7559%;"><span style="color: rgb(0, 0, 0);">Candera::ProcessValueBehaviorArrayProperty</span></td><td style="width: 63.2639%;">The process value behaviors that will receive the value as next in the value processing chain.

*This property can be set in the right side of the Scene Tree panel.*

</td></tr></tbody></table>

</div></div>#### **Process Value Changed Event**

This behavior handles ValueChanged events and processes the new value within a set of ProcessValueBehaviors chains. By default ProcessValueChangedBehavior does consume the event, which will result in dispatching the event any further in the dispatching strategy. If further dispatching of the ValueChangedEvent is required set the ConsumeEvent flag to false.

**Example Usage**

- [<span style="color: rgb(230, 126, 35);">Process Value Changed Event - Slider Example</span>](https://doc316en.candera.eu/books/controls-and-behaviors/page/examples-using-predefined-behaviors#bkmrk-process-value-change)
- [<span style="color: rgb(230, 126, 35);">Process Value Changed Event - State Machine Example</span>](https://doc316en.candera.eu/books/controls-and-behaviors/page/examples-using-predefined-behaviors#bkmrk-process-value-change-1)

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-21"><div class="textblock"><table class="doxtable" style="width: 100%; height: 244px;"><tbody><tr style="height: 29.4667px;"><th style="width: 15.939%; height: 29.4667px;">**Property Name**</th><th style="width: 23.4728%; height: 29.4667px;">**Type**</th><th style="width: 60.547%; height: 29.4667px;">**Description**</th></tr><tr style="height: 46.2667px;"><td style="width: 15.939%; height: 46.2667px;">Sender</td><td style="width: 23.4728%; height: 46.2667px;"><span style="color: rgb(230, 126, 35);">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</span></td><td style="width: 60.547%; height: 46.2667px;">The node for which the event shall be emitted. If it is not set then the TargetNode or Node (if TargetNode is not set) will be taken instead.</td></tr><tr style="height: 29.4667px;"><td style="width: 15.939%; height: 29.4667px;">Minimum</td><td style="width: 23.4728%; height: 29.4667px;">Optional&lt;FeatStd::Variant&gt;</td><td style="width: 60.547%; height: 29.4667px;">Minimum threshold of the processed values.</td></tr><tr style="height: 29.4667px;"><td style="width: 15.939%; height: 29.4667px;">Maximum  
</td><td style="width: 23.4728%; height: 29.4667px;">Optional&lt;FeatStd::Variant&gt;  
</td><td style="width: 60.547%; height: 29.4667px;">Maximum threshold of the processed values.</td></tr><tr style="height: 63.0667px;"><td style="width: 15.939%; height: 63.0667px;">ConsumeEvent  
</td><td style="width: 23.4728%; height: 63.0667px;">bool  
</td><td style="width: 60.547%; height: 63.0667px;">Set this flag to false if the event should not be consumed by the trigger. By default it is set to true and if the trigger evaluates to true the event will not be routed to any other behavior.</td></tr><tr style="height: 46.2667px;"><td style="width: 15.939%; height: 46.2667px;">Receivers  
</td><td style="width: 23.4728%; height: 46.2667px;">ProcessValueBehavior ArrayProperty</td><td style="width: 60.547%; height: 46.2667px;">The process value behaviors that will receive the value as next in the value processing chain.

*This property can be set in the right side of the Scene Tree panel.*

</td></tr></tbody></table>

</div></div>#### **Render a Range**

This behavior is a Behavior Block. It can be dragged&amp;dropped on nodes just like any Behavior. Renders a range of nodes according to the passed value.

<table class="doxtable" id="bkmrk-property-name-type-d-22" style="width: 100%; height: 152.173px;"><tbody><tr style="height: 29.7017px;"><th style="width: 15.939%; height: 29.7017px;">**Property Name**</th><th style="width: 23.4728%; height: 29.7017px;">**Type**</th><th style="width: 60.547%; height: 29.7017px;">**Description**</th></tr><tr style="height: 46.2642px;"><td style="width: 15.939%; height: 46.2642px;">OperationMode</td><td style="width: 23.4728%; height: 46.2642px;">OperationModeType Enum</td><td style="width: 60.547%; height: 46.2642px;">When set to MultipleNodes, EnableNodesProcessValueBehavior will enable the first N children of Group Node. When Operation Mode is set to SingleNode, only Nth node is enabled. N is a number from 0 to number of all children nodes of Group Node. It corresponds linearly to the value EnableNodesProcessValueBehavior receives.</td></tr><tr style="height: 46.5057px;"><td style="width: 15.939%; height: 46.5057px;">Minimum</td><td style="width: 23.4728%; height: 46.5057px;">Optional&lt; FeatStd::Variant &gt;</td><td style="width: 60.547%; height: 46.5057px;">Minimum of the Variant value which gets mapped between 0 and 1.</td></tr><tr style="height: 29.7017px;"><td style="width: 15.939%; height: 29.7017px;">Maximum  
</td><td style="width: 23.4728%; height: 29.7017px;">Optional&lt; FeatStd::Variant &gt;</td><td style="width: 60.547%; height: 29.7017px;">Maximum of the Variant value which gets mapped between 0 and 1.</td></tr></tbody></table>

#### **Send ChangeValue on receiving ProcessValue event**

Sends out a new value. Associated controls with a value property receive the new values.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-23"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 20.6343%;">**Property Name**</th><th style="width: 26.9357%;">**Type**</th><th style="width: 52.3888%;">**Description**</th></tr><tr><td style="width: 20.6343%;">ChangeValue</td><td style="width: 26.9357%;">ChangeValue::Enum</td><td style="width: 52.3888%;">How the event value shall be handled by the receiving behavior</td></tr><tr><td style="width: 20.6343%;">Target Node  
</td><td style="width: 26.9357%;"><span style="color: rgb(230, 126, 35);">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</span></td><td style="width: 52.3888%;">The target node to which the events are routed. If this property is not set, the event will be routed to the node of the behavior.

*This property is only visible if EventDispatchStrategy is set to "Direct", "Broadcast", "Bubble" or "Tunnel".*

</td></tr><tr><td style="width: 20.6343%;">EventDispatchStrategy</td><td style="width: 26.9357%;">CgiStudioControl::EventDispatchStrategyType::Enum</td><td style="width: 52.3888%;">The way the event gets sent

*Possible values: Direct, Broadcast, Bubble, Tunnel, DedicatedBehavior*

</td></tr><tr><td style="width: 20.6343%;">DedicatedBehavior</td><td style="width: 26.9357%;">[Candera::ProcessValueBehavior](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_process_value_behavior.html "The ProcessValueBehavior provides a Variant data type which is bindable. A value change results in a ...")\*</td><td style="width: 52.3888%;">The dedicated process value behavior that will receive the change value event.

*This property can be set in the right side of the Scene Tree panel.*

*This property only visible if EventDispatchStrategy is set to "DedicatedBehavior".*

</td></tr><tr><td style="width: 20.6343%; height: 46.2667px;">Receivers  
</td><td style="width: 26.9357%; height: 46.2667px;">ProcessValueBehavior ArrayProperty</td><td style="width: 52.3888%; height: 46.2667px;">The process value behaviors that will receive the value as next in the value processing chain.

*This property can be set in the right side of the Scene Tree panel.*

</td></tr></tbody></table>

</div></div>#### **Set Selected State**

This behavior is a Behavior Block. It can be dragged&amp;dropped on nodes just like any Behavior.

Sets the state to selected or deselected according to the passed value.

#### **Smooth Value**

<small>[Class Reference](http://dev.doc.cgistudio.at/APILINK/class_cgi_studio_control_1_1_smoothing_process_value_behavior.html)</small>

Expects a numeric value as an event and applies exponent smoothing to that value and the previous calculated one.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-24"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 17.0511%;">**Property Name**</th><th style="width: 14.0857%;">**Type**</th><th style="width: 68.8221%;">**Description**</th></tr><tr><td style="width: 17.0511%;">SmoothingFactor</td><td style="width: 14.0857%;">FeatStd::Float</td><td style="width: 68.8221%;">The factor how fast the output value should adapt to the input value. Valid values are between 0.0 and 1.0</td></tr><tr><td style="width: 17.0511%; height: 46.2667px;">Receivers  
</td><td style="width: 14.0857%; height: 46.2667px;">ProcessValueBehavior ArrayProperty</td><td style="width: 68.8221%; height: 46.2667px;">The process value behaviors that will receive the value as next in the value processing chain.

*This property can be set in the right side of the Scene Tree panel.*

</td></tr></tbody></table>

</div></div>#### **Render Child Nodes**

Enables/Disables Child nodes corresponding to the received value and the behavior settings.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-25"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 15.6984%;">**Property Name**</th><th style="width: 26.2061%;">**Type**</th><th style="width: 58.0955%;">**Description**</th></tr><tr><td style="width: 15.6984%;">TargetNode</td><td style="width: 26.2061%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 58.0955%;">The Node which is modified. If not set, then the node where the behavior is attached to, will be modified.</td></tr><tr><td style="width: 15.6984%;">OperationMode</td><td style="width: 26.2061%;">OperationMode::Enum</td><td style="width: 58.0955%;">When set to MultipleNodes, EnableChildNodes will enable the first N children of Group Node. When Operation Mode is set to SingleNode, only the Nth node is enabled.

*Possible values: MultipleNodes, SingleNode*

</td></tr><tr><td style="width: 15.6984%;">Levels</td><td style="width: 26.2061%;">FeatStd::UInt8</td><td style="width: 58.0955%;">Number of levels to step down through groups. Default is zero.</td></tr><tr><td style="width: 15.6984%;">NormalizeValue</td><td style="width: 26.2061%;">bool</td><td style="width: 58.0955%;">If set to true, the received value has to be between 0 and 1 and will be mapped to the number of children. Otherwise the value has to be the index of the child.</td></tr></tbody></table>

</div></div>#### **Format String**

'Format String' modifies the Text of a TextNode Node and provides the Text as property for Controls. It supports formatted text that can display one variable.

**Example Usage**

<div class="contents" id="bkmrk-format-string-exampl"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Format String Example](https://doc316en.candera.eu/link/572#bkmrk-format-string-exampl)</span>
- <span style="color: rgb(230, 126, 35);">[Interpolate Value Example](https://doc316en.candera.eu/link/572#bkmrk-interpolate-value-ex)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-26"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 15.0803%;">**Property Name**</th><th style="width: 33.2474%;">**Type**</th><th style="width: 51.6722%;">**Description**</th></tr><tr><td style="width: 15.0803%;">Text</td><td style="width: 33.2474%;">String</td><td style="width: 51.6722%;">Text that TextBehavior will change the Node to. Supports formatting for one variable that corresponds to the value TextProcessValueBehavior2D receivers.</td></tr><tr><td style="width: 15.0803%;">Style</td><td style="width: 33.2474%;">[SharedPointer](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_memory_management_1_1_shared_pointer.html) &lt;Candera::TextRendering::SharedStyle&gt;</td><td style="width: 51.6722%;">The style that will be set to the Text Node.</td></tr><tr><td style="width: 15.0803%;">Alignment</td><td style="width: 33.2474%;">TextNode2DLayouter::TextAlignment</td><td style="width: 51.6722%;">The horizontal text alignment, using the culture text direction, is used to define how text will be horizontally aligned within its layout area.

*Possible values: Auto, Left, Center, Right*

</td></tr><tr><td style="width: 15.0803%;">Multiline</td><td style="width: 33.2474%;">bool</td><td style="width: 51.6722%;">If multi line is disabled, then the new line control characters will be ignored and text will always be rendered in one line.</td></tr><tr><td style="width: 15.0803%;">Line Spacing</td><td style="width: 33.2474%;">PixelSize (UInt16)</td><td style="width: 51.6722%;">Defines the distance between the baselines of successive lines of type.</td></tr><tr><td style="width: 15.0803%;">Word Wrap</td><td style="width: 33.2474%;">Bool</td><td style="width: 51.6722%;">If word wrapping is enabled then the lines that exceed the client area will be split during arrangement into multiple lines.</td></tr><tr><td style="width: 15.0803%;">Trimming</td><td style="width: 33.2474%;">TextNode2DLayouter::Trimming</td><td style="width: 51.6722%;">Trimming defines the behavior to employ when content overflows the content area.

*Possible values: None, Ellipsis, CustomText*

</td></tr><tr><td style="width: 15.0803%;">TrimmingText</td><td style="width: 33.2474%;">[FeatStd::String](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_string.html)</td><td style="width: 51.6722%;">Trimming text defines the text which replaces content overflowing the content area.

*This property is only visible if Trimming is set to "CustomText".*

</td></tr><tr><td style="width: 15.0803%;">TargetNode</td><td style="width: 33.2474%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 51.6722%;">The Node which gets the given text. If not set, then the node where the behavior is attached to, will be modified.</td></tr></tbody></table>

</div></div>#### **Track Angle on Drag**

Listens to the touch of the selected node, returns the angle between pressing, moving and releasing.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-27"><div class="textblock"><table border="1" class="doxtable" style="border-collapse: collapse; width: 100%;"><tbody><tr style="height: 29.4667px;"><th style="width: 16.804%; height: 29.4667px;">**Property Name**</th><th style="width: 29.0362%; height: 29.4667px;">**Type**</th><th style="width: 54.1186%; height: 29.4667px;">**Description**</th></tr><tr style="height: 35.0667px;"><td style="width: 16.804%; height: 35.0667px;">TouchNode</td><td style="width: 29.0362%; height: 35.0667px;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 54.1186%; height: 35.0667px;">A node that is used to collect information about the touch.</td></tr><tr><td style="width: 16.804%; height: 46.2667px;">Receivers  
</td><td style="width: 29.0362%; height: 46.2667px;">ProcessValueBehavior ArrayProperty</td><td style="width: 54.1186%; height: 46.2667px;">The process value behaviors that will receive the value as next in the value processing chain.

*This property can be set in the right side of the Scene Tree panel.*

</td></tr></tbody></table>

</div></div>#### **Drag on Track to Value**

Determines the position of a touch move in relation to the associated node and provides it as value in range from 0.0 to 1.0 (normalized). The horizontal boundary of the associated node is the track. The Dragged Node is used to determine the hit area and to determine the position change relative to its center. This behavior can be used as a source to a Value Behavior. Add a Value Behavior as a receiver.

**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-28"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 18.4102%;">**Property Name**</th><th style="width: 18.7809%;">**Type**</th><th style="width: 62.7677%;">**Description**</th></tr><tr><td style="width: 18.4102%;">TargetNode</td><td style="width: 18.7809%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 62.7677%;">The Node which gets the given text. If not set, then the node where the behavior is attached to, will be modified.</td></tr><tr><td style="width: 18.4102%;">UseCenter</td><td style="width: 18.7809%;">bool</td><td style="width: 62.7677%;">If true, the center value defined for the knob bitmap is used to align the knob to the value position, otherwise the calculated center.</td></tr><tr><td style="width: 18.4102%;">TrackDirection</td><td style="width: 18.7809%;">TrackDirection::Enum</td><td style="width: 62.7677%;">Defines if the position will be tracked horizontally or vertically

*Possible values: Vertical, Horizontal*

</td></tr><tr><td style="width: 18.4102%;">LeftTouchMargin</td><td style="width: 18.7809%;">FeatStd::Float</td><td style="width: 62.7677%;">Defines the size for extending or shrinking the touch-sensitive area at the left border of the knob. The size is given in percentage of the knob width. Positive values extend, negative values shrink the area.</td></tr><tr><td style="width: 18.4102%;">RightTouchMargin</td><td style="width: 18.7809%;">FeatStd::Float</td><td style="width: 62.7677%;">Defines the size for extending or shrinking the touch-sensitive area at the right border of the knob. The size is given in percentage of the knob width. Positive values extend, negative values shrink the area.</td></tr><tr><td style="width: 18.4102%;">TopTouchMargin</td><td style="width: 18.7809%;">FeatStd::Float</td><td style="width: 62.7677%;">Defines the size for extending or shrinking the touch-sensitive area at the top border of the knob. The size is given in percentage of the knob height. Positive values extend, negative values shrink the area.</td></tr><tr><td style="width: 18.4102%;">BottomTouchMargin</td><td style="width: 18.7809%;">FeatStd::Float</td><td style="width: 62.7677%;">Defines the size for extending or shrinking the touch-sensitive area at the bottom border of the knob. The size is given in percentage of the knob height. Positive values extend, negative values shrink the area.</td></tr><tr><td style="width: 18.4102%;">OnKnobDragOnly</td><td style="width: 18.7809%;">bool</td><td style="width: 62.7677%;">The position will only be updated when the Knob gets dragged, otherwise clicking on the control will move the knob to the position.</td></tr><tr><td style="width: 18.4102%;">UseExcclusiveMode  
</td><td style="width: 18.7809%;">bool  
</td><td style="width: 62.7677%;">Enabling the option prevents some controls (e.g. Slider) from loosing the touch when leaving the node area.  
</td></tr><tr><td style="width: 18.4102%;">DraggedNode  
</td><td style="width: 18.7809%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 62.7677%;">Defines the node to move along the track, to determine the hit area and to determine the position change relative to its center.

</td></tr><tr><td style="width: 18.4102%; height: 46.2667px;">Receivers  
</td><td style="width: 18.7809%; height: 46.2667px;">ProcessValueBehavior ArrayProperty</td><td style="width: 62.7677%; height: 46.2667px;">The process value behaviors that will receive the value as next in the value processing chain.

*This property can be set in the right side of the Scene Tree panel.*

</td></tr></tbody></table>

</div></div>#### **Action on Value**

Passes a Process Value to a Condition Behavior and if the response is positive, invokes an Action behavior.

**Example Usage**

<div class="contents" id="bkmrk-thermometer-example"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Thermometer Example](https://doc316en.candera.eu/link/572#bkmrk-thermometer-example)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-29"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 16.6873%;">**Property Name**</th><th style="width: 26.4486%;">**Type**</th><th style="width: 56.8641%;">**Description**</th></tr><tr><td style="width: 16.6873%;">Condition</td><td style="width: 26.4486%;">ConditionBehavior\*</td><td style="width: 56.8641%;">The ConditionBehavior that TriggerBehavior passes a value to and expect a response from to see if Action needs to be invoked.</td></tr><tr><td style="width: 16.6873%;">Actions</td><td style="width: 26.4486%;">ActionBehaviorArrayProperty</td><td style="width: 56.8641%;">The set of ActionBehaviors that TriggerBehavior invokes in the event that it receives a positive response form Condition.</td></tr><tr><td style="width: 16.6873%;">Consume Event</td><td style="width: 26.4486%;">bool</td><td style="width: 56.8641%;">Set this flag to false if the event should not be consumed by the trigger. By default it is set to true and if the trigger evaluates to true the event will not be routed to any other behavior.</td></tr></tbody></table>

</div></div>#### **Value**

ValueBehavior sends a value to any behavior derived from ProcessValueBehavior type. It supplies an input to process value behaviors via event.

**Example Usage**

<div class="contents" id="bkmrk-thermometer-example-"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[Thermometer Example](https://doc316en.candera.eu/link/572#bkmrk-thermometer-example)</span>
- <span style="color: rgb(230, 126, 35);">[Format String Example](https://doc316en.candera.eu/link/572#bkmrk-format-string-exampl)</span>
- <span style="color: rgb(230, 126, 35);">[Interpolate Value Example](https://doc316en.candera.eu/link/572#bkmrk-interpolate-value-ex)</span>
- <span style="color: rgb(230, 126, 35);">[Move Node Example](https://doc316en.candera.eu/link/572#bkmrk-move-node-example)</span>
- <span style="color: rgb(230, 126, 35);">[Set Alpha Value Example](https://doc316en.candera.eu/link/572#bkmrk-set-alpha-value-exam)</span>
- <span style="color: rgb(230, 126, 35);">[Set Position Example](https://doc316en.candera.eu/link/572#bkmrk-set-position-example)</span>
- <span style="color: rgb(230, 126, 35);">[Set Rotation Example](https://doc316en.candera.eu/link/572#bkmrk-set-rotation-example)</span>
- <span style="color: rgb(230, 126, 35);">[Switch Image Example](https://doc316en.candera.eu/link/572#bkmrk-switch-image-example)</span>
- <span style="color: rgb(230, 126, 35);">[Set Scale Example](https://doc316en.candera.eu/link/572#bkmrk-set-scale-example)</span>

</div></div></div>**Common Properties**

<div class="contents" id="bkmrk-property-name-type-d-30"><div class="textblock"><table class="doxtable" style="width: 100%;"><tbody><tr><th style="width: 23.7232%;">**Property Name**</th><th style="width: 20.0165%;">**Type**</th><th style="width: 56.2191%;">**Description**</th></tr><tr><td style="width: 23.7232%;">Minimum</td><td style="width: 20.0165%;">[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt; [FeatStd::Variant](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_variant.html) &gt;</td><td style="width: 56.2191%;">Minimum of the Variant value. If Minimum is given as greater than Maximum then the values are internally swapped.

</td></tr><tr><td style="width: 23.7232%;">Maximum</td><td style="width: 20.0165%;">[FeatStd::Optional](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_optional.html "The template class Optional is a wrapper for representing optional objects that may not have been ini...")&lt; [FeatStd::Variant](http://dev.doc.cgistudio.at/APILINK/class_feat_std_1_1_variant.html) &gt;</td><td style="width: 56.2191%;">Maximum of the Variant value. If Maximum is given as smaller than Minimum then the values are internally swapped.</td></tr><tr><td style="width: 23.7232%;">IntervalHandling</td><td style="width: 20.0165%;">IntervalHandling::Enum</td><td style="width: 56.2191%;">Select how the behavior should react when the minimum or maximum limit is exceeded.

*Possible values: Limit, Cycle, Ignore*

</td></tr><tr><td style="width: 23.7232%;">AcceptValueEvent</td><td style="width: 20.0165%;">bool</td><td style="width: 56.2191%;">Set this flag to true to make the value changeable by events/actions.</td></tr><tr><td style="width: 23.7232%;">BroadcastProcessValueEvent</td><td style="width: 20.0165%;">bool</td><td style="width: 56.2191%;">Set this flag to true to broadcast ProcessValue event even if value did not change.</td></tr><tr><td style="width: 23.7232%;">DispatchStrategy  
</td><td style="width: 20.0165%;">CgiStudioControl::EventDispatchStrategyType::Enum</td><td style="width: 56.2191%;">By default the event that indicates that this value behavior has been changed (ValueChangedEvent) is dispatched only on the node to which the value behavior is attached (CgiStudioControl::EventDispatchStrategyType::Direct). To change this you have to select a different dispatch strategy.

*Possible values: Direct, Broadcast, Bubble, Tunnel, DedicatedBehavior*

</td></tr><tr><td style="width: 23.7232%;">DedicatedBehavior  
</td><td style="width: 20.0165%;">Candera::Behavior\*  
</td><td style="width: 56.2191%;">The dedicated behavior that will receive ValueChangedEvent when DedicatedBehavior dispatch strategy is selected.

*This property is only visible if DispatchStrategy is set to "DedicatedBehavior".*

*This property can be set in the right side of the Scene Tree panel.*

</td></tr><tr><td style="width: 23.7232%;">TargetNode  
</td><td style="width: 20.0165%;">[Candera::AbstractNodePointer](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_abstract_node_pointer.html "The class AbstractCameraPointer is an wrapper class to abstract 2D and 3D camera nodes.")</td><td style="width: 56.2191%;">The node on which the for which the EventDispatchStrategy will be applied. If it is not set then the Node will be taken instead.

*This property is only visible if DispatchStrategy is set to "Direct", "Broadcast", "Bubble" or "Tunnel".*

</td></tr><tr><td style="width: 23.7232%;">Variant  
</td><td style="width: 20.0165%;">Candera::Variant</td><td style="width: 56.2191%;">Specifies the type and the value to pass onto Process Value Behavior.</td></tr><tr><td style="width: 23.7232%; height: 46.2667px;">Receivers  
</td><td style="width: 20.0165%; height: 46.2667px;">ProcessValueBehavior ArrayProperty</td><td style="width: 56.2191%; height: 46.2667px;">The process value behaviors that will receive the value as next in the value processing chain.

*This property can be set in the right side of the Scene Tree panel.*

</td></tr></tbody></table>

</div></div>---

#### Value Generator

The Value Generator is a demo behavior. It allows you to configure minimum and maximum values, period, and update interval, and is used for UI verification and simulation purposes. It appears in the tool when CONTROLS\_DEMO\_BEHAVIORS\_ENABLED is enabled via CMake.

<p class="callout info">Related page: <span style="color: rgb(230, 126, 35);">[Control Behaviors Flags](https://doc316en.candera.eu/books/appendix-WCP/page/control-behaviors-flags)</span>  
</p>

**Common Properties**

<table class="doxtable" id="bkmrk-property-name-type-d-31" style="width: 100%; height: 376px;"><tbody><tr style="height: 29.6px;"><th style="width: 23.7131%;">**Property Name**</th><th style="width: 20.0191%;">**Type**</th><th style="width: 56.244%;">**Description**</th></tr><tr style="height: 31.6px;"><td style="width: 23.7131%; height: 31.6px;">GeneratorFunction</td><td style="width: 20.0191%; height: 31.6px;">Enum</td><td style="width: 56.244%; height: 31.6px;">The type of function used to generate values (linear, sin, etc.)</td></tr><tr style="height: 29.6px;"><td style="width: 23.7131%; height: 29.6px;">Minimum</td><td style="width: 20.0191%; height: 29.6px;">Float</td><td style="width: 56.244%; height: 29.6px;">The minimum for the generated values.</td></tr><tr style="height: 32px;"><td style="width: 23.7131%; height: 32px;">Maximum</td><td style="width: 20.0191%; height: 32px;">Float</td><td style="width: 56.244%; height: 32px;">The maximum for the generated values.</td></tr><tr style="height: 29.6px;"><td style="width: 23.7131%; height: 29.6px;">OffsetMs</td><td style="width: 20.0191%; height: 29.6px;">Int</td><td style="width: 56.244%; height: 29.6px;">The time offset where the function is evaluated.</td></tr><tr style="height: 29.6px;"><td style="width: 23.7131%; height: 29.6px;">PeriodMs</td><td style="width: 20.0191%; height: 29.6px;">Int</td><td style="width: 56.244%; height: 29.6px;">The time period after which the generated values repeat.</td></tr><tr style="height: 25.2px;"><td style="width: 23.7131%; height: 25.2px;">SamplerateMs</td><td style="width: 20.0191%; height: 25.2px;">Int</td><td style="width: 56.244%; height: 25.2px;">The update rate of the generated value.</td></tr><tr style="height: 29.6px;"><td style="width: 23.7131%; height: 29.6px;">GenerateValues</td><td style="width: 20.0191%; height: 29.6px;">bool</td><td style="width: 56.244%; height: 29.6px;">Set this flag to true to generates values at sample rate. If set to false, no values are generated.

</td></tr><tr style="height: 46.4px;"><td style="width: 23.7131%; height: 46.4px;">Event Dispatch Strategy</td><td style="width: 20.0191%; height: 46.4px;">EventDispatchStrategyType::Enum</td><td style="width: 56.244%; height: 46.4px;">The way the event gets sent.

Possible values: Direct, Broadcast, Bubble, Tunnel, DedicatedBehavior

</td></tr><tr style="height: 46.4px;"><td style="width: 23.7131%; height: 46.4px;">Dedicated Behavior</td><td style="width: 20.0191%; height: 46.4px;">Candera::ProcessValueBehavior\*</td><td style="width: 56.244%; height: 46.4px;">The dedicated process value behavior that will receive the change value event. This property can be set in the right side of the Scene Tree panel.

</td></tr><tr style="height: 46.4px;"><td style="width: 23.7131%; height: 46.4px;">Target Node</td><td style="width: 20.0191%; height: 46.4px;">Candera::AbstractNodePointer</td><td style="width: 56.244%; height: 46.4px;">The target node to which the events are routed. If this property is not set, the event will be routed to the node of the behavior.

</td></tr></tbody></table>

# Set Uniform

#### **Set Uniform**

Sets the value of a specified uniform using the received input on a shader associated with a given node (NodeWithShader). The input value can be received from a value behavior. This behavior is available for 3D scenes only.

**Common Properties**

<table class="doxtable" id="bkmrk-property-name-type-d-1" style="width: 100%; height: 77.0001px;"><tbody><tr style="height: 29.4667px;"><th style="width: 17.2967%; height: 29.4667px;">**Property Name**</th><th style="width: 28.1729%; height: 29.4667px;">**Type**</th><th style="width: 54.4893%; height: 29.4667px;">**Description**</th></tr><tr style="height: 29.4667px;"><td style="width: 17.2967%; height: 29.4667px;">Uniform Name</td><td style="width: 28.1729%; height: 29.4667px;">FeatStd::String</td><td style="width: 54.4893%; height: 29.4667px;">The name of the uniform whose value will be set.</td></tr><tr style="height: 18.0667px;"><td style="width: 17.2967%; height: 18.0667px;">Node With Shader</td><td style="width: 28.1729%; height: 18.0667px;">Candera::Node\*</td><td style="width: 54.4893%; height: 18.0667px;">Node whose uniform setter's property will be changed.</td></tr></tbody></table>

# BehaviorGroup

BehaviorGroup (<span style="color: rgb(230, 126, 35);">[Fusion Group](https://doc316en.candera.eu/link/1060#bkmrk-fusion-group-%28behavi)</span>) is used to group multiple behaviors (Fusion nodes). This simplifies the organization of behaviors (Fusion nodes) in the extra scene tree and on the Fusion diagram, and makes overall management easier. Once created, BehaviorGroups can be renamed to anything you want and duplicated for other uses.

A similar function is the <span style="color: rgb(230, 126, 35);">[BehaviorBuildingBlock](https://doc316en.candera.eu/books/controls-and-behaviors/page/behavior-building-blocks-behavior-blocks)</span>, which can be instantiated by creating a template. For this reason, BehaviorGroup is easier and faster to use.

##### How to use

1. Add a BehaviorGroup to the extra scene tree of the target node by dragging and dropping it from the Behaviors in the Toolbox panel. 
    - A Fusion Group node will also be added on the target node's Fusion diagram (connected to the top node).
2. After selecting the behavior to be added, copy and paste it into the BehaviorGroup. 
    - It will be added in the same way on the Fusion diagram.

##### Renaming

After selecting the target BehaviorGroup in the extrascene tree, rename it in one of the following ways

- Select \[ Rename \] from the context menu.
- Change \[ General &gt; Name \] in the properties panel.

##### Copy

After selecting the target BehaviorGroup in the extrascene tree, select \[ Copy \] from the context menu and execute \[ Paste \] at the any location.

# Control States

#### Introduction

Controls are components that a user interacts with through direct manipulation to read or edit information about an application. In CGI Studio Controls are templates created for later reuse via control nodes. They are meant to be interactive and some of them even react to user input like touch or focus. But as Controls should also be able to change their state corresponding to a user input the concept of Control States was introduced.

Possible states of a Control are:

<div class="contents" id="bkmrk-selected%3A-used-for-c"><div class="contents"><div class="textblock">- Selected: Used for Controls which can be toggled between selected and deselected. E.g. CheckBox, RadioButton.
- Pressed: Nearly every touchable Control has a Pressed state to show a visual reaction to a touch.
- Enabled: Enabled state can for example be used to set the Control disabled. E.g. receives no input, grayed out, etc.
- Highlighted: This state can be used for cases when dragging a control, etc.
- KeyboardFocused: Keyboard focus refers to the UI element that is currently receiving input. Only one UI element in an HMI can have keyboard focus at the same time. This is handled by the KeyboardFocusManager.
- ScopeFocused: The scope focus is kept per focus scope. An HMI can have more than one focus scope. When a focus scope becomes active, then the UI element having the scope focus will receive keyboard focus. Yet there is no manager for the scope focus.
- Hover: Used to mark the Control which is currently hovered.

</div></div></div>This concept offers an easy way to manage the visual representation of different states of Controls.

<div drawio-diagram="2941"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-03/drawing-7-1677639988.png" alt="drawing-7-1677639988.png"/></div>

<div class="contents" id="bkmrk--0"><div class="contents"><div class="textblock">  
</div></div></div>As the image shows, the Button reacts to the users input in an intuitive way. But therefore it is necessary that the Button has different states like Hovered, Pressed, or Focused (also see chapter <span style="color:rgb(230,126,35);">[Control Examples](https://doc316en.candera.eu/link/650#bkmrk-page-title)</span>). The second example shows the CheckBox getting selected by a user input which basically demonstrates the workflow of Control States.

<div class="contents" id="bkmrk--1"><div class="contents"><div class="textblock"><div drawio-diagram="2942"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-03/drawing-7-1677640014.png" alt="drawing-7-1677640014.png"/></div>

</div></div></div>#### Description

As already shown in the introduction the state handling of Controls basically consists of three layers. For further understanding these three layers can be split up more detailed as shown in the graph below:

<div class="contents" id="bkmrk--2"><div class="contents"><div class="textblock"><div drawio-diagram="2943"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-03/drawing-7-1677640032.png" alt="drawing-7-1677640032.png"/></div>

</div></div></div>#### 1. Event Emitter

The **first layer** represents the emitter of events which get received by the Handle Control State Behavior. They all have the purpose to change the state of a Control. To give a short overview following three categories will be explained.

<div class="contents" id="bkmrk-input-handling-%3A-e.g"><div class="contents"><div class="textblock">- <span style="color:rgb(230,126,35);">[Input Handling](https://doc316en.candera.eu/books/general-concepts/chapter/input-handling)</span> : e.g. <span style="color:rgb(230,126,35);">[Touch Input Handling](https://doc316en.candera.eu/link/299#bkmrk-page-title)</span> . Therefore the ControlTouchSession receives a TouchEvent and passes the information to the Control. Therefore it uses more specific events in the sense that a combination of touch events result in a new input event (e.g. PressedEvent, HoveredEvent or ClickEvent).
- **Behaviors**: Also with Behaviors the state of a Control can be changed. e.g. the Set Control State Behavior is an Action Behavior which sends a ChangeStateEvent to the Handle Control State Behavior. <div drawio-diagram="2944"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-03/drawing-7-1677640057.png" alt="drawing-7-1677640057.png"/></div>
    
    The first two properties offer to select the state which has to be changed and the status (true/false). The other properties define to which node the ChangeStateEvent should get sent to.
- **Focus Manager**: The focus refers to the UI element that is currently receiving input. Only one UI element in an HMI can have focus at the same time. This is handled by the KeyboardFocusManager. <table><tbody><tr><td><div class="image"><div drawio-diagram="2946"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-03/drawing-7-1677640100.png" alt="drawing-7-1677640100.png"/></div>
    
    </div></td></tr><tr><td>*TextButtons which are all focusable. Clicking on the second button to set the focus to it would cause the first button to lose the focus.*</td></tr></tbody></table>
    
    It sends a FocusEvent to the Control which got the new focus and to the Control which lost the focus. As for the other Events also the FocusEvent is basically meant to be received by the Handle Control State Behavior. If the Handle Control State Behavior receives a FocusEvent with the LostKeyboardFocus information it sets the focused state to false and vice versa.   
    Though the Control (Handle Control State Behavior) has to be set to Focusable as shown in the image below. <div drawio-diagram="2947"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-03/drawing-7-1677640113.png" alt="drawing-7-1677640113.png"/></div>

</div></div></div>#### 2. Handle Control State Behavior

The **second layer** represents the Handle Control State Behavior, the basic Behavior which handles the states of a control.

Therefore it receives Events from the ControlTouchSession (HoverEvent, PressedEvent, ClickEvent), the KeyboardFocusManager (FocusEvent) or from the Set Control State Behavior (ChangeStateEvent).

Corresponding to this Events the Handle Control State Behavior sets the state and furthermore sends a StateEvent (mainly to EventHandlers with StateConditions as explained in the next paragraph). This event always consists of two variables. The first one contains the states as they were before the change and the second one contains the states after the change. This makes it possible to define more specific conditions as explained in the next paragraph.

#### 3. Event Handler

The **third layer** represents the EventHandler which receives the State Event from the Handle Control State Behavior and changes the visual representation of the Control. For checking the State Event the State Condition should be used.

<div class="contents" id="bkmrk--3"><div class="contents"><div class="textblock"><div drawio-diagram="2948"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-03/drawing-7-1677640128.png" alt="drawing-7-1677640128.png"/></div>

</div></div></div>The two properties define which state should be checked and how the state changed:

<div class="contents" id="bkmrk-changedtotrue%3A-state"><div class="contents"><div class="textblock">- ChangedToTrue: state changed from false to true
- ChangedToFalse: state changed from true to false
- IsTrue: state is true (previous state doesn't matter)
- IsFalse: state is false (previous state doesn't matter)

</div></div></div>If the condition is fulfilled the Event Handler triggers an Action Behavior which leads to the change of the visual representation. (Predefined Controls often use Set Image Behavior and Set Color Behavior.)

<div class="contents" id="bkmrk--4"><div class="textblock"><dl class="note"><dt>  
</dt><dd></dd></dl></div></div><dl class="note" id="bkmrk-to-learn-more-about-"><dt></dt><dd><p class="callout info">to learn more about the concept of Event Handlers also see chapter <span style="color:rgb(230,126,35);">[EventHandler Tab](https://doc316en.candera.eu/link/569#bkmrk-page-title)</span> .</p>

</dd></dl><div class="contents" id="bkmrk--5"><div class="textblock">---

</div></div>

# Control Examples

#### Button Control

This section explains how the Button Control works.

<div class="contents" id="bkmrk-"><div class="contents"><div class="textblock"><div drawio-diagram="2949"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-03/drawing-7-1677640214.png" alt="drawing-7-1677640214.png"/></div>

</div></div></div>The Control State Handler Behavior sends its state as an event. Event Handler Behavior uses a „Check Control State“ condition. If the Condition is positive, one or more Actions are invoked.

<div class="contents" id="bkmrk--0"><div class="contents"><div class="textblock"><div drawio-diagram="2950"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-03/drawing-7-1677640231.png" alt="drawing-7-1677640231.png"/></div>

</div></div></div>The internal Behaviors define how the appearance of the Button changes. The user can add additional actions to a Button instance like starting an animation or triggering transitions.

<div class="contents" id="bkmrk--1"><div class="contents"><div class="textblock"><div drawio-diagram="2951"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-03/drawing-7-1677640247.png" alt="drawing-7-1677640247.png"/></div>

</div></div></div>Advantages of using the Button Control:

<div class="contents" id="bkmrk-a-logic-combination-"><div class="contents"><div class="textblock">- A logic combination of multiple conditions is also possible.
- As many different Action Behaviors are available, a lot of different kinds of Button Controls can be realized without developing source code.
- Each instance of a button can cause an Action in the UI without writing source code.
- Custom content is not limited to a simple text, anything can be attached to the anchor node.

</div></div></div>#### Gauge Control

Compared to the Button Control the Gauge Control rather visualizes a value instead of states. This value is passed along a processing chain. Further wise the value is used for actions

<div class="contents" id="bkmrk-transformation-%28rota"><div class="contents"><div class="textblock">- Transformation (rotation, psoition, size, ...)
- Graphicsl effect (alpha, switch image, zoom, ...)
- Manipulating an animatoin, invoking an action, ...

<div drawio-diagram="2952"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-03/drawing-7-1677640263.png" alt="drawing-7-1677640263.png"/></div>

</div></div></div>#### Combining Controls

This section shows how Controls can be combined. It mainly shows how simple it is to achieve the following points with Controls:

<div class="contents" id="bkmrk-communication-betwee"><div class="contents"><div class="textblock">- Communication between the Controls.
- Adding interactivity to the application.

</div></div></div>The idea of this example is to take a FlipBook-Control and add touchable Controls to the scene that allow to flip through the images of the FlipBook. Therefore a slider will be added that allows scrolling through the images by sliding it. Further wise two buttons will be added that flip to the next or previous image.

#### Scene Setup

Drag the following Controls into a 2D Scene:

<div class="contents" id="bkmrk-flipbook-slider-two-"><div class="contents"><div class="textblock">- FlipBook
- Slider
- Two TextButtons

</div></div></div>Place the Controls accordingly. Note that one button increases the FlipBook-value while the other lowers it. In the end the scene should look similar to this example:

<div class="contents" id="bkmrk--2"><div class="contents"><div class="textblock"><div class="image"><div drawio-diagram="2953"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-03/drawing-7-1677640287.png" alt="drawing-7-1677640287.png"/></div>

  
</div></div></div></div>While the scene-tree should look similar to this:

<div class="contents" id="bkmrk--3"><div class="contents"><div class="textblock"><div class="image"><div drawio-diagram="2954"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-03/drawing-7-1677640299.png" alt="drawing-7-1677640299.png"/></div>

</div></div></div></div>#### Adding Behaviors

To connect the Slider to the FlipBook simply add a "Forward Value"-Behavior (can be found under "Value Processing") on the Slider and set the FlipBook as TargetNode of the Behavior. Note that the FlipBook only support a value from 0 to 29 by default (because it exists of 29 images). This means that the "Maximum"-property of the Slider needs to be set to 29. This is it. The result can be tested by setting the Value of the slider which will lead to switching the images of the FlipBook.

Connecting the Buttons with the FlipBook works a bit differently because the value of the FlipBook should be increased or decreased relative to the value. To connect a Button with the FlipBook add a "Send Value as Event"-Behavior to the "Actions"-section of the Behaviors of the Button. This Behavior can be found under "Action/Property/". Assuming that this is the button that increases the value the Value-property must be set to "1.00". Because the value should change relatively to the current value the "ChangeValue"-property must be set to "Relative". Finally, the target node should be set to the FlipBook.

Note that for a better interaction the Slider should also jump to a new position if the Button is pressed. Therefore the same procedure has to be done as in the last paragraph, just for the Slider. This means that a new "Send Value as Event"-Behavior should be added to the Button whereas its target node is the Slider this time.

In the end the Button that increases the value of the FlipBook should look similar to the following screenshot:

<div class="contents" id="bkmrk--4"><div class="contents"><div class="textblock"><div class="image"><div drawio-diagram="2955"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-03/drawing-7-1677640321.png" alt="drawing-7-1677640321.png"/></div>

</div></div></div></div>For the Button that decreases the value, the same procedure has to be repeated. This time the value of the "Send Value as Event"-Behaviors has to be set to "-1.00". Naturally, the first button can just be cloned instead of repeating every single step.

#### Result

The final result of this control-composition can be best seen in the Player. The slider can be slided via touch-input whereby the FlipBook animates according to the position of the Slider-knob. Further wise the buttons can be pressed to switch to the next or previous image. This also sets the slider to a new position.

---