djsundog/circuitpython
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make serial page work ok including on mobile

Browse Source
This commit is contained in:
Scott Shawcroft 2022-07-08 16:57:19 -07:00
parent 8d9c995298
commit 557e35469f
No known key found for this signature in database
GPG Key ID: 0DFD512649C052DA
3 changed files with 59 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
supervisor/shared/web_workflow/static/serial.html
View File

@ -1,14 +1,24 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html style="height: 100%;">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head> <head>
<title>Simple client</title> <title>Simple client</title>
<script src="/serial.js" defer=true></script> <script src="/serial.js" defer=true></script>
</head> </head>
<body> <body style="flex-direction: column; display: flex; height: 100%; width: 100%; margin: 0; font-size: 1rem;">
<pre id="log"></pre> <div style="flex: auto; display: flex; overflow: scroll; flex-direction: column;">
<textarea id="input" rows="1" spellcheck="false" wrap="off" style="resize: none;"></textarea> <pre id="log" style="margin:0; margin-top: auto;"></pre>
<span style="height: 1px;">&nbsp</span>
</div>
<div id="controls" style="flex: none; display: flex;">
<fieldset style="display: inline-block; padding: 0;">
<legend>Ctrl</legend>
<button id="c">C</button>
<button id="d">D</button>
</fieldset>
<textarea id="input" rows="1" spellcheck="false" wrap="off" style="resize: none; flex: auto; font-size: 1rem;" autocapitalize="none" autocomplete="off" autocorrect="off"></textarea>
<button onclick="onSubmit(); return false;">Send</button> <button onclick="onSubmit(); return false;">Send</button>
<button onclick="onCloseClick(); return false;">close</button> </div>
</body> </body>
</html> </html>

56
supervisor/shared/web_workflow/static/serial.js
View File

@ -1,7 +1,9 @@
var ws; var ws;
var input = document.getElementById("input"); var input = document.getElementById("input");
input.value = "";
var title = document.querySelector("title"); var title = document.querySelector("title");
var log = document.getElementById("log");
function set_enabled(enabled) { function set_enabled(enabled) {
input.disabled = !enabled; input.disabled = !enabled;
@ -14,35 +16,21 @@ function set_enabled(enabled) {
set_enabled(false); set_enabled(false);
function onSubmit() { function onSubmit() {
console.log("submit"); ws.send("\r");
// You can send message to the Web Socket using ws.send.
ws.send(input.value);
// output("send: " + input.value);
input.value = ""; input.value = "";
input.focus(); input.focus();
} }
function onCloseClick() {
console.log("close clicked");
ws.close();
}
function output(str) {
var log = document.getElementById("log");
log.innerHTML += str;
}
// Connect to Web Socket // Connect to Web Socket
ws = new WebSocket("ws://cpy-f57ce8.local/cp/serial/"); ws = new WebSocket("ws://" + window.location.host + "/cp/serial/");
// ws = new WebSocket("ws://127.0.0.1:9001")
// Set event handlers.
ws.onopen = function() { ws.onopen = function() {
console.log("onopen");
set_enabled(true); set_enabled(true);
}; };
var setting_title = false; var setting_title = false;
var encoder = new TextEncoder();
var left_count = 0;
ws.onmessage = function(e) { ws.onmessage = function(e) {
// e.data contains received string. // e.data contains received string.
if (e.data == "\x1b]0;") { if (e.data == "\x1b]0;") {
@ -52,22 +40,44 @@ ws.onmessage = function(e) {
setting_title = false; setting_title = false;
} else if (setting_title) { } else if (setting_title) {
title.textContent += e.data; title.textContent += e.data;
} else if (e.data == "\b") {
left_count += 1;
} else if (e.data == "\x1b[K") { // Clear line
log.textContent = log.textContent.slice(0, -left_count);
left_count = 0;
} else { } else {
output(e.data); log.textContent += e.data;
} }
document.querySelector("span").scrollIntoView();
}; };
ws.onclose = function() { ws.onclose = function() {
console.log("onclose");
set_enabled(false); set_enabled(false);
}; };
ws.onerror = function(e) { ws.onerror = function(e) {
// output("onerror");
console.log(e);
set_enabled(false); set_enabled(false);
}; };
input.onbeforeinput = function(e) { input.onbeforeinput = function(e) {
console.log(e); if (e.inputType == "insertLineBreak") {
ws.send("\r");
input.value = "";
input.focus();
e.preventDefault();
} else if (e.inputType == "insertText") {
ws.send(e.data);
} else if (e.inputType == "deleteContentBackward") {
ws.send("\b");
}
}
let ctrl_c = document.querySelector("#c");
ctrl_c.onclick = function() {
ws.send("\x03");
}
let ctrl_d = document.querySelector("#d");
ctrl_d.onclick = function() {
ws.send("\x04");
} }

9
supervisor/shared/web_workflow/websocket.c
View File

@ -124,7 +124,6 @@ static void _read_next_frame_header(void) {
size_t mask_offset = cp_serial.frame_index - mask_start; size_t mask_offset = cp_serial.frame_index - mask_start;
cp_serial.mask[mask_offset] = h; cp_serial.mask[mask_offset] = h;
cp_serial.frame_index++; cp_serial.frame_index++;
ESP_LOGI(TAG, "mask %08x", (uint32_t)*cp_serial.mask);
} }
// Reply to PINGs and CLOSE. // Reply to PINGs and CLOSE.
while ((cp_serial.opcode == 0x8 || while ((cp_serial.opcode == 0x8 ||
@ -136,6 +135,11 @@ static void _read_next_frame_header(void) {
if (cp_serial.opcode == 0x9) { if (cp_serial.opcode == 0x9) {
ESP_LOGI(TAG, "websocket ping"); ESP_LOGI(TAG, "websocket ping");
opcode = 0xA; // PONG opcode = 0xA; // PONG
} else {
// Set the TCP socket to send immediately so that we send the payload back before
// closing the connection.
int nodelay = 1;
lwip_setsockopt(cp_serial.socket.num, IPPROTO_TCP, TCP_NODELAY, &nodelay, sizeof(nodelay));
} }
uint8_t frame_header[2]; uint8_t frame_header[2];
frame_header[0] = 1 << 7 | opcode; frame_header[0] = 1 << 7 | opcode;
@ -158,6 +162,8 @@ static void _read_next_frame_header(void) {
if (cp_serial.opcode == 0x8) { if (cp_serial.opcode == 0x8) {
ESP_LOGI(TAG, "websocket closed"); ESP_LOGI(TAG, "websocket closed");
cp_serial.closed = true; cp_serial.closed = true;
common_hal_socketpool_socket_close(&cp_serial.socket);
} }
} }
} }
@ -193,6 +199,7 @@ bool websocket_available(void) {
char websocket_read_char(void) { char websocket_read_char(void) {
uint8_t c; uint8_t c;
_read_next_payload_byte(&c); _read_next_payload_byte(&c);
ESP_LOGI(TAG, "read %c", c);
return c; return c;
} }