Getting started

Getting started

1 Overview

Boring old-school qrcode Qrcodes (or ‘Quick Response Code’) are machine-readable optical labels in the shape of matrix bar-codes.
Smart-phones can easily recognize and read such 2 dimentional bar-codes. Qrcodes may contain many different kind of data: raw text but also internet address, GPS position, phone number, sms message, email and even geographic position on earth!
Some of these formatted contents may trigger events on smart-phones, like activating your web browser with a predefined internet address or pre-filling an email for you.

1.1 Qrcode Elements

QrcodeLab - qrcode generator - better and more appealing design with flower and ladybug Qrcodes usually consists of black squares distributed on a squared grid.
But it’s also possible to look at it in a new perspective!
These severe-looking squares can take many different shape and color in order to be more discreet and visually more pleasant.
To achieve this, lets separate the various elements that make up a qrcode.

First, as we move on from a black and white square world to a colorful shapes one, we will now talk about dark and light elements, targets and points.

1.1.1 The Background

Think of it as a safe quiet zone around and beneath the qrcode, of uniform color. This is required to help the qrcode decoding.

Your background may take different forms. Also, depending of the image you place your qrcode on, you may decide to have more or less visible background – or even a totally transparent one.

Some examples:QRcodeLab - different possible qrcode background forms

1.1.2 The Targets

Targets are sets of concentric strips alternately dark and light. Those strips are usually squared but can adopt many different shapes.
Why target? Because they’re used as finder elements, as well as they help to define the position, orientation and alignment of the matrix bar-code. Broadly speaking, they do not contain data but are safeguards to locate and read the qrcode data.
Qrcodes always have 3 big targets and one (or more, depending on the quantity of data) small target. Targets have 3 concentric stripes: dark-light-dark. Big targets may show an additional light strip as they are located near the edge and qrcodes need a light quite zone for optimal decoding. We need some minimal contrast to have the target pattern recognized.

Targets can take many different forms, like:QRcodeLab - different qrcode targets forms design examples

1.1.3 The Dots

With the dots, you’re at the heart of the content of qrcodes! The positions of the dots will determine the technical parameters as well as the encoded content of your qrcode.
Dark dots usually represent the data. Light dots help recognize dark dots, especially in case the background image is also dark or there are dark spots. We need some minimal contrast to have the dots pattern recognized.

Dots can also take many different forms! Some examples:QRcodeLab - different qrcode dots forms design examples

2 GUI Header

This is the upper part of the graphical user interface!
It looks that way:QRcodeLab web application GUI header

Here you’ll find, from left to right:

  • a valid replica of your qrcode at size 1:1 (i.e. at the scale of 1 dot for 1 pixel),
  • a drop-down menu for you to define the content of your qrcode (if you’re logged in)
  • a user-centric drop-down menu that display some information like your login name, the maximum image size, and your available qrcode quota.

2.1 QR Content

This drop-down menu is accessible if you’re authenticated and have a valid subscription plan. It’ll let you define the content of your qrcode. Depending of the length of your data, the qrcode appearance and size may change.

You can define several kind of content:QRcodeLab web application qrcode content widget

  • Text: raw text, write down whatever you want!
  • URL: this is an internet address. Not only a website address but also the trailing path and even the tracking code (if you plan to monitor a publishing campaign). Depending on the device on which your code will be read, this may trigger an event that will open a web browser with the url you defined.
  • SMS: this stands for ‘short message service’. You’ll be able to define a destination phone number and a short text message. Depending on the device on which your code will be read, this may trigger an event that will open a messaging app with your predefined data.
  • Call: use this option to drive someone to initiate call. Depending on the device on which your code will be read, this may trigger an event that will open the telephone app, pre-dialing the phone number you defined.
  • Email: here you can prepare an email with the target email address, a subject line and a text message. Depending on the device on which your code will be read, this may trigger an event that will open an email application with the predefined email.
  • Geo: specify a geographical position with latitude, longitude and altitude! Depending on the device on which your code will be read, this may trigger an event that will open a map application spotting your predefined location.
  • Wifi: encode a wifi name, authentication method and credential into a qrcode!
  • Google Play Store: link to a android app. Use the provided link to search for the desired app and then copy/paste the app link in the URL field.
  • Apple Play Store: link to a IOS app.
  • Google Maps: specify a Google Maps location. Use the provided link and follow intructions to get the link location and then paste it in the URL field.

