Skip to content

Design a Gauge A Widget


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

Select Widget

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.

Widget Properties

Size, Position and Orientation

Left and Top

Position of a widgets can be changed by entering values for the Left and Top properties.

Change Left Top

Alternatively, the widget can be positioned by simply clicking and dragging into the desired position.

If the width or height of the Gauge A widget is set to the maximum size of the display top or left dragging will not function.

Width and Height

For the Gauge A widget, the size properties, Width and Height, can be changed by entering the value of a known width and Height in pixels.

Change Width and Height

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.

Drag Width and Height

Minimum and Maximum Value

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

Gauge A Range



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.

Gauge A Bar Spacing


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.

Gauge A Bar Thickness

Base Color

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

Gauge A color Selector


1 and 2 Percentage

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

Gauge A Percentage

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

Gauge A 100 Percent

1, 2, 3 Inactive and Active Color

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

Gauge A Active

Fill Start Location

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 below shows the Fill/Start property set Top/Right.

Gauge A Fill


For this simple demonstration we will using a Led Digit widget and a Gauge A widget to make a sweeping 0 – 1000 display. For instructions on how to add a widget, refer to this discussion.

Add a Led Digits widget from the Led tab.

Add Led Digits Widget

and then set the properties as shown.

Led Digits Widget Properties

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

Gauge A Widget

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

Genius Environment

Or copy and paste the code below.

func setup()
    // put your setup code here, to run once:


 * User Loop Function
func loop()
    var n;
    for(n := 0; n < 1000; n+=2)
      setWidgetValue(LedDigits0, n);
      setWidgetValue(GaugeA0, n); 
    for(n := 1000; n > 0; n-=2)
      setWidgetValue(LedDigits0, n);
      setWidgetValue(GaugeA0, n); 
    // put your main code here, to run repeatedly:


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

Select Port

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.

Animated Gauge A Widget

Animated Gauge A Widget

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

Choose Page Zero

Then Click on Save Configuration.

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.