12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 |
- <!--
- 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>
|