|
0
|
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;
|
|
|
18 margin: 20px;
|
|
|
19 padding: 20px;
|
|
|
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>
|
|
|
51 <script type="text/javascript">
|
|
|
52 // <![CDATA[
|
|
|
53 $(function () {
|
|
|
54
|
|
|
55 $.get("lcd", function (data){ $("#message").val(data) });
|
|
|
56 $("#message").keyup(function() {
|
|
|
57 $.ajax({
|
|
|
58 type: "PUT",
|
|
|
59 url: "lcd",
|
|
|
60 data: $("#message").val()
|
|
|
61 });
|
|
|
62 });
|
|
|
63
|
|
|
64 $.getJSON("lcd/backlight", function (data) {
|
|
|
65 $("#backlightSlider").slider({value: data.backlight});
|
|
|
66 });
|
|
|
67 $("#backlightSlider").slider({
|
|
|
68 min: 0, max: 255,
|
|
|
69 slide: function (ev, ui) {
|
|
|
70 $.post("lcd/backlight", {brightness: ui.value});
|
|
|
71 }});
|
|
|
72
|
|
|
73 function getTemperature() {
|
|
|
74 $.get("temperature", function (data) {
|
|
|
75 $("#temperature").text(data);
|
|
|
76 });
|
|
|
77 }
|
|
|
78 getTemperature();
|
|
|
79 $("#getTemperature").click(getTemperature);
|
|
|
80
|
|
|
81 function getDoor() {
|
|
|
82 $.get("door", function (x) { $("#door").text(x) });
|
|
|
83 }
|
|
|
84 getDoor();
|
|
|
85 $("#getDoor").click(getDoor);
|
|
|
86
|
|
|
87 });
|
|
|
88 // ]]>
|
|
|
89 </script>
|
|
|
90 </body>
|
|
|
91 </html>
|
