Compass Gauge fails to show value occasionally

[Stuart2007]

I have an extra Steelseries gauge on my page, a compass showing mill heading (in range 0-360). The heading value is an extra field in Realtimegauges.txt.

The value arrives correctly and is set using the statement :
_gaugeMillH.setValueAnimated(+_gaugeMillH.valueAverage); //set Mill Heading HERE
and is correct as confirmed by an alert (see below). However about 20% of the time, seemingly at random, the compass fails to update and is left pointed at 0 ie due north.I'm wondering if it hits an exception in steelseries.js, but can't find it...

Can anyone suggest where my error creeps in?

Stuart, sorry I'm a bit of a beginner at this js!
=====
<code snip>
doMillH = function () { //start of SM section
var windSpd, range, tip;
_gaugeMillH.valueAverage = extractInteger(data.Currcond);
_gaugeMillH.titleAverage = strings.tenminavg_title;
_gaugeMillH.setBackgroundColor(steelseries.BackgroundColor.GREEN);
_gaugeMillH.setPointerColor(steelseries.ColorDef.WHITE);
_gaugeMillH.setPointerType(steelseries.PointerType.TYPE3);
_gaugeMillH.setValueAnimated(+_gaugeMillH.valueAverage); //set Mill Heading HERE
alert ("Mill H is " + _gaugeMillH.valueAverage);
</code snip>

[mcrossley]

Hard to tell without seeing a test page Stuart, but you do not need to set all those values each update, they only need to be set once when the gauge is created.

The following should only be done once during initialisation...

_gaugeMillH.setBackgroundColor(steelseries.BackgroundColor.GREEN);
_gaugeMillH.setPointerColor(steelseries.ColorDef.WHITE);
_gaugeMillH.setPointerType(steelseries.PointerType.TYPE3);


Each of those will force the gauge to flush internal image buffers and recreate them before redrawing the gauge.

[Stuart2007]

Hard to tell without seeing a test page Stuart, but you do not need to set all those values each update, they only need to be set once when the gauge is created.

The following should only be done once during initialisation...

_gaugeMillH.setBackgroundColor(steelseries.BackgroundColor.GREEN);
_gaugeMillH.setPointerColor(steelseries.ColorDef.WHITE);
_gaugeMillH.setPointerType(steelseries.PointerType.TYPE3);


Each of those will force the gauge to flush internal image buffers and recreate them before redrawing the gauge.

Mark...

I've put up a sample page at http://www.oldlandwindmill.co.uk/newsit ... MHDEV1.htm. On my fast desktop, 90% of the time the compass (MillH) loads correctly. On an old slow laptop, only 70% of the time, and on an ipad barely 20%.

If the compass fails to set correctly first time around on loading, it never responds subsequently.

Any suggestions?

Many thanks

Stuart

[mcrossley]

Stuart

I can't get the gauge to fail on my laptop, but...

I'd change your drawMillH function a little. From this...

Code: Select all

		//NEW Compass for MIllHeading SM added
		drawMillH = function () {
            var params = extend(commonParams);
            // create Mill Heading compass gauge
            if ($('#canvas_MillH').length) {
                params.pointerType = steelseries.PointerType.TYPE3;
                params.degreeScale = false;             // Show degree scale rather than ordinal directions
                params.pointSymbols = strings.compass;
                params.titleString = "Mill Heading";
                params.useColorLabels = true;
                _gaugeMillH = new steelseries.Compass('canvas_MillH', params);  //needs to be Compass
                _gaugeMillH.setValueAnimated(+_gaugeMillH.valueAverage);
                _gaugeMillH.setBackgroundColor(steelseries.BackgroundColor.GREEN);
                _gaugeMillH.setPointerColor(steelseries.ColorDef.WHITE);
                _gaugeMillH.setPointerType(steelseries.PointerType.TYPE3);
             }
            // add a shadow to the gauge
            if (config.showGaugeShadow) {
                $('#canvas_MillH').css(commonParams.boxShadow);
            }
        },

This is better because it only sets the value after the gauge is completely as you want it, and the drawXXX functions all use setValue() rather than setValueAnimated(). I also deleted setting the title string - a Compass gauge doesn't have one....

Code: Select all

		//NEW Compass for MIllHeading SM added
		drawMillH = function () {
            var params = extend(commonParams);
            // create Mill Heading compass gauge
            if ($('#canvas_MillH').length) {
                params.pointerType = steelseries.PointerType.TYPE3;
                params.degreeScale = false;             // Show degree scale rather than ordinal directions
                params.pointSymbols = strings.compass;
                params.useColorLabels = true;
                _gaugeMillH = new steelseries.Compass('canvas_MillH', params);  //needs to be Compass
                _gaugeMillH.setBackgroundColor(steelseries.BackgroundColor.GREEN);
                _gaugeMillH.setPointerColor(steelseries.ColorDef.WHITE);
                _gaugeMillH.setPointerType(steelseries.PointerType.TYPE3);
                _gaugeMillH.setValue(+_gaugeMillH.valueAverage);
             }
            // add a shadow to the gauge
            if (config.showGaugeShadow) {
                $('#canvas_MillH').css(commonParams.boxShadow);
            }
        },

or better still, or rather more efficient (because it draws the gauge once at initialisation then sets the value - each setXXX() call will force the gauge to delete and recreate some of its internal image buffers)

Code: Select all

		//NEW Compass for MIllHeading SM added
		drawMillH = function () {
            var params = extend(commonParams);
            // create Mill Heading compass gauge
            if ($('#canvas_MillH').length) {
                params.pointerType = steelseries.PointerType.TYPE3;
                params.degreeScale = false;             // Show degree scale rather than ordinal directions
                params.pointSymbols = strings.compass;
                params.useColorLabels = true;
                params.backgroundColor = steelseries.BackgroundColor.GREEN;
                params.pointerColor = steelseries.ColorDef.WHITE;
                params.pointerType = steelseries.PointerType.TYPE3;
                _gaugeMillH = new steelseries.Compass('canvas_MillH', params);  //needs to be Compass
                _gaugeMillH.setValue(+_gaugeMillH.valueAverage);
             }
            // add a shadow to the gauge
            if (config.showGaugeShadow) {
                $('#canvas_MillH').css(commonParams.boxShadow);
            }
        },

The doMillH function is fine now you have commented out the setXX functions that are done once in the drawMillH function.