Skip to content

Commit

Permalink
Merge pull request #2 from gelanchez/develop
Browse files Browse the repository at this point in the history 
Develop
  • Loading branch information
@gelanchez
gelanchez authored Oct 18, 2020
2 parents e882bb0 + f2da37c commit 1cf1af7
Show file tree
Hide file tree
Showing 10 changed files with 377 additions and 285 deletions.
3 changes: 1 addition & 2 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,4 @@ doc/
src/constants.h

# Other
INFO.md
old/
INFO.md
Binary file modified ESP32-asyncServer-data_screenshot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 4 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
# 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.
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 as well as read and process the values from a thermistor and a photoresistor.

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/) CSS framework.
The communication between the clients and the async webserver is done through [websockets](https://en.wikipedia.org/wiki/WebSocket). [JSON](https://www.json.org/json-en.html) is used as data format and [charts.js](https://www.chartjs.org/) for data visualization.

## Website appearance
<img src="./ESP32-asyncServer-data_screenshot.png" alt="Website appearance" width="100%" height="auto">
Expand All @@ -19,7 +16,8 @@ The following parts have been used in the electronic circuit. Nevertheless, they

<img src="./ESP32-web-data_schem.svg" alt="Electrical schematic" width="100%" height="auto">
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:
Expand Down
197 changes: 17 additions & 180 deletions html/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,196 +5,33 @@
<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">
<meta name="description" content="ESP32 async webserver data sensor">
<meta name="author" content="José Ángel Sánchez">
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<link rel="stylesheet" href="styles.css">
</head>

<body>
<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">
<h2 id="title">ESP32 async server with websockets</h2>
<p id="data">
<button id="ledButton" onclick="changeLed()" disabled>Toggle LED</button>
<canvas id="led" width="50" height="50"></canvas>
<span>SENSORS: Temperature: </span><span id="temperature">0</span><span>°C. Illuminance: </span><span
id="illuminance">0</span><span> lx.</span>
</p>

<div class="chart-container" style="position: relative; width:95vw; 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">
<div class="chart-container" style="position: relative; width:95vw; 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 -->
<!-- Not using the jQuery slim version as it doesn't have AJAX-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"
integrity="sha512-QEiC894KVkN9Tsoi6+mKf8HaCLJvyA6QIRzY5KrfINXYuP9NxdIkRQhGq3BZi0J4I7V5SidGM3XUQ5wFiMDuWg=="
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>
<script src="main.js"></script>
</body>

</html>
Loading

0 comments on commit 1cf1af7

Please sign in to comment.