4e42229bdd
git-subtree-dir: external/gainput git-subtree-split: 2be0a50089eafcc6fccb66142180082e48f27f4c
160 lines
3.5 KiB
HTML
160 lines
3.5 KiB
HTML
<html>
|
|
<head>
|
|
<title>Gainput Javascript touch client</title>
|
|
<style type="text/css">
|
|
body {
|
|
background-color: #f00;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#can {
|
|
background-color: #222;
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
var can, ctx, host, port, touchDevice;
|
|
|
|
var touches = [];
|
|
|
|
function setTouchPos(idx, x, y) {
|
|
if (!(idx in touches)) {
|
|
touches[idx] = { down: false, x: 0.0, y: 0.0 };
|
|
}
|
|
touches[idx].x = (x + 0.0) / can.width;
|
|
touches[idx].y = (y + 0.0) / can.height;
|
|
}
|
|
|
|
function setTouchDown(idx, down) {
|
|
if (!(idx in touches)) {
|
|
touches[idx] = { down: false, x: 0.0, y: 0.0 };
|
|
}
|
|
touches[idx].down = down;
|
|
}
|
|
|
|
function init() {
|
|
can = document.getElementById("can");
|
|
ctx = can.getContext("2d");
|
|
can.addEventListener("mousedown", mouseDown, false);
|
|
can.addEventListener("mousemove", mouseXY, false);
|
|
can.addEventListener("touchstart", touchDown, false);
|
|
can.addEventListener("touchmove", touchXY, true);
|
|
can.addEventListener("touchend", touchUp, false);
|
|
can.width = window.innerWidth;
|
|
can.height = window.innerHeight;
|
|
document.body.addEventListener("mouseup", mouseUp, false);
|
|
document.body.addEventListener("touchcancel", touchUp, false);
|
|
window.addEventListener('resize', resizeCanvas);
|
|
|
|
var paramString = window.location.search.substr(1);
|
|
var paramsSplit = paramString.split("&");
|
|
var params = {};
|
|
for (var i = 0; i < paramsSplit.length; i++) {
|
|
var t = paramsSplit[i].split("=");
|
|
params[t[0]] = t[1];
|
|
}
|
|
host = params.host || "127.0.0.1";
|
|
port = params.port || "1211";
|
|
touchDevice = params.device || "0";
|
|
}
|
|
|
|
function resizeCanvas() {
|
|
if (can.width != can.clientWidth || can.height != can.clientHeight) {
|
|
can.width = can.clientWidth;
|
|
can.height = can.clientHeight;
|
|
}
|
|
}
|
|
|
|
function mouseUp() {
|
|
setTouchDown(0, false);
|
|
showTouches();
|
|
}
|
|
|
|
function mouseDown() {
|
|
setTouchDown(0, true);
|
|
showTouches();
|
|
}
|
|
|
|
function mouseXY(e) {
|
|
canX = e.pageX - can.offsetLeft;
|
|
canY = e.pageY - can.offsetTop;
|
|
setTouchPos(0, canX, canY);
|
|
showTouches();
|
|
}
|
|
|
|
function touchUp(e) {
|
|
e.preventDefault();
|
|
for (i = 0; i < e.changedTouches.length; ++i) {
|
|
setTouchDown(e.changedTouches[i].identifier, false);
|
|
}
|
|
showTouches();
|
|
}
|
|
|
|
function touchDown(e) {
|
|
e.preventDefault();
|
|
for (i = 0; i < e.changedTouches.length; ++i) {
|
|
setTouchDown(e.changedTouches[i].identifier, true);
|
|
}
|
|
showTouches();
|
|
}
|
|
|
|
function touchXY(e) {
|
|
e.preventDefault();
|
|
for (i = 0; i < e.changedTouches.length; ++i) {
|
|
canX = e.changedTouches[i].pageX - can.offsetLeft;
|
|
canY = e.changedTouches[i].pageY - can.offsetTop;
|
|
setTouchPos(e.changedTouches[i].identifier, canX, canY);
|
|
}
|
|
showTouches();
|
|
}
|
|
|
|
function showTouches() {
|
|
ctx.font = "12pt sans";
|
|
ctx.textAlign = "left";
|
|
ctx.textBaseline = "top";
|
|
ctx.fillStyle = "rgb(255, 255, 255)";
|
|
ctx.strokeStyle = "rgb(255, 0, 0)";
|
|
|
|
ctx.clearRect(0, 0, can.width, can.height);
|
|
|
|
var y = 0;
|
|
var i = 0;
|
|
for (var id in touches) {
|
|
var touch = touches[id];
|
|
|
|
var str = i + ": " + touch.x.toFixed(4) + ", " + touch.y.toFixed(4);
|
|
if (touch.down)
|
|
str += ", down";
|
|
else
|
|
str += ", up";
|
|
str += "\n";
|
|
ctx.fillText(str, 0, y, can.width - 10);
|
|
y += 15;
|
|
|
|
if (touch.down) {
|
|
ctx.beginPath();
|
|
ctx.arc(touch.x*can.width, touch.y*can.height, 10, 0, 2*Math.PI);
|
|
ctx.stroke();
|
|
}
|
|
|
|
var req = new XMLHttpRequest();
|
|
req.open("get", "http://" + host + ":" + port + "/" + touchDevice + "/" + i + "/" + touch.x.toFixed(8) + "/" + touch.y.toFixed(8) + "/" + touch.down*1);
|
|
req.send();
|
|
|
|
if (!touch.down)
|
|
{
|
|
delete touches[id];
|
|
}
|
|
|
|
++i;
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="init()">
|
|
|
|
<canvas id="can"></canvas>
|
|
|
|
</body>
|
|
</html>
|
|
|