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. The widget is static so it can only be modified at design time.

How it works

The Scale widget has many design-time options to allow it to be placed vertically or horizontally and to change the overall look of the scale and digits.

Implementation

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

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

The Scale 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 Scale widget.

Left and Top Property

The Left and Top properties can be changed by entering the value of a known Left and Top coordinate.

Or the Scale can be positioned by simply clicking on it and dragging it 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 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.

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

Background Colour

The scale widget 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.

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.

Center Gap Property

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 Property

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 Location / 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 Property

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 Property

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.

Font Property

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

Font Colour / Tick Colour

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

Major Tick Length / Minor Tick Length

The Tick Length properties can be adjusted to easily distinguish between Minor and Major ticks.

The values will be automatically positioned to the new 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 Tick Count / Minor Tick Count

The Tick Count properties can be adjusted to vary the amount of values being displayed and for creating 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.
Select the Gauge Widget by clicking on Add Widget from the Graphics menu

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

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

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.

Back to Resource Centre

Share this article on socials

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. The widget is static so it can only be modified at design time.

How it works

The Scale widget has many design-time options to allow it to be placed vertically or horizontally and to change the overall look of the scale and digits.

Implementation

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

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

The Scale 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 Scale widget.

Left and Top Property

The Left and Top properties can be changed by entering the value of a known Left and Top coordinate.

Or the Scale can be positioned by simply clicking on it and dragging it 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 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.

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

Background Colour

The scale widget 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.

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.

Center Gap Property

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 Property

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 Location / 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 Property

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 Property

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.

Font Property

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

Font Colour / Tick Colour

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

Major Tick Length / Minor Tick Length

The Tick Length properties can be adjusted to easily distinguish between Minor and Major ticks.

The values will be automatically positioned to the new 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 Tick Count / Minor Tick Count

The Tick Count properties can be adjusted to vary the amount of values being displayed and for creating 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.
Select the Gauge Widget by clicking on Add Widget from the Graphics menu

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

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

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.

Back to Resource Centre

Share this article on socials