Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Need JavaScript to measure number of pixels

    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/
    Last edited by nartex; 07-13-2003 at 04:33 PM.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    UK
    Posts
    1,137
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Spammers next time you spam me consider the implications:
    (1) that you will be persuaded by me(in a legitimate mannor)
    (2)It is worthless to you, when i have finished

  • #3
    New to the CF scene
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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).

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    UK
    Posts
    1,137
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Spammers next time you spam me consider the implications:
    (1) that you will be persuaded by me(in a legitimate mannor)
    (2)It is worthless to you, when i have finished

  • #5
    New to the CF scene
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    UK
    Posts
    1,137
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Spammers next time you spam me consider the implications:
    (1) that you will be persuaded by me(in a legitimate mannor)
    (2)It is worthless to you, when i have finished

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    UK
    Posts
    1,137
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer

    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.
    Code:
    <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
    Last edited by scroots; 07-13-2003 at 08:02 PM.
    Spammers next time you spam me consider the implications:
    (1) that you will be persuaded by me(in a legitimate mannor)
    (2)It is worthless to you, when i have finished

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    UK
    Posts
    1,137
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Code:
    <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
    Spammers next time you spam me consider the implications:
    (1) that you will be persuaded by me(in a legitimate mannor)
    (2)It is worthless to you, when i have finished

  • #9
    New to the CF scene
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This script could be modified for this application, methinks.

    http://www.peterbailey.net/test/map_plotter.htm
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #11
    New to the CF scene
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!
    Last edited by nartex; 07-13-2003 at 09:41 PM.

  • #12
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's the 5th parameter of the constructor

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

    It's in pixels per Unit
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #13
    Senior Coder
    Join Date
    Jun 2002
    Location
    UK
    Posts
    1,137
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i knew i had seen that map before but i couldn't remember where.

    scroots
    Spammers next time you spam me consider the implications:
    (1) that you will be persuaded by me(in a legitimate mannor)
    (2)It is worthless to you, when i have finished


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •