...

View Full Version : Javascript to measure number of pixels



nartex
07-13-2003, 03:36 PM
Hi!

I'm constructing an image database in anatomy with lots of histological images (images of tissue samples), and I'm trying to add some interactivity to my pictures. I'm therefore in search of a script that would make the user point his mouspointer anywehere on the picture, drag a straight line fom that point to any other point on the picture and get a measurement of the distance in micrometers (initially in pixels, but the pixel/micrometer ratio can be embedded in the script so that the output to the user would be in micrometers). This script would be most useful for i.e. pathologic diagnostics.

I'm not that experienced in writing JavaScripts and I'm incapable of creating such a script myself. I don't know if such a script exists, but if anyone does, or for that matter, want to take on the challenge of creating such a script, please do not hesitate to make contact. The anatomy pages can be viewed at http://www.iob.uio.no/studier/undervisning/histologi/

scroots
07-13-2003, 06:29 PM
http://www.javascriptkit.com/script/script2/coord.shtml shows the mouse cordinates in the status bar.

I may have a fiddle for you, will the line be diagonal/horizontal/vertical? or any line?

scroots

nartex
07-13-2003, 06:43 PM
The best solution would be any line. I can see that it makes the script more complex, but it makes the function far more useful than just measuring a vertical or horizontal distance.

It does not require to show a line between the two selected points (but it looks better).

scroots
07-13-2003, 06:46 PM
i can get the start and end points and hopefully i will be able to calculate wheteher it is straight/vertical/horizontal.

Do you want an option to draw a straight line, like a checkbox so if your hand isn't that stead it will count it as straight?

scroots

nartex
07-13-2003, 06:53 PM
Hey, that would be excellent! Measuring the shortest distance between two user defined points is the best, so making an option that would "make the line straight", would be super.

scroots
07-13-2003, 07:43 PM
i have construced a script that will do diagonal, vertical or horizontal lines.

I am right in that the distance between two points if they are not on a vertical or horizonatal straight line, the nearest distance will be a diagonal?

scroots

scroots
07-13-2003, 07:59 PM
the code so far, it is unfinished as i couldn't decied about the answer to the question in my post above.

It may not be the best code as of yet.


<html>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>

<body>
<script language="javascript">

//original Display Mouse coordinates in status bar - By Kous (kous@ihateclowns.com)
//Visit http://javascriptkit.com for this script and more
//distance travelled created by scroots.
//www.codingforums.com
var where = ""; // which link
var xCoord ="";
var xeCoord ="";
function checkstart(e) {
if (document.layers){
xCoord = e.x;
yCoord = e.y;
}
else if (document.all){
xCoord = event.clientX;
yCoord = event.clientY;
}
else if (document.getElementById){
xCoord = e.clientX;
yCoord = e.clientY;
}

}

var where = ""; // which link
var distance = ""; // distance travelled

function checkend(e) {
if (document.layers){
xeCoord = e.x;
yeCoord = e.y;
}
else if (document.all){
xeCoord = event.clientX;
yeCoord = event.clientY;
}
else if (document.getElementById){
xeCoord = e.clientX;
yeCoord = e.clientY;
}

}


document.onmousedown = checkstart;
if(document.captureEvents) {document.captureEvents(Event.MOUSEDOWN);}

document.onmouseup = checkend;
if(document.captureEvents) {document.captureEvents(Event.MOUSEUP);}


function horizontal(){
if(xeCoord>xCoord){
distance=xeCoord-xCoord;
}else{
distance=xCoord-xeCoord;
show();
}
}
function vertical(){
if(yeCoord>yCoord){
distance=yeCoord-yCoord;
}else{
distance=yCoord-yeCoord;
show();
}
}
function diagonal(){

if(xeCoord>xCoord){
xlength=xeCoord-xCoord;
}else{
xlength=xCoord-xeCoord;
}
if(yeCoord>yCoord){
ylength=yeCoord-yCoord;
}else{
ylength=yCoord-yeCoord;
}
var bsquared=((xlength*xlength)+(ylength*ylength))
distance=Math.sqrt(bsquared);
distance=Math.round(distance);
show();
}
function freeline(){

}
function handleKeyPress(evt) {
var nbr, chr;
if (window.Event) nbr = evt.which;
else nbr = event.keyCode;
//H
if(nbr==72){ horizontal();}
//V
else if(nbr==86){vertical();}
//d
else if(nbr==68){diagonal();}
//free line
else if(nbr==70){freeline();}
else{return true;}
}
document.onkeydown= handleKeyPress
</script>

<form method="POST" name="form">
<p>Distance Between Points: <input type="text" name="dis" size="20"></p>
</form>
<script>
function show(){
document.form.dis.value=distance;
}
</script>
<p>&nbsp;</p>
<p>After dragging your mouse press a key and it will tell you the distance
<p>Horizontal Line Press H</p>
<p>Vertical Line Press V</p>
<p>Diagonal line Press D</p>
<p>Free line Press f</p>


