GETTING STARTED · BUTTON BY BUTTON

Learn the workbench once. Measure with confidence after that.

This guide begins with one successful distance measurement, then explains every button, click order, result, disabled state, and export option in the same language the workbench uses.

Open the workbenchAbout 3 minutes to the first result

FIRST, BUILD THE MENTAL MAP

The workbench has four jobs, not forty controls.

Read the interface from top to bottom. Choose an action, place points on the image, inspect the result, and follow the current instruction.

02Image canvas

Upload the source, then place and drag measurement points here.

04Current instruction

The dark bar always tells you what the selected tool expects next.

YOUR FIRST SUCCESS

Make one distance measurement in sixty seconds.

Do this before studying every control. One complete result makes the rest of the workbench easier to understand.

01
Open the sample
Return to the workbench and choose Try the sample. Your own file works too, but the sample removes uncertainty while learning.
02
Keep Distance selected
Distance is selected by default after an image loads. The orange state shows which tool will receive your clicks.
03
Click the start point
Place the first point on one clear edge. Nothing is complete yet because a distance needs two endpoints.
04
Click the end point
Place the second point on the opposite edge. A line, label, and result row appear immediately.
05
Correct the endpoints
Drag either white handle until the line sits exactly on the feature. The result updates while you move it.
06
Keep the result
Rename the row, copy its value, export CSV, or download an annotated PNG at the source image dimensions.

The workbench opens in pixel mode. That is correct for screenshots and a safe first lesson.

Practice with the sample

THE COMPLETE TOOL REFERENCE

Every button has one gesture and one clear output.

The numbered diagrams show the exact click order. Use the common-mistake line to diagnose a result that looks wrong.

Pan

Moves a zoomed image without creating or changing a measurement.

Use it when: The image is larger than the visible canvas after zooming above 100%.
Click order: Select Pan, press an empty part of the image, then drag in the direction you want to move.
You get: A different view of the same source coordinates; every measurement remains unchanged.
Common mistake: Trying to draw while Pan is selected. Switch back to a measurement tool before placing points.

Set scale

Teaches the image how many real units one source pixel represents.

Use it when: You need cm, mm, m, inches, or another physical unit instead of pixels.
Click order: Click endpoint 1 and endpoint 2 of a known length, enter its real value and unit, then choose Apply scale.
You get: Existing and future length, area, perimeter, and circle results convert to the selected real unit.
Common mistake: Using a reference at a different depth from the target. Both must lie in the same measurement plane.

Distance

Measures the straight-line length between two source-image points.

Use it when: Checking a width, height, gap, wall, component, route segment, or screenshot spacing.
Click order: Click the start point, then the end point. Drag either handle afterward to refine the line.
You get: One direct distance in px or the calibrated unit.
Common mistake: Expecting cm before calibration. Pixel mode is the honest default when the image has no known scale.

Angle

Measures the included angle formed by two arms that share one vertex.

Use it when: Checking roof pitch, joints, diagrams, posture, corners, or mechanical geometry.
Click order: Click arm 1, click the vertex second, then click arm 2. The middle click must be the corner.
You get: The included angle in degrees; calibration is not required.
Common mistake: Clicking the vertex first. The second point, not the first, defines the angle vertex.

Rectangle

Measures an axis-aligned box from two opposite corners.

Use it when: The target is a window, screen, label, package face, or another rectangular region.
Click order: Click one corner, then its diagonal opposite corner.
You get: Width, height, and rectangular area in pixels or calibrated units.
Common mistake: Using Rectangle for a rotated or irregular boundary. Use Area when the outline is not an axis-aligned box.

Area

Traces an irregular closed boundary and calculates its inside and outside length.

Use it when: Measuring a room, plot, specimen, material patch, or any non-rectangular region.
Click order: Click boundary points in order, use at least three points, then choose Finish area in the right panel.
You get: Closed polygon area and complete perimeter.
Common mistake: Crossing the outline or placing points out of order. Follow the boundary in one direction.

Circle

Fits one mathematical circle through three points on a visible circular edge.

Use it when: Measuring a pipe, wheel, hole, disc, pupil, or circular feature when the center is unclear.
Click order: Click three separated points on the circumference. They must not sit on one straight line.
You get: Diameter, circumference, and enclosed area.
Common mistake: Clicking the center as one of the three points. All three clicks belong on the circular edge.

Point

Records one exact X/Y position in the original image coordinate system.

Use it when: Documenting a feature location in a screenshot, scientific image, map, or image-processing workflow.
Click order: Click the target once. Drag the handle later if the coordinate needs correction.
You get: Original-image X and Y pixel coordinates.
Common mistake: Reading the browser position as the result. The tool reports source pixels, so zoom does not change the coordinate.