2.2 User Menu

This drop-down menu gives access to a set of data and actions related to the user:

  • Login: self explaining, use this interface to log into your account (if you have one)! Otherwise, just read below.
  • Sign up: here you’ll be able to create your personal account. You just need a valid email account and a password. Be aware that we’ll send a confirmation email to the address you filled in to complete the registration procedure. Otherwise, any non validated account remains unusable and will be deleted within 48 hours.
  • Reset password: a simple form to reset your password. Then you’ll receive an email, just follow the instructions!
  • Retrieve previous image: recover the last downloaded image. Works only within the current user session as locally stored data using the browser cache are deleted at logout.
  • My subscriptions: gives you access to the different paid plans you may sign up for. The qrcode content is editable only with a paid subscription plan.
  • Privacy: an abstract version of our privacy policy with a link to the full version. Here you’ll also be able to get a copy of your personal data. You’ll also find a link to delete your account.
  • Logout &quit: use this menu to logout and quit the QRcodeLab web application.QRcodeLab web application user menu

Example of menu for a registered user:

3 Widget Types

As similar widgets are employed throughout the user interface, we’ll first present the different kinds of widgets.

3.1 Color Chooser

QRcodeLab web application color chooserThis drop-down widget displays a tiny color square form and is used to assign color properties to qrcode objects (targets, dots or background).

QRcodeLab web application color chooser unfoldedDepending on the context, the full spectrum of colors may not be available.

Once unfolded, the central part allows to define saturation and value of the color whilst the right part defines the hue and the lower part the transparency value.

A dropper icon at the bottom-left unlocks the access to a pop-up window displaying a graphical color selection tool over your full image. Just click on the desired color to select it! A set of radio buttons on the lower part of the window (Hue -120°, Hue +120°, Complement) induce a chromatic changes useful to increase the contrast between qrcode elements and the background image, thus improving the qrcode data recognition. QRcodeLab qrcode generator color picker window - qr code design and art


















The drop down elements are used to select a shape for qrcode elements. They display a shape icon and the associated name on its right side.QRcodeLab web application dropdown chooser example
Click and choose the desired shape to apply it immediately to your qrcode.

3.3 Slider

Sliders are intended to apply affect on qrcode elements. These can be rotation, scale, noise (random function), or a blur effect.
QRcodeLab web application slider example Use the keyboard arrows to fine tune the value of the sliders.

3.4 Button

Buttons are used exclusively to trigger events like select and upload an image or reset the parameters to the default value.

4 Image Display Zone

This zone displays the chosen image along with the qrcode over it.
In case the image is larger than the screen you can scroll vertically and horizontally to display the proper par of your image. Size of the diplayed image also depends of your current subscription plan.

QRcodeLab - qr code with scale and rotate handles - qrcode design and artThe qrcode is displayed with default values. It’s surrounded with a bounding box used to manipulate the qrcode. Move it with your mouse it by clicking over it. Handles on each corner may allow you to scale and a fifth handle placed above to rotate it.





5 GUI Widget Zone

QRcodeLab web application GUI widget zoneThis chapter is related to the panels and tools located on the right part of the screen. We’ll make a top-down description.











5.1 Qrcode readability

This button widget performs a readability check of your qrcode with the current parameters and scaling. An emoticon will display the result, positive or negative.

Depending on the size of your image and your qrcode, this check can take a while!

5.2 Interaction Modes

We provide three interaction levels:

  • Dobby’ (basic),
  • Padawan’ (intermediate), or
  • Jedi’ (full control on all the settings).

Switch from one to another to accelerate your design process.
First, use the Dobby mode to define your settings globally. Then dive more into details with the Padawan and finally with the Jedi modes.
These interaction levels only affect the design and scope of the tools in the GUI widget zone.

5.2.1 Basic - Dobby

QRcodeLab web application Dobby user mode settingsIt’s the simpler user interface mode! Almost the qrcode elements are defined in a single pane.

5.2.1.1 Dots and Targets
  • Two color widgets to define the dark and light colors of both the qrcode dots and the targets.
  • A drop-down menu to set the shape of both the dark and light dots.
  • And another drop-down menu for the targets shape, whether big or small.
  • A slider widget to specify the blurring level of all the qrcode elements. This widget may be deactivated depending of your browser. Check our FAQ for more details.
5.2.1.2 Background

QRcodeLab web application background settingsUse this pane to set the qrcode background characteristics.

  • A color widget to define the background color.
  • A drop-down menu to set the background shape.
  • A slider widget to play with the blurring level of the background edges. This widget is deactivated if a 3D perspective effect is applied to the qrcode.
5.2.1.3 Scale Preview

QRcodeLab web application image scale preview settingsUse the slider widget in this pane to preview a scaled down version of your image.
You’ll be able to get an overview of your work. But, most importantly, in the case where the final representation of your work will be smaller than the one displayed on the screen, it may be particularly useful to check the readability of a scaled down version of your qrcode.

5.2.2 Intermediate - Padawan

This is the intermediate interaction mode. The set-up of dots and targets are performed in separate panes with more parameters.
Also, you can apply geometrical transformations (3D perspective) to your qrcodes.

5.2.2.1 Dots

QRcodeLab web application Padawan mode dots settingsAll the widgets in this section apply globally to both dark and light dots.

  • Two color widgets to define the dark and light colors of the dots.
  • A drop-down menu to set the shape of the dots.
  • A set of 4 slider widgets to apply some effects to the dots:

    • scaling effect (per dot),
    • rotate them,
    • randomize the rotation (per dot),
    • apply some blurring to smooth the dots edges. This widget may be deactivated depending of your browser. Check our FAQ for more details.
5.2.2.2 Targets

QRcodeLab web application Padawan mode targets settingsAll the widgets in this section apply both to big and small targets.

  • Two color widgets to define the dark and light colors of the targets.
  • A drop-down menu to set the shape of the targets. Some shape substitutions may apply for a subset of small targets.
  • Two sliders to rotate the targets (on the left side for big targets, on the right side for small targets).
  • A slider widget to apply a blurring effect on the targets edges.
5.2.2.3 Transform

QRcodeLab web application Padawan mode transform settingsThis section is about geometric transformations applied to the qrcodes. Use these tools to improve integration of qrcodes in your images.
The ‘Reset’ button will cancel any existing 3D (Perspective) effect.





QRcodeLab qrcode generator - qr code design shearing effect - Shearing effect with two sliders for vertical and horizontal values (in degree of angle). This is immediately applied to the qrcode.
Note that high shear values may compromise the qrcode decoding!





- Perspective: the ‘Open’ button will unlock a pop-up window dedicated to 3D transformation. You’ll notice four handles that allow to simulate a perspective effect. You can select and move each handle with your mouse or fine tune the position with the keyboard arrows (Ctrl+arrow will amplify the move). You can also move the qrcode the same way once selected. Choose the proper option at the bottom of the window to validate the transformation or not.
Big perspective deformations may compromise the qrcode decoding!
Also note that due to technical restrictions, a blurring effect on the qrcode background is incompatible with the perspective mode and automatically disabled. You can fine tune the graphical integration of your qrcode on a perspective surface in your images by adjusting the qrcode background color transparency level, even to full transparency.
This widget may be deactivated depending of your browser. Check our FAQ for more details. QRcodeLab qrcode generator - qr code art and design - 3D perspective effect





















