in

Firefox Logo Painted Using Firefox Browser

- - 4 comments
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.

4 comments

  1. In order to help HTML5 video to happen on the net, could you use an HTML5 viewer on your blog?
    Have a look at the amazing player: http://www.pcinpact.com/actu/news_multi/53640.htm

    ReplyDelete
  2. I have no need to touch my screens but this is still cool.

    ReplyDelete
  3. Amazing! Especially with so little code achieving something so useful.

    Well done !

    ReplyDelete
  4. Hello,

    This is very cool video. Nice Painted. Wow....

    Thanks for sharing info.

    Regards,
    Mihir
    ask4itsolutions.com

    ReplyDelete