works · personal project
Petakin
Turns raster mall floor plans into clean, editable SVG unit maps.
- period
- 2026
- role
- Design and engineering
- stack
- Next.js · TypeScript · Tailwind CSS · Python · FastAPI · OpenCV
the problem
Mall floor plans come as screenshots or PDF exports full of unit codes, facility icons and watermarks. Generic tracers follow the text and produce fragmented paths, and a mall has several floors that must all look identical.
the approach
- A manual mapping editor sits on top of the vendor floor plan as an underlay: draw each unit with rectangle, ellipse or polygon tools, curves included, on a snap grid.
- Units are organised into layers and categories, with one tab per floor and a uniform style across floors; work autosaves in the browser.
- Export is pure vector: one path per unit, selectable in Figma, transparent, with no embedded raster image.
- An automatic mode segments the plan per colour family with OpenCV to extract units without drawing. It is being rebuilt while segmentation and presets are tightened.
the outcome
- Manual mapping is live in the browser.
- Automatic extraction was validated on a five-floor mall: 101 units on the busiest floor, under 10 seconds per image.