Skip to content

Example for displaying QR codes in QML #733

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions example/CMakeLists.txt
100644 → 100755
Original file line number Diff line number Diff line change
Expand Up @@ -56,4 +56,9 @@ if (BUILD_WRITERS)
add_executable (ZXingQtWriter ZXingQtWriter.cpp)
target_link_libraries(ZXingQtWriter ZXing::ZXing Qt::Gui)
endif()

if (TARGET Qt::Multimedia AND TARGET Qt::Quick)
add_executable(ZXingQtQmlWriter ZXingQtQmlWriterMain.cpp ZXingQtQmlWriter.qrc ZXingQtQmlWriter.h ZXingQtQmlWriter.cpp)
target_link_libraries(ZXingQtQmlWriter ZXing::ZXing Qt::Gui Qt::Multimedia Qt::Quick)
endif()
endif()
32 changes: 32 additions & 0 deletions example/ZXingQtQmlWriter.cpp
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
// SPDX-License-Identifier: Apache-2.0
#include "ZXingQtQmlWriter.h"
#include "BarcodeFormat.h"
#include "BitMatrix.h"
#include "MultiFormatWriter.h"
#include <QPainter>
#include <algorithm>

ZXingQtQmlWriter::ZXingQtQmlWriter(QQuickPaintedItem* parent) : QQuickPaintedItem{parent}
{}


void ZXingQtQmlWriter::generateBarcode(const QString &text)
{
auto writer = ZXing::MultiFormatWriter(ZXing::BarcodeFormat::QRCode);
auto matrix = writer.encode(text.toStdString(), 0, 0);
auto bitmap = ZXing::ToMatrix<uint8_t>(matrix);

m_qrCode = QImage(bitmap.data(), bitmap.width(), bitmap.height(), bitmap.width(), QImage::Format::Format_Grayscale8).copy();
this->update();
}

void ZXingQtQmlWriter::paint(QPainter *painter)
{
//Ensuring that QR code is drawn as a rectangle
qreal minSize = std::min(boundingRect().width(), boundingRect().height());
QRectF scaledRect{0,0,minSize,minSize};
// Center the scaled image within the container
scaledRect.moveCenter(boundingRect().center());

painter->drawImage(scaledRect, m_qrCode);
}
34 changes: 34 additions & 0 deletions example/ZXingQtQmlWriter.h
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
// SPDX-License-Identifier: Apache-2.0
#ifndef ZXINGQTQMLWRITER_H
#define ZXINGQTQMLWRITER_H

#include <QObject>
#include <QQuickPaintedItem>
#include <QQmlEngine>
#include <QImage>

//Example of class which can draw QR code in QML based on
//QImage generated by ZXing
class ZXingQtQmlWriter : public QQuickPaintedItem
{
Q_OBJECT
QML_ELEMENT

public:
explicit ZXingQtQmlWriter(QQuickPaintedItem* parent = nullptr);

//Method based on code from ZXingQtWriter.cpp created by Axel Waggershauser.
//Method uses ZXing::BarcodeFormat::QRCode format - different formats can be
//supported by passing the format as argument or changing format inside method
//implementation
Q_INVOKABLE void generateBarcode(const QString &text);

// QQuickPaintedItem interface
void paint(QPainter *painter);

private:
QImage m_qrCode;
};


#endif // ZXINGQTQMLWRITER_H
50 changes: 50 additions & 0 deletions example/ZXingQtQmlWriter.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 2.15
import ZXing 1.0

ApplicationWindow {
id: app
visible: true
width: 480
height: 640
title: Qt.application.name

background: Rectangle {
color: "#2e2f30"
}

ColumnLayout {
id: appLayout
anchors.fill: parent
//Creating instance of ZXingQtQmlWriter that displays QR code
ZXingQtQmlWriter {
id: qrCode

Layout.fillHeight: true
Layout.fillWidth: true
Layout.margins: 25
Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
}

RowLayout {
Layout.margins: 50
Layout.alignment: Qt.AlignTop

TextField {
id: codeContentsInput
Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter

placeholderText: "Enter contents of QR code"
onAccepted: qrCode.generateBarcode(codeContentsInput.text)
}

Button {
Layout.alignment: Qt.AlignHCenter
text: "Generate"
onClicked: qrCode.generateBarcode(codeContentsInput.text)
}
}
}
}
5 changes: 5 additions & 0 deletions example/ZXingQtQmlWriter.qrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<RCC>
<qresource prefix="/">
<file>ZXingQtQmlWriter.qml</file>
</qresource>
</RCC>
31 changes: 31 additions & 0 deletions example/ZXingQtQmlWriterMain.cpp
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
/*
* Copyright 2020 Axel Waggershauser
*/
// SPDX-License-Identifier: Apache-2.0

#include <QGuiApplication>
#include <QQmlApplicationEngine>

#include "ZXingQtQmlWriter.h"

int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif
QGuiApplication app(argc, argv);
app.setApplicationName("ZXingQtQmlWriter");

ZXingQtQmlWriter writer;
//Registering ZXingQtQmlWriter instance so it is created on QML level.
//Can be done directly inside CMake using qt_add_qml_module macro
qmlRegisterType<ZXingQtQmlWriter>("ZXing",1,0, "ZXingQtQmlWriter");

QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/ZXingQtQmlWriter.qml")));
if (engine.rootObjects().isEmpty()) {
return -1;
}

return app.exec();
}