Wrong font in special case

[Pierre-Lannoy]

Hello! When using setValueAnimated(value), when digitalFont=true and value equals to minValue, the lcd doesn't displays with lcdFontName but with stdFontName...

[mcrossley]

Hello,

I can't reproduce this, can you link to an example?

[Pierre-Lannoy]

Hello mcrossley. Here is a demo page of my wordpress plugin where you can find some sample (in the bottom of the page). If you look at rain radialBargraph (it's called "pluie" in french), you can see the issue : https://pierre.lannoy.fr/wordpress-live-weather-station-for-netatmo-demo/ Here is the corresponding js :

jQuery(document).ready(function ($) {
    var gssm35669 = new steelseries.RadialBargraph(ssm35669, {
        minValue: 0,
        maxValue: 10,
        gaugeType: steelseries.GaugeType.TYPE3,
        frameDesign: steelseries.FrameDesign.TILTED_BLACK,
        backgroundColor: steelseries.BackgroundColor.BRUSHED_METAL,
        pointerType: steelseries.PointerType.TYPE11,
        pointerTypeLatest: steelseries.PointerType.TYPE11,
        pointerColor: steelseries.ColorDef.WHITE,
        pointerTypeAverage: steelseries.PointerType.TYPE3,
        pointerColorAverage: steelseries.ColorDef.WHITE,
        knobType: steelseries.KnobType.STANDARD_KNOB,
        knobStyle: steelseries.KnobStyle.SILVER,
        lcdColor: steelseries.LcdColor.BLUE_BLUE,
        userLedVisible: true,
        userLedColor: steelseries.LedColor.BLUE_LED,
        valueGradient: new steelseries.gradientWrapper(0, 10, [0, 1], [new steelseries.rgbaColor(77, 77, 255, 1), new steelseries.rgbaColor(77, 77, 255, 1)]),
        useValueGradient: true,
        foregroundType: steelseries.ForegroundType.TYPE1,
        size: 200,
        thresholdVisible: false,
        ledVisible: false,
        niceScale: false,
        valueColor: steelseries.ColorDef.WHITE,
        lcdDecimals: 1,
        unitString: "Pluie \u2022 mm",
        digitalFont: true
    });
    gssm35669.setValueAnimated(0, function () {
        gssm35669.blinkUserLed();
        gssm35669.setTrend(steelseries.TrendState.STEADY);
        setInterval(function () {
            var http = new XMLHttpRequest();
            var params = "action=lws_query_steelmeter_datas";
            params = params + "&device_id=70:ee:50:01:22:be";
            params = params + "&module_id=05:00:00:00:0e:aa";
            params = params + "&measure_type=rain";
            http.open("POST", "/wp-admin/admin-ajax.php", true);
            http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            http.onreadystatechange = function () {
                if (http.readyState == 4 && http.status == 200) {
                    var odatas = JSON.parse(http.responseText);
                    if (typeof odatas != "undefined") {
                        gssm35669.setValueAnimated(odatas.value);
                        gssm35669.blinkUserLed(odatas.alarm);
                        if (odatas.value_trend == "up") {
                            gssm35669.setTrend(steelseries.TrendState.UP);
                        }
                        if (odatas.value_trend == "down") {
                            gssm35669.setTrend(steelseries.TrendState.DOWN);
                        }
                        if (odatas.value_trend == "steady") {
                            gssm35669.setTrend(steelseries.TrendState.STEADY);
                        }
                    }
                }
            }
            http.send(params);
        }, 120000);
    });
});

[mcrossley]

OK, I see the problem, it is a timing thing, the gauge is being drawn before the LCD font has been downloaded by the raphael. Can you force the font to be downloaded before the gauge is drawn?

On 26 January 2016 at 15:36, Pierre-Lannoy notifications@github.com wrote:

Hello mcrossley. Here is a demo page of my wordpress plugin where you can find some sample (in the bottom of the page). If you look at rain radialBargraph (it's called "pluie" in french), you can see the issue : https://pierre.lannoy.fr/wordpress-live-weather-station-for-netatmo-demo/ Here is the corresponding js :

jQuery(document).ready(function ($) { var gssm35669 = new steelseries.RadialBargraph(ssm35669, { minValue: 0, maxValue: 10, gaugeType: steelseries.GaugeType.TYPE3, frameDesign: steelseries.FrameDesign.TILTED_BLACK, backgroundColor: steelseries.BackgroundColor.BRUSHED_METAL, pointerType: steelseries.PointerType.TYPE11, pointerTypeLatest: steelseries.PointerType.TYPE11, pointerColor: steelseries.ColorDef.WHITE, pointerTypeAverage: steelseries.PointerType.TYPE3, pointerColorAverage: steelseries.ColorDef.WHITE, knobType: steelseries.KnobType.STANDARD_KNOB, knobStyle: steelseries.KnobStyle.SILVER, lcdColor: steelseries.LcdColor.BLUE_BLUE, userLedVisible: true, userLedColor: steelseries.LedColor.BLUE_LED, valueGradient: new steelseries.gradientWrapper(0, 10, [0, 1], [new steelseries.rgbaColor(77, 77, 255, 1), new steelseries.rgbaColor(77, 77, 255, 1)]), useValueGradient: true, foregroundType: steelseries.ForegroundType.TYPE1, size: 200, thresholdVisible: false, ledVisible: false, niceScale: false, valueColor: steelseries.ColorDef.WHITE, lcdDecimals: 1, unitString: "Pluie \u2022 mm", digitalFont: true }); gssm35669.setValueAnimated(0, function () { gssm35669.blinkUserLed(); gssm35669.setTrend(steelseries.TrendState.STEADY); setInterval(function () { var http = new XMLHttpRequest(); var params = "action=lws_query_steelmeter_datas"; params = params + "&device_id=70:ee:50:01:22:be"; params = params + "&module_id=05:00:00:00:0e:aa"; params = params + "&measure_type=rain"; http.open("POST", "/wp-admin/admin-ajax.php", true); http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); http.onreadystatechange = function () { if (http.readyState == 4 && http.status == 200) { var odatas = JSON.parse(http.responseText); if (typeof odatas != "undefined") { gssm35669.setValueAnimated(odatas.value); gssm35669.blinkUserLed(odatas.alarm); if (odatas.value_trend == "up") { gssm35669.setTrend(steelseries.TrendState.UP); } if (odatas.value_trend == "down") { gssm35669.setTrend(steelseries.TrendState.DOWN); } if (odatas.value_trend == "steady") { gssm35669.setTrend(steelseries.TrendState.STEADY); } } } } http.send(params); }, 120000); }); });

— Reply to this email directly or view it on GitHub https://github.com/HanSolo/SteelSeries-Canvas/issues/27#issuecomment-175080829 .

[Pierre-Lannoy]

Certainly. How can I do that? - sorry I'm not an expert...

PS : a q&d workaround I found is to setValueAnimated to 0.000001 in replacement of 0... So I really thought it was a problem with the fact that value was equal to minValue...

[mcrossley]

The problem is that it draws the gauge without the font. You were setting a value of '0', the gauge is clever enough to realise that the value has not changed so it suppresses a redraw. Setting a value of 0.000001 after it has been drawn forces a redraw (0 not-equal 0.000001) - and meantime the font is now available, so it displays as expected.

On 26 January 2016 at 16:08, Pierre-Lannoy notifications@github.com wrote:

Certainly. How can I do that? - sorry I'm not an expert...

PS : a q&d workaround I found is to setValueAnimated to 0.000001 in replacement of 0... So I really thought it was a problem with the fact that value was equal to minValue...

— Reply to this email directly or view it on GitHub https://github.com/HanSolo/SteelSeries-Canvas/issues/27#issuecomment-175093937 .

[Pierre-Lannoy]

Well, I see. So if I understand well, i must find a way to delay the creation of the gauge (to wait the font is downloaded)... I wil dive in the script and style queue management of wordpress... :( Not really a pleasure, but now I understand where I must act, that's something ;)

Many thanks for your help. And, again, thanks to you an Gerrit for this amazing control!