QML and Qt Quick QML 에서 QR코드 생성

응용프로그램에서 QR코드를 생성하기 위한 다양한 오픈소스 라이브러리가 있다.

Qt응용프로그램에서도 QR코드 생성을 위해 사용 할 수 있는 많은 라이브러리가 있다. 그 중 레거시 JavaScript 라이브러리를 이용하여 QML수준에서 QR코드를 생성해본다.

사용하려는 라이브러리의 저장소는 다음과 같다.

https://github.com/kazuhikoarase/qrcode-generator/tree/master/js

이 라이브러리는 기본적으로 HTML에서 QR를 생성하기 위해 만들어 졌으며 qrcode.js 파일을 제공한다. HTML에서는 다음과 같이 사용된다.

<script type="text/javascript" src="qrcode.js"></script>

<div id="placeHolder"></div>

var typeNumber = 4;
var errorCorrectionLevel = 'L';
var qr = qrcode(typeNumber, errorCorrectionLevel);
qr.addData('Hi!');
qr.make();
document.getElementById('placeHolder').innerHTML = qr.createImgTag();

궁극적으로 이 라이브러리는 QR코드를 생성하고 img태그를 반환한다. 반환된 데이터를 div 요소에 삽입하여 화면에 출력한다.

그러면 이것을 우리의 Qt응용프로그램으로 가져오자. Qt 5.15 기준으로 Qt의 JavaScript 엔진은 ECMAScript 7을 지원하며 QML 의 Text 아이템은 HTML의 몇 가지 태그를 지원하므로 라이브러리를 그대로 사용할 수 있을 것이다. (지원되는 HTML 하위 집합)

실제로 사용 방법은 다음과 같이 매우 간단하다.

import QtQuick 2.12
import "qrcode.js" as QRCode

Window {
    visible: true
    width: 300
    height: 300
    title: qsTr("Hello World")

    Text {
        anchors.centerIn: parent
        font.pointSize: 14
        wrapMode: Text.WordWrap
        textFormat: Text.StyledText
        horizontalAlignment: parent.hAlign

        text: {
            var typeNumber = 0 //4
            var errorCorrectionLevel = 'L';
            var qr = QRCode.qrcode(typeNumber, errorCorrectionLevel);
            qr.addData('사용자가 제공하는 유니코드 텍스트');
            qr.make();
            return qr.createImgTag(3);
        }
    }
}

addData 메서드를 통해 텍스트를 전달한다. createImgTag의 반환값을 그대로 반환한다. 변환하려는 텍스트만 전달하면 된다.

앱을 실행하면 윈도우에 다음과 같이 QR코드가 그려진다. 스마트폰을 꺼내 카메라앱을 실행하고 아래 QR코드를 스캔해보자!