changeset
Websocket interface is working for the main screen and manual mode.
Sat, 04 May 2019 21:18:51 +0200
- author
- Michiel Broek <mbroek@mbse.eu>
- date
- Sat, 04 May 2019 21:18:51 +0200
- branch
- novnc
- changeset 41
- 7639cfa6aec0
- parent 40
- 71e06f6d80fd
- child 42
- c6a1a6ca5437
Websocket interface is working for the main screen and manual mode.
| image/version.txt | file | annotate | diff | comparison | revisions | |
| image/w/css/style.css | file | annotate | diff | comparison | revisions | |
| image/w/js/webui.js | file | annotate | diff | comparison | revisions | |
| image/w/webui.html | file | annotate | diff | comparison | revisions | |
| main/buttons.c | file | annotate | diff | comparison | revisions | |
| main/buttons.h | file | annotate | diff | comparison | revisions | |
| main/task_http.c | file | annotate | diff | comparison | revisions |
--- a/image/version.txt Sat May 04 11:41:16 2019 +0200 +++ b/image/version.txt Sat May 04 21:18:51 2019 +0200 @@ -1,1 +1,1 @@ -0.1.aa +0.1.av
--- a/image/w/css/style.css Sat May 04 11:41:16 2019 +0200 +++ b/image/w/css/style.css Sat May 04 21:18:51 2019 +0200 @@ -55,6 +55,12 @@ border-color: yellow; } +#prompt { + width: 100%; + float: left; + text-align: center; +} + .appbutton { width: 60px; height: 36px; @@ -69,6 +75,13 @@ background-color: #575757; color: white; } +.promptbutton { + width: 80px; + height: 40px; + border-radius: 4px; + background-color: #e7e7e7; color: black; +} + #timer { color: white; text-align: center;
--- a/image/w/js/webui.js Sat May 04 11:41:16 2019 +0200 +++ b/image/w/js/webui.js Sat May 04 21:18:51 2019 +0200 @@ -8,43 +8,107 @@ Screen: -1, setScreen: function(s){ - console.log("Screen:"+s); - switch (s) { - case '0': - case '100': - case '101': - case '102': - case '103': - case '104': - case '105': - case '106': - case '107': - case '201': - $("#mltline").show(); - //$("#mlt01").hide(); - $("#midline").show(); - $("#hltline").show(); - $("#row_info").hide(); - console.log("this is 0"); - break; - case '108': $("#mltline").show(); // to boil - $("#midline").hide(); - $("#hltline").hide(); + Screen = parseInt(s,10); + console.log("Screen:"+Screen); + switch (Screen) { + case 0: $("#mltline").show(); + $("#mlt_table").show(); + $("#but00").text('Hand'); + $("#but20").text('Auto'); + $("#mlt00").show(); + $("#mlt20").show(); + $("#mlt01").hide(); + $("#mlt21").hide(); + $("#midline").show(); + $("#mid00").hide(); + $("#mid20").hide(); + $("#hltline").show(); + $("#hlt_table").show(); + $("#hlt00").hide(); + $("#hlt20").hide(); + $("#hlt01").show(); + $("#hlt21").show(); + $("#hlt01").css("background-color", "#e7e7e7"); + $("#hlt01").css("color", "black"); + $("#but04").text('Info'); + $("#but24").text('Tools'); + $("#row_info").hide(); + $("#prompt").hide(); break; - case '109': $("#mltline").show(); // boil - $("#midline").show(); - $("#hltline").hide(); - break; - case '2': $("#mltline").hide(); + case 2: $("#mltline").hide(); $("#midline").hide(); $("#hltline").hide(); $("#row_info").show(); - console.log("this is 2"); + $("#prompt").hide(); + break; +// case 21: Automaat show recipe and Stop / Start +// Prompt +// Prompt + case 100: + case 101: + case 102: + case 103: + case 104: + case 105: + case 106: + case 107: $("#mltline").show(); + $("#but00").text('+sp'); + $("#but20").text('-sp'); + $("#midline").show(); + $("#hltline").show(); + $("#hlt01").hide(); + $("#hlt21").hide(); + $("#row_info").hide(); + $("#prompt").hide(); break; + case 108: $("#mltline").show(); // to boil + $("#midline").hide(); + $("#hltline").hide(); + $("#prompt").hide(); + break; + case 109: $("#mltline").show(); // boil + $("#midline").show(); + $("#hltline").hide(); + $("#prompt").hide(); + break; + case 200: $("#mltline").hide(); + $("#midline").hide(); + $("#hltline").hide(); + $("#row_info").hide(); + $("#prompt").show(); + break; + case 201: $("#mltline").show(); + $("#mlt00").hide(); + $("#mlt20").hide(); + $("#mlt01").hide(); + $("#mlt21").hide(); + $("#mlt_table").hide(); + $("#but00").text('+sp'); + $("#but20").text('-sp'); + $("#but01").text('Pomp'); + $("#but21").text('Aan'); + $("#midline").show(); + $("#mid00").hide(); + $("#mid20").hide(); + $("#hltline").show(); + $("#hlt00").hide(); + $("#hlt20").hide(); + $("#hlt21").hide(); + $("#hlt_table").hide(); + $("#but03").text('+sp'); + $("#but23").text('-sp'); + $("#but04").text('Stop'); + $("#but24").text('Aan'); + $("#hlt01").css("background-color", "#575757"); + $("#hlt01").css("color", "white"); + $("#row_info").hide(); + $("#prompt").hide(); + break; default: $("#mltline").hide(); $("#midline").hide(); $("#hltline").hide(); - console.log("this is default"); + $("#prompt").hide(); + console.log("this is default screen "+Screen); break; } }, @@ -53,6 +117,15 @@ }, MLT_sp: function(s) { $("#mlt_sp").text(s); + if (Screen == 201) { + if (s != "") { + $("#mlt00").show(); + $("#mlt20").show(); + $("#mlt01").show(); + $("#mlt21").show(); + $("#mlt_table").show(); + } + } }, MLT_power: function(s) { $("#mlt_power").text(s); @@ -74,6 +147,14 @@ }, HLT_sp: function(s) { $("#hlt_sp").text(s); + if (Screen == 201) { + if (s != "") { + $("#hlt00").show(); + $("#hlt20").show(); + $("#hlt21").show(); + $("#hlt_table").show(); + } + } }, HLT_power: function(s) { $("#hlt_power").text(s); @@ -146,13 +227,25 @@ function sendTouch(x, y) { - websocket.send('{"touch":{"x":"'+x+'","y":"'+y+'"}}'); - console.log('Sent {"touch":{"x":"'+x+'","y":"'+y+'"}}'); + websocket.send('{"touch":{"x":'+x+',"y":'+y+'}}'); + console.log('Sent {"touch":{"x":'+x+',"y":'+y+'}}'); } /* Define keys in the screens and their actions. */ $("#ok_info").click( function() { sendTouch(160,220); }); +$("#mlt00").click( function() { sendTouch( 35, 46); }); +$("#mlt20").click( function() { sendTouch(285, 46); }); +$("#mlt01").click( function() { sendTouch( 35, 96); }); +$("#mlt21").click( function() { sendTouch(285, 96); }); +$("#mid00").click( function() { sendTouch( 35,140); }); +$("#mid20").click( function() { sendTouch(285,140); }); +$("#hlt00").click( function() { sendTouch( 35,170); }); +$("#hlt20").click( function() { sendTouch(285,170); }); +$("#hlt01").click( function() { sendTouch( 35,220); }); +$("#hlt21").click( function() { sendTouch(285,220); }); +$("#button_ja").click( function() { sendTouch( 80,120); }); +$("#button_nee").click( function() { sendTouch(240,120); }); websocket.onopen = function(evt) {
--- a/image/w/webui.html Sat May 04 11:41:16 2019 +0200 +++ b/image/w/webui.html Sat May 04 21:18:51 2019 +0200 @@ -18,8 +18,8 @@ <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 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"> @@ -38,15 +38,15 @@ </table> </td> <td> - <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mlt20">Auto</button> + <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">+sp</button> + <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">-sp</button> + <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mlt21"><span id="but21">21</span></button> </td> </tr> </table> @@ -57,13 +57,13 @@ <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> + <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mid00"><span id="but02">02</span></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> + <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="mid20"><span id="but22">22</span></button> </td> </tr> </table> @@ -74,7 +74,7 @@ <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> + <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"> @@ -93,40 +93,37 @@ </table> </td> <td> - <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="hlt20">-sp</button> + <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="hlt20"><span id="but23">23</span></button> </td> </tr> <tr> <td> - <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="hlt01">Info</button> + <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">Tools</button> + <button style="float: left; margin-left: 5px;" type="button" class="appbutton" id="hlt21"><span id="but24">24</span></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%"> + <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 style="margin-left: 150px; margin-top: 50px;" type="button" class="okbutton" id="ok_info">Ok</button> + </div> + </div> - <tr id="row_info"> - <td colspan="5"> - <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 style="margin-left: 150px; margin-top: 50px;" type="button" class="okbutton" id="ok_info">Ok</button> - </div> - </td> - </tr> + <div id="prompt"> + <button style="margin-left: 40px; 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> - </table> </div> <!-- webui_win --> <br>
--- a/main/buttons.c Sat May 04 11:41:16 2019 +0200 +++ b/main/buttons.c Sat May 04 21:18:51 2019 +0200 @@ -12,6 +12,9 @@ const char *mashTypes[] = { "Infusion", "Temperature", "Decoction" }; const char *SSR2Types[] = { "Uit", "HLT of MLT", "HLT en MLT", "Idle" }; +uint8_t WS_pressed = 0; ///< Websocket button received +uint16_t WS_pointer_x = 0; ///< Websocket coordinate x +uint16_t WS_pointer_y = 0; ///< Websocket coordinate y #define EDIT_TYPE_TEXT 0 ///< Editor type is text #define EDIT_TYPE_INT 1 ///< Editor type is integer @@ -134,7 +137,13 @@ return rc; } - if (v_pressed) { + if (WS_pressed) { + v_pressed = true; + vx = WS_pointer_x; + vy = WS_pointer_y; + WS_pressed = 0; + return -1; + } else if (v_pressed) { rc = Buttons_Search(vx, vy); v_pressed = false; vx = vy = -1; @@ -146,6 +155,15 @@ +void WS_touched(int x, int y) +{ + WS_pointer_x = x; + WS_pointer_y = y; + WS_pressed = 1; +} + + + static const uint8_t alphalow_tab[] = { 'q','w','e','r','t','y','u','i','o','p', 'a','s','d','f','g','h','j','k','l', 'z','x','c','v','b','n','m' };
--- a/main/buttons.h Sat May 04 11:41:16 2019 +0200 +++ b/main/buttons.h Sat May 04 21:18:51 2019 +0200 @@ -68,6 +68,13 @@ int Buttons_Scan(void); /** + * @brief Insert button coordinates received from a websocket. + * @param x The touched X position. + * @param y The touched Y position. + */ +void WS_touched(int x, int y); + +/** * @brief Scan keyboard, all characters, 4 screens. * @return The ASCII code of the key, or -1 if no key is pressed. */
--- a/main/task_http.c Sat May 04 11:41:16 2019 +0200 +++ b/main/task_http.c Sat May 04 21:18:51 2019 +0200 @@ -6,6 +6,7 @@ #include "config.h" #include "mbedtls/base64.h" #include "mbedtls/sha1.h" +#include "cJSON.h" static const char *TAG = "task_http"; @@ -14,6 +15,8 @@ static TaskHandle_t xTaskHTTP = NULL; static TaskHandle_t xTaskQueue = NULL; +cJSON *root = NULL; +cJSON *touch = NULL; /** @@ -21,8 +24,9 @@ * @param buf The buffer * @param buflen Length of the buffer */ +#if 0 void dump_buf(char *buf, uint16_t buflen); - +#endif /** @@ -214,6 +218,8 @@ */ void websock_callback(uint8_t num, WEBSOCKET_TYPE_t type, char* msg, uint64_t len) { + char jbuf[128]; + switch(type) { case WEBSOCKET_CONNECT: ESP_LOGI(TAG,"Websocket client %i connected!",num); @@ -232,13 +238,32 @@ break; case WEBSOCKET_TEXT: + /* + * Handle json actions from the web clients, like button presses. + */ + if (len < 128) { // Safety, messages are small. + memcpy(jbuf, msg, len); + jbuf[len] = '\0'; + if ((root = cJSON_Parse(jbuf))) { + if ((touch = cJSON_GetObjectItem(root,"touch"))) { + int x = cJSON_GetObjectItem(touch, "x")->valueint; + int y = cJSON_GetObjectItem(touch, "y")->valueint; + WS_touched(x, y); + break; + } else { + ESP_LOGI(TAG,"not json touch"); + } + cJSON_Delete(root); + } else { + ESP_LOGI(TAG,"not json"); + } + } + // Log if the message in not processed. ESP_LOGI(TAG,"Websocket client %i sent text message of size %i:\n%s",num,(uint32_t)len,msg); - dump_buf(msg, len); break; case WEBSOCKET_BIN: ESP_LOGI(TAG,"Websocket client %i sent bin message of size %i:\n",num,(uint32_t)len); - dump_buf(msg, len); break; case WEBSOCKET_PING: @@ -253,6 +278,7 @@ +#if 0 void dump_buf(char *buf, uint16_t buflen) { int i = 0, l = 1; @@ -277,6 +303,7 @@ } printf("\n"); } +#endif @@ -398,7 +425,9 @@ return; } +#if 0 dump_buf(buf, buflen); +#endif if (strstr(buf, "GET /")) { ESP_LOGI(TAG, "%s request: %s", ipstr, buf);
