C’est ce que semble indiquer l’annonce faite par Dailymotion et rapporté par Christophe Blizzard, un des responsables de la fondation Mozilla.

Il s’agit pour Dailymotion de remplacer, sur cette partie de son site pour l’instant, le lecteur Flash par un lecteur en pur HTML. En effet, la norme HTML5 introduit les nouvelles balises <video> et <audio> qui permettent d’insérer ces médias directement dans une page HTML comme on insère une image avec la balise <img>.
On parle de standards ouverts, car les formats utilisés pour encapsuler (Ogg) et pour encoder la vidéo (Theora) et le son (Vorbis) sont libres de droits. La fondation Mozilla et Dailymotion ont travaillé de concert pour aider ce projet à voir le jour.

Ces nouvelles fonctionnalités seront disponibles notamment dans Firefox 3.5 dont la sortie définitive est prévue courant juin. Vous pouvez dors et déjà les tester en téléchargeant une pré-version de Firefox 3.5. Tous les autres navigateurs, dignes d’intérêt, les implémentent ou les implémenteront dans leur prochaine version de cette année.

La commande split

split découpe par défaut un fichier en plusieurs fichiers de 1000 lignes chacun nommés xaa, xab…
Les options intéressantes sont :

• -l number qui permet de définir le nombre de lignes par fichier
• -a number qui permet de définir la longueur du suffixe
• -d qui permet d’utiliser des suffixes numériques (00, 01…) plutôt qu’alphabétique

Par exemple, si on dispose d’un fichier de 42 lignes, on peut utiliser la commande ci-dessous :

pour créer des fichiers de 10 lignes portant les noms : split.txt.0, split.txt.1, split.txt.2, split.txt.3 et split.txt.4 (ce dernier ne contenant que 2 lignes).

Couper un fichier en deux

Pour couper un fichier en deux fichiers contenant le même nombre de lignes, nous pouvons utiliser les commandes suivantes :

La première ligne permet de stocker le nom du fichier dans la variable FILE.
La seconde calcule le nombre de ligne du fichier et le stocke dans la variable LINE.
La troisième coupe le fichier en 2 en ajoutant un suffixe numérique à la fin du nom du fichier original (toto devient toto.0).

Script générique

Il est bien évidemment possible d’adapter ces commandes à ses besoins. Voici par exemple un script bash (Script de découpe de fichiers (124)) permettant de découper un fichier en N fichiers de taille identique :

Le script est loin d’être parfait (pas de vérification des valeurs passées en paramètre par exemple), mais il est suffisant dans la plupart des cas.

Since then, I have had some precious feedbacks from Paul Rouget and Tristan Nitot. They suggested to make the demo a little bit more interactive. Paul gave me some guidelines to improve the overall performance and I tried to follow his advices. You can play with this demo here (Firefox 3.5b4+ required).

It also required a little bit more informations…

How does it work ?

Obviously, the only way to manipulate bitmap data in a browser is to use the Canvas API. In this demo, when the page is loaded, the process is launched with an image URL and some parameters. A little form enables the visitor to play with them.

The process involves 4 iterative steps, starting with a source image.

1 - It Generates a grayscale image from the source

Canvas only provides a low level API for pixel manipulation. Developers only have access to a 1 dimension array containing the 4 components (RGBA) in a row along with a width and a height properties. The ImageData object appears as follow :

The following luminance (Y) formula is used to obtain a grayscale :

Canvas only manipulates 4 components (RGBA) images. Thus, luminance must be applied to RGB components to display the grayscale version of the image.

2 - It generates an edge detection and an energy map from the grayscale image

The edge detection image is generated using a Sobel convolution. Since canvas does not provide a direct way to apply a convolution filter to an image, the Sobel matrix is applied to each pixel in a loop.
To increase performance, the Sobel and the energy are computed together in the same loop.

Energy is obtained with the following formula : “the energy of a pixel is computed from its own value plus the value of the lowest energy pixel from the three above it”. To obtain the energy map, the image is crawled from top left to bottom right.

3 - It generates a seam of the lowest energy

A seam is a 1 pixel wide vertical line.
The seam is generated from the bottom to the top row of the image :

