Update to Label Sphere

I've finally had some free time to work on the Label Sphere. The new version should correctly color the labels according to your blog's color scheme on Chrome, Firefox, and IE 8. The new version has not been added to the Blogger gallery yet, but when it does get added I will post an update. To use the new version, add a new gadget to your blog, select "Add your own" and use the following URL

http://alexdioso.github.com/LabelSphere/LabelSphere.xml

I've also released the gadget under the GPL here

https://github.com/alexdioso/LabelSphere

Label Sphere v2

A reader pointed out that my Label Sphere wasn't working as advertised. I took a look at both our blogs and they both looked fine, then I realized it must be a browser issue. I looked again with Firefox and sure enough the labels were all stacked on each other at the bottom of the gadget. I made the mistake of only testing in one browser (Google Chrome).

The issue with Firefox was that the label container was collapsing, then JavaScript got a very small height for the container which resulted in a very small sphere. To keep the container from collapsing I added the following to the style of the container (as stated in the link):

overflow: hidden;
width: 100%;


For the sake of completeness I checked the Label Sphere using IE8 on my gf's computer (the only IE I can get on Arch Linux is IE6 and I've decided I don't want to support IE6) and sure enough IE8 had a JavaScript error about "Object doesn't support this property or method". This error occurred while trying to set the a:link and a:visited colors to the current blogs theme. IE8 doesn't support setting :visited in JavaScript. It's also been documented that IE7 needs both :visited and :link (eg a:link:visited) but I'm not sure if that's related. A simple try around the :link and :visited lines with an empty catch worked around this problem. The only downside is that a blog's visitors using IE8 won't see the blog's link and visited color scheme in the Label Sphere.

One other thing I noticed is that the Label Sphere moved smoothly and quickly in Google Chrome, probably because of their V8 JavaScript Engine. Firefox and IE were slower and stuttered a little.

So for anyone using IE6 (or any other outdated browser) it's time you upgrade! And if you aren't using Google Chrome you should give it a try.

Global Temperature Change Map

My first project with Google App Engine was a Google Map that displayed temperature data for a given date. I used monthly grid data provided by NOAA. With this data the Earth is divided up into 5x5 degree grids for a total of 2592 grids. I wrote a simple Perl script to parse the NOAA data, find the min and max temperatures, generalize each temperature point into a scale of 1 (min) to 9 (max), calculate the latitude and longitude for each corner of the grid, and write a CSV file suitable for upload to the datastore.

For the backend I wrote a Python script that created a kml of the data for the requested date. In the kml, each temperature range is a separate Placemark, and within each Placemark are GPolygons representing the grid data.

The frontend used JavaScript and jQuery to load the kml as a GGeoXml. There was also a play button that steps through all the available dates.

Unfortunately only 1 GPolygon for each Placemark would load. So I re-wrote the Perl script to output encoded polylines instead of latitude, longitude coordinates. I also wrote a Perl modulino (ISC License) to convert a set of coordinates to an encoded polyline string.

The backend was rewritten to output the data in JSON instead of a kml.

The frontend was rewritten to create GPolygons using the encoded polylines.

This time all the polygons were created correctly. The first date I tested was 1880-01 with around 200 temperature grids. With this many grids, the tab running my map consumed over 300MB of memory. Therefore, I didn't even try loading the most recent date, as it probably had over 2000 temperature grids. My conclusion from this project is that only a few polygons can be created on a Google Map. Here is a screenshot of the application. Note that the date range is only from 1880-01 to 1880-11 so the temperature range is quite small.

Label Sphere

My first Google Gadget is at the top of the left column of my blog. I've seen label clouds around and they all used flash so I decided to write one in JavaScript. I figured it would be a good learning experience. This gadget uses JavaScript and jQuery to rotate divs around a single point. Depth is represented by changing the font size and opacity. You can add my gadget to your blogger layout by adding a new gadget and searching for either "Alex Dioso" or "Label Sphere".

I've also updated my .vimrc for use with JavaScript.