✍️ Submission & 🖍️ Annotation System — Built with Google Apps Script

[Himaladin]

A while ago, I shared a basic proof-of-concept for annotating images in Glide using WebView and AI components. It worked for light use cases but lacked structure and scalability.
Earlier post

Now, I’m introducing a full-featured image annotation app built entirely with Google Apps Script. Designed to embed seamlessly into Glide via WebView, it provides a robust system to collect, review, and annotate image (and single-page PDF) submissions—powered by Google Drive.

---

Key Features

Tech Stack

View components

	Google Apps Script – Backend logic & automation
	HTML5 Canvas – Native drawing layer for annotation
	Fabric.js – Drawing & annotation canvas
	Tailwind CSS – Responsive design
	Google Drive – Centralized storage

Authentication & Workflow

• Session-based authentication – Uses userID and userName, with role-based access (Admin, Reviewer, Uploader).
• User whitelist – Access is validated against the "Registered Users" sheet.
• Real-time sync – Collaborators are notified when edits are saved.
• Multilanguage support – Built-in translator for UI and content.

Annotation Tools

• Freehand drawing, shapes (lines, arrows, rectangles, circles).
• Text labels, magnifier, color/size adjustments.
• Dark mode, export (download/print), and sharing.

File Management

• Supports images and single-page PDFs (auto-converted to images).
• Organized Drive folders:
  1. Uploads
  2. Annotations
  3. Final exports
  4. User photos

Admin Controls

• Toggle features via app or connected Google Sheet.
• Set deadlines with date pickers.
• Roles: Admin (full access), Reviewer (annotate/view), Uploader (own files).

---

Use Cases

How Glide community can leverage this tool:

• Field Surveyors: Mark issues directly on-site photos for inspections or audits
• Education: Grade image-based assignments with direct markup
• Healthcare: Discuss medical scans with precise annotation tools
• Business: Streamline design approvals from stakeholders

---

Preview

Submission Manager

_{A clean role-based submission interface with full CRUD support.}

---

Accordion Table

_{Expandable accordion with integrated image preview. Currently optimizing layout flow and transition performance.}

---

Admin Panel

_{Centralized control for deadlines and user permissions}

---

Annotation Canvas

_{Real-time markup tools with draggable toolbar}

---

Feature Control Panel

_{Toggle annotation features per project requirements}

---

Try It Out

Embed in Glide via WebView, or open directly:

Scrawlify Live Demo

---

Summary

A no-host-required annotation solution for Glide, combining:
Clean UI
Role-based collaboration
Native Drive integration
Real-time sync

Still collecting feedback for WebView performance—feel free to test and share thoughts!

[Mazen]

Wow that’s cool!.

[Himaladin]

Thanks!
Have you tried embedding it inside a webview element? You just need to paste the URL into the component. You might need a bit of custom CSS to make the iframe go full-screen.

[Mazen]

I did actually and it looks amazing, no need for the custom CSS

here’s the mobile view, which isn’t that good, too big for the small screen.

[Himaladin]

@Mazen

here’s the mobile view, which isn’t that good, too big for the small screen.

It seems that Glide has a global scaling setting for mobile view. Unfortunately, I can’t check it right now.
If you open it directly through a browser, it might look like this: