Johan den Ouden

QR Codes gebruiken in smartsite met eigen macro

Introductie

Op steeds meer website, met name mobiele websites en in gedrukte media wordt gebruik gemaakt van zogenaamde QR codes.

Volgens Wikipedia is de defenitie van een QR code:
"A QR Code is a specific matrix barcode (or two-dimensional code), readable by dedicated QR barcode readers and camera phones. The code consists of black modules arranged in a square pattern on a white background. The information encoded can be text, URL or other data."

De mobiele telefoons van tegenwoordig kunnen deze codes herkennen, uitlezen en interpreteren.
Een voorbeeld: Richt je telefoon op een dergelijke code en download direct het achterliggende pdf bestand op je mobiel zonder eerst op je mobiel naar de betreffende website te hoeven surfen.

Als een Proof-Of-Concept heb ik een eigen macro gemaakt waarmee dergelijke codes binnen smartsite iXperion kunnen worden aangemaakt en gebruikt. In deze blog wordt beschreven hoe je deze macro kan maken en gebruiken. Voor het genereren van de QR Code maak ik gebruik van de open source QR library (.Net) welke te vinden is op http://www.codeproject.com/KB/cs/qrcode.aspx, voor een beschrijving van de library verwijs ik naar http://twit88.com/platform/

Development omgeving opzetten

1. Download de source code van het c# voorbeeld project op http://www.codeproject.com/KB/cs/qrcode/QRCode.zip
2. Maak een nieuwe C# Class Library project aan en volg hier bij de stappen zoals beschreven in het artikel Building SXML components (http://docs.ixperion.smartsite.nl/doc/iXperion/DevGuide/Building_SXML_components.html) op de iXperion Community Site
3. Voeg de volgende extra referenties toe
   1. Smartsite.Web
   2. System.Data
   3. System.Drawing
   4. System.Xml
   5. ThoughtWorks.QRCode

De ThoughtWorks.QRCode library is de referentie naar open source QR library.

Code voor macro

De macro wordt volledig vast gelegd in de class qr. Hieronder volgt de volledige code van qr.cs.

using System;
using System.Collections.Generic;
using System.Text;
using System.Drawing;
using ThoughtWorks.QRCode.Codec;
using ThoughtWorks.QRCode.Codec.Data;
using ThoughtWorks.QRCode.Codec.Util;
using Smartsite.Base;
using Smartsite.Core;
using System.IO;
using System.Drawing.Imaging;

namespace WJOMacroModules
{
    /// <summary>
    /// Macro that generates a qr barcode image.
    /// </summary>
    public class qr : Module
    {
        private string sText="";
        private EncodingTypes _EncodingType = EncodingTypes.Byte;
        private ErrorCorrectTypes _ErrorCorrectMode = ErrorCorrectTypes.M;
        private int _size = 4;
        private int _version = 7;

        /// <summary>
        /// Gets or sets the text for the barcode
        /// </summary>
        ///
        [MemberOptions(MemberOptions.IsRequired)]
        public string text
        {
            get { return sText; }
            set { sText = value; }
        }

        /// <summary>
        /// Gets or sets the size (1..20, default = 4)
        /// </summary>
        ///
        public int size
        {
            get { return _size; }
            set { _size = value; }
        }

        /// <summary>
        /// Gets or sets the version (1..40, default = 7)
        /// </summary>
        ///
        public int version
        {
            get { return _version; }
            set { _version = value; }
        }

        /// <summary>
        /// EncodingType
        /// </summary>
        public enum EncodingTypes
        {
            /// <summary>
            /// Byte
            /// </summary>
            Byte,
            /// <summary>
            /// AlphaNumeric
            /// </summary>
            AlphaNumeric,
            /// <summary>
            /// Numeric
            /// </summary>
            Numeric
        }

        /// <summary>
        /// Gets or sets the EncodingType.
        /// </summary>
        /// <value>The EncodingType.</value>
        public EncodingTypes EncodingType
        {
            get { return _EncodingType; }
            set { _EncodingType = value; }
        }

        /// <summary>
        /// ErrorCorrectTypes
        /// </summary>
        public enum ErrorCorrectTypes
        {
            /// <summary>
            /// M
            /// </summary>
            M,
            /// <summary>
            /// L
            /// </summary>
            L,
            /// <summary>
            /// H
            /// </summary>
            H,
            /// <summary>
            /// Q
            /// </summary>
            Q
        }

