enpl

Blog

28
Mar

Mobile QR code reader in JavaScript, HTML5 for Mosync

Mobile QR code reader in JavaScript, HTML5 for Mosync

W tym tutorialu pragnę przedstawić Państwu metodę na stworzenie mobilnego czytnika QR kodów do wieloplatformowego użycia dla aplikacji mobilnych.

Opracowany czytnik skierowany jest do użycia w środowisku MoSync. Czytnik działa na zasadzie wykonania zdjęcia, które następnie analizowane jest przez kod JS a następnie zwracany jest wynik w formie alertu. Czytnik z sukcesem przetestowany został na telefonie HTC Desire Z , Android 2.3.

  1. Implementacja czytnika opiera się na pobraniu wszystkich plików JS ze strony https://github.com/LazarSoft/jsqrcode/tree/master/src następnie w kodzie strony index.html (w sekcji head) umieszczamy następujący fragment kodu, który ma za zadanie załadowanie plików JS naszego czytnika do strony.
    <script type=”text/javascript” src=”js/grid.js”></script>
    <script type=”text/javascript” src=”js/version.js”></script>
    <script type=”text/javascript” src=”js/detector.js”></script>
    <script type=”text/javascript” src=”js/formatinf.js”></script>
    <script type=”text/javascript” src=”js/errorlevel.js”></script>
    <script type=”text/javascript” src=”js/bitmat.js”></script>
    <script type=”text/javascript” src=”js/datablock.js”></script>
    <script type=”text/javascript” src=”js/bmparser.js”></script>
    <script type=”text/javascript” src=”js/datamask.js”></script>
    <script type=”text/javascript” src=”js/rsdecoder.js”></script>
    <script type=”text/javascript” src=”js/gf256poly.js”></script>
    <script type=”text/javascript” src=”js/gf256.js”></script>
    <script type=”text/javascript” src=”js/decoder.js”></script>
    <script type=”text/javascript” src=”js/QRCode.js”></script>
    <script type=”text/javascript” src=”js/findpat.js”></script>
    <script type=”text/javascript” src=”js/alignpat.js”></script>
    <script type=”text/javascript” src=”js/databr.js”></script> 

  2. Do poprawnego działania czytnika wymagane jest także umieszczenie biblioteki JQuery w sekcji head naszego pliku index.html, którą można pobrać tutaj http://jquery.com/download/
    <script type=”text/javascript” charset=”utf-8″ src=”js/jquery.js”></script> 

  3. Ostatnim etapem umieszczenia czytnika na stronie jest dodanie to treści pliku index.html kodu JS wywołującego funkcję czytnika a następnie przycisk uruchamiający skanowanie:

    <script type=”text/javascript”>
    var capture = null;
    var image = null;
    /**
    * Show camera
    */
    function scanImage()
    {
    capture = navigator.device.capture;
    capture.captureImage(getImageSuccess, getImageFailure);
    }
    function getImageFailure(error){
    alert(‚Something went wrong…’);
    }
    function getImageSuccess(img){
    image = img;
    decodeImage();
    }
    function alertDecodeResult(result){
    alert(result);
    }
    function decodeImage(){
    imagePath = image[0][‚fullPath’]
    qrcode.callback = alertDecodeResult;
    qrcode.decode(imagePath);
    }
    </script>

    Przycisk:
    <button onclick=”scanImage()”>Skanuj</button>

Uwaga. Przedstawiony w niniejszym tutorialu kod napisany został dla środowiska MoSync, jednak można dostosować do do użycia w innych środowiskach.