A Better BugMeNot Bookmarklet

BugMeNot is a great little service for bypassing the registration process for websites that really shouldn’t require it (ahem, nytimes.com). The bookmarklet brings up BugMeNot for the current website you’re viewing, and gives you login/password pairs which you can then copy and paste.

But wouldn’t it be better if it automagically filled in the username and password for you? I thought so, so I wrote a few lines of code in the form of a bookmarklet and a JSONP web service to do this.

BugMeNot doesn’t provide an API so I had to do a little screen scraping with Hpricot. They also try to obfuscate the usernames and passwords by shifting the characters by some offset calculated from a “key” then Base64 encoding the string, and prepending 4 characters. Luckily their obfuscation was no match for a single line of Ruby:

def bmn_decode(input, offset)
  # decode base64, strip first 4 chars, convert chars to ints, substract offset, convert back ints back to chars
  input.unpack("m*")[0][4..-1].unpack("C*").map{|c| c – offset }.pack("C*")
end

The bookmarklet makes the request via an injected <script> tag. When it’s callback gets called it finds the most likely input elements for the username and password and fills them in with the result.

The Rails app consists of a single action that makes a request to bugmenot.com for the specified site, extracts and decodes the usernames and passwords, and picks the one with the highest rating. It then returns the result as JSON wrapped in a function callback (i.e. JSONP)

I’m not going to post the location of the live JSONP web service since BugMeNot limits the number of requests you can make, but the code is available on GitHub.

Automagically Wrapping JavaScript Callback Functions

One very nice thing about JavaScript is it’s support for first-class functions and closures. Crockford calls JavaScript “Lisp in C’s Clothing”. I’m no Lisper, but I enjoy I discovering new tricks or applications of functional programming in JavaScript.

I wanted to hook all the browser’s asynchronous JavaScript “entry points” : events, timers, asynchronous XMLHttpRequests, script tags, and “javascript:” URLs. This article deals with the first two, events and timers.

To do this, I figured I could somehow “wrap” all the callback functions passed to setTimeout(), setInterval(), and addEventListener(). By “wrapped” I mean another function that we specify calls the original function, rather than the original function getting called directly. This allows us do whatever we want right before and after calling the original function, including manipulating the arguments and return value, logging to the console, calling other functions, putting it in a try/catch, etc.

Here’s the implementation of “callbackWrap”, the function that does all the work:

function callbackWrap(object, property, argumentIndex, wrapperFactory, extra) {
    var original = object[property];
    object[property] = function() {
        arguments[argumentIndex] = wrapperFactory(arguments[argumentIndex], extra);
        return original.apply(this, arguments);
    }
    return original;
}

To use it, you need function that takes another function as a parameter and returns a wrapped version of that function which does whatever you want it to. In this case it just prints out “whoooaaaaa:” followed by the “extra” parameter:

function logWrapper(func, extra) {
    return function() {
        console.log("whoooaaaaa: " + extra);
        return func.apply(this, arguments);
    }
}

Finally, to actually use this, we call callbackWrap with the object that contains the function we want to wrap, the name of the function property, the index of the callback argument to the function (0 for setTimeout/setInterval, 1 for addEventListener), a wrapper “factory” function, and optionally an extra argument that’s made available (via the closure) to the wrapped function. The extra parameter can be used for any data you need to pass to the wrapper function, or it can be ignored.

Here’s how this would be used on setTimeout, setInterval, and addEventListener on window, Element.prototype and Document.prototype (so it applies to all Elements and Documents):

callbackWrap(window, "setTimeout", 0, logWrapper, "wrapped a window.setTimeout!");
callbackWrap(window, "setInterval", 0, logWrapper, "wrapped a window.setInterval!");
callbackWrap(window, "addEventListener", 1, logWrapper, "wrapped a window.addEventListener!");
callbackWrap(Element.prototype, "addEventListener", 1, logWrapper, "wrapped a Element.addEventListener!");
callbackWrap(Document.prototype, "addEventListener", 1, logWrapper, "wrapped a Document.addEventListener!");

Here’s a live example. (edit: the button example seems to be broken in Firefox)

