1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<html><head><title>Door Control</title>
<meta id='viewport' name='viewport' content='width=160; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;'>
<style>
body {background-color:#bbb;font-family:'Verdana',sans-serif}
h2 {line-height:50%;}
h3 {line-height:5%;}
.page {text-align:center;}
.centred-table,.dobutton {text-align:center;margin-left:auto;margin-right:auto;}
.button {padding-bottom:5px;}
.dobutton {height:50px;width:200px;}
.unlockedlabel,.openlabel,.closedlabel,.statelabel {background-color:#a5a5a5;padding:3px;border-radius:4px;}
.lockedlabel {visibility:hidden;}
.unlockedlabel {background-color:#55f;}
.openlabel {background-color:#f55;}
.closedlabel {background-color:#5f5;}
</style>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#fda').click(function(){$.post('do', {frontdoor: 1});});
$('#gd1a').click(function(){$.post('do', {garagedoor1: 1});});
$('#gd2a').click(function(){$.post('do', {garagedoor2: 1});});
updateStatus();
});
function updateStatus() {
$.getJSON('json', function(data) {
$.each(data, function(key, val) {
$('#' + key).attr('class', val + 'label');
});
setTimeout(updateStatus, 1000);
});
}
</script>
</head>
<body>
<div class=page>
<h2>15 Park Lane</h2>
<h3>Door Control</h3>
<table class=centred-table>
<tr>
<td><div id=fdo class=statelabel>Open</div></td>
<td><div id=fdu class=lockedlabel>Unlocked</div></td>
<td><div id=fdc class=statelabel>Closed</div></td>
</tr>
<tr>
<td colspan=3><div class=button><input type=button class=dobutton id=fda value='Front Door' /></div></td>
</tr>
<tr>
<td><div id=gd1o class=statelabel>Open</div></td>
<td></td>
<td><div id=gd1c class=statelabel>Closed</div></td>
</tr>
<tr>
<td colspan=3><div class=button><input type=button class=dobutton id=gd1a value='Garage Door 1' /></div></td>
</tr>
<tr>
<td><div id=gd2o class=statelabel>Open</div></td>
<td></td>
<td><div id=gd2c class=statelabel>Closed</div></td>
</tr>
<tr>
<td colspan=3><div class=button><input type=button class=dobutton id=gd2a value='Garage Door 2' /></div></td>
</tr>
</table>
</div>
</body>
</html>
|
