C# : Générer des codes QR à partir d’un sitemap XML

Dans cet article, nous allons voir ensemble comment développer un outil permettant de générer des codes QR à partir du plan d’un site rédigé sous forme d’un fichier XML.

Pour rappel, le code QR est un type de code-barres en deux dimensions que l’on voit de plus en plus sur bon nombre de supports. Un code QR est constitué de petits points noirs disposés dans un carré. Ces points sont agencés de façon à pouvoir stocker une information : cela peut être l’URL d’un site, un texte, une adresse mail, etc.

Pour réaliser ce projet, nous allons utiliser le langage C# et la bibliothèque QRCode.Net, disponible à l’adresse http://qrcodenet.codeplex.com.

Création du projet

Le fonctionnement de l’application sera ici assez simple. Nous voulons que cette application génère, à partir d’une URL vers un fichier « sitemap.xml » saisie par l’utilisateur, des fichiers PNG pour chaque code QR créé à partir du plan de site, ainsi qu’un index, au format HTML, qui contiendra tous les liens du plan du site avec leur code QR associé.

Ouvrez Visual Studio et créez un nouveau projet de type « Application Windows Forms ». Depuis l’explorateur de solutions, ajoutez une référence vers la DLL de QRCode.Net. La bibliothèque QRCode.Net fourni deux DLL différentes, l’une pour le framework .NET 4.5, l’autre pour les autres versions du framework.

Codons !

Affichez le code du fichier « Form1.cs » et renseignez les références ci-dessous :

using System.Diagnostics;
using System.IO;
using System.Drawing.Imaging;
using System.Xml;
using System.Xml.Linq;
using Gma.QrCodeNet.Encoding.Windows.Render;
using Gma.QrCodeNet.Encoding;

Affichez ensuite le formulaire « Form1 » et ajoutez les contrôles suivants :

  • un champ texte pour la saisie d’une URL vers un fichier XML,
  • un bouton pour déclencher la génération des codes QR,
  • un contrôle de type « SaveFileDialog » pour permettre de choisir à quel endroit l’index et les codes QR seront enregistrés.

Interface de l'application du générateur de codes QR

 

Ajoutez un évènement « Click » au bouton en double-cliquant dessus. Dans la nouvelle fonction qui a été créée, insérez le code suivant :

QrEncoder _objQRCodeEncoder = new QrEncoder(ErrorCorrectionLevel.M);
QrCode _objQRCode;
GraphicsRenderer _objQRCodeRenderer = new GraphicsRenderer(new FixedModuleSize(4, QuietZoneModules.Two), Brushes.Black, Brushes.White);

Nous déclarons ici trois objets :

  • un objet de type « QrEncoder » qui s’occupe de coder l’information,
  • un objet de type « QrCode » qui représente le code QR,
  • un objet de type « GraphicsRenderer » qui transforme l’information encodée par « QrEncoder » sous la forme d’un fichier image (PNG, JPG, etc).

Ajoutons ensuite le code suivant :

// Affiche la boîte de dialogue d'enregistrement.
saveFileDialog1.Filter = "Fichier HTML (*.html)|*.html";
saveFileDialog1.FileName = "index.html";
if (saveFileDialog1.ShowDialog() == DialogResult.OK)
{

}

Ce code permet d’afficher la boîte de dialogue d’enregistrement de fichiers. Ici, on demande à l’utilisateur de choisir l’emplacement de l’index et des codes QR que nous allons créer. Le code qui sera à l’intérieur du bloc IF sera exécuté si l’utilisateur a pressé le bouton « OK » dans la boîte de dialogue.

A l’intérieur du bloc IF, ajoutons le code suivant :

// Créé un répertoire qui contiendra les codes QR de chaque lien.
string _strQRCodeRepertoire = String.Format("{0}\\images\\", Path.GetDirectoryName(saveFileDialog1.FileName));
Directory.CreateDirectory(_strQRCodeRepertoire);

// Charge le contenu du fichier XML.
XDocument _objXmlDocument = XDocument.Load(textBox1.Text);
XNamespace _objXmlNameSpace = _objXmlDocument.Root.GetDefaultNamespace();

// Parcours le fichier XML et créé le fichier HTML, ainsi que les codes QR.
var _objXmlSettings = new XmlWriterSettings();
_objXmlSettings.Indent = true;
using (var _objXmlWriter = XmlWriter.Create(saveFileDialog1.FileName, _objXmlSettings))
{

}

Ici, nous créons un dossier où l’on va mettre les codes QR. Nous créons ensuite un objet de type « XDocument » et nous chargeons le fichier XML dedans, afin que nous puissions le parcourir facilement. Puis, nous déclarons un objet de type « XmlWriter » qui nous servira ici à générer l’index ligne par ligne.

A l’intérieur du bloc USING, ajoutez le long morceau de code suivant :

