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.

0
b74b0e4902c3 Initial checkin brewboard
Michiel Broek <mbroek@mbse.eu>
parents:
diff changeset
1 <!DOCTYPE html>
b74b0e4902c3 Initial checkin brewboard
Michiel Broek <mbroek@mbse.eu>
parents:
diff changeset
2 <html lang="en">
b74b0e4902c3 Initial checkin brewboard
Michiel Broek <mbroek@mbse.eu>
parents:
diff changeset
3 <head>
b74b0e4902c3 Initial checkin brewboard
Michiel Broek <mbroek@mbse.eu>
parents:
diff changeset
4 <title>Web User Interface</title>
b74b0e4902c3 Initial checkin brewboard
Michiel Broek <mbroek@mbse.eu>
parents:
diff changeset
5 <meta charset="utf-8" />
b74b0e4902c3 Initial checkin brewboard
Michiel Broek <mbroek@mbse.eu>
parents:
diff changeset
6 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
40
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
7 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
0
b74b0e4902c3 Initial checkin brewboard
Michiel Broek <mbroek@mbse.eu>
parents:
diff changeset
8 <script src="js/jquery-1.12.4.min.js"></script>
b74b0e4902c3 Initial checkin brewboard
Michiel Broek <mbroek@mbse.eu>
parents:
diff changeset
9 <link rel="stylesheet" href="css/style.css">
b74b0e4902c3 Initial checkin brewboard
Michiel Broek <mbroek@mbse.eu>
parents:
diff changeset
10 </head>
b74b0e4902c3 Initial checkin brewboard
Michiel Broek <mbroek@mbse.eu>
parents:
diff changeset
11 <body>
b74b0e4902c3 Initial checkin brewboard
Michiel Broek <mbroek@mbse.eu>
parents:
diff changeset
12
40
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
13 <div id="webui_win">
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
14 <div id="topline"><span id="top_msg">top_msg</span></th>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
15 </div>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
16
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
17 <div id="mltline">
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
18 <table style='width: 100%; padding: 0px;'>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
19 <col width="20%"><col width="60%"><col width="20%">
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
20 <tr>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
21 <td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
22 <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mlt00">Hand</button>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
23 </td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
24 <td rowspan="2">
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
25 <table id="mlt_table">
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
26 <tr>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
27 <td style="width: 10%; text-align: center;"><div id="pump_led" class="LEDred"></div></td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
28 <td colspan="2" style='font-size: 10px; text-align: center;'>MLT</td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
29 <td style="width: 10%; text-align: center;"><div id="mlt_led" class="LEDgreen"></div></td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
30 </tr>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
31 <tr>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
32 <td colspan="4" style='border: 1px solid; font-size: 40px; text-align: right;'><span id="mlt_pv">---</span></td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
33 </tr>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
34 <tr>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
35 <td colspan="2" style='width: 50%; font-size: 10px;'><span id="mlt_sp">44.00</span></td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
36 <td colspan="2" style='width: 50%; font-size: 10px;'><span id="mlt_power">100%</span></td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
37 </tr>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
38 </table>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
39 </td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
40 <td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
41 <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mlt20">Auto</button>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
42 </td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
43 </tr>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
44 <tr>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
45 <td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
46 <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mlt01">+sp</button>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
47 </td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
48 <td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
49 <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mlt21">-sp</button>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
50 </td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
51 </tr>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
52 </table>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
53 </div>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
54
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
55 <div id="midline">
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
56 <table style='width: 100%; padding: 0px;'>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
57 <col width="20%"><col width="60%"><col width="20%">
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
58 <tr>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
59 <td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
60 <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mid00">+1m</button>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
61 </td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
62 <td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
63 <td><div id="timer">01:23:45</div></td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
64 </td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
65 <td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
66 <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mid20">-1m</button>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
67 </td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
68 </tr>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
69 </table>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
70 </div>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
71
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
72 <div id="hltline">
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
73 <table style='width: 100%; padding: 0px;'>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
74 <col width="20%"><col width="60%"><col width="20%">
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
75 <tr>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
76 <td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
77 <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="hlt00">+sp</button>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
78 </td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
79 <td rowspan="2">
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
80 <table id="hlt_table">
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
81 <tr>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
82 <td style="width: 10%; text-align: center;"> </td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
83 <td colspan="2" style='font-size: 10px; text-align: center;'>HLT</td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
84 <td style="width: 10%; text-align: center;"><div id="hlt_led" class="LEDgreen"></div></td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
85 </tr>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
86 <tr>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
87 <td colspan="4" style='border: 1px solid; font-size: 40px; text-align: right;'><span id="hlt_pv">---</span></td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
88 </tr>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
89 <tr>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
90 <td colspan="2" style='font-size: 10px;'><span id="hlt_sp">44.00</span></td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
91 <td colspan="2" style='font-size: 10px;'><span id="hlt_power">100%</span></td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
92 </tr>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
93 </table>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
94 </td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
95 <td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
96 <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="hlt20">-sp</button>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
97 </td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
98 </tr>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
99 <tr>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
100 <td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
101 <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="hlt01">Info</button>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
102 </td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
103 <td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
104 <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="hlt21">Tools</button>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
105 </td>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
106 </tr>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
107 </table>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
108 </div>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
109
0
b74b0e4902c3 Initial checkin brewboard
Michiel Broek <mbroek@mbse.eu>
parents:
diff changeset
110 <table style='width: 100%; padding: 0px;'>
40
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
111 <col width="20%"><col width="20%"><col width="20%"><col width="20%"><col width="20%">
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
112
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
113 <tr id="row_info">
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
114 <td colspan="5">
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
115 <div style="color: yellow; text-align: center;">
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
116 <p />
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
117 Written by Michiel Broek &copy; 2018
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
118 </div>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
119 <div style="color: orange; text-align: center;">
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
120 <p />
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
121 Parts are written by Chris Morgan, Brett Beauregard, Blake Felt, LoBo and David Antliff.
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
122 </div>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
123 <div>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
124 <button style="margin-left: 150px; margin-top: 50px;" type="button" class="okbutton" id="ok_info">Ok</button>
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
125 </div>
0
b74b0e4902c3 Initial checkin brewboard
Michiel Broek <mbroek@mbse.eu>
parents:
diff changeset
126 </td>
b74b0e4902c3 Initial checkin brewboard
Michiel Broek <mbroek@mbse.eu>
parents:
diff changeset
127 </tr>
40
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
128
0
b74b0e4902c3 Initial checkin brewboard
Michiel Broek <mbroek@mbse.eu>
parents:
diff changeset
129 </table>
40
71e06f6d80fd Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents: 11
diff changeset
130 </div> <!-- webui_win -->
0
b74b0e4902c3 Initial checkin brewboard
Michiel Broek <mbroek@mbse.eu>
parents:
diff changeset
131
b74b0e4902c3 Initial checkin brewboard
Michiel Broek <mbroek@mbse.eu>
parents:
diff changeset
132 <br>
b74b0e4902c3 Initial checkin brewboard
Michiel Broek <mbroek@mbse.eu>
parents:
diff changeset
133 <form action="index.html"><input type="submit" class="button" value="Hoofdmenu"></form>
b74b0e4902c3 Initial checkin brewboard
Michiel Broek <mbroek@mbse.eu>
parents:
diff changeset
134
b74b0e4902c3 Initial checkin brewboard
Michiel Broek <mbroek@mbse.eu>
parents:
diff changeset
135 <p id="test"></p>
b74b0e4902c3 Initial checkin brewboard
Michiel Broek <mbroek@mbse.eu>
parents:
diff changeset
136
b74b0e4902c3 Initial checkin brewboard
Michiel Broek <mbroek@mbse.eu>
parents:
diff changeset
137 <script type="text/javascript" src="js/webui.js"></script>
b74b0e4902c3 Initial checkin brewboard
Michiel Broek <mbroek@mbse.eu>
parents:
diff changeset
138
b74b0e4902c3 Initial checkin brewboard
Michiel Broek <mbroek@mbse.eu>
parents:
diff changeset
139 </body>
b74b0e4902c3 Initial checkin brewboard
Michiel Broek <mbroek@mbse.eu>
parents:
diff changeset
140 </html>
b74b0e4902c3 Initial checkin brewboard
Michiel Broek <mbroek@mbse.eu>
parents:
diff changeset
141

mercurial