The first thing callbackWrap does is save the original function (window.setTimeout, for this example) in a local variable, “original”, since we’ll need it later. We then replace the original with a new function. When this new function is called (the new window.setTimeout), we first call the “wrapperMaker” function (“logWrapper” in the example), passing it the callback function, which is the argument at the argumentIndex position, and the optional “extra” argument. That function returns a new function which replaces the original callback argument, before we then call the original function (saved in the local variable “original”) with the same arguments (except the callback is now wrapped).

So really this blog post should have been called “a function that wraps other functions such that all callback functions passed to it are wrapped by yet another function”. There’s two levels of wrapping going on: the original function is wrapped, such that it wraps every callback given to it. If you’re confused I don’t blame you.

Why would I want to do this, you ask? There are a couple scenarios I had in mind, and I’m sure you can think of others.

First, I wanted to catch all uncaught exceptions for a debugging tool I’m working on. Sure, you can assign an error handler to the “onerror” property of the window object, but this only gives you the error name, file name, and line number – I wanted the full exception object to be caught by a try/catch.

Here’s a wrapper that catches all uncaught exceptions and alerts them:

function exceptionWrapper(func, extra) {
    return function() {
        try {
            return func.apply(this, arguments);
        } catch (e) {
            alert(e);
        }
    }
}

Second, in Cappuccino we mimic Cocoa’s concept of a “run loop”, but due to the way browsers work the implementation is a bit different. A consequence of this was that we couldn’t automatically call “[[CPRunLoop currentRunLoop] performSelectors];” at the end of each run loop, which is required for various pieces of Cappuccino. If you’ve ever come across a situation where you perform some action but the UI doesn’t update until you move the mouse, it’s probably because performSelectors isn’t being called. This isn’t common, since Cappuccino encapsulates events, XMLHttpRequests, and now timers with CPEvent, CPURLConnection, and CPTimer, respectively. These Cappuccino classes handle calling performSelectors for you. However, if you wanted to integrate with a third party library or use setTimeout, XMLHttpRequest, etc directly, currently you would need to call performSelectors manually. With this new trick we can call it automagically.

Here’s the wrapper that does exactly that (note the inline Objective-J call to “[[CPRunLoop currentRunLoop] performSelectors]”):

function performSelectorsWrapper(func, extra) {
    return function() {
        var result = func.apply(this, arguments);
        return [[CPRunLoop currentRunLoop] performSelectors];
    }
}

One minor feature I didn’t demonstrate was that callbackWrap returns the original function that it wrapped. If you need the original for any reason you can save it to some other variable.

callbackWrap could use a few improvements. Currently this breaks on cases where you pass a string instead of a function. A simple check for the argument type, and appropriate handling would solve this (either skipping the wrapping, or compiling the the string with a “new Function()” call). But using strings instead of functions is considered poor practice anyway.

Improved Browser Paint Events Bookmarklet

John Resig posted today about a nifty new feature available in Firefox nightlies, browser paint events. He also posted an example script and bookmarklet called TrackPaint. He goes into greater depth in his post, so I won’t bother here.

I wanted something more “real-time” and closer to the Quartz Debug utility included with the Mac OS X developer tools (which essentially provides this feature for all of OS X), so I present my modified bookmarklet and code:

// modified from John Resig’s example: http://ejohn.org/apps/paint/track.js
(function(){
    var container;
    
    window.addEventListener("MozAfterPaint", log, false);
    
    if ( document.body )
        bind();
    else
        window.addEventListener("load", bind, false);
        
    function bind()
    {
        container = document.createElement("div");
        document.body.appendChild(container);
    }

    function log(e)
    {
        window.removeEventListener("MozAfterPaint", log, false);

        var rects = e.clientRects;

        for ( var i = 0; i < rects.length; i++ ) {
            var rect = rects[i];
            var div = document.createElement("div");

            with (div.style) {
                background = "red";
                opacity = "0.1";
                position = "absolute";
                top = rect.top + "px";
                left = rect.left + "px";
                width = (rect.right – rect.left) + "px";
                height = (rect.bottom – rect.top) + "px";
            }

            container.appendChild(div);
        }
        
        window.setTimeout(function() {
            while (container.firstChild)
                container.removeChild(container.firstChild);
            
            window.setTimeout(function() {
                window.addEventListener("MozAfterPaint", log, false);
            }, 0);
        }, 100);
    }
})();

