480
|
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> |