forked from veronicamarie24/labeling-app
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
95 lines (89 loc) · 3.94 KB
/
index.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Image Labeling</title>
<link href="static/style.css" rel="stylesheet" type="text/css">
<script src="static/myScript.js"></script>
</head>
<body>
Directions: <br><br>
1. Select the correct label from the drop down below<br>
2. Drag your cursor to the corner of an object using the convenient vertical and horizontal lines<br>
3. Click<br>
4. Drag your cursor to the other corner using the lines.<br>
5. Click<br><br>
If you mess up on a label click "Clear Labels". We don't have a way to remove a specific label yet. <br>
If you are unsure how to label an image, refresh the page and you will get a new image. We will deal with the 'weird' images once the rest have been labeled. <br>
If you have any questions or concerns forward them to me on Slack. <br><br>
UPDATE: You can now use the keyboard the switch between labels:<br>
Numbers 1 through 6 switch between the dice;<br>
'Q' cycles through the different corners of the top left hole<br>
'W' cycles through the different corners of the yellow hole<br>
'E' cycles through the different corners of the full board<br>
'R' cycles through the different corners of the bottom hole<br>
'F' cycles through the different gates<br>
'D' cycles through the different fruits<br>
'S' cycle sthrough the different torpedo targets<br>
<div id="menu">
<select id="dropdown">
<option id="1" >Dice 1</option>
<option id="2" >Dice 2</option>
<option id="3" >Dice 3</option>
<option id="4" >Dice 4</option>
<option id="5" >Dice 5</option>
<option id="6" >Dice 6</option>
<option id="7" >Roulette</option>
<option id="8" >Cherry (Torpedo Board)</option>
<option id="9" >Banana (Torpedo Board)</option>
<option id="10" >Grape (Torpedo Board</option>
<option id="11" >Full Board</option>
<option id="12" >Top Red Hole</option>
<option id="13" >Top Yellow Hole</option>
<option id="14" >Bottom Red Hole</option>
<option id="15" >Qualification Gate Arm</option>
<option id="16" >Qualification Gate Top</option>
<option id="17" >Entry Gate Arm</option>
<option id="18" >Entry Gate Top</option>
<option id="19" >Orange Path </option>
<option id="20" >Top Red Hole Top Left Corner</option>
<option id="21" >Top Red Hole Top Right Corner</option>
<option id="22" >Top Red Hole Bottom Right Corner</option>
<option id="23" >Top Red Hole Bottom Left Corner</option>
<option id="24" >Top Yellow Hole Top Left Corner</option>
<option id="25" >Top Yellow Hole Top Right Corner</option>
<option id="26" >Top Yellow Hole Bottom Right Corner</option>
<option id="27" >Top Yellow Hole Bottom Left Corner</option>
<option id="28" >Full Board Top Left Corner</option>
<option id="29" >Full Board Top Right Corner</option>
<option id="30" >Full Board Bottom Right Corner</option>
<option id="31" >Full Board Bottom Left Corner</option>
<option id="32" >Bottom Red Hole Top Left Corner</option>
<option id="33" >Bottom Red Hole Top Right Corner</option>
<option id="34" >Bottom Red Hole Bottom Right Corner</option>
<option id="35" >Bottom Red Hole Bottom Left Corner</option>
<option id="36" >Dollar Sign</option>
<option id="37" >Golf Balls</option>
<option id="38" >Torpedo Handle</option>
</select>
</div>
<br>
<canvas id="canvas">
<script>
initDraw(document.getElementById('canvas'));
</script>
</canvas>
<div id="clear" onClick="clearLabels()"></div>
<div id="previous" onClick="getPreviousImage()"></div>
<div id="next" onClick="getNewImage()"></div>
<div id="nameInput">
Name: <input id="name"type="text" name="firstname" value="Dakota">
</div>
<div id="ranks">
<div id = "rank1"> 1. You </div>
<div id = "rank2"> 2. Shouldn't</div>
<div id = "rank3"> 3. See This </div>
</div>
<div id ="numOfImages"> Number of Images Left: </div>
</body>
</html>