Mercurial > templog
comparison web/views/button1.htm @ 181:1731a27bcdd2
prototype
author | Matt Johnston <matt@ucc.asn.au> |
---|---|
date | Mon, 03 Feb 2014 00:08:59 +0800 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
180:15ebb9de5049 | 181:1731a27bcdd2 |
---|---|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> | |
3 <head> | |
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
5 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=8,minimum-scale=0.1"> | |
6 <style type="text/css"><!-- | |
7 | |
8 span.no_selection { | |
9 -webkit-user-select: none; // webkit (safari, chrome) browsers | |
10 -moz-user-select: none; // mozilla browsers | |
11 -khtml-user-select: none; // webkit (konqueror) browsers | |
12 } | |
13 | |
14 body { | |
15 font-family: "sans-serif"; | |
16 } | |
17 | |
18 input { | |
19 border: 2px solid transparent; | |
20 border-radius: 4px; | |
21 background-color: white; | |
22 border-color: black; | |
23 padding: 0; | |
24 font-size: 80%; | |
25 } | |
26 | |
27 input[type="button"] { | |
28 width: 4em; | |
29 height: 4em; | |
30 margin-left: 0.5em; | |
31 } | |
32 | |
33 input[type="submit"] { | |
34 width: 10em; | |
35 height: 4em; | |
36 margin-top: 1em; | |
37 align: center; | |
38 } | |
39 | |
40 input[type="text"] { | |
41 height: 4em; | |
42 text-align: center; | |
43 } | |
44 | |
45 .onbutton { | |
46 background-color: #cdf; | |
47 } | |
48 | |
49 .existing { | |
50 margin-top: 1em; | |
51 font-size: 70%; | |
52 } | |
53 | |
54 //--> | |
55 </style> | |
56 <title></title> | |
57 </head> | |
58 | |
59 <!-- Click on the graph to zoom in, click on the Y axis labels to zoom out --> | |
60 | |
61 <script> | |
62 | |
63 var down_re = /^down_/; | |
64 var up_re = /^up_/; | |
65 var yes_re = /^yes_/; | |
66 var no_re = /^no_/; | |
67 | |
68 function change_value() { | |
69 var el = event.target; | |
70 var dir = 1; | |
71 if (down_re.test(el.name)) | |
72 { | |
73 var sect = el.name.replace(down_re, ''); | |
74 dir = -1; | |
75 | |
76 } | |
77 if (up_re.test(el.name)) | |
78 { | |
79 var sect = el.name.replace(up_re, ''); | |
80 } | |
81 | |
82 var textbox = document.getElementById("input_" + sect); | |
83 var amount = 0.1; | |
84 if (sect == "overshoot_delay") | |
85 { | |
86 amount = 60; | |
87 } | |
88 | |
89 var val = Number(textbox.value); | |
90 textbox.value = val + (dir*amount); | |
91 } | |
92 | |
93 function toggle() | |
94 { | |
95 var el = event.target; | |
96 if (yes_re.test(el.name)) | |
97 { | |
98 var sect = el.name.replace(yes_re, ''); | |
99 var val = "1"; | |
100 } | |
101 if (no_re.test(el.name)) | |
102 { | |
103 var sect = el.name.replace(no_re, ''); | |
104 var val = "0"; | |
105 } | |
106 | |
107 var hidden = document.getElementById("input_" + sect); | |
108 hidden.value = val; | |
109 | |
110 update_button(sect); | |
111 } | |
112 | |
113 function update_button(sect) | |
114 { | |
115 var hidden = document.getElementById("input_" + sect); | |
116 var yesbutton = document.getElementById("yes_" + sect); | |
117 var nobutton = document.getElementById("no_" + sect); | |
118 yesbutton.className = yesbutton.className.replace("onbutton", ""); | |
119 nobutton.className = nobutton.className.replace("onbutton", ""); | |
120 if (hidden.value == "1") | |
121 { | |
122 yesbutton.className = yesbutton.className + " onbutton"; | |
123 } | |
124 else | |
125 { | |
126 nobutton.className = nobutton.className + " onbutton"; | |
127 } | |
128 } | |
129 | |
130 function start() | |
131 { | |
132 update_button("enabled"); | |
133 update_button("wortonly"); | |
134 } | |
135 | |
136 </script> | |
137 | |
138 <body onload="start()"> | |
139 <form action="" method="get"> | |
140 | |
141 <div> | |
142 <span class="existing">Temperature <span id="existing_fridge_setpoint">20.2</span>º</span> | |
143 <br/> | |
144 <input type="text" id="input_fridge_setpoint" name="input_fridge_setpoint" value="20.2"/> | |
145 <input type="button" name="down_fridge_setpoint" value="-" onclick="change_value()"/> | |
146 <input type="button" name="up_fridge_setpoint" value="+" onclick="change_value()"/> | |
147 </div> | |
148 | |
149 <div> | |
150 <span class="existing">Enabled <span id="existing_enabled">Yes</span></span> | |
151 <br/> | |
152 <input type="hidden" id="input_enabled" name="input_enabled" value="0"/> | |
153 <input type="button" id="no_enabled" name="no_enabled" value="No" onclick="toggle()"/> | |
154 <input type="button" id="yes_enabled" name="yes_enabled" value="Yes" onclick="toggle()"/> | |
155 </div> | |
156 | |
157 <div> | |
158 <span class="existing">Wort Only <span id="existing_wortonly">Yes</span></span> | |
159 <br/> | |
160 <input type="hidden" id="input_wortonly" name="input_wortonly" value="0"/> | |
161 <input type="button" id="no_wortonly" name="no_wortonly" value="No" onclick="toggle()"/> | |
162 <input type="button" id="yes_wortonly" name="yes_wortonly" value="Yes" onclick="toggle()"/> | |
163 </div> | |
164 | |
165 <div> | |
166 <span class="existing">Allowed difference <span id="existing_fridge_difference">0.2</span>º</span> | |
167 <br/> | |
168 <input type="text" id="input_fridge_difference" name="input_fridge_difference" value="0.2"/> | |
169 <input type="button" name="down_fridge_difference" value="-" onclick="change_value()"/> | |
170 <input type="button" name="up_fridge_difference" value="+" onclick="change_value()"/> | |
171 </div> | |
172 | |
173 <div> | |
174 <span class="existing">Overshoot factor<span id="existing_overshoot_factor">0.5</span></span> | |
175 <br/> | |
176 <input type="text" id="input_overshoot_factor" name="input_overshoot_factor" value="0.5"/> | |
177 <input type="button" name="down_overshoot_factor" value="-" onclick="change_value()"/> | |
178 <input type="button" class="onbutton" name="up_overshoot_factor" value="+" onclick="change_value()"/> | |
179 </div> | |
180 | |
181 <div> | |
182 <span class="existing">Overshoot delay<span id="existing_overshoot_delay">0.5</span></span> | |
183 <br/> | |
184 <input type="text" id="input_overshoot_delay" name="input_overshoot_delay" value="0.5"/> | |
185 <input type="button" name="down_overshoot_delay" value="-"/> | |
186 <input type="button" name="up_overshoot_delay" value="+"/> | |
187 </div> | |
188 | |
189 <div> | |
190 <input type="submit" name="go" value="Go"/> | |
191 </div> | |
192 | |
193 </form> | |
194 </body> | |
195 </html> |