From Processing to Google Gadget

Somewhere in my various informational cubes on this page you should see an embedded Processing applications that was turned into a Google Gadgets. Now you can do the same - and it's easy! All you need is a place to host your .jar file.

1. Get .jar and .html files from processing

First, open your processing sketch. Make sure the canvas is sized to fit a gadget (not too big!) and click the export button. This should create a folder with your classes, loading.gif, a .jar and a .html file. All you need are the .jar and the .html files.

2. Upload .jar

Upload the .jar to a website and open up the .html file in a text editor. You'll need part of that code later. If you just click the .html file you'll open it in a web browser, in which case you'll need to do a "View->Page Source" to see the actual code.

3. Create the .xml

The .xml file is the heart of the gadget. Have a look at my file here:
http://portfolio.manojalpa.net/rainbowshards.xml.

Note that it doesn't take you to the gadget. It just takes you to a rather bland page with some text on it. That's because you can't directly link to a gadget. Gadgets need to be embedded and processed by google (Someone please tell me if I'm wrong).

Here is the basic code, which you can also find at Google's tutorial.

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Processing App Name Here">
<Require feature="wave" />
</ModulePrefs>
<Content type="html">
<![CDATA[
COPY+PASTE HERE
]]>
</Content>
</Module>

Copy and paste the code block above into a blank .xml file. If you don't have a server or can't make an .xml file, google has one for you.

4. Copy Paste Processing code into Gadget code

Now, open up the .html file that processing made. You'll see some text that says <!--[if IE]>-->. Copy from that tag (the first one; it appears twice) to the SECOND instance of the <!--<![endif]--> tag. Now paste it where it says "COPY+PASTE HERE" in the .xml file. Save!

Aside: If you're unconcerned about browser compatibility or just want to see the gadget work for personal use, try only using the block of html code for your specific browser. You'll see that the .html code is divided in half - one within the "if IE" (for Internet Explorer) and one outside of it. If you're using Internet Explorer, only take the code that appears between both sets of <!--[if IE]>--> and <!--<![endif]-->. If you're using any other browser, delete that code and keep the rest.

IMPORTANT: To make sure your gadget doesn't fail out on you after a few hours (like mine did the first time), search the code for anything that references your .jar file and make sure it contains the complete url. By default, Processing will only make the url local (ie, it will just say "RainbowShards.jar" instead of "http://portfolio.manojalpa.net/RainbowShards.jar"). Change all of these to be absolute links.

5. Embed your Gadget!

Blogger, Google Wave, and several other sites let you upload your own Gadget via URL. If you're hosting the .xml file yourself, use that URL. If you went through google, click on "Publish" and it will give you a link (after a few warnings).

Note that this is an incredibly basic implementation and seems to still have some trouble in Internet Explorer. I'll continue working on fixes but at the very least this should give you a good place to start and a cool glimpse at what you can do.

Update!

Updated the "Copy+Paste" section to correct for a caching issue.