Design a Scale Widget

Introduction

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

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.

Note

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.

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.

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.

Or the width and height can be simply changed by dragging the red dotted widget outline to the required size.

Note

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.

Minimum and Maximum

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

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.

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.

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

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.

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.

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

Colors

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.

When editing color properties, a color picker tool is provided. The tool can be use to select a base color

and the appropriate shade of that color.

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

Font

Style

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

Colour

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

Tick

Major or Minor Tick Length

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

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

Note

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.

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.

Demonstration

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

Set the properties for the Gauge Widget as shown.

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

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.