한국어
Qt
 

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

makersweb 2021.08.20 20:46 조회 수 : 882

응용프로그램에서 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 85349
156 단일 인스턴스 Qt 응용 프로그램(Single-instance Application) makersweb 2022.06.23 693
155 Qt로 작성된 iOS 앱에서 시리얼 통신 file makersweb 2022.04.30 807
154 VirtualKeyboard 스타일 커스터 마이징 makersweb 2022.03.13 448
153 성능 고려 및 제안 사항 makersweb 2022.03.07 493
152 Binding 타입으로 객체 속성 간 묶기 makersweb 2022.03.04 404
151 Qt Bluetooth Low Energy 개요 makersweb 2022.02.13 650
150 Qt Android 앱에 AdMob 배너달기 file makersweb 2021.12.04 385
149 Qt 6의 C++ 프로퍼티 바인딩 예제 makersweb 2021.11.01 845
148 QML에서 앵커(anchors)로 위치 지정 file makersweb 2021.10.05 3701
147 안드로이드용 Qt 6.2 makersweb 2021.10.02 490
146 Qt 응용프로그램에서 PDF 문서 렌더링 file makersweb 2021.09.23 652
145 QML에서 Websocket 서버와 통신 file makersweb 2021.09.18 806
144 QML 코딩 규칙 makersweb 2021.09.05 3174
» QML 에서 QR코드 생성 file makersweb 2021.08.20 882
142 앱을 종료할 때 QML 바인딩 오류를 피하는 방법 makersweb 2021.08.08 487
141 Qt 응용프로그램에서 Lottie Animation사용 file makersweb 2021.05.30 867
140 싱글 샷(Single-Shot) 시그널/슬롯 연결 makersweb 2021.05.12 740
139 응용프로그램 자동실행 설정 (on Windows) makersweb 2021.05.08 555
138 Qt 6 에서 프로퍼티 바인딩 makersweb 2021.04.03 761
137 QML과 JavaScript 의 숫자 관련 내장된 함수 makersweb 2021.03.28 1353