feat: draw-canvas-feature-to-display-on-badge.

[Dhruv1797]

In this PR, I have delivered a fully custom, high-performance canvas editor specifically designed for the Magic ePaper Badge. Every feature was built from the ground up to ensure precise control over rendering, user interactions, and export workflows.

Here is the demo video :

draw-canvas-demo.mp4

Core Features Implemented

🖌️ Canvas & Drawing Tools

Custom tri-color (red, white, black) drawing canvas.

Integrated color picker for seamless switching.

Gesture recognition for freehand drawing and straight lines via two-finger tap.

🔤 Text Overlay System

Custom dialog for adding/editing text with:

    Font selection with multiple font options

    Font size and color options

Draggable, rotatable, scalable text elements with gesture support.

Long-press deletion dialog & lock/unlock toggle.

🖼️ Image Import & Manipulation

Import multiple images onto canvas.

Intuitive gestures for move, rotate, resize.

Lock/unlock and delete via long press.  

The lock icons automatically disappear when finalizing the canvas to ensure a clean and distraction-free export.

📚 Layer Manager

Reorderable overlay list showing all text/image layers.

Real-time Z-index update on canvas.

Text labeled by content, images by filename.

👁️ Preview, Crop & Adjustments

UI-free preview screen before export.

Image cropping with aspect ratio matching the badge.

Brightness and contrast adjustment using efficient low-res preview for performance.

📲 NFC Integration with Canvas Image

Final image rendered at 240x416 resolution for compatibility with:

    240x416 BWR (UC8252)

    240x416 BW (UC8252)

Image prepared for NFC-based transfer via “Start Transfer”.

Demo Resources

📂 Complete Canvas Demo Resources Folder:
🔗 [Magic ePaper Draw Canvas Demo Folder]
    https://drive.google.com/drive/folders/1c_AQsXM0TDx2JWOb2Yy4TDZoEsrEJZMI
Contains all demo videos and assets showcasing the app’s core features.

🎥 Main Feature Demonstration Video:
🔗 [Watch Main Draw Canvas Demo]
    https://drive.google.com/file/d/1XcL7g1wKCsGMD0wi6ZdM5eq0ODceItgW/view
Highlights tri-color drawing, text/image overlays, layer manager, and export flow.

🎥 Overlay Deletion Demo:
🔗 [Watch Delete Overlay Demo]
    https://drive.google.com/file/d/1babejMJD9f83qHtxmkBVFBCLf7MbEeMd/view
Demonstrates long-press gesture to trigger overlay deletion.

Summary by Sourcery

Implement a comprehensive drawing canvas feature for the Magic ePaper Badge, providing a fully custom image editing experience with advanced drawing, text, and image overlay capabilities.

New Features:

• Create a custom drawing canvas with tri-color (red, white, black) drawing capabilities
• Develop an advanced text overlay system with font, size, and color customization
• Implement image import and manipulation with gesture-based interactions
• Add a layer management system for text and image overlays
• Integrate image adjustment features with brightness and contrast controls

Enhancements:

• Implement gesture-based interactions for drawing, text, and image manipulation
• Add lock/unlock functionality for overlay elements
• Create a flexible overlay system supporting multiple types of content
• Develop a preview and export workflow for canvas creations

Build:

• Add new dependencies for image processing and color picking
• Include additional font assets for text overlay customization

[sourcery-ai]

Reviewer's Guide by Sourcery

This pull request introduces a new drawing canvas feature to the application, allowing users to draw, add text and images, and adjust the final image for display on the Magic ePaper Badge. It includes a custom drawing page, overlay management, image adjustments, and necessary dependencies and assets.

Sequence diagram for drawing and exporting an image

sequenceDiagram
    participant User
    participant DrawingPage
    participant ImageAdjustScreen
    participant ImageLoader

    User->>DrawingPage: Draws on canvas / Adds overlays
    User->>DrawingPage: Clicks 'Download' (Export)
    DrawingPage->>DrawingPage: Captures the current state of the canvas
    DrawingPage->>ImageAdjustScreen: Navigates to ImageAdjustScreen with captured image
    ImageAdjustScreen->>ImageAdjustScreen: Allows brightness and contrast adjustments
    User->>ImageAdjustScreen: Adjusts image properties
    User->>ImageAdjustScreen: Clicks 'Submit'
    ImageAdjustScreen->>ImageLoader: Passes adjusted image bytes
    ImageLoader->>ImageLoader: Loads the image from bytes
    ImageLoader->>DrawingPage: Returns to DrawingPage with the final image
    DrawingPage-->>User: Displays the final image

Loading

File-Level Changes

