Skip to content

Design a Media Panel Widget


The Media Panel widget is similar in use to the Panel widget where it can be used to create an attractive layout for other widgets. It also has the ability to use gradients and adjustable arc corners to create many interesting shapes.

Select Widget

The Media 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 Media Panel widget is set to the maximum size of the display top or left dragging will not function. You will notice, that by default, the Media 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 Media Panel is resized but entering a left value in the Left property or a top value in the Top property will move the Media Panel to the new position.

Width and Height

For the Media 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 Media Panel consists of 2 areas, the Panel (inner) and the Bevel (outer). Both of these areas can have a different colour and the colour of the Panel can be altered by simply clicking on the Panel 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.

colour Format1

colour Format2


The Media Panel uses gradients to create a raised or sunken effect. The Panel Gradient Level property sets how much of an effect this has from no effect (no gradient) to maximum. The Panel Style property can be set by choosing Sunken, Raised or None.

Change Panel Style

If None is selected, then the panel will not be drawn which makes it possible to use the Media Panel as a border or ring around another widget.

Panel Style None

Gradient Level

The level of the gradient can be adjusted from 0 which is no gradient to 30 which is the maximum gradient level. This will change the depth of the Raised or Sunken effect.

Change Panel Gradient Level

A special gradient can be accessed by entering a value of -1 which will show a partial gradient at the top and bottom of the panel.

Partial Gradient



The Bevel colour property can be set in the same manner as the Panel colour property by using the Colour selection tool.


The Bevel Style property can be set in the same manner as the Panel Style property.

Change Bevel Style

There are only Sunken and Raised options for the Bevel as the Bevel is always drawn.

Gradient Level

The Bevel Gradient property can be set in the same manner as the Panel Gradient Level property. The special gradient level -1 can also be used on the Bevel gradient.

Change Bevel Gradient Level


The Bevel Thickness property adjusts the thickness of the outer edge (bevel).

Change Bevel Thickness

The property can be set to maximum size which can be used to create a solid shape when the Panel Gradient Level property is set to None.

Thick Bevel

Corner Radius

Each corner can have its own arc radius set and many shapes can be created.
Change Corner Radius
The Media Panel can have many uses in much the same way as the Panel widget with the flexibility to create more rounded objects.
Corner Radius


For this demonstration we will be 2 Media Panels and a Led Digits widget to create a realistic look. For instructions on how to add a widget, refer to this discussion.

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

Media Panel Widget

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

Another Media Panel Widget

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

Select Led Digits

Set the properties for the Led Digits widget as shown.

Led Digits Widget

Tips & Tricks

The Media Panel widget can be used to make simple and complicated shapes from a coloured rectangle to more rounded shapes. Below is an example of what is achievable with the Media Panel Widget by using the background colour (black) to cut out parts of a Media Panel and also using the Panel Widget to create black lines.

BBM Logo Panels