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
Run the application in simulator or on target to see the real generated QR Code with the text provided by the user.
Widget Group
The QR Code can be found in the Images widget group 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
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
qrCode1.invalidate()
if you change the appearance of the widget.