From e78b671a3062d285cfa932589760c5326ba486a2 Mon Sep 17 00:00:00 2001 From: Martial Simon Date: Tue, 5 Mar 2024 12:51:29 +0200 Subject: meta: renamed description --- README.md | 11 +++++++++++ index.html | 2 +- index.js | 26 +++++++++++++++++--------- principle.md | 11 ----------- style.css | 5 +++++ 5 files changed, 34 insertions(+), 21 deletions(-) create mode 100644 README.md delete mode 100644 principle.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..10bc915 --- /dev/null +++ b/README.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/index.html b/index.html index 105506d..d0de59a 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - +

Click anywhere on the screen to move the robot!

diff --git a/index.js b/index.js index cb2b1b3..e217344 100644 --- a/index.js +++ b/index.js @@ -1,5 +1,6 @@ const canvas = document.getElementById('drawing-board'); const ctx = canvas.getContext('2d'); +const hit = document.getElementById("check"); const canvasOffsetX = canvas.offsetLeft; const canvasOffsetY = canvas.offsetTop; @@ -11,48 +12,55 @@ let isPainting = false; let lineWidth = 5; let strokeColor = "skyblue" let drawings = []; + +ctx.lineWidth = lineWidth; +ctx.lineCap = 'round'; ctx.strokeStyle = strokeColor; const draw = (x, y) => { if (!isPainting) { return; } - + ctx.lineWidth = lineWidth; ctx.lineCap = 'round'; ctx.lineTo(x - canvasOffsetX, y - canvasOffsetY); drawings.push({x : (x - canvasOffsetX)/canvas.width, y : (y - canvasOffsetY)/canvas.height}); ctx.stroke(); + ctx.beginPath(); } - canvas.addEventListener('mousedown', (e) => { isPainting = true; + hit.style.display = ""; + setTimeout(() => { + hit.style.display = "none" + }, 2 * 1000); }); -canvas.addEventListener('mouseup', (e) => { +/* canvas.addEventListener('mouseup', (e) => { isPainting = false; drawings.push({x : -1, y : -1}) ctx.stroke(); ctx.beginPath(); -}); +}); */ -canvas.addEventListener('mousemove', (e) => draw(e.clientX, e.clientY)); +// canvas.addEventListener('mousemove', (e) => draw(e.clientX, e.clientY)); canvas.addEventListener('touchstart', (e) => { - console.log(e); isPainting = true; + draw(e.targetTouches[0].clientX, e.targetTouches[0].clientY); }); -canvas.addEventListener('touchend', (e) => { +/* canvas.addEventListener('touchend', (e) => { isPainting = false; drawings.push({x : -1, y : -1}) ctx.stroke(); ctx.beginPath(); -}); +}); */ -canvas.addEventListener('touchmove', (e) => draw(e.targetTouches[0].clientX, e.targetTouches[0].clientY)); +// canvas.addEventListener('touchmove', (e) => draw(e.targetTouches[0].clientX, e.targetTouches[0].clientY)); function redrawCanvas() { canvas.width = window.innerWidth - canvasOffsetX * 2; diff --git a/principle.md b/principle.md deleted file mode 100644 index 10bc915..0000000 --- a/principle.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/style.css b/style.css index 55f2e5c..1244c27 100644 --- a/style.css +++ b/style.css @@ -15,4 +15,9 @@ canvas { border: 3px dashed orange; padding: 4px; pointer-events: none; +} + +#check { + position: absolute; + display: none; } \ No newline at end of file -- cgit v1.2.3