Empirisoft Support

    Welcome to Empirisoft Support
Results 1 to 6 of 6

Thread: Get mouse position using custom forms (case 12064)

  1. #1

    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>
    Last edited by jason_reed; 12-17-2013 at 05:43 PM.

  2. #2
    Join Date
    Feb 2013
    Posts
    1,093
    What exactly are you trying to modify in this code? Is it not working at all or does it work but not do something that you desire?

    In either case, see if the html code at this link might be more in line with what you are trying to do:
    http://www.emanueleferonato.com/2006...th-javascript/
    Jason Reed
    Empirisoft Software Support Specialist

  3. #3

    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>

  4. #4
    Join Date
    Feb 2013
    Posts
    1,093
    Check out the html script at this link:

    http://www.empirisoft.com/support/sh...t=custom+mouse
    Jason Reed
    Empirisoft Software Support Specialist

  5. #5

    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>

  6. #6
    Join Date
    Feb 2013
    Posts
    1,093
    Awesome! And thanks for posting the html code you used; this will be very helpful for other users to see.
    Jason Reed
    Empirisoft Software Support Specialist

Similar Threads

  1. Continous mouse position
    By rkreager in forum Hardware: How Do I...
    Replies: 3
    Last Post: 03-25-2021, 04:50 AM
  2. Resetting the mouse cursor position in between trials (case 1743)
    By gerardo in forum DirectRT v2018: How Do I...
    Replies: 2
    Last Post: 03-21-2013, 05:16 PM
  3. position and size of html in custom items
    By MandaHyde in forum MediaLab Older Versions: How Do I...
    Replies: 2
    Last Post: 10-29-2009, 12:43 PM
  4. Mouse position
    By rothers27 in forum MediaLab Older Versions: How Do I...
    Replies: 2
    Last Post: 07-08-2008, 04:09 PM
  5. custom item for tracking XY joystick/mouse movements
    By surpass in forum MediaLab Older Versions: How Do I...
    Replies: 3
    Last Post: 12-06-2007, 09:12 AM

Tags for this Thread

Posting Permissions

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