CAVEAT: This is a trivial hack, which was never designed for a production release. I’m writing up this blog post on how it works because (much to my surprise!) some screenshots of my little hack generated a bit of interest. So, I’ll provide some background, which hopefully will be either helpful or interesting to someone. Also note, that while I’m a bit of a minor nerd, I’m not a software engineer by any stretch of the imagination (I primarily do business / strategy / management-y type stuff), AND this was pretty much my first foray in Javascript, so I’m sure there are horrible things in my code that will make real developers cringe. Sorry!

To begin, follow one of the existing tutorials out there for setting up your environment, learning the basic concepts, generating the project and first scene, etc. etc. I’m just going to show here what I did from when I actually started coding.

First, we’ll need some minor code to push our main “scene” to the stage.

/* in /app/assistants/state-assistant.js */
StageAssistant.prototype.setup = function() {
    this.controller.pushScene('main');
}

Let’s give the scene some content:

(nearby)

		This is a quick hack to enable "nearby" functionality on Flickr Mobile.
		When Palm supports the W3C Geolocation API natively in the web browser
		we won't need this application. :-)
	

Determining location...

Note I’m not really bothering with too much of the special Mojo chrome here, but that’s fine, right? Yay for web standards! Let’s perhaps add some CSS to prettify stuff:

/* in /stylesheets/main.css */
body {
  background: #fff;
}
h1 {
  font-size: 18px;
}
#gpsSpinner {
  float: right;
  margin-right: 10px;
  margin-top: 5px;
}

Here’s what that scene will look like when it’s first loaded:

Now we get to the meat of the application, configuring the “assistant” for the scene. Which will be in /app/assistants/main-assistant.js for those following along at home.

First, in the setup method, I’m going to initialize the mojo widget for a spinner (mojo widgets are basically chrome that have special properties and methods built in.) Next, I’ll fire off a services request to the location manager to get info from the GPS, and bind it to callback handlers.

MainAssistant.prototype.setup = function() {
/* this function is for setup tasks that have to happen when the scene is first created */

  // setup spinner widget
  this.gpsSpinnerModel = {
       spinning: true
  }
  this.controller.setupWidget('gpsSpinner',
       this.attributes = { spinnerSize: 'small' },
       this.gpsSpinnerModel
  );

  // get location from GPS
  this.controller.serviceRequest('palm://com.palm.location', {
       method:"getCurrentPosition",
       parameters:{},
       onSuccess: this.locationSuccess.bind(this),
       onFailure: this.locationFailure.bind(this)
  });
}

The services request is an asynchronous call, so I have to create a function to catch the response when it comes back. Here I define that method, which reads the response and updates my interface accordingly.

MainAssistant.prototype.locationSuccess = function(response) {
/* this is the callback method for when we successfully get the location back */

    if (response.errorCode != 0) {
        $('status_zzz').innerHTML = "BONK. Something went wrong! error code: " + response.errorCode;
    } else {
        var gLat = response.latitude;
        var gLong = response.longitude;
        var coords = gLat + "," + gLong;

        $('status_zzz').innerHTML = "Sweet! Your location is: " + coords + "";
        $('gpsSpinner').mojo.stop(); //spinnaz no mo!

        this.handleGo(coords);
    }
}

And finally, here’s my method (separated out for code simplicity) that does something with the final coordinates. If I was being fancy, I would make some calls to the Flickr API and retrieve information about photos and build an interface, but it just so happens Flickr already has a nice webkit optimized webpage to display that information, so we’ll just use the browser:

MainAssistant.prototype.handleGo = function(coords) {
    var url_target = 'http://m.flickr.com/nearby/' + coords;

    /* In the future we could use an embedded webview to render this page,
  	But for now, opening a web page in the browser works fine and dandy! */
    this.controller.serviceRequest('palm://com.palm.applicationManager', {
           method: 'open',
           parameters: {
               id: 'com.palm.app.browser',
               params: { target: url_target }
           }
    });
}

(Note, we could have also done this in an embedded webview, but I figured it was more polite to open a “real” browser window so the user could use their bookmarks etc.)

Done and done!

