mirror of
https://github.com/esp8266/Arduino.git
synced 2025-04-22 21:23:07 +03:00
2e6fe502a4
Serve files from the onboard flash Edit them with the included file manager (http://esp8266fs.local/edit) Create simple graphs filled with sensor data with the included simple library (example is the index page, editable through the editor) The sketch uses the new extension for packing files into SPIFFS image and uploading it to your ESP8266
100 lines
3.6 KiB
HTML
100 lines
3.6 KiB
HTML
<!--
|
|
FSWebServer - Example Index Page
|
|
|
|
Copyright (c) 2015 Hristo Gochkov. All rights reserved.
|
|
This file is part of the ESP8266WebServer 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> |