Loading...

Shapes can be used for highlighting elements in the user interface, to group widgets, to subdivide areas or simply as a decorative item.

To create a Shape widget choose "Widgets > Shapes > Ellipse or or Line horizontal / vertical or Rectangle or Rounded Rectangle". The mouse cursor changes to a crosshairs icon, indicating the create mode. Each left-click adds the selected widget to the current page. To quit the create mode, you can switch to the run mode with [F8], where you can use all widgets.

To edit the Shape properties simply right-click it and choose the first menu entry "Shape Properties". Alternatively, you can press [Alt + P] whilst the mouse is hovering above it or switch to the edit / move mode with [F9] and double-click on it. The Shape property dialog opens up.

General Widget Settings

Name:

A unique name can be entered to identify the widget via the Object and Member Notation. The default name is based on the widget type and ID.

Page:

This drop-down offers all available pages to place the widget on.

ID:
The Shape's ID may be changed by entering a new one in the text field top left. If you change it, you will be asked if you also want to adapt the name to the new ID.

Notes:

A short note can be added here. It is not displayed outside the widget but can be set and retrieved with the WidgetID.Note property member.

Visible:

Uncheck this box to hide the widget.

Fix:
When the option "Fix" is checked, the Shape will be displayed on every page.

Size:

Enter a pixel size for the Shape's size.

X and Y:

Enter the location of the widget (upper left corner) in pixels

Shape Properties

Style:

You can choose one out of three designs: ellipse, rectangle and rounded rectangle

Fill Color:

Check this box to activate the fill color, a color picker for changing the hue will open when you click on the small box on the right.

Line Color:

Check this box to activate the line color, a color picker for changing the hue will open when you click on the small box on the right.

Line Size:

Enter here the thickness of the outline in pixels.

Opacity:

Enter the transparency for the widget, "255" equals not transparent at all while "0" means completely transparent.

Corner:

This parameter is only available for rounded rectangle Shapes and specifies the rotundity of the corners. A value of "0" would be a straight rectangle, increasing the value leads to more rounded corners.

Prevent Selection:

Check this box to avoid selecting the widget. It then can't be selected when in moving mode, except with a right-click directly on the Shape. Ticking this box also has the effect that the Shape's Z-position is being sent to the back.

Ui Effects & Animations

The topic Effects & Animations explains how to add and apply CSS based effects and animations.