Home for the Chinese New Year, I decided to put together an RSS wallpaper for my parents.
Not exactly power users, my parents use the home XP computer mostly for games (FreeCell, WordZap etc), IM and streaming radio. They have the desktop all laid out nicely, so on the right side you get the IM applications area (Yahoo! Messenger and Skype, so they can easily contact me or my brother when we're not around) and games area on the left side. This leaves about 45% of screen space on the bottom left hand corner, which I intended to use for my feeds wallpaper.
I remembered stumbling onto an Instructables tutorial on turning your desktop into an RSS reader, which I'll be using for this purpose. (Note: This only works for Windows XP machines.)
As per the directions in Step 1 (from the Instructables site), create the HTML layout. This should be something that can work well as a wallpaper with words. You want to be able to read the headlines properly, so style the fonts to contrast with the background for best results. Give some thought to laying out the feed area. I used a two column table for mine, one labeled "for mum" and the other "for dad".
Then, as in Step 2, insert the http-equiv="refresh" meta tag into the <head> section of your HTML document. This makes the webpage (your desktop) refresh itself periodically.
<meta http-equiv="refresh" content="600">Step 3 is where I deviate from the Instructables tutorial. Instead of using Feed2JS to pull the RSS headlines onto the desktop, I'll be using a combination of Google Reader and Yahoo! Pipes' JSON output.
In Google Reader (which I use daily), tag the feed you on your desktop, and from the Settings page, make it public. This will create a public Reader page for the tag complete with its own RSS. It even has its own JavaScript widget, which you can stick into your HTML right away. However I wanted full control of how and what was displayed so I used Pipes which gave me full access via JSON. Connect the public RSS into Yahoo! Pipes using the Fetch Feed module. And then output it, selecting the JSON format.
On the HTML end, I wrote a simple callback method in JavaScript to show the headlines. Of course, since you have access to all the feed objects data via JSON, you could also display the description.
<script>
// The callback, which will be called
// after the JSON has been loaded
function showDad(obj){
// Make sure the returned object is valid
if((obj != null) || obj.count == 0) {
return;
}
var output=[];
var items=obj.value.items;
// Loop through the feed items, construct HTML
for(var i in items) {
var item = items[i];
output.push('<li><a href="');
output.push(item.link);
output.push('">');
output.push(item.title);
output.push('</a>');
}
// Output into the designated areas
document.getElementById('for_dad_area').innerHTML =
output.join('');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_id=mypipeid&_callback=showDad">
</script>
Follow Step 5 from the Instructables tutorial on how to setup Active Desktop, and that's it!
Mum loves cooking, so I hooked her up with Simply Recipe's feed, while my dad got a soccer news feed from ESPN. And the beautiful thing is, Google Reader lets me control what feeds go on my parent's wallpaper remotely. I just need to tag the feeds accordingly, I don't even have to be home to do this!