THE ONE CONCEPT THAT NEEDS EXPLANATION

Calibration turns a pixel ratio into a real measurement.

A photograph does not know whether 300 pixels represent 30 millimeters or 30 meters. One trustworthy reference provides that missing scale.

300 px30 cm

01
Find a ruler, scale bar, printed dimension, doorway, or other length whose real value is known.
02
Choose Set scale and click the two endpoints of that reference in the image.
03
Enter the real value, such as 30, and choose its unit, such as cm.
04
Choose Apply scale. The reference line becomes the ratio for the complete image plane.
05
Return to Distance, Rectangle, Area, or Circle and measure the target normally.

Stay in pixel mode for UI screenshots, digital artwork, and any task where source pixels are the desired answer.

For real units, keep the reference and target in the same flat plane. Perspective, depth, and wide-angle distortion cannot be repaired by a single reference.

HISTORY AND VIEW CONTROLS

These buttons change the session or view, not the measurement type.

They sit on the right side of the toolbar and become useful after an image or result exists.

Undo

Removes the most recently added measurement and keeps it available for Redo.

Redo

Restores the measurement removed by the last Undo action.

Zoom out

Reduces the view by 25%, down to 50%, without changing source coordinates.

Reset to 100%

The percentage button shows the current zoom and returns the canvas to 100% when clicked.

Zoom in

Enlarges the view by 25%, up to 300%, for more accurate point placement.

AFTER THE POINTS ARE PLACED

The right panel turns geometry into reusable evidence.

Every measurement receives a color, editable name, live value, and delete action. Changes on the image and in the list stay synchronized.

01Rename a row to something meaningful, such as Door width or Living room area.
02Drag any white handle on the image; the value updates continuously.
03Choose line width 1, 2, or 3 to control annotation emphasis in the export.
04Use the row trash button to delete one item without disturbing the image or other results.

Choose the output that matches the next job

Annotated PNG

Downloads the source image with lines and labels burned in at the original image dimensions.

Results CSV

Downloads names, measurement types, and values as a spreadsheet-ready file.

Copy results

Copies a readable result list for chat, email, documents, notes, or tickets.

Save project

Downloads a local JSON project containing the image, scale, points, labels, and style for later editing.

Open project

Restores a previously saved project JSON. Use Choose image, not Open project, for a normal photo.

Clear measurements

Removes every measurement while keeping the current source image loaded.

GRAY BUTTONS ARE STATUS, NOT ERRORS

A disabled control tells you what is still missing.

Use the dependency shown here instead of repeatedly clicking a control that is not ready.

Measurement tools

Add an image first. Geometry tools need a source coordinate system.

Apply scale

Choose Set scale and place both reference endpoints before applying the value.

Finish area

Place at least three polygon points. Two points cannot enclose an area.

PNG, CSV, Copy, Clear

Create at least one measurement before exporting or clearing results.

THREE REAL WORKFLOWS

Choose the tool from the question you need answered.

These examples connect the interface to common architectural, spatial, and circular measurements.

Measure a doorway on a floor plan

Goal: Find the real opening width before choosing furniture or materials.
Tool: Set scale, then Distance.
Click sequence: Mark a printed dimension, apply its unit, then click the left and right door edges.
Scale: Required, using a dimension line or scale bar on the same plan.
Output: Door width in cm, m, inches, or the selected unit, plus an annotated image.

Measure an irregular room

Goal: Estimate floor coverage and the full wall perimeter.
Tool: Set scale, then Area.
Click sequence: Follow every room corner in order, place at least three points, then choose Finish area.
Scale: Required for m² and m; optional when pixel area is the desired answer.
Output: Closed area and perimeter, ready for CSV or annotated PNG export.

Measure a circular hole

Goal: Recover a diameter even when the center is not marked.
Tool: Set scale, then Circle.
Click sequence: Place three separated points on the visible rim and adjust the handles until the fitted circle matches.
Scale: Required for a physical diameter; not required for pixel diameter.
Output: Diameter, circumference, and circle area in the chosen unit.

PRIVATE AND HONEST BY DESIGN

The math can be exact while the photograph is still approximate.

The source image, measurement points, calibration, and exports stay in your browser. No account or image upload is required for the measurement workflow.

Verify safety-critical, structural, medical, legal, or precision-fabrication dimensions with a calibrated physical instrument. Camera angle, depth, lens distortion, and reference quality control real-world accuracy.

THE GUIDE IS COMPLETE WHEN YOU TRY IT

Open the sample and make the first two clicks.

Start with Distance in pixel mode. Add calibration only after the first result makes sense. The bottom status bar will tell you what to do next.

Go to the workbenchChoose Try the sample after the workbench opens.