Chemistry Blog

«

»

Feb 18

The W|A Reagent Table Desktop Gadget

by azmanam | Categories: Uncategorized | (29530 Views)

(If you don’t want to read the tech talk, Download the Desktop Gadget here)

When I released the Reagent Table Widget a few weeks ago, several people asked if I could develop a desktop gadget version for Windows Vista/Windows 7/Mac OS X. I know a little bit about programming (read: very, very little bit), so I assumed coding a desktop gadget would be way beyond my ability. Turns out, not so much.

Desktop gadgets are cleverly just webpages with a fixed size and no chrome – that is, no status bar on bottom, nav bar, tabs, navigation arrows, or window frame… just the html part of the webpage. Most typically, they run a javascript code to do the ‘cool’ parts of the gadget and the user is none the wiser. Now, I’m marginally proficient in html, but I really don’t know any javascript at all, so I was initially disheartened.

The widget is coded all in javascript, and I can look at the underlying javascript if I run FireBug, but I’m not comfortable enough with javascript to try to replicate that in the gadget. Fortunately, W|A doesn’t want you dealing with the javascript, either. As many of you have seen, you can go to the W|A page for the widget and copy a short Embed code to place the widget wherever you want… like in a gadget.

So my html file for the Gadget is 19 lines long. That’s it. Entirely because W|A allows me to use the embed code instead of replicating all the javascript files and code. Here’s the html file:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<style type=”text/css”>
body
{
margin: 0;
width: 475px;
height: 500px;
}
</style>
</head>

<body>
<g:background id=”imgBackground” src=”background.png”>
<script type=”text/javascript” id= “WolframAlphaScript72c288a828485e5b1d4c52910d106734″ src=”http://www.wolframalpha.com/widget/widget.jsp?id=72c288a828485e5b1d4c52910d106734″></script>
</g:background>
</body>

</html>

And this is what it looks like:

 

That would be it… but you have to bundle the gadget with a master file so the OS knows what to do with the bundle. In Windows, this is a short .xml file. On a Mac, this is a .plist file. Both contain meta data like Title, size, author, background image, master size, version, etc. When you open the .gadget or .wdgt file, the OS reads the meta file and runs my mini html file in a chrome-less window, which you see as a Desktop Gadget. It really was much simpler than I though it would be… but only because I could use the W|A embed code (thanks, W|A!)

Curiously, though, the javascript doesn’t work exactly the same as when it’s in a full browser, and I really don’t understand why. The gadget that works the best is the PCSmall version. It replicates the widget you see in our right column on your desktop. Because the widget version displays the result in a popup-style gray-out box, the gadget version opens the results in a new window. This is an Internet Explorer window with all the chrome. It basically just displays the results in a full browser. This isn’t necessarily a problem, but gadgets are supposed to be cool and flashy with flyouts and interactive content, and a clunky, chromed, browser window kinda defeats the purpose.

One of the output options when developing a W|A widget is to have the result flyout below in a continuation of the query window. This is more what users expect in a desktop gadget. So I developed that version of the widget quickly, and made a gadget using the embed code for this flyout version. I thought this would be the solution to all my problems… but for some reason it wasn’t.

In the PCLarge version, you type your compound, hit enter, and your results flyout of the query window below. Cool, right? Then you go to click the X button to close the flyout, returning your gadget to its native size… but the X button doesn’t work. For some reason, the gadget renders the ‘clickable’ parts of the javascript functionless. So you can’t click the X button and you can’t close the flyout and you can’t return the gadget to its original size. It just stays open. Huh? It’s just javascript in a browser. The only difference is the lack of chrome. I don’t get why the X button isn’t clickable. In fact, nothing is clickable. You can’t click the Submit button, you have to hit the enter key. I just don’t get it, but it works and looks more ‘gadget’ like than the PCSmall version.

In the Mac version, this is not a problem. The X button is fully clickable and you can close the flyout no problem. But you can’t use your mouse to scroll through the output results. Often, the output results will be larger than the flyout, so scroll bars appear on the right and bottom. But you can’t use your mouse and click the scroll bars to navigate the flyout. You must click inside the output flyout and use the arrow keys to scroll down. I just don’t get it. It’s just javascript in a chrome-less browser. But it works and the flyout is closeable and it functions most like a desktop gadget.

So there you have it. A behind-the-scenes look at the development of the Wolfram|Alpha Desktop Gadget. I hope I haven’t bored you completely, and if you’ve made it this far then maybe you know enough about programming to tell me how to fix these problems! So everything’s in one place, you can download the desktop gadgets here. I know I could have just added all this as an update to the original post, but I wanted to make sure this hit your feed readers.

Enjoy!

2 comments

1 ping

  1. gyges

    Added to my site via blogger. Thanks!

  2. Nick

    Amazing. Thanks so much for the desktop widget. Truly essential.

  1. Een W|A widget voor scheikundigen « Scheikundejongens

    [...] Nu ook te gebruiken als Desktop Gadget voor Windows, of Dashboard widget voor Mac OS X: Klik.> Aldo | 11 feb 11 | Tags: Chemistry Blog, Mathematica, Wikipedia, Wolfram|Alpha | Categorie: [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Powered by sweet Captcha