-
Notifications
You must be signed in to change notification settings - Fork 0
/
heatmap.html
314 lines (277 loc) · 9.14 KB
/
heatmap.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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
<html>
<head>
<title>Code Red Scouting</title>
<link rel= "stylesheet" href="../css/default.css" type="text/css">
<img src="/assets/field.png" height="0" width="0" id="bgimg"></img>
</head>
<div class= "formb1">
<a href="index.html"><img src="assets/Scouting4.png" alt="Scouting4.png" width="639" height="200"></a>
</br><ul id="header"><li><a href="match_entry.html">Match entry</a></li><li><a href="robot_attributes.html">Robot Data</a></li><li><a href="heatmap.html">Heatmap Enter</a></li></ul><ul id="header"><li><a href="match_view.html">View Matches</a></li><li><a href="php/robot_view.php">View Robots</a></li><li><a href="/graph.html">Graphs</a></li><li><a href="analysis.html">Analysis</a></li><li><a href="heatmap_view.html">Heatmap View</a></li></ul>
<body>
</br><h>Match State: </h> <h id="state">NOT IN PROGRESS</h>
</br>
<span>Time: </span> <span id="matchTime"> 0 </span></br>
<button type="button" onclick="reset()">Reset</button>
<button type="button" onclick="printCoor()">Print</button></br></br>
<canvas id="map" width="1042" height="581" style="border:1px solid #d3d3d3" onmousedown="mark()">Your browser does not support the HTML5 canvas tag.</canvas>
</br>
<h>Mode:</h>
<form action ="" id="mode" onclick="updateMode()">
Pass:<input type="radio" name="mode" value="p">
High:<input type="radio" name="mode" value="h" checked>
Low:<input type="radio" name="mode" value="l">
Defense:<input type="radio" name="mode" value="d" >
Miss:<input type="radio" name="mode" value="m">
</form></br>
Team number:<input type="number" name="team" id="t"> </br>
<button type="button" onClick="submit()">submit</button>
<div id="server_response"></div>
<script src="http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js" type="text/javascript"></script>
<script>
var initd = 0; // 0: not started, 1: running, 2: match over
var matchState = document.getElementById("state");
var matchTimer;
var timeUpdater;
var time = 0;
var mode = document.getElementById("mode");
var modeInd = 0;
var modes = {PASS : 0, HIGH : 1, LOW : 3, DEFENSE : 2, MISS : 4, UP : 5, DOWN : 6};
var markColors = ["#8888FF","#00FF00", "#C0C0C0","FF9933", "#FF0000"];
var map = document.getElementById("map");
var cxt = map.getContext("2d");
var bBox = map.getBoundingClientRect();
var LIMITS = [150, 895, 166, 510]; //x min, x max, y min, y max
var BUTTON_X_LOCS = [376,450,524,598,672];//the location of the centers of each button
var BUTTON_LABLES = ["Pass","High","Low","Defense","Miss"];
var BUTTON_Y_LOCS = 40;//all buttons are the on the same y location
var BUTTON_SIZE = [72,48];//all buttons are the same size, ind 0 is x size and ind 1 is y size
var bg_img = document.getElementById("bgimg");
cxt.drawImage(bg_img, 1, 1);
cxt.textAlign="center";
cxt.font="18pt cabin";
for(var i=0;i<BUTTON_X_LOCS.length;i++){
cxt.fillStyle="#DD0000";
cxt.fillRect(BUTTON_X_LOCS[i]-BUTTON_SIZE[0]/2, BUTTON_Y_LOCS-BUTTON_SIZE[1]/2, BUTTON_SIZE[0], BUTTON_SIZE[1]);
cxt.fillStyle="black";
cxt.font="12pt cabin";
cxt.fillText(BUTTON_LABLES[i],BUTTON_X_LOCS[i],BUTTON_Y_LOCS+3);
}
var startPos=[];
var coor = []; //coordinates for teleop shots and misses(-x)
var dCoor = []; //coordinates for defensive actions
var pCoor = []; //coor for passes and catches(-x)
//adds coordinate to the coordinate storage array
//Location stored as fraction of width/height to make resolution independent
//Origin is top left corner.
function addCoor(x, y){//@ CONNER: I CHANGED SOME THINGS MOSTLY COMBINING METHODS THAT SEEMED REDUNDANDT
x1 = (x/map.width);
y1 = (y/map.height);
if(!unbounded(x,y) && modeInd==modes.SCORE || modeInd==modes.MISS){
coor.push(x1);
coor.push(y1);
coor.push(time);
}else if(!unbounded(x,y) && modeInd==modes.PASS || modeInd==modes.PASS){
pCoor.push(x1);
pCoor.push(y1);
pCoor.push(time);
}else if(!unbounded(x,y) && modeInd==modes.DEFENSE){
dCoor.push(x1);
dCoor.push(y1);
dCoor.push(time);
}
//var color = markColors[modeInd];
cxt.beginPath();
cxt.lineWidth = "1";
cxt.strokeStyle = markColors[modeInd];
cxt.rect(x,y, 5, 5);
cxt.stroke();
}
//checks if coordinate valid
function unbounded(x,y){
return (x < LIMITS[0] || x > LIMITS[1] || y < LIMITS[2] || y > LIMITS[3]);
}
//returns whatever button was pressed
function getButtonPressed(x,y){
for(var i=0;i<BUTTON_X_LOCS.length;i++){
if(x>BUTTON_X_LOCS[i]-BUTTON_SIZE[0]/2 && x<BUTTON_X_LOCS[i]+BUTTON_SIZE[0]/2 && y>BUTTON_Y_LOCS-BUTTON_SIZE[1]/2 && y<BUTTON_Y_LOCS+BUTTON_SIZE[1]/2)//if x and y are inside of the button
return i;
}
return -1;
}
//changes the mode when key pressed
//m mode to change to
function changeMode(m){
for(var i = 0; i < mode.mode.length; i++){
mode.mode[i].checked=false;
}
if(m==5 && modeInd>0){
modeInd--;
mode.mode[modeInd].checked=true;
}else if(m==6 && modeInd<4){
modeInd++;
mode.mode[modeInd].checked=true;
}else{
modeInd = m;
mode.mode[m].checked=true;
}
}
//Draw small yellow circle for start point
function drawStartPoint(x,y){
if(!unbounded(x,y)){
init();
startPos.push(x/map.width);
startPos.push(y/map.height);
cxt.beginPath();
cxt.lineWidth="1";
cxt.strokeStyle = "#FFFF00";
cxt.arc(x, y, 4, 0, 2*Math.PI);
cxt.stroke();
}
}
//initialize things
function init(){
initd = 1;
changeMode(modes.HIGH);
matchState.innerHTML = "AUTO";
matchTimer = setTimeout(function(){matchState.innerHTML = "TELEOP"}, 10000);
timeUpdater = setInterval(function(){updateTime()}, 1000);
//initKeys();
}
//Add hotkeys to change modes: S=score, D=defense, W=miss, A=Pass
//This function is called at init()
document.onkeydown=function(){
//TODO:use document.activeElement;
var e = window.event;
var unicode=e.keyCode? e.keyCode : e.charCode;
if(unicode==83){//d key
changeMode(modes.DEFENSE);
}else if(unicode==87){//w key
changeMode(modes.HIGH);
}else if(unicode==68){//s key
changeMode(modes.LOW);
}else if(unicode==65){//a key
changeMode(modes.PASS);
}else if(unicode==69){//e key
changeMode(modes.CAT);
}else if(unicode==88){//x key
changeMode(modes.MISS);
}
}
//make mark on canvas
function mark(){
bBox = map.getBoundingClientRect();
var e = window.event;
var x = e.clientX - bBox.left;
var y = e.clientY - bBox.top;
if (initd == 1){
if(!unbounded(x,y)){
addCoor(x,y);
}
}else if(initd == 0){
drawStartPoint(x,y);
}else{
alert('Please reset match');
}
if(unbounded(x,y)){
if(getButtonPressed(x,y)!=-1){
modeInd = getButtonPressed(x,y);
mode.mode[modeInd].checked=true;
}
}
}
//end match
function matchEnd(){
initd = 2;
matchState.innerHTML = "MATCH OVER";
clearTimeout(matchTimer);
clearInterval(timeUpdater);
}
//TESTING FUNCTION: prints coordinates stored in coor
function printCoor(){
for(var i = 0; i < coor.length; i+=3){
document.write("(" + Math.round(coor[i]*map.width) + ", "
+ Math.round(coor[i+1]*map.height) + ", "
+ coor[i+2] + ")");
document.write("<br>");
}
}
//clears all marks and clears coordinate storage
function reset(){
cxt.clearRect(0,0,1042, 581);
cxt.drawImage(bg_img, 1, 1);
coor = [];
for(var i=0;i<BUTTON_X_LOCS.length;i++){
cxt.fillStyle="#DD0000";
cxt.fillRect(BUTTON_X_LOCS[i]-BUTTON_SIZE[0]/2, BUTTON_Y_LOCS-BUTTON_SIZE[1]/2, BUTTON_SIZE[0], BUTTON_SIZE[1]);
cxt.fillStyle="black";
cxt.fillText(BUTTON_LABLES[i],BUTTON_X_LOCS[i],BUTTON_Y_LOCS+3);
//That magic number just adjusts the text's vertical position; it isn't a magic number if I describe it in the comments right?
}
initd = 0;
clearTimeout(matchTimer);
clearInterval(timeUpdater);
matchState.innerHTML = "NOT IN PROGRESS";
time = -1;
timeBackup = -1;
updateTime();
document.getElementById("team").value="";
var startPos=[];
var coor = []; //coordinates for teleop shots and misses(-x)
var dCoor = []; //coordinates for defensive actions
var pCoor = []; //coor for passes and catches(-x)
}
//updates the click mode
function updateMode(){
for(var i = 0; i < mode.mode.length; i++)
if(mode.mode[i].checked){
modeInd = i;
break;
}
}
//update match timer
function updateTime(){
if(time == 150){
matchEnd();
}else{
time += 1;
timeDisp = document.getElementById("matchTime");
timeDisp.innerHTML = time;
}
}
//gets parameters puts them in a nice array and returns the result
//arr = the array to parse into a string of csv
function getCSVString(arr){
var ret="";
for(var i=0;i<arr.length;i++){
ret=ret+","+arr[i];
}
return ret;
}
//calls php and submits the heatmap information
function submit(){
if(document.cookie.indexOf("enter_data")==-1){
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("server_response").innerHTML=xmlhttp.responseText;
}
}
var parameters="team="+document.getElementById('t').value+"&startPosition="+getCSVString(startPos)+
"&score="+getCSVString(coor)+"&pass="+getCSVString(pCoor)+"&defend="+getCSVString(dCoor);
xmlhttp.open("POST","/php/heatmap_submit.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(parameters);
reset();
}else{
alert("You don't have permission to submit data.");
}
}
</script>
</body>
</div>
</html>