One thing I’ve added to my own desktop, is the Zen poem posted daily on the website DailyZen.com. It took a little work to be able to do it, so I thought I’d post my script. This is based  on the script to fetch a quote from Encarta as posted on Flickr by barm, so credit goes to him for getting me started.

This can all be pasted into GeekTool itself, or you can create a separate shell script (eg. dailyzen.sh), which is what I’ve done, for easy editing. It’s a short one-liner, but there’s a lot going on:

curl -s http://www.dailyzen.com/ | sed -n "/<\!--Add Quote for correct day-->/,/<\/TD>/p"|sed -e "s/<[^>]*>//g" |strings|fold -sw60

curl of course is the Unix utility to fetch an URL, and grabs the contents of the front page of http://www.dailyzen.com/. sed then extracts the portion between the comment and the closing </TD> tag, which contains the poem. The second sed command strips all HTML tags. I used strings to reliably get rid of some stray carriage returns, and finally fold wraps the poem to a nice width without breaking words, as GeekTool would do otherwise.

The script is straightforward to add to GeekTool, it’s simply a Shell command (either pasted in, or calling the dailyzen.sh file). I set the refresh time to 21600; 6 hours is enough to make sure it’s updated in the morning. I used Book Antiqua Italic 20pt for the text, white with 20% opacity.

And here’s the end result:

My GeekTool Desktop, with DailyZen quote

The first step of course was to build a simple test environment: a page with several divs with ids such as “box1” “box2”  etc., JQuery and JEditable called, and JEditable configured to talk to a simple PHP script that simply echoes its input:

< ?php echo $_REQUEST["value"]; ?>

That was all straightforward enough, and replicated the basics of the client’s environment. The real trouble was the tab key functionality. Picking up a tab keypress is easy enough; with basic Javascript, or in JQuery:

$('div.editbox').bind('keydown', function(evt) {
        if(evt.keyCode==9) {
		//code
	}});

There were two primary problems:

1. Moving the focus out of the existing field being edited.
2. Activating the next editable field.

#1 took a fair amount of trial and error for me. JEditable creates a new input field inside the container element, and none of the JQuery selectors I was trying to use: children, sibling, etc. were working for me. Finally, I managed to get it this way:

$(this).find("input").blur();

I’ll be the first to admit that’s a little bit brute-force. If anyone has a more elegant way of selecting the created input in a JEditable element, please let me know!

Problem #2 evaded solution. I looked inside the JEditable code, and it is activated by an event; there was no function I could call directly, that I could see anyway, that would activate the next element. It took putting the problem aside for a few hours before it came to me.

JQuery nicely lets you create mouse events and other events. So the solution then became fairly obvious:

$(nextBox).dblclick();

Where nextBox is the next box in line. Note: JEditable normally takes a single click, so the “click()” function would be sufficient here. In this case, it’s configured for double-clicks.

It worked perfectly. Tab in one field would blur the current field, then activate the next field. Here’s the basic code, all together:

    $('div.editbox').bind('keydown', function(evt) {
        if(evt.keyCode==9) {
            $(this).find("input").blur();
            var nextBox='';
             if ($("div.editbox").index(this) == ($("div.editbox").length-1)) {
                    nextBox=$("div.editbox:first");         //last box, go to first
                } else {
                    nextBox=$(this).next("div.editbox");    //Next box in line
                }
            $(nextBox).dblclick();  //Go to assigned next box
            return false;           //Suppress normal tab
        };
    });

I’ve omitted some very straightforward code to detect if shift is held down, and go up and wrap around to the bottom. But this should be sufficient to get anyone started with adding tab key functionality to their JEditable based forms.