응용프로그램에서 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코드를 스캔해보자!
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
공지 | Qt프로그래밍(QtQuick) Beginner를 위한 글 읽는 순서 | 운영자 | 2019.01.05 | 86882 |
8 |
ShaderEffect QML Type 을 이용한 그래픽효과
![]() | makersweb | 2018.12.09 | 2200 |
7 |
Qml에서 커튼효과 구현 예제 - Shader Effects
![]() | 운영자 | 2018.12.05 | 1175 |
6 |
QML에서 동적으로 텍스트 다국어 처리
![]() | makersweb | 2018.11.04 | 4298 |
5 |
Qml에서 키보드 입력 이벤트 핸들링
![]() | makersweb | 2018.08.09 | 3700 |
4 | Qml 및 C++개발시 유용한 팁 [3] | makersweb | 2018.04.06 | 6119 |
3 | QML에서 undefined를 확인하는 방법 | makersweb | 2017.11.29 | 1546 |
2 |
Qml 사용자 ScrollBar 구현
![]() | makersweb | 2015.07.24 | 6275 |
1 | z-order 를 컨트롤 하기위한 방법 | makersweb | 2015.05.13 | 6657 |