weather: wrap-up

If you look at your calendar, you’ll notice I’m writing this on not-a-Monday and not-a-Thursday. This is a bonus blog, made possible by my finishing my calculator which is the first advanced JavaScript project. Because I finished it so quickly, you won’t get to read much about it.

Weather.  I slept and woke up and it still worked.  I did some tweakage, found a Google font I liked (Cabin) and rewrote the “created by” part to clearly identify my weather app as a FreeCodeCamp project. Then, I had to put it back on GitHub.  When I typed git init it said it was re-initializing. Since I din’t know if I wanted that, I did an rm -r .git and then tried again. As far as GitHub was concerned, it was a new repository so I had to do the new repo things, but as far as my end was concerned, I had a README.md and a LICENSE.md and everything so I was ready to add, commit and push.  So I did all of that.  and it’s all there, now.  Except I forgot to edit the README.md so it referred to things that were untrue, like DarkSky. When I looked at the repo, I immediately saw the problem. And fixed it, followed by an add, commit, and push.

You can look on the side and see my weather app in the links.  Or you can go here. To see the repo, go here instead.  And  notice the calculator.  It’s a CodePen but that will change before I turn it in.  Probably I’ll write about it Monday.

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.

weather: switching to the FCC glitch.me

I had a wonderful weather app. Here’s a screenshot:
You see it was powered by DarkSky and it has a temperature and an icon for the weather-type and they’re a color. That color changes based on the Celsius temperature (as per the FCC user story:

User Story: I can see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather.

I found the colors on a site called Color Brewer 2.0 and they had several kinds of color sets to choose from and different sizes of color sets.  I found one that had ten colors, which I figure is plenty.

One teensy-tiny problem, though.  My API key was showing.  This is a unilateral no-no.  People can steal your key and then make a zillion calls to the API in your name and rack up a bill you have no way to pay.

There are two approaches to take here.  One is to set up a proxy so that my API would be kept secret. The trouble with that approach is that not everyone has the means to implement it and I don’t like being an elitist.

The other approach is to use the new(!) FCC glitch.me pass-through.  This is new since I did weather before, so I didn’t have it available.  I do now.  Trouble is, all the fields have different names, and, they want a GET request, not $.getJSON (I believe that’s what the words mean.  It’s okay, I did that for my wiki-viewer, so I know how it works.

They document the fields, but how that actually works in practice is why the ghods invented console.log().  I absolutely spent a bunch of time verifying that stuff was what I thought it was.  And it turns out humidity is already a percentage and not a decimal number (unlike DarkSky, where I needed to multiply by 100 to get a percentage).  Stuff like that.  The temperature is Celsius. I’m still uncertain of the units for wind speed because, at the current time, conditions are calm and with no wind, there is nothing to verify against another source.

The icons are tricky.  There are icons provided by the glitch.me API but I have the beautiful set-up I’ve described.  I don’t want to lose that so I need to know what the ranges of weather conditions are so I can populate one of my mondo if structures with the right icons.  This is a good stopping point for today and hopefully, by Thursday, I’ll have an answer.

an aside on weather: Wind direction

Most weather APIs don’t convert the wind bearing into a cardinal direction. That’s okay if you’re a pilot or something where you’re used to figuring the bearing, but for the rest of us, what does wind bearing 142 mean?

I found a handy website (there are probably many) that had a little graphic to show how the two mapped to one another here.  I used that info to make a killer if-structure to find the cardinal direction.  Here it is:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
wDir = "";
if (wBearing >= 348.75 || wBearing < 11.25) { wDir = "N";} else
if (wBearing >= 11.25 && wBearing < 33.75) { wDir = "NNE";} else
if (wBearing >= 33.75 && wBearing < 56.25) { wDir = "NE";} else
if (wBearing >= 56.25 && wBearing < 78.75) { wDir = "ENE";} else
if (wBearing >= 78.75 && wBearing < 101.25) { wDir = "E";} else
if (wBearing >= 101.25 && wBearing < 123.75) { wDir = "ESE";} else
if (wBearing >= 123.75 && wBearing < 146.25) { wDir = "SE";} else
if (wBearing >= 146.25 && wBearing < 168.75) { wDir = "SSE";} else
if (wBearing >= 186.75 && wBearing < 191.25) { wDir = "S";} else
if (wBearing >= 191.25 && wBearing < 213.75) { wDir = "SSW";} else
if (wBearing >= 213.75 && wBearing < 236.25) { wDir ="SW";} else
if (wBearing >= 236.25 && wBearing < 258.75) { wDir = "WSW";} else
if (wBearing >= 258.75 && wBearing < 281.25) { wDir = "W" ;} else
if (wBearing >= 281.25 && wBearing < 303.75) { wDir = "WNW";} else
if (wBearing >= 303.75 && wBearing < 326.25) { wDir = "NW";} else
{ wDir = "NNW";};

It’s very readable and that’s important for something like this.  Sure, it takes a bit of time to set up, but it makes the direction so much more user-friendly.