From 72c40702432d51b029e7417131729b8d116ed4ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20=C3=81ngel=20S=C3=A1nchez?= Date: Fri, 16 Oct 2020 20:38:02 +0100 Subject: [PATCH 1/9] Adjust chart --- README.md | 3 ++- html/main.html | 4 ++-- src/index.h | 4 ++-- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index d5ab563..106439f 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,8 @@ The following parts have been used in the electronic circuit. Nevertheless, they Electrical schematic ESP32 pins in the schematic are referred as 3.3V, GND and D*. -Note: ESP32 ADC2 pins cannot be used when Wi-Fi is used. + +*Note: ESP32 ADC2 pins cannot be used when Wi-Fi is used.* ## Requirements ESP32 libraries: diff --git a/html/main.html b/html/main.html index b4d5341..a9e6634 100644 --- a/html/main.html +++ b/html/main.html @@ -19,11 +19,11 @@

ESP32 async server with websockets

LED:   Sensors: Temperature: 0°C. Illuminance: 0 lx

-
+

-
+
diff --git a/src/index.h b/src/index.h index 30e96d6..eb07bad 100644 --- a/src/index.h +++ b/src/index.h @@ -36,11 +36,11 @@ const char MAIN_page[] PROGMEM = R"=====( LED:   Sensors: Temperature: 0°C. Illuminance: 0 lx

-
+

-
+
From 8479197ae2764710d80d288bf743b7fbe5b9b249 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20=C3=81ngel=20S=C3=A1nchez?= Date: Sat, 17 Oct 2020 08:05:38 +0100 Subject: [PATCH 2/9] Change LED status --- .gitignore | 3 +-- html/main.html | 35 ++++++++++++++++++++++++++++------- src/index.h | 35 ++++++++++++++++++++++++++++------- src/webserver.ino | 34 ++++++++++++++++++++++++---------- 4 files changed, 81 insertions(+), 26 deletions(-) diff --git a/.gitignore b/.gitignore index 8489ff1..63fc34e 100644 --- a/.gitignore +++ b/.gitignore @@ -15,5 +15,4 @@ doc/ src/constants.h # Other -INFO.md -old/ \ No newline at end of file +INFO.md \ No newline at end of file diff --git a/html/main.html b/html/main.html index a9e6634..ce3d0f2 100644 --- a/html/main.html +++ b/html/main.html @@ -6,7 +6,7 @@ - + -

ESP32 async server with websockets

+

ESP32 async server with websockets

LED:   Sensors: Temperature: 0°C. Illuminance: 0 lx

@@ -42,7 +42,10 @@

ESP32 async server with websockets

- - - - - - - \ No newline at end of file diff --git a/src/index.h b/src/index.h index 3b91344..b65ac0a 100644 --- a/src/index.h +++ b/src/index.h @@ -17,24 +17,28 @@ const char MAIN_page[] PROGMEM = R"=====( - ESP32-asyncServer-data - - - + + - -

ESP32 async server with websockets

-

- LED:   - Sensors: Temperature: 0°C. Illuminance: 0 lx

+

ESP32 async server with websockets

+

+ + + Sensors: Temperature: 0°C. Illuminance: 0 lx. +

@@ -44,25 +48,22 @@ const char MAIN_page[] PROGMEM = R"=====(
- - - - - - - - - )====="; From cb40683c4a14c387e89f639422a6fec51da291a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20=C3=81ngel=20S=C3=A1nchez?= Date: Sat, 17 Oct 2020 14:00:13 +0100 Subject: [PATCH 4/9] Change font --- html/main.html | 17 +++++++++++------ src/index.h | 17 +++++++++++------ 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/html/main.html b/html/main.html index f8d068f..5afa898 100644 --- a/html/main.html +++ b/html/main.html @@ -8,19 +8,24 @@

ESP32 async server with websockets

-

+

- Sensors: Temperature: 0°C. Illuminance: 0 lx. + SENSORS: Temperature: 0°C. Illuminance: 0 lx.