Rather than recording each event and displaying them when you click, this version immediately disables the MozAfterPaint event listener (to avoid the recursion issue), shows the translucent red divs, waits 100 ms, removes the rectangles, and re-enables the MozAfterPaint event listener.

It will miss some events during the 100 ms flash, but overall it seems to work pretty well. You could modify it to re-enable the event listener between adding and removing the divs, but I’m not sure it’s worth the effort.

Command line interpreter and REPL for JSCocoa

A few months ago I started working on a JavaScript to Objective-C bridge. We had already implemented Objective-C in JavaScript, so I figured “why not?”

Well, I never got very far, but thankfully Patrick Geiller apparently had the same idea and actually executed it: He announced JSCocoa today. It looks like it’s a solid bridge, about up to par with PyObjC and RubyCocoa.

While the included GUI interface for trying out JSCocoa is nice, I prefer command line interfaces for my languages, so I ripped out the few lines of code from my original bridge and plugged in JSCocoa.

Code and build instructions on GitHub.

It’s very bare bones at the moment: it will either read one or more file names from the command line arguments, or if no arguments are supplied it will present a no-frills REPL. Obviously line-editing, etc would be one of the next steps, but for now it works nicely with rlwrap.

#import <Foundation/Foundation.h>
#import "JSCocoaController.h"

void JSValuePrint(JSContextRef, JSValueRef, JSValueRef *);

int main (int argc, const char * argv[])
{
    [[NSAutoreleasePool alloc] init];
    id c = [JSCocoaController sharedController];
    JSGlobalContextRef ctx = [c ctx];
    
    if (argc > 1)
    {
        for (int i = 1; i < argc; i++)
            [c evalJSFile:[NSString stringWithFormat:@"%s", argv[i]]];
    }
    else
    {
        while (1)
        {
            char buffer[1024];
            
            printf("js> ");
            
            if (fgets(buffer, 1024, stdin) == NULL)
                exit(0);
            
            JSStringRef script = JSStringCreateWithUTF8CString(buffer);
            JSValueRef exception = NULL;
            
            if (JSCheckScriptSyntax(ctx, script, 0, 0, &exception) && !exception)
            {
                JSValueRef value = JSEvaluateScript(ctx, script, 0, 0, 0, &exception);
                
                if (exception)
                    JSValuePrint(ctx, exception, NULL);
                
                if (value && !JSValueIsUndefined(ctx, value))
                    JSValuePrint(ctx, value, &exception);
            }
            else
            {
                printf("Syntax error\n");
            }
            
            JSStringRelease(script);
        }   
        
    }
}

void JSValuePrint(
                  JSContextRef ctx,
                  JSValueRef value,
                  JSValueRef *exception)
{
    JSStringRef string = JSValueToStringCopy(ctx, value, exception);
    size_t length = JSStringGetLength(string);
    
    char *buffer = malloc(length+1);
    JSStringGetUTF8CString(string, buffer, length+1);
    JSStringRelease(string);
    
    puts(buffer);
    
    free(buffer);
}

Recovering Censored Text Using Photoshop and JavaScript

My friend Andrew recently posted a teaser for a new project he’s working on, but with part of the headline pixelated to obscure what the project actually is. My curiosity got the best of me and I decided to do what any self-respecting geek would do: write a program to figure out what the censored text said.

Ultimately I failed to recover most of the censored text (except “to”), so I had to cheat a little. The following video is the program running on a very similar image I created. This proves it works in ideal conditions, but needs some improvement to work in less than ideal cases.

(and no, as far as I know my friend’s project has nothing to do with eating monkeys)

Applying a filter like Photoshop’s “mosaic” filter obscures the original data, but doesn’t remove it entirely. If we can reconstruct an image with *known* text that looks very similar to original image, then we can be pretty sure the original text is the same as our known text. This is very similar in principle to brute-force cracking a password hash. For a more detailed explanation see this article.

Photoshop was an obvious choice since I needed to recreate the exact same fancy styling as the original image, then apply the exact same mosaic filter. I figured I would have to write a script that tells Photoshop to generate images, then use an external tool to actually compare them to the original.

It turns out that Photoshop CS3 has all the features necessary to pull the whole thing off without any other programs or tools. The most important feature is the JavaScript scripting environment built into Photoshop, which is far more powerful than the AppleScript environment (and a *much* nicer language, in my opinion).

