Navigation:  Widget Designer > Widgets >


Previous page Return to chapter overview Next page

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 Rectangle or Rounded Rectangle". The mouse cursor changes to a crosshair icon, indicating the create mode. With a left-click anywhere on the empty main background window you add the selected widget to the current page. Left-click again if you like to add one more. To quit the create mode, you can switch to the run mode with [F8], where you can use all widgets.

To edit the Shape parameters simply right-click on the desired Shape Widget and choose the menu entry "Item Properties", press [ALT+P] whilst the mouse is hovering above it or double-click on it when being in the edit / move mode ([F9]). The Shape Property Dialog opens up.



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.


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

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.


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.


Uncheck this box to hide the widget.

When the option “Fix” is checked, the Shape will be displayed on every page.


Enter a pixel size for the Shape's size.

X and Y

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


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.


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


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

CSS based effects and animations can be applied to this widget. Please refer to the topic Effects & Animations for more information.