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

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

@ -1,14 +1,24 @@
<!DOCTYPE html>
<html>
<html style="height: 100%;">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>Simple client</title>
<script src="/serial.js" defer=true></script>
</head>
<body>
<pre id="log"></pre>
<textarea id="input" rows="1" spellcheck="false" wrap="off" style="resize: none;"></textarea>
<button onclick="onSubmit(); return false;">Send</button>
<button onclick="onCloseClick(); return false;">close</button>
<body style="flex-direction: column; display: flex; height: 100%; width: 100%; margin: 0; font-size: 1rem;">
<div style="flex: auto; display: flex; overflow: scroll; flex-direction: column;">
<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>
</div>
</body>
</html>

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

@ -1,7 +1,9 @@
var ws;
var input = document.getElementById("input");
input.value = "";
var title = document.querySelector("title");
var log = document.getElementById("log");
function set_enabled(enabled) {
input.disabled = !enabled;
@ -14,35 +16,21 @@ function set_enabled(enabled) {
set_enabled(false);
function onSubmit() {
console.log("submit");
// You can send message to the Web Socket using ws.send.
ws.send(input.value);
// output("send: " + input.value);
input.value = "";
input.focus();
}
function onCloseClick() {
console.log("close clicked");
ws.close();
}
function output(str) {
var log = document.getElementById("log");
log.innerHTML += str;
ws.send("\r");
input.value = "";
input.focus();
}
// Connect to Web Socket
ws = new WebSocket("ws://cpy-f57ce8.local/cp/serial/");
// ws = new WebSocket("ws://127.0.0.1:9001")
ws = new WebSocket("ws://" + window.location.host + "/cp/serial/");
// Set event handlers.
ws.onopen = function() {
console.log("onopen");
set_enabled(true);
};
var setting_title = false;
var encoder = new TextEncoder();
var left_count = 0;
ws.onmessage = function(e) {
// e.data contains received string.
if (e.data == "\x1b]0;") {
@ -52,22 +40,44 @@ ws.onmessage = function(e) {
setting_title = false;
} else if (setting_title) {
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 {
output(e.data);
log.textContent += e.data;
}
document.querySelector("span").scrollIntoView();
};
ws.onclose = function() {
console.log("onclose");
set_enabled(false);
};
ws.onerror = function(e) {
// output("onerror");
console.log(e);
set_enabled(false);
};
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;
cp_serial.mask[mask_offset] = h;
cp_serial.frame_index++;
ESP_LOGI(TAG, "mask %08x", (uint32_t)*cp_serial.mask);
}
// Reply to PINGs and CLOSE.
while ((cp_serial.opcode == 0x8 ||
@ -136,6 +135,11 @@ static void _read_next_frame_header(void) {
if (cp_serial.opcode == 0x9) {
ESP_LOGI(TAG, "websocket ping");
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];
frame_header[0] = 1 << 7 | opcode;
@ -158,6 +162,8 @@ static void _read_next_frame_header(void) {
if (cp_serial.opcode == 0x8) {
ESP_LOGI(TAG, "websocket closed");
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) {
uint8_t c;
_read_next_payload_byte(&c);
ESP_LOGI(TAG, "read %c", c);
return c;
}