Common

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

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.

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

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 miliseconds 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 miliseconds 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.
Internal Value Changed Per Second	Float	Specifies how many units per second shall be interpolated.
Dampening Filter 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.
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.
Blend Type	BlendType::Enum	The blend type that will be set on the affected nodes.

Common

Breadcrumb

Menu Icon

Mesh2D

Text

AnalogClock

DigitalClock

ProgressBar

FlipBook

Text Value

Tell Tale

Gauge