weather: conditions are changing

So I asked around and determined that the weather source for the FCC glitch.me pass through is OpenWeatherMap.  And the first thing I found out when starting work today is that I got an error message when trying to connect to it.  As always, “it used to work” only gets you so far in life, and I hit up the gitter rooms looking for help.  @Masd925 was there for me. It seems I wasn’t making the call right. Here’s the relevant line of code:

[js]url:”https://fcc-weather-api.glitch.me/api/current?lon=” +myLon+ “&lat=” + myLat,[/js]

I had not been “plussing” my variables and that had been okay but between my last post and today, that became broken.

On to condition codes.  When we left, I was searching for condition codes so I could use my icons instead of the sorry icons shown here with their associated weather conditions.  These icons are 50px by 50px PNG images. Like this one for a thunderstorm.

"Icon"

Jussayin’.  These are not real icons.  But hey, there are weather actual condition codes, like for clear skies or thunderstorms or whatever. I’m in luck, right?

This turned out to be a can of worms.  First off, DarkSky had had condition codes that included day or night so it would say, for example, “clear-day” as the condition description and I could then assign a sunny icon to display or “clear-night” and I could assign a moon icon.  Well, OpenWeather has a numeric code, in the weather[0].id field of the data object that corresponds to everything from “clear sky” to “hurricane” but it is not so kind as to tell you if it is day or night.  It does however, give you the sunrise, sunset and current time (in seconds since January of 1970 but who cares?) and you can thus figure out if it’s dark or not.  It’s only one more step, right?

Okay, achievement unlocked! I can determine which icon to display and I can use more of my wonderful weather-icons icons (which are actual icons, not PNGs) and thus respond to font-size: settings in CSS and otherwises comport themselves with aplomb. And I mean more because with OpenWeather’s coding system, there are so many more weather conditions that can be displayed.  Some have only one or two 3-digit code and others are ranges. I try to grab the special cases first for ease of coding, but not all of them, as the 800-level codes are odd.

You saw the aside on wind-bearing.  This is how I do stuff.   Here, without further apology is the mondo if structure for the condition codes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// first some special cases
if (icon == 962) { wIcon = "wi-hurricane";} else
if (icon == 902 || icon == 781) { wIcon = "wi-tornado";} else
if (icon == 906 && !isNight) { wIcon = "wi-day-hail";} else
if (icon == 906 && isNight) { wIcon = "wi-night-alt-hail";} else
if (icon == 711) { wIcon == "wi-smoke";} else
if (icon == 731 || icon == 751) { wIcon == "wi-sandstorm";} else
if ((icon == 611 || icon == 612) && !isNight) { wIcon = "wi-day-sleet";} else
if ((icon == 611 || icon == 612) && isNight) { wIcon = "wi-night-alt-sleet";} else
// now the general cases
if (icon >= 200 && icon <= 299 && !isNight) { wIcon = "wi-day-thunderstorm";} else
if (icon >= 200 && icon <= 299 && isNight) { wIcon = "wi-wi-night-alt-thunderstorm";} else
if (icon >= 300 && icon <= 399 && !isNight) { wIcon = "wi-day-rain-mix";} else
if (icon >= 300 && icon <= 399 && isNight) { wIcon = "wi-night-alt-rain-mix";} else
if (icon >= 500 && icon <= 599 && !isNight) { wIcon = "wi-day-rain";} else
if (icon >= 500 && icon <= 599 && isNight) { wIcon = "wi-night-alt-rain";} else
if (icon >= 600 && icon <= 699 && !isNight) { wIcon = "wi-day-snow";} else
if (icon >= 600 && icon <= 699 && isNight) { wIcon = "wi-night-alt-snow";} else
if (icon >= 700 && icon <= 799 && !isNight) { wIcon = "wi-day-fog";} else
if (icon >= 700 && icon <= 799 && isNight) { wIcon = "wi-night-fog";} else
if (icon == 800 && !isNight) { wIcon = "wi-day-sunny";} else
if (icon == 800 && isNight) { wIcon = "wi-night-clear";} else
if (icon == 801 && !isNight) { wIcon = "wi-day-cloudy";} else
if (icon == 801 && isNight) { wIcon = "wi-night-alt-cloudy";} else
if (icon >= 802 && icon <= 899) { wIcon = "wi-cloudy";} else
{ wIcon = "wi-na";}; // if all else fails, display a giant N/A
iconStr = '<i class="wi ' + wIcon + '" style="color:' + iColor+ ';"></i>';

That iColor is my custom color I wrote about last time.  That gives me a color for the temperature and the icon based on the Celsius temperature. It has a mondo if too.

Next time, I submit it and push it to GitHub (in the other order, though). You always want to try to sleep at least once before turning in code to make sure you caught stuff. And yeah, that’s not always doable.

Leave a Reply

Your email address will not be published. Required fields are marked *