Wrapping JavaScript object around the gauge

All gauges have common interface; and as any common interface it is not quite convenient to use. Thus, to set value of Slider1.Value, it is necessary to write the following code:

widget.getByName("Slider").setValue(value);

It is getting even more complicated when multiple elements are used. For example, let's examine a widget available in the wizard: NewCollection\Misc\GlassBlueMisc that contains 7! Elements that should be manipulated. Furthermore, element names can hardly give a hint:

Slider2 – engine speed,

Slider1 - speed

Slider4 - temperature

Slider3 – fuel level

Slider6 – direction indicator: -1 - left, 1 - off, 0 - right

Slider5 – Gearbox. Each value from 0 to 6 corresponds to the following elements: 0 - P, 1 - R, 2 - N, 3 - D, 4 - 3, 5 - 2, 6 - L

Digits1.Text – value of the odometer

It would be certainly very convenient to set instrument.setSpeed(value) instead of widget.getByName("Slider2").setValue(value); set instrument.setDistance(value) instead of widget.getByName("Digits1").setText(value), and we wouldn’t need to take care of leading zeroes and firing widget refreshing, instead of widget.getByName("Slider5").setValue(2); set “N” to indicate neutral position, and make direction indicators switch by the following commands: turnOnLeftSignal, turnOnRightSignal, turnOffSignals)

Is there any way to avoid the common interface and work with the interface that will be more convenient. Yes, there is! This way is wrapping the object with a convenient interface around the widget.

Let’s create constructor that will just initialize the widgets in the specified element:

InstrumentName = function(divName)
{
    this.jsonModel = <Put your json here>
    this.widget = new PerfectWidgets.Widget(divName, this.jsonModel,{});
}

As to speed and similar parameters, it’s quite simple; just create a couple of getter – setter methods: 

this.setSpeed = function(value)
{
    this.widget.getByName("Slider1").setValue(value);
}
this.getSpeed = function()
{
    return this.widget.getByName("Slider1").getValue();
}

To set the distance we need to complete similar steps, but we need to take into account the following things:

1. When changing all element properties except Slider.Value automatic refreshing is not executed.
2. When setting Digit1.Text value we need to add leading zeroes to get the habitual view.

Thus, a couple of methods used for distance subject to the above mentioned issues look as follows:

this.setDistance = function(value)
{
    this.widget.getByName("Digits1").setText(('000000' + value).substr(-6));
    this.widget.getByName("Digits1").setNeedRepaint(true);
    this.widget.getByName("Digits1").refreshElement();
}
this.getDistance = function()
{
    return parseInt(this.widget.getByName("Digits1").getText());
}

Switching direction indicators are quite simple functions. Here we need to animate switchover; that is why we will transfer false as the second parameter for the setValue method. It will specify that the widget needs to change values immediately without animation.

So, three methods of switching direction indicators look like this:

this.setDistance = function(value)
{
    this.widget.getByName("Digits1").setText(('000000' + value).substr(-6));
    this.widget.getByName("Digits1").setNeedRepaint(true);
    this.widget.getByName("Digits1").refreshElement();
}
this.getDistance = function()
{
    return parseInt(this.widget.getByName("Digits1").getText());
}

The last thing we need is indicator of the gearbox. Let's use the following array to convert a symbol to index:

this.gearBoxIndicatorValues = ['P', 'R', 'N', 'D', '3', '2', 'L'];
this.setGearBoxIndicatorValue = function(value)
{
    this.widget.getByName("Slider5").setValue(this.gearBoxIndicatorValues.indexOf(value), false);
}
this.getGearBoxIndicatorValue = function()
{
    return this.gearBoxIndicatorValues[this.widget.getByName("Slider5").getValue()];

As a result, we get simple and easy-to-understand code:
instrument.setSpeed(instrument.getSpeed()+10);
instrument.turnOnLeftSignal();
instrument.setGearBoxIndicatorValue('R');
instrument.setDistance('1452');

 

Final code can be found in the attached sample.

Add Feedback