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