Get mouse position using custom forms (case 12064)
Hi,
Could anyone help me to return the x and y coordinates for a mouse click using an HTML form in Medialab using the custom feature? We need a blank square which covers the greater percentage of the screen that can be clicked on in any location to guess where an object is hidden. Bit like battleships but only one shot.
I found the following HTML Javascript code which I was trying modify and use:
<!doctype html>
<html>
<head>
<title>Get the coordinates on canvas</title>
<meta charset="utf-8" />
<style type="text/css">
#canvas{background-color: #000;}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", init, false);
function init()
{
var canvas = document.getElementById("canvas");
canvas.addEventListener("mousedown", getPosition, false);
}
function getPosition(event)
{
var x = new Number();
var y = new Number();
var canvas = document.getElementById("canvas");
if (event.x != undefined && event.y != undefined)
{
x = event.x;
y = event.y;
}
else // Firefox method to get the position
{
x = event.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
x -= canvas.offsetLeft;
y -= canvas.offsetTop;
alert("x: " + x + " y: " + y);
}
</script>
</head>
<body>
<canvas id="canvas" width="640" height="360"></canvas>
</body>
</html>
Get Mouse Click position saved as value using medialab
This code you referenced works fine when called with the custom type in Medialab. How do we now modify this code so the x and y values get stored back into Medialab DATA instead of being displayed on the screen? At the moment there is no "continue" or submit item to return to the next line in the Medialab questionnaire. Thanks so much for your help.
Code so far:
<html>
<head>
<script language="JavaScript">
function point_it(event){
pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
document.getElementById("cross").style.left = (pos_x-1) ;
document.getElementById("cross").style.top = (pos_y-15) ;
document.getElementById("cross").style.visibility = "visible" ;
document.pointform.form_x.value = pos_x;
document.pointform.form_y.value = pos_y;
}
</script>
</head>
<body>
<form name="pointform" method="post">
<div id="pointer_div" onclick="point_it(event)" style = "background-image:url('sun.jpg');width:500px;height:333px;">
<img src="point.gif" id="cross" style="position:relative;visibility:hidden;z-index:2;"></div>
You pointed on x = <input type="text" name="form_x" size="4" /> - y = <input type="text" name="form_y" size="4" />
</form>
</body>
</html>
Modified code to return x y coordinates of mouse click to Medialab
Thanks for your support with this. Using your examples we managed to include an image of a sandpit which when clicked on passes the x and y position of the mouse back to Medialab.
Our code here:
<html>
<head>
<script language="JavaScript">
function point_it(event){
var pos_x=0;
var pos_y=0;
pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
document.getElementById("<ml.varname>_01").value = pos_x;
document.getElementById("<ml.varname>_02").value = pos_y;
document.sandpit.submit();
}
</script>
</head>
<body>
<style>
input.check {height: 50px; width: 50px;}
<ml.styles>
</style>
<form name="sandpit" method="post">
<div id="pointer_div" onclick="point_it(event)" style = "background-image:url('sandpit.jpg');width:928px;height:593px;">
</div>
<br><br>
<ml.wording>:<br><br>
<input type="hidden" name="<ml.varname>_01"><br>
<input type="hidden" name="<ml.varname>_02"><br>
</form>
</body>
</html>