// Doctype.
_objXmlWriter.WriteDocType("html", "-//W3C//DTD XHTML 1.0 Transitional//EN", "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd", null);

// <html>
_objXmlWriter.WriteStartElement("html");

// <head>
_objXmlWriter.WriteStartElement("head");

// <title></title>
_objXmlWriter.WriteStartElement("title");
_objXmlWriter.WriteValue(String.Format("Index de \"{0}\"", textBox1.Text));
_objXmlWriter.WriteEndElement();

// </head>
_objXmlWriter.WriteEndElement();

// <body>
_objXmlWriter.WriteStartElement("body");

// <h1></h1>
_objXmlWriter.WriteStartElement("h1");
_objXmlWriter.WriteValue(textBox1.Text);
_objXmlWriter.WriteEndElement();

// <table>
_objXmlWriter.WriteStartElement("table");

// Génère un tableau de tous les liens.
int i = 0;
IEnumerable<XElement> _objXmlElements = from element in _objXmlDocument.Descendants(_objXmlNameSpace + "loc") select element;
foreach (XElement _objXmlElement in _objXmlElements)
{
  string _strQRCode = String.Empty;

  // Déclare un objet "MemoryStream" pour stocker le fichier PNG du code QR.
  MemoryStream _objMemoryStream = new MemoryStream();

  // Créé le code QR.
  _objQRCodeEncoder.TryEncode(_objXmlElement.Value, out _objQRCode);

  // Définit le chemin de destination du code QR.>
  _strQRCode = String.Format("{0}\\images\\qrcode_{1}.png", Path.GetDirectoryName(saveFileDialog1.FileName), i);

  // Enregistrement du code QR.
  _objQRCodeRenderer.WriteToStream(_objQRCode.Matrix, ImageFormat.Png, _objMemoryStream);

  using (FileStream _objFileStream = new FileStream(_strQRCode, FileMode.Create, FileAccess.Write)) {
    _objMemoryStream.WriteTo(_objFileStream);
  };

  // <tr>
  _objXmlWriter.WriteStartElement("tr");

  // <td></td> : première colonne : QRCode.
  _objXmlWriter.WriteStartElement("td");
  _objXmlWriter.WriteStartElement("img");
  _objXmlWriter.WriteStartAttribute("src");
  _objXmlWriter.WriteValue(String.Format("images/qrcode_{0}.png", i));
  _objXmlWriter.WriteEndAttribute();
  _objXmlWriter.WriteEndElement();
  _objXmlWriter.WriteEndElement();

  // <td></td> : deuxième colonne : lien.
  _objXmlWriter.WriteStartElement("td") ;
  _objXmlWriter.WriteStartElement("a");
  _objXmlWriter.WriteStartAttribute("href");
  _objXmlWriter.WriteValue(_objXmlElement.Value);
  _objXmlWriter.WriteEndAttribute();
  _objXmlWriter.WriteValue(_objXmlElement.Value);
  _objXmlWriter.WriteEndElement();
  _objXmlWriter.WriteEndElement();
  
  // </tr>
  _objXmlWriter.WriteEndElement();

  i++;
}

// </table>
_objXmlWriter.WriteEndElement();

// </body>
_objXmlWriter.WriteEndElement();

// </html>
_objXmlWriter.WriteEndElement();

// Fin du document.
_objXmlWriter.WriteEndDocument();

Dans ce code, nous récupérons les URL stockés dans le plan du site (dans la boucle foreach) et nous générons, en même temps,  le code de l’index (en utilisant « XmlWriter »), ainsi que les codes QR, grâce aux objets définis au tout début de la fonction.

Nous voulons que cette application affiche l’index fraichement généré dans le navigateur. Pour cela, ajoutons ce bout de code juste après le bloc USING :

// Affiche l'index généré.
Process p = new Process();
p.StartInfo.FileName = saveFileDialog1.FileName;
p.Start();

Ici, un nouveau processus est créé et a pour chemin l’index. En lançant ce processus, Windows va automatiquement trouver le programme associé à ce type de fichier, en l’occurrence ici le navigateur par défaut, et le lancer. Ce qui donne ceci :

Index généré avec les codes QR

 

Conclusion

Notre application est désormais achevée. Certes, elle est loin d’être complète mais elle a le mérite de faire ce qu’on lui demande. Vous êtes libre de l’améliorer comme bon vous semble, en y ajoutant des fonctionnalités.

N’oubliez pas non plus d’aller jeter un œil sur la documentation de QRCode.Net à l’adresse http://qrcodenet.codeplex.com/documentation, pour vous permettre d’exploiter toutes les fonctionnalités de la bibliothèque, comme par exemple, la personnalisation du code QR en changeant les couleurs, le niveau de correction d’erreurs, ou encore l’utilisation des contrôles de prévisualisation mis à disposition par la bibliothèque.