Barcode & QR Code Reader Plugin

Introduction

This plugin enables smooth and seamless QR and Bar code reading functionality in your Bubble app. For better quality scanning, please make sure there is sufficient lighting in the room and QR/Barcodes are of good quality.

How to setup

Place the required elements on the page and fill in the fields. You can find a more detailed configuration on the plugin demo page.

Plugin Elements Properties

This plugin has 3 visual elements which can be used on the page: GenerateQR, Barcode/QR Live Scanner, and Barcode/QR Image Scanner.

GenerateQR

This is element is used to generate a QR-formatted image from inputted values. The width and height of the generated QR can be customized in action.

Element Actions

  1. Generate QR code - This action is used to generate a QR Code.
Image without caption
Fields:
Title
Description
Type
Text
This is the value that you want to encode.
string
Width
The value that represents the output width, in pixels, of the QR code image.
number
Height
The value that represents the output height, in pixels, of the QR code image.
number

Element States

Title
Description
Type
Generated Image
The generated QR code is in base64 format.
string

Barcode/QR Live Scanner

This is element is used to live scan Barcode by the camera. This element decodes 1D and 2D barcodes. It detects automatically the code and format of this.
Available format:
  1. UPC-A
  1. EAN-8
  1. EAN-13
  1. Code 39
  1. Code 128
  1. ITF
  1. QR Code
  1. Data Matrix
  1. Aztec
  1. PDF 417
Ensure sufficient lighting in the room and QR/Barcodes are of good quality.

Element Actions

  1. Start Scanning - This action will start the live scanning.
  1. Stop Scanning - This action will stop the live scanning.
  1. Set Camera - This action is used to change the camera which is used for scanning.
Image without caption
Fields:
Title
Description
Type
Camera label
The camera label which you want to use for live scanning. Every camera device has an individual label. A list of camera labels is provided with element. See the Workflow Examples below.
string

Element States

Title
Description
Type
List of cameras
Every camera device has an individual label. This returns all available camera labels for scanning. You can use one of these in the Set Camera action.
list of string
BarCode Result
This represents the value that was encoded in the barcode.
string
BarCode Type
This represents the type of barcode.
string

Barcode/QR Image Scanner

This is element is used to scan barcodes from images. This element decodes 1D and 2D barcodes. It detects automatically the encoded code.
Image without caption
Use just the “.png”, “.jpeg”, “.jpg”, “.jpe”, “.jif” or “.jfif” file format for decoding when using this element.

Element Fields

Title
Description
Type
Image
The image that should be scanned. This can be updated or inserted as a link.
file

Element States

Title
Description
Type
BarCode Result
This represents the value that was encoded in the barcode.
string

Workflow example

Using GenerateQR

This workflow example represents how the GenerateQR element is used and its actions.
  1. On the page, it is placed the GenerateQR element. This element has no fields for completing.
Image without caption
The element size is important because there will be displayed the QR code. the element size should be the same as the values in the actions, otherwise, the QR will be cropped.
  1. Also, on the page, it is placed the Input and Button elements. The Input element is used for the message that will be encoded. The Button element is used to start the GenerateQR element action, Generate QR code.
Image without caption
  1. In the workflow, when the Generate QR Code button is clicked then is called the Generate QR code action. After execution of this action, the Generated Image state will be available to use.
Image without caption
For Generate QR code action should provide the output size of the QR code image. If the size values will be bigger than the size of the GenerateQR element on the page then the QR code image will be cropped.
Also, on the page, will be displayed the QR code.
Image without caption

Using Barcode/QR Live Scanner

This workflow example represents how the Barcode/QR Live Scanner element is used and its actions.
  1. On the page, it is placed the Barcode/QR Live Scanner element. This element has no fields for completing.
Image without caption
  1. Also, on the page, it is placed the Button and Repeating Group elements. The Button elements are used to start/stop the live scanning. The Repeating Group element is used to display all available camera labels.
Image without caption
  1. In the workflow, when the Start Live Scanner button is clicked then is called the Start Scanning action.
Image without caption
When the code is detected then the BarCode Result and BarCode Type will be available for use.
  1. When live scanning is in process, the Barcode/QR Live Scanner element will start streaming the camera.
Image without caption
  1. When code is detected, the Text elements will display the results.
Image without caption
  1. In the workflow, when the Automode Stop Live Scanner button is clicked then is called the Stop Scanning action.
Image without caption
  1. In the workflow, when the Current cell’s text is clicked then is called the Set Camera action. This means when the camera label from Repeating Group is clicked then the clicked label will be send to Set Camera action like Camera label value. And, will be changed the camera for scanning.
Image without caption

Using Barcode/QR Image Scanner

This workflow example represents how the Barcode/QR Image Scanner element is used and its actions.
  1. On the page, it is placed the File Uploader element.
Image without caption
  1. Also, on the page, it is placed the Barcode/QR Image Scanner element. The Image field is completed with the value of File Uploader.
