From 37736012d40dd9953d7d92163d62edc5a932813c Mon Sep 17 00:00:00 2001 From: huskee Date: Sat, 16 Dec 2023 00:15:54 +0200 Subject: [PATCH] Add graphing and data acquisition options --- data/index.html | 39 +++++++++++++++++++++++++------ data/script.js | 62 +++++++++++++++++++++++++++++++++++++++---------- data/style.css | 20 ++++++++++++++++ platformio.ini | 1 + src/main.cpp | 32 +++++++++++++++---------- 5 files changed, 123 insertions(+), 31 deletions(-) create mode 100644 data/style.css diff --git a/data/index.html b/data/index.html index a4199e3..1b0260e 100644 --- a/data/index.html +++ b/data/index.html @@ -2,17 +2,42 @@ therminator + -

A:

-

B:

-

time:

-
+

/* therminator */

+

last sensor update:

+
+
+

+ max data points: + +

+
+
+

+ update interval (ms): + +

+
+
+
+

Channel A:

+
+

Channel B:

+
diff --git a/data/script.js b/data/script.js index 5f02446..1bcc49e 100644 --- a/data/script.js +++ b/data/script.js @@ -1,10 +1,34 @@ -const maxVals = 15; const canvasA = document.getElementById("chartA"); const canvasB = document.getElementById("chartB"); +const maxValsSelect = document.getElementById("maxVals"); +let maxVals = maxValsSelect.options[maxValsSelect.selectedIndex].text; const options = { - suggestedMin: 0, - suggestedMax: 50, -} + plugins: { + legend: { + labels: { + color: "rgba(250, 250, 250, 1)", + }, + }, + }, + scales: { + y: { + grid: { + color: "rgba(250, 250, 250, 0.5)", + }, + ticks: { + color: "rgba(250, 250, 250, 0.5)", + }, + }, + x: { + grid: { + color: "rgba(250, 250, 250, 0.5)", + }, + ticks: { + color: "rgba(250, 250, 250, 0.5)", + }, + }, + }, +}; const chartA = new Chart(canvasA, { type: "line", data: { @@ -81,16 +105,18 @@ function removeFirstData(chart) { dataset.data.shift(); }); } + +function changeUpdateInterval() { + const updateSelect = document.getElementById("updateInterval"); + let updateInt = updateSelect.options[updateSelect.selectedIndex].text; + websocket.send("u" + updateInt); + location.reload(); +} + // Function that receives the message from the ESP32 with the readings function onMessage(event) { console.log(event.data); var data = JSON.parse(event.data); - var keys = Object.keys(data); - - for (var i = 0; i < keys.length - 1; i++) { - var key = keys[i]; - document.getElementById(key).innerHTML = data[key]; - } var today = new Date(); var date = today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate(); @@ -104,6 +130,18 @@ function onMessage(event) { if (chartB.data.labels.length > maxVals) { removeFirstData(chartB); } - addData(chartA, dateTime, data["tempA"]); - addData(chartB, dateTime, data["tempB"]); + if (isNaN(data["tempA"])) { + document.getElementById("error-tempA").innerHTML = + "

" + data["tempA"] + "

"; + } else { + document.getElementById("error-tempA").innerText = ""; + } + if (isNaN(data["tempB"])) { + document.getElementById("error-tempB").innerHTML = + "

" + data["tempB"] + "

"; + } else { + document.getElementById("error-tempB").innerText = ""; + } + addData(chartA, data["time"] / 1000, data["tempA"]); + addData(chartB, data["time"] / 1000, data["tempB"]); } diff --git a/data/style.css b/data/style.css new file mode 100644 index 0000000..089cb3c --- /dev/null +++ b/data/style.css @@ -0,0 +1,20 @@ +@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"); +body { + background-color: rgb(50, 50, 50); + color: white; + font-family: "IBM Plex Mono", monospace; + white-space: nowrap; + padding: 1rem 2rem; +} +#mv, #ui, #chartA, #chartB { + display: inline-block; +} + +#error-tempA, #error-tempB { + color: red !important; +} +.chart-container { + position: relative; + height: 40vh; + width: 80vw; +} diff --git a/platformio.ini b/platformio.ini index 4562647..056225e 100644 --- a/platformio.ini +++ b/platformio.ini @@ -19,4 +19,5 @@ lib_deps = ESPAsyncTCP zeed/ESP Async WebServer Arduino_JSON + ESPAsyncWiFiManager monitor_filters = esp8266_exception_decoder, colorize diff --git a/src/main.cpp b/src/main.cpp index a6ff8c9..6544ae3 100644 --- a/src/main.cpp +++ b/src/main.cpp @@ -9,6 +9,7 @@ #define CS_A D2 #define CS_B D3 + Adafruit_MAX31855 thermocoupleA(CS_A); Adafruit_MAX31855 thermocoupleB(CS_B); @@ -18,7 +19,7 @@ AsyncWebSocket ws("/ws"); JSONVar readings; unsigned long int lastTime = 0; -unsigned long int timerDelay = 3000; +unsigned long int timerDelay = 500; String checkSensor(Adafruit_MAX31855 &sensor) { if (isnan(sensor.readCelsius())) { uint8_t err = sensor.readError(); @@ -42,22 +43,29 @@ String getSensorReadings() { return jsonString; } -void notifyClients(String sensorReadings) { - ws.textAll(sensorReadings); +void notifyClients(String text) { + ws.textAll(text); } void handleWebSocketMessage(void *arg, uint8_t *data, size_t len) { AwsFrameInfo *info = (AwsFrameInfo *)arg; if (info->final && info->index == 0 && info->len == len && info->opcode == WS_TEXT) { - // data[len] = 0; - // String message = (char*)data; - // Check if the message is "getReadings" - // if (strcmp((char*)data, "getReadings") == 0) { - // if it is, send current sensor readings - String sensorReadings = getSensorReadings(); - Serial.print(sensorReadings); - notifyClients(sensorReadings); - //} + data[len] = 0; + String message = (char *)data; + // Check if the message is "getReadings" + if (strcmp((char *)data, "getReadings") == 0) { + // if it is, send current sensor readings + String sensorReadings = getSensorReadings(); + Serial.print(sensorReadings); + notifyClients(sensorReadings); + } + if (message.startsWith("u")) { + String uVal = (message.substring(message.indexOf("u") + 1, message.length())); + int uInt = uVal.toInt(); + timerDelay = uInt; + Serial.printf("update interval changed to %d\n", uInt); + notifyClients("update interval changed to " + uVal); + } } }