Introduction

The Gauge A widget is a highly configurable widget that allows you to easily display a moving gauge over a specified value range.

How it works

The Gauge A widget displays a Led Bar Gauge inside the chosen rectangular area in any orientation.

Implementation

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

Click on the Gauge A widget under the Gauges tab and click on Confirm.

The Gauge A 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 Gauge A 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 Gauge A widget can be positioned by simply clicking on it and dragging it into the desired position. If the width or height of the Gauge A object 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. Making the Width smaller than the Height will change the orientation of the gauge to portrait mode. Making the Height smaller than the Width will change the orientation to landscape mode

Or the width and height can be simply changed by dragging the red dotted widget outline to the required size. Width and Height changes will be automatically trimmed to suit the Bar Thickness and Bar Spacing set properties.

Minimum Value / Maximum Value Property

The Gauge A can have a Minimum Value set from 0 to 1000 and the same for the Maximum Value

Bar Spacing Property

The Bar Spacing property sets how many pixels are used in between the segments of the Gauge. By increasing the Bar Spacing a greater gap between segments can be set. Setting this property to zero will create a solid Bar Graph.

Bar Thickness Property

The Bar Thickness property sets a pixel width of the segments in the Gauge. It may be necessary to adjust the Width or Height after altering the Bar Thickness.

Base Color Property

The background colour of the Gauge A widget can be altered by clicking on the property value and using the Colour Selector.

Partition 1 and 2 Percentage Properties

The Gauge A widget can have defined percentages for the 3 coloured areas across the range. Only 2 percentages need to be defined with the last percentage being the remaining amount of the range.

If the Gauge needs to be a single colour throughout its range then Partition 1 Percentage should be set to 100.

Partition 1, 2, 3 Inactive and Active Color Properties

Each defined partition has an Inactive colour and an Active colour. Generally, the Inactive colour is a darker shade of the Active colour. The Colours can be set by clicking on the property value and using the colour selector.

Fill Start Location Property

The Gauge A widget can be configured to operate in the opposite direction to the default setting. If in Landscape mode, choosing Top/Right as the property value will make the Gauge fill from top to bottom instead of Bottom to top if Bottom/Left is selected as the property value. In Portrait mode, choosing Top/Right will make Gauge fill from right to left and left to right if Bottom/Left is selected.

The image above shows the Fill/Start property set Top/Right.

Demonstration

For this simple demonstration we will using a Led Digit widget and a Gauge A widget to make a sweeping 0 – 1000 display.

Add a Led Digits widget from the Led tab

and then set the properties as shown on the right.

Next, add a Gauge A widget from the Gauges tab and set the properties as shown on the right.

If the Genius environment is being used the demonstration can be tested by entering simple code in the code window.

Or copy and paste the code below.

Copy to Clipboard

Ensure that the Port is set to the correct port that the TIMI module is connected to.

And then click on the Upload Button to Upload the entire project to the display.

When the Upload has completed you should see the Led Digits and Gauge A sweep between 0 and 1000.

Or the page can be used in the Commander environment by saving the Page and clicking in the Object Selector to choose Page0.

Then Click on Save Configuration.

A Save Dialogue Window will appear. Enter a filename (GaugeADemo) then click on Save

You can find out further information about the Commander Environment in the ‘Getting Started with the Commander Environment’ tutorial.

Back to Resource Centre

Share this article on socials

Introduction

The Gauge A widget is a highly configurable widget that allows you to easily display a moving gauge over a specified value range.

How it works

The Gauge A widget displays a Led Bar Gauge inside the chosen rectangular area in any orientation.

Implementation

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

Click on the Gauge A widget under the Gauges tab and click on Confirm.

The Gauge A 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 Gauge A 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 Gauge A widget can be positioned by simply clicking on it and dragging it into the desired position. If the width or height of the Gauge A object 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. Making the Width smaller than the Height will change the orientation of the gauge to portrait mode. Making the Height smaller than the Width will change the orientation to landscape mode

Or the width and height can be simply changed by dragging the red dotted widget outline to the required size. Width and Height changes will be automatically trimmed to suit the Bar Thickness and Bar Spacing set properties.

Minimum Value / Maximum Value Property

The Gauge A can have a Minimum Value set from 0 to 1000 and the same for the Maximum Value

Bar Spacing Property

The Bar Spacing property sets how many pixels are used in between the segments of the Gauge. By increasing the Bar Spacing a greater gap between segments can be set. Setting this property to zero will create a solid Bar Graph.

Bar Thickness Property

The Bar Thickness property sets a pixel width of the segments in the Gauge. It may be necessary to adjust the Width or Height after altering the Bar Thickness.

Base Color Property

The background colour of the Gauge A widget can be altered by clicking on the property value and using the Colour Selector.

Partition 1 and 2 Percentage Properties

The Gauge A widget can have defined percentages for the 3 coloured areas across the range. Only 2 percentages need to be defined with the last percentage being the remaining amount of the range.

If the Gauge needs to be a single colour throughout its range then Partition 1 Percentage should be set to 100.

Partition 1, 2, 3 Inactive and Active Color Properties

Each defined partition has an Inactive colour and an Active colour. Generally, the Inactive colour is a darker shade of the Active colour. The Colours can be set by clicking on the property value and using the colour selector.

Fill Start Location Property

The Gauge A widget can be configured to operate in the opposite direction to the default setting. If in Landscape mode, choosing Top/Right as the property value will make the Gauge fill from top to bottom instead of Bottom to top if Bottom/Left is selected as the property value. In Portrait mode, choosing Top/Right will make Gauge fill from right to left and left to right if Bottom/Left is selected.

The image above shows the Fill/Start property set Top/Right.

Demonstration

For this simple demonstration we will using a Led Digit widget and a Gauge A widget to make a sweeping 0 – 1000 display.

Add a Led Digits widget from the Led tab

and then set the properties as shown on the right.

Next, add a Gauge A widget from the Gauges tab and set the properties as shown on the right.

If the Genius environment is being used the demonstration can be tested by entering simple code in the code window.

Or copy and paste the code below.

Copy to Clipboard

Ensure that the Port is set to the correct port that the TIMI module is connected to.

And then click on the Upload Button to Upload the entire project to the display.

When the Upload has completed you should see the Led Digits and Gauge A sweep between 0 and 1000.

Or the page can be used in the Commander environment by saving the Page and clicking in the Object Selector to choose Page0.

Then Click on Save Configuration.

A Save Dialogue Window will appear. Enter a filename (GaugeADemo) then click on Save

You can find out further information about the Commander Environment in the ‘Getting Started with the Commander Environment’ tutorial.

Back to Resource Centre

Share this article on socials