Pic Measure instructions

PicMeasure is a tool for making measurements between points on an image. Intervals are measured in pixels. The primary use for these measurements is to calculate ratios between measures.

System requirements

PicMeasure runs in-browser and is best used on a desktop. However it has been tested and is compatible with iPhone / iOS also.

Overview - Quick start guide

PicMeasure allows you to:

  • Choose an image on your PC to be loaded into the tool
  • Click on two points to specify an interval (start and end points)
  • Interval lengths are automatically measured in pixels
  • You can label an interval - PicMeasure will either
    • Prompt you for a label each time you specify an interval
    • Or use the same label (which you specify) for each interval
    • And you can mix and match between options as you carry out your work
  • If you are measuring segments from a continuous line (such as an outline, or the route through a map) then you can specify that the end point of the last interval should be the start point of the next interval
    • Again, you can mix and match between options as you carry out your work
  • All measurements are added to a panel at top right.
    • Each measurement records filename, label and distance.
    • The contents of this panel can be pasted into a text editor and saved with file extension .csv
    • The CSV file can be opened by Excel for you to perform calculations on the measures

Re-loading your browser page will clear all your measurement data.

The instructions below are written in the logical order you would follow to make measurements on an image.

Loading an image

  • Click the "Browse" button:

  • Locate the image on your hard drive and select it

No files are transferred to WLMD while using this tool.

Your photo stays on your PC or device - the tool simply displays it to you from your own PC or device.

The status will update to say the image has been loaded:

Labeling

There are two options for labeling an interval:

  • Have PicMeasure prompt you for a label each time you specify an interval - choose the 'Prompt for label' option (this is the default).
  • Have PicMeasure use the same label each time you specify an interval - choose 'Always use label' and then type in the label to use.

You can swap between these options at any time.

You might want to specify a label each time you specify an interval if, for example, you are calculating ratios between different body parts. In this case you might measure the length of the hand and label it 'hand'. Likewise 'forearm', 'upper arm', 'trunk'. It will then be easy to work with your data to calculate ratios such as 'hand/trunk', 'forearm/trunk' and so on. You could calculate the ratio between the whole arm length and the trunk as '(hand+forearm+upper arm)/trunk'.

However entering labels after every interval can be tedious if you have many similar measures to make. In this case you might want to take 3 measures for the hand, forearm and upper arm but it is adequate to name all of these measures as 'arm'. When you perform calculations later, you will simply sum all 'arm' values to obtain the length of the arm. You can apply this approach when tracing a route through a map also and might use the label 'route 1', then trace a second route as 'route 2' in order to calculate which is the longer route. You can update the label to be used, at any time, and the following measures will use your new label.

Measuring intervals

To measure an interval, you need to specify 2 points - the start and the end of the interval. You do this by clicking on the points you choose. A red dot is placed on the image each time you click your image. The red dots are used as a visual guide for you - they are not used in calculating the measurement. Rather, the exact pixel clicked is used for calculating measurements.

Taking the same measure multiple times will produce different results - as the measure is exact, to the pixel. If approximate measures are adequate, then accept your measure will have a margin of error. Otherwise take each measure multiple times and average your measures.

There are 2 options for specifying intervals:

  • Measure separate intervals each time (by specifying start and end points each time) - choose 'Separate intervals' (this is the default).
  • Measure a continuous route (by taking the end point of the last interval as the start point of the next interval) - choose 'Continuous intervals'.

You might use separate intervals when you are measuring lots of different objects in the image. For example, you might be measuring the height of various objects (person, street lamp, car, cyclist). In this case you might click on the head of the person, then the foot of the person. This specifies the start (head) and end (foot) of an interval. You would then click on the top of the street lamp then the bottom of the street lamp. This specifies another 2 points which form an interval, and so on.

However where you are measuring a continuous 'line' that has many segments, one segment may follow (and be connected to) the previous one. For example, if you want to trace a route through a series of streets on a map you might click on one street corner, then the next street corner. These first two clicks specify the start and end points of the first interval. From that second street corner you want to measure down a side street to a third street corner. Simply click at the third street corner and the distance from the second street corner to the third is calculated - there was no need for you to specify the start of that second interval - it was assumed that where the first interval ended (at the second street corner) would be the start of the next interval. You may use this approach to measure the perimeter of an object also by clicking on points along that object's outline.

The measurement calculation follows Pythagoras' theorem. Specifically, the following javascript calculation is used:

Math.sqrt(Math.pow(startY - endY, 2) + Math.pow(startX - endX, 2))

The measurement data

Each time the 2nd point for an interval is specified, the length of the interval is recorded in the panel at top right.

For each interval, 3 items are recorded:

  • the filename
  • the label
  • the length in pixels

Scrolling the image

On a desktop browser:

  • For larger images you can scroll up and down using your mouse's scroll wheel.
  • You can scroll horizontally using the scroll bar at the bottom of the image

On iOS / iPhone:

  • You can scroll by touching the image and then dragging the image before releasing your touch. (If you release your touch before dragging, a point is added instead).

Saving the measurements

To save your measurements, select all the data, copy and paste into a text editor. Save the data with a filename ending in ".csv" (for 'comma separated values'). This file can be opened by Excel.

Choosing a new image

At any time you can choose a new image by clicking the 'Browse' button again. Your measurements will remain within the panel at top right. If your new image has a different filename then you will be able to distinguish measurements from different images because the data in the panel includes the file names.

Clearing the red dots

If at any time you want to clear the red dots from your image, simply click the 'Browse' button and choose your image file again to re-load it. See above - your measurements will not be lost.

Correcting a label

If you make a mistake with your label name you can simply click inside the panel at top-right and correct the information.

Deleting a measurement

If you need to delete a measurement, simply click within the panel at top right and remove that line of information.

Example data analysis

Without showing the source image, this section shows how PicMeasure data might be analysed.

The data related to animal footprints that show a distinct "pad" and a separate "heel". Measurements of lengths and widths of each of these features were taken, for 3 prints in the source photo (not shown here).

In the above analysis three ratios were measured:

  • pad length to heel length
  • pad width to pad length
  • heel length to heel width

One conclusion is that the ratio showing the greatest variance is for the heel length to heel width. This is to be expected: when the pad strikes the ground, almost always the entire surface of the pad makes contact and leaves a measurable impression; however when the heel strikes the ground its full length does not always strike the ground, providing a reasonable explanation for the variance seen here.


Support, bug reports, feature requests

Copyright, legal, pricing and license

PicMeasure is copyright Chris Rehberg / WLMD.

The page that hosts PicMeasure is subject to the copyright terms of the WLMD website.

The source code for PicMeasure is copyright Chris Rehberg / WLMD.

The source code may not be reproduced, reverse engineered or hosted elsewhere.

You are permitted to use PicMeasure in accordance with the terms of the WLMD website.

No images are sent to the WLMD website - all images remain on your computer or device.

No measurements are sent to the WLMD website - all measurements remain on your computer or device.

You are permitted to copy the measurement data and save this into a file for your own use and you shall retain copyright over the data produced by you in using PicMeasure in accordance with these terms.

PicMeasure is free to use - however if you find the tool helpful, please consider a donation of $5 or another amount.