Added a dev envoirment

2023-11-24 11:42:53 +01:00
parent a0df8f1b95
commit 8420d58c06
4 changed files with 105 additions and 0 deletions
--- a/webdev/web/.gitkeep
+++ b/webdev/web/.gitkeep
--- a/webdev/web/Serial.js
+++ b/webdev/web/Serial.js
@@ -0,0 +1,70 @@
+let port;
+let reader;
+const decoder = new TextDecoder("utf-8");
+let readibleoutput = 0;
+
+// Request a port and open a connection.
+async function connect() {
+    //vraag aan de browser om een serial port te selecteren
+    port = await navigator.serial.requestPort();
+    await port.open({ baudRate: 9600 });
+    reader = port.readable.getReader();
+    console.log("Port is open!");
+    readLoop()
+}
+
+// Read data from serial port
+async function readLoop() {
+    let buffer = [];
+
+    // loop until reader.cancel() is called
+    while (true) {
+        // Wait for data
+        const { value, done } = await reader.read();
+
+
+        for (let iByte = 0; iByte < value.length; iByte++) {
+            let singleByte = value[iByte];
+            //functie maken er van met boolean!!!
+            if (singleByte != 10) {
+                buffer.push(singleByte);
+            }
+            else {
+                let sensorString = decoder.decode(new Uint8Array(buffer));
+                //Put all data in a json Array and parse it to a boolean array
+                try {
+                    // Parse the incoming data as JSON
+                    // "replace(/'/g, '\"')" replaces all single quotes with double quotes with use of regular expressions. So we can use Jsonparse to parse it into a booleanArray
+                    let SerialArray = JSON.parse(sensorString.replace(/'/g, '"'));
+                    // Ensure SerialArray is an array
+                    if (Array.isArray(SerialArray)) {
+                        //Convert the array of strings to a boolean array
+                        //When a bit is 1 it becomes true, when a bit is 0 it becomes false
+                        let booleanArray = SerialArray.map(bit => bit == '1');
+                    
+                        console.log(booleanArray);
+                    } else {
+                        console.error("Dit is geen Array");
+                    }
+                } catch (e) {
+                    console.log("json niet geparserd");
+                }
+                
+                buffer = [];
+            }
+            if (done) {
+                console.log('[readLoop] DONE', done);
+                reader.releaseLock();
+                break;
+            }
+        }
+    }
+    
+}
+
+// Sluit de poort
+async function disconnect() {
+    await reader.cancel();
+    await port.close();
+    console.log("Port is closed!");
+}
--- a/webdev/web/game.js
+++ b/webdev/web/game.js
@@ -0,0 +1,18 @@
+
+// the function setup() is called once when the page is loaded
+function setup(){
+    // create a canvas element and append it to the body
+    createCanvas(1250, 600);    
+    
+    // disable the outline of shapes
+    noStroke();
+}
+
+// the function draw() is called every frame
+function draw(){
+    // clear the background with a transparent black color
+    background(0,0,0,10);
+
+    // draw a circle at the mouse position
+    circle(mouseX, mouseY, 50);
+}
--- a/webdev/web/index.html
+++ b/webdev/web/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Open Dag Game</title>
+
+    <!-- support p5-->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
+    <script src="game.js"></script>
+    <script src="Serial.js"></script>
+</head>
+<body>
+    
+</body>
+</html>