How to add measurement and takeoff to a web application.
Build a calibrated drawing-measurement workflow in your product: present your own ribbon and sidebar, let Canvas handle the document interaction and scale, then reflect the verified result in the workflow your users already use.
Rasterex technical guide
Canvas measures; your application owns the takeoff experience.
Rasterex Canvas provides the length, area and count actions plus the calibrated scale workflow. Your product provides the document header, measurement ribbon, calibration and calculator sidebar, project context and any estimation data model.
Start with an open document and a ready viewer. If the viewer lifecycle is not in place yet, complete the embedded CAD viewer guide first.
Keep the host UI explicit and the scale authoritative.
1. Host measurement UI
Build the document header, tool ribbon and calculation controls in the application your users already know.
2. Canvas interaction
Activate a documented tool and let Canvas collect the length, area or count action on the drawing.
3. Scale snapshot
Treat Canvas as the source of truth for scales. Render the returned snapshot; do not mark a scale active from a button click alone.
Activate, calibrate, apply.
These calls are documented for the Viewer SDK. Put them in the screen that owns the viewer after it has mounted, become ready and opened its document.
Activate an area measurement action
01// Run after mount(), ready() and documents.open().02const result = await viewer.tools.set({03 action: "MEASURE_AREA",04 enabled: true,05});06 07if (!result?.success) {08 throw new Error("Could not activate the area measurement tool.");09}10 11// Return Canvas to normal navigation when the action is complete.12viewer.tools.clear();Run the calibration request lifecycle
01const offFinished = viewer.measurements.calibration.on("finished", (event) => {02 // Keep this request ID for the calculate and apply steps.03 setRequestId(event.requestId ?? null);04});05 06const requestId = viewer.measurements.calibration.start({ fileIndex: 0 });07 08// After the user picks a reference line and enters its known real-world length:09const candidate = await viewer.measurements.calibration.calculate({10 requestId,11 fileIndex: 0,12 measurementSystem: 1,13 metricUnit: "Meter",14 calibrateCorrectionMetricValue: 10,15 dimPrecision: 2,16 timeoutMs: 10000,17});18 19const snapshot = await viewer.measurements.calibration.apply({20 requestId,21 fileIndex: 0,22 timeoutMs: 10000,23});24 25// Render candidate.scale and snapshot.selectedLabel in your host UI.26offFinished();Use MEASURE_LENGTH, MEASURE_AREA or COUNT for the documented measurement actions. The numerical units and known reference length in this example are chosen by the host workflow; configure them to match the document and estimation context.
Verify scale before trusting a takeoff result.
- The viewer is mounted, ready and displaying the intended drawing before a measurement action is activated.
- A known reference line is picked before calculate is called for the calibration request.
- The host UI shows the scale returned by the calculated candidate or applied snapshot, not an assumed active value.
- A known length or area on the drawing is measured as a practical acceptance check before production use.
- The calibration event listener is stopped when the host screen unmounts.
Measurement and takeoff answers.
Which measurement tools can a host application activate?
The documented Viewer SDK actions are MEASURE_LENGTH for length, MEASURE_AREA for area and COUNT for count measurements. Activate one with viewer.tools.set({ action, enabled: true }) after the viewer is ready and a document is open.
When should a drawing be calibrated?
Establish document scale from a picked reference line and a known real-world length before enabling drawing measurements. The calibration workflow starts a request, waits for the reference pick, calculates a candidate scale and applies it.
Does my application set the active measurement scale itself?
No. Canvas is the source of truth for scales. Keep host UI state as the rendered scale snapshot and the active calibration session; use the snapshot or calibration apply result to reflect the active scale.
Can I clear the active measurement tool?
Yes. viewer.tools.clear() returns Canvas to its normal navigation state after a measurement action.
Connect calibrated drawing work to the estimation workflow.
Define which document, user context and project record frame a takeoff session, then validate the complete process with representative drawings and known dimensions.