Introduction | Your first interface | Building a model | Advanced features | Resources

4.6 Numeric input and output

This section looks at the different objects available for numeric input and output. The model and interfaces used in this section can be downloaded here:

There are five example simulations included in this section, each showing one or more numeric input or output devices (interface in brackets):

  • Bar gauge (trainingNumericGauge.jsm)
  • Digital (trainingNumericDigital.jsm)
  • Slider (trainingNumericSlider.jsm)
  • Analogue meter (trainingNumericMeter.jsm)
  • Spin button(trainingNumericSpin.jsm)

Bar gauge

The bar gauge is used to display real or integer numbers, both as a number and graphically in the form of a bar. In the example below the number title has been removed and an image added to make the bar into part of a thermometer.

The compassDirection property can be set to North, South, East or West depending on the direction in which you want the bar to fill. The maximum and minimum values for the bar can be set by hand using the max and min properties, or linked to model properties using modelMax and modelMin. The outputOption allows you to chose whether you want the numeric value displayed beside the maximum and minimum (default), in the title bar (Title bar), or not at all (none).


The digital object allows real and integer numbers to de displayed and edited. There are two separate objects - the input digital and the output digital. Both are almost identical, except that the output digital will not allow the number to be updated by the user at runtime, and the input digital contains some additional input properties.

The example below shows an output digital and input digital. You can click on the lower number to edit and enter an update.

The number formatter editor, which is available from the numberFormatter property will allow for quite complex formatting - you can select a string to be displayed before or after a number, as well as selecting the type of notation and customising the display.

The input digital has a useNumberText property which can be set to true or false - when set to true, the control is set to input permanently. The keyStrokeUpdate property defines whether the keystrokes will be updated as they happen on the interface.


The slider control can be used to input and display real or integer variables. Again there are two versions of this control - an output slider and in input slider with extra functionality.

The example below shows an input slider being used to control the balance between two speakers.

The alignHorizonal property can be set to true or false, if false the slider will be aligned vertically. The invertScale allows you to set the scale of the slider from bottom to top or from right to left instead of top to bottom or left to right. The maximum and minimum can be set by hand max and min) or linked to model properties (modelMax and modelMin). The thumbSize property can be used to set the size of the moving slider piece.

The input slider has three additional properties: sendOnMouseMotion, sendOnMouseMove and sendOnMouseRelease. These allow you to specify which mouse action you want the slider to respond to - at least one of these properties must be set to true or the slider will not update at all.

Analogue meter

The analogue meter is used to display a real or integer variable.

In the example below an analogue meter is used to simulate a pressure meter.

The startAngle and finishAngle properties can be used to set the size of the circle segment used to display the meter. The increaseClockwise can be changed from true to false to set the meter direction (0° can be considered as east if increaseClockwise is true, otherwise west).

The maximum and minimum can be set from the model with modelMax and modelMin or manually with Min or Max. The ticks property allows you to set the number of graduations.

Clicking on the zones property will display the Zone Editor, which allows you to set one or more areas of the meter to be coloured.

Spin button

The spin button is used to display real numbers and modify them by small increments and decrements.

The example below shows how a spin button can be set to display a certain range of values in increments of 0.5.

The maximum, minimum and increment can be linked to model properties using the modelMax, modelMin and modelInc properties, or manually using the Max,Min and inc properties (or a combination of the two).

The horizontal property can be set to true or false to determine the direction in which the spin button is displayed. The spinDelay property lets you set a delay between clicks (in milliseconds). Like the digital control, the numberFormat property will display the number formatter editor.