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

 

How it works

The Symbol widget draws the widget inside the specified Width and Height properties and can be stretched for both width and height. The Symbol can be drawn with a variable gradient or as a solid colour.

Implementation

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

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

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

Symbol Type Property

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.

Symbol Primary Color Property

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

Symbol Secondary Color Property

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

Symbol Gradient Level Property

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 Property

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.

Panel Offset Property

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.

Panel Inner Color Property

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 Color Property value and the Colour selector will appear. The Colour can be selected in the same way as the Symbol Primary Color property.

Panel Inner Style Property

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.

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

Panel Bevel Color Property

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

Bevel Style Property

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.

Panel Bevel Gradient Level Property

The Panel Bevel Gradient property can be set in the same manner as the Panel Inner Gradient Level property.

Panel Bevel Thickness Property

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

Changing this property will have an impact on the Symbol size.

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

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.
Select the Media Panel Widget by clicking on Add Widget from the Graphics menu and select Media Panel from the Static tab.

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 Label widget by clicking on Add Widget from the Graphics menu then Select Label from the Static tab

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

Add another Label Widget and set the properties shown on the right.

Add another Label Widget and set the properties shown on the right.

Finally add a Symbol widget and set the properties as shown on the right.

Back to Resource Centre

Share this article on socials

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

 

How it works

The Symbol widget draws the widget inside the specified Width and Height properties and can be stretched for both width and height. The Symbol can be drawn with a variable gradient or as a solid colour.

Implementation

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

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

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

Symbol Type Property

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.

Symbol Primary Color Property

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

Symbol Secondary Color Property

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

Symbol Gradient Level Property

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 Property

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.

Panel Offset Property

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.

Panel Inner Color Property

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 Color Property value and the Colour selector will appear. The Colour can be selected in the same way as the Symbol Primary Color property.

Panel Inner Style Property

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.

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

Panel Bevel Color Property

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

Bevel Style Property

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.

Panel Bevel Gradient Level Property

The Panel Bevel Gradient property can be set in the same manner as the Panel Inner Gradient Level property.

Panel Bevel Thickness Property

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

Changing this property will have an impact on the Symbol size.

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

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.
Select the Media Panel Widget by clicking on Add Widget from the Graphics menu and select Media Panel from the Static tab.

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 Label widget by clicking on Add Widget from the Graphics menu then Select Label from the Static tab

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

Add another Label Widget and set the properties shown on the right.

Add another Label Widget and set the properties shown on the right.

Finally add a Symbol widget and set the properties as shown on the right.

Back to Resource Centre

Share this article on socials