Flo
/
WiFiSwitch


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
							<html><body>
  <h1><span id='devname'></span></h1>
  <h3>WiFi Switch</h3>  
  <form id='BtnFrm1'><input type='hidden' name='Btn1' value='1'></form>
  <form id='BtnFrm2'><input type='hidden' name='Btn2' value='1'></form>
  <form id='BtnFrm3'><input type='hidden' name='Btn3' value='1'></form>
  <form id='AllOnFrm'><input type='hidden' name='allOn' value='1'></form>
  <form id='AllOffFrm'><input type='hidden' name='allOff' value='1'></form>
  <input type='button' value='All ON' id='allOn' onclick='return sendAllOn()'/><input type='button' value='All OFF' id='allOff' onclick='return sendAllOff()'/>
  <div style='font-size:xx-large'>
  <div id='sw1div' style='display:none'>1: <input type='button' id='tbtn1' onclick='return sendBtn(1)'/><br></div>
  <div id='sw2div' style='display:none'>2: <input type='button' id='tbtn2' onclick='return sendBtn(2)'/><br></div>
  <div id='sw3div' style='display:none'>3: <input type='button' id='tbtn3' onclick='return sendBtn(3)'/><br></div>
  </div>
  <br>  
  <br>
  WiFi connected to <i><span id='ssid'></span></i>.<br>
  <h6>Last update 
  <span id='ut'></span> seconds ago. 
  <span id='status'></span>
  </h6>
  <br>
  <a href='/wifi.htm'>WiFi settings</a><br>
  <a href='/confhw'>Hardware configuration</a><br>
  <a href='/conf'>Base configuration</a><br>
  <a href='/conf2'>Extended configuration</a><br>
  <a href='/update'>Firmware update</a><br>
  <a href='/restart'>Restart</a>
  <script>
  function g(i) { return document.getElementById(i) };
  var xhttp, updateTime, reqTime, reqFin;
  var textA = 'OFF';
  var textE = 'ON';
  
  function sendBtn(btn) {
  var frmn='BtnFrm'+btn;
  var form = g(frmn);
  return transmit(form);
  }
  
  function sendAllOn() {
  return transmit(g('AllOnFrm'));
  }
  function sendAllOff() {
  return transmit(g('AllOffFrm'));
  }
  
  function transmit(f) {
    if (!xhttp) { 
      g('status').innerHTML = 'loading...';
      reqTime = 0;
      reqFin = false;
      xhttp = new XMLHttpRequest();
      xhttp.timeout = 2000;
      xhttp.open('POST', 'api');
      xhttp.send(f ? (new FormData(f)) : '');
      xhttp.onreadystatechange = function () {
        if (xhttp.readyState === XMLHttpRequest.DONE && xhttp.status === 200) {
          var data = JSON.parse(xhttp.responseText);
          g('ssid').innerHTML = data.ssid;
          if(data.devname != undefined) g('devname').innerHTML = data.devname;
          if(data.swState1 != undefined) g('sw1div').style.display='inline';
          else g('sw1div').style.display='none';
     if(data.swState2 != undefined) g('sw2div').style.display='inline';
          else g('sw2div').style.display='none';
          if(data.swState3 != undefined) g('sw3div').style.display='inline';
          else g('sw3div').style.display='none';
          if(data.swState1 == '1') g('tbtn1').value = textE;
          else g('tbtn1').value = textA;
          if(data.swState2 == '1') g('tbtn2').value = textE;
          else g('tbtn2').value = textA;
          if(data.swState3 == '1') g('tbtn3').value = textE;
          else g('tbtn3').value = textA;
          xhttp = null;
          updateTime = 0;
          reqFin = true;
          }
        else {
          if(!reqFin && reqTime > 10) {
            xhttp = null;
            reqFin = true;
          }
        }
      }
    }
    return false;
  }
  transmit();
  setInterval(function () { g('ut').innerHTML = ++updateTime; ++reqTime; }, 1000);
  setInterval(transmit, 5000);
</script>
</body></html>