70 lines
1.7 KiB
C
70 lines
1.7 KiB
C
const char MAIN_page[] PROGMEM = R"=====(
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<style>
|
|
.card{
|
|
max-width: 400px;
|
|
min-height: 250px;
|
|
background: #02b875;
|
|
padding: 30px;
|
|
box-sizing: border-box;
|
|
color: #FFF;
|
|
margin:20px;
|
|
box-shadow: 0px 2px 18px -4px rgba(0,0,0,0.75);
|
|
}
|
|
</style>
|
|
<body>
|
|
|
|
<div class="card">
|
|
<h4>The Particle interface</h4><br>
|
|
<h2>Vueltas:<span id="turnsValue">0</span></h2><br>
|
|
<h2>Rpm:<span id="rpmValue">0</span></h2><br>
|
|
<h2>Fps:<span id="fpsValue">0</span></h2><br>
|
|
<br>The Particle</a>
|
|
</div>
|
|
<script>
|
|
|
|
setInterval(function() {
|
|
// Call a function repetatively with 2 Second interval
|
|
getData();
|
|
getData1();
|
|
getData2();
|
|
}, 10); //10mSeconds update rate
|
|
|
|
function getData() {
|
|
var xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
document.getElementById("turnsValue").innerHTML = this.responseText;
|
|
}
|
|
};
|
|
xhttp.open("GET", "readTurns", true);
|
|
xhttp.send();
|
|
}
|
|
|
|
function getData1() {
|
|
var xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
document.getElementById("fpsValue").innerHTML = this.responseText;
|
|
}
|
|
};
|
|
xhttp.open("GET", "readFps", true);
|
|
xhttp.send();
|
|
}
|
|
|
|
function getData2() {
|
|
var xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
document.getElementById("rpmValue").innerHTML = this.responseText;
|
|
}
|
|
};
|
|
xhttp.open("GET", "readRpm", true);
|
|
xhttp.send();
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
)====="; |