Change	Details	Files
Introduces a new drawing canvas feature with tools for freehand drawing, text overlays, and image imports.	Added a 'Draw Canvas' button to the image editor screen. Implemented a custom drawing page with tri-color drawing, text overlays, and image import capabilities. Integrated gesture recognition for drawing and manipulating canvas elements. Added a layer manager for reordering and managing canvas elements. Implemented image cropping and brightness/contrast adjustments. Added a screenshot utility to capture the canvas content. Added helper functions for picking colors, managing layers, and handling image adjustments. Added models for managing drawing lines and overlay items. Added overlay widgets for text and images. Added dialogs for color picking, text overlay input, layer management, and image preview. Added image adjustment parameters and processing functions.	lib/view/image_editor.dart pubspec.yaml lib/provider/image_loader.dart lib/draw_canvas/view/drawing_page.dart lib/draw_canvas/overlays/text_overlays.dart lib/draw_canvas/overlays/image_overlays.dart lib/draw_canvas/helper_functions/helper_functions.dart lib/draw_canvas/view/image_adjust_page.dart lib/draw_canvas/Dialogs/add_text_overlay_dialog.dart lib/draw_canvas/models/overlay_item.dart lib/draw_canvas/Dialogs/show_layer_manager_dialog.dart lib/draw_canvas/Dialogs/build_image_preview_dialog.dart lib/draw_canvas/models/sketcher.dart lib/draw_canvas/ImageAdjust/process_image.dart lib/draw_canvas/Dialogs/pick_color_dialog.dart lib/draw_canvas/ImageAdjust/image_adjust_parms.dart lib/draw_canvas/models/draw_line.dart
Adds new dependencies and fonts to the project.	Added dependencies for path_provider, flutter_colorpicker, and screenshot. Added font assets for Roboto Condensed, Open Sans, Lato, Montserrat, and Oswald.	pubspec.yaml
Extends the ImageLoader to handle loading images from byte data.	Added a loadFromBytes method to the ImageLoader class to decode and load images from a Uint8List.	lib/provider/image_loader.dart

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!
• Generate a plan of action for an issue: Comment @sourcery-ai plan on
  an issue to generate a plan of action for it.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey @Dhruv1797 - I've reviewed your changes - here's some feedback:

Overall Comments:

• Consider adding a clear button to the canvas to allow users to easily reset their drawing.
• The canvas implementation introduces many new files - consider grouping these into a single directory for better organization.

Here's what I looked at during the review

• 🟡 General issues: 1 issue found
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟢 Complexity: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[sourcery-ai]

suggestion: Consider disposing the TextEditingController.

Since the controller is created in the dialog without being disposed, there is a potential for a memory leak. Even in dialog code, ensuring proper disposal can improve resource management.

[Dhruv1797]

@mariobehling @kienvo
Please take a moment to review this PR when possible. The common build and Android build are passing. The iOS build is still failing due to the previously reported CocoaPods issue with flutter_nfc_kit.

Thank you!

[Dhruv1797]

@mariobehling @AsCress @kienvo can you please review this pr ?

[AsCress]

Conflicts with #18 and #23.
@kienvo We'd have to decide the UI implementation that we go forward with at this stage.

[Dhruv1797]

@AsCress I believe it shouldn't conflict with PR #18 as I have already pulled the latest changes from the main branch after it was merged. As for PR #23, it has not been merged into main yet.
@mariobehling @kienvo

[Dhruv1797]

latest-video-preview.mp4

@AsCress Here's the latest video preview of the draw canvas, which includes all the changes from PR #18.

The previous video was actually an older version, but I’ve pulled the latest changes from main after PR #18 was merged. So, I think there shouldn't be any conflict with this branch for this PR.
As for PR #23, it still hasn’t been merged into main.
cc: @mariobehling @kienvo

[Dhruv1797]

@AsCress, please guide me if I’m wrong or if there’s anything I should improve, your guidance means a lot to me 🙏.

[AsCress]

I believe it shouldn't conflict with PR #18 as I have already pulled the latest changes from the main branch after it was merged.

By conflicting, I meant changes in implementation and app flows and not git merge conflicts.

The previous video was actually an older version, but I’ve pulled the latest changes from main after PR #18 was merged. So, I think there shouldn't be any conflict with this branch for this PR.

Alright, now I get it. Thank you for your explanation and the screen recording. I saw the one which you had uploaded in the PR body and thought that you had based your changes over the previous UI.
I'll give this a review.

[Dhruv1797]

Thank you for taking the time to review this, @AsCress, really appreciate it! 🙏 I'm glad the explanation and screen recording helped clarify things.

[mariobehling]

Please also resolve conflicts. Thanks!

[Dhruv1797]

Hi @mariobehling,
I’ve resolved all the conflicts with the main branch, and everything’s looking good now!
and also all three CI checks have passed:
✅ Common Build – Done
✅ Android Flutter Build – Done
✅ iOS Flutter Build – Done

Ready for your review, Thanks!
@AsCress @kienvo

[AsCress]

@Dhruv1797 I guess this has been superseeded by #31 ?
If yes, are you OK with closing this ?

[Dhruv1797]

@AsCress yeah, i think we can close this since we agreed on using pro_image_editor as in #31. we don’t need the custom draw canvas anymore.