5.2.2.4 Background

QRcodeLab web application background settingsUse this pane to set the qrcode background characteristics.

  • A color widget to define the background color.
  • A drop-down menu to set the background shape.
  • A slider widget to play with the blurring level of the background edges. This widget is deactivated when a 3D perspective effect is applied to the qrcode.
5.2.2.5 Scale Preview

QRcodeLab web application image scale preview settingsUse the slider widget in this pane to preview a scaled down version of your image.
You’ll be able to get an overview of your work. But, most importantly, in the case where the final representation of your work will be smaller than the one displayed on the screen, it may be particularly useful to check the readability of a scaled down version of your qrcode.

5.2.3 Full Control - Jedi

This is the full control interaction mode. The set-up of dark dots, light dots, big targets and small targets are performed in separate panes with all available parameters.
As in the intermediate level, you can apply geometrical transformations to your qrcodes.

5.2.3.1 Dark Dots

QRcodeLab web application Jedi mode dots settingsThe widgets in this section apply exclusively to dark dots.

  • A color widget to define the color of the dots.
  • A drop-down menu to set the shape of the dots.
  • A toggle button to flip the dot shape (horizontal symmetry).
  • A set of 4 slider widgets to apply some effects to the dots:

    • scaling effect (per dot),
    • rotate them,
    • randomize the rotation (per dot),
    • apply some blurring to smooth the dots edges. This widget may be deactivated depending of your browser. Check our FAQ for more details.
5.2.3.2 Light Dots

Same widgets as in previous section but applying specifically to the light dots!

5.2.3.3 Big Targets

QRcodeLab web application Jedi mode big targets settingsAll the widgets in this section apply globally to the big targets.

  • Two color widgets to define the dark and light colors.
  • A drop-down menu to set the shape of the targets.
  • Three small sliders to rotate each of the big targets.
  • A slider widget to apply a blurring effect on the targets edges.
5.2.3.4 Small Targets

QRcodeLab web application Jedi mode small targets settingsSame widgets as in previous section but applying specifically to the small targets! Only one Rotate slider for all the small targets (if more than one, depending on the content of the qrcode).

5.2.3.5 Transform

QRcodeLab web application Padawan mode transform settingsThis section is about geometric transformations applied to the qrcodes. Use these tools to improve integration of qrcodes in your images.
The ‘Reset’ button will cancel any existing 3D (Perspective) effect.





QRcodeLab qrcode generator - qr code design shearing effect - Shearing effect with two sliders for vertical and horizontal values (in degree of angle). This is immediately applied to the qrcode.
Note that high shear values may compromise the qrcode decoding!





- Perspective: the ‘Open’ button will unlock a pop-up window dedicated to 3D transformation. You’ll notice four handles that allow to simulate a perspective effect. You can select and move each handle with your mouse or fine tune the position with the keyboard arrows (Ctrl+arrow will amplify the move). You can also move the qrcode the same way once selected. Choose the proper option at the bottom of the window to validate the transformation or not.
Big perspective deformations may compromise the qrcode decoding!
Also note that due to technical restrictions, a blurring effect on the qrcode background is incompatible with the perspective mode and automatically disabled. You can fine tune the graphical integration of your qrcode on a perspective surface in your images by adjusting the qrcode background color transparency level, even to full transparency.
This widget may be deactivated depending of your browser. Check our FAQ for more details. QRcodeLab qrcode generator - qr code art and design - 3D perspective effect





















5.2.3.6 Background

QRcodeLab background settingsUse this pane to set the qrcode background characteristics.

  • A color widget to define the background color.
  • A drop-down menu to set the background shape.
  • A slider widget to play with the blurring level of the background edges. This widget is deactivated when a 3D perspective effect is applied to the qrcode.
