Post Reply 
 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Multitouch javascript?
met_fredrik Offline
Newbie
*

Posts: 1
Joined: Apr 2010
Post: #1
Multitouch javascript?
Hi!

As stated in the title I want to record two touches at once and read each touches coordinates inside a div using javascript. I am now using "pageX and pageY" to get the coordinates. But as you probably see a lot clearer than I do that is only going to work one time, as it detects the coordinates for the whole page.

This is the script I am using now. I have been trying to make another div and change functions to make it only get coordinates in one div.

Code:
<html>
<head>
<title>
Touch coordinates
</title>



</head>

<script type="text/javascript" charset="utf-8">

var startx = 0;
var starty = 0;
var startz = 0;

var xvector = 0;
var yvector = 0;
var zvector = 0;


document.ontouchstart = function(e){
    var touch = e.touches[0];
    startx = touch.layerX;
    starty = touch.layerY;
    document.getElementById("touch").innerHTML = "Starting";
}

document.ontouchend = function(e){
    startx = 0;
    starty = 0;
    xvector = 0;
    yvector = 0;
    document.getElementById("touch").innerHTML = "Touch Ended";
    
    //var xmlhttp = new XMLHttpRequest();
    //xmlhttp.open("GET", "newVector.php?x="+xvector+"&y="+yvector+"&y="+zvector,true);
    //xmlhttp.send(null);
}


document.ontouchmove = function(e){
  e.preventDefault();
  if(e.touches.length == 1){
    var touch = e.touches[0];
    xvector = touch.layerX - startx;
    yvector = - (touch.layerY - starty);
    document.getElementById("touch").innerHTML = "Current Vector " + xvector + " " + yvector + " " + zvector;

    //var xmlhttp = new XMLHttpRequest();
    //xmlhttp.open("GET", "newVector.php?x="+xvector+"&y="+yvector,true);
    //xmlhttp.send(null);
  }
}


function sendUpdate(){
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", "newVector.php?x="+xvector+"&y="+yvector+"&y="+zvector,true);
    xmlhttp.send(null);
}


setInterval("sendUpdate()",50);

</script>

<body style="center">

<div class="touch" style="center; background-color:#ff0023; width:100%; height:80%; font-size:50px;" id="touch">
XY
</div>

<div style="height:20%; width:100%;" id="touch2">
Here I want to add another div at 20% height wich also records touch coordinates the same way.
</div>


</body>
</html>


Thanks in advance!
2010.04.22 11:04 AM
Find all posts by this user Quote this message in a reply
Post Reply 




User(s) browsing this thread: 1 Guest(s)