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 !

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.

Ce qu’il faut savoir pour comprendre cet article :

• Avoir de bonnes bases en javascript, PHP.
• Comprendre le design pattern MVC.
• Savoir créer le bootstrap d’une application avec le Zend Framework.

Xoad

Xoad permet d’exporter des objets du côté serveur vers le côté client. Xoad est un environnement basé sur un ORB. Un ORB (Object Request Broker) est un ensemble de fonctions qui implément un bus logiciel par lequel des objets envoient et reçoivent des requêtes et des réponses, de manière transparente et portable.

Zend Framework

Le Zend Framework est un framework pour PHP 5 créé par Zend. Il est distribué sous la New BSD license. Le Zend Framework, aussi nommé ZF, a été développé dans le but de simplifier le développement Web tout en recommandant les bonnes pratiques et la conception orientée objets en offrant des outils puissants aux développeurs. ZF permet aussi d’utiliser nativement le principe de MVC (Modèle-Vue-Contrôleur) mais ne l’oblige pas.

Préalable

Configuration du Zend-Framework :

Si vous êtes débutant avec le ZF vous pouvez vous reporter à l’arcticle suivant : Premier pas avec le ZF .

Considérons l’arborescence suivante :

Vous pouvez télécharger la librairie XOAD ici.
Nous allons créer une vue qui va nous permettre d’afficher le traditionnel “Hello world” lors du clique sur un bouton.

xoad.phtml

Dans cette vue, rien d’extraordinaire :
- inclusion de la librairie javascript xoad (optimisée)
- affichage de l’objet javascript généré côté serveur et passé à la vue.

- ajout d’un évènement sur le onclick d’un bouton qui va nous permettre d’afficher la réponse générée par xoad.

LabController.php

Ce controller va nous permettre d’effectuer le rendu de notre vue décrite plus haut.
La méthode init nous permet de créer une vue personnalisée.
La méthode xoadAction va permettre à Xoad d’interagir avec le Zend Framework.
Particularités :
- On force le chargement de la class Lab_Xoad avec le Zend_Loader.
- On inclut la librairie xoad (située dans le repertoire lib)
- On génère l’objet javascript à partir de la méthode statique “register” en lui passant en premier paramètre la classe et en second l’url de callback utilisée par xoad
- Le fait de définir à true la constante XOAD_AUTOHANDLE permet à xoad de déterminer si l’action du controller a été appelé lors d’une requête ajax ou non, dans le cas d’une requête Ajax le script s’arrête après le require_once de la librairie xoad, le format de retour est alors du json qui servira comme outil de communication à notre objet js.

Xoad.php

C’est là que ça commence à devenir interessant !

En effet, cette class va pouvoir être utilisée directement en javascript sans avoir à le modifier.
Toutes ses méthodes et ses attributs sont directement disponibles en javascript.
Vous n’avez plus à vous soucier d’écrire le code Javascript qui va se charger d’effectuer des requêtes Ajax et d’en traiter le retour.
Exemple, dans notre vue nous appelons directement la méthode suivante :

Cet appel Javascript va nous retourner “Hello World”, les aller-retours serveur nécessaires vont se faire en backend.

Alors convaincu ?

Pour contourner le problème utilisez plutôt le code suivant

au lieu de

plus d’erreur et le code est plus sûr.

Pour ce faire, nous allons implémenter une bonne vieille pile LIFO en PHP.

Après avoir crée un projet avec Zend Studio et une classe Unit_Stack, on commence par écrire le squelette de cette classe :

Les commentaires devraient suffire à expliquer ce qu’est sensée faire cette classe.

L’étape suivante consiste à créer la classe de tests unitaires ou Test Case. Dans l’arborescence tests/unit/Unit/, faire click droit puis new -> PHPUnit Test Case.

Il suffit alors de choisir la classe à tester via le bouton Browse en face de ‘Element to Test’, puis de corriger le nom de la classe de Test générée dans le champ ‘Test File Name’ en virant le préfixe Unit_’. Cela devrait ressembler à ça :

Création d'un Test Case

Le Test Case généré devrait comprendre :

• une méthode setUp : lancée avant chaque test.
• une méthode tearDown : lancée après chaque test.
• un constructeur : pas vraiment utile.
• une méthode de test par méthode publique de la classe à tester.

Dans le cadre de cet exemple, je vous invite à supprimer le constructeur ainsi que les méthodes setUp et tearDown.

Nous rentrons maintenant dans le vif du sujet, il s’agit :

1. d’écrire un test
2. de lancer le Test Case afin de vérifier (oh surprise) qu’il échoue
3. d’implémenter la fonctionnalité
4. de relancer le test et éventuellement corriger jusqu’à ce que le test passe !

Écriture du test

Nous proposons pour la méthode isEmpty l’écriture du test suivant :

Lancer le Test Case

Il suffit d’un click droit sur le fichier du Test Case puis de choisir Run as -> PHPUnit Test

Si tout se passe bien, le test devrait apparaître en erreur et les autres en non implémentés.

Résultats test case

Implémenter la fonctionnalité

Trop facile …

Relancer le test et corriger

Même procédure que le lancement précédent, cette fois le test devrait apparaître comme réussi.

Ensuite….

Il suffit de refaire la même procédure itérativement pour chaque fonctionnalité. A mesure que les nouvelles fonctionnalités sont implémentées, de nouveaux tests peuvent être écrits en plus de ceux générés par Zend Studio. Il suffit de créer une méthode publique dont le nom commence par test.

Si votre application contient plusieurs classes et donc plusieurs Test Case (ce qui est souvent le cas !), il peut être fastidieux de lancer les tests cases un par un, il est alors intéressant d’utiliser les Tests Suites. Il suffit de faire un click droit dans Zend studio sur le répertoire test/unit/ puis New -> PHPUnit Test Suite.

On sélectionne alors les Tests Case à lancer puis finish. Une Suite se lance alors de le même façon qu’un Test Case.

Liens :

• Les sources de l’exemple
• Le site de PhpUnit

L’extension est pour l’instant disponible dans le bac à sable du dépôt des extensions Firefox, il faut s’y connecter pour la télécharger. Une fois installée et activée elle inscrit dans le log du debogueur JavaScript le code obfusqué qu’elle trouve en le deobfusquant. Le code deobfusqué n’est évidemment pas identique au code d’origine mais ceci permet au moins de l’éclaircir.