Skip to content

Commit e4ad8f6

Browse files
vangjvangj
committed
add spinners
1 parent 1ce343d commit e4ad8f6

File tree

2 files changed

+90
-44
lines changed

2 files changed

+90
-44
lines changed

‎html/rps-tf/index.html

Lines changed: 84 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -8,44 +8,49 @@
88
<meta name="author" content="Jee Vang, Ph.D.">
99
<meta name="organization" content="One-Off Coder">
1010
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0, user-scalable=no">
11-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
11+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
12+
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
1213
<title>Rock, Paper, Scissor++</title>
1314
<style>
14-
* {
15-
font-family: monospace;
16-
}
15+
* {
16+
font-family: monospace;
17+
}
1718

18-
body {
19-
margin: 10px;
20-
}
19+
body {
20+
margin: 10px;
21+
}
2122

22-
.score {
23-
font-size: 3em;
24-
}
23+
.score {
24+
font-size: 3em;
25+
}
2526

26-
.last-symbol {
27-
color: red;
28-
font-size: 15px;
29-
}
27+
.last-symbol {
28+
color: red;
29+
font-size: 15px;
30+
}
3031

31-
#output {
32-
width: 100%;
33-
height: auto;
34-
border-radius: 10px;
35-
}
32+
#output {
33+
width: 100%;
34+
height: auto;
35+
border-radius: 10px;
36+
}
3637

37-
.align-self-center {
38-
align-self: center;
39-
}
38+
.align-self-center {
39+
align-self: center;
40+
}
4041

41-
.scard.scard-border {
42-
border-right: 3px solid #dc3545;
43-
}
42+
.scard.scard-border {
43+
border-right: 3px solid #dc3545;
44+
}
4445

45-
svg.bi {
46-
width: 8em;
47-
height: 8em;
48-
}
46+
svg.bi {
47+
width: 8em;
48+
height: 8em;
49+
}
50+
51+
.null-spinner {
52+
color: #e9ecef !important;
53+
}
4954
</style>
5055
</head>
5156

