29 August 2008
Ubiquity: welcome to the terminal
Posted by Kaanon under: Projects .Ubiquity is the newest thing from the Mozilla Labs, who have brought us such great things as Firefox and Thunderbird. Essentially it’s a command line terminal for Firefox, but it has the capability to be so much more. The examples of emailing maps, or easily finding Yelp reviews is awesome!
Of course, I had to try it myself. I’ve created my own commands as a sort of proof of concept. You have to install Ubiquity to see them though. After installation, come back here, and you should be prompted to subscribe to my commands. Subscription is a good idea, because if I ever fix a bug or add a new command, you’ll get it too.
- images
This command will bring up all the images on a page in the Ubiquity Window. It only pulls up actual IMG tags, because css images are usually background images and ads are usually printed after the page has loaded.
- zipcode
This command will use a web service to bring up information about a zip code. Less useful, but kind of cool nonetheless. It uses some webservice (http://www.webservicex.net/uszip.asmx/GetInfoByZIP) to find the information and doesn’t work more than a few times a day.
How’d I do it
The nerds out there are probably wondering how it worked, so here’s the source code: ubiq.js and a little breakdown below.
Images
The images commands was much easier to write. I just get all the images on a page, loop through them and put them into the preview window if the are bigger than 65 x 65 (anything smaller is probably non-interesting. I basically do nothing with the execute command now, because I can’t think of anything useful to do with a bunch of images. I thought about saving them in a zip or something, but I’m not there yet.
preview: function(previewBlock){
var images = CmdUtils.getDocumentInsecure().images;
var txt = "";
var previewTemplate = "<a href='${src}' style='margin: 3px'> <img src='${src}' /> </a> <br/>";
for (var i = 0; i < images.length; i++) {
if (images[i].height > 65 && images[i].width > 65) {
txt += CmdUtils.renderTemplate(previewTemplate, {src: images[i].src});
}
}
if(trim(txt) == "")
{
previewBlock.innerHTML = "<em>No Images found</em>";
}
else
{
previewBlock.innerHTML = "< div style='width: inherit; height: 400px; overflow: auto;'> "+txt+"</div>";
}
}
zipcode
The zipcode one was a bit harder because I’ve never dealt with jQuery before but essentially, I make a call to a XML webservice and then extract the information from the responseXML.
CmdUtils.CreateCommand({
name: "zipcode",
takes: {
zip_code: noun_arb_text
},
description: 'This will get information about a Zip Code',
preview: function(previewBlock, param){
if (!param.text || param.text.length < 5) {
previewBlock.innerHTML = "Zip code must be 5 characters"
return;
}
url = 'http://www.webservicex.net/uszip.asmx/GetInfoByZIP';
params = {
USZip: param.text
};
jQuery.ajax({
url: url,
data: params,
success: function(x){
var txt = '';
var nodes = x.documentElement.childNodes[1].childNodes;
var attributes = jQuery.makeArray(nodes);
var previewTemplate = "${tag}: ${content}
";
for (var i = 0; i < attributes.length; i++) {
var item = attributes[i];
if (item.nodeType == 1) {
previewData = {
tag: item.tagName,
content: item.textContent
};
txt += CmdUtils.renderTemplate(previewTemplate, previewData);
}
}
//CmdUtils.log(txt);
previewBlock.innerHTML = txt;
}
});
},
execute: function(zip_code){
url = 'http://www.webservicex.net/uszip.asmx/GetInfoByZIP';
openUrl(url + '?USZip=' + zip_code.text);
}
})
