Mozilla

Articles by Paul Rouget

Sort by:

View:

  1. Firefox 4 Demos: More 3D!

    Firefox 4 is here! Yeah!

    webgl logoAnd to celebrate the launch, we have released another round of demos on Web O’ Wonder, with 3 awesome WebGL demos! (This new round also introduces mobile-specific demos, see this dedicated blog post).

    WebGL: It’s 3D and Web Content together.

    Demo by Cédric Pinson and Guillaume Lecollinet.

    GlobeTweeter is a perfect example of how you can mix 3D and Web Content. In this page, you can see real-time geo-located twitter activity represented on the planet earth.

    WebGL animations

    Demo by The Audio Team.

    No-Comply is a WebGL animation. With JägerMonkey (Firefox’s new JavaScript engine) and the experimental animation scheduler (mozRequestAnimationFrame), we can now create complex WebGL animations.

    Learn more about the no comply demo.

    This demo has been developed by the audio team who has also created the Flight Of The Navigator demo, where you can find Videos and live Flickr and Twitter content in a 3D city, all build with WebGL:

  2. Firefox 4 Demos: Awesome CSS3 Planetarium

    O hai pixel lovers! Check out this gorgeous CSS3 demo: Planetarium, by the LittleWorkshop team (@glecollinet & @whatthefranck).

    planetarium

    Screencast:

    Youtube link.

    Gorgeous Animations

    The principal feature show-cased in this demo is CSS3 Transitions. The animation between the welcome-screen and the planet-screen, and the animation between the different planets are powered by transitions. But there are many little effects in this demo. Take a look at the Twitter button, the ruler, the credit page or the back button. These effects are CSS3 Transitions too.

    Another interesting detail. Next to the planet, you have some different animations. The way the animations is played depends on if you’re coming from the left, the right or from the home screen.

    Try it yourself: Click on the planet Earth, from the home screen. See the text “falling” from the top? Now, go to Mars, and come back to Earth. Now the text is “flying” from the right. Designers will love that :)

    Beautiful fonts

    @font-face allows you to use your own font for creative design. Combined with text-shadow and font-feature-settings, you can accurately forge and style your typographic content.

    Your turn!

    These are features you can use today.
    This demo works perfectly in Firefox 4, Safari and Chrome. Also, Transitions and font-face are easily degradable. Go. Check out the source code, read the documention, and if you’re proud of your code, feel free to submit a demo!

  3. Firefox 4 Demos: Runfield – a Canvas Game

    Yeah! Another awesome demo in Web’o Wonder!

    With Hardware Acceleration and a fast JavaScript engine, the web platform is ready for Games. Runfield is an example. This HTML5 Game has been developed by Ilmari Heikkinen. It’s based on Canvas 2D, and this game works on all the recent browsers.


    (small definition version here – Oh! and check-out the little built-in level editor)

    Want to see more HTML5 Games? Take a look at Mozilla Labs Gaming:

    Mozilla Gaming

  4. The shortest image uploader – ever!

    A couple of line of JavaScript. That’s all you need.

    This is a very short Image Uploader, based on imgur.com API. If you want to do more complex stuff (like resize, crop, drawing, colors, …) see my previous post.

    Back-story. I’ve been talking to Imgur.com‘s owner (Hi Alan!). He recently added Drag’n Drop support to his image sharing website. But also, Alan allows Cross-Domain XMLHttpRequest (thank you!). So basically, you can use his API to upload pictures to his website, from your HTML page, with no server side code involved – at all.

    And here is an example of what you can do:

    (see the full working code on github – live version there )

    (also, you’ll need to understand FormData, see here)

    function upload(file) {
     
      // file is from a <input> tag or from Drag'n Drop
      // Is the file an image?
     
      if (!file || !file.type.match(/image.*/)) return;
     
      // It is!
      // Let's build a FormData object
     
      var fd = new FormData();
      fd.append("image", file); // Append the file
      fd.append("key", "6528448c258cff474ca9701c5bab6927");
      // Get your own key: http://api.imgur.com/
     
      // Create the XHR (Cross-Domain XHR FTW!!!)
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom!
      xhr.onload = function() {
        // Big win!
        // The URL of the image is:
        JSON.parse(xhr.responseText).upload.links.imgur_page;
       }
       // Ok, I don't handle the errors. An exercice for the reader.
       // And now, we send the formdata
       xhr.send(fd);
     }

    That’s all :)

    Works on Chrome and Firefox 4 (Edit:) and Safari.

  5. Firefox 4 Demos: 3 new demos!

    Firefox 4 RC is here!

    And as promised last week, more demos are coming on our Web O’ Wonder website! Here is another round with 3 new demos. Take a look!

    360° Video

    Navigate into a panoramic video.

    Try it yourself

    Source code

    Motivational Poster Editor

    Create your own motivationnal poster.

    Try it yourself

    Source code

    Letter Heads

    By @simurai

    Human silhouette built with CSS3 shadows.

    Try it yourself

    Source code

  6. Firefox 4 Web Demos: announcing Web O' Wonder

    Firefox 4 is almost here. Check out some awesome Web demos on our brand new demo web site: Web’O Wonder. Screencast here.

    Update: 3 more demos: https://hacks.mozilla.org/2011/03/webowonder-round/

    Web ‘O Wonder

    Firefox 4 is almost here, and comes with a huge list of awesome features for web developers.

    In order to illustrate all these new technical features, we put together several Web demos. You’ll see a couple of demos released every week until the final version of Firefox 4. You can see the first 3 demos online now on our brand new demo web site: Web’O Wonder:

    Web O Wonder

    Note: Some of these demos use WebGL, and will work only on compatible hardware. Make sure you are using the latest drivers for your graphics card.

    Open Demos

    These demos haven’t been designed exclusively for Firefox 4. We believe that the Web is not the property of any single browser, which is why we made sure that these demos work on other modern browsers, like Chrome, when possible.

    The other big step forward for HTML5 demos is that these are Open Source. Help us improve them! The source code of every single demo is available on Github and we encourage you to fork them and play.

    New technologies and new horizons for 400 million users

    In these demos, we are experimenting with new technologies, trying to imagine what could be the future of the Web. HTML5, CSS3, WebGL, SVG, blazing fast JavaScript and new APIs. Sounds exciting, but what does it really mean for the user?

    It means new possibilities, new ways to interact with web applications. It means richer and more beautiful applications. It means a smoother and faster experience and this is what we want to demonstrate with these demos.

    We hope to inspire web developers to use these new technologies. This is just the beginning of a new generation of websites. Web developers now have the tools to change the face of the internet and here you have a few blueprints to start from.

    Thank you!

    A lot of people were involved in the development of these demos. The Mozilla community is full of talented people that did a lot of incredible work to make these demos happen. I just want to say a big thank you to all these talented people (and make sure to check out the credits on the demos!).

    Oh, look! A screencast:

  7. HTML5 Guitar Tab Player with the Firefox 4 Audio Data API

    Greg Jopa, an Illinois State University grad student studying web development, built a web-based guitar tab player using Firefox’s Audio Data API and Vexflow (HTML5 music notation rendering API). Here is some details from Greg. You can also read more about this experiment on his blog.

    I created a mashup using the Firefox 4 Audio Data API, MusicXML, and Vexflow to create a HTML 5 Guitar Tab Player.

    This is a Youtube video. It uses the HTML5 <video> tag if you activate it here.

    Using JavaScript, this guitar tab player converts the music note data from a MusicXML file to frequencies playable by the Audio Data API. This note data is also converted to a format that can be read by Vexflow to display the guitar tab.

    I have broken down this functionality into 4 steps. Here’s how the HTML5 Guitar Tab Player works:

    MusicXML

    When a tab (a tablature) is selected, the jQuery ajax() function loads the MusicXML file, parses through the contents, and appends all the formatted note data to a <script> tag. The format for each note is: playNote(note, octave, duration).

    playNote(notes.C, 4, 1);

    The tablature notation information in the MusicXML file is also processed and appended to a <div> tag for Vexflow.

    Here is the structure of the nodes I am using from the MusicXML file:

    <measure number="1">
        <attributes>
            <divisions>1024</divisions>
        </attributes>
        <note>
            <pitch>
                <step>C</step>
                <octave>4</octave>
            </pitch>
            <duration>1024</duration>
            <notations>
                <technical>
                    <fret>1</fret>
                    <string>2</string>
                </technical>
            </notations>
        </note>
        the note node repeats for the rest of the notes in the measure…
    </measure>

    And here is the generated source that is produced by the ajax() function.

    For the audio:

    <script id="audio" type="text/javascript">
    	function loadAudio(){
    	  playNote(notes.C, 4, 1);
    	  playNote(notes.C, 4, 1);
    	  playNote(notes.G, 4, 1);
    	  playNote(notes.G, 4, 1);
    	  …
    	}
    </script>

    For the tab:

    <div id="tab" class="vex-tabdiv" width=780 scale=1.0 editor="false">
    tabstave notation=true
    	notes :q 1/2 :q 1/2 :q 3/1 :q 3/1 | :q 5/1
       …
    </div>

    Frequency Calculation

    When the Play button is clicked the music data <script id=”audio”> tag is evaluated and the note information is converted to frequencies using the following formula (assumes equal temperament):

    frequency = 440 * 2^(n/12)

    440 is the frequency for the note A at the 4th octave.

    n = distance away from A4 (440)

    I am using an array to store the distance between a certain note and the base note “A”

    notes = {C:-9, Cs:-8, D:-7, Ds:-6, E:-5, F:-4, Fs:-3, G:-2, Gs:-1, A:0, As:1, B:2};

    And to incorporate that a note can be played at different octaves I have adapted the above formula to the following:

    frequency = 440 * 2^((octave-4) * 12 + distance)/12);

    Audiodata.js

    I am using the Audiodata.js library in the guitar tab player which makes it easy to play continuous audio using a single array. This library encapsulates the Audio Data API methods. Audiodata.js is available on GitHub here: https://github.com/notmasteryet/audiodata. The Audiodata.js project contains a score example with “Twinkle, Twinkle, Little Star” which inspired me to build this guitar tab player.

    Vexflow and the Animated Cursor

    Vexflow is an open-source web-based music notation rendering API based on the HTML5 canvas element (http://www.vexflow.com/). I am using Vexflow to display the tab for each MusicXML file. I have added an additional canvas element on top of the Vexflow canvas to control the red cursor that links the audio to the tablature. The speed of the audio is controlled by the tempo which is measured in beats per minute. By converting this tempo to milliseconds I am able to use it for the redraw speed of the second canvas. Every time this canvas is redrawn the red cursor is moved 5 pixels to the right to highlight which note is currently being played.
    Keep in mind that this HTML5 Guitar Tab Player is just a proof of concept and can only play single notes.

    If you have recommendations on how to make this tab player better or would like to contribute to this project check out the following post: http://www.gregjopa.com/2010/12/html5-guitar-tab-player-with-firefox-audio-data-api/

  8. How to develop a HTML5 Image Uploader

    HTML5 comes with a set of really awesome APIs. If you combine these APIs with the <canvas> element, you could create a super/modern/awesome Image Uploader. This article shows you how.

    All these tips work well in Firefox 4. I also describe some alternative ways to make sure it works on Webkit-based browsers. Most of these APIs don’t work in IE, but it’s quite easy to use a normal form as a fallback.

    Please let us know if you use one of these technologies in your project!

    Retrieve the images

    Drag and drop

    To upload files, you’ll need an <input type=”file”> element. But you should also allow the user to drag and drop images from the desktop directly to your web page.

    I’ve written a detailed article about implementing drag-and-drop support for your web pages.

    Also, take a look at the Mozilla tutorial on drag-and-drop.

    Multiple input

    Allow the user the select several files to upload at the same time from the File Picker:

    <input type="file" multiple>

    Again, here is an article I’ve written about multiple file selection.

    Pre-process the files

    Use the File API

    (See the File API documentation for details.)

    From drag-and-drop or from the <input> element, you have a list a files ready to be used:

    // from an input element
    var filesToUpload = input.files;
    // from drag-and-drop
    function onDrop(e) {
      filesToUpload = e.dataTransfer.files;
    }

    Make sure these files are actually images:

    if (!file.type.match(/image.*/)) {
      // this file is not an image.
    };

    Show a thumbnail/preview

    There are two options here. You can either use a FileReader (from the File API) or use the new createObjectURL() method.

    createObjectURL()

    var img = document.createElement("img");
    img.src = window.URL.createObjectURL(file);

    FileReader

    var img = document.createElement("img");
    var reader = new FileReader();
    reader.onload = function(e) {img.src = e.target.result}
    reader.readAsDataURL(file);

    Use a canvas

    Once you have the image preview in an <img> element, you can draw this image in a <canvas> element to pre-process the file.

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    Resize the image

    People are used to uploading images straight from their camera. This gives high resolution and extremely heavy (several megabyte) files. Depending on the usage, you may want to resize such images. A super easy trick is to simply have a small canvas (800×600 for example) and to draw the image tag into this canvas. Of course, you’ll have to update the canvas dimensions to keep the ratio of the image.

    var MAX_WIDTH = 800;
    var MAX_HEIGHT = 600;
    var width = img.width;
    var height = img.height;
     
    if (width > height) {
      if (width > MAX_WIDTH) {
        height *= MAX_WIDTH / width;
        width = MAX_WIDTH;
      }
    } else {
      if (height > MAX_HEIGHT) {
        width *= MAX_HEIGHT / height;
        height = MAX_HEIGHT;
      }
    }
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, width, height);

    Edit the image

    Now, you have your image in a canvas. Basically, the possibilities are infinite. Let’s say you want to apply a sepia filter:

    var imgData = ctx.createImageData(width, height);
    var data = imgData.data;
    var pixels = ctx.getImageData(0, 0, width, height);
    for (var i = 0, ii = pixels.data.length; i < ii; i += 4) {
        var r = pixels.data[i + 0];
        var g =pixels.data[i + 1];
        var b = this.pixels.data[i + 2];
        data[i + 0] = (r * .393) + (g *.769) + (b * .189);
        data[i + 1] = (r * .349) + (g *.686) + (b * .168)
        data[i + 2] = (r * .272) + (g *.534) + (b * .131)
        data[i + 3] = 255;
    }
    ctx.putImageData(imgData, 0, 0);

    Upload with XMLHttpRequest

    Now that you have loaded the images on the client, eventually you want to send them to the server.

    How to send a canvas

    Again, you have two options. You can convert the canvas to a data URL or (in Firefox) create a file from the canvas.

    canvas.toDataURL()

    var dataurl = canvas.toDataURL("image/png");

    Create a file from the canvas

    var file = canvas.mozGetAsFile("foo.png");

    Atomic upload

    Allow the user to upload just one file or all the files at the same time.

    Show progress of the upload

    Use the upload events to create a progress bar:

    xhr.upload.addEventListener("progress", function(e) {
      if (e.lengthComputable) {
        var percentage = Math.round((e.loaded * 100) / e.total);
        // do something
    }, false);

    Use FormData

    You probably don’t want to just upload the file (which could be easily done via: xhr.send(file)) but add side information (like a key and a name).

    In that case, you’ll need to create a multipart/form-data request via a FormData object. (See Firefox 4: easier JS form handling with FormData.)

    var fd = new FormData();
    fd.append("name", "paul");
    fd.append("image", canvas.mozGetAsFile("foo.png"));
    fd.append("key", "××××××××××××");
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://your.api.com/upload.json");
    xhr.send(fd);

    Open your API

    Maybe you want to allow other websites to use your service.

    Allow cross-domain requests

    By default, your API is only reachable from a request created from your own domain. If you want to allow people use your API, allow Cross-XHR in your HTTP header:

    Access-Control-Allow-Origin: *
    

    You can also allow just a pre-defined list of domains.

    Read about Cross-Origin Resource Sharing.

    postMessage

    (Thanks to Daniel Goodwin for this tip.)

    Also, listen to messages sent from postMessage. You could allow people to use your API through postMessage:

    document.addEventListener("message", function(e){
        // retrieve parameters from e.data
        var key = e.data.key;
        var name = e.data.name;
        var dataurl = e.data.dataurl;
        // Upload
    }
    // Once the upload is done, you can send a postMessage to the original window, with URL

    That’s all. If you have any other tips to share, feel free to drop a comment.

    Enjoy ;)

  9. Firefox 4 Beta: Latest Update is Here, with WebGL

    The new Firefox 4 Beta is here, and comes with WebGL activated by default. You can download this new beta here: http://firefox.com/beta.

    Flight of the Navigator is a WebGL + Audio API demo developed by a team of Mozilla volunteers.

    You can see the demo online here (you need a WebGL compatible browser).

    More information about this demo on David Humphrey’s blog (one of the developer of this demo) and more about WebGL in Firefox Beta8 on Vlad’s blog.

    The screencast:

  10. Firefox 4: recent changes in Firefox

    I’ve been really busy these days, and I didn’t have a chance to keep you updated, and a lot happened:

    These changes should be available in the next beta.