arduino websocket serial project

2018-07-21 20:09:38 +01:00
parent 593c1ff51b
commit 0dc8d7d56c
15 changed files with 2787 additions and 39 deletions
--- a/JavaScript/adruino-temp-sensor/client/draw.js
+++ b/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();
+    }
+}
--- a/JavaScript/adruino-temp-sensor/client/index.html
+++ b/JavaScript/adruino-temp-sensor/client/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>Temperature</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>
+    </head>
+    <body>
+        <canvas id="graph" width="600" height="400"></canvas>
+        <script src="draw.js"></script>
+        <script src="main.js"></script>
+    </body>
+</html>
--- a/JavaScript/adruino-temp-sensor/client/main.js
+++ b/JavaScript/adruino-temp-sensor/client/main.js
@@ -0,0 +1,26 @@
+console.log('Connecting to server')
+
+var socket = io.connect('benkyd.duckdns.org:8081');
+let temp = [];
+
+socket.on('connect', function(data) {
+    socket.emit('handshake', 'client');
+});
+
+socket.on('handshake', function(data) {
+    socket.emit('ready');
+});
+
+socket.on('temp', function(data) {
+    console.log(data);
+    addPoint(data);
+});
+
+socket.on('lasthour', function(data) {
+    console.log(data);
+    data.forEach(point => {
+        if (point != NaN || point != null || point != 'undefined' || point != 'NaN' || point != 'null' || point != 'undefined') {
+            addPoint(point);
+        }
+    });
+});
--- a/JavaScript/adruino-temp-sensor/client/style.css
+++ b/JavaScript/adruino-temp-sensor/client/style.css
@@ -0,0 +1,15 @@
+body {
+    background-color: #2f2f2f;
+}
+
+canvas {
+    background-color: rgb(245,245,245);
+    padding: 0;
+    margin: auto;
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}