Squashed 'external/gainput/' content from commit 2be0a50
git-subtree-dir: external/gainput git-subtree-split: 2be0a50089eafcc6fccb66142180082e48f27f4c
This commit is contained in:
Simone
40
tools/html5client/index.html
Normal file
40
tools/html5client/index.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Gainput Javascript touch client</title>
|
||||
<style type="text/css">
|
||||
body {
|
||||
background-color: #222;
|
||||
color: #fff;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form method="get" action="touch.html">
|
||||
|
||||
<p>
|
||||
Host: <input type="text" name="host" value="127.0.0.1"> <br>
|
||||
Port: <input type="text" name="port" value="1211"> <br>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Touch Device: <select name="device">
|
||||
<option value="0" selected>#1</option>
|
||||
<option value="1">#2</option>
|
||||
<option value="1">#3</option>
|
||||
<option value="1">#4</option>
|
||||
<option value="1">#5</option>
|
||||
<option value="1">#6</option>
|
||||
<option value="1">#7</option>
|
||||
<option value="1">#8</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<input type="submit" value="Connect">
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
159
tools/html5client/touch.html
Normal file
159
tools/html5client/touch.html
Normal file
@@ -0,0 +1,159 @@
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user