1. It takes the lowest energy pixel of the bottom row of the energy map
2. It takes the lowest energy pixel from the three above it
3. It repeats 1 and 2 until it reaches the top row of the image

4 - It slices the seam from the source

The process computes an output image from the original picture by slicing the seam. The new generated picture is re-injected as a parameter for the next iteration.

Performances

The process has to be repeated for each seam. Reducing the image width of 50 pixels implies 50 vertical seams. Such algorithm is a good place for improvement because it involves a lot of repetitive tasks. A little improvement can result in seconds.
I tweaked many aspects of the algorithm to increase performances. For example, I reduced the crawl in the scope chain by using local variables. I avoided function calls in loops. I tried to use one loop instead of two inner loops when computing pixels (using the length property of canvas ImageData data object instead of its width and height properties).

I also tried a more radical way to improve performance by reducing the size of the image before entering the process and retrieving the original size after its completion. Such task has side effects. Indeed, when a 2 factor is used (reducing the image by half and then re-increasing it by 2), calculating the seam provides a 2 pixels wide seam instead of 1 pixel wide seam. Thus, the process is almost twice faster but only half of the intermediate results is obtained. For a 50 seams reduction, only 25 intermediates images are calculated in this way.

Finally, let’s mention memory usage. I had to store the artefacts generated along the process (grayscale image, energy map and seam map). Instead of creating a new ImageData object for each artefact, I stored all of them in a single ImageData object. For that purpose, I used the R component for grayscale values, the G component for energy map and the B component for seam map. In the demo, the pseudo image is displayed, on the fly, by regenerating a real ImageData object from a single component.

What’s next ?

The algorithm is not perfect and fits to some images better than to others.
Many improvements are possible :

• Adding expansion capability
• Adding vertical resizing
• Adding the feature of image removal portion
• Adding support for threading

In a future post I’ll surely try to go a little bit further and see what I can do with Workers, and maybe add some new features to this implementation : first on my roadmap is expansion capability.

How to use the demo ?

In this demo, you can compare both the liquid resized and the CSS resized image. Give a closer look at Wolverine head !

You can also change the bottom reference picture to compare liquid resize with the artefacts generated during the process (use the drop down list in the title of the picture) :

I must admit the process is very fast, but still not realtime. However, after a short process time, it’s possible to resize manually the images, by dragging the right border of the top image or even by using left and right arrows.

Finally, a little form will give you the chance to change some settings :

Any comments, any ideas, any suggestions are welcome !

Short story

Last year an incredible buzz around the new image resizing algorithm exposed by Shai Avidan and Ariel Shamir happened.

For those on vacation in 2008 I suggest to give a look at this demo : http://www.seamcarving.com/.

As I saw it I started to think about implementations. There are already some here and there. Some are fairly fast, some are plugins, some are web based. None of them (from what I saw) are browser native.

Next gen browsers and HTML5

I started some work with Flash and ActionsScript 3 and then… several demos of the new HTML5 native features of next Firefox release (3.5 formerly 3.1) by Paul Rouget (video canvas special effects and video tag and subtitles) and some great articles by Vladimir Vukićević arose.

I decided to try to implement the algorithm in pure JavaScript, and this article presents the early results. The C based CAIR implementation, and associated article, was really helpful to fully understand the algorithm thus I used the same photo from the NASA, downscaled though, for performance reason.

JavaScript - Content Aware Image Resizing Algorithm

Below you can see three pictures :

1. First is the original, its size is 256px / 170px
2. Second is resized using Content Aware Image Resizing algorithm, its size is 206px / 170px
3. Third is resized with CSS, I put it here as a reference and its size is also 206px / 170px

Original picture

50px resized - Content Aware Image Resizing algorithm

50px resized - CSS Resizing reference

Compare how the angles and the cosmonauts are reproduced on both resized images. Content Aware Image Resizing algorithm manage to get rid of parts of the image with less energy (short for : less important parts of the image) and leave intact the most important parts.

A JavaScript implementation

The current implementation I made is really a first shout. It only makes use of JavaScript and the HTML5 <canvas /> tag. It uses the Sobel convolution filter for edge detection. You’ll need Firefox 3.1/3.5 to run it (merely tested). The code is still a bit awful and I may refactor and optimize it when I have time.

Next steps could be :

