Overview
A browser-based tool for generating professional screw/fastener labels for toolbox organizers. Born from the need to organize metric screws (M2-M6) with a consistent visual system.
Features
- Interactive Label Maker: Filter by size, length, head type, and material
- Color Code Reference: Visual chart showing the color coding system
- Custom Labels: Create labels for non-standard combinations (saved to localStorage)
- Print-Ready Output: Optimized for US Letter at 300 DPI
Label Design
Each 40×16mm label includes:
- Top bars indicating M size (1 bar = M2, 6 bars = M6)
- Size × Length (e.g.,
M3 x 50) - Drive and head type
- Material styling (Black = solid fill, Stainless = outline)
- Top-down and side profile drawings
Tech Stack
- Backend: Python, Flask
- Frontend: Vanilla HTML/CSS/JavaScript (self-contained)
- Label Rendering: Canvas API (browser-side)
What I Learned
- Flask application factory pattern
- Canvas API for programmatic image generation
- Print stylesheet optimization for consistent output
- Self-contained HTML tools (all CSS/JS inline, no build step)
Next Steps
- Server-side label generation with Pillow/ReportLab
- API endpoint for on-demand label creation
- Integration with Where's My App inventory system