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 Group	Property Descriptions
Name	Name of the widget. Name is the unique identifier used in TouchGFX Designer and code.
Location	X 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.
Configuration	QR 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.
Appearance	Alpha 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.
Mixin	Draggable 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 actions	Description
Move widget	Move a widget to a new position over time.
Fade widget	Modify alpha value of widget over time.
Hide widget	Hides a widget (sets visibility to false).
Show widget	Make 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

API reference for the QR Code class