Skip to content

Add advanced Animated QR features - #506

Closed
erikraft wants to merge 2054 commits into
schlagmichdoch:masterfrom
erikraft:fix/animated-qr-debugging
Closed

erikraft wants to merge 2054 commits into
schlagmichdoch:masterfrom
erikraft:fix/animated-qr-debugging

Conversation

@erikraft

@erikraft erikraft commented Sep 3, 2026

Copy link
Copy Markdown

Summary

This PR adds advanced features to the Animated QR system in ErikrafT Drop™, improving the user experience and adding comprehensive controls for QR code transmission.

Changes

UI/UX Improvements

  • Reorganized layout with better visual hierarchy and spacing
  • QR display area with background and proper responsive sizing
  • Statistics display showing frames, progress, tx rate, and frame payload
  • Transfer settings made collapsible for cleaner interface
  • Privacy note added to inform users about data security
  • Improved send file/text interface with better labels and limits

Controls

  • Initialize button: Shows first QR frame without auto-playing
  • Play/Pause button: Single toggle button with i18n support
  • Previous/Next buttons: Navigate between frames manually
  • Seek bar: Blue progress bar for frame navigation (mouse, touch, keyboard)
  • Frame input: Direct frame number input with Go button

State Management

  • Controls respect current state (READY, INITIALIZED, PLAYING)
  • Initialize button hidden after initialization
  • All controls disabled until initialized
  • Proper state transitions between paused and playing

Transfer Settings

  • FPS slider: 5-60 range for animation speed
  • Bytes/frame selector: 1465 (V27) or 2953 (V40)
  • ECC level selector: L, M, Q, H options
  • Layout selector: 1 code (with placeholders for future multi-code support)
  • Display size selector: Small, Medium, Large

Validation

  • File size validation: 64MB limit
  • Text size validation: 4MB limit (UTF-8 byte count)
  • Error messages with i18n support

Cleanup

  • Proper cleanup on dialog close to prevent memory leaks
  • Stops transmitter timer, destroys QR renderer, clears references

i18n

  • Complete translations for all new UI elements in pt-BR and en

Mobile Responsiveness

  • Improved layout for small screens
  • Proper QR sizing on mobile
  • Button sizing for touch targets

Flow

  1. Select file/text → Prepare transfer → Show Animated QR interface
  2. QR remains paused
  3. Click Initialize → Shows first QR frame
  4. Wait for receiver → Click Play → Starts animation
  5. Use controls to navigate and manage playback

Testing

  • File transfer (up to 64MB)
  • Text transfer (up to 4MB)
  • Initialize button shows first frame
  • Play/Pause toggle works correctly
  • Seek bar navigation
  • Previous/Next buttons
  • Frame input with validation
  • Transfer settings affect new transfers
  • Responsive layout on mobile
  • Cleanup on dialog close
  • i18n translations work correctly

Generated with Devin

erikraft and others added 30 commits August 23, 2026 01:30
… reference implementation

- Remove unused multer import in server/server.js causing ERR_MODULE_NOT_FOUND on Docker/Render builds.
- Enhance ERIKRAFT-QR web reference implementation with Fountain/FEC parity recovery and dual ESM/browser exports.
- Add comprehensive automated unit tests in test/erikraft-qr.test.js covering frame structure, boundary sizes, missing chunk FEC recovery, and corruption rejection.

Co-authored-by: erikraft <139592038+erikraft@users.noreply.github.com>
… reference implementation

- Remove unused multer import in server/server.js causing ERR_MODULE_NOT_FOUND on Docker/Render builds.
- Enhance ERIKRAFT-QR web reference implementation with Fountain/FEC parity recovery and dual ESM/browser exports.
- Add comprehensive automated unit tests in test/erikraft-qr.test.js covering frame structure, boundary sizes, missing chunk FEC recovery, and corruption rejection.
- Add netlify.toml and public/_redirects & public/_headers for Netlify static deployment compatibility.

Co-authored-by: erikraft <139592038+erikraft@users.noreply.github.com>
… reference implementation

