<!DOCTYPE html>
<html>
<head>
<title>ESP32 Weather Station</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<script>
function DisplayCurrentTime() {
var date = new Date();
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
time = hours + ":" + minutes + ":" + seconds;
var currentTime = document.getElementById("currentTime");
currentTime.innerHTML = time;
};
function GetReadings() {
nocache = "&nocache";
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.status == 200) {
if (this.responseXML != null) {
// XML file received - contains sensor readings
var count;
var num_an = this.responseXML.getElementsByTagName('reading').length;
for (count = 0; count < num_an; count++) {
document.getElementsByClassName("reading")[count].innerHTML =
this.responseXML.getElementsByTagName('reading')[count].childNodes[0].nodeValue;
}
}
}
}
// Send HTTP GET request to get the latest sensor readings
request.open("GET", "?update_readings" + nocache, true);
request.send(null);
DisplayCurrentTime();
setTimeout('GetReadings()', 10000);
}
document.addEventListener('DOMContentLoaded', function() {
DisplayCurrentTime();
GetReadings();
}, false);
</script>
<style>
body {
text-align: center;
font-family: "Trebuchet MS", Arial;
}
table {
border-collapse: collapse;
width:60%;
margin-left:auto;
margin-right:auto;
}
th {
padding: 16px;
background-color: #0043af;
color: white;
}
tr {
border: 1px solid #ddd;
padding: 16px;
}
tr:hover {
background-color: #bcbcbc;
}
td {
border: none;
padding: 16px;
}
.sensor {
color:white;
font-weight: bold;
background-color: #bcbcbc;
padding: 8px;
}
</style>
</head>
<body>
<h1>ESP32 Weather Station</h1>
<h3>Last update: <span id="currentTime"></span></h3>
<table>
<tr>
<th>SENSOR</th>
<th>MEASUREMENT</th>
<th>VALUE</th>
</tr>
<tr>
<td><span class="sensor">DHT</span></td>
<td>Temp. Celsius</td>
<td><span class="reading">...</span> *C</td>
</tr>
<tr>
<td><span class="sensor">DHT</span></td>
<td>Temp. Fahrenheit</td>
<td><span class="reading">...</span> *F</td>
</tr>
<tr>
<td><span class="sensor">DHT</span></td>
<td>Humidity</td>
<td><span class="reading">...</span> %</td>
</tr>
<tr>
<td><span class="sensor">BMP180</span></td>
<td>Temp. Celsius</td>
<td><span class="reading">...</span> *C</td>
</tr>
<tr>
<td><span class="sensor">BMP180</span></td>
<td>Temp. Fahrenheit</td>
<td><span class="reading">...</span> *F</td>
</tr>
<tr>
<td><span class="sensor">BMP180</span></td>
<td>Pressure</td>
<td><span class="reading">...</span> Pa</td>
</tr>
<tr>
<td><span class="sensor">POT</span></td>
<td>Position</td>
<td><span class="reading">...</span>/4095</td>
</tr>
<tr>
<td><span class="sensor">LDR</span></td>
<td>Luminosity</td>
<td><span class="reading">...</span>/4095</td>
</tr>
</table>
</body>
</html>