Introduction

The Panel widget can be used to create an attractive layout for other widgets. It can be useful for creating groups of widgets or sectioning a widget with an added text widget grouping them together and separate from other widgets. The widget is static so it can only be modified at design time.

How it works

The Panel widget has many design-time options to allow it to have a raised or sunken state and to change the overall look of the colour and border style.

Implementation

To select the Panel widget when using the Architect or Genius environments simply click on Graphics and then click on Add Widget.

Click on the Panel widget under the Static tab and click on Confirm.

The Panel will be placed on the graphic representation of the TIMI display with default properties set.

You can now change the Property Values to get the desired look of the Panel widget.

Left and Top Property

The Left and Top property can be changed by entering the value of a known Left and Top coordinate.

Or the Panel can be positioned by simply clicking on it and dragging it 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 and height is the same as the screen width and height 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 Property

The width and height properties 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 Property

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

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

Filled Property

The Filled property can set 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.

Fill Color Property

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 Fill Colour Property value and the Colour selector will appear.

There are many ways to choose the right colour by simply clicking the RGB colour.

And then clicking on a shade.


Or, alternatively, you can enter the values directly in various ways by selecting the required format.

Line Color 1 / Line Color 2 Property

The Line Color property can be adjusted 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 colour. If the Panel State property is set to Sunken then Line Color 1 and Line Color 2 are as shown below.

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

Line Width 1 / Line Width 2 Property

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.
Select the Panel Widget by clicking on Add Widget from the Graphics menu and set the properties as shown on the right.

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

Another Panel will be added but as the panel will be the same as the Panel we have just added it can simply be copied by Selecting Panel1 and pressing 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 Select the Gauge Widget by clicking on Add Widget from the Graphics menu

followed by CONFIRM and set the properties as shown on the right.

Another Gauge can now be added using the same method of selecting Gauge0 and ALT & c then ALT & v to copy and paste another gauge. The Top Property of Gauge1 needs to change to 48.

Which will show the gauge in the new position.

Next add a Led Digits widget by clicking on Add Widget from the Graphics menu

followed by CONFIRM and set the properties as shown on the right.

Again, using the copy & paste method make a copy of LedDigits0 and then change to 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.

Back to Resource Centre

Share this article on socials

Introduction

The Panel widget can be used to create an attractive layout for other widgets. It can be useful for creating groups of widgets or sectioning a widget with an added text widget grouping them together and separate from other widgets. The widget is static so it can only be modified at design time.

How it works

The Panel widget has many design-time options to allow it to have a raised or sunken state and to change the overall look of the colour and border style.

Implementation

To select the Panel widget when using the Architect or Genius environments simply click on Graphics and then click on Add Widget.

Click on the Panel widget under the Static tab and click on Confirm.

The Panel will be placed on the graphic representation of the TIMI display with default properties set.

You can now change the Property Values to get the desired look of the Panel widget.

Left and Top Property

The Left and Top property can be changed by entering the value of a known Left and Top coordinate.

Or the Panel can be positioned by simply clicking on it and dragging it 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 and height is the same as the screen width and height 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 Property

The width and height properties 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 Property

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

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

Filled Property

The Filled property can set 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.

Fill Color Property

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 Fill Colour Property value and the Colour selector will appear.

There are many ways to choose the right colour by simply clicking the RGB colour.

And then clicking on a shade.


Or, alternatively, you can enter the values directly in various ways by selecting the required format.

Line Color 1 / Line Color 2 Property

The Line Color property can be adjusted 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 colour. If the Panel State property is set to Sunken then Line Color 1 and Line Color 2 are as shown below.

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

Line Width 1 / Line Width 2 Property

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.
Select the Panel Widget by clicking on Add Widget from the Graphics menu and set the properties as shown on the right.

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

Another Panel will be added but as the panel will be the same as the Panel we have just added it can simply be copied by Selecting Panel1 and pressing 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 Select the Gauge Widget by clicking on Add Widget from the Graphics menu

followed by CONFIRM and set the properties as shown on the right.

Another Gauge can now be added using the same method of selecting Gauge0 and ALT & c then ALT & v to copy and paste another gauge. The Top Property of Gauge1 needs to change to 48.

Which will show the gauge in the new position.

Next add a Led Digits widget by clicking on Add Widget from the Graphics menu

followed by CONFIRM and set the properties as shown on the right.

Again, using the copy & paste method make a copy of LedDigits0 and then change to 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.

Back to Resource Centre

Share this article on socials