Skip to content

Commit b00cff0

Browse files
JorandJorand
committed
Face exception expression
1 parent 24267ab commit b00cff0

2 files changed

Lines changed: 154 additions & 61 deletions

File tree

‎examples/examples-game/public/styles.css‎

100644100755
Lines changed: 49 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -137,45 +137,61 @@
137137
background-color: #f51717;
138138
}
139139

140-
.pokerface p {
140+
.pokerface .title {
141141
margin: 0;
142142
}
143143

144-
.meter {
145-
position: relative;
146-
width: 100%;
147-
height: 20px;
148-
background-color: white;
144+
.valueMeter {
145+
position: relative;
146+
width: 500px;
147+
height: 20px;
148+
margin: 0;
149+
padding: 0;
150+
background-color: white;
151+
display:block;
152+
vertical-align: top;
153+
margin-left: 100px;
154+
margin-bottom: 20px;
155+
}
156+
157+
.valueMeter-label {
158+
display: block;
159+
float: left;
160+
font-size: 1rem;
161+
line-height: 20px;
162+
text-align: right;
163+
width: 90px;
164+
margin: 0;
165+
padding: 0;
166+
margin-bottom: 20px;
167+
margin-top: 0;
149168
}
150169

151-
.meter #pokerface-meter {
152-
display: block;
153-
background-color: black;
154-
height: 100%;
155-
width: 0%;
156-
transition: width 100ms;
157-
}
158-
159-
#threshold {
160-
display: block;
161-
position: absolute;
162-
top: -5px;
163-
left: 0;
164-
bottom: -5px;
165-
background: red;
166-
width: 4px;
167-
}
168-
169-
.draggableThreshold {
170-
cursor: move;
171-
}
170+
.valueMeter .bar {
171+
display: block;
172+
background-color: black;
173+
height: 100%;
174+
width: 0%;
175+
transition: width 100ms;
176+
}
177+
178+
.valueMeter .draggable-cursor {
179+
display: block;
180+
position: absolute;
181+
top: -5px;
182+
left: 0;
183+
bottom: -5px;
184+
background: red;
185+
width: 4px;
186+
cursor: move;
187+
}
172188

173189
.audio-player {
174190
display: none;
175191
}
176192

177193
.settings {
178-
display: none;
194+
/* display: none; */
179195
}
180196

181197
.detections {
@@ -273,4 +289,8 @@
273289

274290
#countdown .values:disabled {
275291
color: black;
276-
}
292+
}
293+
294+
.mySelect {
295+
display: block;
296+
}

‎examples/examples-game/views/webcamFaceExpressionRecognition.html‎

100644100755
Lines changed: 105 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,16 @@
4343
<div class="center-content page-container">
4444

4545
<div class="pokerface">
46-
<p>Poker Face</p>
47-
<div class="meter" id="threshold-container">
48-
<i id="pokerface-meter"></i>
49-
<i id="threshold" class="draggableThreshold"></i>
46+
<p class="title">Poker Face</p>
47+
<p class="valueMeter-label">Neutral</p>
48+
<div class="valueMeter" id="neutralThreshold">
49+
<i class="bar"></i>
50+
<i class="draggable-cursor"></i>
51+
</div>
52+
<p class="valueMeter-label">Exception</p>
53+
<div class="valueMeter" id="exceptionThreshold">
54+
<i class="bar"></i>
55+
<i class="draggable-cursor"></i>
5056
</div>
5157
</div>
5258

@@ -79,6 +85,31 @@ <h4>Detections:</h4>
7985
<a href="#" class="more-settings">Show more options</a>
8086
<div class="settings">
8187

88+
<br>
89+
90+
<div class="row side-by-side">
91+
92+
<div class="row">
93+
<label for="expressionException">Face expression Exception (optional):</label>
94+
<select id="expressionException" class="mySelect">
95+
<option selected value="">disabled</option>
96+
<!-- <option value="neutral">Neutral</option> -->
97+
<option value="happy">Happy</option>
98+
<option value="sad">Sad</option>
99+
<option value="surprised">Surprised</option>
100+
<option value="angry">Angry</option>
101+
<option value="disgusted">Disgusted</option>
102+
<option value="fearful">Fearful</option>
103+
</select>
104+
</div>
105+
106+
<div class="row">
107+
<label for="exceptionInput">Face exception Threshold % (biggest = hardest):</label>
108+
<input value="10" id="exceptionInput" type="number" min="0" max="100" class="bold">
109+
</div>
110+
111+
</div>
112+
82113
<div class="row">
83114
<label for="neutralInterval">Face expression Neutral Interval (ms):</label>
84115
<input value="200" id="neutralInterval" type="number" min="0" max="100" class="bold">
@@ -291,16 +322,9 @@ <h4>Detections:</h4>
291322

