-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
144 lines (135 loc) · 5.57 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
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 name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="style.css" />
<script src="color.js"></script>
<title>Slotcar Timekeeper</title>
</head>
<body>
<canvas id="canvas"></canvas>
<video id="video" autoplay playsinline></video>
<div id="quickStart" class="screen">
<input type="button" value="Start video and race" onclick="quickStart();event.target.style.color='#aaaaaa';" />
or <a href="#" onclick="showScreen(SCREENS.SETTINGS);">show
settings wizard</a><br />
Please wait up to 5s...
</div>
<div id="settings" class="screen">
<ol>
<li><input type="button" onclick="startVideo();event.target.style.color='#aaaaaa';" value="Start video" />
and allow video capturing</li>
<li>Position phone on top of track and capture slot cars in red detection rectangles using:
<ul>
<li>
<h3>Width: <output></output></h3>
<input type="range" id="detectionWidth" min="1" max="10" value="5" />
</li>
<li>
<h3>Height: <output></output></h3>
<input type="range" id="detectionHeight" min="1" max="10" value="5" />
</li>
<li>
<h3>Distance: <output></output></h3>
<input type="range" id="detectionDistance" min="1" max="10" value="5" />
</li>
</ul>
</li>
<li>Remove slot cars from track</li>
<li><input type="button" id="captureDefault" value="Capture default"
onclick="captureDefault=true;event.target.style.color='#aaaaaa';" /> colors
without slot cars</li>
<li>Move cars into red detection rectangle and check if rectangle changes color to green. You may want
to adjust:
<ul>
<li>
<h3>Color Treshold: <output></output></h3>
<input type="range" id="colorThreshold" min="1" max="255" value="40" />
</li>
<li>
<h3>Block size: <output></output></h3>
<input type="range" name="blockSize" min="1" max="10" value="5" />
</li>
</ul>
</li>
<li><input type="button" id="startRace" value="Start race" onclick="startTimekeeping();" /> to start
timekeeping!</li>
</ol>
Back to <a href="#" onclick="showScreen(SCREENS.QUICK_START);">Quick Start</a>
</div>
<div id="timekeeper" class="screen">
<input type="button" value="Stop" onclick="stopTimekeeper();" /> <input type="button" value="Reset"
onclick="resetTimekeeper();" /> <a href="#" onclick="window.location.reload();">Back</a><br />
<div>
<b>Laps: <span class="laps"></span></b><br />
<b>Total time: <span class="totalTime"></span></b><br />
<b>Lap average: <span class="lapAverage"></span></b><br />
<b>Best lap: <span class="bestLap"></span></b><br /><br />
<ol class="lapTimes">
</ol>
</div>
<div>
<b>Laps: <span class="laps"></span></b><br />
<b>Total time: <span class="totalTime"></span></b><br />
<b>Lap average: <span class="lapAverage"></span></b><br />
<b>Best lap: <span class="bestLap"></span></b><br /><br />
<ol class="lapTimes">
</ol>
</div>
</div>
<script>
let canvas = document.getElementById("canvas");
let video = document.getElementById("video");
video.width = canvas.width;
video.height = canvas.height;
const SCREENS = {
QUICK_START: 'quickStart',
SETTINGS: 'settings',
TIMEKEEPER: 'timekeeper'
};
function showScreen(screenId) {
Object.values(screens).forEach(screen =>
screen.style.display = 'none'
);
screens[screenId].style.display = 'block';
}
var screens = {};
Array.from(document.getElementsByClassName("screen")).forEach(screen =>
screens[screen.id] = screen
);
showScreen(SCREENS.QUICK_START);
function quickStart() {
const QUICK_START_DELAY = 5000;
startVideo();
setTimeout(function () {
captureDefault = true;
startTimekeeping();
}, QUICK_START_DELAY);
}
function startVideo() {
(async () => {
let videoStream = await navigator.mediaDevices.getUserMedia({
audio: false,
video: {
facingMode: 'environment',
width: VIDEO_SIZE.width,
height: VIDEO_SIZE.height
},
frameRate: {
ideal: 60,
min: 30
}
});
video.srcObject = videoStream;
video.requestVideoFrameCallback(captureFrame);
})();
}
function startTimekeeping() {
resetTimekeeper();
showScreen(SCREENS.TIMEKEEPER);
}
</script>
<script src="settings.js"></script>
<script src="timekeeper.js"></script>
</body>
</html>