degrunting the work: make throwaway tools for exact positioning

Sometimes UI is gruntwork. Photoshop/fireworks slice and dice is often a bit tedious.

Recently at work I had to recreate these pages with little "VH1 style help balloons" over screenshots. It was easy enough to ripe out the individual balloons, but I had lost the positioning of them, the x- and y- offsets.

So I coulda just guesstimated the X and the Y, or try to read it off the big image (more difficult because the sliced out balloons had arbitrary amounts of whitespace), but I came up with a better solution:

$("#backdrop").mousemove(
function(e){
var x1 = Math.round(e.pageX - $("#backdrop").offset().left);
var y1 = Math.round(e.pageY - $("#backdrop").offset().top);
$(".mover").css("top",y1+"px");
$(".mover").css("left",x1+"px");
ccdebug("["+x1+","+y1+"]");
}
);


I made a system where the "next balloon to place" had a class of "mover". I then waved my mouse around the backdrop 'til the balloon was where it should be, and I read the X and Y coordinate from the console (the ccdebug) and entered it into the css (well, the javascript actually) of the page. Save, reload, repeat! Much easier. The "mousemove()" function event model tends to think in page values, so I had to subtract the left and top of the backdrop div.

I've used this technique before... for example to draw an inviation to the Game Kart Jam I was hosting, I made a simple drawing program, then drew the letters by hand, capturing the coordinates to standard out. Then for the final version it uses that raw data to show my message. When I use this technique I can often have the system out show data in the array initializer format, or sometimes even in program code, which gives the charming sensation of writing a program that is then writing more of itself.