What is a “Weather Reader”? Well, it’s like a “News Reader”, but it’s purpose is to check the web for local weather conditions and display them on a computer screen. For this project I’ve revived an old Averatec laptop, installed Ubuntu 9.10 on it and started to write some PERL.
Weather Data
Where to get the weather data? Personally, I like to go to the source. The public source at NOAA.gov. This is a government agency, paid for by my tax dollars (and yours too if you’re a US tax payer.. of which only 53% of working people in the US are, but that’s another story. So, free for the taking as far as I can tell, and am concerned. Which is good, because the real heavy work is up to me. Finding a URL is one thing, using it for something productive is another thing.
To see what I’m looking at as a source without clicking a bunch of links, here is a screen shot of my indented HTML victim:
Now, the only part that I’m interested in is this one:
I’m sure some of you are asking, “WHAT’S THE POINT!?!?!?”. Well, I have several, not all atop my head. As an avid motorcyclist, weather is almost as import to me as mariners and aviators. Weather might look good for the moment, but around here anything can happen. It’s good to know what the forecast is. And not just in one location. Since I transit two area micro-climates commuting to work, knowing that weather will be at the end points of my journey are are a minimum requirement. Plus, I’m lazy. Not so lazy I won’t write a program to do this, but lazy in the larger sense, of I just want to hit a button and see all the data I want, not have to wait for the Weather Chanel to decided it’s ready to dispense it’s forecast, or hunt around on various local news sites. Nor, frankly, have to click on TWO hyperlinks to see what weather will be like HERE and THERE. Nope, I’m just too lazy for that, so I’ll spend 8-32 hours figuring out a way to save myself 2-3 minutes a day (I didn’t say I’m always smart, but always lazy). Remember; “Laziness is the father of invention!”. Digressing….
The Plan
The plan is to use PERL, run every 30 minutes from 5 AM-> 1 AM, and grab the weather page shown above. Parse out only that which I want, and then re-construct my own page on my own server. It’s a basically a mashup page of what I want to see.
Checking the source code of the page, I see that, ugh, NOAA did not supply and useful DIV markers that I can use. So, this will be a rel brute-force process to detect, select, extract and re-construct the page of my dreams. Yes, I can be easily entertained.
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr valign ="top" align="center"> <td width="11%"><b>Tonight<br></b><br><img src="/images/wtf/nshra50.jpg" width="55" height="58" alt="Scattered Showers Chance for Measurable Precipitation 50%" title="Scattered Showers Chance for Measurable Precipitation 50%" ><br>Scattered<br>Showers<br>Lo <font color="#0033CC">45 °F</font></td><td width="11%"><b>Tuesday<br></b><br><img src="/images/wtf/shra50.jpg" width="55" height="58" alt="Scattered Showers Chance for Measurable Precipitation 50%" title="Scattered Showers Chance for Measurable Precipitation 50%" ><br>Scattered<br>Showers<br>Hi <font color="#FF0000">54 °F</font></td><td width="11%"><b>Tuesday<br>Night</b><br><img src="/images/wtf/nshra30.jpg" width="55" height="58" alt="Scattered Showers Chance for Measurable Precipitation 30%" title="Scattered Showers Chance for Measurable Precipitation 30%" ><br>Scattered<br>Showers<br>Lo <font color="#0033CC">44 °F</font></td><td width="11%"><b>Wednesday<br></b><br><img src="/images/wtf/bkn.jpg" width="55" height="58" alt="Partly Sunny" title="Partly Sunny" ><br>Partly<br>Sunny<br>Hi <font color="#FF0000">57 °F</font></td><td width="11%"><b>Wednesday<br>Night</b><br><img src="/images/wtf/hi_nshwrs30.jpg" width="55" height="58" alt="Chance Showers Chance for Measurable Precipitation 30%" title="Chance Showers Chance for Measurable Precipitation 30%" ><br>Chance<br>Showers<br>Lo <font color="#0033CC">46 °F</font></td><td width="11%"><b>Thursday<br></b><br><img src="/images/wtf/shra30.jpg" width="55" height="58" alt="Chance Showers Chance for Measurable Precipitation 30%" title="Chance Showers Chance for Measurable Precipitation 30%" ><br>Chance<br>Showers<br>Hi <font color="#FF0000">59 °F</font></td><td width="11%"><b>Thursday<br>Night</b><br><img src="/images/wtf/nshra30.jpg" width="55" height="58" alt="Chance Showers Chance for Measurable Precipitation 30%" title="Chance Showers Chance for Measurable Precipitation 30%" ><br>Chance<br>Showers<br>Lo <font color="#0033CC">46 °F</font></td><td width="11%"><b>Friday<br></b><br><img src="/images/wtf/shra.jpg" width="55" height="58" alt="Chance Showers" title="Chance Showers" ><br>Chance<br>Showers<br>Hi <font color="#FF0000">59 °F</font></td><td width="11%"><b>Friday<br>Night</b><br><img src="/images/wtf/nshra.jpg" width="55" height="58" alt="Chance Showers" title="Chance Showers" ><br>Chance<br>Showers<br>Lo <font color="#0033CC">46 °F</font></td></tr> </table>
Snagging that out of the documents for 2-3 locations will get me what I want. It should look something like this, but the example here does not have any stylesheets applied, it’s a direct rip and mash.
There are a couple of problems with that page though, it’s going to take up too much real estate on the final page. Here, it’s almost too large to view on my laptop’s main screen. So, some embedded CSS is in order. This hear overloads the td type, making any text found within anytd rendered at 80% of the normal size. This also overloads creates a style named headish that I is applied to the section titles:
<style>
.headish {
font-weight:bold;
background-color:#CCC;
font-size: 1.2em;}
td { font-size: 0.8em; }
</style>
The result of that very small change, gives me a smaller visual footprint, and formatting at little more pleasing to my sensibilities:
A little more hammering around in the stylesheet, and adding a CURRENT and High/Low temps forecast for the day. A little closer to the desired mockup. I still need to locate a suitable news feed to process:
