Build your own Custom Weather Center!


In the last weather-related review (Handy Weather), I promised to share an easy, and free method for getting syndicated RSS weather information on your Windows Mobile device in a totally customized manner. It doesn’t require you to sign into Google, Yahoo, or any services. It also doesn’t require additional software, and runs from an internal PIE page on your handheld. The coolest part is that you have total control of what weather items to mashup on your new mini weather center.

Step 1: Build a Mobile Web Page:
To start with, I suspect you have at least a passing knowledge of HTML coding. HyperText Markup Language is simply put, how web browsers are able to parse and properly display web-server content. A basic web-page usually looks something like this:

You can learn more about basic web page design, and even obtain plenty of example pages on-line (just search for HTML as a start). Don’t panic yet, cause you can use my example page (link below). The changes aren’t really that hard to make. There are also a number of great kits to aid in your coding of web pages. My favorite happens to be HTML-kit (which is free), but I often use the built-in Notepad.exe application in Windows (start >> run >> notepad >> enter).

Step 2: Select Your Data
So, after you have a web page defined, start by adding some basic weather observation and/or advisory data to your page. Obviously the informed weather dude starts by checking the current station reports in his local area, definitely with an eye on the upstream stations. What does upstream mean? It means that if the steering flow (about 18000ft level) winds are out of the southwest, then likely you can expect weather changes to be greatly influenced from the conditions in that direction. This is mainly true during seasons where there is a strongly-defined steering flow, like in the winter-spring and late fall in the N. Hemisphere. Really, any useful observation, warning and advisory data can go in the first section of your page. I would pick say 5-10 local stations that have feed data available in the form of a valid RSS 2.0 URL. I use a mixture of sources from Weather Underground, Yahoo and National Weather Service. The Yahoo Developer site has a good tutorial on using their feeds here--, and even plugging into their Yahoo UI (see here). NOAA also has a whole library of feedable weather information. Once you have an idea of what information you want to add, note the RSS feed URL.

Typical NOAA weather feed URL (Alert conditions for the state of VA): http://www.weather.gov/alerts/va.rss

Step 3: Convert the RSS to HTML formatted data:

Once you have the feed URL data selected, you need to parse out the RSS information using a script in order to display it in your mobile web-page. IE7 and Firefox now do this natively on your desktop computer (simply input the feed URL into the browser address bar), but Pocket IE still doesn’t convert RSS to a human-readable format. The easiest way is to find a server on the internet that will convert it for you, but if you’re really brave (or smart), you can do it on your own web server. Go here to read a great write-up that explains these options in gory detail. I went the easy way, and used a handy site already out there which has a script mechanism called feed2js. Go here to find this tool. Feed2js will build a javascript code snippet (pointing to their code of course) to display the RSS feed data you wish to select. This site will even give you some basic CSS (Cascading Style Sheet) options for formatting the output. Play around with the settings to get the feed content tweaked the way you want it (there’s even a preview), and select the “Generate JavaScript†button to spit out your script block. Once you have your converted feed script snippet, copy/paste it into the body of your web page and save it, and tweak the location title text. See example below:

Converting feeds using feed2js...

Code Snippet in my web page...Script block is in bold

Step 4: Test/Copy your page
After tweaking your page and adding the feed data you want, save the file and try opening it using your desktop browser. Make sure you give it an .htm or .html extension. The browser won't display the same way as PIE would, but you can at least test if the feed/script is valid and that it is returning the information formatted the way you like. Another advantage to using a tool like HTML-kit is that it has a preview tab built into it to allow you to switch back and forth between your code and the actual page. Once you feel the code is set up the way you want, copy it to your mobile, and open the file with PIE. If it works, you just created your own mobile weather center, and by opening PIE options you can set it as your default start page by selecting "Use Current". Now for some fun...

Step 5: Jazz up your pages

Using +StartPage:

