Skip to content

Design a Panel Widget


The Panel widget can be used to create an attractive layout for other widgets.

Select Widget

The Panel widget is useful for creating groups of widgets or sectioning a widget with an added text widget grouping them together and separate from other widgets.

This tutorial requires basic knowledge about using the graphics editor. This includes adding widgets and modifying widget properties during design time. For more information regarding this, refer to the Graphics Editor manual.


Static widgets can only be modified during design time

Widget Properties

Size and Position

Left and Top

Position of a widgets can be changed by entering values for the Left and Top properties.

Change Left Top

Alternatively, the widget can be positioned by simply clicking and dragging into the desired position.

If the width or height of the Panel object is set to the maximum size of the display top or left dragging will not function. You will notice, that by default, the Panel width is the same as the screen width in pixels so dragging horizontally or vertically will have no effect until the panel is resized but entering a left value in the Left property or a top value in the Top property will move the Panel to the new position.

Width and Height

For the Panel widget, the size properties, Width and Height, can be changed by entering the value of a known width and Height in pixels.

Change Width and Height

Or the width and height can be simply changed by dragging the red dotted widget outline to the required size.

Drag Width and Height


The State Property allows you to choose if the Panel has a Raised or Sunken look.
Choose Sunken Raised
Panel Raised


Experimenting with colours or placing a panel on top of a panel can further enhance the Sunken / Raised effect.



You can set the Filled property if the inner rectangle of the panel is drawn.

Choose Filled

Setting the Filled property to No allows the border to be drawn only. This can be useful if a panel is needed on top of a widget.

No Filled


If the Filled property is set to Yes, the Panel inner will be filled with a rectangle in the chosen Fill Colour. This can be altered by simply clicking on the the Fill Colour Property value and the Colour selector will appear.

Colour Selector

When editing colour properties, a colour picker tool is provided. The tool can be use to select a base colour

RGB colour

and the appropriate shade of that colour.


Alternatively, the colour value can be manually inputted in Hex or HSL format.

Color Format1

Color Format2



You can adjust the Line color property to change the colours of the lines that make up the panel border. Selecting the colour is done in the same manner as the Fill color. If the Panel State property is set to Sunken then Line colour 1 and Line colour 2 are as shown below.

Line Colour Sunken

If the Panel State property is set to Raised then Line Colour 1 and Line Colour 2 are as shown below.

Line Colour Raised


The Line Width Property can adjust the lines that make up the border from a value of 0 which will disable the drawing of the line to a maximum based on Width and height.

Line Width

Both lines used in the border can be adjusted individually.

Changed Line Width


For this demonstration we will be adding several Panels to group widgets together. For instructions on how to add a widget, refer to this discussion.

Click on Add Widget from the Graphics menu and select the Panel Widget then click on CONFIRM as shown.

Panel Widget

Next, add another Panel widget and set the properties as shown.

Another Panel Widget

Since both panels will be the same, you can simply copy the first Panel by selecting Panel1 and pressing these key combinations, ALT + C followed by ALT + V. Panel 2 will now be placed on top of Panel1 so all that is needed is the Top Property to be changed to 43.

Demo Panel Left Top

There will now be 2 Sunken Panels on a large Raised Panel.

2 Sunken Panels on a Raised Panel

Next, click on Add Widget from the Graphics menu and select the Gauge Widget then click on CONFIRM

Select Gauge

Set the properties for the Gauge Widget as shown.

Gauge Widget

You can add another Gauge using the same method of selecting Gauge0 and pressing these key combinations, ALT + C then ALT + V to copy and paste another gauge. The Top Property of Gauge1 must be changed to 48.

Demo Gauge Left Top

Which will show the gauge in the new position.

New Gauge Position

Next, click on Add Widget from the Graphics menu and select the LED Widget then click on CONFIRM

Select LED

Set the properties for the LED Widget as shown.

LED Widget

Again, using the copy & paste method make a copy of LedDigits0 and then change the Top Property to 49.

Demo LED Left Top

New LED Position

Tips & Tricks

The Panel widget can be used to make simple shapes from a coloured rectangle to a horizontal or vertical line. By setting the Line Width 1 and Line Width 2 to 0 and setting the desired Width and Height it is possible to add lines or solid background colour into a page to create separation lines between widgets.