• Add expansion capabilities
• Add vertical reduction and expansion
• Test some other edge detection filters
• Add some features as image portion removing
• Improve performances in order to make it real time on page resizing (is it useful ?)
• Improve performances just for the beauty of art
• Include it in a JavaScript image manipulation widget from any toolkit like Pixstatic.

Any comments are welcome !

Je vous propose une solution universelle ou presque pour générer une version statique de votre site avec la commande wget.

Explication des paramètres :
-X : liste des dossiers à exclure. (ici admin)
-B : la racine du site à aspirer (base).
-r : récursif.
-l inf : un niveau infini de récursions.
-np : ne pas remonter dans le répertoire parent.
-nv : non verbeux.
-k : les liens des pages sont récrits en relatif.

La principale limitation de cette solution (en dehors du fait qu’il faut que wget soit disponible sur votre système) est qu’il n’aspire pas les ressources chargées en js.

A part cela, le résultat est souvent parfait !

Prenons l’exemple suivant, qui est une version simplifiée de ce que peut produire Zend_Form :

Dans Firefox, Safari et les autres navigateurs évolués, aucun soucis, nous avons bien une alerte qui nous affiche checkbox. Par contre sous IE6, nous nous retrouvons avec un insolent hidden !

En effet, l’implémentation de getElementById dans IE6 comporte un bug qui fait qu’il ne fait pas uniquement la recherche sur l’attribut id mais également sur name et qu’il retourne donc le premier élément, ici le champ caché.

Dans notre cas, on pourrait simplement inverser l’ordre des champs et comme la case à cocher serait placée avant elle serait retournée. Mais nous pouvons également proposer une solution plus élégante et surtout plus générique pour contourner le problème : redéfinir la méthode.

Voici la nouvelle méthode :

Explication du code :
- on ne redéfinit la fonction que pour Internet Explorer (on peut utiliser d’autre méthode de détection dans le premier if)
- on garde une copie de la fonction native de manière à pouvoir l’utiliser plus loin
- dans notre nouvelle méthode, on récupère l’élément avec l’ancienne méthode, puis on vérifie que son id correspond bien à ce que nous recherchons, si ce n’est pas le cas, on fait une recherche manuelle.

Exemple complet :

Référence : Sixteen Small Stones

Error: oTidyBrowser is not defined
 Source File: chrome://tidy/content/tidyBrowser.js
 Line: 220

Ceci est dû à un bogue venant de l’utilisation conjointe de Firebug et HTML Validator. voici la procédure pour le corriger :

1. Ouvrir le dossier Firefox de votre profil
   (Windows) C:\Users\Dan\AppData\Roaming\Mozilla\Firefox\Profiles\vqy7rs08.default\extensions\{3b56bcc7-54e5-44a2-9b44-66c3ef58c13e}\chrome
   (Unix) /home/dan/.mozilla/firefox/8wazcbtr.default/extensions/{3b56bcc7-54e5-44a2-9b44-66c3ef58c13e}/chrome
