Link to plugin page: https://zeroqode.com/plugin/qr--bar-code-reader-1530097456687x249120198975291400
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
- Generate QR code - This action is used to generate a QR Code.
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:
- UPC-A
- EAN-8
- EAN-13
- Code 39
- Code 128
- ITF
- QR Code
- Data Matrix
- Aztec
- PDF 417
Ensure sufficient lighting in the room and QR/Barcodes are of good quality.
Element Actions
- Start Scanning - This action will start the live scanning.
- Stop Scanning - This action will stop the live scanning.
- Set Camera - This action is used to change the camera which is used for scanning.
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.
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.
- On the page, it is placed the GenerateQR element. This element has no fields for completing.
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.
- 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.
- 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.
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.
Using Barcode/QR Live Scanner
This workflow example represents how the Barcode/QR Live Scanner element is used and its actions.
- On the page, it is placed the Barcode/QR Live Scanner element. This element has no fields for completing.
- 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.
- In the workflow, when the Start Live Scanner button is clicked then is called the Start Scanning action.
When the code is detected then the BarCode Result and BarCode Type will be available for use.
- When live scanning is in process, the Barcode/QR Live Scanner element will start streaming the camera.
- When code is detected, the Text elements will display the results.
- In the workflow, when the Automode Stop Live Scanner button is clicked then is called the Stop Scanning action.
- 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.
Using Barcode/QR Image Scanner
This workflow example represents how the Barcode/QR Image Scanner element is used and its actions.
- On the page, it is placed the File Uploader element.
- Also, on the page, it is placed the Barcode/QR Image Scanner element. The Image field is completed with the value of File Uploader.
- When the file is uploaded in File Uploader element and the barcode is detected, the result will be displayed on the page.
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
Update 20/05/24 - Version 1.55.0
- Added "Use back camera" field
Update 12.06.24 - Version 1.58.0
- Minor fix.
Update 18.06.24 - Version 1.59.0
- Fixed bugs and removed аsk for microphone permission for Live Scanner.
Update 18.06.24 - Version 1.59.0
- Fixed bugs and removed аsk for microphone permission for Live Scanner.
Update 19.06.24 - Version 1.60.0
- Minor update
Update 01.07.24 - Version 1.61.0
- Fixed inverted camera