If you want to go the exact route that I went in my example, you will need to go download a neat free little utility called +StartPage 2.0 from here. +StartPage is a bundled set of useful mobile start web pages. The utility will install it's main launch page as the default startup page for your PIE web browser. For users who experience problems with +StartPage, can create their own pages or use the mobile page bundle I created here as a starter. Simply navigate to my site, and save the web page locally and tweak it as indicated in the upcoming section. Then once the mobile page is tweaked the way you like, use your PIE options to set it as the default home page.

I’m demonstrating how to do this below using +StartPage, but am not condoning changing someone else’s code. I could find no prohibitions to modification for personal use, but I could not get the author to verify that I might make my changes publicly available, therefore I am not publishing my changes (only screenshots). I will explain how you might “hypothetically†tweak +StartPage for your own use. I created multiple weather pages (one for each city) in my example, so you might want to go ahead now and do that using the instructions in the previous section before proceeding.

1. Install +StartPage on your device using A/S or download the cab directly and open it. I got it from another great mobile site here, which have good mobile pages for you to get ideas from--for formatting your own mobile pages, duh!

Hint: To see an internet web page's soucre code, simply find the "view source" option in your browser. The code will usually display in notepad, etc. On your device, PIE doesn't have it natively, but SPBs' Pocket Plus adds "View Source", and opens the code in a word doc, which can be later saved as html.

2. Once StartPage is installed, from your desktop PC (and of course with your device cradled and synced), browse to the portalPPC.com folder on your device, and copy the whole directory to somewhere on your desktop computer for editing.

3. Copy your new weather page/s there with the rest of the html files that are there already, and open the coolsites.htm page in your editor.

4. Simply add a link to your new weather page (see example below).

...Don't save/close the page yet, though.

4. Grab the following lines in the cool sites page (see below) from the top and middle sections of the page, and paste them somewhere in your editor (another advantage of using a kit...you can save commonly-used or custom snippets of code in a tab for quick recall, etc.) . I made a slight mistake with the first screen shot of the javascript block below, as you only need the lines from the opening script tag to the closing one...whoops! But if you want to use the style sheet, and format of StartPage, simply keep all their HTML tags and tweak the specifics to match your custom pages. An easy way to accomplish this (instead of copy/paste of code snippets), is to simply make several copies of one of the existing pages and edit them individually, replacing the +StartPage specifics with your custom weather page code, titles and such.

Pulldown javascript code

Table for Displaying Pulldown

5. Paste the code snippets into your new weather pages, and then tweak the refs to point at your pages. If you like, on all the +StartPages, you can add your refs.

Hint: The javascript for the pull-down goes before the head section, and the table can go before the body, but you may want to adjust that to your tastes, etc.

6. Test her out in your web browser, and then copy back to your device...after saving everything of course. Simply select the cool sites link in the pull-down to test your new Weather link (which should take you to the main weather page). In my example the main page brings up local weather summaries for DC from Yahoo feeds, Weather Underground, NOAA alert bulletins, and more...When you feel that the content is working the way you intend, simply copy and paste all the files that you edited back to the proper folder (in portalppc.com) on your device (overwriting any that are there).


7. Finally, selecting the pull-down should reveal the other city pages we added. In my case New York, and L.A. Selecting a city should take you to that page--and again in my case--I added feed HTML (an option in feed2JS) to the NOAA observation data to these pages... This will display the weather graphics as well...pretty neat, eh?

That's it!...oh and as one last "tweak" I added a very basic current condition feed script to the main +StartPage at the top of the page for when I open up PIE, which I will let you figure out, as you are the weather feed expert now.

Feel free to send me a comment, and don't forget that you can get some starter pages here. I can probably help you tweak your own pages if you get stuck, so don't be shy. I would also be interested in your own mashup WM efforts. Sadly PIE doesn't support AJAX and cool things like iGoogle widgets (which there are now a ton for weather information).

It's no surprise you are the weather guru. Great guide for those who do not want to spend on a weather application.

Syndicate content