-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmobile.html
144 lines (127 loc) · 4.65 KB
/
mobile.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- This meta tag disables double tap to zoom, speeding up touch
interactions -->
<meta name="viewport" content="width=device-width">
<title>SVG tutorial</title>
<style type="text/css">
svg {
display: block;
border: 1px solid #ccc;
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
background: gray;
}
#targets circle {
fill: blue;
}
#cursors circle.left {
fill: red;
}
text {
font-size: 40pt;
text-anchor: middle;
fill: white;
}
/* These don't always work, e.g., in Firefox */
/* Two rows top-to-bottom */
/* .out, .home { cy: 40%; } */
/* .forward { cy: 20%; } */
/* Four columsn left-to-right */
/* .left.out { cx: 15%; } */
/* .left { cx: 35%; } */
/* .right { cx: 65%; } */
/* .right.out { cx: 85%; } */
</style>
<script>
function Interactor() {
this.totals = {movementX: 0,
movementY: 0};
this.ongoingTouches = new Array();
// Grabbing a reference still seems like less typing than d3
this.workspace = document.getElementById('workspace');
this.message = document.getElementById('message');
this.cursors = [document.querySelector('#cursors circle.left'),
document.querySelector('#cursors circle.right')];
// We just bind in the function call, as we don't need to unbind
// (just close the page)
// this.workspace.addEventListener("touchstart",
// this.handleStart.bind(this), false);
// this.workspace.addEventListener("touchend",
// this.handleEnd, false);
// this.workspace.addEventListener("touchcancel",
// this.handleCancel, false);
this.workspace.addEventListener("touchmove",
this.handleMove.bind(this), false);
}
Interactor.prototype.handleStart = function (evt) {
// Keep track of start location to do relative moves.
}
Interactor.prototype.handleMove = function (evt) {
evt.preventDefault();
console.log("touchmove");
var touches = evt.changedTouches;
for (var i = 0; i < touches.length; i++) {
console.log("touchmove:" + i + "...");
this.ongoingTouches.push(copyTouch(touches[i]));
// Update cursor to actual touch location for now
this.cursors[i].setAttribute('cx', touches[i].pageX);
this.cursors[i].setAttribute('cy', touches[i].pageY);
console.log("finished touchmove:" + i + ".");
}
}
Interactor.prototype.updateMsg = function(touch_event) {
console.log('got touch event');
console.log(touch_event);
this.message.textContent = 'Got touch event';
// move_event.movementX + ',' + move_event.movementY;
}
// Utility function to guard against browser mutation of touch events
function copyTouch(touch) {
return { identifier: touch.identifier, pageX: touch.pageX,
pageY: touch.pageY };
}
// For now, we keep the interactor in the global namespace so I can
// debug it more easily
function init() {
interact = new Interactor();
}
</script>
</head>
<body onload="init()">
<svg id="workspace"
version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg">
<!-- <rect width="100%" height="100%" fill="gray" /> -->
<!-- Left cluster -->
<g id="targets">
<g id="left">
<circle class="left forward" cx="35%" cy="20%" r="4%" />
<circle class="left out" cx="15%" cy="40%" r="4%" />
<circle class="left home" cx="35%" cy="40%" r="4%" />
</g>
<!-- Right cluster -->
<g id="right">
<circle class="right forward" cx="65%" cy="20%" r="4%" />
<circle class="right out" cx="85%" cy="40%" r="4%" />
<circle class="right home" cx="65%" cy="40%" r="4%" />
</g>
</g>
<g id="cursors">
<circle class="left" cx="35%" cy="60%" r="1%"
transform="translate(0,0)" />
<circle class="right" cx="65%" cy="60%" r="1%"
transform="translate(0,0)" />
</g>
<text id="message" x="50%" y="75%" >
Touch anywhere to start
</text>
</svg>
</body>
</html>