From 8420d58c06ac2cae50aaa4dfb07c26991c3b5d93 Mon Sep 17 00:00:00 2001 From: sam Date: Fri, 24 Nov 2023 11:42:53 +0100 Subject: [PATCH 1/6] Added a dev envoirment --- webdev/web/.gitkeep | 0 webdev/web/Serial.js | 70 +++++++++++++++++++++++++++++++++++++++++++ webdev/web/game.js | 18 +++++++++++ webdev/web/index.html | 17 +++++++++++ 4 files changed, 105 insertions(+) create mode 100644 webdev/web/.gitkeep create mode 100644 webdev/web/Serial.js create mode 100644 webdev/web/game.js create mode 100644 webdev/web/index.html diff --git a/webdev/web/.gitkeep b/webdev/web/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/webdev/web/Serial.js b/webdev/web/Serial.js new file mode 100644 index 0000000..b01fdc0 --- /dev/null +++ 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!"); +} \ No newline at end of file diff --git a/webdev/web/game.js b/webdev/web/game.js new file mode 100644 index 0000000..b33f57c --- /dev/null +++ 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); +} \ No newline at end of file diff --git a/webdev/web/index.html b/webdev/web/index.html new file mode 100644 index 0000000..f1ae588 --- /dev/null +++ b/webdev/web/index.html @@ -0,0 +1,17 @@ + + + + + + Open Dag Game + + + + + + + + + + + \ No newline at end of file From 3a3ac9390dc4d8db4aea77bc985ffc3bb3693eb7 Mon Sep 17 00:00:00 2001 From: sam Date: Fri, 24 Nov 2023 11:47:35 +0100 Subject: [PATCH 2/6] Added controller support --- webdev/web/game.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/webdev/web/game.js b/webdev/web/game.js index b33f57c..eb3c7a1 100644 --- a/webdev/web/game.js +++ b/webdev/web/game.js @@ -1,3 +1,17 @@ +let Playerposx = 500; +let Playerposy = 300; + +if (booleanArray) { + if (booleanArray[1]) { + Playerposx += 1;} + if (booleanArray[3]) { + Playerposx -= 1;} + if (booleanArray[0]) { + Playerposy += 1;} + if (booleanArray[2]) { + Playerposy -= 1;} + +} // the function setup() is called once when the page is loaded function setup(){ @@ -14,5 +28,5 @@ function draw(){ background(0,0,0,10); // draw a circle at the mouse position - circle(mouseX, mouseY, 50); + circle(Playerposx, Playerposy, 50); } \ No newline at end of file From 11ef7e232cbae959cca3e84ddc3b417f101784e7 Mon Sep 17 00:00:00 2001 From: sam Date: Fri, 24 Nov 2023 11:49:11 +0100 Subject: [PATCH 3/6] Moved files to other folder --- webdev/{web => }/.gitkeep | 0 webdev/{web => }/Serial.js | 0 webdev/{web => }/game.js | 0 webdev/{web => }/index.html | 0 4 files changed, 0 insertions(+), 0 deletions(-) rename webdev/{web => }/.gitkeep (100%) rename webdev/{web => }/Serial.js (100%) rename webdev/{web => }/game.js (100%) rename webdev/{web => }/index.html (100%) diff --git a/webdev/web/.gitkeep b/webdev/.gitkeep similarity index 100% rename from webdev/web/.gitkeep rename to webdev/.gitkeep diff --git a/webdev/web/Serial.js b/webdev/Serial.js similarity index 100% rename from webdev/web/Serial.js rename to webdev/Serial.js diff --git a/webdev/web/game.js b/webdev/game.js similarity index 100% rename from webdev/web/game.js rename to webdev/game.js diff --git a/webdev/web/index.html b/webdev/index.html similarity index 100% rename from webdev/web/index.html rename to webdev/index.html From 32a9a6f904b40ce3979c6e090b3c0eecbbe43742 Mon Sep 17 00:00:00 2001 From: sam Date: Fri, 24 Nov 2023 11:51:13 +0100 Subject: [PATCH 4/6] added extra test site --- docs/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/index.md b/docs/index.md index 9906bdb..a2e6a80 100644 --- a/docs/index.md +++ b/docs/index.md @@ -5,6 +5,6 @@ die jullie gaan schrijven voor jullie project. Maak je pagina's vooral leuk door plaatjes, video's en diagrammen toe te voegen; dit kan allemaal in markdown! -Klik [hier](/web/) om je game te kunnen spelen. +Klik [hier](/web/) of [hier](/webdev/) om je game te kunnen spelen. {{ mdocotion_header('https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') }} \ No newline at end of file From c23d29c72de92581c027926d330df8996d9cb907 Mon Sep 17 00:00:00 2001 From: sam Date: Fri, 24 Nov 2023 11:55:23 +0100 Subject: [PATCH 5/6] updated yml --- .gitlab-ci.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index e6adea6..1772bee 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -12,6 +12,8 @@ pages: script: - time mkdocs build --site-dir public - time cp -rf web public + - time cp -rf webdev public + artifacts: paths: - public From 1c1506a217c9e5a00bd6004ae96710d7421fd1ff Mon Sep 17 00:00:00 2001 From: sam Date: Fri, 24 Nov 2023 12:00:46 +0100 Subject: [PATCH 6/6] added importing and exporting varaibles --- webdev/Serial.js | 2 +- webdev/game.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/webdev/Serial.js b/webdev/Serial.js index b01fdc0..5b163e5 100644 --- a/webdev/Serial.js +++ b/webdev/Serial.js @@ -41,7 +41,6 @@ async function readLoop() { //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"); @@ -61,6 +60,7 @@ async function readLoop() { } } +export {booleanArray}; // Sluit de poort async function disconnect() { diff --git a/webdev/game.js b/webdev/game.js index eb3c7a1..3e3b4e0 100644 --- a/webdev/game.js +++ b/webdev/game.js @@ -1,5 +1,6 @@ let Playerposx = 500; let Playerposy = 300; +import {booleanArray} from './Serial.js'; if (booleanArray) { if (booleanArray[1]) {