<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<style>
</style>
<script \'text/javascript\'>
var data;
var ip=\'your ip address\'
var webSocket;
function ws() {
webSocket = new WebSocket("ws://"+ip+":9000");
webSocket.onmessage = function(e) {
parseData(e.data);
}
webSocket.onclose= function(){
setTimeout(ws(),5000);
}
}
function parseData(info) {
var data= info;
//run through the result
if(data!=null)
for(x=0;x<data.length;x++){
//read status and changed text of button
var status = data[x]==1? $(\'#input_\'+x.toString()).data(\'text_true\'):$(\'#input_\'+x.toString()).data(\'text_false\');
$(\'#input_\'+x.toString()+\' .ui-btn-text\').html(status);
//color the buttons
if(data[x]==\'1\')
$(\'#input_\' +x.toString() ).css("color", $(\'#input_\'+x.toString()).data("textcolortrue"));
if(data[x]==\'0\')
$(\'#input_\' +x.toString() ).css("color", $(\'#input_\'+x.toString()).data("textcolorfalse"));
}
}
$(document).ready(function(){
ws();
//bind all content with id containing \'input\' to click events
$("[id^=\'input\']").bind("click", function (event, ui) {
//we are sending the output number we want to toggle. we grab this from the
// $(this).data(\'command\')
webSocket.send($(this).data(\'command\'));
});
});
</script>
</head>
<body data-ajax=\'false\'>
<div data-role=\'page\' class="ui-responsive-panel" data-ajax=\'false\'>
<div data-role=\'content\'>
<div id=\'mh\'>
<h3>
<label style="position:relative; top:15px;" for=\'Porch_Light_Status\'>Porch Light:</label>
<div class="ui-li-aside" data-theme="a" data-inline="true" data-role="button"
id="input_0" name=\'Porch_Light_Status\'
style="text-align:center;width:100px;height:40px;margin-left:8px" data-command="0"
data-text_true="On" data-text_false="Off"
data-textcolorfalse="Gray" data-textcolorTrue="Yellow">
<img height=\'15px\' width=\'15px\' src=\'scripts/ajax-loader.gif\' />
</div>
</h3></br>
<h3>
<label style="position:relative; top:15px;" for=\'Entryway_Light_Status\'>Entryway Light:</label>
<div class="ui-li-aside" data-theme="a" data-inline="true" data-role="button"
id="input_1" name=\'Entryway_Light_Status\'
style="text-align:center;width:100px;height:40px" data-command="1"
data-text_true="On" data-text_false="Off"
data-textcolorfalse="Gray" data-textcolorTrue="Yellow">
<img height=\'15px\' width=\'15px\' src=\'/scripts/ajax-loader.gif\' />
</div>
</h3>
</div>
</div>
</body>
</html>