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>