292323
var options = {
293324
faceExpressionThreshold: 10,
294-
neutralInterval: 200
295-
}
296-
297-
function updateOptions() {
298-
options.faceExpressionThreshold = $('#expressionThreshold').val() / 100;
299-
$('#threshold').css({ left: (options.faceExpressionThreshold*100)+'%' });
300-
301-
options.neutralInterval = $('#neutralInterval').val();
302-
303-
console.log("update Options");
325+
faceExceptionThreshold: 10,
326+
neutralInterval: 200,
327+
faceException: ''
304328
}
305329

306330
var last_play = null;
@@ -318,7 +342,7 @@ <h4>Detections:</h4>
318342
// return false;
319343
//console.log(result);
320344
const expressions = result.expressions;
321-
345+
var exception = options.faceException;
322346

323347
// average Neutral value
324348
if (Date.now() - timeInterval <= options.neutralInterval) {
@@ -332,15 +356,32 @@ <h4>Detections:</h4>
332356
timeInterval = Date.now();
333357
}
334358

335-
console.log("Neutral: ", avgNeutral, expressions.neutral);
359+
//console.log("Neutral: ", avgNeutral, expressions.neutral);
360+
361+
updateSlider('neutralThreshold', avgNeutral*100);
336362

337-
$('#pokerface-meter').width((avgNeutral*100)+'%');
338363

339-
if (avgNeutral <= options.faceExpressionThreshold) {
340-
bad();
364+
if (exception) {
365+
var valException = expressions[exception];
366+
updateSlider('exceptionThreshold', valException*100);
367+
368+
if (
369+
avgNeutral <= options.faceExpressionThreshold
370+
&& valException <= options.faceExceptionThreshold
371+
) {
372+
bad();
373+
}
374+
else {
375+
good();
376+
}
341377
}
342378
else {
343-
good();
379+
if (avgNeutral <= options.faceExpressionThreshold) {
380+
bad();
381+
}
382+
else {
383+
good();
384+
}
344385
}
345386

346387
$('#detections-list').html('');
@@ -401,7 +442,8 @@ <h4>Detections:</h4>
401442

402443
$('#countdown .values').removeAttr('disabled');
403444
$('#detections-list').html('');
404-
$('#pokerface-meter').width('0%');
445+
updateSlider('neutralThreshold', 0);
446+
updateSlider('exceptionThreshold', 0);
405447
winning = true;
406448
$('.pokerface').removeClass('nop');
407449
}
@@ -427,22 +469,53 @@ <h4>Detections:</h4>
427469
stop();
428470
});
429471

472+
473+
function updateOptions() {
474+
options.neutralInterval = $('#neutralInterval').val();
475+
console.log("neutralInterval:", options.neutralInterval);
476+
477+
options.faceException = $('#expressionException').val();
478+
console.log("faceException:", options.faceException);
479+
480+
console.log("update Options");
481+
}
482+
483+
function updateSlider(id, val) {
484+
$('#'+id).find('.bar').width(val+'%');
485+
}
486+
487+
function initSlider($elem, $input, optionName) {
488+
$cursor = $elem.find('.draggable-cursor');
489+
$input.on('change', function() {
490+
var v = $(this).val() / 100;
491+
options[optionName] = v;
492+
$cursor.css({ left: (v * 100)+'%' });
493+
});
494+
$input.change();
495+
$elem.find('.draggable-cursor').draggable({
496+
axis: "x",
497+
containment: '#'+$elem.attr('id'),
498+
scroll: false,
499+
stop: function() {
500+
var posLeft = $(this).position().left / $elem.width() * 100;
501+
options[optionName] = Math.round(posLeft) / 100;
502+
$input.val(Math.round(posLeft));
503+
}
504+
});
505+
}
506+
430507
$(document).ready(function() {
431508
renderNavBar('#navbar', 'webcam_face_expression_recognition')
432509
initFaceDetectionControls()
433510
run()
434511

435512
updateOptions();
436-
$('#expressionThreshold, #neutralInterval').on('change', updateOptions);
437-
$(".draggableThreshold").draggable({
438-
axis: "x",
439-
containment: "#threshold-container",
440-
scroll: false,
441-
stop: function() {
442-
var posLeft = $(".draggableThreshold").position().left / $('#threshold-container').width() * 100;
443-
options.faceExpressionThreshold = Math.round(posLeft) / 100;
444-
$('#expressionThreshold').val(Math.round(posLeft));
445-
}
513+
514+
initSlider($('#neutralThreshold'), $('#expressionThreshold'), 'faceExpressionThreshold');
515+
initSlider($('#exceptionThreshold'), $('#exceptionInput'), 'faceExceptionThreshold');
516+
517+
$('#neutralInterval, #expressionException').change(function() {
518+
updateOptions();
446519
});
447520

448521
$('#countdown .values').change(function() {
@@ -465,4 +538,4 @@ <h4>Detections:</h4>
465538

466539
});
467540
</script>
468-
</html>
541+
</html>

0 commit comments

Comments
 (0)