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

 

 

CoreText

A simple UI element that displays specified text as a label. The displayed content can be set using the Text property, and the font style can be adjusted using the Text Style property.

In the Core version, only basic text formatting features and data binding are supported, while advanced functionalities such as multi-line display and text trimming settings are not included.

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.
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	TBC	The button image displayed when the button is disabled.
Padding	Candera::Margin	The padding (margin) of the button. Used when content is attached.
Identifier	TBC	The identifier used when an event such as Click Event occurs.

CoreDigitalClock

Represents a digital clock, displaying time values (hours, minutes, seconds) as text. The current time can be displayed using values bound from the CGI Panel. Properties are also provided to customize the clock display, such as switching between 12-hour and 24-hour formats.

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 AM PM	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.
AM PM 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		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.
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	TBC	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 Color	Candera::Color	Text to be set in the text node.
Disabled Text 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.
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.
Text Enabled Color	Candera::Image2D	The text color when in the valid state.
Text Disabled 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.
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).
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.
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.

 

CoreMultiStateButtonCoreSlider

This

Ais UIa elementcontrol that allows forwhere the easy definition of buttons with multiple states. Each clickvalue 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 behaviorposition of the MultiStateButtonknob. The knob can be operated by dragging, and values can be set indirectly theor EventHandler,modified andthrough actionsevents corresponding to the current state can be executed(e.g., using the ProcessSend Value Changedas Event behavior.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

Current State
Variant
Current state of the MultiStateButton (starts with 0). Maximum State
bool/Variant
Maximum value of MultiStateButton (starts with 0).

CoreDial

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. Current Value
FeatStd::Int32 Current value for the dial.
Step SizeVariant
FeatStd::FloatThe Stepbindable sizevalue inof degrees.
the slider Minimum Rotation
FeatStd::Floatbool/Variant
Minimum rotation of the dial.
Range Maximum Rotation
FeatStd::Floatbool/Variant
Maximum rotation of the dial.
Range KnobTrack Image
Candera::Image2D The image toused set onfor the effect.
slider track. BackgroundImagesTrack Disabled Image Candera::Image2D The image used for the slider track when disabled. Track Fill Image
Candera::Image2D AThe listimage indicating the progress of imagesthe which should be available for selection.slider. Track Disabled ColorFill Image Candera::Image2D The image indicating the progress of the slider when disabled. Knob Normal Image
Candera::ColorImage2D The color which can beimage used fromfor otherthe Behaviors.
knob in its normal state. HoveredKnob ColorPressed Image
Candera::ColorImage2D The color which can beimage used fromfor otherthe Behaviors.
knob when pressed. IncrementKnob KeyDisabled Code
Image Candera::KeyboardKeyCode::EnumImage2D CheckThe image used for the KeyCodeknob ofwhen the pressed key (can also be modifier).
disabled. DecrementKnob KeyCenter CodeMargin
Candera::KeyboardKeyCode::EnumMargin CheckThe thecenter KeyCodemargin of the pressedknob. keyUsed (canto alsoposition bethe modifier).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

TheUI CoreScrollViewcomponent definesthat anprovides a scrollable area that allows to placewhere arbitrary content in it. The main functionality of the ScrollView is to clip this content if it is outside of the layout-size of the control. Additionally a ScrollBar will appear for each axis where the content is too large for the size that it got by the layout.

There are properties available for the ScrollBars that can change this visibility behavior.

Similar to the List the ScrollView offers an Anchor where any nodenodes (alsoincluding Controls)controls) can be attached to.

The size of the ScrollView can be set using the Layout of the Control.placed. If the attached node's size of the attached nodes is bigger thanexceeds the layout size of the ScrollView, Scrollbarsa willscrollbar appear.is automatically displayed.

In difference to the ListCore version, node layout functionality is not included, and the ScrollViewcomponent doesn'tis layoutspecialized thefor attacheddisplaying nodes.scrollable Socontent. ControlsTherefore, automatic alignment features like those found in lists are not provided, but freely positioned controls and other nodes can be placedmade at any position. (Also the hierarchy doesn't matter which means that an additional Layouter or GroupBox can be added.)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.

 

CoreRollCoreMultiStateButton

Roll

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 Current State
Variant
Current state of the MultiStateButton (starts with 0). Maximum State
bool/Variant
Maximum value of MultiStateButton (starts with 0).

CoreRoll

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.

 

CoreSlider

Slider

TheThis Slider providesis a control where the value which changes correspondingbased toon the position of the knob. ThisThe knob can be dragged.operated Additionallyby thedragging, valueand values can be set directly or bymodified anthrough eventevents (e.g. by, using the Send Value as Event Behavior).

Furthermore

In the SliderCore offersversion, tofocus defineand blend effect functionalities are not included, and the visualdesign representationis ofspecialized differentfor statesbasic (f.e.slider Pressed, Hovered).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 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 Disabled Image Candera::Image2D 無効状態のノブの画像 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 Disabled Image Candera::Image2D 無効状態のスライダートラックの画像。 Track Fill Image
Candera::Image2D The image to set on the effect. Track Disabled Fill Image

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.