From Stickers to Software: How the Drawing Stamp System Works
#drawing-stamps#inspection#feature#building-in-public#aimqc#devlog#pdf
David Olsson
On site, QC inspectors mark up drawings with colored stickers. Orange for torque. Purple for weld. Green for NDE. Each sticker references a report. At turnover, the annotated drawings go into the handover binder. It is a tactile, physical record of what was inspected and where. We digitized that workflow — without changing what it means.
The physical version
Walk into any QC trailer on an Alberta construction site and you will find a set of drawings pinned to the wall or spread across a desk. Colored dot stickers mark inspection points. Next to each sticker, a handwritten label: T-01, W-03, NDE-07. The label corresponds to a report in the QC binder.
The system works. The problem is portability, duplication risk, and the labor of connecting stickers to reports at turnover. Drawings get damaged. Stickers fall off. Reports and drawings get separated. Reconstructing the connection at audit time is manual and error-prone.
What we built
AIMQC's stamp system replicates the colored sticker workflow in software. A QC user opens a drawing in the stamp workspace, selects a stamp type, and clicks to place it on the PDF. The stamp appears on the drawing at that position, in the right color, with the right label.
Three stamp types:
| Type | Color | Label |
|---|---|---|
| Torque | Orange (#F97316) | T |
| Weld | Purple (#8B5CF6) | W |
| NDE | Green (#22C55E) | N |
Each stamp carries a sequence number. The numbering format is {PROJECT_PREFIX}{SEQUENCE} — for example, OBS01, OBS02, OBS03. The project prefix defaults to the first three characters of the project name and can be customized. Sequence numbers auto-increment per prefix so the same label never appears twice on a project.
Placement and positioning
Stamps are positioned as percentages of the page dimensions rather than absolute pixel coordinates. This keeps them correct across different screen sizes and zoom levels.
// Stored in the database
positionX: Float // 0–100% of page width
positionY: Float // 0–100% of page height
pageNumber: Int
// Rendered on screen
const style = {
left: `${stamp.positionX}%`,
top: `${stamp.positionY}%`,
transform: 'translate(-50%, -50%)',
}
The PDF renders via PDF.js as a canvas-based scroll view. Stamps sit as positioned HTML elements on top of the canvas, so they scroll with the document and stay locked to their location on the page.
Stamp to report
Every stamp creation automatically creates a corresponding inspection report — a TorqueReport, WeldReport, or NDEReport — using the same stamp number as the report number. The link is bidirectional: the report knows which stamps reference it, and the stamp knows which report it belongs to.
When a stamp is deleted, the associated report is cascade-deleted. When a report is filled out and exported, the stamp remains on the drawing as a permanent spatial reference.
PDF export with burned-in stamps
At export time, we use pdf-lib to burn the stamp positions directly into the PDF. The original drawing file is loaded, and each stamp is rendered as a colored circle with its label at the correct percentage-based position on the relevant page. The exported PDF is a self-contained document — no external system needed to view the stamp positions.
This matters for the handover binder. The exported drawing looks like the physical sticker version the industry already knows. The QC team gets a digital workflow; the client gets a familiar artifact.
Field constraints
The stamp workspace is designed to work under poor connectivity. Stamp placement uses optimistic UI — the stamp appears immediately on screen, and the database write happens in the background. If the write fails, the stamp is rolled back visually and the user is notified. No data is silently lost.
David Olsson is CTO at AIMQC. Contact: dolsson@aimqc.com