Ubuntu Tips n Tricks

Saturday, October 17, 2009

Firefox Logo Painted Using Firefox Browser

Posted: 17 Oct 2009 12:50 AM PDT

One of the main features of Firefox 3.7 is its advanced support for multi-touch enabled devices. During the MozCamp and JRSL event in Chile, Marcio Galli painted the Firefox logo using a development build of Firefox, a touch screen laptop, a simple drawing application, and his finger. Here's the video of demo:

The drawing application as shown on the video was written in JavaScript utilizing less than 70 lines of code. To illustrate how simple the app is, here are most of the codes used:

var canvasctx = null;

function initCanvas(ww,hh)
{
gCanvas = document.getElementById("canvas");
var w = ww;
var h = hh;
gCanvas.style.width = w + "px";
gCanvas.style.height = h + "px";
gCanvas.width = w;
gCanvas.height = h;
canvasctx = gCanvas.getContext("2d");
canvasctx.clearRect(0, 0, w, h);
// imageData = gCtx.getImageData( 0,0,320,240);
}

var canvasctx = null;

function load() {

initCanvas(1200,800);

document.multitouchData=true;

}

gColor="0,0,0";

function color(rr,gg,bb) {
gColor = rr+","+gg+","+bb;
}

function listenTo(event) {
canvasctx.fillStyle='rgba('+gColor+',.1)';
canvasctx.beginPath();
canvasctx.arc(event.clientX, event.clientY, 20, 0, Math.PI*2, 1);
canvasctx.fill();
canvasctx.closePath();
}

document.addEventListener("MozTouchMove", listenTo, false);

If you own a touch-screen computer or laptop running Linux, Windows, or Mac, you can test the drawing application HERE. But first you have to download and install the development version of Firefox 3.7, which you can get HERE.

The stable version of Firefox 3.7 that will have full multi-touch support might be released in May-June 2010. It will utilize Gecko 1.9.3 engine.