Tributton
A Tributton is single button with three function areas: going up/opening, stop and going
down/closing.
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
| Value | Description | Example |
|---|---|---|
| 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
| Value | Description |
|---|---|
| true | Default value. Objects expand to fill the available space. |
| false | Objects 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
| Value | Description |
|---|---|
| true | Default value. Objects shrink to fit the available space. |
| false | Objects 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.
Label
Label
Specifies the button's label.
Attribute Values
| Value | Description |
|---|---|
| <string> | Button's label. |
Description
Specifies a description displayed below the label.
Attribute Values
| Value | Description |
|---|---|
| <string> | Button's description. |
Style
Color
Specifies the button color.
The default value is: default.
Attribute Values
| Value | Description |
|---|---|
| default | Default value. Default color. |
| primary | Primary color, used to highlight action buttons. |
| warning | Warning color, used to highlight warning buttons. |
| success | Success color, used to highlight success buttons. |
| error | Error color, used to highlight error buttons. |
| light | Light color. |
| dark | Dark color. |
| red,blue,yellow,green,yellow,purple,orange,green | Palette colors. |
| custom | Custom color, defined in the "Custom Color" attribute. |
Custom Color
Specifies the button's custom color.
Attribute Values
| Value | Description |
|---|---|
| <html color> | Any valid HTML color. |
Look
Specifies the button's look.
The default value is: filled.
Attribute Values
| Value | Description |
|---|---|
| filled | Default value. Filled look, with a solid background. |
| clear | Clear look, no background or border. |
| outlined | Outlined look, with a solid border. |
| glass | Glass look, with a semi-transparent background. |
Shape
Specifies the button's shape.
The default value is: default.
Attribute Values
| Value | Description |
|---|---|
| default | Default value. Default shape. |
| rounded | Rounded shape. |
| pill | Pill or circle shape. |
| rectangle | Rectangle shape. |
Action
Datapoint
Specifies a datapoint, to display and control its status.
Attribute Values
| Value | Description | Example |
|---|---|---|
| [datapoint address] | The datapoint address. | dummy.dimmer.1 |
Display State In Description
Specifies whether the button's state should be displayed in the description. If set, description can't be manually specified.
The default value is: true.
Attribute Values
| Value | Description |
|---|---|
| true | Default value. Shows the state. |
| false | Hides the state. |
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
| Value | Description | Example |
|---|---|---|
| <integer> | Font size in pixels. | |
| <percentage>% | Relative font size in percentage. | 90% |
Font Color
Specifies the text CSS color.
Attribute Values
| Value | Description | Example |
|---|---|---|
| <html color> | Color in any html accepted format. | #ff0000 |
Font Weight
Specifies the weight of the font.
The default value is: normal.
Attribute Values
| Value | Description |
|---|---|
| normal | Default value. Normal. |
| bold | Bold. |
| bolder | Bolder. |
| lighter | Lighter. |
Italic
Show the text in italics.
The default value is: false.
Attribute Values
| Value | Description |
|---|---|
| false | Default value. Normal. |
| true | Italics. |
Small Caps
Sets the font to small caps.
The default value is: false.
Attribute Values
| Value | Description |
|---|---|
| false | Default value. Normal. |
| true | Small caps. |
Decoration
Specifies the text decoration.
The default value is: none.
Attribute Values
| Value | Description |
|---|---|
| none | Default value. No decoration. |
| underline | Underline. |
| overline | Overline. |
| line-through | Line through. |
Text Align
Sets the horizontal alignment of the text.
The default value is: none.
Attribute Values
| Value | Description |
|---|---|
| none | Default value. No alignment. |
| left | Left alignment. |
| right | Right alignment. |
| center | Center alignment. |
| justify | Justified alignment. |
Line Height
Sets the line height of the text.
The default value is: 1.0.
Attribute Values
| Value | Description |
|---|---|
| <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
| Value | Description |
|---|---|
| true | Default value. Visible. |
| false | Hidden. |
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
| Value | Description |
|---|---|
| true | Default value. Enabled. |
| false | Disabled. |
Blink
Blinks the object at the specified speed.
The default value is: false.
Attribute Values
| Value | Description |
|---|---|
| false | Default value. Not blinking. |
| slow | Blinks slowly. |
| fast | Blinks fast. |
Transition
Specifies the transition effect when the object is shown or hidden.
The default value is: none.
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
Attribute Values
| Value | Description |
|---|---|
| none | Default value. No transition. |
| fade | Fade in/out. |
| fade-left | Slide from left and fade in/out. |
| fade-right | Slide from right and fade in/out. |
| fade-up | Slide from top and fade in/out. |
| fade-down | Slide from bottom and fade in/out. |
| slide-left | Slide from left. |
| slide-right | Slide from right. |
| slide-up | Slide from top. |
| slide-down | Slide from bottom. |
| zoom-in | Zoom in. |
| zoom-out | Zoom out. |
| 3d-flip-left | 3D flip from left. |
| 3d-flip-right | 3D flip from right. |
Transition Duration
Specifies the transition duration in milliseconds.
The default value is: 300.
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
Attribute Values
| Value | Description |
|---|---|
| <integer> | Duration in milliseconds. |
Transition Delay
Specifies the transition delay in milliseconds.
The default value is: 0.
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
Attribute Values
| Value | Description |
|---|---|
| <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
| Value | Description |
|---|---|
| 0 | The object is fully transparent. |
| >0.0, <1.0 | The object is translucent (content behind the element can be seen). |
| 1.0 | Default 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.
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
Attribute Values
| Value | Description | Example |
|---|---|---|
| <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.
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
Attribute Values
| Value | Description |
|---|---|
| <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.
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.
This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.
Attribute Values
| Value | Description |
|---|---|
| false | Default value. Object is included in the UI. |
| true | Object is excluded from the UI. |