By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,606 Members | 3,832 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,606 IT Pros & Developers. It's quick & easy.

Take coordinates form image

P: n/a
Hello,
I have a simple problem: mark a list of defects
on an image.

I think the best way to do it is to select a single
deffect, then take two coordinates of coursor
form an image on a web page (first when user press
the button, and the second when he releases it).
Those two points are going to be send to the web
application (i.e. with AJAX) and saved in a database.
Later, I will use those points to render
the image with RMagic (drawing the lines and defects
list numbers on top of the image).

Any suggestions how to do it?

Even a chapter in a book, or enything
what could get me started is welcomed.

Best regards,
Tom
Nov 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
"Tomasz Bak" <op*******@wp.pl> wrote in message
news:dl**********@nemesis.news.tpi.pl...
Hello,
I have a simple problem: mark a list of defects
on an image.

I think the best way to do it is to select a single
deffect, then take two coordinates of coursor
form an image on a web page (first when user press
the button, and the second when he releases it).
Those two points are going to be send to the web
application (i.e. with AJAX) and saved in a database.
Later, I will use those points to render
the image with RMagic (drawing the lines and defects
list numbers on top of the image).

Any suggestions how to do it?

Even a chapter in a book, or enything
what could get me started is welcomed.

Best regards,
Tom


Will this help? Watch for word-wrap.

<html>
<head>
<title>coords.htm</title>
<script type="text/javascript">
function coords() {
var f = document.forms[0];
var x = window.event.screenX;
var y = window.event.screenY;
if (f.xy1.value == "") {
f.xy1.value = x + "," + y;
} else {
f.xy2.value = x + "," + y;
}
}
</script>
</head>
<body>
<img src="http://www.google.com/intl/en/images/logo.gif"
border="1" width="276" height="110" alt="" onclick="coords()">
<form>
<br><input type="text" name="xy1" size="9" value="">
<br><input type="text" name="xy2" size="9" value="">
<br><input type="reset" value="Reset">
</form>
</body>
</html>
Nov 23 '05 #2

P: n/a
McKirahan wrote:
"Tomasz Bak" <op*******@wp.pl> wrote in message
news:dl**********@nemesis.news.tpi.pl...
Hello,
I have a simple problem: mark a list of defects
on an image.

I think the best way to do it is to select a single
deffect, then take two coordinates of coursor
form an image on a web page (first when user press
the button, and the second when he releases it).
Those two points are going to be send to the web
application (i.e. with AJAX) and saved in a database.
Later, I will use those points to render
the image with RMagic (drawing the lines and defects
list numbers on top of the image).

Any suggestions how to do it?

Even a chapter in a book, or enything
what could get me started is welcomed.

Best regards,
Tom

Will this help? Watch for word-wrap.


If the solution is only for browsers implementing the IE event model and
window properties, and if the position is to be relative to the entire
screen, then yes.

But if the solution needs to be cross-browser and the coordinates
relative to the image, the script below may suit better. Note that IE
does not include the default body padding/margin in the offset, so it
must be set to some value (say zero) or the element absolutely
positioned - otherwise the coordinates will be out by whatever the IE
default is (about left 13px and top 17px).

The following script it a quick hack from bits I had lying around: it
will only draw a box from top left to bottom right; boxes can extend
beyond the image; event capturing and handling is probably not optimal
(well, almost certainly not); /et al/.

Quite a bit of further development is required but it gives the OP some
idea of the scope of what is being attempted.
<div id="mBox" style="position: absolute; border: 2px solid red;
display: none;"></div>

<img src="a.jpg"
border="1" width="276" height="110" alt=""
onmousedown="DoMeasure.startMeasure(event, this)"
style="position: absolute; top: 100px; left: 100px;"><br>
<input type="button" value="Clear boxes"
onclick="DoMeasure.clearBoxes();">
<div id="msg"></div>

<script type="text/javascript">

var DoMeasure = ( function() {

var mBoxRoot = document.getElementById('mBox');
var Boxes = [];
var msgDiv = document.getElementById('msg');
var docBody = document.body || document.documentElement;

function startMeasure(e, el)
{
var cPos = getCursorPos(e);
var box = mBoxRoot.cloneNode(true);
Boxes[Boxes.length] = box;
box.style.display = '';
box.id = '';
box.style.left = cPos.x + 'px';
box.style.top = cPos.y + 'px';
docBody.appendChild(box);

var elPos = getElPos(el);

el.onmousemove = function() {stretchBox(e, cPos, box);}
el.onmouseup = stopMeasure;

// Event capture not need for 'zillas but important for IE
if ( el.captureEvents ) { // Capture events 'zillas
el.captureEvents(
Event.MouseDown | Event.MouseMove | Event.MouseUp
);
} else if ( el.setCapture ) { // Capture events IE
el.setCapture();
}

// Just for debug
msgDiv.innerHTML = (cPos.x - elPos.x)+', '+(cPos.y - elPos.y);
}

// Return the position of event (cursor)
function getCursorPos(e)
{
if (e.pageX || e.pageY) return {x:e.pageX, y:e.pageY};
if (e.clientX || e.clientY) {
return {x:e.clientX + document.body.scrollLeft,
y:e.clientY + document.body.scrollTop};
}
}

// Return the top left position of an element
function getElPos(el)
{
var pos = {x:0, y:0};
if (el.offsetParent){
while (el.offsetParent){
pos.x += el.offsetLeft;
pos.y += el.offsetTop;
el = el.offsetParent;
}
return pos;
}
if (el.x) return {x:el.x, y:el.y}
}

// Change the width & height of an element
function stretchBox(e, sPos, box)
{
var e = e || window.event;
var cPos = getCursorPos(e);
box.style.width = (cPos.x - sPos.x) + 'px';
box.style.height = (cPos.y - sPos.y) + 'px';
}

// Cancel mousemove & cleanup
function stopMeasure(e)
{
var e = e || window.event;
this.onmousemove = null;

if ( this.releaseEvents ) { // Release events & capture
this.releaseEvents(
Event.MouseDown | Event.MouseMove | Event.MouseUp
);
} else if ( this.releaseCapture ) {
this.releaseCapture();
}

var cPos = getCursorPos(e);
msgDiv.innerHTML += '<br>' + cPos.x + ', ' + cPos.y;
}

return ({

// Start measuring on mousedown
startMeasure :
function(e, el){
var e = e || window.event;
startMeasure(e, el);
},

// Delete measurement boxes
clearBoxes :
function(){
var i = Boxes.length;
while(i--) Boxes[i].parentNode.removeChild(Boxes[i]);
Boxes.length = 0;
}
});
})();
</script>

--
Rob
Nov 23 '05 #3

P: n/a
RobG wrote:
McKirahan wrote:
"Tomasz Bak" <op*******@wp.pl> wrote in message
news:dl**********@nemesis.news.tpi.pl...

Even a chapter in a book, or enything
what could get me started is welcomed.

Best regards,
Tom
Will this help? Watch for word-wrap. Thank you, it helps a lot to see a solution
in just a couple of lines!


If the solution is only for browsers implementing the IE event model and
window properties, and if the position is to be relative to the entire
screen, then yes.

Supporting other browsers is a good thing.
Especially as long as I dont use IE myself ;P

But if the solution needs to be cross-browser and the coordinates
relative to the image, the script below may suit better. Note that IE
does not include the default body padding/margin in the offset, so it
must be set to some value (say zero) or the element absolutely
positioned - otherwise the coordinates will be out by whatever the IE
default is (about left 13px and top 17px). Oki. I think I can open the image in another window
(there is some javascript call to open a popup I believe)
and the problem with relativness will disappear.

The following script it a quick hack from bits I had lying around: it
will only draw a box from top left to bottom right; boxes can extend
beyond the image; event capturing and handling is probably not optimal
(well, almost certainly not); /et al/.

Thats more than enough to get me going. Thanks!

Best regards,
Tom
Nov 23 '05 #4

P: n/a
On 2005-11-20, Tomasz Bak <op*******@wp.pl> wrote:
Hello,
I have a simple problem: mark a list of defects
on an image.

I think the best way to do it is to select a single
deffect, then take two coordinates of coursor
form an image on a web page (first when user press
the button, and the second when he releases it).
Those two points are going to be send to the web
application (i.e. with AJAX) and saved in a database.
Later, I will use those points to render
the image with RMagic (drawing the lines and defects
list numbers on top of the image).

Any suggestions how to do it?


capture the onmousedown and onmouseup events and extract the
coodinates from them (possibly subtracting the images left and top
coodinates to get a result relative to the image.

--

Bye.
Jasen
Nov 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.