From d1aca3c6fc2945b568e87e86b6025c78dbf65bd3 Mon Sep 17 00:00:00 2001 From: Martial Simon Date: Wed, 7 Feb 2024 21:16:54 +0200 Subject: feat: fixed the canvas backend, and updated the frontend --- index.html | 9 +++++++-- index.js | 13 ++++++------- principe.md | 11 ----------- principle.md | 11 +++++++++++ style.css | 9 +++++++++ 5 files changed, 33 insertions(+), 20 deletions(-) delete mode 100644 principe.md create mode 100644 principle.md create mode 100644 style.css diff --git a/index.html b/index.html index 44968c8..d2fa69c 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,16 @@ - MQTT + IoT Project + -

MQTT Bonjour Yann

+ +

+ Click anywhere on the screen to move the robot! +

+ \ No newline at end of file diff --git a/index.js b/index.js index 43dc537..3ef5dd2 100644 --- a/index.js +++ b/index.js @@ -4,16 +4,17 @@ const ctx = canvas.getContext('2d'); const canvasOffsetX = canvas.offsetLeft; const canvasOffsetY = canvas.offsetTop; -canvas.width = window.innerWidth - canvasOffsetX; -canvas.height = window.innerHeight - canvasOffsetY; +canvas.width = window.innerWidth - canvasOffsetX * 2; +canvas.height = window.innerHeight - canvasOffsetY * 2; let isPainting = false; let lineWidth = 5; let startX; -let StartY; -ctx.strokeStyle = "blue"; +let startY; +ctx.strokeStyle = "skyblue"; const draw = (e) => { + console.log(e); if (!isPainting) { return; } @@ -21,14 +22,12 @@ const draw = (e) => { ctx.lineWidth = lineWidth; ctx.lineCap = 'round'; - ctx.lineTo(e.clientX - canvasOffsetX, e.clientY - canvasOffsetY); + ctx.lineTo(e.pageX - canvasOffsetX, e.pageY - canvasOffsetY); ctx.stroke(); } canvas.addEventListener('mousedown', (e) => { isPainting = true; - startX = e.clientX; - StartY = e.clientY; }); canvas.addEventListener('mouseup', (e) => { diff --git a/principe.md b/principe.md deleted file mode 100644 index 10bc915..0000000 --- a/principe.md +++ /dev/null @@ -1,11 +0,0 @@ -Robot connecté à Internet via un partage de co -Robot connecté au serveur MQTT marcelus.net - -Site web avec un canvas (initialement vide) -JS du site qui : - - recupère les clics de la souris dans le canvas - - calcule la direction visée par rapport à l'état et les coordonnées actuelles du robot (initialement 0) - - pub (MQTT) le message pour diriger le robot - - lit la donnée du capteur de proximité - - place un point (mur) sur le canvas d'après ce que dit le capteur - - attend un peu avant de relire la donnée \ No newline at end of file diff --git a/principle.md b/principle.md new file mode 100644 index 0000000..10bc915 --- /dev/null +++ b/principle.md @@ -0,0 +1,11 @@ +Robot connecté à Internet via un partage de co +Robot connecté au serveur MQTT marcelus.net + +Site web avec un canvas (initialement vide) +JS du site qui : + - recupère les clics de la souris dans le canvas + - calcule la direction visée par rapport à l'état et les coordonnées actuelles du robot (initialement 0) + - pub (MQTT) le message pour diriger le robot + - lit la donnée du capteur de proximité + - place un point (mur) sur le canvas d'après ce que dit le capteur + - attend un peu avant de relire la donnée \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..f10a42e --- /dev/null +++ b/style.css @@ -0,0 +1,9 @@ +body { + background: linear-gradient(60deg, skyblue, 70%, blue) no-repeat fixed; + background-size: cover; +} + +canvas { + background-color: aliceblue; + border-radius: 20px; +} \ No newline at end of file -- cgit v1.2.3