Image without caption
  1. When the file is uploaded in File Uploader element and the barcode is detected, the result will be displayed on the page.
Image without caption

Changelogs

Update: 20/07/18 - Version 1.0.0
  • Initial Build
Update: 10/10/18 - Version 1.1.0
  • Added event on scan + option to change the successful code detection sound
Update: 14/01/19 - Version 1.2.0
  • Enabled sound on scan for Safari, so should work well on iPhones
Update: 02/03/19 - Version 1.3.0
  • Added new settings: Success timeout - default 1000 (milliseconds) Frame rate - can be from 1 to 25 Gray Scale - Yes/No, plus parameters Flip vertical & Flip horizontal
Update: 12/03/19 - Version 1.4.0
  • Updated description
Update: 20/03/19 - Version 1.5.0
  • Updated description
Update: 02/04/19 - Version 1.6.0
  • Added a new library - barcode_reader_2 element
Update: 04/04/19 - Version 1.7.0
  • Added qr support to the new library
Update: 05/04/19 - Version 1.8.0
  • Added Show location for QRcode mode
Update: 09/04/19 - Version 1.9.0
  • Added a new element generateQR that returns a state Generated Image
Update: 18/04/19 - Version 1.10.0
  • Added action, Stop live Detector
Update: 23/04/19 - Version 1.11.0
  • Minor fixies
Update: 30/04/19 - Version 1.12.0
  • Major update: the old library and elements are removed. The library 2 element is renamed to QR & Barcode Reader. Documentation is updated to reflect the changes
Update: 04/05/19 - Version 1.13.0
  • Minor Improvements
Update: 22/05/19 - Version 1.14.0
  • Updated demo page
Update: 10/06/19 - Version 1.15.0
  • Updated description
Update: 13/06/19 - Version 1.16.0
  • Added event Code Detected Added feature to decode local images (Any barcode except QR Code), added it in demo page
Update: 20/07/19 - Version 1.17.0
  • Fixed event Content Changed didn’t triggers. Changed the state name from Result Format to Result Content
Update: 22/12/20 - Version 1.18.0
  • Divided one element into two new ones. QR and barcode readers now in separate elements. Fixed bug on iOS.
Update: 09/02/21 - Version 1.19.0
  • Updated icon
Update: 01/04/21 - Version 1.20.0
  • Updated name
Update: 21/06/21 - Version 1.21.0
  • Fixed a problem with the scanner on Android OS.
Update: 19/07/21 - Version 1.22.0
  • Updated icon
Update: 19/11/21 - Version 1.23.0
  • Added a new action to turn on/off the flashlight on mobile devices, if any (not supported in iOS)
Update: 08/12/21 - Version 1.24.0
  • Fixed a problem with the uploaded local images
Update: 27/12/21 - Version 1.25.0
  • Added new action “Scan local image”
Update: 21/01/22 - Version 1.26.0
  • Added forum thread in common part
Update: 26/04/22 - Version 1.27.0
  • Fixed issue on android for Generate QR
Update: 29/08/22 - Version 1.28.0
  • Updated common part
Update: 19/09/22 - Version 1.29.0
  • Adjusted common part
Update: 20/01/23 - Version 1.30.0
  • Updated description
Update: 02/02/23 - Version 1.31.0
  • Updated description
Update: 08/02/23 - Version 1.32.0
  • Replaced “Barcode Reader” & “QR code Reader” with “Barcode/QR Live Scanner” & “Barcode/QR Image Scanner”
Update: 15/02/23 - Version 1.33.0
  • Fixed the "GenerateQR" element.
Update 21/02/2023 - Version 1.34.0
  • updated the description
Update 23/02/2023 - Version 1.35.0
  • deleted the icons
Update 6/03/2023 - Version 1.36.0
  • Fixed compatibility with the 21st Bubble Version.
Update 24/04/2023 - Version 1.37.0
  • Fixed scan QR to iOS and Android
Update 14/06/2023 - Version 1.38.0
  • added a sound for a successful scanning
Update 16/06/2023 - Version 1.39.0
  • updated the description
Update 19/06/2023 - Version 1.40.0
  • Added "result is detected" event for "Scanner" elements.
Update 15/09/2023 - Version 1.44.0
  • Added a "Detection code types" field for the "Barcode/QR Live Scanner" element
Update 09/10/2023 - Version 1.46.0
  • Added "Code Type" state for Barcode/QR Image Scanner element.
Update 13/10/2023 - Version 1.47.0
  • Fixed recognizing cameras on iPhone
Update 31/10/2023 - Version 1.49.0
  • Updated to the new responsive & removed redundant logs.
Update 16/01/2024 - Version 1.51.0
  • Fixed “result is detected” field event for Barcode/QR Image Scanner
Update 18/01/2024 - Version 1.52.0
  • Added “Max width/height” fields for Generate QR

Demo to preview the settings