-
Notifications
You must be signed in to change notification settings - Fork 0
/
desktop.html
170 lines (153 loc) · 5.9 KB
/
desktop.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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<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};
// Hook pointer lock state change events for different browsers
document.addEventListener('pointerlockchange',
// We bind 'this' so we can work more easily
// We never want to unbind lockChangeAlert, so we're good
this.lockChangeAlert.bind(this),
false);
// document.addEventListener('mozpointerlockchange', lockChangeAlert,
// false);
// the fact that we'll need to grab references to essentially every
// element makes me think that a programmatic approach to SVG
// construction is probably the way to go...
this.workspace = document.getElementById('workspace');
// this.workspace.onclick = this.IOsetup;
this.workspace.onclick = function() {
// In the brain-melting world of JavaScript, this in a callback is
// the thing the function was attached to... so here it's the
// SVG
console.log(this);
// c = document.getElementById('the-canvas')
// c.requestPointerLock();
this.requestPointerLock();
};
this.message = document.getElementById('message');
// Minor variation... can we get pointer lock on an SVG element?
// left_out = document.getElementsByClassName('left out')[0];
// left_out.onclick = function() {
// left_out.requestPointerLock();
// }
}
Interactor.prototype.IOsetup = function() {
// Currently unused
// In the brain-melting world of JavaScript, this in a callback is
// the thing the function was attached to...
this.requestPointerLock();
}
Interactor.prototype.lockChangeAlert = function () {
// We use a modified update method so we retain access to our
// object methods
if(this.boundUpdate === undefined) {
this.boundUpdate = this.updateMsg.bind(this);
}
// Update whether we're listening to mousemove or not
if(document.pointerLockElement === this.workspace) {
console.log('The pointer lock status is now locked');
document.addEventListener("mousemove",
this.boundUpdate, false);
}
else if(document.pointerLockElement === null) {
console.log('The pointer lock status is now unlocked');
document.removeEventListener("mousemove", this.boundUpdate,
false);
}
else {
console.log('Pointer lock on:', document.pointerLockElement);
}
}
Interactor.prototype.updateMsg = function(move_event) {
// console.log(move_event);
this.message.textContent =
move_event.movementX + ',' + move_event.movementY;
left_cursor = document.querySelector('#cursors circle.left');
left_transforms = left_cursor.transform.baseVal;
// This is the full transform
// left_transforms[0].matrix;
// JS is single-threaded (as of summer 2016). So this should be OK.
this.totals.movementX += move_event.movementX,
this.totals.movementY += move_event.movementY;
// TODO implement bounds checking
// This is a little brittle - but we know the first (and only)
// transform in the SVG is translate(0,0)
left_transforms[0].setTranslate(this.totals.movementX,
this.totals.movementY);
}
// 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>