2. Copier le fichier tidy.jar et renommer la copie en tidy.zip
3. Décompressez ce dernier fichier
4. Ouvrez le fichier content/tidyBrowser.js
5. Allez à la ligne 220, la section de code recherchée est :
   

    220. if( oTidyBrowser.bTopLoadBusy==false )

    221. {

    222.  oTidyUtil.tidy.log( ‘<javascript>tidyEndDocumentLoadObserver' );

    223.  oTidyBrowser.bTopLoadBusy = true;

    224.  try

    225.  {

    226.   // Validate the 1rst request

    227.   oTidyBrowser.bIgnorePageShow = true;

    228.   oTidyBrowser.validateFrame( window.content );

    229.   // oTidyBrowser.validateCache( subject.document, true );

    230.

    231.   // Process the events that fired during the 1rst one

    232.   // ex: page with frames.

    233.   var doc = oTidyBrowser.oEventQueue.pop();

    234.   while( doc )

    235.   {

    236.    oTidyBrowser.validateCache( doc, true );

    237.    doc = oTidyBrowser.oEventQueue.pop();

    238.   }

    239.  }

    240.  catch(ex)

    241.  {

    242.   tidyShowExceptionInConsole( ex );

    243.  }

    244.  oTidyBrowser.bTopLoadBusy = false;

    245. }

    246. else

    247. {

    248.  // Parallel events are placed in a event queue.

    249.  oTidyBrowser.oEventQueue.push( event.originalTarget );

    250. }

6. Rajouter cette section de code :
   

   if( !oTidyBrowser )

   {

     // Do nothing

   }

   else if( oTidyBrowser.bTopLoadBusy==false )

   {

     oTidyUtil.tidy.log( ‘<javascript>tidyEndDocumentLoadObserver' );

     oTidyBrowser.bTopLoadBusy = true;

       .....

7. Recompressez les trois dossiers (content, locale et skin) en une archive tidy.zip
8. Faites une sauvegarde de tidy.jar et renommez tidy.zip en tidy.jar
9. Redémarrez Firefox
10. Oh bonheur ! L’erreur a disparu.

• utiliser l’extension “.csv”
• utiliser des délimiteurs de champs pour toutes les lignes du fichiers, généralement ce sont les doubles guillements (”) qui sont utilisés
• si une valeur de champ contient le délimiteur de champ, le doubler, exemple: “Voici un caractère “” dans un champ du fichier”
• utiliser le point-virgule “;” comme séparateur de champ
• terminer les lignes par le caractère “\n”
• supprimer toute occurrence du caractère “\r” dans le fichier (mal supporté par Windows)

J’ai également rencontré des problèmes avec l’encodage unicode UTF-8  et Microsoft Office Excel (il n’a pas l’air de vouloir le lire et force l’encodage ISO) mais je n’ai pas trouvé de solution.

Post scriptum: n’essayez même pas d’assurer une compatibilité avec les versions antérieures à Micorsoft Office Excel 98

Si vous êtes intéressés par JavaScript, quelque soit votre niveau - débutant, intermédiaire ou expert - je ne saurais trop vous conseiller ces 4 vidéos de l’excellent Douglas Crockford dont le modeste titre est “The JavaScript Programming Language” et dont la présentation PowerPoint est téléchargeable ici.

Dans les deux cas, il fallait pouvoir récupérer, depuis la position du curseur sur sa réglette, des valeurs par paliers. La question était donc celle-ci : Comment récupérer une valeur discrète sur une échelle continue ?

Valeurs continues

Tout d’abord pour récupérer une valeur continue sur une réglette, une simple règle de trois suffit :

AS3 : récupération d’une valeur continue sur une réglette arbitraire

Arrondi au multiple le plus proche

Supposons maintenant que je décide d’ajouter la notion de pas sur ma réglette. Je ne souhaite alors récupérer que les valeurs multiples de ce pas. Par exemple, si mon pas est de 3 j’obtiendrais la série suivante :

Voici la formule qui me permet d’obtenir ce résultat.

AS3 : formule retournant une valeur discrète à partir d’une échelle continue

Cette formule, renvoie donc une valeur discrète (arrondie) quand on lui fournit le pas à respecter (step) et une valeur continue (value).

Il subsiste encore un problème, la formule précédente ne prend pas en compte la valeur minimum de ma réglette. En reprenant l’exemple précédent, lorsque je récupère des valeurs avec un pas de 3 mais ne commençant pas à 0… disons à 2, je souhaiterais obtenir la série suivante :

Or avec la formule précédente, je n’obtiens que des arrondis de multiples du pas mais 2, 5, 8, 11, 14 ne sont pas des multiples de 3.

Valeurs discrètes et minimum d’échelle

Pour résoudre le problème, il faut donc modifier les 2 formules précédentes en décalant l’échelle de la valeur minimum avant d’utiliser la fonction d’arrondi puis en la corrigeant à nouveau après.
En plus clair :

1. Retrancher la valeur minimum à la valeur continue (pour que l’échelle de la réglette parte de 0 et pas de la valeur minimum)
2. Puis ajouter cette même valeur minimum à la valeur arrondie pour corriger le décalage introduit précédemment

AS3 : Comparaison des formules

Pour tester la formule, voici un exemple des réglettes faites en AS3. L’une retourne des valeurs continues l’autre des valeurs par paliers. Les valeurs minimum et maximum ainsi que le pas de la deuxième réglette sont paramétrables.