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. 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. 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. Main differences of controls compared to regular scenes: 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 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. The following impact has to be considered: Cross-references (nodes or behaviors) to different scenes may occur. For details see Cross-Reference Implications . Control Use Cases 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. 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. Use Controls Use Controls Controls are displayed in Toolbox panel from where they can be dropped into scenes which will result in control nodes. 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). The Scene Tree panel of a scene lists a control node as a single entity with all the anchors defined as children. 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. The "Configure Public Control Properties" panel can be opened just when a control scene is selected - as can be seen in the image below. 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. 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 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. All the name of the properties have to be distinct/different. If not, a "Property name must be unique." warning message will be displayed. 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. If the control with public properties is used in a scene, those properties will be visible in the Properties panel, too. 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. 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: "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. In the "Add New Template" dialog, a location within the solution and a name for the new control is defined. The new control will be available in the Solution Explorer panel, and in the Toolbox -> Controls. Open the control for editing with a double click. Create an Empty Control In Solution Explorer, use the context menu "Add New Item" to create a new control.   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: Modify the scene graph structure and content of the control; Create and modify anchors to a control. 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. 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: 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. 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. 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:   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.   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. 2. Use Case: Navigation Overlay Major elements for this use case are: 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. Detailed descriptions can be found in Predefined Controls and Predefined Behaviors . 3. Prerequisites 3.1. Cmake flags Enable and disabling mixed reality and streaming features: 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. 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 CGI Studio 3PSW 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: https://gstreamer.freedesktop.org/documentation/installing/on-windows.html 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. 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: https://gstreamer.freedesktop.org/ . 3.3. How to build the CGI Player using GStreamer and Microsoft Visual Studio 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-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: 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 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 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 Open CMake Input the location of your source code into the first input field "Where is the source code:" ( /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. Finally, you can start the Player application. 4. Interfaces 4.1. Events 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. 4.2. Messages 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. 5. Known Issues and Limitations 5.1. Streaming 5.1.1 Video Stream 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. 5.1.2 GStreamer GStreamer only supports Windows and Linux platforms. The default GStreamer modules only support the "Baseline" profile of the H.264 codec. 5.2. Mixed Reality 5.2.1. PoseTracking 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. 5.2.2. Points of Interest 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. List Control - Snapping Mechanism Snap List Item Extension The  Snap List Item Extension Behavior is a Control > 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. 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) Wraparound is only available for static lists with an accumulated complete item size that is larger than the arrange area of the list. Configuration The Snap List Item Extension behavior can be applied to a list control via drag and drop from the toolbox. 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  Configure ListBehavior in Custom List 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: 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. 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. 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: 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: 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: 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. 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. 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. The CustomList looks like this in the Scene Tree: Drag and drop a Snap List Item Extension behavior to the CustomList: Drag the ListBehavior from the CustomList's Behaviors down to the SnapListItemBehavior 's ListBehavior: Now you can see that the ListBehavior property has received a new value: 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. 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. 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 : 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. Data flow for BackToPrevious action: 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. Data flow for BackToElement action: Same as above but the state machine should contain the related transitions. State Machine Example 1) Create a new state machine in Solution explorer tab as explained in the State Machine Basic Operation 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. 4) Create the Initial State and a State again but this time inside the MainState. 5) Create several sample scenes. On the BreadcrumbHub scene add a Breadcrumb control. 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. 7) Create the next states similarly. 8) Fill each state with actions that are to be called. Below is an example of how to pass nested path with several levels. 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. 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. 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. Sample Solution 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. 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 Property Name Type Description Scroll Direction Enum (Vertical, Horizontal) The direction in which the Scrollbar scrolls. Handle Minimum Size Integer The minimum height (for vertical scrollbar) or minimum width (for horizontal scrollbar) of the handle in pixels. Scrollbar Visibility Enum (Automatic, Collapsed, Visible) Configure the visibility of the scrollbar. By default it is set to Automatic which will determine the visibility based on the actual content. Min Movement To Scrolling Integer Minimum distance a touch gesture needs to move to start scrolling. Blend Type BlendType::Enum Sets the blend option. 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. Behavior Name Type predefined/userdefined Description Event Bridge Control Behavior predefined in List and ScrollView Control Forwards the ScrollableEvent from the Scrollbar to a Behavior List Control ConstructionKit Behavior predefined in List Control Internally receives the ScrollableEvent from the Scrollbar. Scroll View Control ConstructionKit Behavior predefined in ScrollView Control Internally receives the ScrollableEvent from the Scrollbar. 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. Properties Property Name Type Description Selected Indicator Image Candera::Image2D Image displayed when the control is in selected state. Indicator Image Candera::Image2D Image displayed when the control is in base deselected state. Selected Indicator Pressed Image Candera::Image2D Image displayed when the control is in selected state and pressed. Indicator Pressed Image Candera::Image2D Image displayed when the control is in deselected state and pressed. Hovered Color Candera::Color The color to blend with the current control image when the control is hovered. Disabled Color Candera::Color The color to blend with the current control image when the control is disabled. 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. Properties Property Name Type Description Enabled bool 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. Focusable bool If true, the control is focusable. Otherwise the control can not be focused. Normal Image 9 Patch Image The image which is used as Button Image for the color multiplication of other states like Hovered. Pressed Image 9 Patch Image The image which is used as Button Image if the pressed state applies. Focused Image 9 Patch Image 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. Hovered Color Property Reference Enum (Self, Other) Choose how the property gets set. Via own property or from another Behavior. Hovered Color Candera::Color 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". Hovered Color Property Provider Candera::Behavior 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". Disabled Color Property Reference Enum (Self, Other) Choose how the property gets set.Via own property or from another Behavior. Disabled Color Candera::Color The color to set on the disabled Button. This property is only available if Disabled Color Property Reference is configured for "Self". Disabled Color Property Provider Candera::Behavior 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". Padding Candera::Margin Padding of the Button. Used when a content is attached. Blend Type BlendType::Enum Sets the blend option. Functionality The functionality of the button can be edited in the Behaviors panel or in the EventHandler Tab (see chapter EventHandler Tab ). An EventHandler that checks for Clicks will perform the user defined action. Behavior Name Type predefined/userdefined Description EventHandler Control Behavior predefined Checks a defined condition and invokes a defined action behavior if that condition is true. CheckClick Input Condition Behavior predefined Condition checks if the button has been clicked Action Action Behavior userdefined Userdefined action that will be performed when the button is clicked. 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. Properties Property Name Type Description Value Float/Variant Current value (position) of the CoverFlow. Minimum Float/Variant The minimum value of CoverFlow. Maximum Float/Variant The maximum value of CoverFlow. Zoom Minimum Float/Variant Zoom effect minimum value. Zoom Maximum Float/Variant Zoom effect maximum value. Zoom By Layout bool Wethere zoom accomplished by layout size. Increase Swipe Direction Enum (Left, Right, Up, Down) The direction of the swipe to increase value Decrease Swipe Direction Enum (Left, Right, Up, Down) The direction of the swipe to decrease value Orientation StackLayouter::Arrangement Selects arrangement for cover flow. See Set Layout for more information. Blend Type BlendType::Enum Sets the blend option. 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). Properties Property Name Type Description Enabled bool If set to false it will not react on focus events and does not have to support different visualizations for the different states. Focusable bool If true, the control is focusable. Otherwise the control can not be focused. Current Value FeatStd::Int32 Current value for the dial. Step Size FeatStd::Float Step size in degrees. Minimum Rotation FeatStd::Float Minimum rotation of the dial. Maximum Rotation FeatStd::Float Maximum rotation of the dial. Knob Image Candera::Image2D The image to set on the effect. BackgroundImages Candera::Image2D A list of images which should be available for selection. Focus Image Candera::Image2D The image to set on the effect. Disabled Color Candera::Color The color which can be used from other Behaviors. Hovered Color Candera::Color The color which can be used from other Behaviors. Increment Key Code Candera::KeyboardKeyCode::Enum Check the KeyCode of the pressed key (can also be modifier). Decrement Key Code Candera::KeyboardKeyCode::Enum Check the KeyCode of the pressed key (can also be modifier). Blend Type BlendType::Enum The blend type that will be set on the affected node. 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. Nine-Patch-Images are not supported by Drawer Image properties (Knob Pressed Image, Knob Normal Image). Properties Property Name Type Description Open bool If true, the control is shown in it's opened state. Otherwise the visual representation of the control will be it's closed state. Appear Direction Enum (Left, Right, Top, Bottom) Specifies the direction from which the content will appear. Knob Pressed Image Candera::Image2D Specifies the look of the dragable Knob when it is pressed. Note: Should have the same or a bigger size than the Normal Image. Knob Normal Image Candera::Image2D 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. Drag Enabled bool If true, then the dragable Knob is active and visible. Blend Type BlendType::Enum Sets the blend option. 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. Properties Property Name Type Description Identifier String Identifier which is used when emitting an Event (e.g. Click Event). Enabled bool If set to false, it will not react on focus events and does not have to support different visualizations for the different states. Focusable bool If true, the control is focusable. Otherwise the control can not be focused. Normal Image 9 patch image The Image which is used if the normal state applies. Pressed Image 9 patch image The Image which is used if the pressed state applies. Focused Image 9 patch image 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. Hovered Color Candera::Color The color which is used as hovered color for blending with the Button Image. Disabled Color Candera::Color The color which is used for blending with the disabled Button Image. Padding Candera::Margin Padding of the button. Used when a content is attached. Icon Horizontal Alignment Enum (Left, Center, Right) The horizontal alignment of the icon. Icon Vertical Alignment Enum (Top, Center, Bottom) The vertical alignment of the icon. Icon Normal Image Candera::Image2D The image which is used as Icon on the button if not pressed or hovered. Icon Pressed Image Candera::Image2D The image which is used as Icon on the button if the pressed state applies. Icon Focused Image Candera::Image2D The image to set on the effect. Icon Hovered Color Candera::Color The color which is used as hovered color for blending with the button Icon image. Icon Disabled Color Candera::Color The color which is used for blending with the disabled button Icon Image. Blend Type BlendType::Enum Sets the blend option. 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. The default text and the placeholder text have got additional properties for customizing them visually. Properties Property Name Type Description Enabled bool 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. Focusable bool If true, the control is focusable. Otherwise the control can not be focused and will not receive any inputs. DefaultText String Text which will be set as default text. Text Color Candera::Color The color set on the text. Text Style Text Style The Style that will be set to the Text Node. Text Disabled Color Candera::Color The color to set on the text if the control is disabled. Placeholder Text String The Text that will be set to the Text Node. Placeholder Text Color Candera::Color The color of the placeholder text. Placeholder Text Style Text Style The Style that will be used. Placeholder Disabled Color Candera::Color The color to set on the effect of the Text. Caret Image Candera::Image2D The image to set as caret. Off Time Ms Integer Milliseconds before switching the blinking caret to On state. On Time Ms Integer Milliseconds before switching the blinking caret to Off state. Background Image Candera::Image2D The image to set as Background. BG Disabled Color Candera::Color The color to set on the BG if the control is disabled. Focused Image Candera::Image2D The image to set as FocusBorder. Set Value On Enter bool If true, the value will be set when the Enter key is pressed. Set Value On Each Change bool If true, the value will be set on each input. Max Text Length Integer Maximum count of characters. Just Digits bool If true, the InputField will receive just digits. Blend Type BlendType::Enum The blend type that will be set on the affected nodes. Keyboard Node Node Keyboard node. Keyboard Layout Name String Layout name. 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. Properties Property Name Type Description Configuration Script String 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 Keyboard Behavior for more information. State Machine Node Node 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. Navigate Up Key Code Candera::KeyboardKeyCode::Enum Key used for navigating up Navigate Down Key Code Candera::KeyboardKeyCode::Enum Key used for navigating down Navigate Next Key Code Candera::KeyboardKeyCode::Enum Key used for navigating right Navigate Previous Key Code Candera::KeyboardKeyCode::Enum Key used for navigating left Navigate Start On Down Key bool Enter navigation mode when pressing down key for the first time Navigate End On Up Key bool Exit navigation mode when pressing up key on the first row Navigate Start Key Code Candera::KeyboardKeyCode::Enum Key used for entering navigation mode Navigate End Key Code Candera::KeyboardKeyCode::Enum Key used for exiting navigation mode Navigate Close Key Code Candera::KeyboardKeyCode::Enum Key used for closing keyboard Navigate Invoke Key Code Candera::KeyboardKeyCode::Enum Key used for invoking key action Blend Type BlendType::Enum The blend type that will be set. 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. Properties Property Name Type Description Enabled bool If true, then item is visible Focus Image On Selection 9-patch image The border image is set while the MenuItem is selected Focus Image On Dragging 9-patch image The border image is set while the MenuItem is in edit mode Delete Button Normal Image 9-patch image The image will be shown in top-right of the Control in edit mode to enable deletion of the instance of MenuItem Delete Button Pressed Image 9-patch image The image will be set while Delete Button is pressed Delete Button Hovered Color Candera::Color The color will be blend with Delete Button images while a user has his cursor over the Delete Button Focusable bool If true then focus node will be visible Image 9-patch image A bitmap that is the icon of the Control Label String A text that will be set to the Text Node. Label Color Candera::Color A color of the Icon Label. Label Style Text Style A font style of the Text. Label Trimming Enum (None, Ellipsis, Custom Text) Trimming defines the behavior to employ when content overflows the content area Blend Type BlendType::Enum The blend type that will be set. 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. Properties Property Name Type Description ActiveScreenIndex FeatStd::UInt32 Index (starting at 0) of the current visible screen. NumberOfScreens FeatStd::UInt32 Default number of screens (can be changed in runtime) Rows FeatStd::UInt32 Number of rows of a grid in a single screen Columns FeatStd::UInt32 Number of columns of a grid in a single screen Items Binding Source Binding to a list containing icons and labels that should be accessible in the MenuScreen Swap Item Animation Easing Function EasingFunctions::Enum Interpolation method for animations of swapping items Swap Item Animation Length FeatStd::Float Length of the swapping animation Change Screen Animation Easing Function EasingFunctions::Enum Interpolation method for animations of changing screens Change Screen Animation Length FeatStd::Float Length of the changing animation Key Code To Move Selection Left Candera::KeyboardKeyCode::Enum Key that changes focus from an item to its left neighbor Key Code To Move Selection Right Candera::KeyboardKeyCode::Enum Key that changes focus from an item to its right neighbor Key Code To Move Selection Up Candera::KeyboardKeyCode::Enum Key that changes focus from an item to its top neighbor Key Code To Move Selection Down Candera::KeyboardKeyCode::Enum Key that changes focus from an item to its bottom neighbor Focusable bool Enables grabbing focus by the Control Screen Change Timeout FeatStd::Float Time of dragging a Menu Item outside the Control to fire Change Screen Background Image Candera::Image2D Background image of screens Focus Border Image Candera::Image2D Image of the border rendered when the Control grabs focus Limit Of Screens FeatStd::UInt32 Maximum number of screens that may be handled by the Control in runtime Page Indicator Node Node Page indicator that helps in navigation between screens of the Control Blend Type BlendType::Enum The blend type that will be set. 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. Properties Property Name Type Description Target Node Node A node to exchanging events. Active Page Index FeatStd::UInt32 Index of currently visible page. Must be in range from 0 to Number Of Pages - 1  . Number Of Pages FeatStd::UInt32 Number of available pages. Decrement Key Code Candera::KeyboardKeyCode::Enum The Key Code triggering decrement of the value. Increment Key Code Candera::KeyboardKeyCode::Enum The Key Code triggering increment of the value. Blend Type BlendType::Enum Sets the blend option. 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 . 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. Properties Property Name Type Description Focusable bool If true, the control is focusable. Otherwise the control cannot be focused. Value Float The value which will be changed using the roll Min Float The minimum value which can be reached. This value is always smaller or equal to the MaxValue. Max Float The maximum value which can be reached. This value is always bigger or equal to MinValue Step Float The increment/decrement of the value. LensVisible bool Is lens group visible? Enables highlighting of the current value, default zooming and bordering it.  Use Cyclic Roll bool Is roll cyclic? If true the MinValue of the Control can be reached after the MaxValue of the Control and vice versa Allow Dragging Past Limit bool 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. Value Style Candera::TextRendering::Style Sets the text style for the values outside the Lens. Value Color Candera::Color Specifies color of values in the vertical list outside the Lens Lens Style Candera::TextRendering::Style Sets the text style for the values inside the Lens. Unit Text String Text used in lens (it means: when the lens is used at all) to present a unit of the value Unit Style Candera::TextRendering::Styler Sets the text style for the Unit Text. Unit Margin Candera::Margin Specifies margin of the UnitText Unit Color Candera::Color Specifies color of the UnitText Decoration Image Candera::Image2D Specifies a border image of the Lens Text Input Color Candera::Color Specifies color of the text entered in the InputField while editing the current value of the Control Text Edit Background Candera::Image2D The background image used for the Input Field when entering Text Edit mode. Max Text Length Unsigned Int 16 Specifies maximum count of characters that may be entered while editing the current value of the Control Decrement Key Code Candera::KeyboardKeyCode::Enum Key used to decrement the current value of the Control Increment Key Code Candera::KeyboardKeyCode::Enum Key used to increment the current value of the Control Edit Key Code Candera::KeyboardKeyCode::Enum Key used to enter edit mode (show InputField) of the current value of the Control Blend Type BlendType::Enum Sets the blend option. Keyboard Node Node Specifies which Keyboard control should be used when entering edit mode. Keyboard Layout Name String Layout name. 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. Properties Property Name Type Description Enabled bool If set to false it will not react on focus events and does not have to support different visualizations for the different states. Focusable bool If true, the control is focusable. Otherwise the control can not be focused. Value Variant The value to be formatted Step Size Variant Increment/Decrement step value. Minimum Value Variant Minimum value Maximum Value Variant Maximum value Text Format String The format string which includes one format specifier (beginning with %). See C printf() function. Text Alignment Enum (Left, Centered, Right, Automatic) The horizontal text alignment, using the culture text direction, is used to define how text will be horizontally aligned within its layout area. Text Color Candera::Color Text color. Disabled Text Color Candera::Color Disabled text color. Text Style Candera::TextRendering::Style The Style that will be used. Spinbox Color Hovered Candera::Color The color for hovered SpinBox. Spinbox Color Disabled Candera::Color The color for disabled SpinBox overlay. Background Image Candera::Image2D The image to set on the effect. Arrow Up Normal Image Candera::Image2D The increment button image. Arrow Up Pressed Image Candera::Image2D The increment button pressed image. Arrow Down Normal Image Candera::Image2D The decrement button image. Arrow Down Pressed Image Candera::Image2D The decrement button pressed image. Increment Key Code Candera::KeyboardKeyCode::Enum KeyCode of the key used to increase value. Decrement Key Code Candera::KeyboardKeyCode::Enum KeyCode of the key used to decrease value. Blend Type BlendType::Enum The blend type that will be set on the affected nodes. 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 > Sample Solutions > GettingStartedControls Solution > GettingStartedControls Part 3”. Properties Property Name Type Description Enabled bool If set to false the List will not react to Focus events. It also sets the Visibility of the list. Visible bool If true, the List is being rendered. Parent List Node Candera::AbstractNodePointer The node with a ListBehavior that acts as a parent to this SubListBehavior. Handle Keyboard Events bool Makes the behavior handle KeyboardFocusNavigation events internally. Scroll Direction ScrollDirection::Enum (Vertical, Horizontal) The direction in which the SubListBehavior scrolls. Animation Duration UInt32 Duration of the scrolling animation. Deceleration Factor Float Loss of flick animation speed over time. Max Speed Per Flick Float Maximum amount of speed each flick motion adds to the flick animation. Min Speed Per Flick Float Minimum speed required to count a touch gesture as a flick and start or continue the flick animation. Min Movement To Scrolling UInt32 Minimum distance a touch gesture needs to move to start a scrolling animation. Max Touch Sample Age UInt32 Maximum age in milliseconds of touch movement speed counted towards generating flick animation speed. Items Items 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. Blend Type BlendType::Enum The blend type that will be set. 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  EventHandler Tab . The functionality of the TextButton is similar to the Button . An example configuration of the Event Handler is given in the Button section . Properties Property Name Type Description Enabled bool If set to false it will not react on focus events and does not have to support different visualizations for the different states. Focusable bool If true, the control is focusable. Otherwise the control can not be focused. Text String The Text that will be set to the Text Node. Text Style Candera::TextRendering::Style The Style that will be used. Normal Image Candera::Image2D The image which is used as Button Image for the color multiplication of other states like Hovered. Pressed Image Candera::Image2D The image which is used as Button Image if the pressed state applies. Focused Image Candera::Image2D Image which is transparent in the center (border). It is used for the control with the current focus (only one of the HMI) Hovered Color Candera::Color The color which is used as hovered color for blending with the Button Image. Disabled Color Candera::Color The color to set on the disabled Button. Text Color Candera::Color The color of the text. Disabled Text Color Candera::Color The color to set on the effect of the Text. Blend Type BlendType::Enum The blend type that will be set. 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 EventHandler Tab .  Properties Property Name Type Description Enabled bool If set to false it will not react on focus events and does not have to support different visualizations for the different states. Focusable bool If true, the control is focusable. Otherwise the control can not be focused. Value bool/Variant Selected or not (true/false). Text String Text of the CheckBox. Text Style Candera::TextRendering::Style The Style that will be set to the Text Node. Normal Image Candera::Image2D The image which is used as CheckBox Image if the normal state applies. Pressed Image Candera::Image2D The image which is used as CheckBox Image if the not selected CheckBox is pressed. Selected Image Candera::Image2D The image which is used as CheckBox Image if the selected state applies. Selected Pressed Image Candera::Image2D The image which is used as CheckBox Image if the selected CheckBox is pressed. Focused Image Candera::Image2D 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) Hovered Color Candera::Color The color which is used as highlighted color for blending with the Selected/Normal image. Disabled Color Candera::Color The color to set on the effect. Blend Type BlendType::Enum The blend type that will be set. Functionality The functionality of the CheckBox can be edited in the Behaviors panel or in the EventHandler Tab (see also chapter EventHandler Tab ). An EventHandler that checks for the Value Changed Event will perform the user defined action. Behavior Name Type predefined/ userdefined Description EventHandler Control Behavior predefined Checks a defined condition and invokes a defined action behavior if that condition is true. Check changed Value Control Condition Behavior userdefined Condition checks the changed value of the CheckBox. Action Action Behavior userdefined Userdefined action that will be performed when the checkbox is clicked. 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 EventHandler Tab . The functionality of the ToggleButton is similar to the Button (when reacting on mouse clicks) or to the CheckBox (when reacting on a value change). Corresponding sample configuration of the Event Handler are given in the  Button section and in the CheckBox section . Properties Property Name Type Description Enabled bool If set to false it will not react on focus events an Focusable bool If true, the control is focusable. Otherwise the control can not be focused. Value bool/Variant Toggled or not (true/false). First Text String The Text that will be set with the first toggle image. Second Text String The Text that will be set with the second toggle image. First Image Candera::Image2D The image which is used as ToggleButton Image if the first state applies. First Pressed Image Candera::Image2D The image which is used as ToggleButton Image if the first toggle image is pressed. Second Image Candera::Image2D The image which is used as ToggleButton Image if the second toggle state applies. Second Pressed Image Candera::Image2D The image which is used as ToggleButton Image if the second toggle image is pressed. Focused Image Candera::Image2D 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) Hovered Color Candera::Color The color which is used as highlighted color for blending with the first and second toggle image. Disabled Color Candera::Color The color which is used as disabled color for blending with the first and second toggle image. Click Count ClickCount::Enum (AnyClick, SingleClick, DoubleClick, TripleClick) If the value ClickConditionBehavior receives matches the Click Count set, it will return a positive response. Blend Type BlendType::Enum The blend type that will be set on the affected nodes. 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 EventHandler Tab . The functionality of the RadioButton is similar to the CheckBox (when reacting on a value change). A corresponding sample configuration of the Event Handler is given in the CheckBox section . Properties Property Name Type Description Enabled bool If set to false it will not react on focus events and does not have to support different visualizations for the different states. Focusable bool If true, the control is focusable. Otherwise the control can not be focused. Text String Text of the RadioButton. TextStyle Candera::TextRendering::Style The Style that will be set to the Text Node. Normal Image Candera::Image2D The image which is used as RadioButton Image if the normal state applies. Pressed Image Candera::Image2D The image which is used as RadioButton Image if the not selected RadioButton is pressed. Selected Image Candera::Image2D The image which is used as RadioButton Image if the selected state applies. Selected Pressed Image Candera::Image2D The image which is used as RadioButton Image if the selected RadioButton is pressed. Focused Image Candera::Image2D 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) Hovered Color Candera::Color The color which is used as highlighted color for blending with the Selected/Normal image. Disabled Color Candera::Color The color to set on the effect. Blend Type BlendType::Enum The blend type that will be set on the affected nodes. Selected bool/Variant Specifies the type and the value to pass onto Process Value Behavior. 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) Circular slider can be connected with all controls that support "changeValueEvent". For example: progress bar, gauge, text value. Properties Property Name Type Description Value Variant Value of the slider Minimum Value Variant Minimum value of the slider Maximum Value Variant Maximum value of the slider Step Size Variant Step size for value increment/decrement by keyboard Minimum Angle Float Minimum rotation of the slider. Maximum Angle Float Maximum rotation of the slider. Increment Key Code Candera::KeyboardKeyCode::Enum Increment value KeyCode Decrement Key Code Candera::KeyboardKeyCode::Enum Decrement value KeyCode Background Image Candera::Image2D Background image Active Image Candera::Image2D Image showing current value, will be masked, must have GlBitmapColorMaskBlend Thumb Image Candera::Image2D Thumb image Thumb Image Pressed Candera::Image2D Thumb image during touch Thumb Hover Color Candera::Color Hover color blend for thumb image Focus Image Candera::Image2D Focus node image Disabled Color Candera::Color Disabled color blend for control Enabled bool If set to false it will not react on focus events and does not have to support different visualizations for the different states. Focusable bool If true, the control is focusable. Otherwise the control can not be focused. Use Thumb bool Should thumb node be visible? Active Image Hover Color Candera::Color Hover color blend for active image.  Blend Type BlendType::Enum The blend type that will be set on the affected nodes. Using "Pivot hint" images' property it is possible to create customized slider control similar to customized gauge control. Please check the  Advanced Cluster Solution part 1-4 .  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). Properties Property Name Type Description Enabled bool If set to false it will not react on focus events and does not have to support different visualizations for the different states. Focusable bool If true, the control is focusable. Otherwise the control can not be focused. Value Variant The bindable value of the slider Minimum bool/Variant Minimum Range Maximum bool/Variant Maximum Range Knob Normal Image Candera::Image2D The image of the knob in normal state. Knob Pressed Image Candera::Image2D The image of the knob in pressed state. Knob Center Margin Candera::Margin 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. Track Image Candera::Image2D The image of the slider track. Track Fill Image Candera::Image2D The image to set on the effect. Track Margin Candera::Margin Track Margin, can be used to provide space to display Knob around the track, so it fits within Control boundary and Focus Rectangle. Fill Color Candera::Color Color that gets blended with the fill color Focused Image Candera::Image2D Image which is transparent in the center (border). It is used for the control with the current focus Hovered Color Candera::Color The color which is used as hovered color for blending with the Track Image. Disabled Color Candera::Color The color which can be used from other Behaviors. Use Center bool If true, the center value defined for the knob bitmap is used to align the knob to the value position, otherwise the calculated center. Blend Type BlendType::Enum The blend type that will be set on the affected nodes. 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). 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.) Behavior Name Type predefined/ userdefined Description Forward Value Behavior Value Processing userdefined Forwards a received value. Associated controls with a value property receive the value. Value Behavior Value Processing predefined Control which has to receive the value has to have a Value Behavior where "Accept Value Behavior" is enabled. ScrollView Similar to the List the ScrollView offers an Anchor where any node (also Controls) can be attached to. 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 List 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 Property Name Type Description Vertical Scrollbar Visibility ScrollbarVisibility::Enum (Automatic, Collapsed, Visible) Configure the visibility of the scrollbar. By default it is set to Automatic which will determine the visibility based on the actual content. Horizontal Scrollbar Visibility ScrollbarVisibility::Enum (Automatic, Collapsed, Visible) Configure the visibility of the scrollbar. By default it is set to Automatic which will determine the visibility based on the actual content. Blend Type BlendType::Enum The blend type that will be set. 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. Be sure that the list items are child nodes (just first level) of the anchor. So no additional Layouter or GroupBox is possible. Properties Property Name Type Description Handle Keyboard Events bool Makes the behavior react to KeyboardFocusNavigation events. Scroll Direction Enum (Vertical, Horizontal) The direction in which the List scrolls. Animation Duration UInt32 Duration of the scrolling animation. Deceleration Factor Float Loss of flick animation speed over time. Max Speed Per Flick Float Maximum amount of speed each flick motion adds to the flick animation. Min Speed Per Flick Float Minimum speed required to count a touch gesture as a flick and start or continue the flick animation. Min Movement to Scrolling UInt32 Minimum distance a touch gesture needs to move to start a scrolling animation. Max Touch Sample Age UInt32 Maximum age in miliseconds of touch movement speed counted towards generating flick animation speed. Scrollbar Handle Minimum Size UInt32 The minimum height (for vertical scrollbar) or minimum width (for horizontal scrollbar) of the handle in pixels. Scrollbar Visibility ScrollbarVisibility::Enum (Automatic, Collapsed, Visible) Configure the visibility of the scrollbar. By default it is set to Automatic which will determine the visibility based on the actual content. Scrollbar Min Movement to Scrolling UInt32 Minimum distance a touch gesture needs to move to start scrolling. Items ItemsType 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. Blend Type BlendType::Enum The blend type that will be set. For a more advanced application and extended functionality of the list control, please also see the List Control - Snapping Mechanism . 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 EventHandler Tab ). 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 CheckBox (when reacting on a value change). A corresponding sample configuration of the Event Handler is given in the CheckBox section . Properties Property Name Type Description Enabled bool If set to false it will not react on focus events and does not have to support different visualizations for the different states. Focusable bool If true, the control is focusable. Otherwise the control can not be focued. Current State Variant Current state of the MultiStateButton (starts with 0). Maximum State bool/Variant Maximum value of MultiStateButton (starts with 0). Text String Text of the Button. Text Style Candera::TextRendering::Style The Style that will be set to the Text Node. StateImages list of Candera::Image2D A list of images which should be available for selection. Focused Image Candera::Image2D Image which is transparent in the middle (border). Used for the control with the current focus. Frames the entire control (including text) Pressed Color Candera::Color The color which get multiplied to the current Button image to represent the Pressed State. Hovered Color Candera::Color The color which get multiplied to the current Button image to represent the Hover State. Disabled Color Candera::Color The color to set on the disabled Control. Blend Type BlendType::Enum The blend type that will be set on the affected nodes. 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. 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. Properties Property Name Type Description Touchable Id String Can be packaged into an event or message to identify its sender. On Animation Animation 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. Off Animation Animation 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. Hide Indicator On Move bool 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. Touch Area Node Node Limits to the Touch Area Node's bounding rectangle - the area the Touch Indication Behavior indicates touch on. Camera Camera Node 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. Image Candera::Image2D The image BitmapActionBehavior will set on RenderNode. Blend Type BlendType::Enum The blend type that will be set on the affected nodes. 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 Property Name Type Description On Animation Animation 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. Touchable Id String Can be packaged into an event or message to identify its sender. Off Animation Animation Optional animation played when the indicator is hidden. Hide Indicator On Move bool 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. Camera Camera Node 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. Touch Area Node Node The node whose area the Touch Indication Behavior should indicate touch events on. Distance From Camera Float How far from the camera should the touch indication node be rendered. Blend Type BlendType::Enum The blend type that will be set. TouchIndication3DMarker The TouchIndication3D uses the TouchIndication3DMarker as TouchIndication3DAnchor. The TouchIndication3DMarker's function is to visually mark the location of a detected touch. Properties Property Name Type Description Blend Type BlendType::Enum The blend type that will be set. 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 Breadcrumb Action 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. 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. Properties Property Name Type Description State Machine Node Node State machine node. Ellipsis Text String When more elements are added than the breadcrumb can show, then one element will be replaced with the text from this field (collapse effect). Path Delimiter String Tag that separates elements contained in a path. Blend Type BlendType::Enum The blend type that will be set. 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 workflow  chapter for more information. 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. Properties Property Name Type Description Image Candera::Image2D The image to set on the effect. Label String The Text that will be set to the Text Node. Label Color Candera::Color The color of the text. Label Style Candera::TextRendering::Style The Style that will be used. Label Trimming Enum (None, Ellipsis, Custom Text) Trimming defines the behavior to employ when content overflows the content area. Background Image Candera::Image2D The image to set on the effect. Background Enable Rendering bool If true, Rendering is enabled. Blend Type BlendType::Enum The blend type that will be set on the affected nodes. 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 Property Name Type Description Mesh Rotation Float Defines the rotation angle in degree around configured rotation axis at the configured origin. Camera Distance Float Defines a normalized camera distance (the projection is based on a normalized geometry of width and height 1) with a default value of 1.  Rotation Axis Candera::Vector3 Defines the axis (default is the y axis) for the rotation as a 3D direction vector (the vector will be internally normalized). Field of View Float 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. Fit Strategy Enum (None, FitTopActualSize, FitToMaximumSize) Defines how the perspective projected mesh should fit into the original boundaries. Horizontal Origin Enum (Left, Center, Right, Custom) 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). Vertical Origin Enum (Top, Center, Bottom, Custom) 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). Origin Offset Candera::Vector2 In addition to the configured normalized origin this pixel based origin offset is added. Image Candera::Image2D The image to set on the effect. Blend Type BlendType::Enum The blend type that will be set on the affected nodes. 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. Properties Property Name Type Description Text String The Text that will be set to the Text Node. Text Color Candera::Color The color of the text. Text Style Candera::TextRendering::Style The Text that will be set to the Text Node. Text Alignment Enum (Left, Center, Right) The horizontal text alignment, using the culture text direction, is used to define how text will be horizontally aligned within its layout area. Multiline bool If multi line is disabled then the new line control characters will be ignored and text will always be rendered in one line. Line Spacing UInt16 Defines the distance between the baselines of successive lines of text. Word Wrap bool If word wrapping is enabled then the lines that exceed the client area will be split during arrangement into multiple lines. Trimming Enum (None, Ellipsis, Custom Text) Trimming defines the behavior to employ when content overflows the content area. Disabled Color Candera::Color The color to set on the effect of the Text. Blend Type BlendType::Enum The blend type that will be set. 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 GettingStartedControls Part 4 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. Properties Property Name Type Description Time Variant Specifies the type and the value to pass onto Process Value Behavior. Offset In Minutes Int32 Offset in minutes to add to time (i.e. for different time zones). Show Seconds bool If true, seconds will be shown. Seconds Needle Image Candera::Image2D The image to set on the effect. Minutes Needle Image Candera::Image2D The image to set on the effect. Hours Needle Image Candera::Image2D The image to set on the effect. Face Image Candera::Image2D The image to set on the effect. Blend Type BlendType::Enum The blend type that will be set on the affected nodes. 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 GettingStartedControls Part 4 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. Properties Property Name Type Description Time Variant Specifies the type and the value to pass onto Process Value Behavior. Offset In Minutes Int32 Offset in minutes to add to time (i.e. for different time zones). Show Full 24 Hours bool If true, hours will be shown from 0-23, otherwise in AM/PM format. AM Text String The string of the AM label. PM Text String The string of the PM label. Show Seconds bool If true, seconds will be shown. Hours Text Style Candera::TextRendering::Style The Style that will be set to the Text Node. Minutes Colon Text Style Candera::TextRendering::Style The Style that will be set to the Text Node. Minutes Text Style Candera::TextRendering::Style The Style that will be set to the Text Node. Seconds Colon Text Style Candera::TextRendering::Style The Style that will be set to the Text Node. Seconds Text Style Candera::TextRendering::Style The Style that will be set to the Text Node. AM PM Text Style Candera::TextRendering::Style The Style that will be set to the Text Node. Hours Color Candera::Color The color to set on the effect. Minutes Colon Color Candera::Color The color to set on the effect. Minutes Color Candera::Color The color to set on the effect. Seconds Colon Color Candera::Color The color to set on the effect. Seconds Color Candera::Color The color to set on the effect. AM PM Color Candera::Color The color to set on the effect. Blend Type BlendType::Enum The blend type that will be set. 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. Properties Property Name Type Description Value   The current value of the Progress Bar. Minimum bool/Variant Minimum value Maximum bool/Variant Maximum value Animation Mode Enum (SpeedBased, TimeBased, Instant) Animation mode sets a specific interpolation type. Value Change Per Second Float How many values per second become interpolated. Filter Time Constant Float 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. Bar Image Candera::Image2D The image of the Progress Bar that will be scaled. Background Image Candera::Image2D The background image of the Progress Bar. Blend Type BlendType::Enum The blend type that will be set on the affected nodes. 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 Property Name Type Description Image Index Variant The index of the image to animate to. Flip Speed Float How often in a second the images should be flipped. This property is only available if AnimationMode is set to "SpeedBased". Images List of Candera::Image2D A list of images which should be available for flipping. Upload Strategy Enum (OnInit, OnDemand) 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. Blend Type BlendType::Enum The blend type that will be set on the affected nodes. Animation Mode Enum (SpeedBased, TimeBased, Instant) Animation mode sets a specific interpolation type. How to Add Images Import the image resources to be set into one single folder of the SceneComposer solution. Select the FlipBook Control in your scene In the Properties Panel: Click the icon [ Select folder containing images ] in the [ Images ] section of the FlipBook's Properties. This will open the [ Choose Item ] dialog. Select a folder that contains the image resource to be set, and click the [ OK ] button. All image files contained in the selected folder will be set as images of the FlipBook control. The images are ordered alphabetically by file name. They can be re-ordered manually as necessary using the up and down arrow buttons. Animation Mode The AnimationMode property can be set to SpeedBased , TimeBased or Instant . Value Description SpeedBased 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 ) The speed of the flipped images can be configured in property FlipSpeed. It defines the frames/images displayed per second. TimeBased 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 ) The speed of the flipped images is defined by the InterpolationTime. It defines the time (in ms), which every single image will be displayed.  Instant 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. 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: Select the FlipBook control of your scene in the Scene Tree Panel and set the Animation Mode property to  Instant. Right-click on the FlipBook control in the Scene Tree Panel and choose [ Add Animated Property... ] from the context menu. Choose to animate the property [ ImageIndex ] and select [ Linear ] Interpolation. Please note that you have now left the [ Scene Design ] mode are now in [ Animation Design ] mode. Right click into the right side of the Animation Value panel and choose [ Insert Key Frame ]. Configure the keyframes at timestamps 0, 1000 and 2000. Set the values 0.00, 20.00 and 0.00. In the Animation Timeline panel you can check your animation. (Double-click your animation to switch to a more intuitive view.) 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). Result: Animation with the FlipBook's images 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. Properties Property Name Type Description Value Variant The value to be formatted Interval Handling Enum (Limit, Cycle, Ignore) Select how the behavior should react when the minimum or maximum limit is exceeded. Minimum Value bool/Variant Minimum value Maximum Value bool/Variant Maximum value Format Text String The format string which includes one format specifier (beginning with %). See C printf() function. Style Candera::TextRendering::Style The Style that will be used. Text Alignment Enum (Left, Center, Right) The horizontal text alignment, using the culture text direction, is used to define how text will be horizontally aligned within its layout area. Multiline bool If multi line is disabled then the new line control characters will be ignored and text will always be rendered in one line. Enabled bool If set to false it will not react on focus events and does not have to support different visualizations for the different states. Text Color Candera::Color The color which can be used from other Behaviors. Disabled Color Candera::Color The color which can be used from other Behaviors. Blend Type BlendType::Enum The blend type that will be set. 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. Properties Property Name Type Description State Enum (On, Off, Blinking) 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. On Time Ms UInt32 If State is set to Blinking, IntervalSwitchBehavior will be sending On value for On Time Ms milliseconds before switching to sending Off value. Off Time Ms UInt32 If State is set to Blinking, IntervalSwitchBehavior will be sending Off value for Off Time Ms milliseconds before switching to sending On value. On State Image Candera::Image2D Tell Tale control displays selected image on its On state. Off State Image Candera::Image2D Tell Tale control displays selected image on its Off state. Blend Type BlendType::Enum The blend type that will be set on the affected nodes. 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. Properties Property Name Type Description Value Variant Specifies the input value. Input Min bool/Variant The smallest possible input value. Input Max bool/Variant The largest possible input value. Rotation Min Float The smallest possible angle in degrees. Rotation Max Float The largest possible angle in degrees. Background Image Candera::Image2D The background image, which might be a scale. Needle Image Candera::Image2D The needle-image of the needle that will be rotated. Animation Mode Animation mode sets the interpolation type (Instant, Speed-based, or Time-based). Blend Type BlendType::Enum The blend type that will be set on the affected nodes. Container GroupBox The GroupBox offers an easy way to combine RadioButtons to a RadioButtonGroup. The special functionality of this Control is to select just one selection object ( 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. There can also be a Layouter attached as child of the GroupBox to order the RadioButtons. The visual appearance can be configured with a background image (9Patch Image) which can be resized by using the Layout. Properties Property Name Type Description Default Selected Object Node Selection Object (e.g. RadioButton) which shall be selected by default. Enable Background bool If true, Background gets rendered. Background Image Candera::Image2D Background Image of the GroupBox. Can be resized by Layout Settings of the Control. Blend Type BlendType::Enum The blend type that will be set on the affected nodes. 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 Property Name Type Description Render Target RenderTargetType The render target which FPS should be monitored. Text Style Candera::TextRendering::Style The Style that will be set to the Text Node. Text Color Candera::Color The color to set. Text String Text that TextBehavior will change the Node to. Supports formatting for one variable that corresponds to the value TextProcessValueBehavior2D receives. Blend Type BlendType::Enum The blend type that will be set. FrameCounterDisplay The Frame Counter Display Control provides a Text Node that displays how many frames were already rendered. Properties Property Name Type Description Render Target RenderTargetType The render target which FPS should be monitored. Text Style Candera::TextRendering::Style The Style that will be set to the Text Node. Text Color Candera::Color The color to set. Text String Text that TextBehavior will change the Node to. Supports formatting for one variable that corresponds to the value TextProcessValueBehavior2D receives. Blend Type BlendType::Enum The blend type that will be set. 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 Property Name Type Description Render Target RenderTargetType The render target which FPS should be monitored. Text Style Candera::TextRendering::Style The Style that will be set to the Text Node. Text Color Candera::Color The color to set. Text String Text that TextBehavior will change the Node to. Supports formatting for one variable that corresponds to the value TextProcessValueBehavior2D receives. Blend Type BlendType::Enum The blend type that will be set. 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 Property Name Type Description Render Target RenderTargetType The render target which FPS should be monitored. Text Style Candera::TextRendering::Style The Style that will be set to the Text Node. Text Color Candera::Color The color to set. Text String Text that TextBehavior will change the Node to. Supports formatting for one variable that corresponds to the value TextProcessValueBehavior2D receives. Blend Type BlendType::Enum The blend type that will be set. 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 Property Name Type Description Render Target RenderTargetType The render target which FPS should be monitored. Text Style Candera::TextRendering::Style The Style that will be set to the Text Node. Text Color Candera::Color The color to set. Text String Text that TextBehavior will change the Node to. Supports formatting for one variable that corresponds to the value TextProcessValueBehavior2D receives. Blend Type BlendType::Enum The blend type that will be set. 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 Property Name Type Description Render Target RenderTargetType The render target which FPS should be monitored. Text Style Candera::TextRendering::Style The Style that will be set to the Text Node. Text Color Candera::Color The color to set. Text String Text that TextBehavior will change the Node to. Supports formatting for one variable that corresponds to the value TextProcessValueBehavior2D receives. Blend Type BlendType::Enum The blend type that will be set. Mixed Reality VideoStream A control that makes it possible to render a video source into a texture. Properties Property Name Type Description Video Source String URI to video resource (e.g. path to file or URL). Please also see example strings below. Scale To Video Source bool If enabled the texture will be resized to the video size, otherwise the size of the current texture will persist. Flip Vertically bool Flips video vertically. Timestamp UInt32 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). Target Node Node The node on which the video will be displayed. If nothing is selected, the node on the anchor will be used. Blend Type BlendType::Enum The blend type that will be set. Examples of valid Video Source strings Source Example Video Source String From asset asset://Resources#Videos#VideoSourceSample1.mp4 From website http://www.cgistudio.at/VideoSourceSample2.mp4 From file file:///C:/Videos/Streaming/VideoSourceSample3.mp4 NavigationPath3D Visualizes the proposed route of the navigation system. Input points are received via data binding. This control is available for 3D scenes. Properties Property Name Type Description Mesh Appearance AppearanceType The appearance used for the navigation path mesh. Color Mode ColorMode::Enum (Color, RGBA) Select how color is displayed. Color Candera::Color Determines the color of the mesh. Path Width Float Determines the width of the mesh. Path Length Float Determines the length of the mesh. Y Offset Float Applies y-offset to the mesh. Input Points InputPointsType This property is used to bind input points. Input Point Handling InputPointHandling::Enum (Attach, Replace) Determines how new input points are used for the mesh. Interpolation Type InterpolationType::Enum (Linear, Bezier, Spline, None) Determines which interpolation method is used. Path Mesh Type MeshType::Enum (Solid, Points) Determines which primitive type is used. Advanced bool Enables advanced settings of the behavior. (see next 6 properties in this table) Input Point Min Distance Float Minimum distance of two control points. Input points that are closer together will be rejected. Req Fragment Size SizeType Size of the fragment that is requested from the input point list. Req Threshold Distance Float If the distance between camera and the last point is below this threshold, request a new fragment of input points. Num Of Rows Per Input Point UInt32 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. Num Of Vertex Rows UInt32 Amount of vertical vertices in the mesh. Num Of Vertex Columns UInt32 Amount of horizontal vertices in the mesh. Blend Type BlendType::Enum The blend type that will be set. 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 Poi Metadata Handler ) This control is available for 3D scenes. Properties Property Name Type Description Street Points StreetPointsType List of points of the street. Used to align the rotation of POIs. Street Points Min Distance Float Minimum distance between two street points. Street points that are closer together will be rejected. Req Distance Float The distance in which POIs are requested from the model. Req Threshold Distance Float Once the camera has moved this specified distance a new request will be sent. PoiMetaData PoiMetaDataType Use databinding to receive metadata updates for the POIs Poi Street Name String Name of this poi. Street Control Id Candera::Id ID of the control that is associated with PoiName. Poi Parking Name String Name of this poi. Parking Control Id Candera::Id ID of the control that is associated with PoiName. Poi Building Name String Name of this poi. Building Control Id Candera::Id ID of the control that is associated with PoiName. Blend Type BlendType::Enum The blend type that will be set. 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 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. 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. List Editor The Values List property can also be set using the List Editor. Clic 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. Properties Property Name Type Description Values List ListPropertyType< FeatStd::Float > List of values Bar Width UInt16 Width of each bar Bar Height UInt16 Height of each bar Space Width UInt16 Width of space between each bar Color Candera::Color Color 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. 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 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. Properties Property Name Type Description Values ListPropertyType< Candera::Vector2 > List of values which will create the graph. Line Width Float The line width defines the thickness of the line. Interpolation GraphInterpolationType::Enum (Linear, Spline) Defines the interpolation type of the line chart. Interpolation Steps UInt16 Defines the amount of interpolation points between each value. This increases the spline resolution by the cost of performance and memory. Color Candera::Color Color 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 For functionality please refer to 3D Effects Solution . Properties Property Name Type Description Emit Particles bool If set to true then the behavior will emit particles Emitter Type ParticleEmitterType::Enum (BoxEmitter, SphereEmitter) Specifies the behavior of the emitted Particle Maximum Particles UInt32 Determines the maximum number of particles that can be displayed (Requires Scene Refresh) Particles Per Second UInt32 Determines how many particles will be generated each second Life Time UInt32 Determines how long a particle will live in Milliseconds Random Life Time UInt32 Determines how long a particle will live in Milliseconds Velocity Candera::Vector3 Determines the initial velocity of an emitted particle Gravity Candera::Vector3 Determines the gravity effects for all emitted particles Random Spread Float Determines how the randomness of the initial velocity angle Start Size Float Determines how big a particle will be when it is emitted End Size Float Determines how big a particle will be when it vanishes Start Color Candera::Color Determines what color a particle has be when it is emitted End Color Candera::Color Determines what color a particle has when it vanishes Fade In Time bool/UInt32 Determines how long a new particle needs to be alive until it is fully visible. Fade Out Time bool/UInt32 Determines how long a particle will fade out before it vanishes Appearance AppearanceType The appearance to set on the node. Blend Type BlendType::Enum The blend type that will be set. Core The Core Controls are a set of  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. Properties Property Name Type Description Enabled bool If set to false it will not react on focus events and does not have to support different visualizations for the different states. Focusable bool If true, the control is focusable. Otherwise the control can not be focused. Current Value FeatStd::Int32 Current value for the dial. Step Size FeatStd::Float Step size in degrees. Minimum Rotation FeatStd::Float Minimum rotation of the dial. Maximum Rotation FeatStd::Float Maximum rotation of the dial. Knob Image Candera::Image2D The image to set on the effect. BackgroundImages Candera::Image2D A list of images which should be available for selection. Disabled Color Candera::Color The color which can be used from other Behaviors. Increment Key Code Candera::KeyboardKeyCode::Enum Check the KeyCode of the pressed key (can also be modifier). Decrement Key Code Candera::KeyboardKeyCode::Enum Check the KeyCode of the pressed key (can also be modifier).   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. Properties Property Name Type Description Focusable bool If true, the control is focusable. Otherwise the control cannot be focused. Value Float The value which will be changed using the roll Min Float The minimum value which can be reached. This value is always smaller or equal to the MaxValue. Max Float The maximum value which can be reached. This value is always bigger or equal to MinValue Step Float The increment/decrement of the value. LensVisible bool Is lens group visible? Enables highlighting of the current value, default zooming and bordering it.  Use Cyclic Roll bool Is roll cyclic? If true the MinValue of the Control can be reached after the MaxValue of the Control and vice versa Allow Dragging Past Limit bool 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. Value Style Candera::TextRendering::Style Sets the text style for the values outside the Lens. Value Color Candera::Color Specifies color of values in the vertical list outside the Lens Lens Style Candera::TextRendering::Style Sets the text style for the values inside the Lens. Unit Text String Text used in lens (it means: when the lens is used at all) to present a unit of the value Unit Style Candera::TextRendering::Styler Sets the text style for the Unit Text. Unit Margin Candera::Margin Specifies margin of the UnitText Unit Color Candera::Color Specifies color of the UnitText Decoration Image Candera::Image2D Specifies a border image of the Lens 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 SpinBox , it is more lightweight and suited for cases where UI performance and streamlined layout are important. Properties Property Name Type Description Enabled bool If set to false it will not react on focus events and does not have to support different visualizations for the different states. Focusable bool If true, the control is focusable. Otherwise the control can not be focused. Value Variant The value to be formatted Step Size Variant Increment/Decrement step value. Minimum Value Variant Minimum value Maximum Value Variant Maximum value Text Format String The format string which includes one format specifier (beginning with %). See C printf() function. Text Alignment Enum (Left, Centered, Right, Automatic) The horizontal text alignment, using the culture text direction, is used to define how text will be horizontally aligned within its layout area. Multiline bool If multi line is disabled then the new line control characters will be ignored and text will always be rendered in one line. Text Color Candera::Color Text color. Text Disabled Color Candera::Color Disabled text color. Text Style Candera::TextRendering::Style The Style that will be used. Background Image Candera::Color The image to set on the effect. Arrow Image Candera::Color The increment/Decrement button arrow image. Pressed Image Candera::Image2D The increment/Decrement button pressed image. Arrow Disabled Image Candera::Image2D The increment/Decrement button disabled arrow image. CoreText 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. Properties Property Name Type Description Text String The Text that will be set to the Text Node. Text Color Candera::Color The color of the text. Text Style Candera::TextRendering::Style The Text that will be set to the Text Node. CoreButton 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. Properties Property Name Type Description Enabled bool If this option is set to false, the button will be disabled and will no longer accept clicks. Focusable bool If true, the control is focusable. Otherwise the control can not be focused. Normal Image 9 Patch Image The image used as the button image. Pressed Image 9 Patch Image The image used as the button image when the pressed state is applied. Disabled Image 9 Patch Image The button image displayed when the button is disabled. Padding Candera::Margin The padding (margin) of the button. Used when content is attached. Identifier Candera::AbstractNodePointer The identifier used when an event such as Click Event occurs. CoreDigitalClock 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. Properties Property Name Type Description Time Variant Specifies the type and the value to pass onto Process Value Behavior. AM Text String The string of the AM label. PM Text String The string of the PM label. Show Seconds bool If true, seconds will be shown. Show AMPM bool If ture, shows AM or PM depending on time. Hours Text Style Candera::TextRendering::Style The style set for the “hour” text. Minutes Colon Text Style Candera::TextRendering::Style The style applied to the separator between the “hour” and “minute” text. Minutes Text Style Candera::TextRendering::Style The style set for the “minute” text. Seconds Text Style Candera::TextRendering::Style The style set for the “second” text. AMPM Text Style Candera::TextRendering::Style The style set for the AM/PM text. Hours Color Candera::Color The color set for the “hour” text. Minutes Color Candera::Color The color set for the “minute” text. Seconds Color Candera::Color The color set for the “second” text. AM PM Color Candera::Color The color set for the AM/PM text. 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. Properties Property Name Type Description Value Float The current value of the Progress Bar. Minimum bool/Variant Minimum value Maximum bool/Variant Maximum value Bar Image Candera::Image2D The image of the Progress Bar that will be scaled. Background Image Candera::Image2D The background image of the Progress Bar. CoreTextButton 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. Properties Property Name Type Description Enabled bool If this option is set to false, the button will be disabled and will no longer accept clicks. Focusable bool If true, the control is focusable. Otherwise the control can not be focused. Normal Image Candera::Image2D The image displayed when the button is in its normal state. Pressed Image Candera::Image2D The image displayed when the button is pressed. Disabled Image 9 Patch Image The image displayed when the button is disabled. Text String Text to be displayed in the button. Text Style Candera::TextRendering::Style Set the style of the text. Text Enabled Color Candera::Color Text to be set in the text node. Text Disabled Color Candera::Color Text color when disabled. CoreCheckBox 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. Properties Property Name Type Description Enabled bool If this option is set to false, the checkbox will not respond to clicks. Focusable bool If true, the control is focusable. Otherwise the control can not be focused. Value bool/Variant Specifies the initial selection state of the checkbox (true = selected, false = not selected). Text String The text of the checkbox. Text Style Candera::TextRendering::Style The style set for the text node. Normal Image Candera::Image2D The checkbox image displayed when in the normal state. Selected Image Candera::Image2D The checkbox image displayed when in the selected state. Normal Disabled Image Candera::Image2D The checkbox image displayed when in the invalid state. Selected Disabled Image Candera::Image2D The image of a selected checkbox in the invalid state. Normal Text Color Candera::Image2D The text color when in the valid state. Disabled Text Color Candera::Image2D The text color when in the invalid state. CoreToggleButton 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. Properties Property Name Type Description Enabled bool If this option is set to disabled, the toggle button will be disabled and will no longer accept click operations. Focusable bool If true, the control is focusable. Otherwise the control can not be focused. Value bool/Variant Specify the initial state of the toggle (true = enabled, false = disabled). First Text String The text that will be displayed when the toggle is set to On (the first toggle image). Second Text String The text that will be displayed when the toggle is set to Off (the second toggle image). Text Style Candera::TextRendering::Style The style set for the text node. First Image Candera::Image2D The image that will be displayed when the toggle is set to On (the first toggle image). Second Image Candera::Image2D The image displayed when the toggle is in the Off state (second toggle image). First Disabled Image Candera::Image2D The image displayed when the toggle is in the On state when it is disabled. Second Disabled Image Candera::Image2D The image displayed when the toggle is in the Off state when it is disabled. Text Enabled Color Candera::Image2D The text color when it is enabled. Text Disabled Color Candera::Image2D The text color when it is disabled. CoreRadioButton 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. Properties Property Name Type Description Enabled bool If you set this option to disabled, the radio buttons will not work and will not accept clicks. Focusable bool If true, the control is focusable. Otherwise the control can not be focused. Text String The text of the radio buttons. TextStyle Candera::TextRendering::Style Set the style of the text. Normal Image Candera::Image2D The image of the radio buttons displayed in the normal state. Selected Image Candera::Image2D The image of the radio buttons displayed when selected. Normal Disabled Image Candera::Image2D The image of the normal radio buttons in the disabled state. Selected Disabled Image Candera::Image2D The image of the selected radio buttons in the disabled state. Text Enabled Color Candera::Image2D The color of the text in the enabled state. Text Disabled Color Candera::Image2D The color of the text in the disabled state. Selected bool/Variant Specify the type and value to pass to the Process Value behavior. CoreTextValue 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. Properties Property Name Type Description Value Variant The value to be formatted Format Text String The format string which includes one format specifier (beginning with %). See C printf() function. Style Candera::TextRendering::Style The style of the text to be used. Text Color Candera::Color Specify the color of the text. 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. Properties Property Name Type Description Enabled bool If set to false it will not react on focus events and does not have to support different visualizations for the different states. Focusable bool If true, the control is focusable. Otherwise the control can not be focused. Value Variant The bindable value of the slider Minimum bool/Variant Minimum Range Maximum bool/Variant Maximum Range Track Image Candera::Image2D The image used for the slider track. Track Disabled Image Candera::Image2D The image used for the slider track when disabled. Track Fill Image Candera::Image2D The image indicating the progress of the slider. Track Disabled Fill Image Candera::Image2D The image indicating the progress of the slider when disabled. Knob Normal Image Candera::Image2D The image used for the knob in its normal state. Knob Pressed Image Candera::Image2D The image used for the knob when pressed. Knob Disabled Image Candera::Image2D The image used for the knob when disabled. Knob Center Margin Candera::Margin 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. Track Margin Candera::Margin The margin of the track. Ensures sufficient space for displaying the knob around the track. Use Center bool 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. 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. Properties Property Name Type Description Vertical Scrollbar Visibility ScrollbarVisibility::Enum (Automatic, Collapsed, Visible) Configure the visibility of the scrollbar. By default it is set to Automatic which will determine the visibility based on the actual content. Horizontal Scrollbar Visibility ScrollbarVisibility::Enum (Automatic, Collapsed, Visible) Configure the visibility of the scrollbar. By default it is set to Automatic which will determine the visibility based on the actual content. CoreMultiStateButton 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. Properties Property Name Type Description Focusable bool If true, the control is focusable. Otherwise the control can not be focused. Current State Variant Current state of the MultiStateButton (starts with 0). Maximum State bool/Variant Maximum value of MultiStateButton (starts with 0). 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 Properties Property Name Type Description Show Street Name bool Whether or not the street name is shown Show Relative Indication bool Whether or not the bargraph indicating the relative distance to next turn is shown Show Absolute Indication bool Whether or not the absolute value for the distance to the next turn is shown Text Style TextStyle The text style of street and distance value Text Style Unit TextStyle The text style of the distance unit Street Name String Street name Distance To Turn UInt32 Absolute distance to the next turn, the value is automatically rounded to the nearest 10. Relative Distance Value Float in range [0, 100] Relative distance to the next turn, indicated by the bargraph Distance Unit Text String Unit of the absolute value Direction Icon Index UInt8 Index of direction icons, see also Direction Images Direction Images Array of Images Array of turn by turn icons, the displayed icon is set via the "Direction Icon Index" property Total Bargraph Size Float Size of the total bargraph (active + background part) Max Active Bargraph Size Float Maximum size of the bargraph indicating the distance ("Relative Distance Value" == 100) Color Change Threshold UInt8 Threshold to indicate that the next turn is close, the bargraph color will change to "Bargraph Color Below Threshold" Bargraph Color Normal Color Color of the bargraph if not close to the turn, determined by the "Value Close To Turn" property Bargraph Color Below Threshold Color Color of the bargraph if close to the turn, determined by the "Color Change Threshold" property Bargraph Background Color Color Color of the bargraph background Max Street Name Text Size UInt32 Maximum size of the street name text 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. The following impact has to be considered: Cross-references (nodes or behaviors) to different scenes may occur. For details see Cross-Reference Implications below. 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. 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 *) 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. 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 Behaviors and Events . 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 . 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(m_behavior.SetState( ControlStateEnum::Pressed , event.GetType() == PressedEventType::Pressed )); } } For a list with all Events which are used by Behaviors also check chapter Control Behaviors Events . 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: 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. Event Dispatching Diagram 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 EventHandler Tab . Events Class Candera::ProcessValueEvent ProcessValueEvent - Value Processed Class CgiStudioControl::AnimationEvent AnimationEvent - Animation State Changed Class CgiStudioControl::ArTargetEvent ArTargetEvent - ArTargetEvent event Class CgiStudioControl::CaretPositionChangedEvent CaretPositionChangedEvent - Caret Position Changed Class CgiStudioControl::ChangePropertyEvent ChangePropertyEvent - Property Changed Class CgiStudioControl::ChangeSelectionEvent ChangeSelectionEvent - Selection Changed Class CgiStudioControl::ChangeStateEvent ChangeStateEvent - State Change Triggered Class CgiStudioControl::ChangeValueEvent ChangeValueEvent - Value Change Triggered Class CgiStudioControl::ClickEvent ClickEvent - Clicked Class CgiStudioControl::ControlTimer::Event ControlTimer::Event - Timer Expired Class CgiStudioControl::DragDropEvent DragDropEvent - Drag and Drop Class CgiStudioControl::EnterExitEvent OnEnterExitEvent- On Enter Exit Edit Class CgiStudioControl::HoverEvent HoverEvent - Hovered Member CgiStudioControl::IntervalSwitchBehavior::OnEvent (const FeatStd::Event &event, Candera::EventDispatchResult &dispatchResult) to handle. Class CgiStudioControl::IntervalVisualizationEvent IntervalVisualizationEvent - Interval State Changed Class CgiStudioControl::PoiUpdateEvent PoiUpdateEvent - Poi update Class CgiStudioControl::PressedEvent PressedEvent - Pressed Class CgiStudioControl::RegisterSelectionEvent RegisterSelectionEvent - Register Selection Class CgiStudioControl::ScrollableDirectionChangedEvent ScrollableDirectionChangedEvent - Scroll Direction Changed Class CgiStudioControl::StateEvent StateEvent - State Changed Class CgiStudioControl::TrackingEvent TrackingEvent - Tracking event Class CgiStudioControl::ValueChangedEvent ValueChangedEvent - Value Changed Class CgiStudioControl::VideoControlEvent VideoControlEvent - Video Control Event Class CgiStudioControl::VideoStateEvent VideoStateEvent - Video changed 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: 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 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. 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: If a behavior which contains referenced behavior is copied, a new option will become available in the context menu: "Deep Paste". 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. Group/B1 ref: Group/B2 ref: Camera/B3 When copying and pasting behavior B1 on Group, we will get the following structure: Group/B1_1 ref: Group/B2_1 ref: Camera/B3 When copying and pasting behavior B1 on Button, we will get the following structure: Button/B1 ref: Button/B2 ref: Camera/B3 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. Group/B1 ref: Group/B2 ref: Camera/B3 When copying and pasting behavior B1 on Group, we will get the following structure: Group/B1_1 ref: Group/B2_1 ref: Camera/B3_1 When copying and pasting behavior B1 on Button, we will get the following structure: Button/B1 ref: Button/B2 ref: Camera/B3_1 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 When Do ; 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. 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. 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. 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. 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. A Behavior is defined by behavior attributes: Name, Type, Properties Behavior attributes are expressed in the Behavior Meta Information 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 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.
Some important tags and attributes: 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. 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: CdaBehaviorDef Behavior class name and its base class CdaDescription Behavior description for the SceneComposer tooltip CdaReadableName Behavior name 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 . 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. CdaProperty Specifies [property_name], [property_type], [property_getter], [property_setter] CdaDescription Behavior property description for the SceneComposer tooltip CdaCategory Defines a category for the property. SceneComposer displays all properties of one category in a related Category section in the property grid. 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)! 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: 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: CGI_BEHAVIOR_FORWARD_AssetLoaderDataTypeDef (:: CgiStudioControl::ValueBehavior ) 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...". 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. 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. 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: 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. 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" 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...". 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: the ClickCount of the CheckClick Behavior the Emitter of the CheckClick Behavior the Actions of the EventHandler 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. 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. 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. 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. 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.   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 Control Behaviors Events . 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: After selecting an Event, the Conditions drop-down menu only contains Conditions that are applicable for the selected Event: 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: CdaBehaviorMixedDef (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() CdaPropertiesEnd () CdaEvents () CdaEvent ( CdaInputEvent , StateEvent, "") CdaEventsEnd () CdaBehaviorDefEnd () 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: For creating a Control, a name can be specified: After clicking "OK", the new Control is visible in the Solution Explorer When right-clicking on the context menu of the new Control, the Control's properties can be edited choosing "Control Properties...": 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. 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. 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 base class instead of the Candera::WidgetBase class. Incidentally the Candera::Behavior base class is internally derived from Candera::WidgetBase further demonstrating the similarities between both. Methods From the Candera::WidgetBase the already known Init() and Update() methods are inherited. 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. Newly added are the methods from Candera::Behavior which are related to event handling and the attached node: 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 which abstracts between 2D and 3D nodes. This allows creating behaviors that work und 2D and 3D without duplicating code. 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): ... CdaBehaviorDef (<>, <>) [Information][Properties][Events] CdaBehaviorDefEnd () ... ... CdaBehavior2DDef (<>, <>) [Information][Properties][Events] CdaBehaviorDefEnd () ... ... CdaBehaviorMixedDef (<>, <>) [Information][Properties][Events] CdaBehaviorDefEnd () ... 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] CdaPropertiesEnd () ... ... CdaProperty(<>, <>, <>, <>) CdaDescription("Column used by this Item inside the Area") CdaCategory("Area") CdaPropertyEnd () ... The new macros for events will be described in the Event Handling chapter. For further information about the Meta Info please also see chapter Behavior Definition . 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: ... CGI_BEHAVIOR_RTTI_DEFINITION (<>) ... 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: ... CdaEvents () CdaEvent ( CdaOutputEvent , <>, "Description") CdaEvent (CdaInputEvent, <>, "Description") CdaEventsEnd () ... 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); ... Note that the Event and EventDispatchStrategy need to be replaced with the concrete implementations. 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: ... Candera::EventDispatchResult eventDispatchResult; Candera::BroadcastEventDispatchStrategy dispatchStrategy; CgiStudioControl::ChangeValueEvent valueChangedEvent( FeatStd::Variant (listDataEvent->GetData()), CgiStudioControl::ChangeValue::Absolute); dispatchStrategy. DispatchEvent (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 FeatStd::Event & event, Candera::EventDispatchResult& dispatchResult) { const ListDataEvent* listDataEvent = Candera::Dynamic_Cast(&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 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, FeatStd::Event ) ... 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. ... Candera::Behavior * behavior = Candera::Behavior::GetFirstBehavior (node); while (0 != behavior) { // do something behavior = behavior-> GetNextBehavior (); } ... For a better understanding of how events work, please see chapter Predefined Behaviors . 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 Widgets.cmake (of MLC-Template App) ... CourierAddProjectFiles( OnOffWidget.cpp OnOffWidget.h WidgetSet.cpp CustomBehavior.cpp CustomBehavior.h ) And then added to the Widget-Set manually via the CdaWidget-Macro: WidgetSet.cpp (of MLC-Template App) ... #include "OnOffWidget.h" #include "CustomBehavior.h" ... CdaWidgetSet (MatlabConnectorApplicationWidgetSet) CdaDescription("MatlabConnectorApplication Widget Set") CdaWidgets () CdaWidget (OnOffWidget) CdaWidget (ListDataSimBehavior) ... 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. FileList.txt set(FILE_LIST CustomBehavior.cpp CustomBehavior.h ) Then add the folder to the CMakeLists.txt found in "cgi_studio_controls\src\Behaviors" CMakeLists.txt ... set(PRV_WIDGET_SUBDIRS Animation ... Custom ) ... 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. In the FileList.txt file add the required code files. FileList.txt set(FILE_LIST FileList.txt CustomSwitchRangeProcessValueBehavior.h CustomSwitchRangeProcessValueBehavior.cpp ) In the CMakeList.txt file specify the name of the new project (here "ControlBehaviors_2") and optional all subfolders which should be searched. CMakeLists.txt # 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} Finally in the "AdditionalBehaviorsPaths.txt" of the application add the new folder. AdditionalBehaviorsPaths.txt # 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 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. Basic Concept 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. It would be possible to recreate this exact functionality as a behavior though the decision at Candera 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. 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. 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. 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 FeatStd::Event & event, Candera::EventDispatchResult& dispatchResult) { const Candera::EvaluateConditionEvent * conditionBehaviorEvaluationEvent = Candera::Dynamic_Cast(&event); if (0 != conditionBehaviorEvaluationEvent) { const ClickEvent* clickEvent = Candera::Dynamic_Cast(&(conditionBehaviorEvaluationEvent-> GetTriggerEvent ())); if (0 != clickEvent) { if (clickEvent->GetClickCount() == GetClickCount()) { Candera::ConditionEvaluationResult* conditionEvaluationResult = Candera::Dynamic_Cast(&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 must be created. In the OnEvent() method an InvokeActionEvent will be received which indicates that the action should be executed. ... void ChangeValueActionBehavior::OnEvent(const FeatStd::Event & event, Candera::EventDispatchResult& dispatchResult) { FEATSTD_UNUSED(dispatchResult); const Candera::InvokeActionEvent * invokeActionEvent = Candera::Dynamic_Cast(&event); if (0 != invokeActionEvent) { // Do something } } ... 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 FeatStd::Event & event, Candera::EventDispatchResult& dispatchResult) { const Candera::TouchEvent* touchEvent = Candera::Dynamic_Cast(&event); if (touchEvent != 0) { switch (touchEvent->GetTouchInfo().m_state) { case Candera::TouchInfo::Down : //OnBeginDrag(event.GetTouchInfo().m_x, event.GetTouchInfo().m_y); break; case Candera::TouchInfo::Move : //OnDrag(event.GetTouchInfo().m_x, event.GetTouchInfo().m_y); break; case Candera::TouchInfo::Up : //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 FeatStd::Event & 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()) { Courier::View * view = m_behavior. GetParentView (); if (0 != view) { const Candera::AbstractNodePointer & abstractNode = m_alternativeNode. IsValid () ? m_alternativeNode : m_behavior.GetNode(); const Candera::TouchInfo & touchInfo = event.GetTouchInfo(); #ifdef CANDERA_2D_ENABLED Courier::ViewScene2D * viewScene2D = view->ToViewScene2D(); if (0 != viewScene2D) { Candera::Node2D * node2D = abstractNode. ToNode2D (); if (0 != node2D) { Courier::ViewScene2D::CameraPtrVector& cameras = viewScene2D->GetCameraPtrVector(); for (FeatStd::SizeType i = 0; i < cameras.Size(); ++i) { Candera::Vector2 touchPosition(FeatStd::Float(touchInfo.m_x), FeatStd::Float(touchInfo.m_y)); if ((0 != cameras[i]) && node2D-> IsPickIntersectingBoundingRectangle (*cameras[i], touchPosition)) { dispatchResult.SetTouched(true); dispatchResult.SetTouchUsage(m_touchUsage); return; } } } } #endif #ifdef CANDERA_3D_ENABLED Courier::ViewScene3D * viewScene3D = view->ToViewScene3D(); if (0 != viewScene3D) { Candera::Node * node = abstractNode. ToNode (); if (0 != node) { Courier::ViewScene3D::CameraPtrVector& cameras = viewScene3D->GetCameraPtrVector(); for (FeatStd::SizeType i = 0; i < cameras.Size(); ++i) { Candera::Camera * camera = cameras[i]; FeatStd::Float distance = Candera::Math::MaxFloat(); if ((0 != camera) && camera-> IsRenderingEnabled () && node-> IsPickIntersectingGeometry (*camera, static_cast(touchInfo.m_x), static_cast(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); Courier::View::GetEventSource (). AddEventListener (&m_eventListenerAdapter); } CustomBehavior::~CustomBehavior () { Courier::View::GetEventSource (). RemoveEventListener (&m_eventListenerAdapter); m_eventListenerAdapter.SetBehavior(0); } ... It is now possible to receive as Courier::ViewActivationEvent via the OnEvent() method. External Image Behaviour Behaviour Overview Feature Description A new file resource manager called FileSystemResourceManager has been introduced. With this new resource manager, “FileSystem” , users can now use it with the external resource behaviours SetExternalBitmap and ExternalBitmapProvider . 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. 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 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. A relative path refers to a path that is defined relative to the application’s working directory or a configured asset root. For example: Logos\400x150\CGI-Studio-Translator-final.png Logos\400x150\CGI-Studio-Translator-final.jpg 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. Supported Platforms It supports all platforms. Limitations: These behaviours are used to set images on 2D bitmap nodes and cannot be used to set textures for 3D objects . There is no dropdown list available in the ExternalResourceManagerID property to select between FileSystem and Android system — the user must set it manually. 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 Drag and drop the [ Node 2D > Bitmap Node ] from the toolbox onto the scene editor, or the scene tree. Attach [ Behavior > External Resource > Value Processing > External Bitmap Provider ] in the Toolbox to the Behavior in the Extra Scene Tree of the placed bitmap node by drag-and-drop operation. Click External Bitmap Provider , and in the properties panel that opens, change ExternalResourceManagerId from Android to FileSystem (default: Android ). Next, set the relative path to the external image in the ExternalResourceId property. For example: \cgi_studio_content\Resources\cgi_studio\Logos\400x150\CGI-Studio-Translator-final.png. The image will be loaded into the solution, and the image from the given relative path will be displayed on the screen. Set External Bitmap Drag and drop the [ Node 2D > Bitmap Node ] from the toolbox onto the scene editor, or the scene tree. Drag and drop the [ Controls > Touchable > TextButton ] from the toolbox onto the scene editor, or the scene tree. Take place this operation twice (add two button control nodes). Attach [ Behavior > External Resource > Action > 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. Change the ExternalResourceManager ID to FileSystem to make the behavior support file system resources. 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). 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.) 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. 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 Action External Resource Resource . 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 Value Processing External Resource Behavior . 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 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. 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 . Added two new files: FileSystemResourceManager.cpp and FileSystemResourceManager.h in the trunk. Definedaclassnamed FileSystemResourceManager , derived from ExternalResourceManager. The ExternalResourceManagerId determines which resource manager handles the request (e.g., FileResourceManager or FileSystemResourceManager). 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 . The External Resource Manager handles resources (such as images and bitmaps) that exist outside the project’s asset binary file. 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 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 . The objects of these classes are registered using the Register() function of ExternalResourceManager, and are inserted into a global map for access during runtime. 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. 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 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. 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 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 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). 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 ExternalResourceManager::GetBitmapResource (const FeatStd::Internal::Identifier::SharedPointer& resourceId) The GetBitmapResource() function retrieves the corresponding Resource Manager object based on the Resource Manager ID and reads the user-configured properties from ExternalBitmapProvider. Depending on the ID, it invokes the LoadBitmapResource() function: If the Resource ID is set to FileSystem, the LoadBitmapResource() function defined inside the FileSystemResourceManager class is called. LoadBitmapResource() takes the resource ID (image file path) as input and processes it based on the file extension (e.g., .png or .jpg). It then calls the LoadImage() function with the file path and detected format. This function is defined in ImageLoader.h and implemented in GenericImageLoader.cpp. The GenericImageLoader class uses two specialized loaders: GenericJpegLoader (GenericJpegLoader.cpp/h) GenericPngLoader (GenericPngLoader.cpp/h) When the Load() function of either loader is called: The lodepng library loads PNG files. The IJG (libjpeg) library loads JPEG files. The image data is decoded and converted into raw pixel data, stored in a structure containing image properties (height, width, pixel info). The decoded bitmap is then returned from LoadBitmapResource() to the updateImage() function of ExternalBitmapProviderBehavior, where: The bitmap effect is applied. The image properties are updated for display on the screen. 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, 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 FileSystemResourceManager( const FeatStd ::Internal::Name:: SharedPointer &resourceManagerId Initializes the resource manager with a unique identifier(FileSystem). Stores the provided resourceManagerId in the member variable m_resourceManagerId. ~ FileSystemResourceManager( )   Bitmap:: SharedPointer LoadBitmapResource ( const FeatStd ::Internal::Identifier:: SharedPointer & resourceId ) 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   bool RegisterFileSystemResourceManager (const FeatStd::Internal::Name::SharedPointer& name) 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. bool UnregisterFileSystemResourceManager(const FeatStd::Internal::Name::SharedPointer& name : Unregisters an existing FileSystemResourceManager from the global registry. : Unregisters an existing FileSystemResourceManager from the global registry.   GetPixelFormat () Converts an internal image format (e.g., RGBA, RGB) to the corresponding Bitmap::PixelFormat used by the Candera engine. GetFileExtension() 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. 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: GenericImageLoader.cpp/h GenericJpegLoader.cpp/h  GenericPngLoader.cpp/h ImageLoader.h Details about the classes defined above these files. ImageLoader 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. Identifier supports hierarchical resource paths, improving the flexibility of resource management — mainly for the FileSystemResourceManager. GenericImageLoader The GenericImageLoader class provides a unified, platform-independent interface for loading and storing image files in various formats (such as PNG and JPEG). Supported Formats: PNG (calls GenericPngLoader::Store), JPEG (calls GenericJpegLoader::Store). 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. GenericJpegLoader The GenericJpegLoader class is designed to load and decode JPEG image files into a raw image data structure that can be used FileSystemResourceManager. This class has one main member function, GenericJpegLoader ::Load( const FeatStd :: Char filename, RawImageData& 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. GenericPngLoader The GenericPngLoader class is responsible for loading and decoding PNG image files into a raw image. Uses a standard PNG decoding library (such as lodepng) to parse and decompress PNG images. GenericPngLoader::Load(const FeatStd::Char filename, RawImageData& output) is to load and decode a PNG image file into a raw image data structure (RawImageData) for use in ExteranalResourceBehaviors. 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. 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 : Platform Flexibility: Works across multiple platforms, not limited to Android. Dynamic Resource Updates: Resources can be updated, replaced, or added at runtime without rebuilding the application. Predefined Behaviors Examples Using Predefined Behaviors Thermometer Example 1. Drag&drop a Slider Control and a Text Value Control from the Controls Panel of the Toolbox to the Scene Editor or the Scene Tree. 2. Set the Slider's Minimum to "-50,00" and the maximum to "+50,00". 3. Change the Text Value Control's "Format Text" Property to "%d °C". 4. Drag&drop a Forward Value Behavior (which is a Value Processing Behavior ) from the Behaviors Panel of the Toolbox onto the Slider in the Scene Tree. This is what the Scene Tree should look like now: 5. Select the Forward Value Behavior in the right side of the Scene Tree view. Set the Forward Value 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. After that, the Forward Value Behavior's Properties will look as follows. 6. Drag&drop a Value Behavior (which is a Value Processing Behavior ) from the Behaviors Panel of the Toolbox onto the Text Value Control in the Scene Tree. 7. Select the Value Behavior on the right side of the Scene Tree View. Set the Value Behavior 's AcceptValueEvent Property to "true" by checking the checkbox. 8. Select the "Text Value" Control in the Scene Tree Panel and drag&drop two Action on Value Behaviors (which are Value Processing Behaviors ) from the Behaviors Panel of the Toolbox onto the "Receivers" of the "Value Behavior" in right side of the SceneTree Panel. 9. Add a condition to the Action on Value Behaviors you have just added by dragging&dropping a Check processed Value Behavior (which is a Condition - Control Behavior ) onto each of the Action on Value Behaviors you have just added. 10. Configure one of the Conditions to "LowerThan 0,00" and the other one to "GreaterThan 0,00". 11. Drag&drop a Set Color SetColor Action (which is a Action - Property Behavior ) from the Toolbox view onto the Actions of each of the Action on Value Behaviors in the SceneTree. 12. Set the color to Blue on the Action on Value Behavior with the Condition Lower Than 0,00 and set the Color to Red on the Action on Value Behavior with the Condition Greater Than 0,00 . 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. 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. Align Pivot Example 1. Drag&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&drop them onto the Group node in the SceneTree: GaugeBmP and GaugeNeedleBmp 2. Arrange the Controls in the SceneEditor so that "GaugeNeedleBmp" is the last entry of the Group Node in the Scene Tree. 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. 4. Drag&drop the Align Pivot Behavior (which is a Control Behavior ) from the Toolbox view onto the Group node in the SceneTree. 5. The Align Pivot 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. Don't forget to reset the Translation tool to "Pivot and Object". Arc Align Example 1. Drag&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&dropping them onto the Group node in the SceneTree. 2. Change the texts of the Text Nodes to "Text", "Text_1" etc. according to their names in the Scene Tree View. 3. Drag&drop the Arc Align Behavior (which is a Control Behavior ) from the Toolbox view onto the Group node in the SceneTree. 4. Configure the Arc Align Behavior with a radius of 50 and AngleMinMax values of 0 and 90. 5. The result can be seen in the Scene Editor view: All nodes are aligned like an arc from 0 to 90 degrees. Enable Rendering Example 1. Drag&drop a TextButton Control from the Controls Panel of the Toolbox to the SceneEditor or the Scene Tree. 2. Drag&drop the OnClick Behavior (which is a Control Behavior ) from the Toolbox view onto the TextButton node in the SceneTree. Additionally, drag&drop the Enable Rendering Behavior (which is a Action - Property Behavior ) from the Toolbox view onto the "Actions" field of the OnClick Behavior on the right side of the Scene Tree. 3. Check the properties of the Enable Rendering 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. 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. Format  String Example 1. Drag&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". 2. Drag&drop a Value Behavior (which is a Value Processing Behavior ) from the Toolbox view onto the TextNode in the SceneTree. Set the Value Behavior's "AcceptValueEvent" property to true. 3. Drag&drop a Format String Behavior (which is a Value Processing Behavior ) from the Toolbox view onto the Value Behavior's Receivers. 4. Set the Format String Behavior's "Text" property to "Score: %0.2f", in order to represent the value as formatted string. 5. Drag&drop a Send Value as Event Behavior (which is a Action - Property Behavior ) from the Toolbox view onto the TextButton's Actions on the right side of the SceneTree view. 6. Configure the Send Value as Event 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. 7. Set the scene's TextNode as TargetNode for the Send Value as Event Behavior: After clicking the magnifying glass in the properties panel, the "Select Item" Dialog is opened. Select the scene's TextNode and press OK. 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. 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". Forward Value Example 1. Drag&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. 2. Position the Slider Control and Text Value Control in the Scene Editor View. 3. Change the Text Value Control's "Format Text" Property to "Value: %d". 4. Drag&drop a Forward Value Behavior (which is a Value Processing Behavior ) from the Behaviors Panel of the Toolbox onto the Slider in the Scene Tree. 5. Select the Forward Value Behavior in the right side of the Scene Tree view. Set the Forward Value 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. After that, the Forward Value Behavior's Properties will look as follows. 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. 7. When manipulating the slider, the Value of the Text Value Control changes according to the alteration on the slider. Hover - Hover Leave Example 1. Drag&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". 2. Drag&drop a Hover Behavior (which is a Control Behavior ) and a Handle Control State Behavior (which is a Control - Internal Behavior ) from the Behaviors Panel of the ToolBox onto the Text Control in the SceneTree. The Handle Control State Behavior is needed in order for the Text Control to receive Input Events. 3. Drag&drop a SetColor Behavior (which is an Action - Property Behavior ) onto the Actions of the Hover Behavior on the right side of the SceneTree view. 4. Select the Set Color Behavior and change the Color to red. 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. 6. When moving the mouse over the Text Control, the text color changes to red. 7. Drag&drop a Hover Leave Behavior (which is a Control Behavior ) onto the TextNode. 8. Drag&drop a Set Color Behavior (which is an Action - Property Behavior ) onto the Actions of the HoverLeave Behavior on the right side of the SceneTree view. 9. Select the Set Color Behavior and change the Color to green. 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. 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. Interpolate Value Example 1. Drag&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". 2. Drag&drop a Value Behavior (which is a Value Processing Behavior ) from the Behaviors Panel of the Toolbox onto the TextNode in the Scene Tree. 3. Select the Value Behavior in the right side of the Scene Tree view. Set the Value Behavior's AcceptValueEvent Property to "true" by checking the checkbox. 4. Drag&drop an Interpolate Value Behavior (which is a Value Processing Behavior ) onto the Value Behavior's Receivers in the right side of the Scene Tree Panel. 5. Select the Interpolate Value 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. 6. Drag&drop a Format String Behavior (which is a Value Processing Behavior ) from the Toolbox onto the Interpolate Value Behavior's Receivers on the right side of the Scene Tree Panel. 7. Select the Format String Behavior on the right side of the Scene Tree view and set the Text property to "%d" in the Properties view. 8. Drag&drop a Send Value as Event Behavior (which is a Action - Property Behavior ) from the Toolbox view onto the TextButton's Actions on the right side of the SceneTree view. 9. Select the Send Value as Event 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. 10. Set the scene's TextNode as TargetNode for the Send Value as Event Behavior: After clicking the magnifying glass in the properties panel, the "Select Item" Dialog is opened. Select the scene's TextNode and press OK. 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. 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 Behavior makes the TextNode count up from 0 to 10 in one step per second. Move Node Example  1. Drag&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" 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. 3. Drag&drop a Value Behavior (which is a Value Processing Behavior ) and a Handle Control State Behavior (which is a Control - Internal Behavior ) from the Behaviors Panel of the ToolBox onto the TextButton Control in the SceneTree. The Handle Control State Behavior is needed in order for the TextButton Control to receive Input Events. 4. Select the Value Behavior on the right of the Scene Tree View and set the Value Behavior's AcceptValueEvent Property to "true" by checking the checkbox. 5. Drag&drop the Move Node Behavior (which is a Value Processing - Transformation Behavior ) from the Behaviors Panel of the ToolBox onto the Value Behavior's Receivers. 6. Drag&drop an OnClick Behavior (which is a Control Behavior ) from the Behaviors Panel of the ToolBox onto the TextButton Control. 7. Drag&drop a Send Value as Event Behavior (which is a Action - Property Behavior ) from the Behaviors Panel of the ToolBox onto the OnClick Behavior's Actions Property. 8. Select the Send Value as Event Behavior on the right side of the Scene Tree View and set the value to datatype "Float" value "100,00" in the Properties view. 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. 10. When Clicking on the TextButton in the Player, the Button moves to position 50, 50. OnClick Example 1. Drag&drop a SolidColorNode from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree. 2. Drag&drop a OnClick Behavior (which is a Control Behavior ) and a Handle Control State Behavior (which is a Control - Internal Behavior ) from the Behaviors Panel of the ToolBox onto the SolidColorNode in the SceneTree. The Handle Control State Behavior is needed in order for the TextButton Control to receive Input Events. 3. Drag&drop a Set Color SetColor Behavior (which is a Action - Property Behavior ) from the Toolbox view onto the Actions of the OnClick Behaviors in the SceneTree. 4. Select the Set Color Behavior and change the Color to red. 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. 6. When clicking on the SolidColorNode, the SolidColorNode's color changes to red. OnPressed Example 1. Drag&drop a SolidColorNode from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree. 2. Drag&drop a OnPressed Behavior (which is a Control Behavior ) and a Handle Control State Behavior (which is a Control - Internal Behavior ) from the Behaviors Panel of the ToolBox onto the SolidColorNode in the SceneTree. The Handle Control State Behavior is needed in order for the TextButton Control to receive Input Events. 3. Drag&drop a Set Color SetColor Behavior (which is a Action - Property Behavior ) from the Toolbox view onto the Actions of the OnPressed Behaviors in the SceneTree. 4. Select the Set Color Behavior and change the Color to red. 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. 6. When pressing the mouse left button on the SolidColorNode, the SolidColorNode's color changes to red. Perform Transition Requests Example 1. Drag&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. 2. Open the already existing 3D scene "Scene3D" by double-clicking it in the Solution Explorer on the left. 3. Drag&drop a Cube Control from the Controls Panel of the Toolbox to the 3D Scene "Scene3D" in SceneEditor or the Scene Tree view. 4. Select the Cube Control in the Scene Tree view and set the Position properties to (0, 0, 0). 5. Switch back to the 2D scene "Scene2D" by double-clicking it in the Solution Explorer on the left. 6. Drag&drop a OnClick Behavior (which is a Control Behavior ) and a Handle Control State Behavior (which is a Control - Internal Behavior ) from the Behaviors Panel of the ToolBox onto the SolidColorNode in the SceneTree. The Handle Control State Behavior is needed in order for the TextButton Control to receive Input Events. 7. Drag&drop a Perform Transition Requests Perform Transition Requests Behavior (which is a Action - Transition Behavior ) from the Toolbox view onto the Actions of the OnClick Behaviors in right side of the SceneTree view. 8. Drag&drop two Transition Request Transition Request Behaviors (which are Action - Transition Behaviors ) from the Toolbox view onto the Requests of the Perform Transition Requests Perform Transition Requests Behavior in the right side of the SceneTree view. 9. Select the first one of the two Transition Request Transition Request Behaviors. Set the Transition Request 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. After that, the Transition Request Transition Request Behavior's Properties will look as follows. 10. Now, select the second Transition Request Transition Request Behaviors. Set the Transition Request 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. After that, the Transition Request Transition Request Behavior's Properties will look as follows. 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. 12. You can see your 2D scene with the white SolidColorNode. When clicking on the SolidColorNode, a transition to the 3D scene is performed. Initially displaying Scene2D After Clicking, displaying Scene3D Render Child Nodes Example 1. Drag&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". 2. Drag&drop an Event Handler Behavior (which is a Control Behavior ) from the Toolbox view onto the Group Node in the Scene Tree view. 3. Select the Group Node in the Scene Tree view and drag&drop a Check Click Behavior (which is a Condition - Input Behavior ) from the Toolbox view onto the Condition of the Group Node's EventHandler in the right side of the Scene Tree view. 4. Keep the Group Node selected in the Scene Tree view and drag&drop a Render Child Nodes Behavior (which is a Action - Property Behavior) from the Toolbox view onto the "Actions" of the Group Node's EventHandler on the right side of the Scene Tree view. 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". 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. 7. After clicking on one of the two buttons (no matter which one), "Button 2" will disappear and "Button 1" will get rendered. 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". 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. 10. After clicking on one of the two buttons (no matter which one), "Button 1" will disappear and "Button 2" will get rendered. Send Value As Event Example 1. Drag&drop two TextButton Controls and a TextValue Control from the Controls Panel of the Toolbox to the Scene Editor or Scene Tree. 2. Rename the TextButton Controls to "DecreaseButton" and "IncreaseButton". Change the text of the DecreaseButton to "-" and the text of the IncreaseButton to "+". 3. Change the Text of the TextValue Control to "Count: %d" and arrange the three Controls as in the right picture below. 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&drop a Send Value as Event Behavior (which is a Action - Property Behavior ) onto the Actions sections of both of the TextButton Controls' EventHandler. 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" 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. 7. Set the scene's TextValue Node as TargetNode for the Send Value as Event 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. 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. 9. When pressing the "-" Button, the Count value is decreased by one. When pressing the "+" Button, the Count value is increased by one. Set Alpha Value Example 1. Drag&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" 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. before deleting all behaviors after deleting behaviors 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. 4. Drag&drop a Value Behavior (which is a Value Processing Behavior ) and a Handle Control State Behavior (which is a Control - Internal Behavior ) from the Behaviors Panel of the ToolBox onto the TextButton Control in the SceneTree. The Handle Control State Behavior is needed in order for the TextButton Control to receive Input Events. 5. Select the Value Behavior on the right of the Scene Tree View and set the Value Behavior's AcceptValueEvent Property to "true" by checking the checkbox. 6. Drag&drop the Set Alpha Value Behavior (which is a Value Processing - Effects Behavior ) from the Behaviors Panel of the ToolBox onto the Value Behavior's Receivers. 7. Drag&drop an OnClick Behavior (which is a Control Behavior ) from the Behaviors Panel of the ToolBox onto the TextButton Control. 8. Drag&drop a Send Value as Event Behavior (which is a Action - Property Behavior ) from the Behaviors Panel of the ToolBox onto the OnClick Behavior's Actions Property. 9. Select the Send Value as Event Behavior on the right side of the Scene Tree View and set the value to datatype "Float" value "1,00" in the Properties view. 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. 11. When Clicking on the TextButton in the Player, the Button moves to position 50, 50. Set Image Example 1. Drag&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. 2. Position the TextButton Control and the BitmapNode next to each other in the Scene Editor. 3. Drag&Drop a Provide Image Behavior (which is a Control - Public Property Behavior ) from the Behaviors Panel of the ToolBox onto the BitmapNode in the Scene Tree view. 4. Select the TextButton Control in the Scene Tree view and change its Text to "Set Image" in the Properties view. 5. Drag&Drop a Set Image Behavior (which is a Action - Property Behavior ) 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. 6. Select the newly added Set Image 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. 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. 8. Select the Set Image Behavior on the right side of the Scene Tree view and drag&drop it onto the BitmapNode on the left side of the Scene Tree view (you can see a little arrow and "Set Image"). 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. 10. When the TextButton is pressed, the configured image will be set to the BitmapNode and the image will appear. Set Position Example 1. Drag&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". 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. before deleting all behaviors after deleting behaviors 3. Drag&drop a Value Behavior (which is a Value Processing Behavior ) and a Handle Control State Behavior (which is a Control - Internal Behavior ) from the Behaviors Panel of the ToolBox onto the TextButton Control in the SceneTree. The Handle Control State Behavior is needed in order for the TextButton Control to receive Input Events. 4. Select the Value Behavior on the right side of the Scene Tree View and set the Value Behavior's AcceptValueEvent Property to "true" by checking the checkbox. 5. Drag&drop a Set Position Behavior (which is a Value Processing - Transformation Behavior ) from the Behaviors Panel of the ToolBox onto the Value Behavior's Receivers. 6. Select the Set Position Behavior on the right side of the Scene Tree view and set its TranslationAxis Property to "AxisX" 7. Drag&drop an OnClick Behavior (which is a Control Behavior ) from the Behaviors Panel of the ToolBox onto the TextButton Control. 8. Drag&drop a Send Value as Event Behavior (which is a Action - Property Behavior ) from the Behaviors Panel of the ToolBox onto the OnClick Behavior's Actions Property. 9. Select the Send Value as Event Behavior on the right side of the Scene Tree View and set the value to datatype "Float" value "100,00" in the Properties view. 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. 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. Set Rotation Example 1. Drag&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". 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. before deleting all behaviors after deleting behaviors 3. Drag&drop a Value Behavior (which is a Value Processing Behavior ) and a Handle Control State Behavior (which is a Control - Internal Behavior ) from the Behaviors Panel of the ToolBox onto the TextButton Control in the SceneTree. The Handle Control State Behavior is needed in order for the TextButton Control to receive Input Events. 4. Select the Value Behavior on the right side of the Scene Tree View and set the Value Behavior's AcceptValueEvent Property to "true" by checking the checkbox. 5. Drag&drop a Set Rotation Behavior (which is a Value Processing - Transformation Behavior ) from the Behaviors Panel of the ToolBox onto the Value Behavior's Receivers. 6. Drag&drop an OnClick Behavior (which is a Control Behavior ) from the Behaviors Panel of the ToolBox onto the TextButton Control. 7. Drag&drop a Send Value as Event Behavior (which is a Action - Property Behavior ) from the Behaviors Panel of the ToolBox onto the OnClick Behavior's Actions Property. 8. Select the Send Value as Event Behavior on the right side of the Scene Tree View and set the value to datatype "Float" value "40,00" in the Properties view. 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. 10. When Clicking on the TextButton in the Player, the Button is rotated 40° clockwise. Set Scale Example 1. Drag&drop a SolidColorNode from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree. 2. Drag&drop a Value Behavior (which is a Value Processing Behavior ) from the Behaviors Panel of the Toolbox onto the Text Value Control in the Scene Tree. 3. Select the Value Behavior on the right side of the Scene Tree View. Set the Value 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. 4. Select the SolidColorNode in the Scene Tree view and drag&drop an Interpolate Value Behavior (which is a Value Processing Behavior ) onto the Value Behavior's Receivers in the right side of the Scene Tree Panel. 5. Select the Interpolate Value Behavior on the right side of the Scene Tree view and set the property "Units Per Second" to 1,00 in the Properties view. 6. Drag&Drop a Set Scale Behavior (which is a Value Processing - Transformation Behavior ) onto the Interpolate Value Behavior's Receivers in the right side of the Scene Tree Panel. 7. Select the Set Scale Behavior and check the ScaleAlongY checkbox in the Properties view. Set the ScaleVextor2D Property to (1, 1). 8. Drag&drop two TextButton Controls from the Controls Panel of the Toolbox to the SceneEditor or the Scene Tree. 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. 10. Drag&drop a Send Value as Event Behavior (which is a Action - Property Behavior ) 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. 11. Select the first TextButton Control (the one with text "Decrease") and then select its Send Value as Event 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. 12. Set the scene's TextNode as SolidColorNode for the Send Value as Event Behavior: After clicking the magnifying glass in the properties panel, the "Select Item" Dialog is opened. Select the scene's SolidColorNode and press OK. 13. Select the second TextButton Control (the one with text "Increase") and then select its Send Value as Event 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. 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. 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. Set Text Example 1. Drag&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". 2. Position the TextButton Control and the TextNode nicely in the Scene Editor. 3. Drag&Drop a Provide Text Behavior (which is a Control - Public Property Behavior ) from the Behaviors Panel of the ToolBox onto the TextNode in the Scene Tree view. 4. Select the TextButton Control and drag&drop a Set Text Behavior (which is a Action - Property Behavior ) 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. 5. Select the newly added Set Text Behavior in right side of the Scene Tree view and change the Text property to "Hallo" in the Properties view. 6. Select the Set Text Behavior on the right side of the Scene Tree view and drag&drop it onto the TextNode on the left side of the Scene Tree view (you can see a little arrow and "Set Text"). 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. 8. When the TextButton is pressed, the text of the TextNode will be changed to "Hallo". Start Timer Example 1. Drag&drop a TextButton Control and a Text Control from the Controls panel of the Toolbox to the SceneEditor or the Scene Tree. 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. before deleting all behaviors after deleting behaviors 3. Set the TextButton Control's text to "Start Timer" and the Text Control's text to "Wait for Timer". 4. Drag&drop an OnClick Behavior (which is a Control Behavior ) and a Handle Control State Behavior (which is a Control - Internal Behavior ) from the Behaviors Panel of the ToolBox onto the TextButton Control in the SceneTree. The Handle Control State Behavior is needed in order for the Text Control to receive Input Events. 5. Select the TextButton Control in the Scene Tree view and drag&drop a Start Timer Behavior (which is a Action - Control Behavior ) from the Toolbox view onto the Actions of the TextButton Control's OnClick Behavior in the right side of the Scene Tree view. 6. Select the Start Timer Behavior in the right side of the Scene Tree view and set the Delay property to "1000" in the properties view. Set the Start Timer 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. After that, the Start Timer Behavior's Properties will look as follows. 7. Drag&drop an On Timer Behavior (which is a Control Behavior ) and a Handle Control State Behavior (which is a Control - Internal Behavior ) from the Behaviors Panel of the ToolBox onto the TextButton Control in the SceneTree. The Handle Control State Behavior is needed in order for the Text Control to receive Input Events. 8. Select the Text Control in the Scene Tree view and drag&drop a Set Color Behavior (which is a Action - Property Behavior ) from the Toolbox view onto the Actions of the Text Control's On Timer Behavior in the right side of the Scene Tree view. 9. Select the Set Color Behavior and change the Color to red. 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. 11. When the TextButton "Start Timer" is pressed, a timer is started and after some time the Text Control's text changes its color. Switch Image Example 1. Drag&drop a FlipBook Control from the Controls panel of the Toolbox to the SceneEditor or the Scene Tree. 2. Drag&drop a Value Behavior (which is a Value Processing Behavior ) and a Handle Control State Behavior (which is a Control - Internal Behavior ) from the Behaviors Panel of the ToolBox onto the TextButton Control in the SceneTree. The Handle Control State Behavior is needed in order for the Text Control to receive Input Events. 3. Select the Value Behavior in the right side of the Scene Tree view and set the "AcceptValueEvent" property to "True" in the Properties view. 4. Select the FlipBook Control in the Scene Tree view and drag&drop a Switch Image Behavior (which is a Value Processing - Effects Behavior ) from the Toolbox view onto the Receivers of the FlipBook Control's Value Behavior in the right side of the Scene Tree view. 5. Drag&drop an OnClick Behavior (which is a Control Behavior ) from the Behaviors Panel of the ToolBox onto the FlipBook Control in the SceneTree. 6. Select the FlipBook Control in the Scene Tree view and drag&drop a Send Value as Event Behavior (which is a Action - Property Behavior ) from the Toolbox view onto the Actions of the FlipBook Control's OnClick Behavior in the right side of the Scene Tree view. 7. Select the Send Value as Event Behavior in the right side of the Scene Tree view and set the "Value" propert to "5,00". 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. 9. When the FlipBook Control is clicked in the Player, the image of the FlipBook is switched. Transform Gesture Action Example 1. Drag&drop a SolidColorNode from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree. 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. 3. Drag&drop a Transform Gesture Action Behavior (which is a Action - Gesture Behavior ) and a Handle Control State Behavior (which is a Control - Internal Behavior ) from the Behaviors Panel of the ToolBox onto the SolidColorNode in the SceneTree. The Handle Control State Behavior is needed in order for the TextButton Control to receive Input Events. 4. Select the Transform Gesture Action Behavior and configure Panning Minimum and Maximum values for x and y coordinate. 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. 6. When panning the SolidColorNode you can drag it around in the area that has been defined in the Transform Gesture Action Behavior's Panning Properties. If you do have a touch screen available, you can also try pinching and rotating the SolidColorNode. Transform Gesture Condition Example 1. Drag&drop a SolidColorNode from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree. 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. 3. Drag&drop a Event Handler Behavior (which is a Control Behavior ) and a Handle Control State Behavior (which is a Control - Internal Behavior ) from the Behaviors Panel of the ToolBox onto the SolidColorNode in the SceneTree. The Handle Control State Behavior is needed in order for the TextButton Control to receive Input Events. 4. Drag&drop an Event Handler Behavior (which is a Control Behavior ) from the Toolbox view onto the SolidColorNode or its parent node in the Scene Tree view. 5. Select the SolidColorNode and drag&drop a Transform Gesture Condition Behavior (which is a Condition - Input Behavior ) onto the Event Handler EventHandler's Condition on the right side of the Scene Tree View. 6. Select the SolidColorNode and drag&drop a Set Color Behavior (which is a Action - Property Behavior ) onto the Event Handler EventHandler's Actions on the right side of the Scene Tree View. 7. Select the Set Color Behavior and change the Color to red. 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. 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. Swipe Gesture Example 1. Drag&drop a SolidColorNode from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree. 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. 3. Drag&drop a Event Handler Behavior (which is a Control Behavior ) and a Handle Control State Behavior (which is a Control - Internal Behavior ) from the Behaviors Panel of the ToolBox onto the SolidColorNode in the SceneTree. The Handle Control State Behavior is needed in order for the TextButton Control to receive Input Events. 4. Select the SolidColorNode and drag&drop a Swipe Gesture Condition Behavior (which is a Condition - Input Behavior ) onto the Event Handler EventHandler's Condition on the right side of the Scene Tree View. 5. Select the Swipe Gesture Condition Behavior and configure its direction to "Right". 6. Select the SolidColorNode and drag&drop a Set Color Behavior (which is a Action - Property Behavior ) onto the Event Handler EventHandler's Actions on the right side of the Scene Tree View. 7. Select the Set Color Behavior and change the Color to red. 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). 9. By duplicating the EventHandler you have created "Event Handler_1" with Condition "Swipe Gesture_1" and Action "Set Color_1". 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. 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. 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. Initial color After swipe right After swipe left Scroll View Example 1. Drag&drop a ScrollView Control from the Controls Panel of the Toolbox to the Scene Editor or the Scene Tree. 2. Drag&drop a StackLayout from the "Nodes2D" Panel of the ToolBox onto the ContentAnchor of the ScrollView Control in the Scene Tree. 3. Change the Layouter Arrangement of the StackLayout to "vertical". 4. Drag&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. 5. Select a Text Control in the Scene Tree View and set its width to "500" in the Layout Size Properties. 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. 7. Repeat the previous two steps for the second Text Control. 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. 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. 10. The SceneEditor now displays the ScrollView and its contents without the possibility to scroll. 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. 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. 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. Process Value Changed Event - Slider Example Drag&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. Drag&drop a Process Value Changed Event from the Toolbox onto the Slider in the Scene Tree. Select the Slider in the Scene Tree and drag&drop a Format String Behavior into the right side of the Scene Tree onto the Receivers part of the Process Value Changed Event. 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. 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   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 key). The TextNode2D will always display the current value of the Slider. 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. Process Value Changed Event - State Machine Example 1. Drag&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. 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". 3. Select the created State Machine and make it a global State Machine by checking the "Is Global" property in the Properties panel. 4. Double-click your Global State Machine to open it in the State Machine Editor. Drag&drop a State from the tools in the top right corner of the State Machine Editor into the State Machine diagram. 5. Drag&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. 6. Perform the same action again, drawing a Transition in the other direction. 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". 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. 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&drop a "Process Value Changed Event" from the Toolbox onto the TextNode2D in the Scene Tree and drag&drop a "Format String" behavior onto the Receiver's part of the "Process Value Changed Event". 11. Select the Format String Behavior and enter "%d" in the Text Property. 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. 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&Drop a StackLayout onto the scene and rename to "Group" 2. Drag&Drop a StackLayout onto the root group and rename to "GlobalGroup". Set the property "Layouter > Arrangement" to "Vertical" 3. Drag&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). Setting up the State Machines 1. In Solution Explorer in "Solution > State Machines" from the context menu use "Add > 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&Drop a new State onto StateMachine canvas. Rename the two states to "Value_Is_0" and "Value_Is_1". 4. Drag&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 > Event" to "Value Changed", "Transition > Condition" to "Check Changed Value", "Condition parameters > ConditionOperator" to "Equal" and "Condition parameters > ConditionValue" to "Int32" and value "0" and "1", respectively). Connecting Scene and StateMachines 1. In Scene Tree open "GlobalButton_Send_1". From "Behaviors > Action > Property" drag&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 > Sender" to "Scene2D > Group > GlobalGroup > 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 > Action > Property" drag&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 > Group > GlobalGroup > 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 > Group" and drag&drop a StateMachine behavior onto its behavior tree. In the properties panel set "StateMachine" to "Solution > State Machines > LocalChangeColorOnEvent". Result and Conclusion Generate and play the solution to see the following result: The following aspects have been considered in this example: 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 Behaviors and Events . 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. Set MVG Fill Colour Drag and drop TextButton (Controls > Touchable) and MVG Rect  Node (Nodes 2D) from the Toolbox onto the Scene Editor or Scene Tree. Select the TextButton node in the Scene Tree. In the Properties panel, under Control > Text, set the value to “Change Color.” Select the TextButton node again in the Scene Tree. In the Extra Scene Tree, add a  Set MVG Fill Color (Behavior: Action > Property) to Event Handler > Actions by dragging and dropping it from the Toolbox. Select the newly added Set MVG Fill Color . In the Properties panel, change Color to any desired color. In the Set MVG Fill Color properties, for TargetNode, click the item-selection icon. The  Choose Item dialog opens. In Scenes, choose Scene2D > MVG Rect. The MVG Rect node is now set as the target node. Next, in the Extra Scene Tree, select Condition: Check Click. Its properties appear in the Properties panel. For the Sender property, click the item-selection icon. The  Choose Item dialog opens. In Scenes, choose Scene2D > TextButton. 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. Set MVG Stroke Color Drag and drop TextButton (Controls > Touchable) and MVG Rect  Node (Nodes 2D) from the Toolbox onto the Scene Editor or Scene Tree. Select the TextButton node in the Scene Tree. In the Properties panel, under Control > Text, set the value to “Change Stroke Color.” Select the TextButton node again in the Scene Tree. In the Extra Scene Tree, add a Set MVG Stroke Color (Behavior: Action > Property) to Event Handler > Actions by dragging and dropping it from the Toolbox. Select the newly added Set MVG Stroke Color . In the Properties panel, change Color to any desired color. In the Set MVG Stroke Color   properties, for TargetNode, click the item-selection icon. The  Choose Item dialog opens. In Scenes, choose Scene2D > MVG Rect. The MVG Rect node is now set as the target node. Next, in the Extra Scene Tree, select Condition: Check Click. Its properties appear in the Properties panel. For the Sender property, click the item-selection icon. The  Choose Item dialog opens. In Scenes, choose Scene2D > TextButton. 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. Action Behaviors Animation Action Behaviors Configure and Play Animation Class Reference 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 Property Name Type Description TargetNode Candera::AbstractNodePointer The Node which is modified. If not set, then the node where the behavior is attached to, will be modified. Animation Candera::Animation::AnimationPlayer The animation that should be controlled. Action CgiStudioControl::AnimationAction::Enum Action that shall be executed on the animation: Start, Stop, Pause, Resume, Speedup, Finish, Change. Direction CgiStudioControl::AnimationDirection::Enum Playback direction of the animation. Speed FeatStd::Float Playback speed of the animation. RepeatMode FeatStd::Optional Defines how the animation shall be repeated. Possible values: Replay, Bounce RepeatCount FeatStd::Optional Count of replays. If set to 0 the animation loops till it gets stopped. EventDispatchStrategy EventDispatchStrategyType::Enum The way the event gets sent. DedicatedBehavior Candera::Behavior* 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. Advanced Properties Property Name Type Description FinishTime FeatStd::Optional Finish time in milliseconds. This property is only available if the property "Action" is checked and set to "Finish". IncreaseSdpeed FeatStd::Optional 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 IncreasedSpeedRevertMargin FeatStd::Optional 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. SequenceStartTime FeatStd::Optional The start point  of the animation. [ms] This property is only available if an animation is set in the property "Animation". SequenceDurationTime FeatStd::Optional The duration of the animation. [ms] This property is only available if an animation is set in the property "Animation". Control Action Behaviors Breadcrumb Action Class Reference An Action Behavior that sends breadcrumb action events. It allows you to control a  Breadcrumb or a node with a Breadcrumb Behavior attached. This behavior is available for 2D scenes only. The operations that can be performed are: 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. Common Properties Property Name Type Description Action CgiStudioControl::AnimationAction::Enum Action that will be called on the breadcrumb. Possible values: SetPath, BackToPrevious, BackToElement Path String The path with a separator that will be passed when the action is called. The separator is defined in the receiving breadcrumb. BreadcrumbNode Candera::AbstractNodePointer Breadcrumb Control Node. Change Selection Class Reference 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. Conditional Action Class Reference 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. Common Properties Property Name Type Description Condition Candera::ConditionBehavior* The ConditionBehavior that TriggerBehavior passes a value to and expect a response from to see if Action needs to be invoked. Actions Candera::ActionBehaviorArrayProperty The set of ActionBehaviors that TriggerBehavior invokes in the even that it receives a positive response from Condition. Postpone bool 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. Change Drawer State Class Reference An Action that allows to hide/show the contents of a  Drawer or a Node with a Drawer Behavior attached. This behavior is available for 2D scenes only. The operation that can be performed are: Close, Open or Toggle. Common Properties Property Name Type Description TargetNode Candera::AbstractNodePointer The Node which is modified. If not set, then the node where the behavior is attached to, will be modified. Action CgiStudioControl::DrawerEventType::Enum The action that should be performed. Possible values: Open, Close, Toggle EventDispatchStrategy CgiStudioControl::EventDispatchStrategyType::Enum The way the event gets sent. Possible values: Direct, Broadcast, Bubble, Tunnel, DedicatedBehavior Advanced Properties Property Name Type Description DedicatedBehavior Candera::Behavior * A dedicated behavior that will receive the event. Only available when Dispatch Strategy is set to 'DedicatedBehavior'. Set Focus Sets keyboard focus to the selected control when triggered. Can be used for example to change focus between List controls. Common Properties Property Name Type Description TargetNode Candera::AbstractNodePointer The Node which is modified. If not set, then the node where the behavior is attached to, will be modified. FocusCamera Candera::AbstractNodePointer Set the camera node for this focus Action. Interpolate Value Action Changes the animation mode (for example, SpeedBased) of the InterpolateProcessValue behavior when the relevant action is triggered. Common Properties Property Name Type Description TargetNode Candera::AbstractNodePointer The Node which is modified. If not set, then the node where the behavior is attached to, will be modified. Action InterpolateValueAction::Enum Action that will be called on the interpolate value behavior. Possible values: SetMode, Reset AnimationMode InterpolationAnimationMode::Enum Use the InterpolationAnimationMode to select the desired type of animation in the InterpolateProcessValueBehavior. Possible values: SpeedBased, TimeBased, Instant 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 Property Name Type Description TargetNode Candera::AbstractNodePointer The Node which is modified. If not set, then the node where the behavior is attached to, will be modified. SwitchState IntervalSwitchState::Enum SwitchState: IntervalSwitchState: Enum Possible values: On, Off, Blinking 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 Property Name Type Description Action KeyboardAction::Enum Keyboard action to execute. Possible values: Open, Close, Toggle, InvokeKey, ShiftLayout, SwitchLayout, SetConfiguration KeyboardNode Candera::AbstractNodePointer Keyboard Node. AutoHideKeyboard bool Should keyboard be hidden when node loses focus and show again when node is focused? Advanced Properties Property Name Type Description Layout String Layout name. This property is only available if "Action" is set to "Open", "ShiftLayout" or "SwitchLayout". Notifier Candera::AbstractNodePointer 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". TextNode Candera::AbstractNodePointer Text node. This property is only available if "Action" is set to "InvokeKey". ImageNode Candera::AbstractNodePointer ImageNode node. This property is only available if "Action" is set to "InvokeKey". FocusNode Candera::AbstractNodePointer FocusNode node. This property is only available if "Action" is set to "InvokeKey". Configuration String Keyboard configuration. This property is only available if "Action" is set to "SetConfiguration". Map Action Call a specified action on selected MapBehavior. Common Properties Property Name Type Description MapNode Candera::AbstractNodePointer Map node on which this action should be called. Action MapAction::Enum Action that will be called on the MapBehavior. Possible values: Reset, Pan, Zoom, Tilt, LookAt, CenterAtLocation, Rotate, SetRotation, ChangeTheme. Latitude Float GPS latitude at which the camera looks at. Longitude Float GPS longitude at which the camera looks at. Zoomlevel Float Determines how close is the camera to the ground level. Bearing Float Determines the bearing angle at which the camera is rotated relative to north. Tilt Float Determines the tilt angle at which the camera looks at specified location. SyleUrl String Theme that describes how the map looks like and how is styled. Map Location Action Represents a location on the map which can be sent to MapBehavior. Common Properties Property Name Type Description TargetNode Candera::AbstractNodePointer Map node on which this action should be called. Latitude Float Latitude of the location. Longitude Float Longitude of the location. LocationName String Human-readable name of the location. Address String Address of the location (usually street name). Navigation Action Invoke a specified navigation action on selected Map Common Properties Property Name Type Description MapNode Candera::AbstractNodePointer Map node on which this action should be called. Action MapNavigationAction::Enum Action that will be called on the MapNode. Possible values: StartNavi, StopNavi, ReverseRoute MenuScreenAction Class Reference 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 Property Name Type Description Action MenuScreenAction::Enum Action that will be called on the menu screen. Possible values: EditMode, Delete, SwapRight, SwapLeft, AddScreen, DeleteLastScreen MenuItemNode Candera::AbstractNodePointer Needed to identify which node should be deleted. MenuScreenNode Candera::AbstractNodePointer MenuScreen node to which event will be sent. Page Indicator Action Class Reference 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 Property Name Type Description Action PageIndicatorAction::Enum Action to perform on PageIndicator (change number of pages, change active index) Possible values: ChangeActiveIndex, ChangeNumberOfPages, ActiveDot Properties available when Action is set to ChangeActiveIndex or ChangeNumberOf Pages Property Name Type Description Value FeatStd::Int32 Value to be sent to PageIndicator (for ChangeActiveIndex and ChangeNumberOfPages actions) ChangeValue ChangeValue::Enum Type of value change to be sent to PageIndicator (for ChangeActiveIndex and ChangeNumberOfPages actions) Possible values: Absolute or Relative PageIndicatorNode Candera::AbstractNodePointer PageIndicator node to communicate with. Properties for usage within PageIndicatorElement (ActivateDot) These properties are used only when the behavior is used within PageIndicatorElement and action is set to ActivateDot. Property Name Type Description RenderNode Candera::AbstractNodePointer Render node for current PageIndicatorElement (used only for PageIndicatorElement) NormalImagePropertyProvider CgiStudioControl::PropertyProviderBehavior* 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. ActiveImagePropertyProvider CgiStudioControl::PropertyProviderBehavior* 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. Set Control State Class Reference Sets the  state of a control by sending an Event to a control considering the selected EventDispatchStrategy. Supports:  Any Node with a Handle Control State attached. Used in:  SpinBox See also: Set Image , Set Text , Set Color Example Usage Hover - Hover Leave Example Common Properties Property Name Type Description State ControlStateEnum::Enum Choose the State which has to be changed to True or False. Possible values: Selected, Pressed, Enabled, Highlighted, KeyboardFocused, ScopeFocused, Hover, Touched ChangeTo bool Switch the state of the control to True or False. UseForChildNodes bool State change will also affect all child nodes of the target node EventDispatchStrategy EventDispatchStrategyType::Enum The way the event gets sent. Possible values: Direct, Broadcast, Bubble, Tunnel, DedicatedBehavior TargetNode Candera::AbstractNodePointer The Node which is modified. If not set, then the node where the behavior is attached to, will be modified. Advanced Properties Property Name Type Description DedicatedBehavior Candera::Behavior * A dedicated behavior that will receive the event. This property is only available when Dispatch Strategy is set to 'DedicatedBehavior'. Start Timer Class Reference 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: ScrollBar See also:  Check Timer , OnTimer Example Usage Start Timer Example Common Properties Property Name Type Description TargetNode Candera::AbstractNodePointer The Node which is modified. If not set, then the node where the behavior is attached to, will be modified. Delay FeatStd::UInt32 Delay time for the timer event (specification in milliseconds) Custom Action Behaviors Click to Message Sends a custom message on invoke action event. Common Properties Property Name Type Description Identifier String The identifier of the click message. 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 Property Name Type Description TargetNode Candera::AbstractNodePointer The Node which is modified. If not set, then the node where the behavior is attached to, will be modified. Appearance SharedPointer The appearance to set on the node. Gesture Action Behaviors 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. 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. Pinch If you pinch/stretch the content with your fingers the content will be scaled down/up. 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. 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. 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. 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). Example Usage Transform Gesture Example Common Properties Property Name Type Description TargetNode Candera::AbstractNodePointer The Node which is modified. If not set, then the node where the behavior is attached to, will be modified. Pan FeatStd::Optional The pan transformation of a pan gesture is applied to the node. Pinch FeatStd::Optional The scale transformation of a pinch gesture is applied to the node. Rotate bool The rotate transformation of a rotate gesture is applied to the node. Advanced Properties Property Name Type Description PanMinimumX FeatStd::Optional The minimum pan X value. This property is only available if panning in x direction is enabled. PanMinimumY FeatStd::Optional The minimum pan Y value. This property is only available if panning in y direction is enabled. PanMaximumY FeatStd::Optional The maximum pan X value. This property is only available if panning in x direction is enabled. PanMaximumX FeatStd::Optional The maximum pan Y value. This property is only available if panning in y direction is enabled. PinchMinimumX FeatStd::Optional The minimum pinch X value. This property is only available if pinching in x direction is enabled. PinchMinimumY FeatStd::Optional The minimum pinch Y value. This property is only available if pinching in y direction is enabled. PinchMaximumX FeatStd::Optional The maximum pinch X value. This property is only available if pinching in x direction is enabled. PinchMaximumY FeatStd::Optional The maximum pinch Y value. This property is only available if pinching in y direction is enabled. PinchMinimumUniform FeatStd::Optional The minimum pinch uniform value. This property is only available if pinching is enabled and configured for ScaleUniform. PinchMaximumUniform FeatStd::Optional The maximum pinch uniform value. This property is only available if pinching is enabled and configured for ScaleUniform. RotateMinimum FeatStd::Optional The minimum rotate value This property is only available if rotation is enabled. RotateMaximum FeatStd::Optional The maximum rotate value This property is only available if rotation is enabled. Property Action Behaviors 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 Property Name Type Description TargetNode Candera::AbstractNodePointer The Node which is modified. If not set, then the node where the behavior is attached to, will be modified. PropertyReference PropertyReference::Enum Choose how the property gets set. Via own property or from another Behavior. Possible values: Self, Other Appearance SharedPointer The appearance to set on the node. This property is only available if the PropertyReference is set to "Self". PropertyProvider PropertyProviderBehavior* 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". UseAsDefault bool True if the image shall be used as default image. Send Value as Event Class Reference Sends out a new value. Associated controls with a value property receive the new value. Example Usage Format String Example Interpolate Value Example Move Node Example Send Value As Event Example Set Position Example Set Rotation Example Switch Image Example Set Scale Example Common Properties Property Name Type Description TargetNode Candera::AbstractNodePointer The Node which is modified. If not set, then the node where the behavior is attached to, will be modified. PropertyReference CgiStudioControl::PropertyReference::Enum Choose how the property gets set. Via own property or from another Behavior. Possible values: Self, Other ChangeValue ChangeValue::Enum How the event value shall be handled by the receiving. Possible values: Absolute, Relative EventDispatchStrategy EventDispatchStrategyType::Enum The way the event gets sent. Possible values: Direct, Broadcast, Bubble, Tunnel, DedicatedBehavior Advanced Properties Property Name Type Description Value FeatStd::Variant The value of the event which gets sent. This property is only available when the PropertyReference is set to "Self". PropertyProvider PropertyProviderBehavior* 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". DedicatedBehavior Candera::ProcessValueBehavior * 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". Set Color Class Reference 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 Controls: Text Text Value Effects: BitmapBrushColorBlend (as used in TextNode) GlBitmapBrushColorMaskBlend GlDropShadowBitmapBrushColorBlend GlFlipBitmapBrushColorBlend GlOutlineBitmapBrushColorBlend SolidColorBrushColorBlend (as used in SolidColorNode) See also: Set Image , Set Text , Set Control State Example Usage Thermometer Example Hover - Hover Leave Example OnClick Example Set Image Example Start Timer Example Common Properties Property Name Type Description Property Reference PropertyReference::Enum Choose how the property gets set. Via own property or from another Behavior. Possible values: Self, Other Color Candera::Color The color to set. This property is only available if PropertyReference is set to "Self". Use For Child Nodes bool If set to true, also child nodes are affected by this action. Levels UInt8 Number of levels to step down through groups. Default is zero. This property is only available if UseForChildNodes is checked. TargetNode Candera::AbstractNodePointer The node which is modified. If not set, then the node where the behavior is attached to, will be modified. Advanced Properties Property Name Type Description Property Provider PropertyProviderBehavior* 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". Set Image Class Reference 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:  Set Text , Set Color , Set Control State Example Usage Set Image Example Common Properties Property Name Type Description Target Node Candera::AbstractNodePointer The node which gets the given image. If not set, then the node where the behavior is attached too, will be modified. Property Reference PropertyReference::Enum Choose how the property gets set. Via own property or from another Behavior. Possible values: Self, Other Image SharedPointer The image to set on the effect. This property is only available for 2D scenes. Use As Default bool True if the image shall be used as default image. Advanced Properties Property Name Type Description Texture SharedPointer< Candera::TextureImage > The image to set on the appearance. This property is only available for 3D scenes. PropertyProvider PropertyProviderBehavior* 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" 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. Property Name Type Description PropertyReference CgiStudioControl::PropertyReference::Enum     Choose how the property gets set. Via own property or from another Behavior. Color Candera::Color The fill color to be set. PropertyProvider CgiStudioControl::PropertyProviderBehavior Property Behavior which contains the color which has to be set on the effect. Set MVG Stroke Color 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. Property Name Type Description PropertyReference CgiStudioControl::PropertyReference::Enum     Choose how the property gets set. Via own property or from another Behavior. Color Candera::Color The fill color to be set. PropertyProvider CgiStudioControl::PropertyProviderBehavior Property Behavior which contains the color which has to be set on the effect. Render Child Nodes Class Reference 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 Render Child Nodes Example Common Properties Property Name Type Description TargetNode Candera::AbstractNodePointer The node which switches child nodes. If not set, then the node where the behavior is attached to, will modified its children. Index Float Index of the child node which shall be active. OperationMode OperationMode::Enum 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 Levels UInt8 Number of levels to step down through groups. Default is zero. NormalizeValue bool 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. Set Text Class Reference Sets/Changes the text of a TextNode. See also: Set Image , Set Color , Set Control State Example Usage Set Text Example Common Properties Property Name Type Description TargetNode Candera::AbstractNodePointer The Node which gets the given text. If not set, then the node where the behavior is attached to, will be modified. PropertyReference PropertyReference::Enum Choose how the property gets set. Via own property or from another Behavior. Possible values: Self, Other Text String The text that will be set to the Text Node. This property is available if the PropertyReference is set to "Self". Advanced Properties Property Name Type Description PropertyProvider PropertyProviderBehavior* 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". Set Text Style Sets the configured text style to a text node when the action is triggered. Common Properties Property Name Type Description TargetNode Candera::AbstractNodePointer The Node which gets the given text. If not set, then the node where the behavior is attached to, will be modified. Style SharedPointer The Style that will be set to the Text Node. Enable Rendering Class Reference If invoked by a TriggerBehavior, changes the visibility of a node. Example Usage Enable Rendering Example Common Properties Property Name Type Description TargetNode Candera::AbstractNodePointer The node which gets the visibility flag. If not set, then the node where the behavior is attached to, will be modified. Visible bool According to this value, the affected node gets rendered or not. Send Value Changed As Event Sends out a new value. Associated controls with a value property receive the new value. Example Usage Process Value Changed Event - State Machine Example Usecase for Send Value Changed as Event and reception in state machine(s) Common Properties Property Name Type Description Value FeatStd::Variant The value of the event which gets sent. This property is only available if PropertyReference is set to "Self". Sender Candera::AbstractNodePointer 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. EventDispatchStrategy c The way the event gets sent. Possible values: Direct, Broadcast, Bubble, Tunnel, DedicatedBehavior TargetNode Candera::AbstractNodePointer The node on which the for which the EventDispatchStrategy will be applied. If it is not set then the Node will be taken instead. PropertyReference PropertyReference::Enum Choose how the property gets set. Via own property or from another Behavior. Possible values: Self, Other Target Node Candera::AbstractNodePointer 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. Advanced Properties Property Name Type Description DedicatedBehavior ProcessValueBehavior* 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". PropertyProvider PropertyProviderBehavior* 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". Scroll Action Behaviors Send Scrollable Event Class Reference 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 Property Name Type Description Target Node Candera::AbstractNodePointer The node which is modified. If not set, then the node where the behavior is attached to, will be modified. Direction Optional The direction in which the scroll should be performed. Possible values: Vertical, Horizontal Type ScrollableEventType::Enum The scrolling type. It can be either relative or absolute scrolling in combination of being either itemwise or pagewise scrolling. Value Float The number of items or pages scrolled to. TreatAnimationDurationZeroAsNotSet bool 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. AnimationDuration UInt32 Duration of the scrolling animation. EventDispatchStrategy EventDispatchStrategyType::Enum The way the event gets sent. Possible values: Direct, Broadcast, Bubble, Tunnel, DedicatedBehavior Advanced Properties Property Name Type Description DedicatedBehavior Behavior* 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". Streaming Action Behaviors Configure and Play Stream Class Reference Starts, stops, pauses, resumes video streams by emitting an VideoControl Event. These Events can be received by  Video Stream Behaviors. Common Properties Property Name Type Description TargetNode Candera::AbstractNodePointer The node which receives the event. If not set, then the node where the behavior is attached to, will receive it. Action VideoControl::Enum Action that will be executed on the stream. Possible values: Play, Replay, Pause, Resume, Stop. EventDispatchStrategy EventDispatchStrategyType::Enum The strategy in which the event is sent.  Possible values: Direct, Broadcast, Bubble, Tunnel, DedicatedBehavior. Advanced Properties Property Name Type Description DedicatedBehavior Candera::Behavior * 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". Transition Action Behaviors Perform Transition Requests Class Reference 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: Transition Request Example Usage Perform Transition Requests Example Common Properties Property Name Type Description Requests ArrayProperty The first TransitionRequestBehavior in the request-set. Variant String Default Variant which will be used for attached Requests. Not that Requests can also have their own Variant. Transition Request Class Reference Used to specify whether a node should be activated or deactivated by the transition framework when the associated TransitionActionBehavior is triggered. Example Usage Perform Transition Requests Example Common Properties Property Name Type Description RequestType CgiStudioControl::TransitionRequestType::Enum 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 Variant FeatStd::String Variant which will be used for this Request. Identifier Candera::Transitions::Identifier The Node or Scene that will be subject to the transition. Views Jump to View 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. Common Properties Property Name Type Description TargetNode Candera::AbstractNodePointer The Node which is modified. If not set, then the node where the behavior is attached to, will be modified. View ViewIdentifier Identifier of the view that is requested to be shown. There is no documentation for behaviors of the Internal subcategory as they are used internally by Scene Composer and not intended for customer use . Send Virtual Key When triggered the action behavior sends a KeyEvent for down and one frame later a KeyEvent for up Common Properties Property Name Type Description KeyType KeyType::Enum Choose the type of the key. With KeyCode you can select any key. Possible values: KeyCode, Modifier Modifier KeyModifierEnum::Enum 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". KeyCode KeyboardKeyCode::Enum With KeyCode you can select any key. Possible values: Key_None, ...... Key_OEM8 This property is only available if "KeyType" is set to "KeyCode". Set Culture Class Reference 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 Property Name Type Description Locale FeatStd::String Locale of a culture. Invoking the action will set the culture active. Condition Behaviors Control Condition Behaviors 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 Property Name Type Description AnimationState AnimationState::Enum State of the AnimationEvent which fulfills the Condition. Possible values: PastEnd, Start, Stop, Finish, Resume, Pause, ApplyChanges, DirectionChange Sender SharedPointer The sender of AnimationEvent. 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. Check Enter or Exit Expects an EnterExit Event (generated by Edit Text Behavior) and returns either a positive or negative response. Common Properties Property Name Type Description EnterOrExit bool True means Enter, false means Exit. 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 Property Name Type Description VisualizationState IntervalSwitchState::Enum If the value (received by the IntervalSwitchConditionBehavior) matches the Visualization State set, it will return a positive response. Possible values: On, Off, Blinking Check Selection ID Compares the ID from the ChangeSelectionEvent with the ID from its own Control. Common Properties Property Name Type Description SelectionCondition SelectionConditionEnum::Enum The condition that the ID from the ChangeSelectionEvent has to fulfill. Possible values: Same, NotSame 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 Property Name Type Description State ControlStateEnum::Enum State which has to be checked. Possible values: Selected, Pressed, Enabled, Highlighted, KeyboardFocused, ScopeFocused, Hover, Touched StateCondition StateConditionEnum::Enum The condition the state has to fulfill. Possible values: ChangedToTrue, ChangedToFalse, IsTrue, IsFalse Check Timer See also: Start Timer , OnTimer 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 Property Name Type Description Sender AbstractNodePointer 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. 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 Property Name Type Description Sender AbstractNodePointer 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. ConditionOperator Operators::Enum The condition operator. Possible values: GreaterThan, LowerThan, Equal, AlmostEqual, GreaterOrEqual, LowerOrEqual ConditionValue FeatStd::Variant The condition value. 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: Value sent in Process Value External value from ValueBehavior Value set directly in this ValueConditionBehavior Example Usage Thermometer Example Common Properties Property Name Type Description OperationMode Operators::Enum Operation mode of behavior, defining which values should be compared. Possible values: CompareProcessedValueWithConditionValue, CompareExternalValueWithConditionValue, CompareProcessedValueWithExternalValue ConditionOperator Operators::Enum The condition operator. Possible values: GreaterThan, LowerThan, Equal, AlmostEqual, GreaterOrEqual, LowerOrEqual ConditionValue FeatStd::Variant The condition value. This property is only available if "OperationMode" is set to "CompareProcessedValueWithConditionValue" or  "CompareExternalValueWithConditionValue". ValueBehavior CgiStudioControl::ValueBehavior * 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. Check Video State Checks the state of an VideoStateEvent received from an 'Video Stream Behavior'. Expects a VideoState event (generated by Video Stream Behavior) and evaluates the configured state condition. To be used within a trigger behavior. Common Properties Property Name Type Description VideoState VideoState::Enum State of the VideoEvent which fulfills the Condition. Possible values: Null, Ready, Playing, Paused, EndOfStream 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 Render Child Nodes Example Common Properties Property Name Type Description Sender AbstractNodePointer 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. ClickCount CgiStudioControl::ClickCount::Enum If the value ClickConditionBehavior receives matches the Click Count set, it will return a positive response. Possible values: AnyClick, SingleClick, DoubleClick, TripleClick TouchId FeatStd::UInt The id of the finger that performed the click (the default value of 0 indicates the first finger, 1 the second ...). Check Drag Drop Evaluates the configured DragDrop event condition. To be used within a trigger behavior to trigger a certain action. Common Properties Property Name Type Description Sender AbstractNodePointer 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. Type FeatStd::Optional The optional type of the event. If not provided then any DragDropEvent will be evaluated to true. Possible values: Drag, DragMove, Drop, DragEnter, DragLeave TouchId FeatStd::UInt The id of the finger that performed the drag (the default value of 0 indicates the first finger, 1 the second ...). Check Hover Evaluates the configured Hover event condition. To be used within a trigger behavior to trigger a certain action. Common Properties Property Name Type Description Sender AbstractNodePointer 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. Type FeatStd::Optional The optional type of the event. If not provided then any DragDropEvent will be evaluated to true. Possible values: Hover, HoverEnter, HoverLeave TouchId FeatStd::UInt The id of the finger that performed the drag (the default value of 0 indicates the first finger, 1 the second ...). Check Key Input Checks a received KeyEvent (Control or Node with ControlStateBehavior / 'Handle Control State' must have focus). Common Properties Property Name Type Description KeyType CgiStudioControl::KeyType::KeyCode Choose type of key. Possible values: KeyCode, Modifier KeyCode Candera::KeyboardKeyCode::Enum Check the KeyCode of the pressed key (can also be modifier). Possible values: Key_None, ...... Key_OEM8 This property is only available if "KeyType" is set to "KeyCode". Advanced Properties Property Name Type Description Modifier Candera::KeyModifierEnum::Enum 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".  Check Pressed Evaluates the configured Pressed event condition. To be used within a trigger behavior to trigger a certain action. Common Properties Property Name Type Description Sender AbstractNodePointer 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. Type FeatStd::Optional The optional type of the event. If not provided then any DragDropEvent will be evaluated to true. Possible values: Pressed, Released, LongPressed TouchId FeatStd::UInt The id of the finger that performed the drag (the default value of 0 indicates the first finger, 1 the second ...). 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. 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: CgiStudioControl::SwipeGestureDetector :: GetInstance().SetSwipeDistanceThreshold(…) . 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. 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 CgiStudioControl::SwipeGestureDetector :: GetInstance().SetFlickVelocityThreshold(…) . 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 Property Name Type Description Type FeatStd::Optional The type of the swipe gesture. Possible values: Begin, Swiping, End, Flick, Abort Direction FeatStd::Optional The direction of the swipe. Possible values: Left, Right, Up, Down 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 Property Name Type Description Operation LogicConditionBehaviorOperator::Enum Specifies logical operator that is used on values returned by the Conditions. The resulting value is returned. Possible values: And, Or, XOr Conditions Candera::ConditionBehaviorArrayProperty ConditionBehaviors that are combined with the ConditionOperator. Check Not Condition Acts as a 'NOT' operand by inverting a value returned by a ConditionBehavior and returns it. Common Properties Property Name Type Description Condition Candera::ConditionBehavior* ConditionBehavior whose value NotConditionBehavior inverts. 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 Property Name Type Description ScrollDirection ScrollDirection::Enum If the value that the ScrollDirectionConditionBehavior receives matches the set ScrollDirection, it will return a positive response. Possible values: Vertical, Horizontal Check Culture Change Class Reference 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 Property Name Type Description Locale FeatStd::String Locale of a culture which will be checked. Control Behaviors Construction Kit Control Behaviors Map Control Behaviors Map Provides the map rendering and navigation functionality. Common Properties Property Name Type Description TouchableId String Touchable Id of the behavior. Bearing Float Clockwise angle relative to North that the users currently faces. Longitude Candera::Variant Longitude of current users location. Latitude Candera::Variant Latitude of current users location. SimulateDriving bool Simulate driving along computed route when in navigation mode. NaviMessageNode AbstractNodePointer Node to which navigation instructions will be sent. LocationMesh AbstractNodePointer Node containing mesh(es) used to render the location indicator. RouteOverlayColor Candera::Color Color used by the route overlay. AvoidTolls bool Avoid tolls during route computation. AvoidMotorways bool Avoid motorways during route computation. AvoidFerry bool Avoid ferrys during route computation. Map Bridge Builds a bridge to MapBehavior forwarding touch events. Common Properties Property Name Type Description TouchableId String Touchable Id of the behavior. TargetNode AbstractNodePointer Node containing the target MapBehavior to which events will be forwarded. 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 Property Name Type Description TouchableId String Touchable Id of the behavior. ScrollDirection ScrollDirection::Enum The direction in which the ListBehavior scrolls. Possible values: Vertical, Horizontal Position FeatStd::Float The pixel position of the visible content within the list content. AnimationDuration FeatStd::UInt32 Duration of the scrolling animation. DecelerationFactor FeatStd::Float Loss of flick animation speed over time. MaxSpeedPerFlick FeatStd::Float Maximum amount of speed each flick motion adds to the flick animation. MinSpeedPerFlick FeatStd::Float Minimum speed required to count a touch gesture as a flick and start or continue the flick animation. MinMovementToScrolling FeatStd::UInt32 Minimum distance a touch gesture needs to move to start a scrolling animation. MaxTouchSampleAge FeatStd::UInt32 Maximum age in milliseconds of touch movement speed counted towards generating flick animation speed. Items ListPropertyType 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. ListFragmentTriggerOffset FeatStd::SizeType 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. ListFragmentSize FeatStd::SizeType 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 HandleKeyboardEvents bool Makes the behavior handle KeyboardFocusNavigation events internally. WrapAround bool Set this flag to true for static list to wrap around the list items on the top and bottom of the list 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 Property Name Type Description TouchableId String Touchable Id of the behavior. TouchListenerNode Candera::AbstractNodePointer This node defines the area on which the ScrollbarBehavior will listen for the touch events. ScrollDirection FeatStd::Optional < ScrollDirection::Enum > The direction in which the ListBehavior scrolls. By default it is configured as a vertical scrollbar. ScrollbarVisibility ScrollbarVisibility::Enum 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 HandleMinimumSize FeatStd::UInt32 The minimum height (for vertical scrollbar) or minimum width (for horizontal scrollbar) of the handle in pixels. MinMovementToScrolling FeatStd::UInt32 Minimum distance a touch gesture needs to move to start scrolling. ScrollableNode Candera::AbstractNodePointer Node of the scrollable behavior. 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 Scrollbar Behavior Scrollbar via Event Bridge Behavior ). Example Usage Scroll View Example 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  List Control . Common Properties Property Name Type Description ItemAlignment SnapAlignmentOrientation::Enum The location of the alignment base point within the list item. Possible values: Begin, Center, End ItemAlignmentOffset FeatStd::Float 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. ItemAlignmentOffsetInPercent bool 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. 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 . Common Properties Property Name Type Description ListBehavior ListBehavior* The ListBehavior that shall be extended. This property can be set in the right side of the Scene Tree Panel. ListAlignment SnapAlignmentOrientation::Enum The location of the alignment base point within the list item. Possible values: Begin, Center, End ListAlignmentOffset FeatStd::Float 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. ListAlignmentOffsetInPercent bool 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. ItemAlignment SnapAlignmentOrientation::Enum The location of the alignment base point within the list item. Possible values: Begin, Center, End ItemAlignmentOffset FeatStd::Float 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. ItemAlignmentOffsetInPercent bool 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. 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 Property Name Type Description TouchableId String Touchable Id of the behavior. ScrollDirection ScrollDirection::Enum The direction in which the SubListBehavior scrolls. Possible values: Vertical, Horizontal Position FeatStd::Float The pixel position of the visible content within the list content. AnimationDuration FeatStd::UInt32 Duration of the scrolling animation. DecelerationFactor FeatStd::Float Loss of flick animation speed over time. MaxSpeedPerFlick FeatStd::Float Maximum amount of speed each flick motion adds to the flick animation. MinSpeedPerFlick FeatStd::Float Minimum speed required to count a touch gesture as a flick and start or continue the flick animation. MinMovementToScrolling FeatStd::UInt32 Minimum distance a touch gesture needs to move to start a scrolling animation. MaxTouchSampleAge FeatStd::UInt32 Maximum age in milliseconds of touch movement speed counted towards generating flick animation speed. Items ListPropertyType< ::Courier::DataContextItem::SharedPointer > 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. ListFragmentTriggerOffset FeatStd::SizeType 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. ListFragmentSize FeatStd::SizeType 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 HandleKeyboardEvents bool Makes the behavior handle KeyboardFocusNavigation events internally. ParentListNode Candera::AbstractNodePointer The node with a ListBehavior that acts as a parent to this SubListBehavior. 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 Property Name Type Description Receivers Candera::ProcessValueBehaviorArrayProperty 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. Value FeatStd::Variant Value of the slider MinimumValue FeatStd::Variant Minimum value of the slider MaximumValue FeatStd::Variant Maximum value of the slider StepSize FeatStd::Variant Step size for Value MinimumAngle FeatStd::Float Angle of the slider, corresponding to minimum value. MaximumAngle FeatStd::Float Angle of the slider, corresponding to maximum value. ThumbNode Candera::AbstractNodePointer Thumb node which will be rotated. ImageNode Candera::AbstractNodePointer Image node which will be masked. 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 Property Name Type Description Receivers Candera::ProcessValueBehaviorArrayProperty 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. Open bool Shows the Drawer in its opened appearance. AppearDirection AppearDirection::Enum The direction from which the Drawer will open. Possible values: Top, Left, Right, Bottom DragEnabled bool Set to true to allow the Drawer to be controlled by Touch Inputs. 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 Property Name Type Description Receivers Candera::ProcessValueBehaviorArrayProperty 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. KnobNode Candera::AbstractNodePointer Knob node which will be shifted. SliderBarNode Candera::AbstractNodePointer Image node which will be scaled according to value. BackgroundNode Candera::AbstractNodePointer Image node which will provide background image and also control slider total size. UseBitmapClipping bool If true, the slider bar image will be resized using bitmap clipping instead of the layouter. 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 Property Name Type Description Receivers Candera::ProcessValueBehaviorArrayProperty 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. CaretNode Candera::AbstractNodePointer Node which will be set as caret.. IntervalSwitchBehavior Candera::Behavior * 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. 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 Hover - Hover Leave Example Move Node Example OnClick Example Set Alpha Value Example Set Position Example Set Rotation Example Start Timer Example Switch Image Example Perform Transition Requests Example Common Properties Property Name Type Description TouchableId String Touchable Id of the behavior. Enabled bool If set to false it will not react on focus events and does not have to support different visualizations for the different states. Highlighted bool If true, the controls state Highlighted is set to true. Selected bool If true, the controls state Selected is set to true. Focusable bool If true, the control is focusable. Otherwise the control can not be focused. Identifier Candera::AbstractNodePointer Identifier which is used when emitting an Event (e.g. Click Event). 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 Property Name Type Description Receivers Candera::ProcessValueBehaviorArrayProperty 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. InputText FeatStd::String Text which will be set as default text. TextNode Candera::AbstractNodePointer Text Node which will be edited. Placeholder Candera::AbstractNodePointer Text which will be shown as placeholder. SetValueOnEachChange bool If true, the value will be set on each input. MaxTextLength FeatStd::UInt16 Maximum count of characters. JustDigits bool If true, the Inputfield will receive just digits. 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 Property Name Type Description DefaultSelectedObject Candera::AbstractNodePointer Selection Object (e.g. RadioButton) which shall be selected by default. Public Property Control Behaviors Provide Alignment Provides properties to set the horizontal and vertical alignment. Especially for Controls. Common Properties Property Name Type Description HorizontalAlignment Candera::HorizontalAlignment Provides property to set the Horizontal Alignment (especially for Controls). Possible values: HLeft, HCenter, HRight, Hstretch, HstrechRight, HstrechCenter VerticalAlignment Candera::VerticalAlignment Provides property to set the Vertical Alignment (especially for Controls). Possible values: VTop, VCenter, VBottom, Vstretch, VstrechCenter, VstrechBottom 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 Property Name Type Description TargetNode Candera::AbstractNodePointer 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 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 Property Name Type Description PropertyReference CgiStudioControl::PropertyReference::Enum Choose how the property gets set. Via own property or from another Behavior. Possible values: Self, Other Color Candera::Color The color to set. This property is only available if the PropertyReference is set to "Self". Advanced Properties Property Name Type Description PropertyProvider Behavior* 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". Provide Margin Provides property to set the margin. Especially for Controls. Common Properties Property Name Type Description Margin Candera::Margin Provides property to set the Margin (especially for Controls). 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 Property Name Type Description PropertyDataType CgiStudioControl::PropertyDataTypes::Enum Choose the type which should be offered by this behavior. Possible values: Color, Text, Style, Image, Appearance, Value, BlendType, Layout, VertexBuffer Advanced Properties Property Name Type Description Color Candera::Color The color which can be used from other Behaviors. This property is only available if PropertyDataType is set to "Color". Text FeatStd::String The Text that will be set to the Text Node. This property is only available if PropertyDataType is set to "Text ". Style SharedPointer The Style that will be set to the Text Node. This property is only available if PropertyDataType is set to "Style ". Image SharedPointer< Candera::Image2D > The image to set on the effect. This property is only available for 2D scenes if PropertyDataType is set to "Image ". Texture SharedPointer< Candera::TextureImage > The texture to set on the effect. This property is only available for 3D scenes if PropertyDataType is set to "Image ". Appearance SharedPointer< Candera::Appearance > The appearance to set on the node. This property is only available for 3D scenes if PropertyDataType is set to "Appearance". Value FeatStd::Variant The value that will be set to the Send Value as Event action. This property is only available if PropertyDataType is set to "Value ". BlendType BlendType::Enum 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 ". Layout CgiStudioControl::LayoutType::Enum The layouter type for node. See Set Layout for more information. Possible values: Horizontal, Vertical This property is only available for 2D scenes if PropertyDataType is set to "Layout". StackArrangement StackLayouter::Arrangement 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". VertexBuffer SharedPointer< Candera::VertexBuffer > 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 ". Render Node Sets rendering of a node to enabled or disabled and provides the setting as a property for Controls. Common Properties Property Name Type Description EnableRendering bool If true, rendering is enabled. PostponeChange bool If set to true the render change will be handled during the next Update cyle, if false it will be handled immediately. 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 Property Name Type Description PropertyReference CgiStudioControl::PropertyReference::Enum Choose how the property gets set. Via own property or from another Behavior. Possible values: Self, Other Appearance This property is only available if "PropertyReference" is set to "Self". PropertyProvider Behavior* 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. Provide Image Sets the image of a node and provides the Image as a property for Controls. Example Usage Set Image Example Common Properties Property Name Type Description PropertyReference CgiStudioControl::PropertyReference::Enum Choose how the property gets set. Via own property or from another Behavior. Possible values: Self, Other Advanced Properties Property Name Type Description PropertyProvider Behavior* 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. Image SharedPointer< Candera::Image2D > The image to set on the effect. This property is only available for 2D scenes if "PropertyReference" is set to "Self". Texture SharedPointer< Candera::TextureImage > The image to set on the appearance. This property is only available for 3D scenes if "PropertyReference" is set to "Self". Set Layout Class Reference Provides a published property to set the layout for Controls. Limitations Only certain built-in layout mechanisms are supported Scene Composer does not support displaying layout-related properties when layouter is assigned using SetLayout behavior. Common Properties Property Name Type Description Layout CgiStudioControl::LayoutType::Enum Selects layout type for node. Possible values: None, Overlay, Stack, Baseline. This property is only available if "PropertyReference" is set to "Self". PropertyReference CgiStudioControl::PropertyReference::Enum Choose how the property gets set. Via own property or from another Behavior. Possible values: Self, Other Advanced Properties Property Name Type Description StackArrangement Candera::StackLayouter::Arrangement Selects arrangement for stack layouter. This property is only available if Layout is set to "Stack". PropertyProvider Behavior* Property Behavior which contains the layout which has to be set on the effect. See Property Provider for more information. This property is only available if "PropertyReference"" is set to "Other". Provide Text Modifies the text of a TextNode or CanvasText and provides the text as property for Controls. Example Usage Set Text Example Common Properties Property Name Type Description PropertyReference CgiStudioControl::PropertyReference::Enum Choose how the property gets set. Via own property or from another Behavior. Text FeatStd::String The Text that will be set to the Text Node. Style SharedPointer< Candera::TextRendering::SharedStyle > The Style that will be set to the Text Node. Alignment Candera::TextNode2DLayouter::TextAlignment 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. Multiline bool If multi line is disabled then the new line control characters will be ignored and text will always be rendered in one line. LineSpacing Candera::TextRendering::PixelSize Defines the distance between the baselines of successive lines of text. WordWrap bool If word wrapping is enabled then the lines that exceed the client area will be split during arrangement into multiple lines. Trimming Candera::TextNode2DLayouter::Trimming Trimming defines the behavior to employ when content overflows the content area. Possible values: None, Ellipsis, CustomText. Advanced Properties Property Name Type Description PropertyProvider Behavior* 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". TrimmingText FeatStd::String Trimming text defines the text which replaces content overflowing the content area. This property is only available if "Trimming" is set to "CustomText". Align Pivot Aligns all child nodes according to their pivot point. Example Usage Align Pivot Example 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 Property Name Type Description TargetNode Candera::AbstractNodePointer 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. Arc Align Aligns child nodes in a circular layout. Provides properties for the radius, orientation offset and the min and max angle. Example Usage Arc Align Example Common Properties Property Name Type Description Radius Float Radius of the digital needle indicators. Orientation Offset Float Offset in the orientation of the needle indicators. Angle Min Max Vector2 Min/Max angle values (e.g. indicators displayed from -25 to 210 degrees). Blend Mode Class Reference 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:   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 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: Lighten Darken Common Properties Property Name Type Description PropertyReference CgiStudioControl::PropertyReference::Enum Choose how the property gets set. Via own property or from another Behavior. Possible values: Self, Other PropertyProvider PropertyProviderBehavior*  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. Mode BlendType::Enum 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 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 Property Name Type Description StateMachineNode Candera::AbstractNodePointer The node of the State Machine EllipsisText FeatStd::String When more elements are added than the breadcrumb can show, one element will be replaced with the text from this field (collapse effect). PathDelimiter FeatStd::String Tag that separates the elements that a path contains. Disable Control This behavior is a Behavior Block. It can be dragged&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&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 Property Name Type Description TargetNode Candera::AbstractNodePointer 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. Focus This behavior is a Behavior Block. It can be dragged&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&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: HoverLeave This behavior is a Behavior Block. It can be dragged&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 Hover - Hover Leave Example HoverLeave This behavior is a Behavior Block. It can be dragged&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 Hover - Hover Leave Example IntervalSwitch Sends Off or On value to Trigger Behaviors that belong to same node. Common Properties Property Name Type Description State IntervalSwitchState::Enum 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 OnTimeMs FeatStd::UInt32 If State is set to Blinking, IntervalSwitchBehavior will be sending On value for On Time Ms milliseconds before switching to sending Off value. OffTimeMs FeatStd::UInt32 If State is set to Blinking, IntervalSwitchBehavior will be sending Off value for Off Time Ms milliseconds before switching to sending On value. AcceptValueEvent bool Set this flag to true to make the behavior changeable by events/actions. 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 Property Name Type Description ConfigurationScript FeatStd::String String that specifies symbols and layout of the Control KeyContent AbstractNodePointer Node containing Keyboard Keys. StateMachineNode AbstractNodePointer State machine that reacts on events sent by a special key to change keyboard layout KeyBackContentType CgiStudioControl::KeyContent::Enum Switch for Content of KEY_BACK special key. Possible values: Text, Icon KeyBackText FeatStd::String KEY_BACK is labeled with the text. This property is only visible if KeyBackContentType is set to "Text". KeyBackImage SharedPointer KEY_BACK is labeled with the image. This property is only visible if KeyBackContentType is set to "Icon". KeyEnterContentType CgiStudioControl::KeyContent::Enum Switch for Content of KEY_ENTER special key. Possible values: Text, Icon KeyEnterText FeatStd::String KEY_ENTER is labeled with the text. This property is only visible if KeyBackContentType is set to "Text". KeyEnterImage SharedPointer KEY_ENTER is labeled with the image. This property is only visible if KeyBackContentType is set to "Icon". KeySpaceContentType CgiStudioControl::KeyContent::Enum Switch for Content of KEY_SPACE special key. Possible values: Text, Icon KeySpaceText FeatStd::String KEY_SPACE is labeled with the text. This property is only visible if KeyBackContentType is set to "Text". KeySpaceImage SharedPointer KEY_SPACE is labeled with the image. This property is only visible if KeyBackContentType is set to "Icon". KeySwitchContentType CgiStudioControl::KeyContent::Enum Switch for Content of SWITCH special key KeySwitchText FeatStd::String SWITCH is labeled with the text. This property is only visible if KeySwitchContentType is set to "Text". KeySwitchImage SharedPointer SWITCH is labeled with the image. This property is only visible if KeySwitchContentType is set to "Icon". KeyShiftContentType CgiStudioControl::KeyContent::Enum Switch for Content of SHIFT special key KeyShiftText FeatStd::String SHIFT is labeled with the text. This property is only visible if KeyShiftContentType is set to "Text". KeyShiftImage SharedPointer SHIFT is labeled with the image. This property is only visible if KeyShiftContentType is set to "Icon". KeyShiftOnceContentType CgiStudioControl::KeyContent::Enum Switch for Content of SHIFT ONCE special key KeyShiftOnceText FeatStd::String SHIFT ONCE is labeled with the text : This property is only visible if KeyShiftOnceContentType is set to "Text". KeyShiftOnceImage SharedPointer SHIFT ONCE is labeled with the image. This property is only visible if KeyShiftOnceContentType is set to "icon". KeyShiftLockContentType CgiStudioControl::KeyContent::Enum Switch for Content of SHIFT LOCK special key KeyShiftLockText FeatStd::String SHIFT LOCK is labeled with the text. This property is only visible if KeyShiftLockContentType is set to "Text". KeyShiftLockImage SharedPointer LEFT is labeled with the image. This property is only visible if KeyShiftLockContentType is set to "Icon". KeyCloseContentType CgiStudioControl::KeyContent::Enum Switch for Content of SHIFT LOCK special key KeyCloseText FeatStd::String CLOSE is labeled with the text. This property is only visible if KeyCloseContentType is set to "Text". KeyCloseImage SharedPointer CLOSE is labeled with the image. This property is only visible if KeyCloseContentType is set to "Icon". KeyLeftContentType CgiStudioControl::KeyContent::Enum Switch for Content of LEFT special key KeyLeftText FeatStd::String LEFT is labeled with the text. This property is only visible if KeyLeftContentType is set to "Text". KeyLeftImage SharedPointer LEFT is labeled with the image. This property is only visible if KeyLeftContentType is set to "Icon". KeyRightContentType CgiStudioControl::KeyContent::Enum Switch for Content of RIGHT special key KeyRightText FeatStd::String RIGHT is labeled with the text. This property is only visible if KeyRightContentType is set to "Text". KeyRightImage SharedPointer RIGHT is labeled with the image. This property is only visible if KeyRightContentType is set to "Icon". NavigateUpKeyCode Candera::KeyboardKeyCode::Enum Key from a physical keyboard that moves focus to a key above the current focused NavigateDownKeyCode Candera::KeyboardKeyCode::Enum Key from a physical keyboard that moves focus to a key below the current focused NavigateNextKeyCode Candera::KeyboardKeyCode::Enum Key from a physical keyboard that moves focus to a key on the right from the current focused NavigatePreviousKeyCode Candera::KeyboardKeyCode::Enum Key from a physical keyboard that moves focus to a key on the left from the current focused NavigateStartOnDown bool Enables starting navigation with the same key as NavigateDownKeyCode NavigateEndOnUp bool Enables finishing navigation with the same key as NavigateUpKeyCode NavigateStartKeyCode Candera::KeyboardKeyCode::Enum Key from a physical keyboard that starts navigation within the Control NavigateEndKeyCode Candera::KeyboardKeyCode::Enum Key from a physical keyboard that finishes navigation within the Control NavigateCloseKeyCode Candera::KeyboardKeyCode::Enum Key from a physical keyboard that hides the Control NavigateInvokeKeyCode Candera::KeyboardKeyCode::Enum Key from a physical keyboard that emulates clicking the current focused Key from the Control 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: Key String Meaning enum from Candera::KeyboardKeyCode::Enum: KEY_BACK, KEY_SPACE, KEY_ENTER 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. CLOSE() 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 SWITCH(layoutName) 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 SHIFT(layoutName) 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 NULL() Represents a key that will NOT be rendered; it is designed for a layouting/padding purpose 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 Class Reference 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 Property Name Type Description DeleteButtonNode Candera::AbstractNodePointer Delete button node needed to control visibility (render on/off). Focusable bool If true then focus node will be visible. FocusNode Candera::AbstractNodePointer Focus node needed to control visibility (render on/off) and change focus image. Enabled bool If true then item is visible. FocusImageOnSelection SharedPointer< Candera::Image2D > The image to set on the effect. FocusImageOnDragging SharedPointer< Candera::Image2D > The image to set on the effect. MenuScreen Class Reference 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 Property Name Type Description ActiveScreenIndex UInt32 Currently active index. NumberOfScreens UInt32 Number of active screens. LimitOfScreens UInt32 Limit of active screens. Rows UInt32 Number of rows. Columns UInt32 Number of columns. ScreenChangeTime Float Time of dragging a Menu Item outside boundaries of the Menu Screen to change its screen to a neighbour. SwapItemAnimationEasingFunction EasingFunctions::Enum Swap item animation easing function. Possible values: CircularInOut, Linear, SineIn, SineOut, SineInOut SwapItemAnimationLength Float Swap item animation length ChangeScreenAnimationEasingFunction EasingFunctions::Enum Change screen animation easing function. Possible values: CircularInOut, Linear, SineIn, SineOut, SineInOut ChangeScreenAnimationLength Float Change screen animation length. KeyCodeToMoveSelectionLeft KeyboardKeyCode::Enum Key code to move selection left. Possible values: Key_None, ...... Key_OEM8 KeyCodeToMoveSelectionRight KeyboardKeyCode::Enum Key code to move selection right. Possible values: Key_None, ...... Key_OEM8 KeyCodeToMoveSelectionUp KeyboardKeyCode::Enum Key code to move selection up. Possible values: Key_None, ...... Key_OEM8 KeyCodeToMoveSelectionDown KeyboardKeyCode::Enum Key code to move selection down. Possible values: Key_None, ...... Key_OEM8 PageIndicatorNode Candera::AbstractNodePointer Page indicator node. Items ListPropertyType<::Courier::DataContextItem::SharedPointer> 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. ContentNode Candera::AbstractNodePointer Content node. Navigation Instruction View Behavior for displaying the instructions during navigation. Common Properties Property Name Type Description SignDisplayNode Candera::AbstractNodePointer Node used to display the graphical sign. PrimaryTextNode Candera::AbstractNodePointer Node used to display the primary message. SecondaryTextNode Candera::AbstractNodePointer Node used to display the secondary message. ManeuverTypeTextNode Candera::AbstractNodePointer Node used to display the maneuver type (as text). OnClick This behavior is a Behavior Block. It can be dragged&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. Note: Click is a synthetic event composed by combining two basic events: Press and Release. Example Usage Enable Rendering Example Move Node Example OnClick Example Set Position Example Set Rotation Example Start Timer Example Perform Transition Requests Example Switch Image Example OnPressed This behavior is a Behavior Block. It can be dragged&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 OnPressed Example OnTimer This behavior is a Behavior Block. It can be dragged&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: Check Timer , Start Timer This behavior is a Behavior Block. Example Usage Start Timer Example Orbit Camera Transform When attached to a Node, the specified camera will orbit around that Node. PLAYER USE ONLY. 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. Common Properties Property Name Type Description TouchableId String Touchable Id Camera CameraType The camera that looks at the associated node. Advanced Properties Property Name Type Description IsOrbitLimited bool Enables setting of boundaries for the camera within the orbit. AngleMinX FeatStd::Float Min angle between camera and X-axis (from 0 to 180 degrees). Must be less than AngleMaxX. AngleMaxX FeatStd::Float Max angle between camera and X-axis (from 0 to 180 degrees). Must be greater than AngleMinX. AngleMinY FeatStd::Float Min angle between camera and Y-axis (from 0 to 180 degrees). Must be less than AngleMaxY. AngleMaxY FeatStd::Float Max angle between camera and Y-axis (from 0 to 180 degrees). Must be greater than AngleMinY. AngleMinZ FeatStd::Float Min angle between camera and Z-axis (from 0 to 180 degrees). Must be less than AngleMaxZ. AngleMaxZ FeatStd::Float Max angle between camera and Z-axis (from 0 to 180 degrees). Must be greater than AngleMinZ. Page Indicator Class Reference 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 Property Name Type Description TargetNode Candera::AbstractNodePointer Target node that will receive a ChangeValueEvent when ActivePageIndex changes ActivePageIndex FeatStd::Int32 Index of active page (range from 0 to NumberOfPages - 1) NumberOfPages FeatStd::Int32 Total number of pages (you have to ensure that PageIndicator has at least this number of child elements) DecrementKeyCode Candera::KeyboardKeyCode::Enum Key used for decrementing value (if value is actually decremented, focus handling is suspended) Possible values: Key_None, ...... Key_OEM8 IncrementKeyCode Candera::KeyboardKeyCode::Enum Key used for incrementing value (if value is actually incremented, focus handling is suspended) Possible values: Key_None, ...... Key_OEM8 Rectangle Clipping Behavior Clips the control to given rectangle. Common Properties Property Name Type Description Width Float Width of the clipping rectangle. Height Float Height of the clipping rectangle. ClipPositionEnabled bool Enable Clipping Position. ClipPosition Candera::Vector2 Position of the clipping rectangle. This property is only available if ClipPositionEnabled is set to true. Roll Class Reference 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 Property Name Type Description ValueGroup Candera::AbstractNodePointer Node containing a range of displayed values LensGroup Candera::AbstractNodePointer Node containing current value. This property is only available if 'LensVisible' is set to 'true'. DecorationGroup Candera::AbstractNodePointer Node containing lens decoration. This property is only available if 'LensVisible' is set to 'true'. Value FeatStd::Float Current value Min FeatStd::Float Minimum value Max FeatStd::Float Maximum value LensVisible bool Is lens group visible? UseCyclicRoll bool Is roll cyclic? AllowDraggingPastLimit bool 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'. DecrementKeyCode Candera::KeyboardKeyCode::Enum Key used for decrementing value (if value is actually decremented, focus handling is suspended) Possible values: Key_None, ...... Key_OEM8 IncrementKeyCode Candera::KeyboardKeyCode::Enum Key used for incrementing value (if value is actually incremented, focus handling is suspended) Possible values: Key_None, ...... Key_OEM8 TextEditNode Candera::AbstractNodePointer Node containing text edit field Step FeatStd::Float Value step (positive float value). Advanced Properties Property Name Type Description Format FeatStd::String Value display format (use '%f' for value) This property is only available if 'LensVisible' is set to 'false'. EditKeyCode Candera::KeyboardKeyCode::Key_Enter Key used for entering text edit mode Possible values: Key_None, ...... Key_OEM8 This property is only available if 'LensVisible' is set to 'true' and a 'TextEditNode' is configured. 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 Property Name Type Description TouchableId String Touchable Id IndicationNode Candera::AbstractNodePointer The node moved by the Touch Indication Behavior. It is moved to the touch location to point it out. TouchAreaNode Candera::AbstractNodePointer The node whose area the Touch Indication Behavior should indicate touch events on. Camera Candera::AbstractNodePointer 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. DistanceFromCamera FeatStd::Float How far from the camera should the touch indication node be rendered. This property is only available for 3D scenes. OnAnimation Candera::MemoryManagement::SharedPointer< Candera::Animation::AnimationPlayer > Optional animation played when the indicator is shown. OffAnimation Candera::MemoryManagement::SharedPointer< Candera::Animation::AnimationPlayer > Optional animation played when the indicator is hidden. HideIndicatorOnMove bool 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. Transform Mesh2D Class Reference 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 Property Name Type Description Rotation FeatStd::Float Defines the rotation angle in degree around configured rotation axis at the configured origin CameraDistance FeatStd::Float Defines a normalized camera distance (the projection is based on a normalized geometry of widht and height 1) with a default value of 1. FitToMaximumSizeRotation FeatStd::Float Defines the rotation angle in degree that will be uses as maximum for the FitToMaximumSize fit strategy. Default is an angle of 90 degree. RotationAxis Candera::Vector3 Defines the axis (default is the y axis) for the rotation as a 3D direction vector (the vector will be internally normalized). FieldOfView FeatStd::Float 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. FitStrategy TransformMesh2DFitStrategy::Enum Defines how the perspective projected mesh should fit into the original boundaries. HorizontalOrigin CgiStudioControl::HorizontalOrigin::Enum 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). VerticalOrigin CgiStudioControl::VerticalOrigin::Enum 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). CustomHorizontalOrigin FeatStd::Float Defines a normalized (bitmap resolution independent) custom origin that can not be defined with Left, Center or Right. CustomVerticalOrigin FeatStd::Float Defines a normalized (bitmap resolution independent) custom origin that can not be defined with Top, Center or Bottom. OriginOffset Candera::Vector2 In addition to the configured normalized origin this pixel based origin offset is added. Event Handler Passes a value to a Condition Behavior and if the response is positive, invokes an Action behavior. Example Usage Render Child Nodes Example Common Properties Property Name Type Description Condition Candera::ConditionBehavior* The ConditionBehavior that TriggerBehavior passes a value to and expect a response from to see if Action needs to be invoked. Actions ActionBehaviorArrayProperty The set of ActionBehaviors that TriggerBehavior invokes in the even that it receives a positive response from Condition. ConsumeEvent bool 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. Virtual Key Receives a Change Value Event with a boolean. True will start emitting Key Events, false will stop emitting Key Events. Common Properties Property Name Type Description KeyType CgiStudioControl::KeyType::Enum Choose the type of key. With KeyCode you can select any key. Possible values: Modifier, KeyCode KeyCode Candera::KeyboardKeyCode::Enum With KeyCode you can select any key. Possible values: Key_None, ...... Key_OEM8 This property is only available if "KeyType" is set to "KeyCode". Modifier Candera::KeyModifierEnum::Enum 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". Demonstration Demo Mode Action Action to start or end the demo mode. Common Properties Property Name Type Description Activate bool Activates or deactivates a demo mode DemoModeExecutor CgiStudioControl::DemoModeBehavior* Target demo mode behavior receiving the action Demo Mode Execution Execution of user input simulation. Common Properties Property Name Type Description ExecutionResource FeatStd::String Resource containing the simulation instructions. RestartDelay FeatStd::UInt32 Delay in milliseconds between each repeat loop. Demo Mode Changed Condition which reacts on 'activated' or 'deactivated' demo mode. Common Properties Property Name Type Description Activated bool Condition matches if input is activated (ON) or deactivated (OFF) Demo Mode Check Input type Condition behavior which reacts on input in respect of whether it is simulated input or not. Common Properties Property Name Type Description SimulatedInput bool Condition matches if input is simulated (ON) or user generated (OFF) MatchOnHover bool Condition matches in case of hover input (ON) or not (OFF) Demo Mode Record Action Action to start or end the demo mode recording. Common Properties Property Name Type Description Activate bool Activates or deactivates a demo mode recording DemoModeRecorder CgiStudioControl::DemoModeRecordBehavior* Target demo mode record behavior receiving the action. Demo Mode Recording Execution of user input recording. Common Properties Property Name Type Description OutputFilePath FeatStd::String Location in which the output shall be stored. 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. For how to reference external resource files, see Referencing external resource . 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  External Image Behavior 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 External Bitmap Provider  to a bitmap node, then use a button with Set External Bitmap  to switch the image according to ExternalResourceId . Detect external-resource changes: Use Check External Resource Change 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 Property Name Type Description ExternalResourceId String 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. ExternalResourceManagerId String External resource manager ID. (e.g., Android , FileSystem ) used to retrieve the external resource. ImageProvider ExternalBitmapProviderBehavior* External Bitmap Provider Behavior which sets an external image on a node and is the target receiving set resource on action. 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 Property Name Type Description ExternalResourceId String External resource name ID. (A unique ID to be provided.) ExternalResourceManagerId String External resource manager ID. (A unique ID to retrieve the external resource from.) Value Processing External Resource Behavior External Bitmap Provider 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. Common Properties Property Name Type Description TargetNode Candera::AbstractNodePointer The Node which is modified. If not set, then the node where the behavior is attached to, will be modified. ExternalResourceId String 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. ExternalResourceManagerId String External resource manager ID. (e.g., Android , FileSystem ) used to retrieve the external resource. 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 Referencing external resource . The following usage example uses an external resource that was loaded into the solution during this operation. External Bitmap Provider Drag and drop the [ Node 2D > Bitmap Node ] from the toolbox onto the scene editor, or the scene tree. Attach [ Behavior > External Resource > Value Processing > External Bitmap Provider ] in the Toolbox to the Behavior in the Extra Scene Tree of the placed bitmap node by drag-and-drop operation. 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. 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 Drag and drop the [ Node 2D > Bitmap Node ] from the toolbox onto the scene editor, or the scene tree. Attach [ Behavior > External Resource > Value Processing > External Bitmap Provider ] in the Toolbox to the Behavior in the Extra Scene Tree of the placed bitmap node by drag-and-drop operation. Drag and drop the [ Controls > Touchable > Button ] from the toolbox onto the scene editor, or the scene tree. Take place this operation twice (add two button control nodes). Attach [ Behavior > External Resource > Action > 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. Select the Button control, then select the Set External Bitmap behavior in the Extra Scene tree that appears. 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). Select the Button control, then select the Set External Bitmap behavior in the Extra Scene tree that appears. 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). Run the player and press the placed buttons. By pressing each button, the image specified in Set External Bitmap will be displayed.  Check External Resource Change Drag and drop the [ Node 2D > Bitmap Node ] from the toolbox onto the scene editor, or the scene tree. Attach [ Behavior > External Resource > Value Processing > External Bitmap Provider ] in the Toolbox to the Behavior in the Extra Scene Tree of the placed bitmap node by drag-and-drop operation. Select Scene2D in the scene tree and attach [ Behaviors > Control > Event Handler ] to the displayed extra scene tree by drag-and-drop operation. Select the Scene2D in the scene tree, in the displayed extra scene tree, attach [ Behavior > External Resource > Condition > Check External Resource Change ] to the Condition of the Event Handler by drag-and-drop operation. Select the Scene2D in the scene tree, in the displayed extra scene tree, attach [ Behavior > External Resource > Action > Set External Bitmap ] to the Actions of the Event Handler by drag-and-drop operation. Select the Set External Bitmap behavior you added. Click the select item button on the ImageProvider in the properties panel that appears and select the External Bitmap Provider connected to the BitmapNode. Select the Set External Bitmap behavior you added. 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. Select Check External Resource Change in the Event Handler. Click the Select Item button for ExternalResourceId in the Properties panel that appears and select any external resource specified in step 9. 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 Property Name Type Description TemplateNode BarWidth FeatStd::UInt16 Width of each bar. BarHeight FeatStd::UInt16 Height of each bar. SpaceWidth FeatStd::UInt16 Width of space between each bar. Color Candera::Color Color of bars. Value List Courier::ListPropertyType< FeatStd::Float > List of values. 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 Property Name Type Description Values Courier::ListPropertyType< Candera::Vector2 > List of values which will create the graph. MinX FeatStd::Optional The minimal X value restricts the graph's X value range and creates its lower bounds. MaxX FeatStd::Optional The maximal X value restricts the graph's X value range and creates its upper bounds. MinY FeatStd::Optional The minimal Y value restricts the graph's Y value range and creates its lower bounds. MaxY FeatStd::Optional The maximal Y value restricts the graph's Y value range and creates its upper bounds. Line Width FeatStd::Float The line width defines the thickness of the line. Interpolation GraphInterpolationType::Enum Defines the interpolation type of the line chart. Interpolation Steps FeatStd::UInt16 Defines the amount of interpolation points between each value. This increase the spline resolution by the cost of performance and memory. Color of line Candera::Color Color of line. 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 Property Name Type Description TargetNode Candera::AbstractNodePointer The Node which is modified. If not set, then the node where the behavior is attached to, will be modified. Keyword FeatStd::String Specifies the keyword of the map entry which value should be sent as value changed event. Advanced Properties Property Name Type Description Action Candera::ActionBehaviorArrayProperty The set of ActionBehaviors that receive the value changed event. Mapped Key Condition Checks the key from a key-value pair inside an incoming Identifier Value Map Event. Common Properties Property Name Type Description Keyword FeatStd::String Specifies the keyword which shall be present in the map. ValueCondition Candera::ConditionBehavior Condition which is checked on the value of matching keyword. The value can be checked by "Check Value Changed". 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 Property Name Type Description Images SharedPointer  Images: Candera :ArrayProperty>. Rendertarget RenderTarget2D* Rendertarget:Candera::RenderTarget2D*. 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 Property Name Type Description LocationList Candera::AbstractNodePointer List to populate with matched locations. ItemTemplate Candera::AbstractNodePointer Template used to populate the list. MaxItems FeatStd::Int16 Maximum number of matches to show. DelayBetweenRequests FeatStd::UInt32 Number of milliseconds to wait between geocoding requests. 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 Property Name Type Description IconNodes ArrayProperty A process value event is sent to this nodes, if a respective poi update event arrives. NameNodes ArrayProperty A process value event is sent to this nodes, if a respective poi update event arrives. OpenNowNodes ArrayProperty A process value event is sent to this nodes, if a respective poi update event arrives. RatingNodes ArrayProperty A process value event is sent to this nodes, if a respective poi update event arrives. PriceLevelNodes ArrayProperty A process value event is sent to this nodes, if a respective poi update event arrives. InfoTextNodes ArrayProperty A process value event is sent to this nodes, if a respective poi update event arrives. 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: 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 Set Alpha Value Common Properties Property Name Type Description Input Min FeatStd::Optional This minimum value has to be set for input value scaling to take effect. FeatStd::Float expected. Input Max FeatStd::Optional This maximum value has to be set for input value scaling to take effect. FeatStd::Float expected. Multiplication Value FeatStd::Variant Multiplies received value by this number (after scaling). FeatStd::Float expected. Addition Value FeatStd::Variant Adds this number to received value (after multiplication). FeatStd::Float expected. Target Node Candera::AbstractNodePointer Target node that will have its alpha value set. Navigation Path Registers to navigation points and displays them as mesh in world space. This behavior is available for 3D scenes only. Common Properties Property Name Type Description ColorMode ColorMode::Enum Select how color is displayed. Possible values: Color, RGBA Color Candera::Color Determines the color of the mesh. Width FeatStd::Float Determines the width of the mesh. Length FeatStd::Float Determines the length of the mesh YOffset FeatStd::Float Applies y-offset to the mesh. InputPoints ListPropertyType< CgiStudioControl::Internal::AR::ArPoint> This property is used to bind input points. InputPointHandling InputPointHandling::Enum Determines how new input points are used for the mesh. Possible values. Attach, Replace InterpolationType InterpolationType::Enum Determines which interpolation method is used. Possible values: Linear, Bezier, Spline, None MeshType MeshType::Enum Determines which primitive type is used. Possible values: Solid, Points IsAdvanced bool Enables advanced settings of the behavior. Advanced Properties Property Name Type Description Red FeatStd::UInt32 Red color channel. This property is only available if 'ColorMode' is set to 'RGBA'. Green FeatStd::UInt32 Green color channel. This property is only available if 'ColorMode' is set to 'RGBA'. Blue FeatStd::UInt32 Blue color channel. This property is only available if 'ColorMode' is set to 'RGBA'. Alpha FeatStd::UInt32 Alpha color channel. This property is only available if 'ColorMode' is set to 'RGBA'. InputPointMinDistance FeatStd::Float Minimum distance of two control points. Input points that are closer together will be rejected. This property is only available if 'IsAdvanced' is checked. ReqFragmentSize FeatStd::SizeType Size of the fragment that is requested from the input point list. This property is only available if 'IsAdvanced' is checked. ReqThresholdDistance FeatStd::Float 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. PointSize FeatStd::Float Determines the point size. This property is only available if 'MeshType' is set to 'Points'. NumOfRowsPerInputPoint FeatStd::UInt32 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'. NumOfVertexRows FeatStd::UInt32 Amount of vertical vertices in the mesh. This property is only available if 'IsAdvanced' is checked. NumOfVertexColums FeatStd::UInt32 Amount of horizontal vertices in the mesh. This property is only available if 'IsAdvanced' is checked. 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 Property Name Type Description PoiName FeatStd::UInt32 Name of this poi. PoiControlAssetId FeatStd::UInt32 ID of the control that is associated with PoiName. Poi Manager Manager of the poi control nodes. This behavior is available for 3D scenes only. Common Properties Property Name Type Description StreetPoints ListPropertyType List of points of the street. Used to align the rotation of POIs. StreetPointsMinDistance FeatStd::Float Minimum distance between two street points. Street points that are closer together will be rejected. ReqDistance FeatStd::Float The distance in which POIs are requested from the model. ReqThresholdDistance FeatStd::Float Once the camera has moved this specified distance a new request will be sent. PoiMetaData ArrayProperty Use databinding to receive metadata updates for the POIs Pose Tracking Behavior that sets the pose of a target node. This behavior is available for 3D scenes only. Common Properties Property Name Type Description Position Candera::Vector3 Position on the target node. Rotation Candera::Vector3 Rotation on the target node. EnableUserControl bool Enable to use WASD control to navigate the camera instead of databinding. EventReceivers ArrayProperty List of nodes that will receive position and rotation update events. 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 Property Name Type Description Emit Particles bool If set to true then the behavior will emit particles. Emitter Type ParticleEmitterType::Enum Specifies the behavior of the emitted Particle. Possible values: BoxEmitter, SphereEmitter Maximum Particles UInt32 Determines the maximum number of particles that can be displayed (Requires Scene Refresh). Particles Per Second UInt32 Determines how many particles will be generated each second Particle Settings Property Name Type Description Life Time UInt32 Determines how long a particle will live in Milliseconds. Random Life Time UInt32 Determines how long a particle will live in Milliseconds. Velocity Candera::Vector3 Determines the initial velocity of an emitted particle. Gravity Candera::Vector3 Determines the gravity effects for all emitted particles. Random Spread Float Determines how the randomness of the initial velocity angle. Start Size Float Determines how big a particle will be when it is emitted. End Size Float Determines how big a particle will be when it vanishes. Start Color Candera::Color Determines what color a particle has be when it is emitted. End Color Candera::Color Determines what color a particle has when it vanishes. Fade In Time Optional Determines how long a new particle needs to be alive until it is fully visible. Fade Out Time Optional Determines how long a particle will fade out before it vanishes. 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. Property Name Type Description Enabled bool Enables/disables the scripting system. Set Script Parameters This behavior allows users to set public variables of Lua scripts. 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). Property Name Type Description ScriptParameterName FeatStd::String The name of the script parameter whose value will be set. NodeWithScript Candera::AbstractNodePointer Node whose script parameter will be changed.   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 Property Name Type Description PropertyName FeatStd::String The name of the property in the script. Animation SharedPointer< Candera::Animation::AnimationPlayer > The animation that should be set as the value of the script animation property. 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 Property Name Type Description StateMachine Candera::Internal::StateMachineBehaviorData* 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. ConsumeEvent bool 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. ExecutePostponedActions bool 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. Streaming Behaviors Video Stream Class Reference Displays a video stream from a given source on a texture. Reacts on VideoControl events (see also  Configure and Play Stream ), and emits VideoState events (see also Check Video State ). Common Properties Property Name Type Description TargetNode Candera::AbstractNodePointer The node on which the video will be displayed. If nothing is selected, the node on the anchor will be used. VideoSource FeatStd::String URI to video resource (e.g. path to file or URL). ScaleToVideoSource bool If enabled the texture will be resized to the video size, otherwise the size of the current texture will persist. FlipVertically bool Flips video vertically. Timestamp FeatStd::UInt32 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. 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 Property Name Type Description Animation SharedPointer< Candera::Animation::AnimationPlayer > The animation controlled. AnimationProcessValueBehavior sets the animation to the frame corresponding to the value it receives. SequenceStartTime FeatStd::Optional The start point of the animation. [ms] SequenceDurationTime FeatStd::Optional The duration of the animation. [ms] ControlNode Candera::AbstractNodePointer Diagnostics Value Processing Behaviors Frame Measurement Class Reference 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 Property Name Type Description RenderTarget Candera::GraphicDeviceUnit* The render target which FPS should be monitored. Output OutputType::Enum Specifies which information will be output. DispatchThreshold FeatStd::Optional < FeatStd::Variant > Specifies how much the Output has to change to dispatch an event to its receivers. Receivers Candera::ProcessValueBehaviorArrayProperty 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. Effects Value Processing Behaviors Set Alpha Value Sets the Alpha value of a node (expects a Float value). Common Properties Property Name Type Description Target Node Candera::AbstractNodePointer The Node which gets the resulting alpha value. If not set, then the node where the behavior is attached to, will be modified. Switch Image Sets an image on a Render Node based on a float index received as event. Supports Controls: FlipBook Example Usage Switch Image Example Common Properties Property Name Type Description Upload Strategy Enum (OnInit, OnDemand) 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 Target Node RenderNode * The Render Node SwitchImageProcessValueBehavior will switch images on. Images SharedPointer A list of images which should be available for selection. This property is only available for 2D scenes. Textures SharedPointer A list of images which should be available for selection. This property is only available for 3D scenes. OutOfBoundsHandlingMode OutOfBoundsHandlingMode::Enum Behavior when an index greater than the number of images is given. Possible values: Hold, Clamping Switch Text Sets a text on a Render Node based on a float index received as event. Common Properties Property Name Type Description Target Node Candera::AbstractNodePointer The Render Node SwitchTextProcessValueBehavior will switch the text on. Texts ArrayProperty Use list of texts (strings) and switch between them. 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 Property Name Type Description Target Node Candera::AbstractNodePointer 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. Alpha Factors Vector2 Min/Max transparency factors Zoom Factors Vector2 Min/Max zoom factors Zoom Distribution Float Distribution of Zoom/Alpha to each side of the selection. ZoomByLayout bool Whether the zoom is accomplished by layout size. 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 Property Name Type Description AffectXAxis bool Enables or disables scaling in horizontal direction. AffectYAxis bool Enables or disables scaling in vertical direction. Mode Mode::Enum Determines how the received value will be interpreted. ScaleVector Vector2 This vector is multiplied by the received value and specifies the magnitude by which the node is scaled. 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 Property Name Type Description Target Node Candera::AbstractNodePointer The target node which is modified. if not set, then the node where the behavior is attached to, will be modified. Size Axis AxisType2D::Enum  The axis along which the size is set. Possible values: AxisX, AxisY Set Position Expects a Float value as an event. Translates Position Node along given axis by the received value in pixels. Example Usage Set Position Example Common Properties Property Name Type Description Target Node Candera::AbstractNodePointer The target node to which the events are routed from the source node. Translation Axis 2D AxisType2D::Enum The axis along which the position is set. Possible values: AxisX, AxisY This property is only available for 2D scenes. Translation Axis 3D AxisType3D::Enum The axis along which the position is set. Possible values: AxisX, AxisY,, AxisZ This property is only available for 3D scenes. Set Rotation Expects a Float value as an event. Rotates Rotation Node clockwise by the received value in degrees. Example Usage Set Rotation Example Common Properties Property Name Type Description Target Node Candera::AbstractNodePointer The node which is modified. If not set, then the node where the behavior is attached to, will be modified. RotationAxis AxisType3D::Enum The axis to rotate the node around. Possible values: AxisX, AxisY,, AxisZ This property is only available for 3D scenes.  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 Set Scale Example Common Properties Property Name Type Description TargetNode Candera::AbstractNodePointer The Node which is modified. If not set, then the node where the behavior is attached to, will be modified. ScaleAlongX bool Enables or disables scaling in horizontal direction. ScaleAlongY bool Enables or disables scaling in vertical direction. ScaleAlongZ bool Enables or disables scaling in Z-direction. This property is only available for 3D scenes. ScaleVector2D Vector2 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. ScaleVector3D Vector3 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. 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 Move Node Example Common Properties Property Name Type Description Target Node Candera::AbstractNodePointer The node TranslateProcessBehavior moves. Multiplied Vector Vector3 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. AnimationMeter This behavior is a Behavior Block. It can be dragged&dropped on nodes just like any Behavior. Controls an animation according to the passed value. Property Name Type Description Animation Candera::Animation::AnimationPlayer TThe animation controlled. AnimtionMeter sets the animation to the frame corresponding to a mapped value it receives. Minimum FeatStd::Variant Minimum of the Variant value which will be mapped between 0 and 1. Maximum FeatStd::Variant Maximum of the Variant value which will be mapped between 0 and 1. Arithmetic Operation Arithmetic operation behavior allows to perform addition, subtraction, multiplication and division operations on the passed value. Common Properties Property Name Type Description Operation ArithmeticOperationType::Enum Arithmetic operation to be performed. Possible values: Addition, Subtraction, Multiplication, Division, Modulo, Absolute Operand FeatStd::Variant A number to be used as addend/subtrahend/multiplicant/divisor on provided value. OutputType VariantValueType::Enum Type of the Variant forwarded as result. Possible values: FloatValue, Int32Value, UInt32Value, BoolValue, DoubleValue, Int8Value, Int16Value,  Int64Value, UInt8Value, UInt16Value, UInt64Value, StringValue Receivers Candera::ProcessValueBehaviorArrayProperty 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. Clock Converts a time integer into seconds, minutes and hours and passes those values to behavior-properties. Common Properties Property Name Type Description SecondsProcessValueBehavior Candera::ProcessValueBehavior * The behavior that receives the seconds. This property can be set in the right side of the Scene Tree panel. MinutesProcessValueBehavior Candera::ProcessValueBehavior * The behavior that receives the minutes. This property can be set in the right side of the Scene Tree panel. HoursProcessValueBehavior Candera::ProcessValueBehavior * The behavior that receives the hours. This property can be set in the right side of the Scene Tree panel. OffsetInMinutes FeatStd::Int32 Offset in minutes to add to time (i.e. for different time zones). ShowFull24Hours bool If true, hours will be shown from 0-23, otherwise in AM/PM format. AMText FeatStd::String The string of the AM label. PMText FeatStd::String The string of the PM label. AMPMTextBehavior Candera::Behavior * Sets text 'AM' or 'PM'. This property can be set in the right side of the Scene Tree panel. ShowSeconds bool If true, seconds will be shown. SecondsNode Candera::AbstractNodePointer The node that will be turned off if showing of seconds is disabled. 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 Property Name Type Description CurrentValue FeatStd::Int32 Current value for the dial. MinimumRotation FeatStd::Float Minimum rotation of the dial. MaximumRotation FeatStd::Float Maximum rotation of the dial. StepSize FeatStd::Float Step size in degrees. KnobNode Candera::AbstractNodePointer Knob node which will be rotated. Receivers Candera::ProcessValueBehaviorArrayProperty 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. Filter Filters the processed value via an attached Condition (e.g. Check processed Value). Common Properties Property Name Type Description Condition Candera::ConditionBehavior* ConditionBehavior for passing the value to the next process value behavior. Receivers Candera::ProcessValueBehaviorArrayProperty 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. 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. Note that the target Value - Behavior must have 'Accept Value Event' property enabled. Example Usage Forward Value Example Thermometer Example Common Properties Property Name Type Description Event Dispatch Strategy EventDispatchStrategyType::Enum The way the event gets sent. Possible values: Direct, Broadcast, Bubble, Tunnel, DedicatedBehavior Target Node Candera::AbstractNodePointer 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. Dedicated Behavior Candera::ProcessValueBehavior* 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. 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 Interpolate Value Example Set Scale Example Common Properties Property Name Type Description Animation Mode InterpolationAnimationMode::Enum Animation mode sets a specific interpolation type. Possible values: SpeedBased, TimeBased, Instant Units Per Second Float Speed at which InterpolateProcessValueBehavior changes its internal value. This property can only be set when AnimationMode is set to "SpeedBased". Interpolation Time UInt32 Time in ms the InterpolateProcessValueBehavior changes its internal value. This Property can only be set when AnimationMode is set to "TimeBased" Filter Time Constant Float 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". Receivers Candera::ProcessValueBehaviorArrayProperty 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. Map Value Expects a Float value as an event. Maps the received value from one interval to another. Common Properties Property Name Type Description InputMin FeatStd::Optional < FeatStd::Variant > [Optional] Smallest value of the interval to check. If Minimum is given as greater than Maximum then the values are internally swapped. InputMax FeatStd::Optional < FeatStd::Variant > [Optional] Largest value of the interval to check. If Maximum is given as smaller than Minimum then the values are internally swapped. OutputMin FeatStd::Float Smallest value of the interval mapped to. OutputMax FeatStd::Float Largest value of the interval mapped to. OutputType VariantValueType::Enum Type of the Variant forwarded as result. Possible values: FloatValue, Int32Value, UInt32Value, BoolValue, DoubleValue, Int8Value, Int16Value,  Int64Value, UInt8Value, UInt16Value, UInt64Value, StringValue Receivers Candera::ProcessValueBehaviorArrayProperty 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. 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 Property Name Type Description Reverse bool 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. ValueForRange ValueBehaviorBase* The input value behavior for defining the mapped range. This property can be set in the right side of the Scene Tree panel. Receivers Candera::ProcessValueBehaviorArrayProperty 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. 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 Process Value Changed Event - Slider Example Process Value Changed Event - State Machine Example Common Properties Property Name Type Description Sender Candera::AbstractNodePointer 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. Minimum Optional Minimum threshold of the processed values. Maximum Optional Maximum threshold of the processed values. ConsumeEvent bool 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. Receivers ProcessValueBehavior ArrayProperty 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. Render a Range This behavior is a Behavior Block. It can be dragged&dropped on nodes just like any Behavior. Renders a range of nodes according to the passed value. Property Name Type Description OperationMode OperationModeType Enum 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. Minimum Optional< FeatStd::Variant > Minimum of the Variant value which gets mapped between 0 and 1. Maximum Optional< FeatStd::Variant > Maximum of the Variant value which gets mapped between 0 and 1.   Send ChangeValue on receiving ProcessValue event Sends out a new value. Associated controls with a value property receive the new values. Common Properties Property Name Type Description ChangeValue ChangeValue::Enum How the event value shall be handled by the receiving behavior Target Node Candera::AbstractNodePointer 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". EventDispatchStrategy CgiStudioControl::EventDispatchStrategyType::Enum The way the event gets sent Possible values: Direct, Broadcast, Bubble, Tunnel, DedicatedBehavior DedicatedBehavior Candera::ProcessValueBehavior * 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". Receivers ProcessValueBehavior ArrayProperty 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. Set Selected State This behavior is a Behavior Block. It can be dragged&dropped on nodes just like any Behavior. Sets the state to selected or deselected according to the passed value. Smooth Value Class Reference Expects a numeric value as an event and applies exponent smoothing to that value and the previous calculated one. Common Properties Property Name Type Description SmoothingFactor FeatStd::Float The factor how fast the output value should adapt to the input value. Valid values are between 0.0 and 1.0 Receivers ProcessValueBehavior ArrayProperty 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. Render Child Nodes Enables/Disables Child nodes corresponding to the received value and the behavior settings. Common Properties Property Name Type Description TargetNode Candera::AbstractNodePointer The Node which is modified. If not set, then the node where the behavior is attached to, will be modified. OperationMode OperationMode::Enum 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 Levels FeatStd::UInt8 Number of levels to step down through groups. Default is zero. NormalizeValue bool 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. 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 Format String Example Interpolate Value Example Common Properties Property Name Type Description Text String Text that TextBehavior will change the Node to. Supports formatting for one variable that corresponds to the value TextProcessValueBehavior2D receivers. Style SharedPointer The style that will be set to the Text Node. Alignment TextNode2DLayouter::TextAlignment 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 Multiline bool If multi line is disabled, then the new line control characters will be ignored and text will always be rendered in one line. Line Spacing PixelSize (UInt16) Defines the distance between the baselines of successive lines of type. Word Wrap Bool If word wrapping is enabled then the lines that exceed the client area will be split during arrangement into multiple lines. Trimming TextNode2DLayouter::Trimming Trimming defines the behavior to employ when content overflows the content area. Possible values: None, Ellipsis, CustomText TrimmingText FeatStd::String Trimming text defines the text which replaces content overflowing the content area. This property is only visible if Trimming is set to "CustomText". TargetNode Candera::AbstractNodePointer The Node which gets the given text. If not set, then the node where the behavior is attached to, will be modified. Track Angle on Drag Listens to the touch of the selected node, returns the angle between pressing, moving and releasing. Common Properties Property Name Type Description TouchNode Candera::AbstractNodePointer A node that is used to collect information about the touch. Receivers ProcessValueBehavior ArrayProperty 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. 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 Property Name Type Description TargetNode Candera::AbstractNodePointer The Node which gets the given text. If not set, then the node where the behavior is attached to, will be modified. UseCenter bool If true, the center value defined for the knob bitmap is used to align the knob to the value position, otherwise the calculated center. TrackDirection TrackDirection::Enum Defines if the position will be tracked horizontally or vertically Possible values: Vertical, Horizontal LeftTouchMargin FeatStd::Float 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. RightTouchMargin FeatStd::Float 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. TopTouchMargin FeatStd::Float 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. BottomTouchMargin FeatStd::Float 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. OnKnobDragOnly bool The position will only be updated when the Knob gets dragged, otherwise clicking on the control will move the knob to the position. UseExcclusiveMode bool Enabling the option prevents some controls (e.g. Slider) from loosing the touch when leaving the node area. DraggedNode Candera::AbstractNodePointer Defines the node to move along the track, to determine the hit area and to determine the position change relative to its center. Receivers ProcessValueBehavior ArrayProperty 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. Action on Value Passes a Process Value to a Condition Behavior and if the response is positive, invokes an Action behavior. Example Usage Thermometer Example Common Properties Property Name Type Description Condition ConditionBehavior* The ConditionBehavior that TriggerBehavior passes a value to and expect a response from to see if Action needs to be invoked. Actions ActionBehaviorArrayProperty The set of ActionBehaviors that TriggerBehavior invokes in the event that it receives a positive response form Condition. Consume Event bool 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. Value ValueBehavior sends a value to any behavior derived from ProcessValueBehavior type. It supplies an input to process value behaviors via event. Example Usage Thermometer Example Format String Example Interpolate Value Example Move Node Example Set Alpha Value Example Set Position Example Set Rotation Example Switch Image Example Set Scale Example Common Properties Property Name Type Description Minimum FeatStd::Optional < FeatStd::Variant > Minimum of the Variant value. If Minimum is given as greater than Maximum then the values are internally swapped. Maximum FeatStd::Optional < FeatStd::Variant > Maximum of the Variant value. If Maximum is given as smaller than Minimum then the values are internally swapped. IntervalHandling IntervalHandling::Enum Select how the behavior should react when the minimum or maximum limit is exceeded. Possible values: Limit, Cycle, Ignore AcceptValueEvent bool Set this flag to true to make the value changeable by events/actions. BroadcastProcessValueEvent bool Set this flag to true to broadcast ProcessValue event even if value did not change. DispatchStrategy CgiStudioControl::EventDispatchStrategyType::Enum 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 DedicatedBehavior Candera::Behavior* 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. TargetNode Candera::AbstractNodePointer 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". Variant Candera::Variant Specifies the type and the value to pass onto Process Value Behavior. Receivers ProcessValueBehavior ArrayProperty 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. 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. Related page:  Control Behaviors Flags Common Properties Property Name Type Description GeneratorFunction Enum The type of function used to generate values (linear, sin, etc.) Minimum Float The minimum for the generated values. Maximum Float The maximum for the generated values. OffsetMs Int The time offset where the function is evaluated. PeriodMs Int The time period after which the generated values repeat. SamplerateMs Int The update rate of the generated value. GenerateValues bool Set this flag to true to generates values at sample rate. If set to false, no values are generated. Event Dispatch Strategy EventDispatchStrategyType::Enum The way the event gets sent. Possible values: Direct, Broadcast, Bubble, Tunnel, DedicatedBehavior Dedicated Behavior Candera::ProcessValueBehavior* 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. Target Node Candera::AbstractNodePointer 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. 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 Property Name Type Description Uniform Name FeatStd::String The name of the uniform whose value will be set. Node With Shader Candera::Node* Node whose uniform setter's property will be changed. BehaviorGroup BehaviorGroup ( Fusion Group ) 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 BehaviorBuildingBlock , which can be instantiated by creating a template. For this reason, BehaviorGroup is easier and faster to use.   How to use 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). 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 > 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: 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. This concept offers an easy way to manage the visual representation of different states of Controls. 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 Control Examples ). The second example shows the CheckBox getting selected by a user input which basically demonstrates the workflow of Control States. 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: 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. Input Handling : e.g. Touch Input Handling . 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. 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. 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. 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. 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. The two properties define which state should be checked and how the state changed: 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) 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.) to learn more about the concept of Event Handlers also see chapter EventHandler Tab . Control Examples Button Control This section explains how the Button Control works. 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. 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. Advantages of using the Button Control: 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. 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 Transformation (rotation, psoition, size, ...) Graphicsl effect (alpha, switch image, zoom, ...) Manipulating an animatoin, invoking an action, ... Combining Controls This section shows how Controls can be combined. It mainly shows how simple it is to achieve the following points with Controls: Communication between the Controls. Adding interactivity to the application. 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: FlipBook Slider Two TextButtons 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: While the scene-tree should look similar to this: 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: 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.