Mercurial > brewboard / file revision

image/w/webui.html@71e06f6d80fd

image/w/webui.html

Sat, 04 May 2019 11:41:16 +0200

author
Michiel Broek <mbroek@mbse.eu>
date
Sat, 04 May 2019 11:41:16 +0200
branch
novnc
changeset 40
71e06f6d80fd
parent 11
f816cf5b6bcb
child 41
7639cfa6aec0
permissions
-rw-r--r--

Work on web interface using websockets.

<!DOCTYPE html>
<html lang="en">
<head>
  <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" /> 
  <script src="js/jquery-1.12.4.min.js"></script>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

 <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>
     <td>
      <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mlt00">Hand</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>
      <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mlt20">Auto</button>
     </td>
    </tr>
    <tr>
     <td>
      <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mlt01">+sp</button>
     </td>
     <td>
      <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mlt21">-sp</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">+1m</button>
     </td>
     <td>
      <td><div id="timer">01:23:45</div></td>
     </td>
     <td>
      <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mid20">-1m</button>
     </td>
    </tr>
   </table>
  </div>

  <div id="hltline">
   <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">+sp</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">-sp</button>
     </td>
    </tr>
    <tr>
     <td>
      <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="hlt01">Info</button>
     </td>
     <td>
      <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="hlt21">Tools</button>
     </td>
    </tr>
   </table>
  </div>

  <table style='width: 100%; padding: 0px;'>
   <col width="20%"><col width="20%"><col width="20%"><col width="20%"><col width="20%">

   <tr id="row_info">
    <td colspan="5">
     <div style="color: yellow; text-align: center;">
      <p />
      Written by Michiel Broek &copy; 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 style="margin-left: 150px; margin-top: 50px;" type="button" class="okbutton" id="ok_info">Ok</button>
     </div>
    </td>
   </tr>

  </table>
 </div> <!-- webui_win -->

 <br>
 <form action="index.html"><input type="submit" class="button" value="Hoofdmenu"></form>

<p id="test"></p>

<script type="text/javascript" src="js/webui.js"></script>

</body>
</html>

Mercurial Repository: brewboard

mercurial