2010-02-25

WOFF?!

During my recent forays into web development I'm learning about using other fonts. It seems that Web Open Font Format (WOFF) may be the way to incorporate a font on a web page.

Support for WOFF:

Existing TrueType/OpenType fonts can be converted to WOFF with these programs. Arch Linux users can install these programs using my AUR package.

2010-02-19

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.

2010-02-10

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.

2010-02-09

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.