changeset
Work on web interface using websockets.
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 39
- e5900c9b9a7b
- child 41
- 7639cfa6aec0
Work on web interface using websockets.
| image/files.list | file | annotate | diff | comparison | revisions | |
| image/version.txt | file | annotate | diff | comparison | revisions | |
| image/w/app/styles/web.css | file | annotate | diff | comparison | revisions | |
| image/w/css/style.css | file | annotate | diff | comparison | revisions | |
| image/w/css/web.css | file | annotate | diff | comparison | revisions | |
| image/w/index.html.gz | file | annotate | diff | comparison | revisions | |
| image/w/js/webui.js | file | annotate | diff | comparison | revisions | |
| image/w/logs.html | file | annotate | diff | comparison | revisions | |
| image/w/webui.html | file | annotate | diff | comparison | revisions | |
| main/task_tft.c | file | annotate | diff | comparison | revisions | |
| sdkconfig | file | annotate | diff | comparison | revisions |
--- a/image/files.list Thu May 02 21:19:50 2019 +0200 +++ b/image/files.list Sat May 04 11:41:16 2019 +0200 @@ -3,7 +3,7 @@ fonts/Grotesk24x48.fon fonts/SmallFont.fon fonts/Ubuntu.fon -w/app/styles/web.css +w/css/web.css w/css/style.css w/js/Chart.min.js.gz w/js/ch-plug-anno.min.js.gz
--- a/image/version.txt Thu May 02 21:19:50 2019 +0200 +++ b/image/version.txt Sat May 04 11:41:16 2019 +0200 @@ -1,1 +1,1 @@ -0.1.a +0.1.aa
--- a/image/w/app/styles/web.css Thu May 02 21:19:50 2019 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,86 +0,0 @@ - -body { - margin:0; - padding:0; - font-family: Helvetica; - /*Background image with light grey curve.*/ - background-color:#494949; - background-repeat:no-repeat; - background-position:right bottom; - height:100%; -/* touch-action: none; */ -} - -html { - height:100%; -} - - -/* ---------------------------------------- - * Main Area - * ---------------------------------------- - */ - - -.menu { - width: 270px; - margin: auto; -} - -.menu input[type=none] { - background-color: #0077bb; - border: none; - color: yellow; - font-weight: bold; - width: 250px; - padding: 10px 0px; - text-decoration: none; - font-size: 16px; - margin: 8px; - text-align: center; - border-radius: 10px; -} - -.menu input[type=submit] { - background-color: #33b5e5; - border: none; - color: white; - font-weight: bold; - width: 250px; - padding: 15px 32px; - text-decoration: none; - font-size: 16px; - cursor: pointer; - margin: 8px; - text-align: center; - border-radius: 10px; -} - -.menu input[type=submit]:hover { - background-color: #0099cc; -} - - -.menu ul { - list-style-type: none; - margin: 0; - padding: 0; -} - -table.directory { - width: 90%; - border-collapse : collapse; - margin : auto; - padding : 0px; - background: yellow; -} - -tr.directory:nth-child(odd) { - background : #FFFFFF; -} - -tr.directory:nth-child(even) { - background : #CCFFFF; -} - -
--- a/image/w/css/style.css Thu May 02 21:19:50 2019 +0200 +++ b/image/w/css/style.css Sat May 04 11:41:16 2019 +0200 @@ -1,4 +1,3 @@ - body { background: #ccc; @@ -6,8 +5,7 @@ margin: 0px; } - -#webui_table { +#webui_win { width: 360px; height: 270px; background: #353536; @@ -15,6 +13,25 @@ border-color: #59b4d4; } +#topline { + width: 100%; + height: 24px; + background: blue; + color: yellow; + text-align: center; + font-size: 18px; +} + +#mltline, +#hltline { + width: 100%; + height: 100px; +} + +#midline { + width: 100%; + height: 45px; +} #mlt_table { width: 178px; @@ -45,6 +62,13 @@ background-color: #e7e7e7; color: black; } +.okbutton { + width: 60px; + height: 36px; + border-radius: 4px; + background-color: #575757; color: white; +} + #timer { color: white; text-align: center;
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/image/w/css/web.css Sat May 04 11:41:16 2019 +0200 @@ -0,0 +1,86 @@ + +body { + margin:0; + padding:0; + font-family: Helvetica; + /*Background image with light grey curve.*/ + background-color:#494949; + background-repeat:no-repeat; + background-position:right bottom; + height:100%; +/* touch-action: none; */ +} + +html { + height:100%; +} + + +/* ---------------------------------------- + * Main Area + * ---------------------------------------- + */ + + +.menu { + width: 270px; + margin: auto; +} + +.menu input[type=none] { + background-color: #0077bb; + border: none; + color: yellow; + font-weight: bold; + width: 250px; + padding: 10px 0px; + text-decoration: none; + font-size: 16px; + margin: 8px; + text-align: center; + border-radius: 10px; +} + +.menu input[type=submit] { + background-color: #33b5e5; + border: none; + color: white; + font-weight: bold; + width: 250px; + padding: 15px 32px; + text-decoration: none; + font-size: 16px; + cursor: pointer; + margin: 8px; + text-align: center; + border-radius: 10px; +} + +.menu input[type=submit]:hover { + background-color: #0099cc; +} + + +.menu ul { + list-style-type: none; + margin: 0; + padding: 0; +} + +table.directory { + width: 90%; + border-collapse : collapse; + margin : auto; + padding : 0px; + background: yellow; +} + +tr.directory:nth-child(odd) { + background : #FFFFFF; +} + +tr.directory:nth-child(even) { + background : #CCFFFF; +} + +
--- a/image/w/js/webui.js Thu May 02 21:19:50 2019 +0200 +++ b/image/w/js/webui.js Sat May 04 11:41:16 2019 +0200 @@ -1,11 +1,53 @@ document.getElementById("test").innerHTML = "WebSocket is not connected"; var websocket = new WebSocket('ws://'+location.hostname+'/ws'); -var slider = document.getElementById("myRange"); +//var slider = document.getElementById("myRange"); var BBScreen={ + 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(); + break; + case '109': $("#mltline").show(); // boil + $("#midline").show(); + $("#hltline").hide(); + break; + case '2': $("#mltline").hide(); + $("#midline").hide(); + $("#hltline").hide(); + $("#row_info").show(); + console.log("this is 2"); + break; + default: $("#mltline").hide(); + $("#midline").hide(); + $("#hltline").hide(); + console.log("this is default"); + break; + } + }, MLT_pv: function(s) { $("#mlt_pv").text(s); }, @@ -56,6 +98,9 @@ var b=this; var a=JSON.parse(e); var c={ + main: function(v){ + BBScreen.setScreen(v) + }, mlt_pv:function(v){ BBScreen.MLT_pv(v) }, @@ -100,16 +145,18 @@ }; -function sendMsg() { - //websocket.send("sup playa!"); - websocket.send('L50'); - console.log('Sent message to websocket'); +function sendTouch(x, 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); }); + + websocket.onopen = function(evt) { console.log('WebSocket connection opened'); -// websocket.send("It's open! Hooray!!!"); document.getElementById("test").innerHTML = "WebSocket is connected!"; }
--- a/image/w/logs.html Thu May 02 21:19:50 2019 +0200 +++ b/image/w/logs.html Sat May 04 11:41:16 2019 +0200 @@ -6,7 +6,7 @@ <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <script src="js/jquery-1.12.4.min.js"></script> - <link rel="stylesheet" href="app/styles/web.css"> + <link rel="stylesheet" href="css/web.css"> </head> <body> @@ -27,7 +27,9 @@ <br> - <form action="index.html"><input type="submit" class="button" value="Hoofdmenu"></form> + <div class="menu"> + <form action="index.html"><input type="submit" class="button" value="Hoofdmenu"></form> + </div> <script>
--- a/image/w/webui.html Thu May 02 21:19:50 2019 +0200 +++ b/image/w/webui.html Sat May 04 11:41:16 2019 +0200 @@ -4,71 +4,130 @@ <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, maximum-scale=1.0, user-scalable=no" /> + <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_table"> + <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;'> - <tr style="color: yellow; background-color: blue; height: 26px;"> - <th colspan="3"><span id="top_msg">top_msg</span></th> - </tr> - <tr> - <td style="width: 20%;"> - <button style="float: left; margin-left: 5px;" type="button" class="appbutton">Hand</button> - <button style="float: left; margin-left: 5px; margin-top: 12px;" type="button" class="appbutton">+sp</button> - </td> - <td style="width: 60%;"> - <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 style="width: 20%;"> - <button style="float: left; margin-left: 5px;" type="button" class="appbutton">Auto</button> - <button style="float: left; margin-left: 5px; margin-top: 12px;" type="button" class="appbutton">-sp</button> + <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 © 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> - <tr> - <td><button style="float: left; margin-left: 5px;" type="button" class="appbutton">+1m</button></td> - <td><div id="timer">01:23:45</div></td> - <td><button style="float: left; margin-left: 5px;" type="button" class="appbutton">-1m</button></td> - </tr> - <tr> - <td><button style="float: left; margin-left: 5px;" type="button" class="appbutton">+sp</button> - <button style="float: left; margin-left: 5px; margin-top: 12px;" type="button" class="appbutton">Info</button></td> - <td> - <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">-sp</button> - <button style="float: left; margin-left: 5px; margin-top: 12px;" type="button" class="appbutton">Tools</button></td> - </tr> + </table> - </div> + </div> <!-- webui_win --> <br> <form action="index.html"><input type="submit" class="button" value="Hoofdmenu"></form>
--- a/main/task_tft.c Thu May 02 21:19:50 2019 +0200 +++ b/main/task_tft.c Sat May 04 11:41:16 2019 +0200 @@ -30,7 +30,7 @@ extern bool _NewMinute; extern bool _UseHLT; extern bool System_TimeOk; -extern const esp_app_desc_t *app_desc; +extern const esp_app_desc_t *app_desc; static const char *TAG = "task_tft";
--- a/sdkconfig Thu May 02 21:19:50 2019 +0200 +++ b/sdkconfig Sat May 04 11:41:16 2019 +0200 @@ -70,10 +70,8 @@ # CONFIG_MONITOR_BAUD_OTHER is not set CONFIG_MONITOR_BAUD_OTHER_VAL=115200 CONFIG_MONITOR_BAUD=115200 -CONFIG_TEMP_SENSORS_ONEWIRE=y -# CONFIG_TEMP_SENSORS_SIMULATOR is not set -CONFIG_ONE_WIRE_MLT=27 -CONFIG_ONE_WIRE_HLT=26 +# CONFIG_TEMP_SENSORS_ONEWIRE is not set +CONFIG_TEMP_SENSORS_SIMULATOR=y CONFIG_SSR_MLT_GPIO=32 CONFIG_SSR_HLT_GPIO=33 CONFIG_SSR_PUMP_GPIO=12
