Merge pull request #1 from gelanchez/develop

Sensors data shown in html
gelanchez · Oct 13, 2020 · e882bb0 · e882bb0
2 parents a190cbf + 6f7f7ec
commit e882bb0
Show file tree

Hide file tree

Showing 6 changed files with 357 additions and 19 deletions.
diff --git a/ESP32-asyncServer-data_screenshot.png b/ESP32-asyncServer-data_screenshot.png
diff --git a/README.md b/README.md
@@ -1,10 +1,13 @@
 # ESP32-asyncServer-data
 This repository contains an implementation of an asynchronous HTTP webserver for an ESP32 microcontroller. The ESP32, connected to a WiFi network, is used to control a LED and read and process the values from a thermistor and a photoresistor. The control and values are sent to the clients connected to the webserver using websockets.
 
-Apart from the Async server and websockets, the following technologies are used:
-- [JSON](https://www.json.org/json-en.html) data format is used as standard.
+Apart from the Async server and [websockets](https://en.wikipedia.org/wiki/WebSocket), the following technologies are used:
+- [JSON](https://www.json.org/json-en.html) data format.
 - [charts.js](https://www.chartjs.org/) for data presentation.
-- [Bootstrap](https://getbootstrap.com/), the CSS framework, decorates the webpages.
+- [Bootstrap](https://getbootstrap.com/) CSS framework.
+
+## Website appearance
+<img src="./ESP32-asyncServer-data_screenshot.png" alt="Website appearance" width="100%" height="auto">
 
 ## Schematic
 The following parts have been used in the electronic circuit. Nevertheless, they can be replaced by other similar ones with little change in the code.
@@ -28,11 +31,12 @@ External libraries:
 - [ESPAsyncWebServer](https://github.com/me-no-dev/ESPAsyncWebServer). Async HTTP and WebSocket Server.
 
 ## Usage
-1. Connect the ESP32 as showed in the schematics.
-2. Install the standard ESP libraries either using the Arduino IDE or directly from [Espressif](https://docs.espressif.com/projects/esp-idf/en/latest/esp32/).
+1. Build the circuit as shown in the schematic.
+2. Install the standard ESP32 libraries either using the Arduino IDE or directly from [Espressif](https://docs.espressif.com/projects/esp-idf/en/latest/esp32/).
 3. Install the required external libraries.
 4. Download the repository and rename the file *constants.h.TEMPLATE* to *constants.h*.
-    - Change the SSID and PASSWORD correspoding to the WiFi network. 
+    - Change the SSID and PASSWORD correspoding to the WiFi network.
+    - Change the IP address and gateway if necessary in *constants.h*, *index.h* and *websocketclient.py*.
 5. Flash the ESP32:
     - For VSCode, modify the *arduino.json* and *c_cpp_properties.json* files to add the missing libraries.
     - For the Arduino IDE, change the *src* folder to match the name of the *.ino* file.

diff --git a/html/main.html b/html/main.html
@@ -2,19 +2,30 @@
 <html lang="en">
 
 <head>
-    <!-- Required meta tags -->
+    <title>ESP32-asyncServer-data</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="author" content="José Ángel">
+    <meta name="description" content="ESP32 async webserver data sensor, proof of concept">
 
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
         integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
-
-    <title>Hello, world!</title>
 </head>
 
 <body>
-    <h1>Hello, world!</h1>
+    <h4 style="text-align:center">ESP32 async server with websockets</h4>
+    <p style="text-align:center">
+        <b>LED: &nbsp;</b><input id ="ledbutton" class="btn btn-dark btn-sm" type="submit" value="Turn LED on " onclick="changeLed()" style="margin-right: 2em">
+        <b>Sensors: </b>Temperature: <span id="temperature">0</span>°C. Illuminance: <span id="illuminance">0</span> lx</p>
+
+    <div class="chart-container" style="position: relative; height:40vh; width:80vw; margin:auto">
+        <canvas id="temperatureChart" width="800" height="200" aria-label="Temperature chart" role="img"></canvas>
+    </div>
+    <br>
+    <div class="chart-container" style="position: relative; height:40vh; width:80vw; margin:auto">
+        <canvas id="illuminanceChart" width="800" height="200" aria-label="Illuminance chart" role="img"></canvas>
+    </div>
 
     <!-- Optional JavaScript -->
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
@@ -28,6 +39,162 @@ <h1>Hello, world!</h1>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
         integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
         crossorigin="anonymous"></script>
+
+    <!-- JS -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js" integrity="sha512-QEiC894KVkN9Tsoi6+mKf8HaCLJvyA6QIRzY5KrfINXYuP9NxdIkRQhGq3BZi0J4I7V5SidGM3XUQ5wFiMDuWg==" crossorigin="anonymous"></script>
+    <script>
+        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: 'yellow',
+                    backgroundColor: 'yellow',
+                    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
+            }
+        });
+
+        webSocket = new WebSocket("ws://10.42.0.190/ws");
+        webSocket.onmessage = function (event) {
+            let myObj = JSON.parse(event.data);
+            let temp = myObj["temperature"];
+            let illum = myObj["illuminance"];
+            updateValues(temp, illum);
+            updateCharts(temp, illum);
+        }
+
+        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;
+        }
+
+        var counter = 0;
+
+        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]);
+            if (counter < 100){
+                counter++;
+            }
+            else {
+                removeData(temperatureChart);
+                removeData(illuminanceChart); 
+            }   
+        }
+
+        //window.setInterval(updateValues, 10); // Update values used when testing
+
+        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();
+        }
+    </script>
 </body>
 
 </html>
diff --git a/src/constants.h.TEMPLATE b/src/constants.h.TEMPLATE
@@ -42,8 +42,9 @@ namespace Constants
     const uint8_t photoresistorPin(34);  // Connected through a voltage divider
     const uint16_t resistancePhoto(10000);  // 10 kohm
     const float minResistance(1);
-    const float parameter1(-1.430677);
-    const float parameter2(25428013);
+    // 100 kohm @ 1 lx and 30 kohm @ 10 lx (See graph)
+    const float parameter1(-1.91248928939);
+    const float parameter2(3651291002.57);
 
     // Values to smooth the readings
     const uint8_t iterations(5);