跳转到主要内容

QR Code

A QR Code is a widget capable of drawing a QR code with supplied content to encode, and specified colors for foreground and background respectively.

Note
The preview QR Code shown on canvas in TouchGFX Designer is a static example, which always links to the documentation for the widget.

Run the application in simulator or on target to see the real generated QR Code with the text provided by the user.

QR Code running in the simulator

Widget Group

The QR Code can be found in the Images widget group in TouchGFX Designer.

QR Code in TouchGFX Designer

The properties for a QR Code in TouchGFX Designer.

Property GroupProperty Descriptions
NameName of the widget. Name is the unique identifier used in TouchGFX Designer and code.
LocationX and Y specify the top left corner of the widget relative to its parent.

The size of the widget is determined by the QR Code version.

Lock specifies if the widget should be locked in its current X and Y.
Locking the widget also disables interacting with the widget through the screen.

Visible specifies the visibility of the widget. Making the widget invisible also disables interacting with the widget through the screen.
ConfigurationQR Version specifies the QR Code range from version 1 to version 40.
Version 1 has 21x21 "bits". Version 40 has 177x177 "bits".

Scale specifies the scale in which to draw the QR Code.

Text specifies which content to encode into the QR Code.

Error Correction Code specifies the level of tolerance for erroneous codewords.
AppearanceAlpha specifies the transparency of the widget. The alpha value ranges between 0 and 255 for the widget. 0 is fully transparent and 255 is solid.

Foreground specifies the color used for the foreground. Default is black.

Background specifies the color used for the background. Default is white.
MixinDraggable specifies if the widget is draggable at runtime.

ClickListener specifies if the widget emits a callback when clicked.

FadeAnimator specifies if the widget can animate changes to its Alpha value.

MoveAnimator specifies if the widget can animate changes to X and Y values.

Interactions

The actions and triggers supported by a QR Code in TouchGFX Designer.

Actions

Standard widget actionsDescription
Move widgetMove a widget to a new position over time.
Fade widgetModify alpha value of widget over time.
Hide widgetHides a widget (sets visibility to false).
Show widgetMake a hidden widget visible (sets visibility to true).

Triggers

A QR Code does not emit any triggers.

Performance

The performance of a QR Code widget is slower than an image since the pixels are computed, but it is fast enough to be moved around the screen or faded in as part of simple animations.

For more details on drawing performance, read the General UI Component Performance section.

Examples

Generated Code

In the generated code for the View base class we can see how TouchGFX Designer sets up a QR Code. Buffers are set up in the header file (see highlighted lines). These are used for computation and storage of the QR code bit-values.

Screen1ViewBase.hpp
#ifndef SCREEN1VIEWBASE_HPP
#define SCREEN1VIEWBASE_HPP

#include <gui/common/FrontendApplication.hpp>
#include <mvp/View.hpp>
#include <gui/screen1_screen/Screen1Presenter.hpp>
#include <touchgfx/widgets/Box.hpp>
#include <touchgfx/widgets/QRCode.hpp>

class Screen1ViewBase : public touchgfx::View<Screen1Presenter>
{
public:
Screen1ViewBase();
virtual ~Screen1ViewBase();
virtual void setupScreen();

protected:
FrontendApplication& application() {
return *static_cast<FrontendApplication*>(touchgfx::Application::getInstance());
}

/*
* Member Declarations
*/
touchgfx::Box __background;
uint8_t qrBuffer_qrCode1[QRCODE_BUFFER_SIZE(1)];
uint8_t qrScratchBuffer_qrCode1[QRCODE_BUFFER_SIZE(1)];
touchgfx::QRCode qrCode1;

private:

};

#endif // SCREEN1VIEWBASE_HPP
Screen1ViewBase.cpp
#include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
#include <touchgfx/Color.hpp>

Screen1ViewBase::Screen1ViewBase()
{
qrCode1.setXY(0, 0);
qrCode1.setBuffers(qrBuffer_qrCode1, qrScratchBuffer_qrCode1);
qrCode1.setQRCodeVersion(1);
qrCode1.setScale(5);
qrCode1.convertStringToQRCode("SUPPORT.TOUCHGFX.COM");
add(qrCode1);
}

Screen1ViewBase::~Screen1ViewBase()
{

}

void Screen1ViewBase::setupScreen()
{

}
Caution
The function convertStringToQRCode may fail, if the string is longer than what can fit into the QRCode (depending of the level).

The user should check the return value of the function.

Tip
You can use these functions and the others available in the QRCode class in user code. Remember to force a redraw by calling qrCode1.invalidate() if you change the appearance of the widget.

API Reference