Netvibes UWA

Netvibes is a pretty awesome personal homepage web app. It’s very similar to iGoogle, but IMO it’s a lot more stable & a lot better looking. Netvibes offer a unified API that allows you to write using their API and deploy your gadget to multiple providers, such as iGoogle, Opera, iPhone, MacOSX and Vista.

I’ve been writing a gadget for my company but decided I also wanted one to take the first image out of an RSS feed and present so that it takes up all the space in the gadget. Useful for things like LOLcats. It was surprisingly simple to create.. so with some UWA coding, and a simple pipe at Yahoo Pipes, I’m now able to bring in the first image from a specified RSS feed.. assuming the image’s URL has been put into the item.content tag.

Here’s the finished gadget.. and the source code is below…

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:widget="http://www.netvibes.com/ns/"  >
	<head>
		<title>Single Image Display</title>
		
		<meta name="author" content="Matt Collinge" />
		<meta name="author_email" content="gadget@mattcollinge.co.uk" />
		<meta name="description" content="Display an image from the content section of the first item in an RSS feed. Useful for feeds like those from LOLCats. Use Yahoo Pipes to get the image URL (only) into the item.content tag." />
		<meta name="version" content="1.1" />
		<meta name="website" content="http://www.mattcollinge.co.uk/" />
		<meta name="keywords" content="image, rss, lolcats, single, full width" />
		<meta name="autoRefresh" content="15" />
		
		<link rel="stylesheet" type="text/css" href="http://www.netvibes.com/themes/uwa/style.css" />
		<script type="text/javascript" src="http://www.netvibes.com/js/UWA/load.js.php?env=Standalone"></script>
		
		<style type="text/css">
			.imageDisplay {
				margin:0;
				padding:0;
			}
		</style>
		
		<widget:preferences>
			<preference name="title" type="text" label="Title" defaultValue="Single Image Display" />
			<preference name="url" type="text" label="URL" defaultValue="" />
		</widget:preferences>
	
		<script>
			var BasicRSSReader = {};
			 
			BasicRSSReader.feed = false;
			 
			widget.onLoad = function() {
				if (widget.getValue('url') === '' || widget.getValue('url') == undefined) {
					widget.setBody('Please edit the preferences and enter the URL of the RSS feed where you want to take the image from.<br><br>The image URL must be in the item.content tag otherwise this will not work. Use feed a reformatter like Yahoo Pipes if you need to tinker with a 3rd party RSS feed such as LOLcats.');
				} else {
					widget.body.addClassName('imageDisplay');
					widget.setTitle(widget.getValue('title'));
					UWA.Data.getFeed(widget.getValue('url'), BasicRSSReader.display);
				}
			}
			
			BasicRSSReader.display = function(feed) {
				var feedList = 'Unable to load feed.';
				if (feed) BasicRSSReader.feed = feed;
				var item = BasicRSSReader.feed.items[0];
				feedList = '<img src="' + item.content + '" width="' + widget.body.getDimensions().width + '" />';
				widget.setBody(feedList);
			}
		</script>			
	
	</head>
	<body>
		<p>Loading...</p>
	</body>
</html>

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s