A browser-based support tool for mural painters. No installation required – open index.html directly in any modern browser.
| Step | What you do |
|---|---|
| 1 – Wall Photo | Upload a photo of the wall via browse or drag-and-drop. |
| 2 – Define Work Area | Drag four corner handles (TL / TR / BR / BL) to outline the flat rectangular work area on the wall. This quad corrects for perspective. |
| 3 – Real Dimensions | Enter the actual width and height of that work area (cm, mm, m, in, or ft). The app computes a perspective homography so every pixel maps to a real-world coordinate. |
| 4 – Reference Artwork | Upload a reference photo of the subject you want to paint (optional – you can skip straight to measuring). |
| 5 – Position Artwork | Drag the reference image over the wall photo and resize it with the corner handles. Adjust its transparency with the opacity slider. When happy, click Fix Artwork in Place. |
| 6 – Measure | Switch to Place Marker mode and click anywhere on the image. Each marker instantly shows: its X distance from the left edge, Y distance from the top edge, and straight-line distance from the work-area origin – all in your chosen real-world unit. Delete individual markers or clear them all. |
| Action | How |
|---|---|
| Zoom | Scroll wheel (centred on cursor) or + / − keys |
| Pan | Drag in pan mode, or drag in any step when no handle is grabbed |
| Reset view | Click ⊙ button or press R |
| Place marker | Switch to 📍 mode then click, or press M |
| Pan mode | Click ✋ or press P or Esc |
| Delete last marker | Delete / Backspace |
The four quad corners define a correspondence between image pixels and a real-world rectangle.
A perspective homography (computed via the Direct Linear Transform) maps any image-space point to real-world coordinates, giving accurate measurements even when the wall is photographed at an angle.
Open index.html in Chrome, Firefox, Safari, or Edge. No server or build step needed.