preparation intégration reconaissance vocale

code/interface_borne/assets/css/main.css

@@ -48,4 +48,9 @@ html, body {
 
 .instructions > .title {
     border-bottom: 3px #6B8000 solid;
+} 
+
+.instructions > table, .instructions > th,.instructions > td {
+  border: 1px solid #6B8000; 
+  border-collapse: collapse;
 }

code/interface_borne/assets/js/audio_page.js

@@ -8,4 +8,10 @@ class AudioPage {
         this.isEnabled = isEnabled;
         this.DOMElement.style.display = isEnabled ? "block" : "none";
     }
+
+    setGrade(grade) {
+        if(this.isEnabled) {
+            this.DOMElement.getElementById("grade").innerHTML = grade.toString();
+        }
+    }
 }

code/interface_borne/assets/js/network.js

@@ -1,5 +1,5 @@
 class WebsocketClient {
-    constructor(onNewEffects, onNewGrade, onNewState) {
+    constructor(onNewEffects, onNewState, onNewGrade) {
         this.socket = new WebSocket("ws://localhost:5000");
         this.socket.addEventListener("open", (event)  => {
             this.socket.send("connected");

code/interface_borne/assets/js/state_manager.js

@@ -18,7 +18,8 @@ class StateManager {
                 this.setState(STATE.video);
                 this._cameraPage.setEffects(effects)
             },
-            (state) => this.setState(state)
+            (state) => this.setState(state),
+            (grade) => this._audioPage.setGrade(grade)
         );
         
         this._sleepingPage.enabled = true;

code/interface_borne/index.html

@@ -35,7 +35,7 @@
             <div class="title">
                 <h1>Enregistrement audio blabal</h1>
             </div>
-            <p>Prononcez à voix haute les notes correspondant aux critères suivants dans l'ordre</p>
+            <p>Donnez une note sur 10 au critère suivant</p>
             <table>
                 <tr>
                     <th>Critère</td>
@@ -43,7 +43,7 @@
                 </tr>
                 <tr>
                     <td>Calme</td>
-                    <td> /10</td>
+                    <td> <span id="grade"></span>/10</td>
                 </tr>
             </table>
         </div>