arduino websocket serial project

JavaScript/adruino-temp-sensor/client/draw.js

@@ -0,0 +1,49 @@
+const MAX_POINTS = 60;
+const X_MAX = 60;
+const Y_MAX = 40;
+const X_DIV = 5;
+const Y_DIV = 4;
+
+let canvas = document.getElementById('graph');
+let ctx = canvas.getContext('2d');
+let points = [];
+
+function addPoint(temp) {
+    if (points.length <= MAX_POINTS) {
+        points.push(temp);
+    }
+    else {
+        for (let i = 0; i <= MAX_POINTS - 1; i++) {
+            points[i] = points[i + 1];
+        }
+        points[MAX_POINTS] = temp;
+    }
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    ctx.strokeStyle = "black";
+    ctx.font = "20px Courrier New";
+    ctx.textAlign="right";
+    for (let i = X_DIV; i < MAX_POINTS; i += X_DIV) {
+        ctx.beginPath();
+        ctx.moveTo(i * (canvas.width / MAX_POINTS), 0);
+        ctx.lineTo(i * (canvas.width / MAX_POINTS), canvas.height);
+        ctx.stroke();
+    }
+
+    for (let i = Y_DIV; i < Y_MAX; i += Y_DIV) {
+        ctx.fillText(Y_MAX - i , canvas.width - 1, i * (canvas.height / Y_MAX) - 2);
+        ctx.beginPath();
+        ctx.moveTo(0, i * (canvas.height / Y_MAX));
+        ctx.lineTo(canvas.width, i * (canvas.height / Y_MAX));
+        ctx.stroke();
+    }
+
+    ctx.strokeStyle = "blue";
+    for (let i = 0; i < points.length && points.length > 1; i++) {
+        ctx.beginPath();
+        ctx.moveTo(i * (canvas.width / MAX_POINTS), canvas.height - (points[i] * 10));
+        ctx.lineTo((i + 1) * (canvas.width / MAX_POINTS), canvas.height - (points[i + 1] * 10));
+        ctx.stroke();
+    }
+}