Design a Panel Widget

Introduction

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

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.

Note

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.

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.

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

State

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

Tip

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

Fill

Filled

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

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.

Colour

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.

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

and the appropriate shade of that colour.

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

Line

Colour

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.

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

Width

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.

Both lines used in the border can be adjusted individually.

Demonstration

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.

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

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.

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

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

Set the properties for the Gauge Widget as shown.

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.

Which will show the gauge in the new position.

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

Set the properties for the LED Widget as shown.

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

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.