CS3 added two other features that are critical to this task: Smart Filters, and Measurements. Smart Filters lets you edit a layer (namely the text with effects applied) *after* you apply a filter that would have previously require rasterization. This lets us apply the censoring filter to our styled text, and later change the text without having to manually reapply the filter. The “measurements” feature lets you record various statistics about an image or portion of an image: in our case we’ll want the “average gray value” of the “difference” between the original and generated images.

picture-10.png

First we need to prepare the environment. Open the original image in Photoshop, and attempt to replicate the original un-censored text as closely as possible (you need *some* uncensored text as a reference). Place your text layer on top of the original and toggle between normal and “difference” blending modes to see how you close you are. Ideally everything will be black in “difference” mode. It’s very important to precisely match the font, size, spacing, color, effects like drop shadows or outlines, and even the background. If these are off even by a little bit it will throw things off. I ended up having to cheat because I couldn’t match the slick styling of the original text with my lame Photoshop design skills.

Once the text matches and is lined up perfectly, select the layer then choose “Convert for Smart Filters” from the “Filter” menu. Now select the censored portion of the text and apply the same filter used on the original image, again matching it as closely as possible. For the mosaic filter, you can line up the “grid” by adjusting the origin and size of the selection (yeah, it’s a pain).

picture-11.png

Finally, make sure your layer is on top of the original, and the blending mode on your layer is set to “difference”. Double-click the Smart Object layer to open it’s source document, and adjust the variables listed at the top of the JavaScript to match the names and layers. Also, in the menu “Analysis”: “Select Data Points”: “Custom…” make sure only “Gray Value (Mean)” is checked.

Code

Rather than attempting to explain it in detail here, just read the code and comments. Here’s a quick summary:

  1. Start with the first character. Try setting it to each of the possibilities (a through z, and a space), and record the difference score between the original image and generated image. Only look at the first half of the current character (since the second half will be influenced by the *next* character).
  2. Sort the results. Lower scores are better (less different)
  3. Now try each of the top 3 characters along with every possibility for the *next* character. This time record score for the whole width of the current character since we’re checking the next character as well.
  4. Pick the best choice, either the best permutation out of all 81 combinations (3 best * 27 possible), or out of the 3 averages for each best.
  5. Repeat for the next character until done.
// change these parameters based on document names and layer ordering
baseDocName = "base.psd";
baseDocTextLayer = 0;
textDocName = "The easy way to do somethingss12.psb";
textDocTextLayer = 0;

knownString = "The easy way "; // the part of the string that’s already known
missingLength = 20; // number of characters to figure out

method = 3;
debug = false;

function main()
{
    baseDoc = documents[baseDocName];
    textDoc = documents[textDocName];

    // get the top left corner of the text layer in the main doc
    var mainBounds = baseDoc.artLayers[baseDocTextLayer].bounds,
        mainX = mainBounds[0].as("px"),
        mainY = mainBounds[1].as("px");
    
    // possible characters include space and lowercase.
    var possibleCharacters = [" "];
    for (var i = 0; i < 26; i++)
    {
        possibleCharacters.push(String.fromCharCode("a".charCodeAt(0) + i));
        //possibleCharacters.push(String.fromCharCode("A".charCodeAt(0) + i)); // uncomment for uppercase letters
    }

    var fudgeFactor = 3,    // number of top choices to try
        guess = "";         // guessed letters so far

    for (var charNum = 0; charNum < missingLength; charNum++)
    {
        results = [];
    
        // get the beginning and potential end (width of a "M") of the next character
        var w1 = getStringBounds(knownString + guess),
            w2 = getStringBounds(knownString + guess + "M");

        // PASS 1: half the potential width, since we’re not looking at the next character yet

        // half the width of "M"
        setSelection(mainX, mainY, (w1[2].as("px") + w2[2].as("px")) / 2, 15);//w2[3].as("px"));
    
        // get the score for every letter
        for (var i = 0; i < possibleCharacters.length; i++)
        {
            var val = getStringScore(knownString + guess + possibleCharacters[i])
        
            var res = { ch: possibleCharacters[i], v: val };
            results.push(res);
        }

        // sort from best (lowest) to worst score
        results = results.sort(function (a,b) { return a.v – b.v; });
        
        // method 1: too simple, poor results
        if (method == 1)
        {
            guess += results[0].ch;
        }
        else
        {
            // PASS 2: full (potential) width of the current character, testing each of the few top matches and every possible next character
            
            // full width of "M"
            setSelection(mainX, mainY, w2[2].as("px"), 15);//w2[3].as("px"));
        
            var minValue = Number.MAX_VALUE,
                minChar = null,
                minSum = Number.MAX_VALUE,
                minSumChar = null;
            
            // try the few best from the first pass
            for (var i = 0; i < fudgeFactor; i++)
            {
                var sum = 0;
                for (var j = 0; j < possibleCharacters.length; j++)
                {
                    // get the score for the potential best PLUS each possible next character
                    var val = getStringScore(knownString + guess + results[i].ch + possibleCharacters[j])
                
                    sum += val;
                    
                    if (val < minValue)
                    {
                        minValue = val;
                        minChar = results[i].ch;
                    }
                }    
                if (sum < minSum)
                {
                    minSum = sum;
                    minSumChar = results[i].ch;
                }
            }
        
            // if the results aren’t consistent let us know
            if (debug && results[0].ch != minSumChar || minChar != minSumChar)
                alert(minChar + "," + minSumChar + " (" +results[0].ch + "," + results[1].ch+ "," + results[2].ch+ ")");
            
            if (method == 2)
            {
                // method 2: best of all permutations
                guess += minChar;
            }
            else
            {
                // method 3: best average
                guess += minSumChar;
            }
        }
        WaitForRedraw();
    }
}

