QR code reader and generator

Demo Link: http://chakor-demo-4.bubbleapps.io/version-test/qr_generator_and_reader

Editor Link: https://bubble.io/page?id=chakor-demo-4&tab=Design&name=qr_generator_and_reader&type=page

QR Code Generator and Reader Plugin
The QR Code Generator and Reader Plugin is an all-in-one solution for generating and reading QR codes within your Bubble applications. Whether you need to create custom QR codes for your app or scan them using your device's camera, this plugin offers seamless functionality with advanced features to enhance user experience.

• Customizable Design: Generate QR codes with options for colors, sizes, and error correction levels.
• Dynamic Data Input: Easily generate QR codes with dynamic or static data.
• Format Support: Generate QR codes compatible with all standard QR scanners.
• Image Output: Download QR codes as PNG images for use across platforms.

• Camera-Based Scanning: Use device cameras to scan QR codes in real time.
• Continuous Scanning Mode: Optionally scan multiple QR codes in one session without restarting.
• Real-Time Camera Switching: Seamlessly switch between front and rear cameras during scanning.
• AR-Like Overlays: Display scanned data as an augmented reality (AR) overlay, enhancing the user experience.
• Customizable Overlays: Truncate large data with ellipses and allow clickable overlays to open links in a new tab.
• Error Handling: Robust error reporting for improved user feedback.

• Generate QR codes for event tickets, promotions, or dynamic content sharing.
• Scan QR codes for inventory management, user authentication, or app navigation.
• Enable interactive AR-like experiences by overlaying QR data on camera feeds.

Instructions

1. Add the QR Code Generator element to your Bubble page.
2. Configure the following element fields in the property editor:
   • Input Data: Specify the text or URL for the QR code.
   • Customization: Adjust margin, gradient colors, gradient types, background colors and error correction levels as needed.

1. Add the QR Code Reader element to your Bubble page.
2. Set up workflows using the following actions:
   • Start Scanning: Begin scanning for QR codes using the device camera.
     • Configure optional fields like Continuous Scanning to enable/disable multi-scan sessions.
   • Stop Scanning: Stop the camera and scanning process.
3. Optional Camera Switching:
   • Add a button or UI element for switching between front and rear cameras.
   • The plugin automatically handles available cameras, ensuring a smooth switch.
4. Handle scanned data using the scanned_data state.