BobBurns/client.html

## client.html
<!DOCTYPE html>
<!-- put this in your /var/www/ folder -->
<!-- see wsds.php for server/client commands -->
<html>
  <head>
    <title>Web Socket Device</title>
  </head>
  <body onunload="sendClose()">   <!-- doesn't work with Safari -->
  <h1>Web Socket Device Fun<br></h1>
  <h2><p id="temp"></p></h2>
  <h2 id="oven"></h2>
  <h2 id="hum"></h2>

  <button onclick="incH()"> + </button>
  <button onclick="decH()"> - </button>
  <p id="t">Log: </p>

  <button onclick="sendClose()">Close Connection</button>

  </body>
  <script>
  var socket;
  var host = "ws://yo.ur.ip.here:2342/sockettest";
  try {
    socket = new WebSocket(host);
    socket.binaryType = 'blob';
    log(socket.readyState);
    socket.onopen = function(msg) {
      log(this.readyState);
      };
    socket.onmessage = function(msg) {
      if (msg.data instanceof(Blob)) {
        var reader = new FileReader();
        reader.onload = function() {
          var arrayBuffer = reader.result;
          var byteview = new Uint8Array(arrayBuffer);
          switch (byteview[0]) {
            case 0xA0:
              if (byteview[1] == 0x01) ovenon("on");
              else ovenon("off");
              break;
            case 0xA1:
              change = byteview[2];
              logtemp(300+change);
              break;
            case 0xA2:
              logHumidity(byteview[2]);
              break;
          }
        };
        reader.readAsArrayBuffer(msg.data);
      }
    };
    socket.onclose = function(msg) {
            log(this.readyState);
      };
  }
  catch(ex) {
    log(ex);
  }

  function sendClose() {
    if (socket.readyState == 1) {
      var buffer = new ArrayBuffer(2);
      var message = new Uint8Array(buffer);
      message[0] = 0x00;
      message[1] = 0x00;
      socket.send(message);
    }
  }

  function incH() {
    if (socket.readyState == 1) {
      var buffer = new ArrayBuffer(3);
      var message = new Uint8Array(buffer);
      message[0] = 0x13;                //inc bus 1 dev A
      message[1] = 0x00;
      message[2] = 0x05;
      socket.send(message);
    }
  }

  function decH() {
    if (socket.readyState == 1) {
      var buffer = new ArrayBuffer(3);
      var message = new Uint8Array(buffer);
      message[0] = 0x14;                //dec bus 1 dev A
      message[1] = 0x00;
      message[2] = 0x05;
      socket.send(message);
    }
  }
  function $(id) { return document.getElementById(id); }
  function log(msg) { $("t").innerHTML="<br>Status: "+msg; }
  function logtemp(temp) { $("temp").innerHTML="Oven Temp: "+temp+"F "; }
  function logHumidity(val) { $("hum").innerHTML="Humidity: "+val+"%"; }
  function ovenon(val) { $("oven").innerHTML="Light "+val; }
  </script>
</html>
	<!DOCTYPE html>
	<!-- put this in your /var/www/ folder -->
	<!-- see wsds.php for server/client commands -->
	<html>
	<head>
	<title>Web Socket Device</title>
	</head>
	<body onunload="sendClose()"> <!-- doesn't work with Safari -->
	<h1>Web Socket Device Fun<br></h1>
	<h2><p id="temp"></p></h2>
	<h2 id="oven"></h2>
	<h2 id="hum"></h2>

	<button onclick="incH()"> + </button>
	<button onclick="decH()"> - </button>
	<p id="t">Log: </p>

	<button onclick="sendClose()">Close Connection</button>

	</body>
	<script>
	var socket;
	var host = "ws://yo.ur.ip.here:2342/sockettest";
	try {
	socket = new WebSocket(host);
	socket.binaryType = 'blob';
	log(socket.readyState);
	socket.onopen = function(msg) {
	log(this.readyState);
	};
	socket.onmessage = function(msg) {
	if (msg.data instanceof(Blob)) {
	var reader = new FileReader();
	reader.onload = function() {
	var arrayBuffer = reader.result;
	var byteview = new Uint8Array(arrayBuffer);
	switch (byteview[0]) {
	case 0xA0:
	if (byteview[1] == 0x01) ovenon("on");
	else ovenon("off");
	break;
	case 0xA1:
	change = byteview[2];
	logtemp(300+change);
	break;
	case 0xA2:
	logHumidity(byteview[2]);
	break;
	}
	};
	reader.readAsArrayBuffer(msg.data);
	}
	};
	socket.onclose = function(msg) {
	log(this.readyState);
	};
	}
	catch(ex) {
	log(ex);
	}

	function sendClose() {
	if (socket.readyState == 1) {
	var buffer = new ArrayBuffer(2);
	var message = new Uint8Array(buffer);
	message[0] = 0x00;
	message[1] = 0x00;
	socket.send(message);
	}
	}

	function incH() {
	if (socket.readyState == 1) {
	var buffer = new ArrayBuffer(3);
	var message = new Uint8Array(buffer);
	message[0] = 0x13; //inc bus 1 dev A
	message[1] = 0x00;
	message[2] = 0x05;
	socket.send(message);
	}
	}

	function decH() {
	if (socket.readyState == 1) {
	var buffer = new ArrayBuffer(3);
	var message = new Uint8Array(buffer);
	message[0] = 0x14; //dec bus 1 dev A
	message[1] = 0x00;
	message[2] = 0x05;
	socket.send(message);
	}
	}
	function $(id) { return document.getElementById(id); }
	function log(msg) { $("t").innerHTML="<br>Status: "+msg; }
	function logtemp(temp) { $("temp").innerHTML="Oven Temp: "+temp+"F "; }
	function logHumidity(val) { $("hum").innerHTML="Humidity: "+val+"%"; }
	function ovenon(val) { $("oven").innerHTML="Light "+val; }
	</script>
	</html>