128 lines
4.8 KiB
C
128 lines
4.8 KiB
C
//============
|
|
//Webpage Code
|
|
//============
|
|
String webPageSource = R"***(
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name= "viewport " content= "width=device-width, initial-scale=1">
|
|
<link rel= "icon " href= "data:, ">
|
|
<style>
|
|
html { font-family: Helvetica, Arial, sans-serif; display: inline-block; margin: 0px auto; text-align: center; font-size: 6vw; background-color: #333; color: white;}
|
|
h1{font-size: 12vw;}
|
|
.button {background-color: #8fc83b; font-size: 8vw; border-radius: 3vw; width: 90%; border: 4px solid black; color: white; padding: 0.5em 2em; text-decoration: none; font-weight: bold; margin: 0.25em auto; cursor: pointer;}
|
|
.button1 {background-color: #85b3ee;}
|
|
.button2 {background-color: #678cb3;}
|
|
.button3 {background-color: #c80000;}
|
|
#sensorData{ border: 1px solid #3333ff; width: 90%; margin: 1em auto; text-align: center;}
|
|
table{width: 100%;border-collapse: collapse; border: 1px solid grey;}
|
|
tr:nth-child(even){background-color: silver;}
|
|
tr:nth-child(odd){background-color: lightgrey; }
|
|
td:nth-child(1){width:50%;text-align: left;}
|
|
td:nth-child(2),td:nth-child(3){width:25%; text-align: right;}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h1>Salatmaschine</h1>
|
|
<p><span id="version"></span><br><span id="uptime"></span><br><span id="trigger"></span></p>
|
|
<div id="sensorData">
|
|
<table>
|
|
<tr>
|
|
<th>Int wet</th>
|
|
<td id="duration_interval"> </td>
|
|
<td id="dry_time_left"> </td>
|
|
</tr>
|
|
<tr>
|
|
<th>H2O</th>
|
|
<td id="max_water"> </td>
|
|
<td id="wet_time_left"> </td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th>Int dry</th>
|
|
<td id="moisture_interval"> </td>
|
|
<td id="dry_since"> </td>
|
|
</tr>
|
|
<tr>
|
|
<th>Hum %</th>
|
|
<td id="min_moisture"> </td>
|
|
<td id="sensor_moisture_value"> </td>
|
|
</tr>
|
|
<tr>
|
|
<th>Temp</th>
|
|
<td> </td>
|
|
<td id="temp0"> </td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="3" id="message"> </td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<a href= "/?waterNow=1"><button class= "button button2">WASSER MARSCH</button></a>
|
|
|
|
<a href= "/?waterMore=1"><button class= "button button1">Wasser +1s</button></a>
|
|
<a href= "/?waterLess=1"><button class= "button button1">Wasser -1s</button></a>
|
|
<a href= "/?intMore=1"><button class= "button">Intervall +1min</button></a>
|
|
<a href= "/?intLess=1"><button class= "button">Intervall -1min</button></a>
|
|
|
|
|
|
<a href= "/?resetAll=1"><button class= "button button3" onclick="confirm('Echt? Really? Wirklich?!');">Reset auf Standardwerte</button></a>
|
|
<a href= "/?resetArduino=1"><button class= "button button3" onclick="confirm('Echt? Really? WIRKLICH?!');">Reset Arduino</button></a>
|
|
|
|
|
|
<script>
|
|
setInterval(function() {
|
|
// Call a function repetatively with x Second interval
|
|
getData();
|
|
}, 1000); //x*1000mSeconds update rate
|
|
function getData(){
|
|
var getSensorData = new XMLHttpRequest();
|
|
getSensorData.onreadystatechange = function(){
|
|
if(this.readyState == 4 && this.status == 200){
|
|
//console.log(this.responseText);
|
|
const obj = JSON.parse(this.responseText);
|
|
//console.log(obj);
|
|
let uptime;
|
|
let suffix = 's';
|
|
if(obj.uptime>86400){
|
|
uptime = obj.uptime / 86400;
|
|
suffix = 'd';
|
|
}else if(obj.uptime>3600){
|
|
uptime = obj.uptime / 3600;
|
|
suffix = 'h';
|
|
}else if(obj.uptime>60){
|
|
uptime = obj.uptime / 60;
|
|
suffix = 'm';
|
|
}else{
|
|
uptime = obj.uptime;
|
|
}
|
|
uptime = Math.round(uptime) + suffix;
|
|
document.getElementById("version").innerHTML = 'v'+obj.version;
|
|
document.getElementById("trigger").innerHTML = obj.trigger;
|
|
document.getElementById("uptime").innerHTML = 'uptime '+uptime;
|
|
document.getElementById("duration_interval").innerHTML = Math.round(obj.duration_interval / 1000);
|
|
document.getElementById("dry_time_left").innerHTML = Math.round(obj.dry_time_left / 1000);
|
|
document.getElementById("max_water").innerHTML = Math.round(obj.max_water / 1000);
|
|
document.getElementById("wet_time_left").innerHTML = Math.round(obj.wet_time_left / 1000);
|
|
|
|
document.getElementById("dry_since").innerHTML = Math.round(obj.dry_since / 1000);
|
|
document.getElementById("min_moisture").innerHTML = obj.min_moisture;
|
|
document.getElementById("sensor_moisture_value").innerHTML = obj.sensor_moisture_value;
|
|
document.getElementById("temp0").innerHTML = obj.temp0;
|
|
document.getElementById("message").innerHTML = obj.message;
|
|
console.log('got Data');
|
|
|
|
}
|
|
}
|
|
getSensorData.open("GET", "/?readData=1", true);
|
|
getSensorData.send();
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
)***";
|