La methode facile de créer des QR codes avec Zxing et Java 2D
I. Introduction
Un QR code est la représentation graphique d'un message. C'est une sorte de code barre en deux dimensions. Le-dit message peut contenir une URL, un e-mail, un numéro de téléphone, une vCard, etc. Dans la suite, nous nous intéresserons aux messages simples, les messages plus complexes n'étant que des extensions avec une syntaxe particulière.
La plupart des développeurs sont à l'aise avec les QR codes. Ils savent comment les scanner depuis leurs smartphones. De nombreuses "app" sont dédiées à cette fonctionnalité et on en possède souvent plusieurs. Les développeurs savent aussi comment créer des QR codes à l'aide des mêmes "app", des plugins Chrome ou Firefox, ou encore des sites web comme Unitag et SoQR.
QR code vers le site de Developpez.com
En revanche, quand il s'agit de générer soit-même un QR code, c'est tout de suite moins drôle car les algorithmes de calcul sont loin d'être triviaux et la génération d'images, un minimum jolies, n'est pas une compétence très répandue. On pourrait donc penser que la tâche est complexe, voire impossible sans une étude approfondie.
Dans cet article, nous allons d'abord voir comment générer une matrice de modules à l'aide de la bibliothèque Zxing. Dans un second temps, nous verrons comment dessiner des images (belles) à l'aide de Java 2D.
En première approche, un QR code simple ressemble à un carré rempli de gros pixels blancs et noirs. Ces "pixels noirs" sont les "modules" dont je parle plus haut. |
I-A. À propos
Découvrir une technologie n'est pas chose facile. En aborder plusieurs d'un coup l'est encore moins. Partant de ce constat, cet article a été écrit pour aller à l'essentiel. Les points importants sont présentés dans le corps de l'article et les éléments secondaires, comme la gestion des exceptions, sont expliqués en annexes.
I-B. Avant de commencer
Pour écrire ce tutoriel, j'ai utilisé les éléments suivants :
- Java JDK 1.6.0_24-b07 ;
- Eclipse Indigo 3.7 JEE 64b ;
- Maven 3.0.3 ;
- Zxing 2.0.
II. Découverte du projet d'exemple
II-A. Télécharger, installer et importer le projet d'exemple
Pour commencer, je vous propose de télécharger le fichier Zip "qr-code-01.zip", contenant un projet Java-Maven d'exemple (vide) qui va nous servir de support pour les fonctionnalités présentées dans la suite de cet article.
Compilez le projet d'exemple et importez-le dans Eclipse (comme expliqué dans le tutoriel "Importer un projet Maven dans Eclipse en 5 minutes") ou dans l'IDE de votre choix.
Pour suivre ce tutoriel, vous pouvez vous contenter de lire les codes proposés ci-dessous (codes complets en annexes) et de faire confiance aux captures d'écran. |
II-B. Ce que fait déjà le projet d'exemple
Pour une fois, je vous propose un projet d'exemple qui ne fait rien. C'est un projet Maven vide qui va seulement servir d'enveloppe pour la suite.
III. Action
III-A. Maven
Durée estimée : 1 minute.
Pour utiliser Zxing, il faut ajouter une dépendance dans le fichier "pom.xml".
Dépendance dans le pom.xml |
|
Puis relancer une installation Maven.
Commande Maven |
|
En fonction des éléments déjà présents sur le disque dur, le résultat de l'installation Maven devrait ressembler à la trace suivante :
Commande Maven |
|
On doit ensuite faire un refresh (touche F5) dans Eclipse pour faire apparaitre Zxing dans la liste des bibliothèques référencées.
III-B. Création des QR codes
Durée estimée : 2 minutes.
La génération d'un QR code commence toujours par le calcul de sa matrice, qu'on peut assimiler à un tableau de "1" et de "0" correspondants aux modules noirs et blancs.
Calcul de la matrice |
|
Quand c'est fait, il suffit de dessiner les modules.
Dessin |
|
Le code complet, avec la gestion des exceptions est donné en annexe. |
Cela va donc générer l'image "qrcode-01.png" contenant le message "Je suis Thierry et je suis gentil".
QR code : Je suis Thierry et je suis gentil.
Voici ce que ça donne lorsque je scanne ce code depuis mon iPhone :
Scan en cours sur l'iPhone
Après le scan
III-C. Un code en couleur
Durée estimée : 2 minutes.
C'est bien beau de savoir générer un code mais ça n'est pas très sexy de se contenter de noir et de blanc. J'ai donc demandé aux développeurs d'Unitag de m'envoyer quelques morceaux de code pour ajouter un peu de couleur.
Je vais donc devoir un peu changer mon code mais le principe reste le même, avec un peu de contrôles supplémentaires.
Calcul de la matrice |
|
De nouveau, quand j'ai ma matrice, je peux lancer la génération de l'image. Cette fois nous allons procéder par étapes.
Dessin |
|
La suite de ce chapitre n'est pas simple : elle utilise les fonctionnalités de Java 2D (qui nécessitent un peu de concentration), alors qu'on utilisait la génération automatisée (mais aux options réduites) de Zxing dans le chapitre précédent. |
On commence par générér la "forme" du QR code (à l'aide de Java 2D) : modules, quietzone, etc.
Area |
|
Puis on peut passer à l'étape de "coloriage" des modules ajoutés dans la boucle (cf. code source précédent).
Dessin |
|
Enfin, on peut écrire le fichier sur le disque.
Ecriture sur le disque |
|
Ca me donne une belle image verte. Je vous laisse trouver la couleur qui vous convient le mieux...
QR code vert
III-D. un code avec redondance
Durée estimée : 30 secondes.
Une des particularités des QR codes est qu'ils restent lisibles même lorsqu'ils sont déchirés ou abîmés, un peu comme un CD qui reste utilisable lorsqu'il est rayé. Pour cela, la "norme" des QR codes implique que les données soient répliquées. Elle définit quatre niveaux de réplication : L (7 %), M (15 %), Q (25 %) et H (30 %).
Bien entendu, plus le niveau de réplication est élevé et plus gros devra être le QR code généré pour tout contenir. |
Ici, une simple adaptation du code proposé au chapitre précédent devrait suffire.
Calcul de la matrice |
|
Par défaut, Zxing génère des QR codes avec le niveau "L" (low). Dans l'exemple j'ai utilisé le niveau "Q" (quality) et on constate donc une plus grande densité des modules. Pour que ça saute aux yeux, j'ai utilisé du "bleu mauve" pour cette version.
QR code vert avec le niveau L
QR code bleu mauve avec le niveau Q
Si on avait utilisé le niveau "H" (high), la différence aurait été encore plus flagrante. |
III-E. Voir la grille
Durée estimée : 30 secondes.
Pour continuer, disons qu'on souhaite voir le maillage des modules. C'est relativement simple : il suffit de dessiner des modules qui n'occupent pas toute la place disponible dans la "case".
Modules plus petits laissant voir la grille |
|
QR code bleu mauve
QR code rouge avec grille
III-F. Des modules ronds
Durée estimée : 30 secondes.
Continuons sur notre lancée. Cette fois, disons que nous voulons des modules ronds.
Modules ronds |
|
Juste pour rigoler, j'ai fais des modules ronds et blancs sur fond bleu. On a aussi le droit de changer la couleur du fond puisque c'est la différence de contraste qui compte. Toutefois tous les scanners ne savent pas forcément lire les QR codes inversés.
QR code rouge avec grille
QR code avec des modules ronds
Avec le fond bleu, on voit bien la "quietzone" de quatre modules autour du QR code. |
III-G. Avec un dégradé de couleur
Durée estimée : 30 secondes.
Pour finir avec un dernier effet sympa et simple, je vous propose d'utiliser un dégradé de couleur.
Dégradé de couleurs |
|
QR code avec un dégradé de couleurs
III-H. Autres types de messages
La plupart du temps, on va générer des QR codes pour les faire "pointer" vers des sites Web. Pour cela, il suffit de d'encoder un message contenant l'URL du-dit site.
Dégradé de couleurs |
|
QR code vers le site www.developpez.com
Pour générer des QR codes permettant d'envoyer des SMS, des e-mails, d'appeler un numéro de téléphone, d'enregistrer des vCards (etc.), il y a une syntaxe particulière que je vous laisse découvrir sur le site d'Unitag ou sur la page dédiée aux contenus chez Zxing. Voici néanmoins quelques exemples simples :
Dégradé de couleurs |
|
Et voilà...
IV. Conclusions
Comme on vient de le voir, on peut générer des QR codes très facilement à l'aide de la bibliothèque Zxing et un peu de dessin à l'aide de Java 2D. Les possibilités sont nombreuses mais réclament un talent de graphiste qui me manque. Vous trouverez des outils sympas sur le Web et j'espère qu'ils vous donneront des idées.
Dans un prochain article, je m'attarderai sur les algorithmes liés aux QR codes, notamment pour le calcul de la matrice, des masques, des mécanismes de correction d'erreur, etc. Mais pour le moment, je vous laisse déjà vous amuser avec tout ça.
Le code final de ce tutoriel est disponible dans le fichier ZIP qr-code-02.zip.
Vos retours nous aident à améliorer nos publications. N'hésitez donc pas à commenter cet article sur le forum : 1 commentaire |
Retrouvez mes autres tutoriels rapides sur developpez.com à l'adresse http://thierry-leriche-dessirier.developpez.com/#page_articles
V. Remerciements
J'adresse des remerciements particuliers aux équipes d'Unitag, sans qui cet article n'aurait jamais vu le jour. Unitag est une société française, basée à Toulouse et leader dans la domaine de la génération et la personnalisation des QR Codes. Leur site Web propose de nombreux outils gratuits (et performants) que viennent compléter des offres professionnelles intéressantes (et pas chères).
Et en plus, je tiens à remercier, en tant qu'auteur du tutoriel, toutes les personnes qui m'ont aidé et soutenu. Je pense tout d'abord à mes collègues qui subissent mes questions au quotidien, mais aussi à mes contacts et amis du Web, dans le domaine de l'informatique ou non, qui m'ont fait part de leurs remarques et critiques. Bien entendu, je n'oublie pas l'équipe de developpez.com qui m'a guidé dans la rédaction de cet article et m'a aidé à le corriger et le faire évoluer, principalement sur le forum.
Plus particulièrement j'adresse mes remerciements à Mickael Baron (keulkeul), Sébastien Germez (FirePrawn), Marc (Gueritarish) et mlny84.
VI. Annexes
VI-A. Des exemples de beaux QR codes
Voici une petite sélection de QR codes design que j'ai simplement cherché sur Google.. Je les trouve beaux mais ça n'engage que moi.
Quand on scanne des QR codes (à l'aide d'un iPhone par exemple) directement sur l'écran et de trop près, on voit apparaitre des lignes correspondant à la matrice des pixels du LCD. Il est donc possible que ces QR codes ne soient pas lisibles sur tous les écrans. En revanche ils devraient être lisibles facilement une fois imprimés, même sur des mauvaises imprimantes, même en noir et blanc. |
Ces images sont la propriété de leurs auteurs. Je les propose ici dans le cadre du "fair use". Contactez-moi pour les supprimer ou ajouter des références. |
VI-B. Liens
Unitag : http://www.unitag.fr
QR Code vers Unitag
QR Code design vers Unitag
QR Dress Code : http://www.qrdresscode.com
QR Code vers QR Dress Code
Zxing : http://code.google.com/p/zxing/
VI-C. Liens personnels
Retrouvez ma page et mes autres articles sur developpez.com à l'adresse http://thierry-leriche-dessirier.developpez.com/#page_articles
QR Code vers mes articles
Ajoutez-moi à vos contacts à l'aide du QR Code suivant :
QR Code contenant ma vCard
Suivez-moi sur Twitter : @thierryleriche
@thierryleriche
VI-D. Les fichiers importants en entier
SimpleQrcodeGenerator.java |
|
GridQrcodeGenerator.java |
|
pom.xml |
|
Excellent way of telling, and fastidious article to get information on the topic of my presentation topic,
ReplyDeletewhich i am going to present in university.
Here is my page - continue reading
Quality posts is the crucial to be a focus for the people to
ReplyDeletepay a visit the website, that's what this web site is providing.
My page - nfl jerseys cheap
I seldom leave a response, however i did a few searching and wound up here "La methode facile de cr�er des QR codes avec Zxing et Java 2D".
ReplyDeleteAnd I do have a couple of questions for you if it's allright. Is it just me or does it appear like some of the remarks appear like they are coming from brain dead people? :-P And, if you are writing on other places, I would like to keep up with everything new you have to post. Could you make a list of all of your community pages like your twitter feed, Facebook page or linkedin profile?
Feel free to visit my site; Michael Kors
With havin so much content and articles do you ever run into any issues
ReplyDeleteof plagorism or copyright infringement? My blog
has a lot of exclusive content I've either authored myself or outsourced but it looks like a lot of it is popping it up all over the internet without my agreement. Do you know any solutions to help stop content from being ripped off? I'd really appreciate it.
Here is my web blog - Abercrombie Et Fitch
You really make it seem so easy with your presentation but I find this
ReplyDeletetopic to be actually something which I think I would never understand.
It seems too complex and extremely broad for me.
I'm looking forward for your next post, I'll try to get the hang of it!
Here is my webpage: www.tedxyse.com
Wow, wonderful blog format! How long have you been blogging
ReplyDeletefor? you made running a blog glance easy. The total glance of
your web site is magnificent, as smartly as the content!
my website - Evgeni Malkin Authentic Jersey
Your means of explaining all in this paragraph is really pleasant, every one can effortlessly understand
ReplyDeleteit, Thanks a lot.
my homepage: Michael Kors Bags
After I originally left a comment I appear to have clicked on the -Notify me when new comments are added- checkbox and from
ReplyDeletenow on each time a comment is added I receive 4 emails with the exact same comment.
Is there a way you can remove me from that service?
Thanks!
Visit my homepage; explorethecapabilities.com
Really no matter if someone doesn't be aware of after that its up to other people that they will help, so here it happens.
ReplyDeletemy blog post; Discover More Here