97 lines
3.6 KiB
HTML
97 lines
3.6 KiB
HTML
|
<!--
|
||
|
|
FSWebServer - Example Index Page
|
||
|
|
Copyright (c) 2015 Hristo Gochkov. All rights reserved.
|
||
|
|
This file is part of the WebServer library for Arduino environment.
|
||
|
|
|
||
|
|
This library is free software; you can redistribute it and/or
|
||
|
|
modify it under the terms of the GNU Lesser General Public
|
||
|
|
License as published by the Free Software Foundation; either
|
||
|
|
version 2.1 of the License, or (at your option) any later version.
|
||
|
|
This library is distributed in the hope that it will be useful,
|
||
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
||
|
|
Lesser General Public License for more details.
|
||
|
|
You should have received a copy of the GNU Lesser General Public
|
||
|
|
License along with this library; if not, write to the Free Software
|
||
|
|
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
|
||
|
|
-->
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||
|
|
<title>ESP Monitor</title>
|
||
|
|
<script type="text/javascript" src="graphs.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var heap,temp,digi;
|
||
|
|
var reloadPeriod = 1000;
|
||
|
|
var running = false;
|
||
|
|
|
||
|
|
function loadValues(){
|
||
|
|
if(!running) return;
|
||
|
|
var xh = new XMLHttpRequest();
|
||
|
|
xh.onreadystatechange = function(){
|
||
|
|
if (xh.readyState == 4){
|
||
|
|
if(xh.status == 200) {
|
||
|
|
var res = JSON.parse(xh.responseText);
|
||
|
|
heap.add(res.heap);
|
||
|
|
temp.add(res.analog);
|
||
|
|
digi.add(res.gpio);
|
||
|
|
if(running) setTimeout(loadValues, reloadPeriod);
|
||
|
|
} else running = false;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
xh.open("GET", "/all", true);
|
||
|
|
xh.send(null);
|
||
|
|
};
|
||
|
|
|
||
|
|
function run(){
|
||
|
|
if(!running){
|
||
|
|
running = true;
|
||
|
|
loadValues();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function onBodyLoad(){
|
||
|
|
var refreshInput = document.getElementById("refresh-rate");
|
||
|
|
refreshInput.value = reloadPeriod;
|
||
|
|
refreshInput.onchange = function(e){
|
||
|
|
var value = parseInt(e.target.value);
|
||
|
|
reloadPeriod = (value > 0)?value:0;
|
||
|
|
e.target.value = reloadPeriod;
|
||
|
|
}
|
||
|
|
var stopButton = document.getElementById("stop-button");
|
||
|
|
stopButton.onclick = function(e){
|
||
|
|
running = false;
|
||
|
|
}
|
||
|
|
var startButton = document.getElementById("start-button");
|
||
|
|
startButton.onclick = function(e){
|
||
|
|
run();
|
||
|
|
}
|
||
|
|
|
||
|
|
// Example with 10K thermistor
|
||
|
|
//function calcThermistor(v) {
|
||
|
|
// var t = Math.log(((10230000 / v) - 10000));
|
||
|
|
// t = (1/(0.001129148+(0.000234125*t)+(0.0000000876741*t*t*t)))-273.15;
|
||
|
|
// return (t>120)?0:Math.round(t*10)/10;
|
||
|
|
//}
|
||
|
|
//temp = createGraph(document.getElementById("analog"), "Temperature", 100, 128, 10, 40, false, "cyan", calcThermistor);
|
||
|
|
|
||
|
|
temp = createGraph(document.getElementById("analog"), "Analog Input", 100, 128, 0, 1023, false, "cyan");
|
||
|
|
heap = createGraph(document.getElementById("heap"), "Current Heap", 100, 125, 0, 30000, true, "orange");
|
||
|
|
digi = createDigiGraph(document.getElementById("digital"), "GPIO", 100, 146, [0, 4, 5, 16], "gold");
|
||
|
|
run();
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body id="index" style="margin:0; padding:0;" onload="onBodyLoad()">
|
||
|
|
<div id="controls" style="display: block; border: 1px solid rgb(68, 68, 68); padding: 5px; margin: 5px; width: 362px; background-color: rgb(238, 238, 238);">
|
||
|
|
<label>Period (ms):</label>
|
||
|
|
<input type="number" id="refresh-rate"/>
|
||
|
|
<input type="button" id="start-button" value="Start"/>
|
||
|
|
<input type="button" id="stop-button" value="Stop"/>
|
||
|
|
</div>
|
||
|
|
<div id="heap"></div>
|
||
|
|
<div id="analog"></div>
|
||
|
|
<div id="digital"></div>
|
||
|
|
</body>
|
||
|
|
</html>
|