Blog

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.