UI Format Definition

Previous pageReturn to chapter overviewNext page

ManSymNote

Notice

User Level 2 is required for accessing the UI Format definitions in the Object Editor.

The UI Format column of data objects defines the appearance and behavior of the created control.

Its value is a list of key-value attribute pairs, delimited by semi-colons (“;”), describing the control’s appearance and behavior. The following is a description of all available attributes:

 

shape

Defines the type of control will be created when the Data Object is dropped on the UI Panel canvas. Available standard shapes:

shape:

Description

label

simple control used to display a read-only value

text

text box control to display or edit a value

slider

vertical slider control used to display or modify a value within a given range

dial

dial control used to display or modify a value within a given range

radio

a list of options displayed as radio buttons, each one representing a certain data object value (e.g. "3") and a matching description (e.g. "Velocity Mode"). See the options description for more details.

bitfield

a list of bit signals. Each signal corresponds to one bit of the control's integer value. See the options and fieldsize descriptions for more details.

 

ManSymNote

Notice

Every shape corresponds to one .qml file from the /QML folder of your Kickdrive Project, e.g. KickLabel.qml, KickTextInput.qml, ...

You can design and use your own QML / Qt Quick elements by defining e.g. shape:MyOwnQmlControl.qml, with MyOwnQmlControl.qml being a modified version of one of the Kick... .qml files.

 

ManSymNote

Notice

Once a control has been created on the canvas, e.g. by using drag and drop, its type cannot be modified by changing the shape: definition. The shape: definition only applies to creating new elements on the canvas.

To change the type of an existing control on the canvas, you need to modify the text in the Instances column of the Data Objects table.

 

updates

Defines how the UI control communicates with the actual data object. Its value defines if the data object’s value can be modified by the user, and also how the value is read from the device. Examples:

updates:

Description

r

the value is read from the device only once, upon initialization

r1000

the value is read from the device periodically, in this case every 1000 milliseconds.

r,w

the initial value is read from the device upon initialization and can then be modified by the user. User-modified values will be sent to the device.

 

ManSymNote

Notice

You cannot combine periodical-reading with the control being user-modifiable. E.g. updates:r100,w is not a valid definition.

 

range

Defines the allowed range for input controls. It is only used by the slider and dial controls. Examples:

range:0,100

range:-100,100

 

ManSymNote

Notice

When dragging an object from the Object Dictionary (Device Description) of the Object Editor module, the range is calculated from the original .xdd / .xdc device description file, if available. If no value range was specified in the device description file, a default range value is chosen.

 

step

Defines a valid positive step size for some of the range-based controls, such as the slider or the dial. The default step size is 1. Change the value to configure the control to round selected values to the specified step size.

Examples:

step:1 – the default behavior.

step:10 – only values that are multiples of 10 will be available.

 

fieldsize

Only used by bitfield shapes. Defines the number of bit signals used for this integer value. Example:

fieldsize:8

This value is displayed as eight individual bit signals, with a running numeric value (bit index) ranging from 0 to 7.

If fieldsize is zero or not defined, the bitfield shape will only show the bit indexes defined in options:  (see below).

 

options

Used by the radio and bitfield shapes. It specifies a list of available options and their corresponding values (resp. "bit indexes" for bitfield shapes).

The options are selectable / clickable, if the updates attribute specifies write (updates:r,w), and not read-only (updates:r1000).

Format:

options:<value_1>,<text _1>|<value_2>,<text_2> |... (etc.)

Example for a radio button control to choose between 4 different values (0, 1, 3 or 6):

shape:radio; options:0,Reset|1,Profile Position|3,Velocity Mode|6,Homing Mode

Example for a bit field representing 3 digital input signals

shape:bitfield; options:0,Limit Switch Left|1,Limit Switch Sight|2,Start 

 

Example UI Format Definitions

UI Format

Description

shape:label; updates:r

A read-only label. The control’s value will be read from the device only upon initialization.

shape:label; updates:r200

A read-only label. The control’s value will be read from the device upon initialization and then periodically, every 200 milliseconds.

shape:text; updates:r,w

A user-modifiable textbox, value is read from the device upon initialization. Once the user edits the value, it will be written to the device.

shape:slider; range:0,100;

updates:r,w

A user-modifiable slider, with the range between 0 and 100 and the step size 1.

shape:dial; range:-200,200; 

step:10; updates:r,w

A user-modifiable dial, with the range between -200 and 200, all selectable values being multiples of 10.

shape:radio; 

options:0,Off|1,On; 

updates:r,w

Two user-selectable radio buttons: Off and On, corresponding to the values 0 and 1.

shape:bitfield; fieldsize:8; 

updates:rw

A list of 8 digital output bits that can be toggled by clicking on them. For a data object that has the Name "Digital Output", the elements would be labeled

Digital Output 0

Digital Output 1

...

Digital Output 7

shape:bitfield; 

options:2,2 - Limit Switch Left|

5,5 - Limit Switch Right|

7,7 - Start; 

updates:r1000;

A list of input bits, where only three bit indexes (2, 5 and 7) are shown / used:

2 - Limit Switch Left

5 - Limit Switch Right

7 - Start