ajout d'une classe pour gérer les pages

code/interface_borne/assets/js/camera_page.js

@@ -1,5 +1,9 @@
-class CameraEditor {
+class CameraPage {
     constructor(canvas) {
+
+        this.spinnerWeight = 10;
+        this.spinnerColor = "#0F0FFF"
+
         this.canvas = canvas;
         this.ctx = canvas.getContext("2d");
         this.video = document.createElement("video");
@@ -12,6 +16,18 @@ class CameraEditor {
         this.images = {};
         this._startup();
         this._loadImages();
+        this._enabled = false;
+    }
+
+    set enabled(val) {
+        this._enabled = val;
+        if (val) {
+            this._frame();
+        }
+    }
+
+    get enabled() {
+        return this._enabled;
     }
 
     _startup() {
@@ -31,10 +47,10 @@ class CameraEditor {
                 if (!this.streaming) {
                     //calcul de la taille de la vidéo en fonction de la taille de la fenêtre pour qu'elle soit toujours visible
                     let aspectRatio = this.video.videoWidth / this.video.videoHeight;
-                    if(window.innerHeight * aspectRatio > window.innerWidth){
+                    if (window.innerHeight * aspectRatio > window.innerWidth) {
                         this.width = window.innerWidth;
                         this.height = window.innerWidth / aspectRatio;
-                    }else{
+                    } else {
                         this.width = window.innerHeight * aspectRatio;
                         this.height = window.innerHeight;
                     }
@@ -56,22 +72,23 @@ class CameraEditor {
     _loadImages() {
         this.images.thumbsUp = new Image();
         this.images.thumbsUp.src = "assets/img/thumbs_up.png";
+        this.images.thumbsDown = new Image();
+        this.images.thumbsDown.src = "assets/img/thumbs_down.png";
     }
 
     _frame() {
-        const context = canvas.getContext("2d");
-        if(this.streaming) {
-            if (this.width && this.height) {
-                canvas.width = this.width;
-                canvas.height = this.height;
-                context.drawImage(this.video, 0, 0, this.width, this.height);
+        if (this.streaming && this.enabled && this.width && this.height) {
+            this.canvas.width = this.width;
+            this.canvas.height = this.height;
+            this.ctx.drawImage(this.video, 0, 0, this.width, this.height);
             this._drawEffects();
         }
+        if (this.enabled) {
+            requestAnimationFrame(() => this._frame());
         }
-        requestAnimationFrame(()=>this._frame());
     }
 
-    _scaleEffect(x,y,width,height){
+    _scaleEffect(x, y, width, height) {
         let xScale = this.width / this.videoWidth;
         let yScale = this.height / this.videoHeight;
         return {
@@ -84,16 +101,37 @@ class CameraEditor {
 
     _drawEffects() {
         for (let effect of this.activeEffects) {
-            let {x,y,width,height} = this._scaleEffect(effect.x,effect.y,effect.width,effect.height);
-            if(effect.type == "thumbs_up"){
-                this._drawThumbsUp(x,y,width,height);
+            let { x, y, width, height } = this._scaleEffect(effect.x, effect.y, effect.width, effect.height);
+            if (effect.type == "thumbs_down") {
+                this._drawThumbsDown(x, y, width, height);
+            }
+            if (effect.type == "thumbs_up") {
+                this._drawThumbsUp(x, y, width, height);
+            }
+            if (effect.type == "loading") {
+                this._drawLoading(x, y, width, effect.progress);
             }
         }
     }
 
-    _drawThumbsUp(x,y,width,height){
+    _drawLoading(x, y, radius, progress) {
+        this.ctx.lineWidth = this.spinnerWeight;
+        this.ctx.strokeStyle = this.spinnerColor;
+
         this.ctx.beginPath();
-        this.ctx.drawImage(this.images.thumbsUp,x,y,width,height);
+        this.ctx.arc(x, y, radius, 0, progress * 2 * Math.PI);
+        this.ctx.stroke();
+    }
+
+    _drawThumbsDown(x, y, width, height) {
+        this.ctx.beginPath();
+        this.ctx.drawImage(this.images.thumbsDown, x, y, width, height);
+        this.ctx.stroke();
+    }
+
+    _drawThumbsUp(x, y, width, height) {
+        this.ctx.beginPath();
+        this.ctx.drawImage(this.images.thumbsUp, x, y, width, height);
         this.ctx.stroke();
     }
 

code/interface_borne/assets/js/main.js

@@ -1,11 +1,7 @@
-let cameraEditor;
-let client
-let canvas;
+let stateManager; 
 
 window.addEventListener("load", () => {
-	canvas = document.createElement("canvas");
+	let canvas = document.createElement("canvas");
 	document.body.appendChild(canvas);
-	cameraEditor = new CameraEditor(canvas);
-	client = new WebsocketClient((effects) => { cameraEditor.setEffects(effects); });
-	cameraEditor._frame();
+	stateManager = new StateManager(canvas);
 }, false);

code/interface_borne/assets/js/network.js

@@ -1,5 +1,5 @@
 class WebsocketClient {
-    constructor(onNewEffects) {
+    constructor(onNewEffects, onNewState) {
         this.socket = new WebSocket("ws://localhost:5000");
         this.socket.addEventListener("open", (event)  => {
             this.socket.send("connected");
@@ -8,6 +8,8 @@ class WebsocketClient {
             let msg = JSON.parse(event.data);
             if (msg.type == "effects") {
                 onNewEffects(msg.effects);
+            }else if(msg.type == "state") {
+                onNewState(msg.state);
             }
         });
     }

code/interface_borne/assets/js/state_manager.js

@@ -0,0 +1,24 @@
+const STATE = {
+    sleeping: 0,
+    video: 1,
+    audio: 2,
+    thankYou: 3,
+};
+
+class StateManager {
+    constructor(canvas) {
+        this.canvas = canvas;
+        this._state = STATE.sleeping;
+        this._cameraPage = new CameraPage(this.canvas);
+        this.wsClient = new WebsocketClient(
+            (effects) => this._cameraPage.setEffects(effects),
+            (state) => this.changeState(state)
+        );
+    }
+
+    setState(newState) {
+        if(this._state == STATE.sleeping && newState == STATE.video) {
+            this._cameraPage.enabled = true;
+        }
+    }
+}

code/interface_borne/index.html

@@ -8,8 +8,9 @@
     <title>Téléreview</title>
 </head>
 <body>
-    <script src="assets/js/main.js"></script>
-    <script src="assets/js/camera_editor.js"></script>
+    <script src="assets/js/camera_page.js"></script>
     <script src="assets/js/network.js"></script>
+    <script src="assets/js/state_manager.js"></script>
+    <script src="assets/js/main.js"></script>
 </body>
 </html>