@@ -60,11 +65,33 @@ <h1 class="display-4">Rock Paper Scissor++</h1>
6065
<p>
6166
Using artificial intelligence (deep learning) to recognize your hand pose to play RPS
6267
</p>
68+
<div id="loading">
69+
<div class="spinner-grow text-primary" role="status">
70+
<span class="sr-only">Loading...</span>
71+
</div>
72+
<div class="spinner-grow text-secondary" role="status">
73+
<span class="sr-only">Loading...</span>
74+
</div>
75+
<div class="spinner-grow text-success" role="status">
76+
<span class="sr-only">Loading...</span>
77+
</div>
78+
<div class="spinner-grow text-danger" role="status">
79+
<span class="sr-only">Loading...</span>
80+
</div>
81+
<div class="spinner-grow text-warning" role="status">
82+
<span class="sr-only">Loading...</span>
83+
</div>
84+
<div class="spinner-grow text-info" role="status">
85+
<span class="sr-only">Loading...</span>
86+
</div>
87+
<div class="spinner-grow text-dark" role="status">
88+
<span class="sr-only">Loading...</span>
89+
</div>
90+
</div>
6391
</div>
6492
</div>
6593
<div id="info" style='display:none'></div>
66-
<div id="predictions"></div>
67-
<div class="container">
94+
<div id="app" class="container">
6895
<div class="row">
6996
<div class="col-sm">
7097
<div id="canvas-wrapper">
@@ -80,33 +107,40 @@ <h1 class="display-4">Rock Paper Scissor++</h1>
80107
</video>
81108
</div>
82109
</div>
83-
<div class="col-sm align-self-center">
110+
<div id="gameInfo" class="col-sm align-self-center" style="display: none;">
84111
<div class="row">
85112
<div class="col-sm">
86113
<div class="scard scard-border text-center" style="width: 18rem;">
87114
<div class="card-img-top">
88-
<svg viewBox="0 0 16 16" class="bi bi-person-badge" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
89-
<path fill-rule="evenodd" d="M12 1H4a1 1 0 0 0-1 1v11.755S4 12 8 12s5 1.755 5 1.755V2a1 1 0 0 0-1-1zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4z" />
90-
<path fill-rule="evenodd" d="M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5z" />
115+
<svg viewBox="0 0 16 16" class="bi bi-person-badge" fill="currentColor"
116+
xmlns="http://www.w3.org/2000/svg">
117+
<path fill-rule="evenodd"
118+
d="M12 1H4a1 1 0 0 0-1 1v11.755S4 12 8 12s5 1.755 5 1.755V2a1 1 0 0 0-1-1zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4z" />
119+
<path fill-rule="evenodd"
120+
d="M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5z" />
91121
</svg>
92122
</div>
93123
<div class="card-body">
94124
<h5 class="card-title">Your Score</h5>
95-
<p class="card-text"><span id="youScore" class="score text-danger">0</span><span id="youLastSymbol" class="last-symbol"></span></p>
125+
<p class="card-text"><span id="youScore" class="score text-danger">0</span><span
126+
id="youLastSymbol" class="last-symbol"></span></p>
96127
<div id="youSymbol">ready <span class="text-danger">...</span></div>
97128
</div>
98129
</div>
99130
</div>
100131
<div class="col-sm">
101132
<div class="scard text-center" style="width: 18rem;">
102133
<div class="card-img-top">
103-
<svg viewBox="0 0 16 16" class="bi bi-cpu-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
104-
<path fill-rule="evenodd" d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5A1.5 1.5 0 0 0 5 6.5v3A1.5 1.5 0 0 0 6.5 11h3A1.5 1.5 0 0 0 11 9.5v-3A1.5 1.5 0 0 0 9.5 5h-3zm0 1a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z" />
134+
<svg viewBox="0 0 16 16" class="bi bi-cpu-fill" fill="currentColor"
135+
xmlns="http://www.w3.org/2000/svg">
136+
<path fill-rule="evenodd"
137+
d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5A1.5 1.5 0 0 0 5 6.5v3A1.5 1.5 0 0 0 6.5 11h3A1.5 1.5 0 0 0 11 9.5v-3A1.5 1.5 0 0 0 9.5 5h-3zm0 1a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z" />
105138
</svg>
106139
</div>
107140
<div class="card-body">
108141
<h5 class="card-title">CPU Score</h5>
109-
<p class="card-text"><span id="computerScore" class="score text-danger">0</span><span id="computerLastSymbol" class="last-symbol"></span></p>
142+
<p class="card-text"><span id="computerScore" class="score text-danger">0</span><span
143+
id="computerLastSymbol" class="last-symbol"></span></p>
110144
<div id="computerSymbol">ready <span class="text-danger">...</span></div>
111145
</div>
112146
</div>
@@ -115,10 +149,17 @@ <h5 class="card-title">CPU Score</h5>
115149
</div>
116150
</div>
117151
</div>
118-
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.10.2/underscore-min.js" crossorigin="anonymous"></script>
119-
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
120-
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
121-
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
152+
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.10.2/underscore-min.js"
153+
crossorigin="anonymous"></script>
154+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
155+
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
156+
crossorigin="anonymous"></script>
157+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
158+
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
159+
crossorigin="anonymous"></script>
160+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
161+
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
162+
crossorigin="anonymous"></script>
122163
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
123164
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/handpose"></script>
124165
<script src="./index.js"></script>

‎html/rps-tf/index.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,10 @@ async function setupCamera() {
6161
}
6262

6363
const video = document.getElementById('video');
64+
video.onloadeddata = (event) => {
65+
document.getElementById('loading').innerHTML = '<div class="spinner-grow text-primary null-spinner" role="status"><span class="sr-only">Loading...</span></div>';
66+
document.getElementById('gameInfo').style.display = 'block';
67+
};
6468
const stream = await navigator.mediaDevices.getUserMedia({
6569
'audio': false,
6670
'video': {
@@ -92,6 +96,7 @@ const main =
9296
try {
9397
video = await loadVideo();
9498
} catch (e) {
99+
document.getElementById('loading').innerHTML = '<div class="spinner-grow text-primary null-spinner" role="status"><span class="sr-only">Loading...</span></div>';
95100
let info = document.getElementById('info');
96101
info.textContent = e.message;
97102
info.style.display = 'block';
@@ -190,7 +195,7 @@ function predict(x) {
190195
}
191196
}
192197

193-
return {prob: p, symbol: c};
198+
return { prob: p, symbol: c };
194199
}
195200

196201
function captureData(annots) {

0 commit comments

Comments
 (0)