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. 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 Media Panel widget has many design-time options to allow it to have a raised or sunken inner and outer areas and to change the overall look from a fully square panel or to a full circle.

Implementation

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

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

The Media 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 Media 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 Media Panel can be positioned by simply clicking on it and dragging it 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 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.

Panel Color Property

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.

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.

Panel Style Property

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.

Panel Gradient Level Property

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 Color Property

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

Bevel Style Property

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.

Bevel Gradient Level Property

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.

Bevel Thickness Property

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.

Top Left Corner Radius / Top Right Corner Radius / Bottom Left Corner Radius / Bottom Right Corner Radius Properties

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

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

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.

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.

Back to Resource Centre

Share this article on socials

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. 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 Media Panel widget has many design-time options to allow it to have a raised or sunken inner and outer areas and to change the overall look from a fully square panel or to a full circle.

Implementation

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

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

The Media 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 Media 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 Media Panel can be positioned by simply clicking on it and dragging it 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 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.

Panel Color Property

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.

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.

Panel Style Property

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.

Panel Gradient Level Property

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 Color Property

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

Bevel Style Property

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.

Bevel Gradient Level Property

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.

Bevel Thickness Property

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.

Top Left Corner Radius / Top Right Corner Radius / Bottom Left Corner Radius / Bottom Right Corner Radius Properties

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

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

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.

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.

Back to Resource Centre

Share this article on socials