blog.mozbox.org

To content | To menu | To search

Search - canvas

Wednesday 14 April 2010

Mozilla Hackability: Firefox Nintendo Wiimote driver

By Paul Rouget on Wednesday 14 April 2010, 13:18 - shared

You may have heard the saying "If you can't open it, it's not yours." Because Firefox is open in so many flavors of Open, you can really say it's totally yours.

Nintendo Wiimote and Firefox

Mozilla has been designed with extensibility in mind. It means you can enhance, hack, bend, fix Firefox or websites in infinite ways:

  • First, it's a FLOSS project. You can read the source code, modify it, and even roll your own version of Firefox.
  • Additionally, you can write extensions. Extensions and Jetpacks give you a way to do almost anything you want. Change the UI, add new features, fix bugs, or make your life easier as a user.
  • And finally, you can make websites your own. Through Jetpack, GreaseMonkey, and Stylish you can change a website behavior and/or presentation with a few lines of JavaScript and CSS.

Everybody has his or her own reason to hack Firefox. Mine is usually: "just for fun".

So, "just for fun", and to show how far you can go with the extension mechanism, here is a little useless extension I wrote: a Nintendo Wiimote driver for Firefox.
What does it do? It brings Wiimote events to web content. You can change tabs with a "forehand/backhand" tennis drive and, in your web page, make your elements move using Wiimote events (rotation, g-force, position, etc.). Web pages, of course, do not support this API. But, with another extension, such as a Jetpack or Greasemonkey, you can "hack" a website to add support for the Wiimote.

Let's see what it looks like:

(I know, a Flash Video. GandiBlog doesn't allow the video tag. Ogg/Theora version here)

What I do here is:

  • Change tabs by moving the Wiimote quickly
  • Rotate the Firefox logo by rotating the Wiimote
  • Move a canvas "cross" by moving the Wiimote
  • Zoom the Firefox logo by moving the Wiimote closer or farther away from myself
  • Use the Wiimote as a controller with this canvas game, which has been adapted with a Greasemonkey script

Feel free to grab the code and look how a C++ extension works with the Mozilla build system. See the readme for build instructions.

This extension only works for Linux as of now. I probably won't have time to port it to other platforms or to work on it further. But maybe you can :) Feel free to make this code your own and make it work for other OSes.

"Happy hacking" ;)

9 comments

Wednesday 23 September 2009

[Mozilla Camp Europe] The Developer Track & Web-Platform Round-Table

By Paul Rouget on Wednesday 23 September 2009, 15:00 - shared

Brian King and I are in charge of setting up the Developer Track for the Mozilla Camp Europe (see here for more details about the event).

I'm proud to announce that we have at least 14 sessions planned.

Another good news: a Web-platform round-table will take place on Sunday morning.

Here is the current schedule.

Dev Track

  • Firefox.Next, the future of Firefox
  • Firefox in Europe
  • Firebug, web development evolved
  • Thunderbird 3.0 and beyond
  • JetPack
  • Fennec Addons
  • How to Update Extensions for Thunderbird 3
  • SeaMonkey 2 - A show-off
  • KompoZer: enhancing Mozilla Composer
  • Mozilla Weave - integrating services with the browser
  • Fennec
  • Stratified JavaScript - High-level concurrency abstractions for JavaScript
  • Prism, what it means for Mozilla
  • Songbird
  • HTML 5

You can look at the list of sessions (with details and speakers) here.

Web-Platform Round-Table

We want to bring together Web developers (the panel) and Mozilla developers. Vladimir Vukicevic (Firefox developer) is going to lead the discussions. The panel consists of 8 Open Web Gurus, experts in different areas (offline, canvas, geolocation, video, accessibility, ...). And, of course, the audience is welcome to take part in the discussion.

Share with us your real-world uses and success stories of modern web technologies.

What we are looking for (quote from Vladimir):

• We are interested to hear what you think we could be doing better at, in terms of support for current or emerging web standards. Are there existing features in other browsers that you want to take advantage of that we don't support? What about those features is compelling?

• What's missing from the web platform? Where do you want to see us take it? If you could pick one capability to add to the web, what would have the biggest impact on your web app development?

• Of the currently supported standards, what's painful? What would you like to see us focus on improving, whether through enhancement or through change?

If you are looking for more details about the round-table, see here.

2 comments

Wednesday 15 April 2009

Demo - Firefox 3.5: a new experiment with Canvas & Video

By Paul Rouget on Wednesday 15 April 2009, 16:00 - shared

william video

I would like to introduce you my fellow colleague William. He is my new guinea-pig :)

This new demo is really easy to use:

  • you need Firefox 3.1 beta; (you must use Firefox 3.1 beta3: see [1] about Firefox 3.5/3.6 nightlies)
  • click here to launch the demo;
  • click on the play button, select a pattern;
  • enjoy the video element, the canvas element and the Javascript performance :)

