Wind Color Belchertown

[Meteo Oberwallis]

Hi Guys

I have a problem with the wind color in Belchertown. I managed to display the wind in color as well. Only it doesn't always do so after visiting or refreshing the Belchertown page. I've attached my changes. What could it be? I have 2 pictures attached. At view a is at page load and also a few seconds later. At some point the color will change (see appendix b). But that is always different.

This is my Code:

// Change the color of the Windspeed variable according to US-EPA standards
// (adjusted to match skin colors better)
function get_windSpeed_color(windSpeed, returnColor = false) {
    if (windSpeed <= 0) {
        var windSpeed_color = "rgba(0,255,0,1)";
    } else if (windSpeed >= 19.9) {
        var windSpeed_color = "rgba(126,255,0,1)";
    } else if (windSpeed >= 39.9) {
        var windSpeed_color = "rgba(0,255,0,1)";
    } else if (windSpeed >= 59.9) {
        var windSpeed_color = "rgba(255,128,0,1)";
    } else if (windSpeed >= 79.9) {
        var windSpeed_color = "rgba(255,0,0,1)";
    } else if (windSpeed >= 99.9) {
        var windSpeed_color = "rgba(255,0,120,1)";
    } else if (windSpeed >= 118.0) {
        var windSpeed_color = "rgba(255,1,113,1)";
    }

    // Return the color value if requested, otherwise just set the div color
    if (returnColor) {
        return windSpeed_color;
    } else {
        jQuery(".curwindspeed").css("color", windSpeed_color);
    }
}

and

