Skip to content

Design a Scale Widget


The Scale widget is a simple widget that allows you to place a Scale on the screen in any colour and any system font.

Select Widget

The Scale widget is useful for adding a numerical reference to a position of a slider or linear gauge.

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.


Static widgets can only be modified during design time

Widget Properties

Size and Position

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 scale object is set to the maximum size of the display top or left dragging will not function. You will notice, that by default, the scales width is the same as the screen width in pixels so dragging horizontally will have no effect but entering a left value in the Left property will move the scale to the new position.

Drag Scale

Width and Height

For the scale 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.

Drag Height


Changing the width to a value less than the height will force the scale to change Orientation from a horizontal layout to vertical.

Center Gap

The Center Gap property will allow you to space the position of the scale in relation to the text by the specified number of pixels if the Scale Location property is set to Center.

Change Center Gap

Minimum and Maximum

The Minimum and Maximum properties can be set from negative to positive values.

Minimum and Maximum

The values will be calculated by dividing the range equally between the number of Major ticks. If a negative value is required, this will need to be entered via the keyboard.

Minimum Maximum Changed

Scale or Tick Location

The Scale Location can be set to position the values with respect to the Scale. By adjusting the Scale Location and many different Scale styles can be selected. By just changing the Scale Location the values can be positioned.

Scale Location

By changing the Tick Location property, the Scale Ticks can be moved to one side of the scale.

Tick Location

Scale End Align

The Scale End Align Property allows you set if the start and end values are centered to the start and end ticks or if these values are moved to line up with the start and end ticks. If Yes is selected it may be necessary to change the font or the number of major ticks to avoid the values overlapping.

Scale End Align

Show Zero

This show zero property allows you to disable the 0 value being shown. This can be useful when joining a vertical Scale to a horizontal scale to avoid an overlap.

Show Zero

The Label Widget could then be used to provide a single Zero in the right location.


The Scale widgte is drawn inside a rectangle which becomes the background of the widget. This can be altered by simply clicking on the Background Colour Property value and the Colour selector will appear.
Colour Selector
When editing color properties, a color picker tool is provided. The tool can be use to select a base color
RGB Color

and the appropriate shade of that color.


Alternatively, the color value can be manually inputted in Hex or HSL format.

Color Format1

Color Format2



The TIMI display has 3 system fonts to choose from and can be selected from the drop down box.

Font Select



You can set the Font colour and Tick colour properties by simply clicking on the Property value and adjusting in the same manner as described in the Background Colour property


Major or Minor Tick Length

You can adjust the Tick length properties to distinguish between Minor and Major ticks.

Tick Lengths

The values will be automatically positioned to the new Major Tick Length

Major Tick Length


It may be necessary to adjust the Height or Width property as the automatic positioning of the values may cause some clipping.

Major or Minor Tick Count

You can adjust the Tick count properties to vary the amount of values being displayed and to create a more precise scale.

Tick Count

If a precise unit is required for the size values of the Major Ticks then it should be set to the value minus one, eg if the Major Ticks are equally spaced at 10 then the Minor ticks should be set to 9.

Minor Ticks


For this demonstration, we will be adding a Scale to a Gauge Widget. For instructions on how to add a widget, refer to this discussion.

Click on Add Widget from the Graphics menu and select the Gauge Widget then click on CONFIRM

Select Gauge

Set the properties for the Gauge Widget as shown.

Gauge Widget

Next, add the Scale Widget and set the properties as shown.

Gauge Scale

Tips & Tricks

In some cases, a numerical scale may not be suitable. It is possible to remove the values by making the Font Colour the same Colour as the Background Colour. A Label widget could then be placed on top to give the desired effect.

Gauge Scale Label