UI change for prod, Full HD 1080p and win/lose message

Author: Jorand

examples/examples-game/public/styles.css

@@ -1,16 +1,10 @@
-.page-container {
-  left: 0;
-  right: 0;
-  margin: auto;
-  margin-top: 20px;
-  padding-right: 200px;
+html, body {
+  margin: 0;
+  padding: 0;
 }
 
-@media only screen and (max-width : 992px) {
-  .page-container {
-    padding-left: 0;
-    display: flex !important;
-  }
+* {
+  box-sizing: border-box;
 }
 
 #navbar {
@@ -21,10 +15,12 @@
 
 .center-content {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
+
+}
+
+.page-container {
+  justify-content: left;
+  align-items: normal;
 }
 
 .side-by-side {
@@ -108,6 +104,19 @@
   display: flex;
 }
 
+
+.my-video-container {
+  position: relative;
+  padding-bottom: 0;
+  height: auto;
+  overflow: auto;
+}
+
+.my-video-container video {
+  width: 100% !important;
+  height: auto !important;
+}
+
 .video {
   position: relative;
 }
@@ -119,13 +128,13 @@
   right: 0;
 }
 
-#inputVideo {
+/* #inputVideo {
   width: 640px;
   height: 480px;
-}
+} */
 
 .pokerface {
-  width: 640px;
+  width: 100%;
   background-color: #10e886;
   font-family: 'upheaval_tt_brkregular', arial;
   font-size: 5em;
@@ -193,13 +202,11 @@
 }
 
 .settings {
-  /* display: none; */
+  display: none;
 }
 
 .detections {
-  position: absolute;
-  left: 100%;
-  top: 0;
+  text-align: center;
   font-family: 'upheaval_tt_brkregular', arial;
   font-size: 3em;
   line-height: 1em;
@@ -215,12 +222,9 @@
   }
 
 .control {
-  position: absolute;
-  top: -168px ;
-  left: 100%;
   padding: 0 14px;
-  width: 250px;
   text-align: center;
+  margin-bottom: 30px;
 }
 
 .eightbit-btn {
@@ -296,3 +300,29 @@
 .mySelect {
   display: block;
 }
+
+.main {
+  flex: 1;
+  padding: 30px;
+  padding-bottom: 0;
+  padding-right: 0;
+}
+
+.sidebar {
+  position: relative;
+  width: 25%;
+  overflow: hidden;
+  padding-top: 30px;
+}
+
+.gameResultWin, .gameResultLose {
+  display: none;
+  text-align: center;
+  font-family: 'upheaval_tt_brkregular', arial;
+  font-size: 2em;
+  color: #10e886;
+}
+
+.gameResultLose {
+  color: #f51717;
+}

examples/examples-game/views/webcamFaceExpressionRecognition.html

@@ -42,30 +42,38 @@
   <div id="navbar" style="display:none;"></div>
   <div class="center-content page-container">
 
-    <div class="pokerface">
-      <p class="title">Poker Face</p>
-      <!-- <p class="valueMeter-label">Neutral</p> -->
-      <div class="valueMeter" id="neutralThreshold">
-        <i class="bar"></i>
-        <i class="draggable-cursor"></i>
+    <div class="main">
+
+      <div class="pokerface">
+        <p class="title">Poker Face</p>
+        <!-- <p class="valueMeter-label">Neutral</p> -->
+        <div class="valueMeter" id="neutralThreshold">
+          <i class="bar"></i>
+          <i class="draggable-cursor"></i>
+        </div>
+        <!-- <p class="valueMeter-label">Exception</p>
+        <div class="valueMeter" id="exceptionThreshold">
+          <i class="bar"></i>
+          <i class="draggable-cursor"></i>
+        </div> -->
       </div>
-      <!-- <p class="valueMeter-label">Exception</p>
-      <div class="valueMeter" id="exceptionThreshold">
-        <i class="bar"></i>
-        <i class="draggable-cursor"></i>
-      </div> -->
-    </div>
 
-    <div class="video">
+      <div class="video">
+
+        <div class="progress" id="loader">
+          <div class="indeterminate"></div>
+        </div>
+        <div class="my-video-container">
+          <video onloadedmetadata="onPlay(this)" id="inputVideo" autoplay muted playsinline></video>
+          <canvas id="overlay" />
+        </div>
 
-      <div class="progress" id="loader">
-        <div class="indeterminate"></div>
-      </div>
-      <div style="position: relative">
-        <video onloadedmetadata="onPlay(this)" id="inputVideo" autoplay muted playsinline></video>
-        <canvas id="overlay" width="640" height="480" />
       </div>
 
+    </div>
+
+    <div class="sidebar">
+
       <div class="control">
         <div id="countdown">
           <h4>Time Left:</h4>
@@ -75,14 +83,18 @@ <h4>Time Left:</h4>
         <button class="play eightbit-btn" id="start-game">Play</button>
       </div>
 
+      <div class="gameResultWin">You Win !</div>
+      <div class="gameResultLose">You Lose !</div>
+
       <div class="detections">
         <h4>Detections:</h4>
         <ul id="detections-list">
         </ul>
       </div>
 
     </div>
-    <a href="#" class="more-settings">Show more options</a>
+
+    <!-- <a href="#" class="more-settings">Show more options</a> -->
     <div class="settings">
 
       <br>
@@ -281,8 +293,10 @@ <h4>Detections:</h4>
       updateTimeStats(Date.now() - ts)
 
       if (result) {
-        const canvas = $('#overlay').get(0)
-        const dims = faceapi.matchDimensions(canvas, videoEl, true)
+        const canvas = $('#overlay').get(0);
+        const $videoEl = $('#inputVideo');
+        const displaySize = { width: $videoEl.width(), height: $videoEl.height() }
+        const dims = faceapi.matchDimensions(canvas, displaySize, true);
 
         const resizedResult = faceapi.resizeResults(result, dims)
         const minConfidence = 0.05
@@ -300,6 +314,9 @@ <h4>Detections:</h4>
         pokerface(result);
       }
 
+      // $('#overlay').height($('#inputVideo').height());
+      // $('#overlay').width($('#inputVideo').width());
+
       setTimeout(() => onPlay())
     }
 
@@ -311,7 +328,12 @@ <h4>Detections:</h4>
 
       // try to access users webcam and stream the images
       // to the video element
-      const stream = await navigator.mediaDevices.getUserMedia({ video: {} })
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: {
+          width: 1920,
+          height: 1080
+        }
+      })
       const videoEl = $('#inputVideo').get(0)
       videoEl.srcObject = stream
     }
@@ -323,7 +345,7 @@ <h4>Detections:</h4>
     var options = {
       faceExpressionThreshold: 10,
       faceExceptionThreshold: 10,
-      neutralInterval: 200,
+      neutralInterval: 100,
       faceException: ''
     }
 
@@ -423,6 +445,7 @@ <h4>Detections:</h4>
 
     function start() {
       isStarted = true;
+      $('.gameResultWin, .gameResultLose').hide();
       $("#start-game").text('Stop');
       $('#countdown .values').attr('disabled','disabled');
       $('audio#audio-start')[0].play();
@@ -455,9 +478,11 @@ <h4>Detections:</h4>
       //updateSlider('exceptionThreshold', 0);
 
       if(winning) {
+        $('.gameResultWin').show();
         playWin();
       }
       else {
+        $('.gameResultLose').show();
         playLost();
       }
     }