123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263 |
- /* clang-format off */
- static const char js_wsapp[] PROGMEM = R"=====(var cmd = document.getElementById('cmd');
- var listMsgs = document.getElementById('msgs');
- var socketStatus = document.getElementById('status');
- var btnClose = document.getElementById('btnClose');
- var wsUrl = 'ws://' + window.location.hostname + ':81';
- var socket = new WebSocket(wsUrl);
- socket.onopen = function(event) {
- //socketStatus.innerHTML = 'Connected to: ' + event.currentTarget.URL;
- socketStatus.innerHTML = 'Connected';
- socketStatus.className = 'open';
- };
- socket.onerror = function(error) {
- console.log('WebSocket error: ' + error);
- };
- socket.onmessage = function(event) {
- var msg = event.data;
- listMsgs.innerHTML += msg;
- listMsgs.scrollTop = listMsgs.scrollHeight;
- };
- socket.onclose = function(event) {
- socketStatus.innerHTML = 'Disconnected';
- socketStatus.className = 'closed';
- };
- function sendCmd() {
- socket.send(cmd.value);
- listMsgs.innerHTML += 'Sent: ' + cmd.value + '\n';
- cmd.value = '';
- return false;
- }
- function togConn() {
- if(socketStatus.className=='open') { socket.close(); btnClose.innerHTML='Reload'; }
- else location.reload();
- }
- document.getElementById("cmd")
- .addEventListener("keyup", function(event) {
- event.preventDefault();
- if (event.keyCode === 13) {
- document.getElementById("btnSend").click();
- }
- });
- )====="; // js_wsapp
- static const char html_console_body[] PROGMEM = R"=====(
- <p><b>Console</b></p>
- <div id="status">Connecting...</div>
- <table style='width:100%'>
- <tr><td style='width:800px'><textarea id='msgs'></textarea></td></tr>
- <tr><td style='width:100%'><input id='cmd' type='text'></td></tr>
- <tr><td style='width:100%'><button type='submit' id='btnSend' onclick='sendCmd();'>Send</button></td></tr>
- <tr><td style='width:100%'><button type='button' id='btnClose' onclick='togConn();'>Disconnect</button></td></tr>
- <tr><td style='width:100%'><form action='.' method='get'><button class='bgrey'>Main Menu</button></form></td></tr>
- </table>
- <script src="wsapp.js"></script>
- )====="; // html_console_body
|