<p>&nbsp;</p>
</body>

</html>


scroots
woot woot post 800

scroots
07-13-2003, 08:16 PM
after much thought i have decided if a line is not vertical or horizantal between two points the shortest line is a diagonal.

so my improved code is


<html>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>

<body>
<script language="javascript">

//origianl Display Mouse coordinates in status bar- By Kous (kous@ihateclowns.com)
//Visit http://javascriptkit.com for this script and more
//modifications for distance calculating by scroots visit www.codingforums.com
var where = ""; // which link
var xCoord ="";
var xeCoord ="";
function checkstart(e) {
if (document.layers){
xCoord = e.x;
yCoord = e.y;
}
else if (document.all){
xCoord = event.clientX;
yCoord = event.clientY;
}
else if (document.getElementById){
xCoord = e.clientX;
yCoord = e.clientY;
}

}

var where = ""; // which link
var distance = ""; // distance travelled

function checkend(e) {
if (document.layers){
xeCoord = e.x;
yeCoord = e.y;
}
else if (document.all){
xeCoord = event.clientX;
yeCoord = event.clientY;
}
else if (document.getElementById){
xeCoord = e.clientX;
yeCoord = e.clientY;
}

}


document.onmousedown = checkstart;
if(document.captureEvents) {document.captureEvents(Event.MOUSEDOWN);}

document.onmouseup = checkend;
if(document.captureEvents) {document.captureEvents(Event.MOUSEUP);}


function horizontal(){
if(xeCoord>xCoord){
distance=xeCoord-xCoord;
}else{
distance=xCoord-xeCoord;
show();
}
}
function vertical(){
if(yeCoord>yCoord){
distance=yeCoord-yCoord;
}else{
distance=yCoord-yeCoord;
show();
}
}
function diagonal(){

if(xeCoord>xCoord){
xlength=xeCoord-xCoord;
}else{
xlength=xCoord-xeCoord;
}
if(yeCoord>yCoord){
ylength=yeCoord-yCoord;
}else{
ylength=yCoord-yeCoord;
}
var bsquared=((xlength*xlength)+(ylength*ylength))
distance=Math.sqrt(bsquared);
distance=Math.round(distance);
show();
}
function handleKeyPress(evt) {
var nbr, chr;
if (window.Event) nbr = evt.which;
else nbr = event.keyCode;
//H
if(nbr==72){ horizontal();}
//V
else if(nbr==86){vertical();}
//d
else if(nbr==68){diagonal();}
//free line
else if(nbr==70){diagonal();}
else{return true;}
}
document.onkeydown= handleKeyPress
</script>

<form method="POST" name="form">
<p>Distance Between Points: <input type="text" name="dis" size="20"></p>
</form>
<script>
function show(){
document.form.dis.value=distance;
}
</script>
<p>&nbsp;</p>
<p>After dragging your mouse press a key and it will tell you the distance
<p>Horizontal Line Press H</p>
<p>Vertical Line Press V</p>
<p>Diagonal line Press D</p>
<p>Free line Press f</p>


<p>&nbsp;</p>
</body>

</html>


what do you think? does it work for you?

scroots

nartex
07-13-2003, 08:25 PM
Sorry late answer. If I understand your question right, one has three options, horizontal, vertical and diagonal (45 degrees). If the line the user draes is not any of the first two, the line vill be drawn diagonally. It sounds nice.

But as stated before, a straight line in any angle would be the ultimate tool.

I've taken a look at the script and it looks rather impressive. As I've admitted before, I'm not any good at writing JavaScript, så I appreciate your help.

I've set up a testingpage with your script and an example image og the inner ear; an image where one coud measure the diameters of the different tubules and organelles. The adress is http://www.odont.uio.no/of/temp/test/script.php.

Since I know so little about JS, I might need your help to make the script work with the aforementioned picture.

beetle
07-13-2003, 09:05 PM
This script could be modified for this application, methinks.

http://www.peterbailey.net/test/map_plotter.htm

nartex
07-13-2003, 09:24 PM
Yes, it looks nice. I've tried it on a test page http://www.odont.uio.no/of/temp/test/script2.php

It really does just what I needed it to do, and in an easy way. It can also be used to measure the surface of objects. This is great!

Thanks! :thumbsup:

beetle
07-13-2003, 10:15 PM
It's the 5th parameter of the constructor

var a = new MapPlotter( 'mapImage', '#00FF00', '#0000FF', 1, 0.41 );

It's in pixels per Unit

scroots
07-14-2003, 07:25 PM
i knew i had seen that map before but i couldn't remember where.

scroots



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum