v-board

v-board turns photos of physical whiteboards into clean, editable digital canvases, preserving real handwriting, colors, equations, and diagrams as vector geometry.

Comment

Try it out

Our GitHub Repo

Inspiration

Whiteboards are great for thinking because they are fast, flexible, and visual. However, everything written on them becomes difficult to reuse once the meeting or class ends. A photograph preserves the appearance of the board, but it does not preserve the content as something editable. We built v-board around one core idea: Preserve the actual ink on a whiteboard as editable geometry.

Instead of reducing handwriting, equations, arrows, and diagrams to OCR text, v-board keeps their original shapes, colors, thicknesses, and spatial relationships.

What it does

v-board converts a photograph of a physical whiteboard into an editable digital workspace. The application:

  • Detects the whiteboard inside a photograph
  • Corrects the camera perspective
  • Normalizes lighting and improves contrast
  • Detects different marker colors
  • Converts the physical marker ink into editable SVG geometry
  • Preserves handwriting, equations, arrows, diagrams, and annotations
  • Provides a browser-based editor with drawing, text, highlighting, selection, erasing, grouping, zooming, and panning
  • Lets users save boards and export them as SVG or PNG If automatic board detection is uncertain, the user can manually identify the four corners before processing continues.

How we built it

The backend is built with Python and Flask. Uploaded photographs are processed with OpenCV, NumPy, and Pillow. The image pipeline is: 1) Uploaded photograph 2) Whiteboard detection 3) Perspective correction 4) Enhanced Master image 5) Color and ink segmentation 6) Contour-based vectorization 7) Editable SVG 8) Browser editor and export

For vectorization, we use contour-based filled geometry. OpenCV finds the boundaries of connected ink regions while retaining contour hierarchy so enclosed spaces, such as the centers of letters, remain holes. The contours are simplified conservatively and converted into filled SVG paths with preserved marker colors. The frontend uses vanilla HTML, CSS, JavaScript, and native SVG. All editor interactions happen in board coordinates, so drawing, selection, and movement, behave consistently regardless of zoom or screen size. Boards and editor state are stored as filesystem-backed JSON and image/SVG assets, keeping the hackathon architecture lightweight and easy to run.

Challenges we ran into

The most difficult challenge was preserving fine handwriting without also preserving the whiteboard’s visual noise. Small punctuation, narrow lines, and faded marker strokes can resemble glare, compression artifacts, or surface grain. Other major challenges included:

  • Keeping disconnected-looking parts of one handwritten character visually coherent
  • Preserving tiny details without generating excessive background noise
  • Simplifying contours without deforming handwriting
  • Maintaining holes and nested contours in SVG paths
  • Handling thousands of SVG regions without freezing the browser
  • Keeping screen, viewport, SVG, and image coordinates aligned
  • Making undo and redo treat complex operations as one action
  • Preserving editable geometry through save, reload, and export

Accomplishments that we're proud of

We are especially proud that v-board preserves the visual character of the original whiteboard instead of replacing it with typed text. Our major accomplishments include:

  • A complete photo-to-editable-SVG pipeline
  • Automatic board detection with manual-corner fallback
  • Perspective-corrected, high-resolution Enhanced Master images
  • Color-preserving contour vectorization
  • Editable user strokes and text layered over imported whiteboard geometry
  • Reliable alignment at different zoom levels
  • Persistent board and editor state
  • SVG and PNG export
  • A lightweight architecture without requiring a complicated database or frontend framework The result is not merely a cleaned-up screenshot. It is a digital whiteboard where the physical ink is preserved as geometry.

What we learned

We learned that OCR and visual preservation solve different problems. OCR is useful for understanding words, but it cannot faithfully represent the way someone organized and expressed ideas on a board. We also learned that computer-vision quality often depends on a chain of small decisions. A minor morphology setting, contour filter, simplification tolerance, or dependency-version difference can have a large effect on fine handwriting. On the engineering side, we learned how to:

  • Build a robust image-processing pipeline with graceful fallbacks
  • Use contour hierarchies to preserve filled geometry and holes
  • Balance SVG accuracy, complexity, and rendering performance
  • Maintain one coordinate system across image processing and browser interaction
  • Represent drawing operations as reversible editor transactions
  • Propagate geometric constraints deterministically
  • Preserve reliable core functionality while experimenting with advanced features Most importantly, we learned that visual fidelity must be evaluated by looking at the result rather than through abstract metrics.

What's next for v-board

Our next priority is improving small-detail fidelity so faint handwriting, punctuation, and small symbols are preserved more consistently across cameras and operating systems. We also want to add:

  • Better grouping of related handwriting and diagram elements
  • Improved selection and manipulation of imported vector regions
  • Faster processing for large boards
  • Additional export formats and sharing options
  • Optional OCR and equation recognition as semantic layers
  • Collaborative editing
  • A mobile capture experience The long-term vision is for v-board to become a bridge between physical thinking and digital work: capture a real whiteboard, preserve its visual structure, edit the underlying geometry, and add intelligent tools without losing the original human expression.
Share this project:

Updates