Skip to main content

Tributton

A Tributton is single button with three function areas: going up/opening, stop and going

down/closing.

Timer tutorial

Attributes

Common

ID

Sets the object's ID.

The ID identifies the object and is used to reference it in UISet actions, allowing to change its attributes dynamically.

The ID is not unique, it can be shared among multiple objects to quickly change a common attribute.

IDs can't be changed with a UISet action, but they can have a Value Binding assigned to them. Value Bindings on IDs allow an object to be dinamically attached to a set of attribute values.

E.g. the following Value Binding switches the ID of the object between mybutton1 and mybutton2 based on the value of the UISet button.address:

Value binding: ="mybutton" + ui('button', 'address')

UISet: UISet('button', 'address', '1') switches the ID to mybutton1 UISet('button', 'address', '2') switches the ID to mybutton2

Position and Size

Position

Sets the object's position.

The default value is: x0y0.

Attribute Values
ValueDescriptionExample
x<left>y<top>Specify left/top coordinates in pixels.x10y20

Flex Grow

Specifies if the objects should grow to fill the available space.

The default value is: true.

Attribute Values
ValueDescription
trueDefault value. Objects expand to fill the available space.
falseObjects do not grow to fill the available space.

Flex Shrink

Specifies if the objects should shrink to fit the available space.

The default value is: true.

Attribute Values
ValueDescription
trueDefault value. Objects shrink to fit the available space.
falseObjects do not shrink to fit the available space.

Width

Sets the object's width in pixels.

Minimum value is 1.

Height

Sets the object's height in pixels.

Minimum value is 1.

Layout

Color

Specifies the button color.

The default value is: default.

Attribute Values
ValueDescription
defaultDefault value. Default color.
primaryPrimary color, used to highlight action buttons.
warningWarning color, used to highlight warning buttons.
successSuccess color, used to highlight success buttons.
errorError color, used to highlight error buttons.
lightLight color.
darkDark color.
red,blue,yellow,green,yellow,purple,orange,greenPalette colors.
customCustom color, defined in the "Custom Color" attribute.

Custom Color

Specifies the button's custom color.

Attribute Values
ValueDescription
<html color>Any valid HTML color.

Look

Specifies the button's look.

The default value is: filled.

Attribute Values
ValueDescription
filledDefault value. Filled look, with a solid background.
clearClear look, no background or border.
outlinedOutlined look, with a solid border.
glassGlass look, with a semi-transparent background.

Shape

Specifies the button's shape.

The default value is: default.

Attribute Values
ValueDescription
defaultDefault value. Default shape.
roundedRounded shape.
pillPill or circle shape.
rectangleRectangle shape.

Label

Specifies the button's label.

Attribute Values
ValueDescription
<string>Button's label.

Description

Specifies a description displayed below the label.

Attribute Values
ValueDescription
<string>Button's description.

Action

Datapoint

Specifies a datapoint, to display and control its status.

Attribute Values
ValueDescriptionExample
[datapoint address]The datapoint address.dummy.dimmer.1

Label

Font Family

Specifies the font family.

The default value is: default.

Font Size

Specifies the font size in pixels or percentage (relative to the project's font size).

The default value is: 14.

Attribute Values
ValueDescriptionExample
<integer>Font size in pixels.
<percentage>%Relative font size in percentage.90%

Font Color

Specifies the text CSS color.

Attribute Values
ValueDescriptionExample
<html color>Color in any html accepted format.#ff0000

Font Weight

Specifies the weight of the font.

The default value is: normal.

Attribute Values
ValueDescription
normalDefault value. Normal.
boldBold.
bolderBolder.
lighterLighter.

Italic

Show the text in italics.

The default value is: false.

Attribute Values
ValueDescription
falseDefault value. Normal.
trueItalics.

Small Caps

Sets the font to small caps.

The default value is: false.

Attribute Values
ValueDescription
falseDefault value. Normal.
trueSmall caps.

Decoration

Specifies the text decoration.

The default value is: none.

Attribute Values
ValueDescription
noneDefault value. No decoration.
underlineUnderline.
overlineOverline.
line-throughLine through.

Text Align

Sets the horizontal alignment of the text.

The default value is: none.

Attribute Values
ValueDescription
noneDefault value. No alignment.
leftLeft alignment.
rightRight alignment.
centerCenter alignment.
justifyJustified alignment.

Line Height

Sets the line height of the text.

The default value is: 1.0.

Attribute Values
ValueDescription
<float>Specify the line height as a multiple of the font size.

View

Visible

Sets the object's visibility.

The default value is: true.

Attribute Values
ValueDescription
trueDefault value. Visible.
falseHidden.

Enabled

Specifies if the object is enabled or disabled. A disabled object appears as grayed out and can't be interacted with.

The default value is: true.

Attribute Values
ValueDescription
trueDefault value. Enabled.
falseDisabled.

Blinks the object at the specified speed.

The default value is: false.

Attribute Values
ValueDescription
falseDefault value. Not blinking.
slowBlinks slowly.
fastBlinks fast.

Transition

Specifies the transition effect when the object is shown or hidden.

The default value is: none.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Attribute Values
ValueDescription
noneDefault value. No transition.
fadeFade in/out.
fade-leftSlide from left and fade in/out.
fade-rightSlide from right and fade in/out.
fade-upSlide from top and fade in/out.
fade-downSlide from bottom and fade in/out.
slide-leftSlide from left.
slide-rightSlide from right.
slide-upSlide from top.
slide-downSlide from bottom.
zoom-inZoom in.
zoom-outZoom out.
3d-flip-left3D flip from left.
3d-flip-right3D flip from right.

Transition Duration

Specifies the transition duration in milliseconds.

The default value is: 300.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Attribute Values
ValueDescription
<integer>Duration in milliseconds.

Transition Delay

Specifies the transition delay in milliseconds.

The default value is: 0.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Attribute Values
ValueDescription
<integer>Delay in milliseconds.

Opacity

Sets the object's opacity. Opacity is the degree to which content behind an object is hidden.

The default value is: 1.0.

Attribute Values
ValueDescription
0The object is fully transparent.
>0.0, <1.0The object is translucent (content behind the element can be seen).
1.0Default value. The object is fully opaque.

Rotation

Specifies the degrees by which the object is rotated. A positive number rotates it clockwise, while a negative value rotates it counter-clockwise.

The default value is: 0.

CSS Class

Specifies a CSS Class that applies to the object, useful to customize its appearance. Custom CSS Classes are specified within the custom.css file.

Margin

Specifies the margin of the object. The margin is the space outside the object's border.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Attribute Values
ValueDescriptionExample
<int>Specify the margin in pixels for all sides of the object.
<top> <right> <bottom> <left>Specify the margin in pixels for each side of the object.10 20 30 40

View Scale

Specifies the scale of the object. The scale is the ratio between the object's size and the size of the view it is contained in.

The default value is: 1.0.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Attribute Values
ValueDescription
<float>Specify the scale for both width and height of the object.

Meta

Comment

Specifies a comment, visible only in the Project Editor. It can be used to add a note or a tag to the object. The filter in the object's SELECT panel applies to the comment as well.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Exclude

Excludes the object from the UI. Useful to temporarily hide an object without deleting it. Different from the "Visible" attribute, which hides the object in the UI but keeps it in the project, allowing it to be shown again with a UISet.

The default value is: false.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Attribute Values
ValueDescription
falseDefault value. Object is included in the UI.
trueObject is excluded from the UI.