한국어
Qt
 

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

makersweb 2021.08.20 20:46 조회 수 : 3941

응용프로그램에서 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 117009
40 Android 애플리케이션 서명 구성 file makersweb 2023.12.17 4541
39 Qt 스마트 포인터 (QSharedPointer, QScopedPointer, QPointer) makersweb 2022.08.18 4529
38 ShaderEffect QML Type을 이용한 버튼 클릭 효과 file makersweb 2020.05.22 4481
37 Qt 6의 C++ 프로퍼티 바인딩 예제 makersweb 2021.11.01 4458
36 Qt Bluetooth 관련 기능 확인 사항 makersweb 2018.07.10 4423
35 안드로이드 가상장치 사용 file makersweb 2019.01.13 4410
34 tslib의 ts_calibrate를 응용해서 Qt로 터치보정기능 구현 file makersweb 2019.04.06 4337
33 하드디스크 드라이브 여유 공간 계산 file makersweb 2023.01.15 4328
32 ApplicationWindow 와 메뉴바(MenuBar)구성 file makersweb 2020.01.04 4302
31 Qt 6에서 QList 변경사항 makersweb 2020.10.08 4266
30 QML과 코루틴(Coroutines) makersweb 2020.11.03 4243
29 Qbs 프로젝트를 정의하기 위해 사용되는 몇가지 중요한 아이템들 file makersweb 2019.10.13 4239
28 Qt 5 코드를 Qt 6로 포팅하기 위해 도움이 되는 Clazy Framework file makersweb 2021.03.01 4233
27 Embedded Linux 에서 Qt 및 Graphics Stack file 운영자 2020.05.27 4225
26 QRhi 에 대해서 file makersweb 2023.12.29 4214
25 QScopedPointer 소개 및 사용법 makersweb 2019.11.29 4182
24 단일 인스턴스 Qt 응용 프로그램(Single-instance Application) makersweb 2022.06.23 4128
23 Qt MQTT 에 대해서 file makersweb 2020.06.02 4080
22 QMake 프로젝트를 CMake 프로젝트로 변환 with qmake2cmake makersweb 2022.09.17 4073
21 QML 바인딩 끊김 진단 makersweb 2020.11.08 4044