// measure the gray value mean in the current selection
function getMeasurement()
{
    // delete existing measurements
    app.measurementLog.deleteMeasurements();
    
    // record new measurement
    app.activeDocument = baseDoc;
    app.activeDocument.recordMeasurements();//MeasurementSource.MEASURESELECTION, ["GrayValueMean"]);
    
    // export measurements to a file
    var f = new File ("/tmp/crack-tmp-file.txt");
    app.measurementLog.exportMeasurements(f);//, MeasurementRange.ACTIVEMEASUREMENTS, ["GrayValueMean"]);
    
    // open the file, read, and parse
    f.open();
    var line = f.read();
    var matches = line.match(/[0-9]+(\.[0-9]+)?/);
    if (matches)
    {
        var val = parseFloat(matches[0]);
        return val;
    }
    return null;
}

// sets the value of the test string
function setString(string)
{
    app.activeDocument = textDoc;
    app.activeDocument.artLayers[textDocTextLayer].textItem.contents = string;

    WaitForRedraw();
}

// gets the difference between the original and test strings in the currently selected area
function getStringScore(string)
{
    setString(string);
    
    // save document to propagate changes parent of smart object
    app.activeDocument = textDoc;
    app.activeDocument.save();
    
    // return the average gray value
    return getMeasurement();
}

// get the bounds of the text
function getStringBounds(string)
{
    app.activeDocument = textDoc;
    // set the string of the text document
    setString(string);
    // select top left pixel. change this if it’s not empty
    app.activeDocument.selection.select([[0,0], [0,1], [1,1], [1,0]]);
    // select similar pixels (i.e. everything that’s not text)
    app.activeDocument.selection.similar(1, false);
    // invert selection to get just the text
    app.activeDocument.selection.invert();
    // return the bounds of the resulting selection
    return app.activeDocument.selection.bounds;
}

// sets the base document’s selection to the given rectange
function setSelection(x, y, w, h)
{
    app.activeDocument = baseDoc;
    app.activeDocument.selection.select([[x,y], [x,y+h], [x+w,y+h], [x+w,y]]);
}

// pauses for Photoshop to redraw. taken from reference docs.
function WaitForRedraw()
{
    // return; // uncomment for slight speed boost
    var eventWait = charIDToTypeID("Wait")
    var enumRedrawComplete = charIDToTypeID("RdCm")
    var typeState = charIDToTypeID("Stte")
    var keyState = charIDToTypeID("Stte")
    var desc = new ActionDescriptor()
    desc.putEnumerated(keyState, typeState, enumRedrawComplete)
    executeAction(eventWait, desc, DialogModes.NO)
}

main();

The raw code and sample Photoshop file are available on GitHub.

Issues