        /// <summary>
        /// Gets or sets the ErrorCorrect Mode.
        /// </summary>
        /// <value>The Error Correct Mode.</value>
        public ErrorCorrectTypes ErrorCorrectMode
        {
            get { return _ErrorCorrectMode; }
            set { _ErrorCorrectMode = value; }
        }

        /// <summary>
        /// The method called bij smartsite
        ///
        /// </summary>
        public override void Execute()
        {
            if (sText.Length == 0)
            {
                throw new SmartsiteException("No text given.");
            }

            if ((_size < 0) || (_size > 20))
            {
                throw new SmartsiteException("Size must be between 1 and 20.");
            }

            if ((_version < 0) || (_version > 40))
            {
                throw new SmartsiteException("Version must be between 1 and 40.");
            }
            QRCodeEncoder qrCodeEncoder = new QRCodeEncoder();

            //  invoerbaar maken
            if (_EncodingType == EncodingTypes.Byte)
            {
                qrCodeEncoder.QRCodeEncodeMode = QRCodeEncoder.ENCODE_MODE.BYTE;
            }
            else if (_EncodingType == EncodingTypes.AlphaNumeric)
            {
                qrCodeEncoder.QRCodeEncodeMode = QRCodeEncoder.ENCODE_MODE.ALPHA_NUMERIC;
            }
            else if (_EncodingType == EncodingTypes.Numeric)
            {
                qrCodeEncoder.QRCodeEncodeMode = QRCodeEncoder.ENCODE_MODE.NUMERIC;
            }

            qrCodeEncoder.QRCodeScale = _size;
            qrCodeEncoder.QRCodeVersion = _version;

            // invoerbaar maken
            if (_ErrorCorrectMode == ErrorCorrectTypes.L)
                qrCodeEncoder.QRCodeErrorCorrect = QRCodeEncoder.ERROR_CORRECTION.L;
            else if (_ErrorCorrectMode == ErrorCorrectTypes.M)
                qrCodeEncoder.QRCodeErrorCorrect = QRCodeEncoder.ERROR_CORRECTION.M;
            else if (_ErrorCorrectMode == ErrorCorrectTypes.Q)
                qrCodeEncoder.QRCodeErrorCorrect = QRCodeEncoder.ERROR_CORRECTION.Q;
            else if (_ErrorCorrectMode == ErrorCorrectTypes.H)
                qrCodeEncoder.QRCodeErrorCorrect = QRCodeEncoder.ERROR_CORRECTION.H;

            Bitmap bitmap;
            String data = sText;
            bitmap = qrCodeEncoder.Encode(data);

            MemoryStream output = new MemoryStream(4000);
            bitmap.Save(output, ImageFormat.Png);

            byte[] buffer = new byte[output.Length];
            output.Seek(0, SeekOrigin.Begin);
            output.Read(buffer, 0, buffer.Length);

            Context.Response.ContentType = "image/png";
            Context.Response.Cacheable = false;
            Result.Set(buffer);
        }
    }
}

Opnemen van code in smartsite omgeving

1. Compileer de Class Library in de qr.dll
2. Kopieer de dll en de ThoughtWorks.QRCode.dll (library) in de bin map van de website
3. Reload website

Binnen de website is nu de macro <se:qr /> beschikbaar.

Gebruik van macro

Het aanroepen van de macro met de gewenste parameters is het enige wat moet gebeuren om de QR Code te genereren.

Voorbeeld 1: QR Code met de tekst "Smartsite en QR code zijn een geweldige combinatie"

<se:qr encodingtype="byte" errorcorrectmode="m" size="2" text="Smartsite en QR code zijn een geweldige combinatie" />

Voorbeeld 2: Link naar een voorbeeld PDF http://www.waltzballs.org/fig/pdfex.pdf

<img alt="Link naar de pdf" src="/smartsite.net?id=QRBARCODEIMAGEGENERATOR&qrt=http%253a%252f%252fwww.waltzballs.org%252ffig%252fpdfex.pdf" />

Bij voorbeeld 2 wordt gebruikt gemaakt van een helper item QRBARCODEIMAGEGENERATOR. De inhoud van deze application is:

<se:qr encodingtype="byte" errorcorrectmode="m" size="2"  text="no text" />

Afsluitend

Ik hoop met deze een blog een inzicht gegeven te hebben in de wereld van QR Codes. Let wel de code is gebouwd als een POC, lang niet alle properties en methodes van de open source QR Code library zijn ontsloten via de macro. Pas de code naar wens aan!