Welcome to the Java Programming Forums


The professional, friendly Java community. 21,500 members and growing!


The Java Programming Forums are a community of Java programmers from all around the World. Our members have a wide range of skills and they all have one thing in common: A passion to learn and code Java. We invite beginner Java programmers right through to Java professionals to post here and share your knowledge. Become a part of the community, help others, expand your knowledge of Java and enjoy talking with like minded people. Registration is quick and best of all free. We look forward to meeting you.


>> REGISTER NOW TO START POSTING


Members have full access to the forums. Advertisements are removed for registered users.

Results 1 to 4 of 4

Thread: Multiple selection (bounding boxes) in displayed image

  1. #1
    Junior Member
    Join Date
    Oct 2021
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Multiple selection (bounding boxes) in displayed image

    Hello,

    I use a browser-based Java-Script to mark the upper left and lower right corner of a bounding box to save these coordinates for further processing (see below). Is there a way to create several of these coordinate-groups for multiple selections? The script does not produce a visible bounding box. I put the whole HTML below.



    <head>
    <title>Build crop frame</title>

    <script type="text/javascript">
    <!--

    var Point = 1;
    var X1, Y1, X2, Y2;

    function FindPosition(oElement)
    {
    if( typeof( oElement.offsetParent ) != "undefined" )
    {
    for( var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent )
    {
    posX += oElement.offsetLeft;
    posY += oElement.offsetTop;
    }
    return [ posX, posY ];
    }
    else
    {
    return [ oElement.x, oElement.y ];
    }
    }

    function GetCoordinates(e)
    {
    var PosX = 0;
    var PosY = 0;
    var ImgPos;
    ImgPos = FindPosition(myImg);
    if (!e) var e = window.event;
    if (e.pageX || e.pageY)
    {
    PosX = e.pageX;
    PosY = e.pageY;
    }
    else if (e.clientX || e.clientY)
    {
    PosX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    PosY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;

    }
    PosX = PosX - ImgPos[0];
    PosY = PosY - ImgPos[1];
    if (Point == 1)
    {
    X1 = PosX;
    Y1 = PosY;
    Point = 2;
    document.getElementById("x1").innerHTML = PosX;
    document.getElementById("y1").innerHTML = PosY;
    }
    else
    {
    X2 = PosX;
    Y2 = PosY;
    Point = 3;
    document.getElementById("x2").innerHTML = PosX;
    document.getElementById("y2").innerHTML = PosY;

    }

    document.getElementById("imgwidth").innerHTML = myImg.naturalWidth;
    document.getElementById("imgheight").innerHTML = myImg.naturalHeight;

    var x1 = document.getElementById("x1").innerHTML
    var y1 = document.getElementById("y1").innerHTML
    var x2 = document.getElementById("x2").innerHTML
    var y2 = document.getElementById("y2").innerHTML
    var Reswidth = myImg.naturalWidth / 20
    var Resheight = myImg.naturalHeight / 20

    var sleft = Math.round((x1 * 20) / (document.getElementById("imgwidth").innerHTML / 1000))
    var stop = Math.round((y1 * 20) / (document.getElementById("imgheight").innerHTML / 1000))
    var swidth = Math.round(((Reswidth - x1 - (Reswidth - x2)) * 20) / (myImg.naturalWidth / 1000))
    var sheight = Math.round(((Resheight - y1 - (Resheight - y2)) * 20) / (myImg.naturalHeight / 1000))

    document.getElementById("imgCoorRes").innerHTML = 'Selection \"'+sleft+' '+stop+' '+swidth+' '+sheight+'\"';



    }

    function Clear()
    {
    Point = 1;
    document.getElementById("x1").innerHTML = '';
    document.getElementById("y1").innerHTML = '';
    document.getElementById("x2").innerHTML = '';
    document.getElementById("y2").innerHTML = '';

    document.getElementById("imgCoorRes").innerHTML = '';

    }

    function Save()
    {
    document.getElementById("imgwidth").innerHTML = myImg.naturalWidth;
    document.getElementById("imgheight").innerHTML = myImg.naturalHeight;

    var x1 = document.getElementById("x1").innerHTML
    var y1 = document.getElementById("y1").innerHTML
    var x2 = document.getElementById("x2").innerHTML
    var y2 = document.getElementById("y2").innerHTML
    var Reswidth = myImg.naturalWidth / 20
    var Resheight = myImg.naturalHeight / 20

    var sleft = Math.round((x1 * 20) / (document.getElementById("imgwidth").innerHTML / 1000))
    var stop = Math.round((y1 * 20) / (document.getElementById("imgheight").innerHTML / 1000))
    var swidth = Math.round(((Reswidth - x1 - (Reswidth - x2)) * 20) / (myImg.naturalWidth / 1000))
    var sheight = Math.round(((Resheight - y1 - (Resheight - y2)) * 20) / (myImg.naturalHeight / 1000))

    document.getElementById("imgCoorRes").innerHTML = 'Selection \"'+sleft+' '+stop+' '+swidth+' '+sheight+'\"';

    }

    function Initialisation()
    {
    document.form1.savebutton.disabled = true;
    }

    //-->
    </script>

    </head>
    <body onload="Initialisation();">


    <figure>
    <img src="" id="myImgId" /><p>Click on the image to set the coordinates.</p>
    </figure>

    <p>width: <span id="imgwidth"></span>; height: <span id="imgheight"></span></p>
    <br>
    <p>The coordinates are: <span id="imgCoorRes"><span></p>


    <p><strong>First Point:</strong> X: <span id="x1"></span>, Y: <span id="y1"></span></p>
    <p><strong>Second Point:</strong>X: <span id="x2"></span> Y: <span id="y2"></span></p>
    <form name="form1">
    <input type="button" name="clearbutton" value="Clear" onclick="Clear();" />
    </form>

    <script type="text/javascript">
    <!--
    var myImg = document.getElementById("myImgId");
    myImg.onmousedown = GetCoordinates;
    //-->
    </script>

    </body>

    </html>

  2. #2
    Junior Member
    Join Date
    Jul 2019
    Posts
    26
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Default Re: Multiple selection (bounding boxes) in displayed image

    this is Java forum

  3. #3
    Junior Member
    Join Date
    Oct 2021
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Multiple selection (bounding boxes) in displayed image

    Quote Originally Posted by zemiak View Post
    this is Java forum
    If you would look carefully, you'd see that the code contains Java function. But never mind, I find out on my own.

  4. #4
    Junior Member
    Join Date
    Jul 2019
    Posts
    26
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Default Re: Multiple selection (bounding boxes) in displayed image

    Java is not Javascript

Similar Threads

  1. Replies: 1
    Last Post: January 27th, 2014, 12:46 AM
  2. Selecting and dragging a image from multiple image in Java Applet
    By CY5 in forum What's Wrong With My Code?
    Replies: 1
    Last Post: May 26th, 2013, 02:44 PM
  3. Can't seem to get this image to be displayed!
    By mkrage in forum What's Wrong With My Code?
    Replies: 0
    Last Post: October 27th, 2012, 06:07 PM
  4. no image is being displayed.. please help..
    By namita in forum AWT / Java Swing
    Replies: 2
    Last Post: July 23rd, 2012, 11:52 AM