Today is one day before my one-year anniversary at the Mars Space Flight Facility, and also one day after I finally got something else launched that the public might have a remote interest in.

Yesterday we sent out the official press release about our Suggest an Image project.

In a nutshell, for now you can go to the site and download a KML file to load into Google Earth 5. This file shows you where the Mars Odyssey spacecraft is going to be orbiting over the next week, and lets you suggest areas on the planet for the mission planners at my office to image with the THEMIS camera. If you've got the Google Earth browser plugin installed, you can also try this out without ever leaving your browser.

If/when the spacecraft takes the picture, we email it to you, and it looks something like this.

Eventually (i.e. when the Google guys get around to it) this will be a feature in the Mars Gallery in Google Earth itself.

For those of you interested in how this is done with Drupal, I did a writeup here.

Demonstrating the application at JPL's Open House earlier this month:

[WIFE] "I don't like this habit he's picked up recently of swatting and hitting everything."

[ME] "Honey, he's just learning to keep his pimp hand strong."

Dark Roasted Blend presents a pictorial look at the wide world of beer, including...

Beef flavored beer for pomeranians, beer that tastes like banana bread,

and beer made from bad milk. Yum!

Though we're renting at the moment, it would be nice to eventually be homeowners again. Though at the rate the economy is going right now, we may be owning something along the lines of a van down by the river.

Homes out here in the godforsaken desert are still listed for entirely unreasonably high prices, and frankly, are mostly crap: 1950's - 1970's concrete block ranches (with no insulation) or more recent stick construction already rotting and foreclosed in distant suburbs after only a few years.

So I started daydreaming about to build something cheap and energy efficient but still cool. I also wanted to play with the latest version of SketchUp, a product Google bought a few years ago, and have brought a number of cool improvements to.

So I give you, my container house sketch, made from six steel shipping containers, three 45' and three 40', with green roofing (as in plants, not shingles).

I really dig how 'sketchy' these drawings can be made by tweaking the rendering settings.

Source: Flickr

Source: Flickr

Soren hams it up on the video monitor.

You have a Glassfish server.

You are a Drupal developer.

You want to run Drupal in Glassfish. More importantly, you want to have it use clean urls because without that capability, all of your urls look like this: /index.php?foo/bar/baz. Which sucks, of course.

Let's set aside for the moment the desirability of running PHP in a Java application container for the moment¹, and jump right to the meat of this geeky post. Here's how I got some of the clean url functionality you'd normally get from Apache's mod_rewrite, or using either mod_rewrite or Lua in ligttpd.

I'm assuming you've already got Glassfish installed, so from there:

1. Get a copy of Quercus, Caucho's Java implementation of PHP 5. I downloaded the version 3.2.1 .war file.
2. Unzip the .war:²
   

   jar -xvf quercus-3.2.1.war

3. Get a copy of Url Rewrite Filter. I used version 3.2.0 (beta), but 2.6 should work also.
   

   > cd quercus-3.2.1
   > wget http://urlrewritefilter.googlecode.com/files/urlrewritefilter-3.2.0-src.zip
   > unzip urlrewritefilter-3.2.0-src.zip

4. Get Drupal. I used the latest 6.x version.:
   

   > cd ../
   > wget http://ftp.drupal.org/files/projects/drupal-6.10.tar.gz
   > tar zxvf drupal-6.10.tar.gz
    
   Copy Drupal files to the quercus docroot
   > cp -r drupal-6.10/* quercus-3.2.1/

5. Configure Url Rewrite Filter. This is where it gets a little sketchy. Drupal comes prepackaged with a .htaccess file, which sets up the mod_rewrite rules for Apache:
   

   # Rewrite current-style URLs of the form 'index.php?q=x'.
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule ^(.*)$ index.php?q=$1 [L,QSA]

   
   Unfortunately, Url Rewrite Filter doesn't support the REQUEST_FILENAME directive (yet). So I've put in some hacks to at least get clean urls working. I don't pretend that this is production-ready, but it gets it working for basic testing. If anyone has input, I'd welcome it. Anyway, in the WEB-INF/web.xml file, the following directives need to be added:
   

   <filter>
     <filter-name>UrlRewriteFilter</filter-name>
     <filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class>
   </filter>
   <filter-mapping>
     <filter-name>UrlRewriteFilter</filter-name>
     <url-pattern>/*</url-pattern>
   </filter-mapping>

   
   This should go before the <servlet></servlet> section.

   Next, create WEB-INF/urlrewrite.xml:
   

   <?xml version="1.0" encoding="utf-8"?>
   <!DOCTYPE urlrewrite
   PUBLIC "-//tuckey.org//DTD UrlRewrite 2.6//EN"
   "http://tuckey.org/res/dtds/urlrewrite2.6.dtd">
   <urlrewrite>
     <rule>
       <note>
         Prevent rewriting of specific files. Definitely not
         the best way to do this.
       </note>
       <from>^/(.*)(css|js|png|jpg|gif)$</from>
       <to>/$1$2</to>
     </rule>
     <rule>
       <note>
         Prevent rewriting of files in the files directory
       </note>
       <from>^/(.*)/files/(.*)$</from>
       <to>/$1/files/$2</to>
     </rule>
     <rule>
       <note>
         Do the Drupaly stuff
       </note>
       <from>^/(.*)$</from>
       <to>/index.php?q=$1</to>
     </rule>
   </urlrewrite>

6. Re-zip your directory back into a .war file to deploy onto the app server:
   

   >jar -cvf quercus-3.2.1.war quercus-3.2.1/*

7. Deploy to Glassfish through the admin console, or from the auto-deploy directory. Note that you should set your context-root to / to run Drupal at the root of the app server.
8. Oh yeah, you'll probably want to connect to a database too, right? In the admin panel, go to Resources > JDBC > Connection Pools and create a new Connection Pool. Let's call it mysqlpool.

   Set Datasource Classname to com.mysql.jdbc.jdbc2.optional.MysqlConnectionPoolDataSource.

   Plug in the following Additional Parameters for your Drupal DB:
   

   password
   user
   databaseName
   portNumber
   serverName

That should be about it.

Mac OS X's Finder features a nifty NeXT throwback - the column view. This lets you browse through a hierarchy of files in a relatively compact space, and still see your path through directory structure.

There are a couple of jQuery plugins in the archive that claim to do this, but none really fit my core needs:

1. The script should be unobtrusive, and let you transform a hierarchy of unordered lists of links (like a Drupal menu) into a column view, without requiring altering the underlying markup.
2. The script shouldn't require a bunch of support files - css, images, etc.
3. The output should work basically like a Finder list view - allow keyboard navigation with arrow keys, show when items have submenus (i.e. differentiate between "folders" and "files").

I think I've achieved two out of three - keyboard navigation doesn't seem to work in Webkit browsers (Safari and Chrome), and I got lazy and used the excellent Livequery plugin rather than rebinding events - but otherwise, it transforms this:

• Create content
  
  • Map
  • Page
  • Story
• Database queries
• Filebrowser
• Recent posts
• My account
• Administer
  
  • Content management
    
    • Categories
    • Comments
    • Content
    • Content types
    • Post settings
    • RSS publishing
    • Signup administration
  • Site building
    
    • Blocks
    • Menus
    • Menu trees
    • Modules
    • Themes
    • URL aliases
    • Views
  • Site configuration
    
    • Administration theme
    • Clean URLs
    • Date and time
    • Devel
    • Error reporting
    • Filebrowser
    • File system
    • Image toolkit
    • Input formats
    • jQuery UI
    • Lightbox2
    • Mars Space Flight Facility Image Tool
    • Performance
    • Planet Viewer
    • Signup
    • SimpleMenu
    • Site information
    • Site maintenance
  • User management
    
    • Access control
    • Access rules
    • Roles
    • Users
    • User settings
  • Logs
    
    • Recent log entries
    • Top 'access denied' errors
    • Top 'page not found' errors
    • Status report
  • Help
• Log out

Into this:

• Create content
  
  • Map
  • Page
  • Story
• Database queries
• Filebrowser
• Recent posts
• My account
• Administer
  
  • Content management
    
    • Categories
    • Comments
    • Content
    • Content types
    • Post settings
    • RSS publishing
    • Signup administration
  • Site building
    
    • Blocks
    • Menus
    • Menu trees
    • Modules
    • Themes
    • URL aliases
    • Views
  • Site configuration
    
    • Administration theme
    • Clean URLs
    • Date and time
    • Devel
    • Error reporting
    • Filebrowser
    • File system
    • Image toolkit
    • Input formats
    • jQuery UI
    • Lightbox2
    • Mars Space Flight Facility Image Tool
    • Performance
    • Planet Viewer
    • Signup
    • SimpleMenu
    • Site information
    • Site maintenance
  • User management
    
    • Access control
    • Access rules
    • Roles
    • Users
    • User settings
  • Logs
    
    • Recent log entries
    • Top 'access denied' errors
    • Top 'page not found' errors
    • Status report
  • Help
• Log out

Usage is pretty basic:

$('#columnized').columnview();

There are no options. The aesthetics and behavior of the menu are determined by overriding the CSS that it provides, and providing a double-click handler.

The script provides few CSS classes that can be overridden to change the way the script is displayed.

/*Top level container - set the width, height and border here*/
.containerobj {
  border: 1px solid #ccc;
  height:5em;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
}
/*Div containing an individual level of the menu hierarchy*/
.containerobj div {
  height:100%;
  overflow-y:scroll;
  overflow-x:hidden;
  float:left;
  min-width:150px;
}
/*Link*/
.containerobj a {
  display:block;
  clear:both;
  white-space:nowrap;
}
.containerobj a canvas{
  padding-left:1em;
}
/*A bottom-level element (the furthest down in the hierarchy) is displayed as a 
link, but could be overriden*/
.containerobj .feature {
  min-width:200px;
}
.containerobj .feature a {
  white-space:normal;
}
/*If you want to display links as folders vs. files, you can apply styles to the
.hasChildMenu class*/
.containerobj .hasChildMenu {
}
.containerobj .active {
  background-color:#3671cf;
  color:#fff;
}
/*You can override the color of the triangles here*/
.containerobj .hasChildMenu .widget{
  color:black;
  float:right;
  text-decoration:none;
  font-size:0.7em;
}

