Mon, 21 Jun 2021 19:04:10 +0200
Finished experimental code to drive the German HendiControl board. Added BoilPower and RampPower buttons during the while boil process. RampPower (going to boil power) is now adjustable. Added PWM driver code to the driver task.
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 |