Skip to content

Commit 557e354

Browse files
tannewttannewt
committed
Make serial page work ok including on mobile
1 parent 8d9c995 commit 557e354

File tree

3 files changed

+59
-32
lines changed

3 files changed

+59
-32
lines changed

‎supervisor/shared/web_workflow/static/serial.html

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,24 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html style="height: 100%;">
3+
<meta name="viewport" content="width=device-width, initial-scale=1">
34
<head>
45
<title>Simple client</title>
56

67
<script src="/serial.js" defer=true></script>
78
</head>
8-
<body>
9-
<pre id="log"></pre>
10-
<textarea id="input" rows="1" spellcheck="false" wrap="off" style="resize: none;"></textarea>
11-
<button onclick="onSubmit(); return false;">Send</button>
12-
<button onclick="onCloseClick(); return false;">close</button>
9+
<body style="flex-direction: column; display: flex; height: 100%; width: 100%; margin: 0; font-size: 1rem;">
10+
<div style="flex: auto; display: flex; overflow: scroll; flex-direction: column;">
11+
<pre id="log" style="margin:0; margin-top: auto;"></pre>
12+
<span style="height: 1px;">&nbsp</span>
13+
</div>
14+
<div id="controls" style="flex: none; display: flex;">
15+
<fieldset style="display: inline-block; padding: 0;">
16+
<legend>Ctrl</legend>
17+
<button id="c">C</button>
18+
<button id="d">D</button>
19+
</fieldset>
20+
<textarea id="input" rows="1" spellcheck="false" wrap="off" style="resize: none; flex: auto; font-size: 1rem;" autocapitalize="none" autocomplete="off" autocorrect="off"></textarea>
21+
<button onclick="onSubmit(); return false;">Send</button>
22+
</div>
1323
</body>
1424
</html>

‎supervisor/shared/web_workflow/static/serial.js

Lines changed: 35 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11

22
var ws;
33
var input = document.getElementById("input");
4+
input.value = "";
45
var title = document.querySelector("title");
6+
var log = document.getElementById("log");
57

68
function set_enabled(enabled) {
79
input.disabled = !enabled;
@@ -14,35 +16,21 @@ function set_enabled(enabled) {
1416
set_enabled(false);
1517

1618
function onSubmit() {
17-
console.log("submit");
18-
// You can send message to the Web Socket using ws.send.
19-
ws.send(input.value);
20-
// output("send: " + input.value);
21-
input.value = "";
22-
input.focus();
23-
}
24-
25-
function onCloseClick() {
26-
console.log("close clicked");
27-
ws.close();
28-
}
29-
30-
function output(str) {
31-
var log = document.getElementById("log");
32-
log.innerHTML += str;
19+
ws.send("\r");
20+
input.value = "";
21+
input.focus();
3322
}
3423

3524
// Connect to Web Socket
36-
ws = new WebSocket("ws://cpy-f57ce8.local/cp/serial/");
37-
// ws = new WebSocket("ws://127.0.0.1:9001")
25+
ws = new WebSocket("ws://" + window.location.host + "/cp/serial/");
3826

39-
// Set event handlers.
4027
ws.onopen = function() {
41-
console.log("onopen");
4228
set_enabled(true);
4329
};
4430

4531
var setting_title = false;
32+
var encoder = new TextEncoder();
33+
var left_count = 0;
4634
ws.onmessage = function(e) {
4735
// e.data contains received string.
4836
if (e.data == "\x1b]0;") {
@@ -52,22 +40,44 @@ ws.onmessage = function(e) {
5240
setting_title = false;
5341
} else if (setting_title) {
5442
title.textContent += e.data;
43+
} else if (e.data == "\b") {
44+
left_count += 1;
45+
} else if (e.data == "\x1b[K") { // Clear line
46+
log.textContent = log.textContent.slice(0, -left_count);
47+
left_count = 0;
5548
} else {
56-
output(e.data);
49+
log.textContent += e.data;
5750
}
51+
document.querySelector("span").scrollIntoView();
5852
};
5953

6054
ws.onclose = function() {
61-
console.log("onclose");
6255
set_enabled(false);
6356
};
6457

6558
ws.onerror = function(e) {
66-
// output("onerror");
67-
console.log(e);
6859
set_enabled(false);
6960
};
7061

7162
input.onbeforeinput = function(e) {
72-
console.log(e);
63+
if (e.inputType == "insertLineBreak") {
64+
ws.send("\r");
65+
input.value = "";
66+
input.focus();
67+
e.preventDefault();
68+
} else if (e.inputType == "insertText") {
69+
ws.send(e.data);
70+
} else if (e.inputType == "deleteContentBackward") {
71+
ws.send("\b");
72+
}
73+
}
74+
75+
let ctrl_c = document.querySelector("#c");
76+
ctrl_c.onclick = function() {
77+
ws.send("\x03");
78+
}
79+
80+
let ctrl_d = document.querySelector("#d");
81+
ctrl_d.onclick = function() {
82+
ws.send("\x04");
7383
}

‎supervisor/shared/web_workflow/websocket.c

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,6 @@ static void _read_next_frame_header(void) {
124124
size_t mask_offset = cp_serial.frame_index - mask_start;
125125
cp_serial.mask[mask_offset] = h;
126126
cp_serial.frame_index++;
127-
ESP_LOGI(TAG, "mask %08x", (uint32_t)*cp_serial.mask);
128127
}
129128
// Reply to PINGs and CLOSE.
130129
while ((cp_serial.opcode == 0x8 ||
@@ -136,6 +135,11 @@ static void _read_next_frame_header(void) {
136135
if (cp_serial.opcode == 0x9) {
137136
ESP_LOGI(TAG, "websocket ping");
138137
opcode = 0xA; // PONG
138+
} else {
139+
// Set the TCP socket to send immediately so that we send the payload back before
140+
// closing the connection.
141+
int nodelay = 1;
142+
lwip_setsockopt(cp_serial.socket.num, IPPROTO_TCP, TCP_NODELAY, &nodelay, sizeof(nodelay));
139143
}
140144
uint8_t frame_header[2];
141145
frame_header[0] = 1 << 7 | opcode;
@@ -158,6 +162,8 @@ static void _read_next_frame_header(void) {
158162
if (cp_serial.opcode == 0x8) {
159163
ESP_LOGI(TAG, "websocket closed");
160164
cp_serial.closed = true;
165+
166+
common_hal_socketpool_socket_close(&cp_serial.socket);
161167
}
162168
}
163169
}
@@ -193,6 +199,7 @@ bool websocket_available(void) {
193199
char websocket_read_char(void) {
194200
uint8_t c;
195201
_read_next_payload_byte(&c);
202+
ESP_LOGI(TAG, "read %c", c);
196203
return c;
197204
}
198205

0 commit comments

Comments
 (0)