effets sur l'interface web depuis python

Tests sur l'implémentation de communication interface web / backend python pour la reconnaissance de main avec webSocket

code/borne/backend/exemple.py

@@ -0,0 +1,13 @@
+import asyncio
+import json
+import websockets
+# create handler for each connection
+async def handler(websocket, path):
+    data = await websocket.recv()
+    print(data)
+    await websocket.send(json.dumps({"type": "effects", "effects": [{"type": "thumbs_up", "x":13, "y": 30, "width": 50, "height": 50}]}))
+
+
+start_server = websockets.serve(handler, "localhost", 5000)
+asyncio.get_event_loop().run_until_complete(start_server)
+asyncio.get_event_loop().run_forever()

code/borne/interface/assets/js/camera_editor.js

@@ -0,0 +1,82 @@
+class CameraEditor {
+    constructor(canvas) {
+        this.canvas = canvas;
+        this.ctx = canvas.getContext("2d");
+        this.video = document.createElement("video");
+        this.width = canvas.width;
+        this.height;
+        this.streaming = false;
+        this.activeEffects = [];
+        this.images = {};
+        this._startup();
+        this._loadImages();
+    }
+
+    _startup() {
+        navigator.mediaDevices
+            .getUserMedia({ video: true, audio: false })
+            .then((stream) => {
+                this.video.srcObject = stream;
+                this.video.play();
+            })
+            .catch((err) => {
+                console.error(`Erreur pendant la lecture de la camera: ${err}`);
+            });
+
+        this.video.addEventListener(
+            "canplay",
+            (ev) => {
+                if (!this.streaming) {
+                    this.height = this.video.videoHeight / (this.video.videoWidth / this.width);
+
+                    // Firefox currently has a bug where the height can't be read from
+                    // the video, so we will make assumptions if this happens.
+
+                    if (isNaN(this.height)) {
+                        this.height = this.width / (4 / 3);
+                    }
+
+                    this.video.setAttribute("width", this.width);
+                    this.video.setAttribute("height", this.height);
+                    this.canvas.setAttribute("width", this.width);
+                    this.canvas.setAttribute("height", this.height);
+                    this.streaming = true;
+                }
+            },
+            false
+        );
+    }
+
+    _loadImages() {
+        this.images.thumbsUp = new Image();
+        this.images.thumbsUp.src = "assets/img/thumbs_up.png";
+    }
+
+    _frame() {
+        const context = canvas.getContext("2d");
+        if (this.width && this.height) {
+            canvas.width = this.width;
+            canvas.height = this.height;
+            context.drawImage(this.video, 0, 0, this.width, this.height);
+            this._drawEffects();
+        }
+    }
+
+    _drawEffects() {
+        for (let {type,x,y,width,height} of this.activeEffects) {
+            if(type == "thumbs_up"){
+                this._drawThumbsUp(x,y,width,height);
+            }
+        }
+    }
+
+    _drawThumbsUp(x,y,width,height){
+        this.ctx.beginPath();
+        this.ctx.drawImage(this.images.thumbsUp,x,y,width,height);
+        this.ctx.stroke();
+    }
+
+    setEffects(effects) {
+        this.activeEffects = effects;
+    }
+}

code/borne/interface/assets/js/main.js

@@ -0,0 +1,6 @@
+let cameraEditor;
+let client
+window.addEventListener("load", () => {
+	cameraEditor = new CameraEditor(document.getElementById("canvas"));
+	client = new WebsocketClient((effects) => { cameraEditor.setEffects(effects); });
+}, false);

code/borne/interface/assets/js/network.js

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

code/borne/interface/index.html

@@ -9,5 +9,7 @@
 <body>
     <canvas id="canvas"></canvas>
     <script src="assets/js/main.js"></script>
+    <script src="assets/js/camera_editor.js"></script>
+    <script src="assets/js/network.js"></script>
 </body>
 </html>

code/client/borne/assets/js/main.js

@@ -1,72 +0,0 @@
-// Pour l'explication complète du code : https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API/Taking_still_photos#javascript
-(() => {
-	// The width and height of the captured photo. We will set the
-	// width to the value defined here, but the height will be
-	// calculated based on the aspect ratio of the input stream.
-
-	const width = 500; // We will scale the photo width to this
-	let height = 0; // This will be computed based on the input stream
-
-	// |streaming| indicates whether or not we're currently streaming
-	// video from the camera. Obviously, we start at false.
-
-	let streaming = false;
-
-	// The various HTML elements we need to configure or control. These
-	// will be set by the startup() function.
-
-	let video = null;
-	let canvas = null;
-
-	function startup() {
-	video = document.createElement("video");
-	canvas = document.getElementById("canvas");
-
-	navigator.mediaDevices
-		.getUserMedia({ video: true, audio: false })
-		.then((stream) => {
-		video.srcObject = stream;
-		video.play();
-		})
-		.catch((err) => {
-		console.error(`An error occurred: ${err}`);
-		});
-
-	video.addEventListener(
-		"canplay",
-		(ev) => {
-		if (!streaming) {
-			height = video.videoHeight / (video.videoWidth / width);
-
-			// Firefox currently has a bug where the height can't be read from
-			// the video, so we will make assumptions if this happens.
-
-			if (isNaN(height)) {
-			height = width / (4 / 3);
-			}
-
-			video.setAttribute("width", width);
-			video.setAttribute("height", height);
-			canvas.setAttribute("width", width);
-			canvas.setAttribute("height", height);
-			streaming = true;
-		}
-		},
-		false
-	);
-	}
-
-	function updateCanvas() {
-	const context = canvas.getContext("2d");
-	if (width && height) {
-		canvas.width = width;
-		canvas.height = height;
-		context.drawImage(video, 0, 0, width, height);
-		/* Ajouter Ici le code pour supperposer les animations */
-	}
-	requestAnimationFrame(updateCanvas);
-	}
-
-	window.addEventListener("load", startup, false);
-	window.addEventListener("load", updateCanvas, false);
-})();

code/server/README.md

@@ -1,3 +1,5 @@
+# Serveur de traitement des données
+Ce serveur s'occupe de fournir une API web pour pourvoir ajouter des avis sur la borne, réxupérer des avis, calculer et fournir les statistiques sur ces avis  
 # Installation
 * Pour faire fonctinoner le serveur sur vos machines il y a 3 choses a faire
 1. Installer node js : https://nodejs.org/en/download/