https://github.com/hzeller/augenmass
Measure relative sizes on background image.
https://github.com/hzeller/augenmass
Last synced: 7 months ago
JSON representation
Measure relative sizes on background image.
- Host: GitHub
- URL: https://github.com/hzeller/augenmass
- Owner: hzeller
- Created: 2013-11-06T07:21:51.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2023-05-04T17:15:54.000Z (over 2 years ago)
- Last Synced: 2025-02-27T11:08:24.129Z (8 months ago)
- Language: JavaScript
- Size: 1.21 MB
- Stars: 106
- Watchers: 15
- Forks: 20
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Augenmaß
========
Given a background photo, this tool allows you to draw lines on top of it whose relative
lengths in pixel are shown. Double-clicking on a line allows you to set a
'reference size', all the other numbers are adjusted accordingly.
Use this for instance by taking a picture of something with a ruler in the
same focus; use the ruler to set a reference size and now you have correct
measurements for the other parts in the picture.
In this example, we mark a known distance (40mm) so that we can get the value
for the distance to be measured (12.70mm).
![sample-image][sample-image]
Basic UI:
* Open [augenmass.html](https://rawgithub.com/hzeller/augenmass/master/augenmass.html) in your browser.
* Choose background image file.
(Nothing is uploaded anywhere, this is just used locally by your browser).
* Draw lines on top of your background image. First click first point, second
click second point. ESC key if you want to cancel the current line.
* The loupe shows a magnified view of the area the mouse cursor is covering.
* Double-click on a number to enter some value. The other lines are
automatically re-calculated according to that factor.
* Right-click to either abort the current line or delete the closest line.
* If you start the line exactly where another one stopped, the angle between the
lines is indicated. The loupe functionality will help you match the points.
![Triangles...][angle-image]
* You can download the result as transparent overlay PNG image.
(Note, I don't really know JavaScript, this is essentially my first JavaScript experiment.
if you see things to improve, just send me a pull request. See also TODOs for inspiration).
[sample-image]: https://github.com/hzeller/augenmass/raw/master/sample-image/augenmass.png
[angle-image]: https://github.com/hzeller/augenmass/raw/master/sample-image/angles.png