This problem is particularly tricky for proportional fonts, since if you get any character wrong and it’s width is different than the actual character, then all subsequent characters will be misaligned, causing more incorrect guesses, compounding the problem even more, and so on. I’m not sure how to deal with this, other than improving the overall matching quality. Ideally we would test every possible combination for the entire string, but that would require 27^n tests, where n is the number of unknown characters. This is obviously not feasible.

With the simplistic method of iterating over each position and trying each possible character, it turned out that almost every single “guess” was for the letters “m” or “w”. This was because for positions where the original was narrower characters, the “m” would “bleed” over into the *next* position, improving the score regardless of how well it actually matched the current character. To get around this, we only look at the difference for the first *half* of the character’s position.

Since looking at the first half of the character removes some valuable information, we then do a second pass using the top several guesses from the first pass, this time looking at the full width of the current character along with each of the possible next characters (27 tests + 3 runs times 27 tests results in 108 tests per character).

Further improvements could definitely be made, but I’ve already spent several hours too many on this.

The current algorithm runs at about 3 characters per minute. The overhead of Photoshop saving the Smart Object document on every individual test case is significant. If this were a special purpose program manipulating images directly it would likely be much faster. The tradeoff, of course, is you have all of Photoshop’s flexibility at your disposal for matching the original document’s font, size, style, spacing, and censoring effects, which is very important. For small amounts of text speed isn’t a problem.

Conclusion

While my original goal of recovering the censored text on my friend’s page was never achieved, the project was a success. It works well on my test image, and I learned about 3 obscure but cool and useful features of Photoshop!

Oh, and *that’s* why ██████████ uses black ink to ██████ their ██████!

YouTube Fullscreen Bookmarklet

I find it incredibly annoying when an embedded YouTube video can’t be made fullscreen, and I have to switch to YouTube.com just to watch it.

So, I wrote this simple little bookmarklet which modifies the embed code for any YouTube videos to allow fullscreen. It could also easily be made into a user script for GreaseMonkey, etc, to perform the modifications automatically.

Bookmarklet

Source:

var os = document.getElementsByTagName("object");
for (var i = 0; i < os.length; i++)
{
    var o = os[i].cloneNode(true);
    o.innerHTML = ‘<param name="allowFullScreen" value="true"></param>’ + o.innerHTML;
    for (var j = 0; j < o.childNodes.length; j++)
    {
        if (o.childNodes[j].name == "movie")
            o.childNodes[j].value += "&fs=1";
        else if (o.childNodes[j].nodeName.toUpperCase() == "EMBED") {
            o.childNodes[j].src += "&fs=1";
            o.childNodes[j].setAttribute("allowfullscreen", "true");
        }
    }
    os[i].parentNode.replaceChild(o, os[i]);
}

Try it out on this page (I’m too lazy to actually make it fullscreen).

Note that currently it doesn’t actually check to make sure it’s a YouTube video that it’s modifying, so it might stomp all over other types of embeds.

ANSI escape sequences in JavaScript (color on the command line!)

Recently I’ve been doing a lot of work in Rhino, Mozilla’s JavaScript interpreter written in Java. While it’s a bit slower than some of the other JavaScript interpreters out there it has the advantage of being able to call Java libraries. This is immensely useful since JavaScript is pretty bare-bones in terms of built-in libraries.

Anyway, I had a simple logging system with the usual “error”, “warn”, “info”, etc levels, which was great except the important errors and warnings would get lost in the hundreds of info and debug messages. I didn’t know much about ANSI escape codes except that it allows for neat things like coloring text in your terminal, so I wrote a little code to help with this:

ANSI_ESC            = String.fromCharCode(0x1B);
ANSI_CSI            = ANSI_ESC + ‘[';
ANSI_TEXT_PROP      = 'm';
ANSI_RESET          = '0';
ANSI_BOLD           = '1';
ANSI_FAINT          = '2'; // unsupported?
ANSI_NORMAL         = '22';
ANSI_ITALIC         = '3'; // unsupported?
ANSI_UNDER          = '4';
ANSI_UNDER_DBL      = '21'; // unsupported?
ANSI_UNDER_OFF      = '24';
ANSI_BLINK          = '5';
ANSI_BLINK_FAST     = '6'; // unsupported?
ANSI_BLINK_OFF      = '25';
ANSI_REVERSE        = '7';
ANSI_POSITIVE       = '27';
ANSI_CONCEAL        = '8';
ANSI_REVEAL         = '28';
ANSI_FG             = '3';
ANSI_BG             = '4';
ANSI_FG_INTENSE     = '9';
ANSI_BG_INTENSE     = '10';
ANSI_BLACK          = '0';
ANSI_RED            = '1';
ANSI_GREEN          = '2';
ANSI_YELLOW         = '3';
ANSI_BLUE           = '4';
ANSI_MAGENTA        = '5';
ANSI_CYAN           = '6';
ANSI_WHITE          = '7';

ANSIControlCode = function(code, parameters)
{
    if (parameters == undefined)
        parameters = "";
    else if (typeof(parameters) == 'object' && (parameters instanceof Array))
        parameters = parameters.join(';');
    return ANSI_CSI + String(parameters) + String(code);
}

// simple text helpers:

ANSITextApplyProperties = function(string, properties)
{
    return ANSIControlCode(ANSI_TEXT_PROP, properties) + String(string) + ANSIControlCode(ANSI_TEXT_PROP);
}

var colorCodeMap = {
    "black"   : ANSI_BLACK,
    "red"     : ANSI_RED,
    "green"   : ANSI_GREEN,
    "yellow"  : ANSI_YELLOW,
    "blue"    : ANSI_BLUE,
    "magenta" : ANSI_MAGENTA,
    "cyan"    : ANSI_CYAN,
    "white"   : ANSI_WHITE
}

ANSITextColorize = function(string, color)
{
    if (colorCodeMap[color] == undefined)
        return string;
    return ANSITextApplyProperties(string, ANSI_FG + colorCodeMap[color]);
}

Download here: ansi_sequences.js

ANSIControlCode(code, parameters) takes in a control code as a string (a single alphabetic character, see above Wikipedia article), and zero or more parameters, either as a single string/number or array of strings/numbers (again, see above Wikipedia article). It returns a string with the control sequence.

There are also two helpers functions for setting text properties:

ANSITextApplyProperties(string, properties) wraps “string” in a pair of control sequences. First the sequence to set text properties (“m” along with the given parameters), second the reset text properties sequence (“m” with no parameters). It returns the wrapped string. This lets you easily apply a number of properties to a string.

ANSITextColorize(string, color) simply sets the foreground color of a string, and returns the wrapped string.

Here are examples of the helper functions:

Note that color control codes must be combined with either ANSI_FG or ANSI_BG.

Also note that this is completely useless in the browser. Only shells can understand these control codes, so use it in Rhino and other command line JavaScript interpreters (while this code is written in JavaScript, the same concepts be applied to any other programming language that can run in a shell: C, Python, Ruby, etc).

Multitouch JavaScript "Virtual Light Table" on iPhone v2.0

Now that iPhone 2.0 is out I started playing around with some of the new web features, and soon found that I had created the prototypical virtual light table that’s an essential demo for any new multitouch technology.

It’s about 100 lines of JavaScript. It grabs the 10 latest photos from Flickr’s “interesting photos” API and randomly places them on the screen for you to play with:

This is great if you have an iPhone with the 2.0 software, but desktop browsers should get some multitouch love too. So I started writing a little bridge that fakes multitouch events in desktop browsers. It’s far from complete, but it’s just good enough to get the virtual light table demo working.

So go ahead and load it up in the new iPhone MobileSafari or Safari 3.1+ / WebKit nightly (requires CSS transforms):

http://tlrobinson.net/iphone/lighttable/

In desktop browsers it uses the previous clicked location as a second “touch”, so you can click a photo then click and drag another spot on the photo to resize and rotate (notice the yellow dot).

For a good overview of touch events and gestures, check out this SitePen blog post and Apple’s documentation.

Here’s the source for the fake multitouch bridge:

http://tlrobinson.net/iphone/lighttable/multitouch-fake.js.

Clearly the reverse of this bridge would be even more useful, since iPhone only sends mouse events under specific conditions. The mousedown, mouseup, and mousemove events could be emulated using the touch equivalents to make certain web apps work on the iPhone without much additional work. Of course you would need to either cancel the default actions (i.e. panning and zooming) on touch events, or have some way to manage the interactions between them.