// Windspeed Metric
if (data.hasOwnProperty("windSpeed_kph")) {
        windSpeed = parseFloat(parseFloat(data["windSpeed_kph"])).toLocaleString("$system_locale_js", {minimumFractionDigits: unit_rounding_array["windSpeed"], maximumFractionDigits: unit_rounding_array["windSpeed"]});
        get_windSpeed_color(windSpeed);
        jQuery(".curwindspeed").html(windSpeed);

I have the complete text as Attachment new_belchertown_js

Thx for you help

[Jim Munro]

This is only a guess.  I had a similar problem displaying colors for my UV index.  My current.UV.raw was returning a float with several decimal places so I rounded it to 1 decimal place as in the snippet below.  It may not have

been the most elegant solution but seems to work for me.  I was getting strange color behaviour in my responsive skin with the colors. So something to consider with your windSpeed.

#else if round($current.UV.raw ,1) >= 5.5 and round($current.UV.raw ,1) <= 7.4
   <td class="stats_data" style="background-color: orange">$current.UV</td>

Maybe others can see something more glaring.

[p q]

Why are you formatting the windspeed as string and then (multiple times) converting it to float? 

This may be unrelated to your problem.

I do notice that the outTemp coloring is done with the string value and converted to the real value in the coloration function itself. Could the windspeed float variable be going out of scope? I don't usually write Javascript so, sorry I'm not much help.

--
You received this message because you are subscribed to the Google Groups "weewx-user" group.
To unsubscribe from this group and stop receiving emails from it, send an email to weewx-user+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/weewx-user/1a07d243-7268-48d9-8bdf-a9649df4ac95n%40googlegroups.com.

--

Peter Quinn
(415)794-2264

[Jim Munro]

I played around a bit with this code for wind colors in the Belchertown skin.  I too had some difficulty with the colors and made a few changes.  Please see snippet below.  I basically had to reverse order the if/else if code to put the higher wind speed first because the else if would always stop a the first >= and not go any further.  Your windSpeeds/windGusts and colors may not match mine so adjust to taste.

// Change the color of the Windspeed variable according to US-EPA standards
// (adjusted to match skin colors better)
function get_windSpeed_color(windSpeed, returnColor = false) {

    windSpeed = parseFloat(windSpeed).toFixed(1); // Convert back to decimal lit
    if (windSpeed <= 1.1) {
        var windSpeed_color = "rgba(18,120,200,1)";
    } else if (windSpeed >= 24.0) {
        var windSpeed_color = "rgba(159,0,197,1)";
    } else if (windSpeed >= 18.0) {
        var windSpeed_color = "rgba(255,69,0,1)";
    } else if (windSpeed >= 12.4) {
        var windSpeed_color = "rgba(255,127,0,1)";
    } else if (windSpeed >= 7.5) {
        var windSpeed_color = "rgba(255,174,0,1)";
    } else if (windSpeed >= 3.7) {
        var windSpeed_color = "rgba(113,188,60,1)";
    } else if (windSpeed >= 1.2) {
        var windSpeed_color = "rgba(31,175,221,1)";

    }
    // Return the color value if requested, otherwise just set the div color
    if (returnColor) {
        return windSpeed_color;
    } else {
        jQuery(".curwindspeed").css("color", windSpeed_color);
    }

}

// Change the color of the aqi variable according to US-EPA standards

// (adjusted to match skin colors better)

function get_windGust_color(windGust, returnColor = false) {
    windGust = parseFloat(windGust).toFixed(1); // Convert back to decimal liter
    if (windGust <= 1.1) {
        var windGust_color = "rgba(18,120,200,1)";
    } else if (windGust >= 24.0) {
        var windGust_color = "rgba(159,0,197,1)";
    } else if (windGust >= 18.0) {
        var windGust_color = "rgba(255,69,0,1)";
    } else if (windGust >= 12.4) {
        var windGust_color = "rgba(255,127,0,1)";
    } else if (windGust >= 7.5) {
        var windGust_color = "rgba(255,174,0,1)";
    } else if (windGust >= 3.7) {
        var windGust_color = "rgba(113,188,60,1)";
    } else if (windGust >= 1.2) {
        var windGust_color = "rgba(31,175,221,1)";

    }
    // Return the color value if requested, otherwise just set the div color
    if (returnColor) {

        return windGust_color;
    } else {
        jQuery(".curwindgust").css("color", windGust_color);
    }

}

cheers Jim

[Auchtermuchty Weather]

As a general note, 'if ..... else if .....' should finish with 'else', not 'else if'.  With my previous weather station I got some strange readings, and your code - ending in 'else if' rather than 'else' - wouldn't match some values leading to deformed HTML being generated.

[jterr...@gmail.com]

Hi,

In Belchertown script, temperature color is set at two different places :

1) in index.html.tmpl :

jQuery(document).ready(function() {
    #if $Extras.has_key("aqi_enabled") and $Extras.aqi_enabled == '1'
    get_aqi_color( "$aqi" );
    #end if

    #if $Extras.has_key("beaufort_category") and $Extras.beaufort_category == '1'
    // weewx >= 4.2 can convert to Beaufort directly, but to improve backwards compatibility, convert windSpeed to
    // knots and then use Javascript function to convert to Beaufort
    jQuery(".beaufort").html( beaufort_cat( kts_to_beaufort( "$current.windSpeed.knot.toString(addLabel=False)" ) ) );
    #end if

    get_outTemp_color( "$unit.unit_type.outTemp", "$current.outTemp.formatted" );

this javascript code in bold is setting the right temperature color just after the loading of the page.

I think you may have to had here the code that will set the wind colors at load time

2) In belchertown.js.tmpl, as you did it already for wind. The color will be applied/changes at the time a new MQTT message is received.

Without adding the code in index.html.tmpl, the wind will not be colored just after loading the page, and the color will appear when the next MQTT message with wind values is received.

[Jim Munro]

I added the following 2 lines in index.html.tmpl after the line:

              get_outTemp_color( "$unit.unit_type.outTemp", "$current.outTemp.formatted" );

              get_windSpeed_color( "$current.windSpeed.formatted" );
              get_windGust_color ( "$current.windGust.formatted" );