Archive for December 2012

QZXing, Códigos QR y MeeGo

December 31st, 2012

ZXing es una biblioteca open source para el procesamiento de códigos de barras, la biblioteca ha sido ampliamente portada a varias plataformas, en Qt podemos usar QZXing, la cual se integra fácilmente en Symbian y Harmattan.

En este ejemplo vamos a crear un pequeño lector de codigos QR, pero QZXing es capaz de procesar muchos otros formatos de codigos de barras, como por ejemplo Data Matrix (V1.1), Aztec Code (V1.2), UPC_E, UPC_A, EAN_8, EAN_13, CODE_128, CODE_39 e ITF entre otros.

Para comenzar, hay que bajar y agregar QZXing en nuestro proyecto, para ello solo debemos crear una carpeta QZXing en la raiz del proyecto y copiar dentro de ella todos los archivos que conforman QZXing.

Luego la incluiremos en nuestro proyecto agregando la siguiente linea en el archivo .pro.

include(QZXing/QZXing.pri)

A continuación declararemos la headers de QZXing en el archivo main.cpp.

#include 
#include "qmlapplicationviewer.h"

#include 

Q_DECL_EXPORT int main(int argc, char *argv[])
{
    QZXing::registerQMLTypes();

    QScopedPointer app(createApplication(argc, argv));

    QmlApplicationViewer viewer;
    viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
    viewer.setMainQmlFile(QLatin1String("qml/qrcodereader/main.qml"));
    viewer.showExpanded();

    return app->exec();
}

Lo bueno de QZXing es que se integra fácilmente con QML, el primer paso es crear los imports a QtMultimediaKit y QZXing, luego crearemos un objeto QZXing que sera el encargado de leer la imagen (imageToDecode) que el elemento Camera tomara cuando presionemos el botón Scan.

Como verán usar e integrar QZXing en un proyecto Harmattan es muy simple, yo no lo he probado en Symbian, pero su integración y uso es similar, lo único que no me ha gustado es como ha quedado el posicionamiento del elemento Camera, primero tuve que usar posicionamiento absoluto en vez de relativo, ya que el elemento Camera no se lleva bien con los anchors, segundo, tuve que aplicar una rotación de 90° ya que el elemento Camera se inicializa en modo landscape y como no encontré ninguna forma de ponerlo en modo retrato decidí usar la rotación.

import QtQuick 1.1
import com.nokia.meego 1.0
import QtMultimediaKit 1.1
import QZXing 1.2

Page {
    id: mainPage
    orientationLock: PageOrientation.LockPortrait
    tools: commonTools

    Rectangle {
        id:header
        width:parent.width
        height: 72
        z:10
        color:"#002c78"
        Text {
            id:title
            text: "QZXing"
            anchors.left: parent.left
            anchors.leftMargin: 8
            anchors.verticalCenter: parent.verticalCenter
            color:"#fff"
            font.pixelSize: 32
            font.weight: Font.Normal
            font.family: "Nokia Pure Text"
            lineHeightMode: Text.FixedHeight
            lineHeight: font.pixelSize * 1.1
        }
    }

    QZXing {
        id: decoder
        onDecodingStarted: console.log("decoding ...")
        onTagFound: capturedText.text = tag
        onDecodingFinished: console.log("decoding finished " + (succeeded===true ? "successfully" : "unsuccessfully") )
    }

    Camera {
        id: camera
        x: -80
        y: -32
        rotation: 90
        width:640
        height: 640
        focus: visible
        captureResolution : "1024x768"
        onImageCaptured : {
            imageToDecode.source = preview
            decoder.decodeImageQML(imageToDecode);
        }
    }

    Image{
        id: imageToDecode
        height: 360
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.top: header.bottom
        anchors.topMargin: 0
        visible: false
    }

    Label {
        id:capturedText
        anchors.bottom: scanButton.top
        anchors.bottomMargin: 8
        anchors.horizontalCenter: parent.horizontalCenter
        font.pixelSize: 24
        font.weight: Font.Normal
        font.family: "Nokia Pure Text"
        color:"#333"
    }

    Button {
        id:scanButton
        text: "Scan"
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 16
        anchors.horizontalCenter: parent.horizontalCenter
        onClicked: {
            camera.captureImage();
        }
    }
}

Para finalizar una imagen del ejemplo funcionando.

QZXing Demo

Development , , , 2 responses