I was pretty impressed with how easy it was to get running. Since this was a “trivially simple” example, I didn’t really get into the guts of what Mojo can do. There’s lots of neat stuff with system notifications, background applications, cloud services and other things that if you’re serious about I’d suggest checking out something like Mitch Allen’s book.

For existing Mojo developers looking for something to build an application about, I’d highly suggest looking into the Flickr API. It has options to return results in JSON which is super handy to use in Javascript, and there are plenty of utility libraries out there. (You can find all sorts of stuff from our sexy-smart enginerds on Flickr’s devblog.)

UPDATE: You can now get the source for this on github.

• Added SCROLL_BOX and SHOW_LANG style variables to definitions, to make it easier for people to decide whether they want the language prefix header and/or fancy scroll box options (I didn’t).
• Cut out about 500 lines to redundant code, reducing the size of the program source by about two thirds(!).
• Added language support for Apache log files, Bash, C#, Lisp, Objective-C, and VB.NET. This depends on you installing a more recent version of GeSHi with all of the language support files (the author of iG:SyntaxHiliter bundles a version without the files for languages he doesnt support).
• In addition, the new structure should make it trivial to implement any other language supported in GeSHi with two lines of code. I didn’t bother to add any others myself, since I’m lazy. If you look at the source you’ll be able to figure out how to do it.

Not bad for an hours worth of work in a language I’m not familiar with.

You can download a copy here: syntax_mhr.bz2

It’s not polished, and doesn’t come with instructions, so you may wish to refer to the original version if you need handholding, and then just substitute in the replacement files. Remember, you must install a copy of GeSHi for this to work.

As per the licensing on the original, this is released under a Creative Commons Attribution-ShareAlike-2.0 license.

This should be considered a “hack”. I may (or may not) clean up the code further and add more features in the future, but I do not plan on making this an official fork of the plugin, nor offering customer support. Amit is more than welcome to backport these changes into the official plugin under the terms of the license, and I encourage him to do so.

#!/usr/bin/perl
use LWP::Simple;
$_ = get('http://grouphug.us/random/');
m| (.*?)

|ism;
$_ = $1;
s/< ([^>]+)>//ig;
s/^s*//;
s/s*$//;
print "$_n";

Warning: reading people’s confessions is addictive, and occasionally NWS.

It’s a bit strange being the sole developer for a project I don’t even use myself, that runs on an operating system I no longer use myself. However, quite a few other people do seem to use it, based on the emails I receive, so I try to keep it updated when I can.

Who wants to bother to open a web browser for results though? So I made a quick perl hack to grab it from command line, example usage:

$ gcalc 2+4/6*8
2 + ((4 / 6) * 8) = 7.33333333
$ gcalc "12 * 12oz. in gallons"
12 * 12 US fluid ounces = 1.12500 US gallons
$ gcalc the speed of light in km/fortnight
the speed of light = 3.62628957 x 10^(11) kilometers / fortnight
$ gcalc the answer to life, the universe, and everything
the answer to life, the universe, and everything = 42

Download the perl script (916 bytes), share and enjoy. I find it handy to have access to this in IRC, so there is also a version as a xchat plugin.

Yes, I know that you’re supposed to use the Google XML-API rather than screen-scraping, unfortunately the API does not return any Calculator results, so scraping appears to be the only way for now.

[kaffe:~/screenshots] matthew% ls
Explorer-001.png Explorer-003.png Explorer-005.png
Explorer-002.png Explorer-004.png Explorer-006.png
[kaffe:~/screenshots] matthew% regexrename 's/Explorer-00(.)/AnnotateDemo_1/' *.png
[kaffe:~/screenshots] matthew% ls
AnnotateDemo_1.png AnnotateDemo_3.png AnnotateDemo_5.png
AnnotateDemo_2.png AnnotateDemo_4.png AnnotateDemo_6.png

(For those of you that are afraid of the command line, this GUI program for OSX seems to have no shortage of good reviews.)

CommentFinder will take a website and reveal with a visible graphic the inline comments the author left in the code, much as if it would look if you were editing the page in Dreamweaver. If you mouseover the icon, you'll get a tooltip telling you what the text of the comment was. You can find all sorts of interesting things this way (people tend to leave themselves little notes) , without the hassle of browsing source code.

check it out and let me know what you think by posting a comment here.