한국어
Qt
 

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

makersweb 2021.08.20 20:46 조회 수 : 80

응용프로그램에서 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코드를 스캔해보자!

QRcode.png

번호 제목 글쓴이 날짜 조회 수
공지 Qt프로그래밍(QtQuick) Beginner를 위한 글 읽는 순서 운영자 2019.01.05 30656
146 Qt 응용프로그램에서 PDF 문서 렌더링 file makersweb 2021.09.23 5
145 QML에서 Websocket 서버와 통신 updatefile makersweb 2021.09.18 9
144 QML 코딩 규칙 makersweb 2021.09.05 104
» QML 에서 QR코드 생성 file makersweb 2021.08.20 80
142 앱을 종료할 때 QML 바인딩 오류를 피하는 방법 makersweb 2021.08.08 35
141 Qt 응용프로그램에서 Lottie Animation사용 file makersweb 2021.05.30 245
140 싱글 샷(Single-Shot) 시그널/슬롯 연결 makersweb 2021.05.12 172
139 응용프로그램 자동실행 설정 (on Windows) makersweb 2021.05.08 156
138 Qt 6 에서 프로퍼티 바인딩 makersweb 2021.04.03 234
137 QML과 JavaScript 의 숫자 관련 내장된 함수 makersweb 2021.03.28 137
136 Qt 5 코드를 Qt 6로 포팅하기 위해 도움이 되는 Clazy Framework file makersweb 2021.03.01 265
135 C++로 작성한 클래스를 QML에서 생성 file makersweb 2021.02.10 903
134 Qt MQTT의 pus/sub 튜토리얼 file makersweb 2021.02.06 407
133 Qt 를 사용하거나 기반으로 하는 응용프로그램 file makersweb 2021.01.30 932
132 Loader를 사용하여 동적으로 QML 로드 makersweb 2021.01.19 455
131 QThread 및 QMutex 예제 makersweb 2021.01.12 357
130 그래픽 소프트웨어에서 디자인 내보내기 (Exporting Designs from Graphics Software) j2doll 2020.12.25 164
129 Qt5Compat 라이브러리를 사용하여 Qt5에서 Qt6로 포팅 [2] makersweb 2020.12.05 288
128 Qt Quick Controls 2에 네이티브 데스크탑 스타일 추가 file makersweb 2020.11.23 205
127 QML 바인딩 끊김 진단 makersweb 2020.11.08 304