Design a Symbol Widget

Introduction

The Symbol widget is a collection of common vector drawn symbols which can be set to any size and any colour.

The Symbol can be displayed on its own or with a Media Panel.

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

The Symbol widget is a static widget so it can only be modified at design time. If the displayed symbol needs to be changed dynamically, the Symbols widget provides this functionality.

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 Symbol widget is set to the maximum size of the display top or left dragging will not function.
Width and Height: For the Symbol 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.

Symbol

Type: The Symbol Type can be chosen by clicking on the drop-down box.; Below is a list of symbols and their description
: Home Symbol selected.
Primary Colour: All symbols have a primary colour with some that will utilize a secondary colour. This can be altered by simply clicking on the Symbol Primary 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.

Secondary Colour: Some Symbol Types use a secondary colour which is adjustable by clicking on the Symbol Secondary Colour selector and choosing the colour in the same way as the Primary Colour property. These are the symbols which use a Secondary colour.; Bar Graph 60 with Secondary colour set to a darker red

Gradient Level: Each symbol can be drawn as a solid colour symbol or with a gradient effect by adjusting the Symbol Gradient Level property.; Entering a value between 1 to 30 will adjust the gradient depth. Entering a 0 will turn all gradients off.

Panel

Enable

A symbol can be drawn with or without a panel.

Choosing Yes will add a Media Panel behind the Symbol. The Panel is fully configurable in much the same way as the Media Panel widget. The Panel Size will be the Width & Height dimensions and the Symbol will be resized to fit.

Offset

The Panel Offset property allows you to offset the symbol from the Panels Bevel by the number of pixels entered.
: When a panel is enabled the Width and Height of the Symbol will be reduced by the Bevel Thickness of the Panel and the Panel Offset.; The Panel Offset property can also accept negative values to effectively make a small symbol larger inside a Panel.

Inner

Colour: The 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 Inner colour Property value and the Colour selector will appear. The Colour can be selected in the same way as the Symbol Primary colour property.
Style: The 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 Inner 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 Panel as a border or ring around the Symbol.

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.

Bevel

Colour: The Panel Bevel colour property can be set in the same manner as the Panel Inner colour property by using the Colour selection tool.
Style: The 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 Inner Style property can be set by choosing Sunken, Raised or None.; The Panel Bevel Style property can be set in the same manner as the Panel Inner Style property.; There are only Sunken and Raised options for the Bevel as the Bevel is always drawn.
Gradient Level: The Panel Bevel Gradient property can be set in the same manner as the Panel Inner Gradient Level property.

Thickness: The Panel Bevel Thickness property adjusts the thickness of the outer edge (bevel).; Changing this property will have an impact on the Symbol size.

Corner Radius

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

Demonstration

For this demonstration we will use a Symbol with a Panel, 2 Media Panels and 3 Label widgets to create a warning page. For instructions on how to add a widget, refer to this discussion.

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

and set the properties 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 Label Widget then click on CONFIRM as shown.