If you can't test it, see Tristan's blog post. He did a great screencast of this demo.

How does it work ?

Obviously, I use the <video/> tag. But what you see is not the video element (display: none;), but a <canvas/> tag. All the patterns you see on the top right are regular <img/>, <video/> and <canvas/> elements. The play/pause button is a <svg/> element (position: absolute;) on the top of the main <canvas/> element.

A canvas element provides a method named drawImage which let you inject the content of a DOM element in the canvas (like a screenshot). It works with three kinds of elements: <img/>, <canvas/> and <video/>.

When you click on the <svg/> button, the Javascript code launches the main video. Then, the main javascript loop is executed each 10 milliseconds.

Here are key things that occur during the main loop:

  • first, the content of the video is injected in the main canvas. That's why the canvas element looks like a video element;
  • second, the position of the 2 brighter areas of the canvas are computed (you have access to all pixels values);
  • third, the required transformation is computed (rotation, scale, translation);
  • fourth, the content of the selected pattern is injected in the main canvas following the transformation.

A little drawing:

DCI

Firefox 3.5 is a major release for web developers. See new features here: https://developer.mozilla.org/En/Fi....

Web developers, let's get creative!

Notes

[1] This demo is designed for Firefox 3.1b3. The specification and implementation of the video element are still evolving. So the current code may not work with nightlies.

22 comments one trackback

Demo - Firefox 3.5: Web Workers in action

By Paul Rouget on Wednesday 15 April 2009, 15:00 - shared

One of the new cool features of Firefox 3.5 is the support of Web Workers (see the WhatWG specification).

Web Workers give you a way to execute a part of your Javascript in a thread. That means smoother pages.

I've written a little demo showing Web Workers in action.

But first, a little explanation of the code: I've developed the Simulated Annealing algorithm, which is useful for finding the shortest path between several points (displayed on a <canvas/>).

Here is a demo (without Web Workers). Click on the load button, then on the start button.

The main demo

So, the main demo (with Web Workers) uses this algorithm to find the shortest path of 6 sets of points. The algorithm could be executed in a Worker, or not.

See the difference! A bit faster and way smoother (it doesn't freeze your web page, the page is still alive during the process). Notice the Animated PNG: it gets stuck during the process if you don't use Workers.

Just one rule for Workers: you can't play with the DOM inside a Worker, but you can delegate DOM modifications to the main thread (see postmessage/onmessage methods).

Why you should use Web Workers

Since you can now do some amazing things with HTML5 (canvas, video, ...), you may need to write some heavy algorithm. It could be easier to execute every non-DOM related code in a thread. It will make your code faster, but above all, it will make your web application smoother, and the code cleaner (to avoid Spaghetti code)! Note that you can also use a XMLHttpRequest in a Worker.

Be creative ;)

10 comments one trackback

Demo - Firefox 3.5: XMLHttpRequest improvements

By Paul Rouget on Wednesday 15 April 2009, 14:00 - shared

The implementation of XMLHttpRequest in Firefox 3.1/3.5 has been improved.

As a web developer, you should care, among other things, about two new features:

  • monitoring progress (doc here)
  • Cross-site HTTP requests (doc here)

Monitoring progress

XHR now provides a new event: progress. That means you can track the progress of your request (like the percentage of a download). It's easy to use:

var req = new XMLHttpRequest();  
req.addEventListener("progress", updateProgress, false);  
req.open();  
// progress on transfers from the server to the client (downloads)  
function updateProgress(evt) {  
 if (evt.lengthComputable) {  
    var percentComplete = evt.loaded / evt.total;  
    // ...
  } else {  
    // Unable to compute progress information
    // since the total size is unknown  
  }  
}

Cross-site HTTP requests

This is a really new cool feature. You can now do a request from you web page to a different domain. But the remote content targeted should provide an Access-Control (through a HTTP header - .htaccess, PHP, ... - or a XML header). See MDC for more informations: https://developer.mozilla.org/En/HT....

Example of a .htaccess:

<FilesMatch "foobar.xml">
  Header set Access-Control-Allow-Origin "http://www.mozbox.org"
</FilesMatch>

The demo

XHR

This demo includes these two new features. A XHR is performed from my website (www.mozbox.org) to the Mozilla website (people.mozilla.com). The XHR downloads a big file (5.4Mo).

  • the progress of the download is displayed via a canvas progress bar (a <canvas/> progressbar: http://www.netzgesta.de/gauge/)
  • the request is allowed because I add a header via a .htacces: Header set Access-Control-Allow-Origin "http://www.mozbox.org"

Try it :)

6 comments

- page 1 of 2