@@ -32,7 +37,7 @@

ESP32 async server with websockets

- - - + + + \ No newline at end of file diff --git a/html/main.js b/html/main.js new file mode 100644 index 0000000..a65bc17 --- /dev/null +++ b/html/main.js @@ -0,0 +1,192 @@ +var counter = 0; +var HTMLbutton = document.getElementById("ledButton"); +var led = false; + +// Draw LED +var contextLED = document.getElementById("led").getContext("2d"); +contextLED.arc(25, 25, 15, 0, Math.PI * 2, false); +contextLED.lineWidth = 3; +contextLED.strokeStyle = "black"; +contextLED.fillStyle = "black"; +contextLED.stroke(); +contextLED.fill(); + +var ctxTemp = document.getElementById('temperatureChart').getContext('2d'); +var temperatureChart = new Chart(ctxTemp, { + type: 'line', + data: { + //labels: [1, 2, 3], + datasets: [{ + label: 'Temperature', + borderColor: 'red', + backgroundColor: 'red', + borderWidth: 2, + pointRadius: 1, + fill: false + }] + }, + options: { + legend: { + display: false + }, + responsive: true, + scales: { + xAxes: [{ + display: true, + ticks: { + display: true + } + }], + yAxes: [{ + display: true, + scaleLabel: { + display: true, + labelString: 'Temperature (ºC)' + }, + ticks: { + min: 0, + max: 40 + } + }] + }, + showLines: true, + elements: { + line: { + tension: 0 // disables bezier curves + } + }, + animation: { + duration: 0 // general animation time + }, + hover: { + animationDuration: 0 // duration of animations when hovering an item + }, + responsiveAnimationDuration: 0 // animation duration after a resize + } +}); + +var ctxIllum = document.getElementById('illuminanceChart').getContext('2d'); +var illuminanceChart = new Chart(ctxIllum, { + type: 'line', + data: { + datasets: [{ + label: 'Illuminance', + borderColor: 'gold', + backgroundColor: 'gold', + borderWidth: 2, + pointRadius: 1, + fill: false + }] + }, + options: { + legend: { + display: false + }, + responsive: true, + scales: { + xAxes: [{ + display: true, + ticks: { + display: true + } + }], + yAxes: [{ + display: true, + scaleLabel: { + display: true, + labelString: 'Illuminance (lux)' + }, + ticks: { + min: 0, + max: 10000 + } + }] + }, + showLines: true, + animation: { + duration: 0 // general animation time + }, + hover: { + animationDuration: 0 // duration of animations when hovering an item + }, + responsiveAnimationDuration: 0 // animation duration after a resize + } +}); + +var webSocket = new WebSocket("ws://10.42.0.190/ws"); +webSocket.onopen = function (event) { + HTMLbutton.disabled = false; +} +webSocket.onclose = function (event) { + HTMLbuton.disabled = true; +} +webSocket.onmessage = function (event) { + let jsonObj = JSON.parse(event.data); + // LED change + if ((jsonObj["ledStatus"] != undefined) && (jsonObj["ledStatus"] != led)) { + led = jsonObj["ledStatus"]; + updateLed(); + } + // Sensors update + else { + let temp = jsonObj["temperature"]; + let illum = jsonObj["illuminance"]; + updateValues(temp, illum); + updateCharts(temp, illum); + } +} + +function changeLed() { + webSocket.send("C"); +} + +function updateLed() { + if (led) { + contextLED.fillStyle = "red"; + contextLED.fill(); + } + else { + contextLED.fillStyle = "black"; + contextLED.fill(); + } +} + +//window.setInterval(updateValues, 10); // Update values used when testing + +function updateValues(temperature, illuminance) { + //temperature = Math.floor(Math.random() * 100); // Testing + //illuminance = Math.floor(Math.random() * 100); // Testing + document.getElementById("temperature").innerHTML = temperature; + document.getElementById("illuminance").innerHTML = illuminance; +} + +function updateCharts(temperature, illuminance) { + let date = new Date(); + let timeDislpayed = date.getMinutes().toString().padStart(2, '0') + ":" + date.getSeconds().toString().padStart(2, '0'); + addData(temperatureChart, timeDislpayed, [temperature]); + addData(illuminanceChart, timeDislpayed, [illuminance]); + // Remove values from chart after 100 data + if (counter < 100) { + counter++; + } + else { + removeData(temperatureChart); + removeData(illuminanceChart); + } +} + +function addData(chart, label, data) { + chart.data.labels.push(label); + chart.data.datasets.forEach((dataset) => { + dataset.data.push(data); + }); + chart.update(); +} + +function removeData(chart) { + chart.data.labels.shift(); + chart.data.datasets.forEach((dataset) => { + dataset.data.shift(); + }); + chart.update(); +} \ No newline at end of file diff --git a/html/styles.css b/html/styles.css new file mode 100644 index 0000000..319e641 --- /dev/null +++ b/html/styles.css @@ -0,0 +1,10 @@ +html { + text-align: center; + font-family: Arial, Helvetica, sans-serif; +} +#title { + margin: 0px auto; + text-decoration: underline; +} +#data { margin: 5px auto;} +#led { margin-bottom: -20px;} \ No newline at end of file diff --git a/src/constants.h.TEMPLATE b/src/constants.h.TEMPLATE index d4ce4ff..6f88f98 100644 --- a/src/constants.h.TEMPLATE +++ b/src/constants.h.TEMPLATE @@ -18,8 +18,8 @@ namespace Constants { // ESP32 constants - const uint16_t resolution(4095); // Max analog value - const float maxVoltage(3.3); // Max voltage + const uint16_t resolution(4095); // Max analog value + const float maxVoltage(3.3); // Max voltage // WiFI parameters (TO BE MODIFIED) const char ssid[] = "SSID"; @@ -32,15 +32,15 @@ namespace Constants const uint8_t ledPin(13); // Thermistor MF52A - const uint8_t thermistorPin(32); // Connected through a voltage divider + const uint8_t thermistorPin(32); // Connected through a voltage divider const uint16_t beta(3950); - const uint16_t resitanceTherm(1000); // 1 kohm - const float parameterB(3950); // Simplified B parameter equation from Steinhart-Hart equation + const uint16_t resitanceTherm(1000); // 1 kohm + const float parameterB(3950); // Simplified B parameter equation from Steinhart-Hart equation const float parameterR0(23000); // Photoresistor - const uint8_t photoresistorPin(34); // Connected through a voltage divider - const uint16_t resistancePhoto(10000); // 10 kohm + const uint8_t photoresistorPin(34); // Connected through a voltage divider + const uint16_t resistancePhoto(10000); // 10 kohm const float minResistance(1); // 100 kohm @ 1 lx and 30 kohm @ 10 lx (See graph) const float parameter1(-1.91248928939); @@ -48,7 +48,9 @@ namespace Constants // Values to smooth the readings const uint8_t iterations(5); - const uint8_t numReadings(3); // Smoothing https://www.arduino.cc/en/tutorial/smoothing -} + const uint8_t numReadings(3); // Smoothing https://www.arduino.cc/en/tutorial/smoothing +} // namespace Constants + +#endif #endif \ No newline at end of file diff --git a/src/index.h b/src/index.h index a02f734..a26fff5 100644 --- a/src/index.h +++ b/src/index.h @@ -2,8 +2,8 @@ * @file index.h * @author José Ángel Sánchez (https://github.com/gelanchez) * @brief HTML with the main page. - * @version 0.0.1 - * @date 2020-09-29 + * @version 0.0.2 + * @date 2020-10-17 * @copyright GPL-3.0 */ @@ -11,7 +11,7 @@ #define INDEX_H /** - * @brief Main html page. + * @brief main.html, main.js and styles.css in one char array. */ const char MAIN_page[] PROGMEM = R"=====( @@ -21,8 +21,8 @@ const char MAIN_page[] PROGMEM = R"=====( ESP32-asyncServer-data - +