Skip to main content

Shape

Displays a shape.

Shapes are used to display simple geometric shapes, such as circles, rectangles, triangles, etc.

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

Shape

Corners

Specifies the number of corners.

The default value is: 3.

Attribute Values
ValueDescription
0Circle.
3Default value. Triangle.
4Rectangle.
5Pentagon.
6Hexagon.
7Heptagon.
8Octagon.
9Nonagon.
10Decagon.
11Hendecagon.
12Dodecagon.

Stretch

Specifies whether the shape is stretched to fill the object.

The default value is: false.

Attribute Values
ValueDescription
falseDefault value. Shape is not stretched.
trueShape is stretched.

Corner Radius

Specifies the radius of the rectangle's corners are rounded.

The default value is: 0.

Attribute Values
ValueDescriptionExample
0Default value. Corners are not rounded.
intCorner radius.4

Stroke

Stroke Width

Specifies the stroke width.

The default value is: 1.

Attribute Values
ValueDescription
<string>Stroke width in pixels.

Stroke Dash

Specifies the pattern of dashes and gaps used to form the shape of the stroke.

The value is a list of comma and/or white space separated lengths or percentages. Each value specifies a length along the line for which the stroke is a dash or a gap.

Attribute Values
ValueDescriptionExample
<comma-separated list>Dash pattern.5,3

Color

Stroke Color

Specifies the stroke color.

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

Fill Color

Specifies the fill color.

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

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.