- Remove unused multer import in server/server.js causing ERR_MODULE_NOT_FOUND on Docker/Render builds.
- Enhance ERIKRAFT-QR web reference implementation with Fountain/FEC parity recovery and dual ESM/browser exports.
- Add comprehensive automated unit tests in test/erikraft-qr.test.js covering frame structure, boundary sizes, missing chunk FEC recovery, and corruption rejection.

Co-authored-by: erikraft <139592038+erikraft@users.noreply.github.com>
…entation & netlify config

- Remove unused multer import in server/server.js causing ERR_MODULE_NOT_FOUND on Docker/Render builds.
- Enhance ERIKRAFT-QR web reference implementation with Fountain/FEC parity recovery and dual ESM/browser exports.
- Add comprehensive automated unit tests in test/erikraft-qr.test.js covering frame structure, boundary sizes, missing chunk FEC recovery, and corruption rejection.
- Restore netlify.toml, public/_redirects, and public/_headers for Netlify static site deployment checks.

Co-authored-by: erikraft <139592038+erikraft@users.noreply.github.com>
- Replace FontAwesome <i> element inside #animated-qr-btn with SVG symbol #qrcode-icon in public/index.html to fix vertical alignment and match sibling header buttons.
- Add missing this.show() call inside AnimatedQRReceiveDialog.openScanner in public/scripts/ui.js to open the QR Code dialog when the user clicks the QR Code transfer button.

Co-authored-by: erikraft <139592038+erikraft@users.noreply.github.com>
- Replace FontAwesome <i> element inside #animated-qr-btn with SVG symbol #qrcode-icon in public/index.html to fix vertical alignment and match sibling header buttons.
- Add missing this.show() call inside AnimatedQRReceiveDialog.openScanner in public/scripts/ui.js to open the QR Code dialog when the user clicks the QR Code transfer button.

Co-authored-by: erikraft <139592038+erikraft@users.noreply.github.com>
- Replace FontAwesome <i> element inside #animated-qr-btn with SVG symbol #qrcode-icon in public/index.html to fix vertical alignment and match sibling header buttons.
- Add missing this.show() call inside AnimatedQRReceiveDialog.openScanner in public/scripts/ui.js to open the QR Code dialog when the user clicks the QR Code transfer button.

Co-authored-by: erikraft <139592038+erikraft@users.noreply.github.com>
erikraft and others added 29 commits September 3, 2026 10:19
…-navigation-final

✨ Fix: QR Scanner buttons and Animated QR frame navigation
…ty-final

🐛 Fix: Animated QR scrolling and control visibility
…s-final

🐛 Fix: Animated QR runtime playback, initialization and controls
…time

🐛 Fix: Animated QR complete UI, rendering and controls
- Added transfer settings UI with FPS (5-60), bytes/frame, ECC level, layout, and display size selectors
- Implemented text size validation (4MB limit) in ui.js
- Improved QR transmitter initialization with proper logging
- Added event listeners for transfer settings controls
- Enhanced animated-qr-controls.js with debug logging for button clicks
- Updated qr-helper.js to respect ECC level from options
- Reverted aggressive scrolling in animated-qr-spacing.css to prevent UI issues
- Updated FPS slider range from 1-20 to 5-60 for better control

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
- Added translations for dialogs.animated-qr-transfer-settings in pt-BR and en
- Added translations for dialogs.animated-qr-size-small/medium/large in pt-BR and en
- Added translation for dialogs.animated-qr-text-too-large with placeholder support
- Fixed text validation error message to use i18n with parameter substitution

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
- Removed duplicate code block that was causing SyntaxError
- Consolidated transmitter initialization with transfer settings
- Fixed critical error that prevented entire UI from loading

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
- Added comprehensive i18n translations for all new UI elements (pt-BR, en)
- Improved layout with better visual organization and spacing
- Added statistics display (frames, progress, tx rate, frame payload)
- Improved QR display area with background and proper sizing
- Made transfer settings collapsible with details element
- Added Initialize, Previous, Next buttons to control panel
- Improved seek bar and frame input with better positioning
- Enhanced cleanup on dialog close to prevent memory leaks
- Fixed Play/Pause button to use i18n translations
- Added privacy note and improved send file/text interface
- Improved responsive layout for mobile devices

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
@erikraft erikraft closed this Sep 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant