MonitorSwitch_1B_HTML

<!--
   This code sends $.get request to MonitorSwitch.ino on the core

-->

<!DOCTYPE html>
<html>

<head>
	<title>Monitor Switch on SparkCore</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
	</script>
</head>

<body>

	<script>
	var sw1State;

//The setInterval() method will wait a specified number of milliseconds, and then execute a specified function,
//and it will continue to execute the function, once at every given time-interval.
window.setInterval(function(){MonitorSW1()},2000);

function MonitorSW1()
{
 $.get("https://api.spark.io/v1/devices/123456789123456789ABCD/sw1?access_token=123456789123456789ABCD",function(data,status)
    {
				sw1State = data;
		for (var prop in sw1State) {
			console.log(prop+" "+sw1State[prop]);
//			alert(prop +" "+ sw1State[prop]);
			}

		document.KettleState.text1.value = sw1State['result'];
		if(sw1State['result'])
			document.KettleOnOff.OnOff.value = "ON";
		else
			document.KettleOnOff.OnOff.value = "OFF";


    }).complete(function(){
//		alert("Data: " + sw1State['result']);
		return sw1State;
	});
}

function toggle(button) {
  if (document.KettleOnOff.OnOff.value == "OFF") {
    document.KettleOnOff.OnOff.value = "ON";
    $.post("https://api.spark.io/v1/devices/123456789123456789ABCD/led?access_token=123456789123456789ABCD",
    {
		args:"l1,HIGH"

    });

    $.post("https://api.spark.io/v1/devices/123456789123456789ABCD/state?access_token=123456789123456789ABCD",
    {
		args:"sw1,HIGH"

    });


  }
  else
  {
    document.KettleOnOff.OnOff.value = "OFF";
    $.post("https://api.spark.io/v1/devices/123456789123456789ABCD/led?access_token=123456789123456789ABCD",
    {
		args:"l1,LOW"

    });

     $.post("https://api.spark.io/v1/devices/123456789123456789ABCD/state?access_token=123456789123456789ABCD",
    {
		args:"sw1,LOW"

    });

  }
}

</script>

<form name="KettleState" id="Kettle">
<label for = "kettle">Kettle State</label>
<!--<name="KettleState" id="Kettle">-->
<INPUT type="text" id="text1" name="text1">
</form>

<form name="KettleLevel" id="KettleL">
<label for = "kettleL">Kettle Level</label>
<INPUT type="text" id="text1" name="text1">
</form>

<form name="KettleTemp" id="KettleT">
<label for = "kettleT">Kettle Temp</label>
<INPUT type="text" id="text1" name="text1">
</form>

<!--
<form name="KettleState" id="Kettle">
<INPUT type="text" id="text1" name="text1">
</form>


<form name="KettleLevel" id="KettleL">
<INPUT type="text" id="text1" name="text1">
</form>

<form name="KettleTemp" id="Kettle">
<INPUT type="text" id="text1" name="text1">
</form>
-->
<form name="KettleOnOff" id="KettButt">
<input type="button" id="OnOff" value="OFF" style="color:blue"
       onclick="toggle(this);">
</form>


</body>

</html>