--- a/image/w/webui.html Thu May 02 11:52:36 2019 +0200 +++ b/image/w/webui.html Wed May 08 15:46:50 2019 +0200 @@ -4,76 +4,151 @@ <title>Web User Interface</title> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.5" /> <script src="js/jquery-1.12.4.min.js"></script> - <link rel="stylesheet" href="css/style.css"> + <link rel="stylesheet" href="css/webui.css"> </head> <body> - <div id="webui_table"> - <table style='width: 100%; padding: 0px;'> - <tr style="color: yellow; background-color: blue; height: 26px;"> - <th colspan="3"><span id="top_msg">top_msg</span></th> - </tr> - <tr> - <td style="width: 20%;"> - <button style="float: left; margin-left: 5px;" type="button" class="appbutton">Hand</button> - <button style="float: left; margin-left: 5px; margin-top: 12px;" type="button" class="appbutton">+sp</button> - </td> - <td style="width: 60%;"> - <table id="mlt_table"> - <tr> - <td style="width: 10%; text-align: center;"> - <div id="pump_led" class="LEDred"></div> - </td> - <td colspan="2" style='font-size: 10px; text-align: center;'>MLT</td> - <td style="width: 10%; text-align: center;"> - <div id="mlt_led" class="LEDgreen"></div> - </td> - </tr> - <tr><td colspan="4" style='border: 1px solid; font-size: 40px; text-align: right;'><span id="mlt_pv">---</span></td></tr> - <tr><td colspan="2" style='width: 50%; font-size: 10px;'><span id="mlt_sp">44.00</span></td> - <td colspan="2" style='width: 50%; font-size: 10px;'><span id="mlt_power">100%</span></td></tr> + <div id="webui_win"> + <div id="topline"><span id="top_msg">top_msg</span></th> + </div> + + <div id="mltline"> + <table style='width: 100%; padding: 0px;'> + <col width="20%"><col width="60%"><col width="20%"> + <tr style="height: 50%;"> + <td style="margin-top: 5px;"> + <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mlt00"><span id="but00">00</span></button> + </td> + <td rowspan="2"> + <table id="mlt_table"> + <tr> + <td style="width: 10%; text-align: center;"><div id="pump_led" class="LEDred"></div></td> + <td colspan="2" style='font-size: 10px; text-align: center;'>MLT</td> + <td style="width: 10%; text-align: center;"><div id="mlt_led" class="LEDgreen"></div></td> + </tr> + <tr> + <td colspan="4" style='border: 1px solid; font-size: 40px; text-align: right;'><span id="mlt_pv">---</span></td> + </tr> + <tr> + <td colspan="2" style='width: 50%; font-size: 10px;'><span id="mlt_sp">44.00</span></td> + <td colspan="2" style='width: 50%; font-size: 10px;'><span id="mlt_power">100%</span></td> + </tr> </table> - </td> - <td style="width: 20%;"> - <button style="float: left; margin-left: 5px;" type="button" class="appbutton">Auto</button> - <button style="float: left; margin-left: 5px; margin-top: 12px;" type="button" class="appbutton">-sp</button> - </td> - </tr> - <tr> - <td><button style="float: left; margin-left: 5px;" type="button" class="appbutton">+1m</button></td> - <td><div id="timer">01:23:45</div></td> - <td><button style="float: left; margin-left: 5px;" type="button" class="appbutton">-1m</button></td> - </tr> - <tr> - <td><button style="float: left; margin-left: 5px;" type="button" class="appbutton">+sp</button> - <button style="float: left; margin-left: 5px; margin-top: 12px;" type="button" class="appbutton">Info</button></td> - <td> - <table id="hlt_table"> - <tr> - <td style="width: 10%; text-align: center;"> - </td> - <td colspan="2" style='font-size: 10px; text-align: center;'>HLT</td> - <td style="width: 10%; text-align: center;"> - <div id="hlt_led" class="LEDgreen"></div> - </td> - </tr> - <tr><td colspan="4" style='border: 1px solid; font-size: 40px; text-align: right;'><span id="hlt_pv">---</span></td></tr> - <tr><td colspan="2" style='font-size: 10px;'><span id="hlt_sp">44.00</span></td> - <td colspan="2" style='font-size: 10px;'><span id="hlt_power">100%</span></td></tr> - </table> - </td> - <td><button style="float: left; margin-left: 5px;" type="button" class="appbutton">-sp</button> - <button style="float: left; margin-left: 5px; margin-top: 12px;" type="button" class="appbutton">Tools</button></td> - </tr> - </table> + </td> + <td> + <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mlt20"><span id="but20">20</span></button> + </td> + </tr> + <tr> + <td> + <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mlt01"><span id="but01">01</span></button> + </td> + <td> + <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mlt21"><span id="but21">21</span></button> + </td> + </tr> + </table> + </div> + + <div id="midline"> + <table style='width: 100%; padding: 0px;'> + <col width="20%"><col width="60%"><col width="20%"> + <tr> + <td> + <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mid00"><span id="but02">02</span></button> + </td> + <td> + <div id="timer">01:23:45</div> + </td> + <td> + <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mid20"><span id="but22">22</span></button> + </td> + </tr> + </table> + </div> + + <div id="hltline" style="margin-bottom: 0;"> + <table style='width: 100%; padding: 0px;'> + <col width="20%"><col width="60%"><col width="20%"> + <tr> + <td> + <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="hlt00"><span id="but03">03</span></button> + </td> + <td rowspan="2"> + <table id="hlt_table"> + <tr> + <td style="width: 10%; text-align: center;"> </td> + <td colspan="2" style='font-size: 10px; text-align: center;'>HLT</td> + <td style="width: 10%; text-align: center;"><div id="hlt_led" class="LEDgreen"></div></td> + </tr> + <tr> + <td colspan="4" style='border: 1px solid; font-size: 40px; text-align: right;'><span id="hlt_pv">---</span></td> + </tr> + <tr> + <td colspan="2" style='font-size: 10px;'><span id="hlt_sp">44.00</span></td> + <td colspan="2" style='font-size: 10px;'><span id="hlt_power">100%</span></td> + </tr> + </table> + </td> + <td> + <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="hlt20"><span id="but23">23</span></button> + </td> + </tr> + <tr style="height: 50%;"> + <td> + <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="hlt01"><span id="but04">04</span></button> + </td> + <td> + <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="hlt21"><span id="but24">24</span></button> + </td> + </tr> + </table> + </div> + + <div id="row_info"> + <div style="color: yellow; text-align: center;"> + <p />Written by Michiel Broek © 2018 + </div> + <div style="color: orange; text-align: center;"> + <p />Parts are written by Chris Morgan, Brett Beauregard, Blake Felt, LoBo and David Antliff. + </div> + <div> + <button type="button" class="okbutton" id="ok_info">Ok</button> + </div> + </div> + + <div id="prompt"> + <button style="margin-top: 100px;" type="button" class="promptbutton" id="button_ja">Ja</button> + <button style="margin-left: 80px; margin-top: 100px;" type="button" class="promptbutton" id="button_nee">Nee</button> + </div> + + <div id="note"> + <div style="color: yellow; text-align: center; margin-top: 105px;"><span id="note_msg">nm</span></div> + <div> + <button type="button" class="okbutton" id="ok_note">Ok</button> + </div> + </div> + + <div id="brew"> + <div style="color: yellow; margin-top: 20px;">Installatie: <span id="brew_msg1"></span></div> + <div style="color: yellow;">Recept: <span id="brew_msg2"></span></div> + <div style="color: white; margin-top: 20px;">Zie het display voor de details.</span></div> + <div> + <button style="position: absolute; left: 5px; top: 230px;" type="button" class="appbutton" id="button_stop">Stop</button> + <button style="position: absolute; left: 295px; top: 230px;" type="button" class="appbutton" id="button_start">Start</button> + </div> + </div> + + </div> <!-- webui_win --> + + <br> + <div class="menu" style="margin-left: 45px;"> + <form action="index.html"><input type="submit" class="button" value="Hoofdmenu"></form> </div> - <br> - <form action="index.html"><input type="submit" class="button" value="Hoofdmenu"></form> - -<p id="test"></p> +<p id="test"></p><p id="output"></p> <script type="text/javascript" src="js/webui.js"></script>