Professional Measurement Suite

×

Complete User Guide

Step-by-Step Workflow

1. Upload Your Image

Click the blue "Upload Infrastructure Image" button and select an image from your computer. The system supports JPG, PNG, and other standard formats. The canvas will automatically resize to match your image's exact dimensions - no scaling, no distortion!

2. Understanding the Canvas

Once loaded, your image appears on a canvas with 1:1 pixel ratio. This means:

• A 4000×3000px image creates a 4000×3000px canvas
• No pixel stretching or compression occurs
• All measurements are based on exact pixel distances
• CSS scales the display if needed, but canvas resolution stays native

3. Setting Reference (CRITICAL STEP)

Before measuring, you MUST set a reference scale:

1. Click the Set Reference button (bottom-right floating menu)
2. A popup appears with instructions
3. Click TWO points on your image that have a known real-world distance
4. A yellow line appears between the points
5. Enter the actual distance in meters in the popup input
6. Click "Set Reference"
7. You'll see a confirmation message with the calculated scale

4. Measuring Distances

After setting reference, simply click any two points on the image:

• First click sets point A (blue dot)
• Second click sets point B (blue dot)
• A blue line appears with a label showing:
  • Measurement number (#1, #2, etc.)
  • Pixel distance
  • Real distance in meters
  • Angle in degrees
• Measurement is automatically added to the table below
• You can make unlimited measurements!

5. Understanding Results

Each measurement appears in the table with:

• #: Measurement number or "REF" for reference
• Type: "Reference" or "Distance"
• Pixels: Distance in pixels on canvas
• Distance (m): Calculated real-world distance
• Angle (°): Line angle from horizontal
• Actions: Delete button for each measurement

6. Exporting Data

Click the Export CSV button to download all measurements as a CSV file. This can be opened in Excel, Google Sheets, or any spreadsheet software for further analysis.

7. 3D Visualization

Switch to the 3D Visualization tab to see your image as a 3D pointcloud:

• Each pixel becomes a 3D point
• Z-coordinate (depth) is calculated from pixel brightness
• Use mouse to rotate, zoom, and pan
• Helpful for understanding spatial relationships
• Note: 3D mode is for visualization only - no measurements in 3D

Accuracy & Limitations

Troubleshooting

Problem: Measurements seem inaccurate

Solution:

• Check your reference measurement - is it truly accurate?
• Ensure reference and measured objects are at similar depths from camera
• Avoid measuring objects at extreme image edges (lens distortion)
• Try a different reference object with more certain dimensions

Problem: Image looks distorted or blurry

Solution:

• The canvas should match your image's exact pixel count - check console (F12) for confirmation
• If image appears scaled, check your browser zoom level (should be 100%)
• Try uploading a different image to compare

Problem: Can't see the floating popup

Solution:

• Click the button in bottom-right corner
• On small screens, popup appears at top-right
• Close button (×) is in top-right corner of popup

Problem: Labels overlap or are hard to read

Solution:

• Zoom in on your browser to enlarge canvas and labels
• Labels automatically position above measurement lines
• Reference measurements in the table for exact values

Keyboard Shortcuts & Tips

• Esc - Close help modal or reference popup
• Browser Zoom: Use Ctrl+/Ctrl- to zoom in/out for better precision
• Console Log: Open browser console (F12) to see image loading details
• Delete Measurements: Use delete button in table or click "Reset All"

Best Practices

1. Use High-Quality Images: Higher resolution = more accurate measurements
2. Stable Camera Position: Photos taken from stable positions (not handheld) work best
3. Good Lighting: Well-lit images are easier to measure accurately
4. Known References: Use certified or well-documented dimensions as reference
5. Multiple Measurements: Take several measurements and average for better accuracy
6. Document Everything: Export CSV after each session for record-keeping

Technical Details

Scale Calculation: scale = realDistance (m) / pixelDistance (px)
Distance Calculation: distance (m) = pixelDistance (px) × scale
Angle Calculation: angle = atan2(dy, dx) × 180/π

The tool uses Euclidean distance in 2D pixel space, then applies the scale factor derived from your reference measurement.