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:
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
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.
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.
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).