Design a Media Panel Widget

Introduction

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.

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.

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 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.

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

Panel

Colour

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.

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.

Style

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.

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.

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.

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.

Bevel

Colour

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

Style

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

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.

Thickness

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

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.

Corner Radius

Each corner can have its own arc radius set and many shapes can be created.

The Media Panel can have many uses in much the same way as the Panel widget with the flexibility to create more rounded objects.

Demonstration

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.

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

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

Set the properties for the Led Digits widget as shown.

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.