I chose to include these styles in the script rather than as an external file to avoid having to reference external files and worry about their placement on the server.

I should note that instead of including images for the little triangle widgets, I'm using Canvas to draw them, where available. Where it's not (in Internet Explorer), I put in a little ASCII triangle. I have to admit I did this as much to play around with Canvas as anything else.

To actually do something with the menu, I chose to use double-clicks, in keeping with the OS X style UI. Here's a sample handler:

$('#columnize a').livequery('dblclick',function(){
  window.location = $(this).attr('href');
}

When I have time, I'll probably post up a demo page with some other examples of how to style the menu. In the meantime, you can download the script here:

For jQuery 1.2.x (requires Live Query plugin):
jquery.columnview-1.0.1.js [source]
jquery.columnview-1.0.1.min.js [minified]

For jQuery 1.3.x:
jquery.columnview-1.1.1.js [source]
jquery.columnview-1.1.1.min.js [minified]

Note: I have only tested this with jQuery 1.2.6, though I'd expect it to work with 1.3.x as well. Of course, 1.3 includes the live() method, which might be used in place of LiveQuery. For now, I'm focusing on 1.2.6, as this is what I'm running with all of my Drupal installations.

Update: I've updated the script to work with 1.3.x (tested against 1.3.2) and removed the dependency on the Live Query plugin. We're using the live() method now. Downloads added above.

I've tested this script in Safari 3.x and 4.x, Chrome, Firefox 3.x, and IE 6 and 7. As previously noted, keyboard navigation doesn't work yet in Safari and Chrome, and due to silly IE css handling, the width of submenus is fixed (via css) at 200px rather than shrinking to fit the content.

Which video is more impressive?

wingsuit base jumping from Ali on Vimeo.

Ok. Probably the flying squirrel guys. But goddamn, a car covered with 200+ singing fish and lobsters is pretty funny.

So I quit my job in newspapers last May and hauled my then-pregnant wife across the country to work for NASA.

I've been a busy little bee, working on all sorts of projects, mostly involving Drupal and/or jQuery. But sadly, not one has been allowed to see the light of day.

Well, no more. Though it's not officially released, I'm putting my latest work out there - a unified Mars Image Explorer that'll eventually replace a half dozen or more different kludgy sites with a single easy-to-use interface for images from a variety of instruments orbiting Mars.

I'll eventually write up a case study, but it's an interesting mix of technologies:

Drupal powers the page generation, user management and access control, jQuery runs the AJAX interface, Python/web.py manipulates images in real time efficiently, and Java servlets deliver instrument data.

So there. I actually have been doing something.