Go Go "Prototyped" Gadget: BioHeatMap v1.0

The completion of the BioHeatMap Gadget outfitted for WattDepot sparked one last test before totally labeling it as "finished." This was the cross-browser test to make sure that it did work properly in other browsers. So far, much of the work has been done in the latest version of IE, v8. This is sort of a contradictory action due to my past work in WattDepot-Apps. Much of the work was done through Safari and Firefox. However, since this was my first time coding for a Google Gadget, I felt a little more inclined to attach "training-wheels" to the whole process and start with Google Gadget Editor. But to my dismay, Google Gadget Editor does not load properly running Mac OS X Snow Leopard, on Safari 4.0.5 and Firefox 3.5.9. So I hoped on over to my Boot Camp'd Windows 7, and in IE and Firefox, the Google Gadget Editor worked, so I ended up doing much of my work there.

When it came time to view the BioHeatMap in Safari and Firefox, the gadget wasn't resizing it's height properly, and it seemed as though it stayed at it's default height of 200 pixels at all times. Here's a screenshot of what the gadget looked like w/o resizing:

This was a complete surprise to me since it resized perfectly in IE. I spent a good portion of my weekend trying to figure out how/why it wasn't resizing. Of course, the method that's supposed to do the auto-resizing is "gadgets.window.adjustHeight();" The first thing that I checked was that it was being called properly, which in fact it was... I scoured the Gadget Help Group to see if any other people had problems with the adjusting the height. But what I found was references to Google's deprecated method "_IG_AdjustIFrame();" which did not help. I tried replacing "gadgets.window.adjustHeight()" with "_IG_AdjustIFrame()", manually adjusting the height with window.innerHeight/window.outerHeight, nothing I did seemed to remedy the situation.

Looking at other Google Visualization Gadgets that used "gadgets.window.adjustHeight()" those gadgets resized perfectly. So it got me wondering, what's different about the BioHeatMap than other Google Visualizations. While sifting through the code I remembered that the BioHeatMap wasn't a visualization made by Google, so it had to use the Prototype library, an external open source JavaScript framework, to load the BioHeatMap. The "prototype" gave me another keyword to use to search for a solution.

Finally, I came across an existing issue in another Google Hosting Project. The issue found here: http://code.google.com/p/opensocial-resources/issues/detail?id=104 described exactly what I've been looking for. So turns out, there wasn't anything wrong with the way I was calling "gadgets.window.adjustHeight()", but the actual Prototype library itself and how it interferes with adjustHeight. The actual specifics of the problem can also be explained in the issue. About half a days worth of working out this problem and searching for a solution can be summed up into 3 lines of code...

Along with the auto resizing, I also implemented onboard time and date pickers for the BioHeatMap that is placed directly on the gadget itself without using the Gadget's Edit Settings menu. It was a real pain in the butt to code these things since all the HTML markup had to be manually coded and set. But nonetheless, I like how it turned out:

(Above is a picture of the last 24 Hours of real data from Prof. Johnson's house in Kailua, which features a Time Picker)

(Above is a picture of the last 14 Days of real data from Prof. Johnson's house in Kailua, which features a Date and Time Picker)

(Above is a BioHeatMap of multiple sources of UH's own Saunders Hall, displaying Kendyll's implemented multi-source capability)

Overall, I'm happy with the results. Creating a Google Gadget was a neat experience in that the output can be readily shown and easily distributed across many individuals just by linking to an XML document. However, the actual coding of the gadget itself was a little gruesome. Perhaps I've been spoiled by Eclipse and other IDE's, since I was mostly bounded to Notepad for this gadget. But now, instead of looking at lines on a chart, or numbers in a table, we can look at colorful blocks on simulated or live energy immediately showing trends and times of less and deep usage of energy.

The Google Hosting for all the WattDepot Google Gadgets can be found here.