Mercurial > templog
view 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 |
line wrap: on
line source
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=8,minimum-scale=0.1"> <style type="text/css"><!-- span.no_selection { -webkit-user-select: none; // webkit (safari, chrome) browsers -moz-user-select: none; // mozilla browsers -khtml-user-select: none; // webkit (konqueror) browsers } body { font-family: "sans-serif"; } input { border: 2px solid transparent; border-radius: 4px; background-color: white; border-color: black; padding: 0; font-size: 80%; } input[type="button"] { width: 4em; height: 4em; margin-left: 0.5em; } input[type="submit"] { width: 10em; height: 4em; margin-top: 1em; align: center; } input[type="text"] { height: 4em; text-align: center; } .onbutton { background-color: #cdf; } .existing { margin-top: 1em; font-size: 70%; } //--> </style> <title></title> </head> <!-- Click on the graph to zoom in, click on the Y axis labels to zoom out --> <script> var down_re = /^down_/; var up_re = /^up_/; var yes_re = /^yes_/; var no_re = /^no_/; function change_value() { var el = event.target; var dir = 1; if (down_re.test(el.name)) { var sect = el.name.replace(down_re, ''); dir = -1; } if (up_re.test(el.name)) { var sect = el.name.replace(up_re, ''); } var textbox = document.getElementById("input_" + sect); var amount = 0.1; if (sect == "overshoot_delay") { amount = 60; } var val = Number(textbox.value); textbox.value = val + (dir*amount); } function toggle() { var el = event.target; if (yes_re.test(el.name)) { var sect = el.name.replace(yes_re, ''); var val = "1"; } if (no_re.test(el.name)) { var sect = el.name.replace(no_re, ''); var val = "0"; } var hidden = document.getElementById("input_" + sect); hidden.value = val; update_button(sect); } function update_button(sect) { var hidden = document.getElementById("input_" + sect); var yesbutton = document.getElementById("yes_" + sect); var nobutton = document.getElementById("no_" + sect); yesbutton.className = yesbutton.className.replace("onbutton", ""); nobutton.className = nobutton.className.replace("onbutton", ""); if (hidden.value == "1") { yesbutton.className = yesbutton.className + " onbutton"; } else { nobutton.className = nobutton.className + " onbutton"; } } function start() { update_button("enabled"); update_button("wortonly"); } </script> <body onload="start()"> <form action="" method="get"> <div> <span class="existing">Temperature <span id="existing_fridge_setpoint">20.2</span>º</span> <br/> <input type="text" id="input_fridge_setpoint" name="input_fridge_setpoint" value="20.2"/> <input type="button" name="down_fridge_setpoint" value="-" onclick="change_value()"/> <input type="button" name="up_fridge_setpoint" value="+" onclick="change_value()"/> </div> <div> <span class="existing">Enabled <span id="existing_enabled">Yes</span></span> <br/> <input type="hidden" id="input_enabled" name="input_enabled" value="0"/> <input type="button" id="no_enabled" name="no_enabled" value="No" onclick="toggle()"/> <input type="button" id="yes_enabled" name="yes_enabled" value="Yes" onclick="toggle()"/> </div> <div> <span class="existing">Wort Only <span id="existing_wortonly">Yes</span></span> <br/> <input type="hidden" id="input_wortonly" name="input_wortonly" value="0"/> <input type="button" id="no_wortonly" name="no_wortonly" value="No" onclick="toggle()"/> <input type="button" id="yes_wortonly" name="yes_wortonly" value="Yes" onclick="toggle()"/> </div> <div> <span class="existing">Allowed difference <span id="existing_fridge_difference">0.2</span>º</span> <br/> <input type="text" id="input_fridge_difference" name="input_fridge_difference" value="0.2"/> <input type="button" name="down_fridge_difference" value="-" onclick="change_value()"/> <input type="button" name="up_fridge_difference" value="+" onclick="change_value()"/> </div> <div> <span class="existing">Overshoot factor<span id="existing_overshoot_factor">0.5</span></span> <br/> <input type="text" id="input_overshoot_factor" name="input_overshoot_factor" value="0.5"/> <input type="button" name="down_overshoot_factor" value="-" onclick="change_value()"/> <input type="button" class="onbutton" name="up_overshoot_factor" value="+" onclick="change_value()"/> </div> <div> <span class="existing">Overshoot delay<span id="existing_overshoot_delay">0.5</span></span> <br/> <input type="text" id="input_overshoot_delay" name="input_overshoot_delay" value="0.5"/> <input type="button" name="down_overshoot_delay" value="-"/> <input type="button" name="up_overshoot_delay" value="+"/> </div> <div> <input type="submit" name="go" value="Go"/> </div> </form> </body> </html>