A simple tool for estimating length on HTML in CSS pixel.
GitHub: https://github.com/YujiSODE/screenCoord

Copyright (c) 2018 Yuji SODE <[email protected]>
This software is released under the MIT License.
See LICENSE or http://opensource.org/licenses/mit-license.php

Figure 1. Screenshot of screenCoord.
Length on HTML view is estimated using a distance between two clicked points.
Clicks on "available area" are detected as above clicked points.

• colored rectangle: it changes color of available area.
• [-] and [+]: they change size of available area.
• [<=>]: it moves these controls.
• [Log]: it shows the current log of "screenCoord.js".
• [Clear]: it clears the current log of "screenCoord.js".
• [X]: it cloes these controls.
• Available area: it closes/opens available area.

var f=screenCoord(?zIndex?);

This function generates a folding canvas and returns a function that returns text log.

• zIndex: an optional integer value for z-index with default value of 1000.

Function that generated using screenCoord(?zIndex?) returns csv formatted text log as follows:
x1,y1,x2,y2,length [px]

• screenCoord.js

• screenCoord_unitConverter.js

<script src="screenCoord.js"></script>
<script src="name of additional module"></script>

• lSum.js (Yuji SODE, 2018): https://gist.github.com/YujiSODE/ad3ab35235b1648c9f8e08f6a35e8439