5.2.3.7 Scale Preview

QRcodeLab web application image scale preview settingsUse the slider widget in this pane to preview a scaled down version of your image.
You’ll be able to get an overview of your work. But, most importantly, in the case where the final representation of your work will be smaller than the one displayed on the screen, it may be particularly useful to check the readability of a scaled down version of your qrcode.

5.3 Lower Zone

QRcodeLab web application GUI lower zoneThe button widgets in this lower part of the user interface are of general purpose and not directly liked to the user or the qrcode itself.

5.3.1 Load Image

QRcodeLab web application load image buttonClick on this button to select another image. The qrcode parameters will be kept except for placement and 3D effects.

5.3.2 Reset Parameters

QRcodeLab web application reset buttonSelf explaining: restore all the qrcode parameters to the default values and placement in the current image.

5.3.3 Retrieve Image

QRcodeLab web application retrieve image buttonUse this button to retrieve your current image composition. You’ll be warned on two point:

  • if the decoding of the your qrcode failed to pass the test. You can still download it, but at your own risks.
  • this will consume a credit in (one of) your subscriptions.

5.3.4 Quit Application

QRcodeLab web application quit buttonWell… bye-bye! (and logout also)

5.3.5 Request Support

QRcodeLab web application request support buttonAnything going wrong? Click on our support button, we’ll get back to you asap! You can add files and even take a snapshot of your screen!

6 Subscription Panel

This user menu interface window deserves some more detailed explanations.
It’s related to the different subscription plans you can choose from. Without a paid plan you can test and download your image compositions as much as you can but the image size is limited and, most of all, you can not edit the qrcode content.
Once you registered and validated your account, you’ll have access to this interface through the User Menu with the option entry ‘My subscriptions’. The first time you log into your user account, you’ll be automatically routed to this subscription pop-up window.
On the left side you’ll find the current state of your plans, while on the right side are displayed the plans you can subscribe to.

QRcodeLab web application base plan and quantity subscriptions panel











6.1 Base Subscription Plan

Upper part of the window.
On the left side is a description of your current monthly plan. If you haven’t made any purchase yet, you’re in demo plan at no cost.
You can subscribe to a plan on the right side of the window with the buttons provided to checkout. The plans prices and characteristics are displayed nearby each button.
Feel free to downgrade or upgrade your plan whenever you wish. A downgrade will apply at the end of the billing period while an upgrade applies immediately, its price being prorated according to the end of the current billing period. You’re free to cancel any paid plan anytime by switching to ‘Demo Plan’. In such a case the cancel effect is immediate.

6.2 Quantity Subscription Plan

Lower part of the window.
In case you end with no more qrcodes left, you can subscribe to a Quantity plan. Simply choose how much qrcodes you want and click on the ‘Proceed’ button to checkout.
This is not a recurrent plan and the quantities you buy will remain valid until they are all consumed. Price is per qrcode, at a decreasing rate with a minimum buying quantity of 5 units.

7 Privacy Panel

This interface panel is provided in compliance with our privacy policy and is accessible through the User Menu, with the option ‘Privacy’.
It displays an abstract version of our privacy policy with a link to the full –official– version and two important procedures regarding your privacy à propos:
QRcodeLab web application privacy panel

  • receiving a copy of your data, and
  • deleting your account.























7.1 Send Me My Data

Click on this link if you wish to receive a copy of your data: You’ll shortly receive an email with a readable extract of our databases in reference to you.

7.2 Delete My Account

Click on this link if you wish to delete your account and thus terminate any kind of relation with. Don’t forget to confirm in the pop-up window. It won’t be the same without you!
Your account will be immediately deleted along and any paid plan also immediately disabled ; all your personal data will be wiped out within 24hours. No recovery possible!
Miss us already? So do we! In any case you’ll be able to reopen an account with the same email once the delete procedure has been completed.