Skip to main content

Common

Content List

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.

back to menu

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.

drawing-5-1711706885.pngdrawing-5-1711706885.png

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.

back to menu

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.

back to menu

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.

drawing-5-1711717000.pngdrawing-5-1711717000.png

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.

back to menu

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.

drawing-5-1711717247.pngdrawing-5-1711717247.png

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.

back to menu

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.

drawing-5-1711718906.pngdrawing-5-1711718906.png

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.

back to menu

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.

drawing-5-1711719428.pngdrawing-5-1711719428.png

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.

back to menu

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.

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

 

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. You can check your animation in the Animation Timeline panel. (You might want to double-click your animation to switch to a more intuitive view.)
    drawing-5-1727431065.png

     

     

     

     

    back to menu

    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.

    drawing-5-1711721461.pngdrawing-5-1711721461.png

    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.

    back to menu

    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.

    drawing-5-1711721850.pngdrawing-5-1711721850.png

    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.

    back to menu

    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.

    drawing-5-1711722177.pngdrawing-5-1711722177.png

    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.

    back to menu

    Back to top