|
805
|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
|
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
|
3 <html xmlns="http://www.w3.org/1999/xhtml">
|
|
|
4 <head>
|
|
|
5 <title>front door</title>
|
|
|
6 <link rel="Stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/ui-lightness/jquery-ui.css" media="all"/>
|
|
|
7 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
|
|
|
8 <style type="text/css" media="all">
|
|
|
9 /* <![CDATA[ */
|
|
|
10 #message, #lastLine {
|
|
|
11 background: #C5F180; color: #0A08A2; font-weight: bold;
|
|
|
12 font-family: monospace;
|
|
|
13 }
|
|
|
14 section {
|
|
|
15 background: none repeat scroll 0 0 #E1E1DF;
|
|
|
16 border: 1px solid #595555;
|
|
|
17 float: left;
|
|
822
|
18 margin: 5px;
|
|
|
19 padding: 10px;
|
|
805
|
20 }
|
|
|
21 /* ]]> */
|
|
|
22 </style>
|
|
|
23 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
|
|
|
24 </head>
|
|
|
25 <body>
|
|
|
26 <section>
|
|
|
27 <h1>lcd</h1>
|
|
|
28 <div>
|
|
|
29 set message:
|
|
|
30 <div>
|
|
|
31 <textarea cols="21" rows="7" id="message"/>
|
|
|
32 </div>
|
|
|
33 </div>
|
|
|
34 <div>
|
|
|
35 backlight:
|
|
|
36 <div id="backlightSlider" style="width: 300px;"/>
|
|
|
37 </div>
|
|
|
38 </section>
|
|
|
39 <section>
|
|
|
40 <h1>temperature</h1>
|
|
|
41 <div>Current: <span id="temperature"/>
|
|
|
42 <button id="getTemperature">refresh</button>
|
|
|
43 </div>
|
|
|
44 </section>
|
|
|
45 <section>
|
|
|
46 <h1>door</h1>
|
|
|
47 <div>Current: <span id="door"/>
|
|
|
48 <button id="getDoor">refresh</button>
|
|
|
49 </div>
|
|
|
50 </section>
|
|
822
|
51 <section>
|
|
|
52 <h1>yard light</h1>
|
|
|
53 <div>Current: <span id="yardLight"/>
|
|
|
54 <button id="toggleYardLight">toggle</button>
|
|
|
55 </div>
|
|
|
56 </section>
|
|
|
57
|
|
805
|
58 <script type="text/javascript">
|
|
|
59 // <![CDATA[
|
|
|
60 $(function () {
|
|
|
61
|
|
|
62 $.get("lcd", function (data){ $("#message").val(data) });
|
|
|
63 $("#message").keyup(function() {
|
|
|
64 $.ajax({
|
|
|
65 type: "PUT",
|
|
|
66 url: "lcd",
|
|
|
67 data: $("#message").val()
|
|
|
68 });
|
|
|
69 });
|
|
|
70
|
|
|
71 $.getJSON("lcd/backlight", function (data) {
|
|
|
72 $("#backlightSlider").slider({value: data.backlight});
|
|
|
73 });
|
|
|
74 $("#backlightSlider").slider({
|
|
|
75 min: 0, max: 255,
|
|
|
76 slide: function (ev, ui) {
|
|
|
77 $.post("lcd/backlight", {brightness: ui.value});
|
|
|
78 }});
|
|
|
79
|
|
|
80 function getTemperature() {
|
|
|
81 $.get("temperature", function (data) {
|
|
|
82 $("#temperature").text(data);
|
|
|
83 });
|
|
|
84 }
|
|
|
85 getTemperature();
|
|
|
86 $("#getTemperature").click(getTemperature);
|
|
|
87
|
|
|
88 function getDoor() {
|
|
|
89 $.get("door", function (x) { $("#door").text(x) });
|
|
|
90 }
|
|
|
91 getDoor();
|
|
|
92 $("#getDoor").click(getDoor);
|
|
|
93
|
|
822
|
94 function refreshYardLight() {
|
|
|
95 $.getJSON("yardLight", function (data) {
|
|
|
96 $("#yardLight").text(data.yardLight);
|
|
|
97 });
|
|
|
98 }
|
|
|
99 refreshYardLight();
|
|
|
100 $("#toggleYardLight").click(function () {
|
|
|
101 $.getJSON("yardLight", function (data) {
|
|
|
102 $.ajax({
|
|
|
103 type: "PUT",
|
|
|
104 url: "yardLight",
|
|
|
105 data: JSON.stringify(!data.yardLight),
|
|
|
106 success: refreshYardLight
|
|
|
107 });
|
|
|
108 });
|
|
|
109 });
|
|
805
|
110 });
|
|
|
111 // ]]>
|
|
|
112 </script>
|
|
|
113 </body>
|
|
|
114 </html>
|
