Mon, 05 Jul 2021 10:31:38 +0200
Versie 0.3.16
0 | 1 | <!DOCTYPE html> |
2 | <html lang="en"> | |
3 | <head> | |
4 | <title>Web User Interface</title> | |
5 | <meta charset="utf-8" /> | |
6 | <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
42 | 7 | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.5" /> |
0 | 8 | <script src="js/jquery-1.12.4.min.js"></script> |
78
b58e0c9897e1
Added reconnect-websocket javascript. Removed some debugging log messages.
Michiel Broek <mbroek@mbse.eu>
parents:
76
diff
changeset
|
9 | <script src="js/reconnecting-ws.min.js"></script> |
42 | 10 | <link rel="stylesheet" href="css/webui.css"> |
0 | 11 | </head> |
12 | <body> | |
13 | ||
40
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
14 | <div id="webui_win"> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
15 | <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
|
16 | </div> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
17 | |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
18 | <div id="mltline"> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
19 | <table style='width: 100%; padding: 0px;'> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
20 | <col width="20%"><col width="60%"><col width="20%"> |
42 | 21 | <tr style="height: 50%;"> |
41
7639cfa6aec0
Websocket interface is working for the main screen and manual mode.
Michiel Broek <mbroek@mbse.eu>
parents:
40
diff
changeset
|
22 | <td style="margin-top: 5px;"> |
7639cfa6aec0
Websocket interface is working for the main screen and manual mode.
Michiel Broek <mbroek@mbse.eu>
parents:
40
diff
changeset
|
23 | <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mlt00"><span id="but00">00</span></button> |
40
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
24 | </td> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
25 | <td rowspan="2"> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
26 | <table id="mlt_table"> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
27 | <tr> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
28 | <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
|
29 | <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
|
30 | <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
|
31 | </tr> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
32 | <tr> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
33 | <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
|
34 | </tr> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
35 | <tr> |
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_sp">44.00</span></td> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
37 | <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
|
38 | </tr> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
39 | </table> |
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 | <td> |
41
7639cfa6aec0
Websocket interface is working for the main screen and manual mode.
Michiel Broek <mbroek@mbse.eu>
parents:
40
diff
changeset
|
42 | <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mlt20"><span id="but20">20</span></button> |
40
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
43 | </td> |
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 | <tr> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
46 | <td> |
41
7639cfa6aec0
Websocket interface is working for the main screen and manual mode.
Michiel Broek <mbroek@mbse.eu>
parents:
40
diff
changeset
|
47 | <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mlt01"><span id="but01">01</span></button> |
40
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 | <td> |
41
7639cfa6aec0
Websocket interface is working for the main screen and manual mode.
Michiel Broek <mbroek@mbse.eu>
parents:
40
diff
changeset
|
50 | <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mlt21"><span id="but21">21</span></button> |
40
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
51 | </td> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
52 | </tr> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
53 | </table> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
54 | </div> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
55 | |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
56 | <div id="midline"> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
57 | <table style='width: 100%; padding: 0px;'> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
58 | <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
|
59 | <tr> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
60 | <td> |
41
7639cfa6aec0
Websocket interface is working for the main screen and manual mode.
Michiel Broek <mbroek@mbse.eu>
parents:
40
diff
changeset
|
61 | <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mid00"><span id="but02">02</span></button> |
40
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> |
42 | 64 | <div id="timer">01:23:45</div> |
40
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 | <td> |
41
7639cfa6aec0
Websocket interface is working for the main screen and manual mode.
Michiel Broek <mbroek@mbse.eu>
parents:
40
diff
changeset
|
67 | <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mid20"><span id="but22">22</span></button> |
40
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
68 | </td> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
69 | </tr> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
70 | </table> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
71 | </div> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
72 | |
42 | 73 | <div id="hltline" style="margin-bottom: 0;"> |
40
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
74 | <table style='width: 100%; padding: 0px;'> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
75 | <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
|
76 | <tr> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
77 | <td> |
41
7639cfa6aec0
Websocket interface is working for the main screen and manual mode.
Michiel Broek <mbroek@mbse.eu>
parents:
40
diff
changeset
|
78 | <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="hlt00"><span id="but03">03</span></button> |
40
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
79 | </td> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
80 | <td rowspan="2"> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
81 | <table id="hlt_table"> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
82 | <tr> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
83 | <td style="width: 10%; text-align: center;"> </td> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
84 | <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
|
85 | <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
|
86 | </tr> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
87 | <tr> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
88 | <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
|
89 | </tr> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
90 | <tr> |
57
6c5211c0120b
Version 0.3.3. Added favicon.ico to the web server. Fixed text position in the http client for the power percentage. Silenced a lot of log messages. Moved the pump led on the display to the left just as on the web page.
Michiel Broek <mbroek@mbse.eu>
parents:
42
diff
changeset
|
91 | <td colspan="2" style='width: 50%; font-size: 10px;'><span id="hlt_sp">44.00</span></td> |
6c5211c0120b
Version 0.3.3. Added favicon.ico to the web server. Fixed text position in the http client for the power percentage. Silenced a lot of log messages. Moved the pump led on the display to the left just as on the web page.
Michiel Broek <mbroek@mbse.eu>
parents:
42
diff
changeset
|
92 | <td colspan="2" style='width: 50%; font-size: 10px;'><span id="hlt_power">100%</span></td> |
40
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
93 | </tr> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
94 | </table> |
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 | <td> |
41
7639cfa6aec0
Websocket interface is working for the main screen and manual mode.
Michiel Broek <mbroek@mbse.eu>
parents:
40
diff
changeset
|
97 | <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="hlt20"><span id="but23">23</span></button> |
40
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
98 | </td> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
99 | </tr> |
42 | 100 | <tr style="height: 50%;"> |
40
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
101 | <td> |
41
7639cfa6aec0
Websocket interface is working for the main screen and manual mode.
Michiel Broek <mbroek@mbse.eu>
parents:
40
diff
changeset
|
102 | <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="hlt01"><span id="but04">04</span></button> |
40
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 | <td> |
41
7639cfa6aec0
Websocket interface is working for the main screen and manual mode.
Michiel Broek <mbroek@mbse.eu>
parents:
40
diff
changeset
|
105 | <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="hlt21"><span id="but24">24</span></button> |
40
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
106 | </td> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
107 | </tr> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
108 | </table> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
109 | </div> |
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
110 | |
41
7639cfa6aec0
Websocket interface is working for the main screen and manual mode.
Michiel Broek <mbroek@mbse.eu>
parents:
40
diff
changeset
|
111 | <div id="row_info"> |
7639cfa6aec0
Websocket interface is working for the main screen and manual mode.
Michiel Broek <mbroek@mbse.eu>
parents:
40
diff
changeset
|
112 | <div style="color: yellow; text-align: center;"> |
91
255a75322212
Added 7 sgemnt fonts for the web client. Log messages in the components more compact. Added fonts mime-types to the webserver. Switched to stable esp-idf 4.2.1. Upgraded the SD-mmc card API.
Michiel Broek <mbroek@mbse.eu>
parents:
78
diff
changeset
|
113 | <p />Written by Michiel Broek © 2018-2021 |
41
7639cfa6aec0
Websocket interface is working for the main screen and manual mode.
Michiel Broek <mbroek@mbse.eu>
parents:
40
diff
changeset
|
114 | </div> |
7639cfa6aec0
Websocket interface is working for the main screen and manual mode.
Michiel Broek <mbroek@mbse.eu>
parents:
40
diff
changeset
|
115 | <div style="color: orange; text-align: center;"> |
7639cfa6aec0
Websocket interface is working for the main screen and manual mode.
Michiel Broek <mbroek@mbse.eu>
parents:
40
diff
changeset
|
116 | <p />Parts are written by Chris Morgan, Brett Beauregard, Blake Felt, LoBo and David Antliff. |
7639cfa6aec0
Websocket interface is working for the main screen and manual mode.
Michiel Broek <mbroek@mbse.eu>
parents:
40
diff
changeset
|
117 | </div> |
7639cfa6aec0
Websocket interface is working for the main screen and manual mode.
Michiel Broek <mbroek@mbse.eu>
parents:
40
diff
changeset
|
118 | <div> |
42 | 119 | <button type="button" class="okbutton" id="ok_info">Ok</button> |
41
7639cfa6aec0
Websocket interface is working for the main screen and manual mode.
Michiel Broek <mbroek@mbse.eu>
parents:
40
diff
changeset
|
120 | </div> |
7639cfa6aec0
Websocket interface is working for the main screen and manual mode.
Michiel Broek <mbroek@mbse.eu>
parents:
40
diff
changeset
|
121 | </div> |
40
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
122 | |
41
7639cfa6aec0
Websocket interface is working for the main screen and manual mode.
Michiel Broek <mbroek@mbse.eu>
parents:
40
diff
changeset
|
123 | <div id="prompt"> |
42 | 124 | <button style="margin-top: 100px;" type="button" class="promptbutton" id="button_ja">Ja</button> |
41
7639cfa6aec0
Websocket interface is working for the main screen and manual mode.
Michiel Broek <mbroek@mbse.eu>
parents:
40
diff
changeset
|
125 | <button style="margin-left: 80px; margin-top: 100px;" type="button" class="promptbutton" id="button_nee">Nee</button> |
7639cfa6aec0
Websocket interface is working for the main screen and manual mode.
Michiel Broek <mbroek@mbse.eu>
parents:
40
diff
changeset
|
126 | </div> |
40
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
127 | |
42 | 128 | <div id="note"> |
129 | <div style="color: yellow; text-align: center; margin-top: 105px;"><span id="note_msg">nm</span></div> | |
130 | <div> | |
131 | <button type="button" class="okbutton" id="ok_note">Ok</button> | |
132 | </div> | |
133 | </div> | |
134 | ||
135 | <div id="brew"> | |
136 | <div style="color: yellow; margin-top: 20px;">Installatie: <span id="brew_msg1"></span></div> | |
137 | <div style="color: yellow;">Recept: <span id="brew_msg2"></span></div> | |
138 | <div style="color: white; margin-top: 20px;">Zie het display voor de details.</span></div> | |
139 | <div> | |
140 | <button style="position: absolute; left: 5px; top: 230px;" type="button" class="appbutton" id="button_stop">Stop</button> | |
141 | <button style="position: absolute; left: 295px; top: 230px;" type="button" class="appbutton" id="button_start">Start</button> | |
142 | </div> | |
143 | </div> | |
144 | ||
40
71e06f6d80fd
Work on web interface using websockets.
Michiel Broek <mbroek@mbse.eu>
parents:
11
diff
changeset
|
145 | </div> <!-- webui_win --> |
0 | 146 | |
147 | <br> | |
42 | 148 | <div class="menu" style="margin-left: 45px;"> |
149 | <form action="index.html"><input type="submit" class="button" value="Hoofdmenu"></form> | |
150 | </div> | |
0 | 151 | |
78
b58e0c9897e1
Added reconnect-websocket javascript. Removed some debugging log messages.
Michiel Broek <mbroek@mbse.eu>
parents:
76
diff
changeset
|
152 | <p id="wsstatus"></p><p id="output"></p> |
0 | 153 | |
154 | <script type="text/javascript" src="js/webui.js"></script> | |
155 | ||
156 | </body> | |
157 | </html> | |
158 |