mirror/mongoose
1
0
Fork 0
mirror of https://github.com/cesanta/mongoose.git synced 2025-07-25 06:37:19 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Refactor UART example

Browse Source
This commit is contained in:
Sergey Lyubka 2022-06-18 04:25:05 +01:00
parent 1640287897
commit c84dab21e4
4 changed files with 747 additions and 304 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
examples/uart-bridge/net.c
View File

@ -3,13 +3,25 @@
#include "mongoose.h" #include "mongoose.h"
static const char *s_tcp_url = "tcp://0.0.0.0:4001"; #define DEFAULT_TCP "tcp://0.0.0.0:4001"
static const char *s_ws_url = "ws://0.0.0.0:4002"; #define DEFAULT_WEBSOCKET "ws://0.0.0.0:4002"
static struct mg_connection *s_tcp_conn; #define DEFAULT_MQTT "mqtt://broker.hivemq.com:1883?tx=b/tx&rx=b/rx"
static struct mg_connection *s_ws_conn;
static int s_rx = 4; struct endpoint {
static int s_tx = 5; char *url;
static int s_baud = 115200; bool enable;
struct mg_connection *c;
};
struct state {
struct endpoint tcp, websocket, mqtt;
int tx, rx, baud;
} s_state = {.tcp = {.enable = true},
.websocket = {.enable = true},
.mqtt = {.enable = true},
.tx = 5,
.rx = 4,
.baud = 115200};
void uart_init(int tx, int rx, int baud); void uart_init(int tx, int rx, int baud);
int uart_read(char *buf, size_t len); int uart_read(char *buf, size_t len);
@ -46,7 +58,7 @@ static void ws_fn(struct mg_connection *c, int ev, void *evd, void *fnd) {
uart_write(wm->data.ptr, wm->data.len); // Send to UART uart_write(wm->data.ptr, wm->data.len); // Send to UART
c->recv.len = 0; // Discard received data c->recv.len = 0; // Discard received data
} else if (ev == MG_EV_CLOSE) { } else if (ev == MG_EV_CLOSE) {
if (c->is_listening) s_ws_conn = NULL; if (c->is_listening) s_state.websocket.c = NULL;
} }
(void) fnd; (void) fnd;
} }
@ -60,7 +72,35 @@ static void tcp_fn(struct mg_connection *c, int ev, void *evd, void *fnd) {
uart_write(c->recv.buf, c->recv.len); // Send to UART uart_write(c->recv.buf, c->recv.len); // Send to UART
c->recv.len = 0; // Discard received data c->recv.len = 0; // Discard received data
} else if (ev == MG_EV_CLOSE) { } else if (ev == MG_EV_CLOSE) {
if (c->is_listening) s_tcp_conn = NULL; if (c->is_listening) s_state.tcp.c = NULL;
}
(void) fnd, (void) evd;
}
// Extract RX topic name from the MQTT address
static struct mg_str mqtt_rx_topic(void) {
char *url = s_state.mqtt.url, *p = strrchr(url, ',');
return mg_str(p ? p : "b/rx");
}
// Extract TX topic name from the MQTT address
static struct mg_str mqtt_tx_topic(void) {
char *url = s_state.mqtt.url, *p1 = strchr(url, ','), *p2 = strrchr(url, ',');
return mg_str_n(p1 && p2 ? p1 : "b/tx", p1 && p2 ? p2 - p1 + 1 : 4);
}
// Event handler for MQTT connection
static void mq_fn(struct mg_connection *c, int ev, void *evd, void *fnd) {
if (ev == MG_EV_OPEN) {
// c->is_hexdumping = 1;
c->label[0] = 'M';
} else if (ev == MG_EV_MQTT_OPEN) {
mg_mqtt_sub(c, mqtt_rx_topic(), 1); // Subscribe to RX topic
} else if (ev == MG_EV_MQTT_MSG) {
struct mg_mqtt_message *mm = evd; // MQTT message
uart_write(mm->data.ptr, mm->data.len); // Send to UART
} else if (ev == MG_EV_CLOSE) {
s_state.mqtt.c = NULL;
} }
(void) fnd, (void) evd; (void) fnd, (void) evd;
} }
@ -69,8 +109,16 @@ static void tcp_fn(struct mg_connection *c, int ev, void *evd, void *fnd) {
static void timer_fn(void *param) { static void timer_fn(void *param) {
// Start listeners if they're stopped for any reason // Start listeners if they're stopped for any reason
struct mg_mgr *mgr = (struct mg_mgr *) param; struct mg_mgr *mgr = (struct mg_mgr *) param;
if (s_tcp_conn == NULL) s_tcp_conn = mg_listen(mgr, s_tcp_url, tcp_fn, 0); if (s_state.tcp.c == NULL && s_state.tcp.enable) {
if (s_ws_conn == NULL) s_ws_conn = mg_http_listen(mgr, s_ws_url, ws_fn, 0); s_state.tcp.c = mg_listen(mgr, s_state.tcp.url, tcp_fn, 0);
}
if (s_state.websocket.c == NULL && s_state.websocket.enable) {
s_state.websocket.c = mg_http_listen(mgr, s_state.websocket.url, ws_fn, 0);
}
if (s_state.mqtt.c == NULL && s_state.mqtt.enable) {
struct mg_mqtt_opts opts = {.clean = true, .will_qos = 1};
s_state.mqtt.c = mg_mqtt_connect(mgr, s_state.mqtt.url, &opts, mq_fn, 0);
}
// Read UART // Read UART
char buf[512]; char buf[512];
@ -80,6 +128,8 @@ static void timer_fn(void *param) {
for (struct mg_connection *c = mgr->conns; c != NULL; c = c->next) { for (struct mg_connection *c = mgr->conns; c != NULL; c = c->next) {
if (c->label[0] == 'W') mg_ws_send(c, buf, len, WEBSOCKET_OP_TEXT); if (c->label[0] == 'W') mg_ws_send(c, buf, len, WEBSOCKET_OP_TEXT);
if (c->label[0] == 'T') mg_send(c, buf, len); if (c->label[0] == 'T') mg_send(c, buf, len);
if (c->label[0] == 'M')
mg_mqtt_pub(c, mqtt_tx_topic(), mg_str_n(buf, len), 1, false);
} }
} }
} }
@ -88,20 +138,29 @@ static void timer_fn(void *param) {
void uart_bridge_fn(struct mg_connection *c, int ev, void *ev_data, void uart_bridge_fn(struct mg_connection *c, int ev, void *ev_data,
void *fn_data) { void *fn_data) {
if (ev == MG_EV_OPEN && c->is_listening) { if (ev == MG_EV_OPEN && c->is_listening) {
s_state.tcp.url = strdup(DEFAULT_TCP);
s_state.websocket.url = strdup(DEFAULT_WEBSOCKET);
s_state.mqtt.url = strdup(DEFAULT_MQTT);
mg_timer_add(c->mgr, 20, MG_TIMER_REPEAT, timer_fn, c->mgr); mg_timer_add(c->mgr, 20, MG_TIMER_REPEAT, timer_fn, c->mgr);
uart_init(s_tx, s_rx, s_baud); uart_init(s_state.tx, s_state.rx, s_state.baud);
} else if (ev == MG_EV_HTTP_MSG) { } else if (ev == MG_EV_HTTP_MSG) {
struct mg_http_message *hm = (struct mg_http_message *) ev_data; struct mg_http_message *hm = (struct mg_http_message *) ev_data;
if (mg_http_match_uri(hm, "/api/hi")) { if (mg_http_match_uri(hm, "/api/hi")) {
mg_http_reply(c, 200, "", "hi\n"); // Testing endpoint mg_http_reply(c, 200, "", "hi\n"); // Testing endpoint
} else if (mg_http_match_uri(hm, "/api/config/get")) { } else if (mg_http_match_uri(hm, "/api/config/get")) {
mg_http_reply( mg_http_reply(c, 200, "Content-Type: application/json\r\n",
c, 200, "Content-Type: application/json\r\n", "{%Q:{%Q:%Q,%Q:%s},%Q:{%Q:%Q,%Q:%s},%Q:{%Q:%Q,%Q:%s},"
"{\"tcp\":\"%s\",\"ws\":\"%s\",\"rx\":%d,\"tx\":%d,\"baud\":%d}\n", "%Q:%d,%Q:%d,%Q:%d}\n",
s_tcp_url, s_ws_url, s_rx, s_tx, s_baud); "tcp", "url", s_state.tcp.url, "enable",
s_state.tcp.enable ? "true" : "false", "ws", "url",
s_state.websocket.url, "enable",
s_state.websocket.enable ? "true" : "false", "mqtt", "url",
s_state.mqtt.url, "enable",
s_state.mqtt.enable ? "true" : "false", "rx", s_state.rx,
"tx", s_state.tx, "baud", s_state.baud);
} else { } else {
struct mg_http_serve_opts opts = {0}; struct mg_http_serve_opts opts = {0};
#if 1 #if 0
opts.root_dir = "/web_root"; opts.root_dir = "/web_root";
opts.fs = &mg_fs_packed; opts.fs = &mg_fs_packed;
#else #else

813
examples/uart-bridge/packed_fs.c
View File

@ -61,192 +61,424 @@ static const unsigned char v2[] = {
32, 32, 99, 111, 110, 115, 116, 32, 91, 99, 102, 103, // const [cfg 32, 32, 99, 111, 110, 115, 116, 32, 91, 99, 102, 103, // const [cfg
44, 32, 115, 101, 116, 67, 102, 103, 93, 32, 61, 32, // , setCfg] = 44, 32, 115, 101, 116, 67, 102, 103, 93, 32, 61, 32, // , setCfg] =
117, 115, 101, 83, 116, 97, 116, 101, 40, 123, 116, 99, // useState({tc 117, 115, 101, 83, 116, 97, 116, 101, 40, 123, 116, 99, // useState({tc
112, 58, 32, 39, 39, 44, 32, 119, 115, 58, 32, 39, // p: '', ws: ' 112, 58, 32, 123, 125, 44, 32, 119, 115, 58, 32, 123, // p: {}, ws: {
39, 125, 41, 59, 10, 32, 32, 99, 111, 110, 115, 116, // '});. const 125, 44, 32, 109, 113, 116, 116, 58, 32, 123, 125, 125, // }, mqtt: {}}
32, 91, 109, 101, 115, 115, 97, 103, 101, 115, 44, 32, // [messages, 41, 59, 10, 32, 32, 99, 111, 110, 115, 116, 32, 91, // );. const [
115, 101, 116, 77, 101, 115, 115, 97, 103, 101, 115, 93, // setMessages] 109, 101, 115, 115, 97, 103, 101, 115, 44, 32, 115, 101, // messages, se
116, 77, 101, 115, 115, 97, 103, 101, 115, 93, 32, 61, // tMessages] =
32, 117, 115, 101, 83, 116, 97, 116, 101, 40, 91, 93, // useState([]
41, 59, 10, 32, 32, 99, 111, 110, 115, 116, 32, 91, // );. const [
99, 111, 110, 110, 101, 99, 116, 101, 100, 44, 32, 115, // connected, s
101, 116, 67, 111, 110, 110, 101, 99, 116, 101, 100, 93, // etConnected]
32, 61, 32, 117, 115, 101, 83, 116, 97, 116, 101, 40, // = useState( 32, 61, 32, 117, 115, 101, 83, 116, 97, 116, 101, 40, // = useState(
91, 93, 41, 59, 10, 32, 32, 99, 111, 110, 115, 116, // []);. const 102, 97, 108, 115, 101, 41, 59, 10, 32, 32, 99, 111, // false);. co
32, 91, 116, 120, 116, 44, 32, 115, 101, 116, 84, 120, // [txt, setTx 110, 115, 116, 32, 91, 116, 120, 116, 44, 32, 115, 101, // nst [txt, se
116, 93, 32, 61, 32, 117, 115, 101, 83, 116, 97, 116, // t] = useStat 116, 84, 120, 116, 93, 32, 61, 32, 117, 115, 101, 83, // tTxt] = useS
101, 40, 39, 39, 41, 59, 10, 32, 32, 99, 111, 110, // e('');. con 116, 97, 116, 101, 40, 39, 39, 41, 59, 10, 32, 32, // tate('');.
115, 116, 32, 91, 99, 111, 110, 110, 101, 99, 116, 101, // st [connecte 99, 111, 110, 115, 116, 32, 91, 119, 115, 44, 32, 115, // const [ws, s
100, 44, 32, 115, 101, 116, 67, 111, 110, 110, 101, 99, // d, setConnec 101, 116, 87, 115, 93, 32, 61, 32, 117, 115, 101, 83, // etWs] = useS
116, 101, 100, 93, 32, 61, 32, 117, 115, 101, 83, 116, // ted] = useSt 116, 97, 116, 101, 40, 110, 117, 108, 108, 41, 59, 10, // tate(null);.
97, 116, 101, 40, 102, 97, 108, 115, 101, 41, 59, 10, // ate(false);. 32, 32, 99, 111, 110, 115, 116, 32, 91, 114, 120, 44, // const [rx,
32, 32, 99, 111, 110, 115, 116, 32, 91, 119, 115, 44, // const [ws, 32, 115, 101, 116, 82, 120, 93, 32, 61, 32, 117, 115, // setRx] = us
32, 115, 101, 116, 87, 115, 93, 32, 61, 32, 117, 115, // setWs] = us 101, 83, 116, 97, 116, 101, 40, 39, 39, 41, 59, 10, // eState('');.
101, 83, 116, 97, 116, 101, 40, 110, 117, 108, 108, 41, // eState(null) 32, 32, 99, 111, 110, 115, 116, 32, 91, 116, 120, 44, // const [tx,
59, 10, 10, 32, 32, 99, 111, 110, 115, 116, 32, 116, // ;.. const t 32, 115, 101, 116, 84, 120, 93, 32, 61, 32, 117, 115, // setTx] = us
99, 112, 95, 112, 111, 114, 116, 32, 61, 32, 99, 102, // cp_port = cf 101, 83, 116, 97, 116, 101, 40, 39, 39, 41, 59, 10, // eState('');.
103, 46, 116, 99, 112, 46, 115, 112, 108, 105, 116, 40, // g.tcp.split( 32, 32, 99, 111, 110, 115, 116, 32, 91, 98, 97, 117, // const [bau
39, 58, 39, 41, 91, 50, 93, 32, 124, 124, 32, 52, // ':')[2] || 4 100, 44, 32, 115, 101, 116, 66, 97, 117, 100, 93, 32, // d, setBaud]
48, 48, 49, 59, 10, 32, 32, 99, 111, 110, 115, 116, // 001;. const 61, 32, 117, 115, 101, 83, 116, 97, 116, 101, 40, 39, // = useState('
32, 119, 115, 95, 112, 111, 114, 116, 32, 61, 32, 99, // ws_port = c 39, 41, 59, 10, 32, 32, 99, 111, 110, 115, 116, 32, // ');. const
102, 103, 46, 119, 115, 46, 115, 112, 108, 105, 116, 40, // fg.ws.split( 91, 116, 99, 112, 112, 111, 114, 116, 44, 32, 115, 101, // [tcpport, se
39, 58, 39, 41, 91, 50, 93, 32, 124, 124, 32, 52, // ':')[2] || 4 116, 84, 99, 112, 112, 111, 114, 116, 93, 32, 61, 32, // tTcpport] =
48, 48, 50, 59, 10, 10, 32, 32, 99, 111, 110, 115, // 002;.. cons 117, 115, 101, 83, 116, 97, 116, 101, 40, 52, 48, 48, // useState(400
116, 32, 114, 101, 102, 114, 101, 115, 104, 32, 61, 32, // t refresh = 49, 41, 59, 10, 32, 32, 99, 111, 110, 115, 116, 32, // 1);. const
40, 41, 32, 61, 62, 10, 32, 32, 32, 32, 32, 32, // () =>. 91, 119, 115, 112, 111, 114, 116, 44, 32, 115, 101, 116, // [wsport, set
102, 101, 116, 99, 104, 40, 39, 47, 97, 112, 105, 47, // fetch('/api/ 87, 115, 112, 111, 114, 116, 93, 32, 61, 32, 117, 115, // Wsport] = us
99, 111, 110, 102, 105, 103, 47, 103, 101, 116, 39, 41, // config/get') 101, 83, 116, 97, 116, 101, 40, 52, 48, 48, 50, 41, // eState(4002)
46, 116, 104, 101, 110, 40, 114, 32, 61, 62, 32, 114, // .then(r => r 59, 10, 32, 32, 99, 111, 110, 115, 116, 32, 91, 109, // ;. const [m
46, 106, 115, 111, 110, 40, 41, 41, 46, 116, 104, 101, // .json()).the 113, 116, 116, 44, 32, 115, 101, 116, 77, 113, 116, 116, // qtt, setMqtt
110, 40, 114, 32, 61, 62, 32, 115, 101, 116, 67, 102, // n(r => setCf 93, 32, 61, 32, 117, 115, 101, 83, 116, 97, 116, 101, // ] = useState
103, 40, 114, 41, 41, 59, 10, 10, 32, 32, 99, 111, // g(r));.. co 40, 39, 39, 41, 59, 10, 10, 32, 32, 47, 47, 32, // ('');.. //
110, 115, 116, 32, 119, 97, 116, 99, 104, 87, 101, 98, // nst watchWeb 99, 111, 110, 115, 116, 32, 116, 99, 112, 95, 112, 111, // const tcp_po
115, 111, 99, 107, 101, 116, 32, 61, 32, 102, 117, 110, // socket = fun 114, 116, 32, 61, 32, 99, 102, 103, 46, 116, 99, 112, // rt = cfg.tcp
99, 116, 105, 111, 110, 40, 41, 32, 123, 10, 32, 32, // ction() {. 46, 115, 112, 108, 105, 116, 40, 39, 58, 39, 41, 91, // .split(':')[
32, 32, 47, 47, 32, 67, 111, 110, 110, 101, 99, 116, // // Connect 50, 93, 32, 124, 124, 32, 52, 48, 48, 49, 59, 10, // 2] || 4001;.
32, 116, 111, 32, 119, 101, 98, 115, 111, 99, 107, 101, // to websocke 32, 32, 47, 47, 32, 99, 111, 110, 115, 116, 32, 119, // // const w
114, 32, 112, 111, 114, 116, 44, 32, 116, 111, 32, 105, // r port, to i 115, 95, 112, 111, 114, 116, 32, 61, 32, 99, 102, 103, // s_port = cfg
109, 112, 108, 101, 109, 101, 110, 116, 32, 87, 83, 32, // mplement WS 46, 119, 115, 46, 115, 112, 108, 105, 116, 40, 39, 58, // .ws.split(':
99, 111, 110, 115, 111, 108, 101, 10, 32, 32, 32, 32, // console. 39, 41, 91, 50, 93, 32, 124, 124, 32, 52, 48, 48, // ')[2] || 400
118, 97, 114, 32, 108, 32, 61, 32, 119, 105, 110, 100, // var l = wind 50, 59, 10, 10, 32, 32, 99, 111, 110, 115, 116, 32, // 2;.. const
111, 119, 46, 108, 111, 99, 97, 116, 105, 111, 110, 44, // ow.location, 114, 101, 102, 114, 101, 115, 104, 32, 61, 32, 40, 41, // refresh = ()
32, 112, 114, 111, 116, 111, 32, 61, 32, 108, 46, 112, // proto = l.p 32, 61, 62, 32, 102, 101, 116, 99, 104, 40, 39, 47, // => fetch('/
114, 111, 116, 111, 99, 111, 108, 46, 114, 101, 112, 108, // rotocol.repl 97, 112, 105, 47, 99, 111, 110, 102, 105, 103, 47, 103, // api/config/g
97, 99, 101, 40, 39, 104, 116, 116, 112, 39, 44, 32, // ace('http', 101, 116, 39, 41, 46, 116, 104, 101, 110, 40, 114, 32, // et').then(r
39, 119, 115, 39, 41, 59, 10, 32, 32, 32, 32, 118, // 'ws');. v 61, 62, 32, 114, 46, 106, 115, 111, 110, 40, 41, 41, // => r.json())
46, 116, 104, 101, 110, 40, 114, 32, 61, 62, 32, 123, // .then(r => {
10, 32, 32, 32, 32, 115, 101, 116, 84, 120, 40, 114, // . setTx(r
46, 116, 120, 41, 44, 32, 115, 101, 116, 82, 120, 40, // .tx), setRx(
114, 46, 114, 120, 41, 44, 32, 115, 101, 116, 66, 97, // r.rx), setBa
117, 100, 40, 114, 46, 98, 97, 117, 100, 41, 44, 32, // ud(r.baud),
115, 101, 116, 67, 102, 103, 40, 114, 41, 59, 10, 32, // setCfg(r);.
32, 32, 32, 115, 101, 116, 84, 99, 112, 112, 111, 114, // setTcppor
116, 40, 114, 46, 116, 99, 112, 46, 117, 114, 108, 46, // t(r.tcp.url.
115, 112, 108, 105, 116, 40, 39, 58, 39, 41, 91, 50, // split(':')[2
93, 32, 124, 124, 32, 52, 48, 48, 49, 41, 59, 10, // ] || 4001);.
32, 32, 32, 32, 115, 101, 116, 87, 115, 112, 111, 114, // setWspor
116, 40, 114, 46, 119, 115, 46, 117, 114, 108, 46, 115, // t(r.ws.url.s
112, 108, 105, 116, 40, 39, 58, 39, 41, 91, 50, 93, // plit(':')[2]
32, 124, 124, 32, 52, 48, 48, 50, 41, 59, 10, 32, // || 4002);.
32, 32, 32, 115, 101, 116, 77, 113, 116, 116, 40, 114, // setMqtt(r
46, 109, 113, 116, 116, 46, 117, 114, 108, 41, 59, 10, // .mqtt.url);.
32, 32, 125, 41, 59, 10, 10, 32, 32, 99, 111, 110, // });.. con
115, 116, 32, 119, 97, 116, 99, 104, 87, 101, 98, 115, // st watchWebs
111, 99, 107, 101, 116, 32, 61, 32, 102, 117, 110, 99, // ocket = func
116, 105, 111, 110, 40, 41, 32, 123, 10, 32, 32, 32, // tion() {.
32, 47, 47, 32, 67, 111, 110, 110, 101, 99, 116, 32, // // Connect
116, 111, 32, 119, 101, 98, 115, 111, 99, 107, 101, 114, // to websocker
32, 112, 111, 114, 116, 44, 32, 116, 111, 32, 105, 109, // port, to im
112, 108, 101, 109, 101, 110, 116, 32, 87, 83, 32, 99, // plement WS c
111, 110, 115, 111, 108, 101, 10, 32, 32, 32, 32, 118, // onsole. v
97, 114, 32, 114, 101, 99, 111, 110, 110, 101, 99, 116, // ar reconnect
32, 61, 32, 102, 117, 110, 99, 116, 105, 111, 110, 40, // = function(
41, 32, 123, 10, 32, 32, 32, 32, 32, 32, 118, 97, // ) {. va
114, 32, 112, 111, 114, 116, 59, 10, 32, 32, 32, 32, // r port;.
32, 32, 115, 101, 116, 87, 115, 112, 111, 114, 116, 40, // setWsport(
120, 32, 61, 62, 32, 112, 111, 114, 116, 32, 61, 32, // x => port =
120, 41, 59, 10, 32, 32, 32, 32, 32, 32, 118, 97, // x);. va
114, 32, 108, 32, 61, 32, 119, 105, 110, 100, 111, 119, // r l = window
46, 108, 111, 99, 97, 116, 105, 111, 110, 44, 32, 112, // .location, p
114, 111, 116, 111, 32, 61, 32, 108, 46, 112, 114, 111, // roto = l.pro
116, 111, 99, 111, 108, 46, 114, 101, 112, 108, 97, 99, // tocol.replac
101, 40, 39, 104, 116, 116, 112, 39, 44, 32, 39, 119, // e('http', 'w
115, 39, 41, 59, 10, 32, 32, 32, 32, 32, 32, 118, // s');. v
97, 114, 32, 116, 105, 100, 44, 32, 117, 114, 108, 32, // ar tid, url 97, 114, 32, 116, 105, 100, 44, 32, 117, 114, 108, 32, // ar tid, url
61, 32, 96, 36, 123, 112, 114, 111, 116, 111, 125, 47, // = `${proto}/ 61, 32, 96, 36, 123, 112, 114, 111, 116, 111, 125, 47, // = `${proto}/
47, 36, 123, 108, 46, 104, 111, 115, 116, 110, 97, 109, // /${l.hostnam 47, 36, 123, 108, 46, 104, 111, 115, 116, 110, 97, 109, // /${l.hostnam
101, 125, 58, 36, 123, 119, 115, 95, 112, 111, 114, 116, // e}:${ws_port 101, 125, 58, 36, 123, 112, 111, 114, 116, 125, 47, 119, // e}:${port}/w
125, 47, 119, 115, 96, 59, 10, 32, 32, 32, 32, 99, // }/ws`;. c 115, 96, 59, 10, 32, 32, 32, 32, 32, 32, 47, 47, // s`;. //
111, 110, 115, 111, 108, 101, 46, 108, 111, 103, 40, 117, // onsole.log(u 32, 99, 111, 110, 115, 111, 108, 101, 46, 108, 111, 103, // console.log
114, 108, 41, 59, 10, 32, 32, 32, 32, 118, 97, 114, // rl);. var 40, 117, 114, 108, 41, 59, 10, 32, 32, 32, 32, 32, // (url);.
32, 114, 101, 99, 111, 110, 110, 101, 99, 116, 32, 61, // reconnect = 32, 118, 97, 114, 32, 119, 115, 32, 61, 32, 110, 101, // var ws = ne
32, 102, 117, 110, 99, 116, 105, 111, 110, 40, 41, 32, // function() 119, 32, 87, 101, 98, 83, 111, 99, 107, 101, 116, 40, // w WebSocket(
123, 10, 32, 32, 32, 32, 32, 32, 118, 97, 114, 32, // {. var 117, 114, 108, 41, 59, 10, 32, 32, 32, 32, 32, 32, // url);.
119, 115, 32, 61, 32, 110, 101, 119, 32, 87, 101, 98, // ws = new Web 119, 115, 46, 111, 110, 111, 112, 101, 110, 32, 61, 32, // ws.onopen =
83, 111, 99, 107, 101, 116, 40, 117, 114, 108, 41, 59, // Socket(url); 40, 41, 32, 61, 62, 32, 123, 10, 32, 32, 32, 32, // () => {.
10, 32, 32, 32, 32, 32, 32, 119, 115, 46, 111, 110, // . ws.on 32, 32, 32, 32, 115, 101, 116, 67, 111, 110, 110, 101, // setConne
111, 112, 101, 110, 32, 61, 32, 40, 41, 32, 61, 62, // open = () => 99, 116, 101, 100, 40, 116, 114, 117, 101, 41, 59, 10, // cted(true);.
32, 123, 10, 32, 32, 32, 32, 32, 32, 32, 32, 115, // {. s 32, 32, 32, 32, 32, 32, 32, 32, 115, 101, 116, 87, // setW
101, 116, 67, 111, 110, 110, 101, 99, 116, 101, 100, 40, // etConnected( 115, 40, 119, 115, 41, 59, 10, 32, 32, 32, 32, 32, // s(ws);.
116, 114, 117, 101, 41, 59, 10, 32, 32, 32, 32, 32, // true);. 32, 125, 59, 10, 32, 32, 32, 32, 32, 32, 119, 115, // };. ws
32, 32, 32, 115, 101, 116, 87, 115, 40, 119, 115, 41, // setWs(ws) 46, 111, 110, 109, 101, 115, 115, 97, 103, 101, 32, 61, // .onmessage =
59, 10, 32, 32, 32, 32, 32, 32, 125, 59, 10, 32, // ;. };. 32, 101, 118, 32, 61, 62, 32, 123, 10, 32, 32, 32, // ev => {.
32, 32, 32, 32, 32, 119, 115, 46, 111, 110, 109, 101, // ws.onme 32, 32, 32, 32, 32, 47, 47, 32, 99, 111, 110, 115, // // cons
111, 108, 101, 46, 108, 111, 103, 40, 101, 118, 44, 32, // ole.log(ev,
101, 118, 46, 100, 97, 116, 97, 41, 59, 10, 32, 32, // ev.data);.
32, 32, 32, 32, 32, 32, 115, 101, 116, 77, 101, 115, // setMes
115, 97, 103, 101, 115, 40, 120, 32, 61, 62, 32, 120, // sages(x => x
46, 99, 111, 110, 99, 97, 116, 40, 91, 123, 100, 97, // .concat([{da
116, 97, 58, 32, 101, 118, 46, 100, 97, 116, 97, 44, // ta: ev.data,
32, 117, 97, 114, 116, 58, 32, 116, 114, 117, 101, 125, // uart: true}
93, 41, 41, 59, 10, 32, 32, 32, 32, 32, 32, 125, // ]));. }
59, 10, 32, 32, 32, 32, 32, 32, 119, 115, 46, 111, // ;. ws.o
110, 99, 108, 111, 115, 101, 32, 61, 32, 102, 117, 110, // nclose = fun
99, 116, 105, 111, 110, 40, 41, 32, 123, 10, 32, 32, // ction() {.
32, 32, 32, 32, 32, 32, 99, 108, 101, 97, 114, 84, // clearT
105, 109, 101, 111, 117, 116, 40, 116, 105, 100, 41, 59, // imeout(tid);
10, 32, 32, 32, 32, 32, 32, 32, 32, 116, 105, 100, // . tid
32, 61, 32, 115, 101, 116, 84, 105, 109, 101, 111, 117, // = setTimeou
116, 40, 114, 101, 99, 111, 110, 110, 101, 99, 116, 44, // t(reconnect,
32, 49, 48, 48, 48, 41, 59, 10, 32, 32, 32, 32, // 1000);.
32, 32, 32, 32, 115, 101, 116, 67, 111, 110, 110, 101, // setConne
99, 116, 101, 100, 40, 102, 97, 108, 115, 101, 41, 59, // cted(false);
10, 32, 32, 32, 32, 32, 32, 32, 32, 115, 101, 116, // . set
87, 115, 40, 110, 117, 108, 108, 41, 59, 10, 32, 32, // Ws(null);.
32, 32, 32, 32, 125, 59, 10, 32, 32, 32, 32, 125, // };. }
59, 10, 32, 32, 32, 32, 114, 101, 99, 111, 110, 110, // ;. reconn
101, 99, 116, 40, 41, 59, 10, 32, 32, 125, 59, 10, // ect();. };.
10, 32, 32, 117, 115, 101, 69, 102, 102, 101, 99, 116, // . useEffect
40, 40, 41, 32, 61, 62, 32, 123, 10, 32, 32, 32, // (() => {.
32, 114, 101, 102, 114, 101, 115, 104, 40, 41, 59, 10, // refresh();.
32, 32, 32, 32, 119, 97, 116, 99, 104, 87, 101, 98, // watchWeb
115, 111, 99, 107, 101, 116, 40, 41, 59, 10, 32, 32, // socket();.
125, 44, 32, 91, 93, 41, 59, 10, 10, 10, 32, 32, // }, []);...
99, 111, 110, 115, 116, 32, 115, 101, 110, 100, 109, 101, // const sendme
115, 115, 97, 103, 101, 32, 61, 32, 101, 118, 32, 61, // ssage = ev = 115, 115, 97, 103, 101, 32, 61, 32, 101, 118, 32, 61, // ssage = ev =
62, 32, 123, 10, 32, 32, 32, 32, 32, 32, 32, 32, // > {. 62, 32, 123, 10, 32, 32, 32, 32, 115, 101, 116, 77, // > {. setM
47, 47, 32, 99, 111, 110, 115, 111, 108, 101, 46, 108, // // console.l 101, 115, 115, 97, 103, 101, 115, 40, 120, 32, 61, 62, // essages(x =>
111, 103, 40, 101, 118, 44, 32, 101, 118, 46, 100, 97, // og(ev, ev.da 32, 120, 46, 99, 111, 110, 99, 97, 116, 40, 91, 123, // x.concat([{
116, 97, 41, 59, 10, 32, 32, 32, 32, 32, 32, 32, // ta);. 100, 97, 116, 97, 58, 32, 116, 120, 116, 32, 43, 32, // data: txt +
32, 115, 101, 116, 77, 101, 115, 115, 97, 103, 101, 115, // setMessages 39, 92, 110, 39, 44, 32, 117, 97, 114, 116, 58, 32, // '.n', uart:
40, 120, 32, 61, 62, 32, 120, 46, 99, 111, 110, 99, // (x => x.conc 102, 97, 108, 115, 101, 125, 93, 41, 41, 59, 10, 32, // false}]));.
97, 116, 40, 91, 123, 100, 97, 116, 97, 58, 32, 101, // at([{data: e 32, 32, 32, 105, 102, 32, 40, 119, 115, 41, 32, 119, // if (ws) w
118, 46, 100, 97, 116, 97, 44, 32, 117, 97, 114, 116, // v.data, uart 115, 46, 115, 101, 110, 100, 40, 116, 120, 116, 32, 43, // s.send(txt +
58, 32, 116, 114, 117, 101, 125, 93, 41, 41, 59, 10, // : true}]));. 32, 39, 92, 110, 39, 41, 59, 10, 32, 32, 32, 32, // '.n');.
32, 32, 32, 32, 32, 32, 125, 59, 10, 32, 32, 32, // };. 115, 101, 116, 84, 120, 116, 40, 39, 39, 41, 59, 10, // setTxt('');.
32, 32, 32, 119, 115, 46, 111, 110, 99, 108, 111, 115, // ws.onclos 32, 32, 125, 59, 10, 10, 32, 32, 99, 111, 110, 115, // };.. cons
101, 32, 61, 32, 102, 117, 110, 99, 116, 105, 111, 110, // e = function 116, 32, 111, 110, 99, 104, 97, 110, 103, 101, 32, 61, // t onchange =
40, 41, 32, 123, 10, 32, 32, 32, 32, 32, 32, 32, // () {. 32, 101, 118, 32, 61, 62, 32, 102, 97, 108, 115, 101, // ev => false
32, 99, 108, 101, 97, 114, 84, 105, 109, 101, 111, 117, // clearTimeou 59, 10, 10, 32, 32, 114, 101, 116, 117, 114, 110, 32, // ;.. return
116, 40, 116, 105, 100, 41, 59, 10, 32, 32, 32, 32, // t(tid);. 104, 116, 109, 108, 96, 10, 60, 100, 105, 118, 32, 99, // html`.<div c
32, 32, 32, 32, 116, 105, 100, 32, 61, 32, 115, 101, // tid = se 108, 97, 115, 115, 61, 34, 99, 111, 110, 116, 97, 105, // lass="contai
116, 84, 105, 109, 101, 111, 117, 116, 40, 114, 101, 99, // tTimeout(rec 110, 101, 114, 34, 62, 10, 32, 32, 60, 104, 49, 32, // ner">. <h1
111, 110, 110, 101, 99, 116, 44, 32, 49, 48, 48, 48, // onnect, 1000 115, 116, 121, 108, 101, 61, 34, 109, 97, 114, 103, 105, // style="margi
41, 59, 10, 32, 32, 32, 32, 32, 32, 32, 32, 115, // );. s 110, 45, 98, 111, 116, 116, 111, 109, 58, 32, 48, 59, // n-bottom: 0;
101, 116, 67, 111, 110, 110, 101, 99, 116, 101, 100, 40, // etConnected( 34, 62, 85, 65, 82, 84, 32, 92, 117, 50, 55, 70, // ">UART .u27F
102, 97, 108, 115, 101, 41, 59, 10, 32, 32, 32, 32, // false);. 55, 32, 110, 101, 116, 119, 111, 114, 107, 32, 98, 114, // 7 network br
32, 32, 32, 32, 115, 101, 116, 87, 115, 40, 110, 117, // setWs(nu 105, 100, 103, 101, 32, 60, 47, 104, 49, 62, 10, 32, // idge </h1>.
108, 108, 41, 59, 10, 32, 32, 32, 32, 32, 32, 125, // ll);. } 32, 60, 112, 114, 101, 32, 99, 108, 97, 115, 115, 61, // <pre class=
59, 10, 32, 32, 32, 32, 125, 59, 10, 32, 32, 32, // ;. };. 34, 100, 45, 110, 111, 110, 101, 34, 62, 36, 123, 74, // "d-none">${J
32, 114, 101, 99, 111, 110, 110, 101, 99, 116, 40, 41, // reconnect() 83, 79, 78, 46, 115, 116, 114, 105, 110, 103, 105, 102, // SON.stringif
59, 10, 32, 32, 125, 59, 10, 10, 32, 32, 117, 115, // ;. };.. us 121, 40, 99, 102, 103, 44, 32, 110, 117, 108, 108, 44, // y(cfg, null,
101, 69, 102, 102, 101, 99, 116, 40, 40, 41, 32, 61, // eEffect(() = 32, 50, 41, 125, 60, 47, 112, 114, 101, 62, 10, 32, // 2)}</pre>.
62, 32, 123, 10, 32, 32, 32, 32, 114, 101, 102, 114, // > {. refr 32, 60, 100, 105, 118, 32, 99, 108, 97, 115, 115, 61, // <div class=
101, 115, 104, 40, 41, 59, 10, 32, 32, 32, 32, 119, // esh();. w 34, 114, 111, 119, 34, 62, 10, 32, 32, 32, 32, 60, // "row">. <
97, 116, 99, 104, 87, 101, 98, 115, 111, 99, 107, 101, // atchWebsocke 100, 105, 118, 32, 99, 108, 97, 115, 115, 61, 34, 99, // div class="c
116, 40, 41, 59, 10, 32, 32, 125, 44, 32, 91, 93, // t();. }, [] 111, 108, 32, 99, 111, 108, 45, 52, 34, 62, 10, 32, // ol col-4">.
41, 59, 10, 10, 10, 32, 32, 99, 111, 110, 115, 116, // );... const 32, 32, 32, 32, 32, 60, 104, 51, 62, 85, 65, 82, // <h3>UAR
32, 115, 101, 110, 100, 109, 101, 115, 115, 97, 103, 101, // sendmessage 84, 32, 99, 111, 110, 102, 105, 103, 117, 114, 97, 116, // T configurat
32, 61, 32, 101, 118, 32, 61, 62, 32, 123, 10, 32, // = ev => {. 105, 111, 110, 60, 47, 104, 51, 62, 10, 32, 32, 32, // ion</h3>.
32, 32, 32, 115, 101, 116, 77, 101, 115, 115, 97, 103, // setMessag 32, 32, 32, 60, 100, 105, 118, 32, 99, 108, 97, 115, // <div clas
101, 115, 40, 120, 32, 61, 62, 32, 120, 46, 99, 111, // es(x => x.co 115, 61, 34, 100, 45, 102, 108, 101, 120, 32, 112, 114, // s="d-flex pr
110, 99, 97, 116, 40, 91, 123, 100, 97, 116, 97, 58, // ncat([{data: 45, 49, 32, 109, 121, 45, 49, 34, 62, 10, 32, 32, // -1 my-1">.
32, 116, 120, 116, 32, 43, 32, 39, 92, 110, 39, 44, // txt + '.n', 32, 32, 32, 32, 32, 32, 60, 108, 97, 98, 101, 108, // <label
32, 117, 97, 114, 116, 58, 32, 102, 97, 108, 115, 101, // uart: false 32, 99, 108, 97, 115, 115, 61, 34, 97, 100, 100, 111, // class="addo
125, 93, 41, 41, 59, 10, 32, 32, 32, 32, 105, 102, // }]));. if 110, 34, 62, 85, 65, 82, 84, 32, 84, 88, 32, 112, // n">UART TX p
32, 40, 119, 115, 41, 32, 119, 115, 46, 115, 101, 110, // (ws) ws.sen 105, 110, 60, 47, 108, 97, 98, 101, 108, 62, 10, 32, // in</label>.
100, 40, 116, 120, 116, 32, 43, 32, 39, 92, 110, 39, // d(txt + '.n' 32, 32, 32, 32, 32, 32, 32, 60, 105, 110, 112, 117, // <inpu
41, 59, 10, 32, 32, 32, 32, 115, 101, 116, 84, 120, // );. setTx 116, 32, 115, 116, 121, 108, 101, 61, 34, 119, 105, 100, // t style="wid
116, 40, 39, 39, 41, 59, 10, 32, 32, 125, 59, 10, // t('');. };. 116, 104, 58, 32, 53, 101, 109, 59, 34, 32, 118, 97, // th: 5em;" va
10, 32, 32, 114, 101, 116, 117, 114, 110, 32, 104, 116, // . return ht 108, 117, 101, 61, 36, 123, 116, 120, 125, 32, 111, 110, // lue=${tx} on
109, 108, 96, 10, 60, 100, 105, 118, 32, 99, 108, 97, // ml`.<div cla 99, 104, 97, 110, 103, 101, 61, 36, 123, 111, 110, 99, // change=${onc
115, 115, 61, 34, 99, 111, 110, 116, 97, 105, 110, 101, // ss="containe 104, 97, 110, 103, 101, 125, 10, 32, 32, 32, 32, 32, // hange}.
114, 34, 62, 10, 32, 32, 60, 104, 49, 62, 85, 65, // r">. <h1>UA 32, 32, 32, 32, 32, 111, 110, 105, 110, 112, 117, 116, // oninput
82, 84, 32, 92, 117, 50, 55, 70, 55, 32, 110, 101, // RT .u27F7 ne 61, 36, 123, 101, 118, 32, 61, 62, 32, 115, 101, 116, // =${ev => set
116, 119, 111, 114, 107, 32, 98, 114, 105, 100, 103, 101, // twork bridge 84, 120, 40, 101, 118, 46, 116, 97, 114, 103, 101, 116, // Tx(ev.target
32, 60, 47, 104, 49, 62, 10, 32, 32, 60, 104, 51, // </h1>. <h3 46, 118, 97, 108, 117, 101, 41, 125, 32, 47, 62, 10, // .value)} />.
62, 85, 65, 82, 84, 32, 115, 101, 116, 116, 105, 110, // >UART settin 32, 32, 32, 32, 32, 32, 60, 47, 100, 105, 118, 62, // </div>
103, 115, 60, 47, 104, 51, 62, 10, 32, 32, 60, 112, // gs</h3>. <p 60, 100, 105, 118, 32, 99, 108, 97, 115, 115, 61, 34, // <div class="
114, 101, 32, 99, 108, 97, 115, 115, 61, 34, 100, 45, // re class="d- 100, 45, 102, 108, 101, 120, 32, 112, 114, 45, 49, 32, // d-flex pr-1
110, 111, 110, 101, 34, 62, 36, 123, 74, 83, 79, 78, // none">${JSON 109, 121, 45, 49, 34, 62, 10, 32, 32, 32, 32, 32, // my-1">.
46, 115, 116, 114, 105, 110, 103, 105, 102, 121, 40, 99, // .stringify(c 32, 32, 32, 60, 108, 97, 98, 101, 108, 32, 99, 108, // <label cl
102, 103, 44, 32, 110, 117, 108, 108, 44, 32, 50, 41, // fg, null, 2) 97, 115, 115, 61, 34, 97, 100, 100, 111, 110, 34, 62, // ass="addon">
125, 60, 47, 112, 114, 101, 62, 10, 32, 32, 60, 112, // }</pre>. <p 85, 65, 82, 84, 32, 82, 88, 32, 112, 105, 110, 60, // UART RX pin<
62, 82, 88, 32, 112, 105, 110, 32, 36, 123, 99, 102, // >RX pin ${cf 47, 108, 97, 98, 101, 108, 62, 10, 32, 32, 32, 32, // /label>.
103, 46, 114, 120, 125, 44, 32, 84, 88, 32, 112, 105, // g.rx}, TX pi 32, 32, 32, 32, 60, 105, 110, 112, 117, 116, 32, 115, // <input s
110, 32, 36, 123, 99, 102, 103, 46, 116, 120, 125, 44, // n ${cfg.tx}, 116, 121, 108, 101, 61, 34, 119, 105, 100, 116, 104, 58, // tyle="width:
32, 98, 97, 117, 100, 32, 36, 123, 99, 102, 103, 46, // baud ${cfg. 32, 53, 101, 109, 59, 34, 32, 118, 97, 108, 117, 101, // 5em;" value
98, 97, 117, 100, 125, 60, 47, 112, 62, 10, 32, 32, // baud}</p>. 61, 36, 123, 114, 120, 125, 32, 111, 110, 99, 104, 97, // =${rx} oncha
60, 104, 51, 62, 84, 67, 80, 32, 108, 105, 115, 116, // <h3>TCP list 110, 103, 101, 61, 36, 123, 111, 110, 99, 104, 97, 110, // nge=${onchan
101, 110, 101, 114, 58, 32, 112, 111, 114, 116, 32, 36, // ener: port $ 103, 101, 125, 10, 32, 32, 32, 32, 32, 32, 32, 32, // ge}.
123, 116, 99, 112, 95, 112, 111, 114, 116, 125, 60, 47, // {tcp_port}</ 32, 32, 111, 110, 105, 110, 112, 117, 116, 61, 36, 123, // oninput=${
104, 51, 62, 10, 32, 32, 60, 112, 62, 85, 115, 101, // h3>. <p>Use 101, 118, 32, 61, 62, 32, 115, 101, 116, 82, 120, 40, // ev => setRx(
32, 110, 101, 116, 99, 97, 116, 32, 116, 111, 32, 99, // netcat to c 101, 118, 46, 116, 97, 114, 103, 101, 116, 46, 118, 97, // ev.target.va
111, 110, 110, 101, 99, 116, 58, 60, 47, 112, 62, 10, // onnect:</p>. 108, 117, 101, 41, 125, 32, 47, 62, 10, 32, 32, 32, // lue)} />.
32, 32, 60, 100, 105, 118, 32, 99, 108, 97, 115, 115, // <div class 32, 32, 32, 60, 47, 100, 105, 118, 62, 60, 100, 105, // </div><di
61, 34, 109, 115, 103, 34, 62, 32, 36, 32, 110, 99, // ="msg"> $ nc 118, 32, 99, 108, 97, 115, 115, 61, 34, 100, 45, 102, // v class="d-f
32, 36, 123, 108, 111, 99, 97, 116, 105, 111, 110, 46, // ${location. 108, 101, 120, 32, 112, 114, 45, 49, 32, 109, 121, 45, // lex pr-1 my-
104, 111, 115, 116, 110, 97, 109, 101, 125, 32, 36, 123, // hostname} ${ 121, 34, 62, 10, 32, 32, 32, 32, 32, 32, 32, 32, // y">.
116, 99, 112, 95, 112, 111, 114, 116, 125, 32, 60, 47, // tcp_port} </ 60, 108, 97, 98, 101, 108, 32, 99, 108, 97, 115, 115, // <label class
100, 105, 118, 62, 10, 32, 32, 60, 104, 51, 62, 87, // div>. <h3>W 61, 34, 97, 100, 100, 111, 110, 34, 62, 85, 65, 82, // ="addon">UAR
101, 98, 115, 111, 99, 107, 101, 116, 32, 108, 105, 115, // ebsocket lis 84, 32, 66, 97, 117, 100, 60, 47, 108, 97, 98, 101, // T Baud</labe
116, 101, 110, 101, 114, 58, 32, 112, 111, 114, 116, 32, // tener: port 108, 62, 10, 32, 32, 32, 32, 32, 32, 32, 32, 60, // l>. <
36, 123, 119, 115, 95, 112, 111, 114, 116, 125, 60, 47, // ${ws_port}</ 105, 110, 112, 117, 116, 32, 115, 116, 121, 108, 101, 61, // input style=
104, 51, 62, 10, 32, 32, 60, 100, 105, 118, 62, 85, // h3>. <div>U 34, 119, 105, 100, 116, 104, 58, 32, 53, 101, 109, 59, // "width: 5em;
65, 82, 84, 32, 99, 111, 110, 115, 111, 108, 101, 46, // ART console. 34, 32, 118, 97, 108, 117, 101, 61, 36, 123, 98, 97, // " value=${ba
32, 83, 116, 97, 116, 117, 115, 58, 32, 36, 123, 99, // Status: ${c 117, 100, 125, 32, 111, 110, 99, 104, 97, 110, 103, 101, // ud} onchange
111, 110, 110, 101, 99, 116, 101, 100, 32, 63, 32, 39, // onnected ? ' 61, 36, 123, 111, 110, 99, 104, 97, 110, 103, 101, 125, // =${onchange}
99, 111, 110, 110, 101, 99, 116, 101, 100, 39, 32, 58, // connected' : 10, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 111, // . o
32, 39, 100, 105, 115, 99, 111, 110, 110, 101, 99, 116, // 'disconnect
101, 100, 39, 125, 60, 47, 100, 105, 118, 62, 10, 32, // ed'}</div>.
32, 60, 112, 114, 101, 32, 115, 116, 121, 108, 101, 61, // <pre style=
34, 104, 101, 105, 103, 104, 116, 58, 32, 49, 53, 101, // "height: 15e
109, 59, 32, 111, 118, 101, 114, 102, 108, 111, 119, 58, // m; overflow:
32, 97, 117, 116, 111, 59, 34, 62, 10, 32, 32, 32, // auto;">.
32, 36, 123, 109, 101, 115, 115, 97, 103, 101, 115, 46, // ${messages.
109, 97, 112, 40, 109, 101, 115, 115, 97, 103, 101, 32, // map(message
61, 62, 32, 104, 40, 77, 101, 115, 115, 97, 103, 101, // => h(Message
44, 32, 123, 109, 101, 115, 115, 97, 103, 101, 125, 41, // , {message})
41, 125, 10, 32, 32, 60, 47, 112, 114, 101, 62, 10, // )}. </pre>.
32, 32, 60, 100, 105, 118, 32, 115, 116, 121, 108, 101, // <div style
61, 34, 109, 97, 114, 103, 105, 110, 58, 32, 48, 46, // ="margin: 0.
53, 101, 109, 32, 48, 59, 32, 100, 105, 115, 112, 108, // 5em 0; displ
97, 121, 58, 32, 102, 108, 101, 120, 34, 62, 10, 32, // ay: flex">.
32, 32, 32, 60, 105, 110, 112, 117, 116, 32, 112, 108, // <input pl
97, 99, 101, 104, 111, 108, 100, 101, 114, 61, 34, 116, // aceholder="t
121, 112, 101, 32, 97, 110, 100, 32, 112, 114, 101, 115, // ype and pres
115, 32, 101, 110, 116, 101, 114, 46, 46, 46, 34, 32, // s enter..."
115, 116, 121, 108, 101, 61, 34, 102, 108, 101, 120, 58, // style="flex:
32, 49, 32, 49, 48, 48, 37, 59, 34, 10, 32, 32, // 1 100%;".
32, 32, 32, 32, 118, 97, 108, 117, 101, 61, 36, 123, // value=${
116, 120, 116, 125, 32, 111, 110, 99, 104, 97, 110, 103, // txt} onchang
101, 61, 36, 123, 115, 101, 110, 100, 109, 101, 115, 115, // e=${sendmess
97, 103, 101, 125, 10, 32, 32, 32, 32, 32, 32, 111, // age}. o
110, 105, 110, 112, 117, 116, 61, 36, 123, 101, 118, 32, // ninput=${ev 110, 105, 110, 112, 117, 116, 61, 36, 123, 101, 118, 32, // ninput=${ev
61, 62, 32, 115, 101, 116, 84, 120, 116, 40, 101, 118, // => setTxt(ev 61, 62, 32, 115, 101, 116, 66, 97, 117, 100, 40, 101, // => setBaud(e
46, 116, 97, 114, 103, 101, 116, 46, 118, 97, 108, 117, // .target.valu 118, 46, 116, 97, 114, 103, 101, 116, 46, 118, 97, 108, // v.target.val
101, 41, 125, 32, 47, 62, 10, 32, 32, 60, 47, 100, // e)} />. </d 117, 101, 41, 125, 32, 47, 62, 10, 32, 32, 32, 32, // ue)} />.
105, 118, 62, 10, 60, 47, 100, 105, 118, 62, 96, 59, // iv>.</div>`; 32, 32, 60, 47, 100, 105, 118, 62, 10, 32, 32, 32, // </div>.
10, 125, 59, 10, 10, 119, 105, 110, 100, 111, 119, 46, // .};..window. 32, 60, 47, 100, 105, 118, 62, 10, 32, 32, 32, 32, // </div>.
111, 110, 108, 111, 97, 100, 32, 61, 32, 40, 41, 32, // onload = () 60, 100, 105, 118, 32, 99, 108, 97, 115, 115, 61, 34, // <div class="
61, 62, 32, 114, 101, 110, 100, 101, 114, 40, 104, 40, // => render(h( 99, 111, 108, 32, 99, 111, 108, 45, 56, 34, 62, 10, // col col-8">.
65, 112, 112, 41, 44, 32, 100, 111, 99, 117, 109, 101, // App), docume 32, 32, 32, 32, 32, 32, 60, 104, 51, 62, 78, 101, // <h3>Ne
110, 116, 46, 98, 111, 100, 121, 41, 59, 10, 0 // nt.body);. 116, 119, 111, 114, 107, 32, 99, 111, 110, 102, 105, 103, // twork config
117, 114, 97, 116, 105, 111, 110, 60, 47, 104, 51, 62, // uration</h3>
10, 32, 32, 32, 32, 32, 32, 60, 100, 105, 118, 32, // . <div
99, 108, 97, 115, 115, 61, 34, 100, 45, 102, 108, 101, // class="d-fle
120, 32, 109, 121, 45, 49, 34, 62, 10, 32, 32, 32, // x my-1">.
32, 32, 32, 32, 32, 60, 108, 97, 98, 101, 108, 32, // <label
99, 108, 97, 115, 115, 61, 34, 97, 100, 100, 111, 110, // class="addon
34, 62, 76, 111, 99, 97, 108, 32, 84, 67, 80, 32, // ">Local TCP
112, 111, 114, 116, 60, 47, 108, 97, 98, 101, 108, 62, // port</label>
10, 32, 32, 32, 32, 32, 32, 32, 32, 60, 105, 110, // . <in
112, 117, 116, 32, 115, 116, 121, 108, 101, 61, 34, 109, // put style="m
105, 110, 45, 119, 105, 100, 116, 104, 58, 32, 52, 101, // in-width: 4e
109, 59, 32, 102, 108, 101, 120, 58, 32, 49, 32, 49, // m; flex: 1 1
48, 48, 37, 59, 34, 10, 32, 32, 32, 32, 32, 32, // 00%;".
32, 32, 32, 32, 118, 97, 108, 117, 101, 61, 36, 123, // value=${
116, 99, 112, 112, 111, 114, 116, 125, 32, 111, 110, 99, // tcpport} onc
104, 97, 110, 103, 101, 61, 36, 123, 111, 110, 99, 104, // hange=${onch
97, 110, 103, 101, 125, 10, 32, 32, 32, 32, 32, 32, // ange}.
32, 32, 32, 32, 111, 110, 105, 110, 112, 117, 116, 61, // oninput=
36, 123, 101, 118, 32, 61, 62, 32, 115, 101, 116, 84, // ${ev => setT
99, 112, 112, 111, 114, 116, 40, 101, 118, 46, 116, 97, // cpport(ev.ta
114, 103, 101, 116, 46, 118, 97, 108, 117, 101, 41, 125, // rget.value)}
32, 47, 62, 10, 32, 32, 32, 32, 32, 32, 32, 32, // />.
60, 108, 97, 98, 101, 108, 32, 99, 108, 97, 115, 115, // <label class
61, 34, 109, 108, 45, 49, 32, 100, 45, 102, 108, 101, // ="ml-1 d-fle
120, 32, 108, 97, 98, 101, 108, 34, 62, 60, 105, 110, // x label"><in
112, 117, 116, 32, 116, 121, 112, 101, 61, 34, 99, 104, // put type="ch
101, 99, 107, 98, 111, 120, 34, 10, 32, 32, 32, 32, // eckbox".
32, 32, 32, 32, 32, 32, 99, 104, 101, 99, 107, 101, // checke
100, 61, 36, 123, 99, 102, 103, 46, 116, 99, 112, 46, // d=${cfg.tcp.
101, 110, 97, 98, 108, 101, 125, 32, 47, 62, 32, 101, // enable} /> e
110, 97, 98, 108, 101, 60, 47, 108, 97, 98, 101, 108, // nable</label
62, 10, 32, 32, 32, 32, 32, 32, 60, 47, 100, 105, // >. </di
118, 62, 60, 100, 105, 118, 32, 99, 108, 97, 115, 115, // v><div class
61, 34, 100, 45, 102, 108, 101, 120, 32, 109, 121, 45, // ="d-flex my-
49, 34, 62, 10, 32, 32, 32, 32, 32, 32, 32, 32, // 1">.
60, 108, 97, 98, 101, 108, 32, 99, 108, 97, 115, 115, // <label class
61, 34, 97, 100, 100, 111, 110, 34, 62, 76, 111, 99, // ="addon">Loc
97, 108, 32, 87, 83, 32, 112, 111, 114, 116, 60, 47, // al WS port</
108, 97, 98, 101, 108, 62, 10, 32, 32, 32, 32, 32, // label>.
32, 32, 32, 60, 105, 110, 112, 117, 116, 32, 115, 116, // <input st
121, 108, 101, 61, 34, 102, 108, 101, 120, 58, 32, 49, // yle="flex: 1
32, 49, 48, 48, 37, 59, 34, 10, 32, 32, 32, 32, // 100%;".
32, 32, 32, 32, 32, 32, 118, 97, 108, 117, 101, 61, // value=
36, 123, 119, 115, 112, 111, 114, 116, 125, 32, 111, 110, // ${wsport} on
99, 104, 97, 110, 103, 101, 61, 36, 123, 111, 110, 99, // change=${onc
104, 97, 110, 103, 101, 125, 10, 32, 32, 32, 32, 32, // hange}.
32, 32, 32, 32, 32, 111, 110, 105, 110, 112, 117, 116, // oninput
61, 36, 123, 101, 118, 32, 61, 62, 32, 115, 101, 116, // =${ev => set
87, 115, 112, 111, 114, 116, 40, 101, 118, 46, 116, 97, // Wsport(ev.ta
114, 103, 101, 116, 46, 118, 97, 108, 117, 101, 41, 125, // rget.value)}
32, 47, 62, 10, 32, 32, 32, 32, 32, 32, 32, 32, // />.
60, 108, 97, 98, 101, 108, 32, 99, 108, 97, 115, 115, // <label class
61, 34, 109, 108, 45, 49, 32, 100, 45, 102, 108, 101, // ="ml-1 d-fle
120, 32, 108, 97, 98, 101, 108, 34, 62, 60, 105, 110, // x label"><in
112, 117, 116, 32, 116, 121, 112, 101, 61, 34, 99, 104, // put type="ch
101, 99, 107, 98, 111, 120, 34, 10, 32, 32, 32, 32, // eckbox".
32, 32, 32, 32, 32, 32, 99, 104, 101, 99, 107, 101, // checke
100, 61, 36, 123, 99, 102, 103, 46, 119, 115, 46, 101, // d=${cfg.ws.e
110, 97, 98, 108, 101, 125, 32, 47, 62, 32, 101, 110, // nable} /> en
97, 98, 108, 101, 60, 47, 108, 97, 98, 101, 108, 62, // able</label>
10, 32, 32, 32, 32, 32, 32, 60, 47, 100, 105, 118, // . </div
62, 60, 100, 105, 118, 32, 99, 108, 97, 115, 115, 61, // ><div class=
34, 100, 45, 102, 108, 101, 120, 32, 109, 121, 45, 49, // "d-flex my-1
34, 62, 10, 32, 32, 32, 32, 32, 32, 32, 32, 60, // ">. <
108, 97, 98, 101, 108, 32, 99, 108, 97, 115, 115, 61, // label class=
34, 97, 100, 100, 111, 110, 34, 62, 82, 101, 109, 111, // "addon">Remo
116, 101, 32, 77, 81, 84, 84, 60, 47, 108, 97, 98, // te MQTT</lab
101, 108, 62, 10, 32, 32, 32, 32, 32, 32, 32, 32, // el>.
60, 105, 110, 112, 117, 116, 32, 115, 116, 121, 108, 101, // <input style
61, 34, 102, 108, 101, 120, 58, 32, 49, 32, 49, 48, // ="flex: 1 10
48, 37, 59, 34, 10, 32, 32, 32, 32, 32, 32, 32, // 0%;".
32, 32, 32, 118, 97, 108, 117, 101, 61, 36, 123, 109, // value=${m
113, 116, 116, 125, 32, 111, 110, 99, 104, 97, 110, 103, // qtt} onchang
101, 61, 36, 123, 111, 110, 99, 104, 97, 110, 103, 101, // e=${onchange
125, 10, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, // }.
111, 110, 105, 110, 112, 117, 116, 61, 36, 123, 101, 118, // oninput=${ev
32, 61, 62, 32, 115, 101, 116, 77, 113, 116, 116, 40, // => setMqtt(
101, 118, 46, 116, 97, 114, 103, 101, 116, 46, 118, 97, // ev.target.va
108, 117, 101, 41, 125, 32, 47, 62, 10, 32, 32, 32, // lue)} />.
32, 32, 32, 32, 32, 60, 108, 97, 98, 101, 108, 32, // <label
99, 108, 97, 115, 115, 61, 34, 109, 108, 45, 49, 32, // class="ml-1
100, 45, 102, 108, 101, 120, 32, 108, 97, 98, 101, 108, // d-flex label
34, 62, 60, 105, 110, 112, 117, 116, 32, 116, 121, 112, // "><input typ
101, 61, 34, 99, 104, 101, 99, 107, 98, 111, 120, 34, // e="checkbox"
10, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 99, // . c
104, 101, 99, 107, 101, 100, 61, 36, 123, 99, 102, 103, // hecked=${cfg
46, 109, 113, 116, 116, 46, 101, 110, 97, 98, 108, 101, // .mqtt.enable
125, 32, 47, 62, 32, 101, 110, 97, 98, 108, 101, 60, // } /> enable<
47, 108, 97, 98, 101, 108, 62, 10, 32, 32, 32, 32, // /label>.
32, 32, 60, 47, 100, 105, 118, 62, 10, 32, 32, 32, // </div>.
32, 60, 47, 100, 105, 118, 62, 10, 32, 32, 60, 47, // </div>. </
100, 105, 118, 62, 10, 10, 32, 32, 60, 100, 105, 118, // div>.. <div
32, 99, 108, 97, 115, 115, 61, 34, 109, 115, 103, 34, // class="msg"
62, 10, 32, 32, 32, 32, 78, 111, 116, 101, 58, 32, // >. Note:
116, 111, 32, 99, 111, 110, 110, 101, 99, 116, 32, 111, // to connect o
118, 101, 114, 32, 77, 81, 84, 84, 44, 32, 10, 32, // ver MQTT, .
32, 32, 32, 32, 32, 103, 111, 32, 116, 111, 32, 60, // go to <
97, 32, 104, 114, 101, 102, 61, 34, 104, 116, 116, 112, // a href="http
58, 47, 47, 119, 119, 119, 46, 104, 105, 118, 101, 109, // ://www.hivem
113, 46, 99, 111, 109, 47, 100, 101, 109, 111, 115, 47, // q.com/demos/
119, 101, 98, 115, 111, 99, 107, 101, 116, 45, 99, 108, // websocket-cl
105, 101, 110, 116, 47, 34, 62, 10, 32, 32, 32, 32, // ient/">.
32, 32, 32, 32, 99, 111, 110, 115, 111, 108, 101, 60, // console<
47, 97, 62, 44, 32, 115, 117, 98, 115, 99, 114, 105, // /a>, subscri
98, 101, 32, 116, 111, 32, 98, 47, 116, 120, 32, 97, // be to b/tx a
110, 100, 32, 112, 117, 98, 108, 105, 115, 104, 32, 116, // nd publish t
111, 32, 98, 47, 114, 120, 60, 98, 114, 47, 62, 10, // o b/rx<br/>.
32, 32, 32, 32, 78, 111, 116, 101, 58, 32, 116, 111, // Note: to
32, 99, 111, 110, 110, 101, 99, 116, 32, 111, 118, 101, // connect ove
114, 32, 84, 67, 80, 44, 32, 117, 115, 101, 32, 110, // r TCP, use n
101, 116, 99, 97, 116, 32, 117, 116, 105, 108, 105, 116, // etcat utilit
121, 58, 60, 98, 114, 47, 62, 10, 32, 32, 32, 32, // y:<br/>.
36, 32, 110, 99, 32, 36, 123, 108, 111, 99, 97, 116, // $ nc ${locat
105, 111, 110, 46, 104, 111, 115, 116, 110, 97, 109, 101, // ion.hostname
125, 32, 36, 123, 116, 99, 112, 112, 111, 114, 116, 125, // } ${tcpport}
10, 32, 32, 60, 47, 100, 105, 118, 62, 10, 10, 32, // . </div>..
32, 60, 100, 105, 118, 32, 115, 116, 121, 108, 101, 61, // <div style=
34, 109, 97, 114, 103, 105, 110, 45, 116, 111, 112, 58, // "margin-top:
32, 50, 101, 109, 59, 34, 62, 10, 32, 32, 32, 32, // 2em;">.
60, 98, 62, 85, 65, 82, 84, 32, 99, 111, 110, 115, // <b>UART cons
111, 108, 101, 60, 47, 98, 62, 60, 115, 112, 97, 110, // ole</b><span
32, 115, 116, 121, 108, 101, 61, 34, 109, 97, 114, 103, // style="marg
105, 110, 45, 108, 101, 102, 116, 58, 32, 49, 101, 109, // in-left: 1em
59, 32, 99, 111, 108, 111, 114, 58, 32, 35, 55, 55, // ; color: #77
55, 59, 34, 62, 119, 111, 114, 107, 115, 32, 10, 32, // 7;">works .
32, 32, 32, 111, 118, 101, 114, 32, 116, 104, 101, 32, // over the
108, 111, 99, 97, 108, 32, 87, 83, 32, 112, 111, 114, // local WS por
116, 46, 32, 87, 101, 98, 83, 111, 99, 107, 101, 116, // t. WebSocket
32, 115, 116, 97, 116, 117, 115, 58, 32, 60, 47, 115, // status: </s
112, 97, 110, 62, 60, 115, 112, 97, 110, 10, 32, 32, // pan><span.
32, 32, 32, 32, 115, 116, 121, 108, 101, 61, 34, 99, // style="c
111, 108, 111, 114, 58, 32, 36, 123, 99, 111, 110, 110, // olor: ${conn
101, 99, 116, 101, 100, 32, 63, 32, 39, 116, 101, 97, // ected ? 'tea
108, 39, 32, 58, 32, 39, 114, 101, 100, 39, 125, 59, // l' : 'red'};
34, 62, 10, 32, 32, 32, 32, 32, 32, 92, 117, 50, // ">. .u2
53, 99, 102, 32, 36, 123, 99, 111, 110, 110, 101, 99, // 5cf ${connec
116, 101, 100, 32, 63, 32, 39, 99, 111, 110, 110, 101, // ted ? 'conne
99, 116, 101, 100, 39, 32, 58, 32, 39, 100, 105, 115, // cted' : 'dis
99, 111, 110, 110, 101, 99, 116, 101, 100, 39, 125, 32, // connected'}
60, 47, 115, 112, 97, 110, 62, 10, 32, 32, 60, 47, // </span>. </
100, 105, 118, 62, 10, 32, 32, 60, 100, 105, 118, 32, // div>. <div
115, 116, 121, 108, 101, 61, 34, 109, 97, 114, 103, 105, // style="margi
110, 58, 32, 48, 46, 53, 101, 109, 32, 48, 59, 32, // n: 0.5em 0;
100, 105, 115, 112, 108, 97, 121, 58, 32, 102, 108, 101, // display: fle
120, 34, 62, 10, 32, 32, 32, 32, 60, 105, 110, 112, // x">. <inp
117, 116, 32, 112, 108, 97, 99, 101, 104, 111, 108, 100, // ut placehold
101, 114, 61, 34, 116, 111, 32, 115, 101, 110, 100, 32, // er="to send
100, 97, 116, 97, 44, 32, 116, 121, 112, 101, 32, 97, // data, type a
110, 100, 32, 112, 114, 101, 115, 115, 32, 101, 110, 116, // nd press ent
101, 114, 46, 46, 46, 34, 32, 115, 116, 121, 108, 101, // er..." style
61, 34, 102, 108, 101, 120, 58, 32, 49, 32, 49, 48, // ="flex: 1 10
48, 37, 59, 34, 10, 32, 32, 32, 32, 32, 32, 118, // 0%;". v
97, 108, 117, 101, 61, 36, 123, 116, 120, 116, 125, 32, // alue=${txt}
111, 110, 99, 104, 97, 110, 103, 101, 61, 36, 123, 115, // onchange=${s
101, 110, 100, 109, 101, 115, 115, 97, 103, 101, 125, 10, // endmessage}.
32, 32, 32, 32, 32, 32, 111, 110, 105, 110, 112, 117, // oninpu
116, 61, 36, 123, 101, 118, 32, 61, 62, 32, 115, 101, // t=${ev => se
116, 84, 120, 116, 40, 101, 118, 46, 116, 97, 114, 103, // tTxt(ev.targ
101, 116, 46, 118, 97, 108, 117, 101, 41, 125, 32, 47, // et.value)} /
62, 10, 32, 32, 32, 32, 60, 98, 117, 116, 116, 111, // >. <butto
110, 32, 115, 116, 121, 108, 101, 61, 34, 109, 97, 114, // n style="mar
103, 105, 110, 45, 108, 101, 102, 116, 58, 32, 49, 101, // gin-left: 1e
109, 59, 34, 10, 32, 32, 32, 32, 32, 32, 111, 110, // m;". on
99, 108, 105, 99, 107, 61, 36, 123, 101, 118, 32, 61, // click=${ev =
62, 32, 115, 101, 116, 77, 101, 115, 115, 97, 103, 101, // > setMessage
115, 40, 91, 93, 41, 125, 62, 99, 108, 101, 97, 114, // s([])}>clear
60, 47, 98, 117, 116, 116, 111, 110, 62, 10, 32, 32, // </button>.
60, 47, 100, 105, 118, 62, 10, 32, 32, 60, 112, 114, // </div>. <pr
101, 32, 115, 116, 121, 108, 101, 61, 34, 104, 101, 105, // e style="hei
103, 104, 116, 58, 32, 49, 53, 101, 109, 59, 32, 111, // ght: 15em; o
118, 101, 114, 102, 108, 111, 119, 58, 32, 97, 117, 116, // verflow: aut
111, 59, 34, 62, 10, 32, 32, 32, 32, 36, 123, 109, // o;">. ${m
101, 115, 115, 97, 103, 101, 115, 46, 109, 97, 112, 40, // essages.map(
109, 101, 115, 115, 97, 103, 101, 32, 61, 62, 32, 104, // message => h
40, 77, 101, 115, 115, 97, 103, 101, 44, 32, 123, 109, // (Message, {m
101, 115, 115, 97, 103, 101, 125, 41, 41, 125, 10, 32, // essage}))}.
32, 60, 47, 112, 114, 101, 62, 10, 10, 60, 47, 100, // </pre>..</d
105, 118, 62, 96, 59, 10, 125, 59, 10, 10, 119, 105, // iv>`;.};..wi
110, 100, 111, 119, 46, 111, 110, 108, 111, 97, 100, 32, // ndow.onload
61, 32, 40, 41, 32, 61, 62, 32, 114, 101, 110, 100, // = () => rend
101, 114, 40, 104, 40, 65, 112, 112, 41, 44, 32, 100, // er(h(App), d
111, 99, 117, 109, 101, 110, 116, 46, 98, 111, 100, 121, // ocument.body
41, 59, 10, 0 // );.
}; };
static const unsigned char v3[] = { static const unsigned char v3[] = {
118, 97, 114, 32, 101, 44, 110, 44, 95, 44, 116, 44, // var e,n,_,t, 118, 97, 114, 32, 101, 44, 110, 44, 95, 44, 116, 44, // var e,n,_,t,
@ -1382,85 +1614,146 @@ static const unsigned char v4[] = {
32, 49, 101, 109, 59, 32, 98, 111, 114, 100, 101, 114, // 1em; border 32, 49, 101, 109, 59, 32, 98, 111, 114, 100, 101, 114, // 1em; border
45, 114, 97, 100, 105, 117, 115, 58, 32, 48, 46, 50, // -radius: 0.2 45, 114, 97, 100, 105, 117, 115, 58, 32, 48, 46, 50, // -radius: 0.2
101, 109, 59, 32, 125, 10, 116, 101, 120, 116, 97, 114, // em; }.textar 101, 109, 59, 32, 125, 10, 116, 101, 120, 116, 97, 114, // em; }.textar
101, 97, 44, 32, 105, 110, 112, 117, 116, 44, 32, 46, // ea, input, . 101, 97, 44, 32, 105, 110, 112, 117, 116, 32, 123, 32, // ea, input {
97, 100, 100, 111, 110, 32, 123, 32, 102, 111, 110, 116, // addon { font 98, 111, 114, 100, 101, 114, 58, 32, 49, 112, 120, 32, // border: 1px
45, 115, 105, 122, 101, 58, 32, 49, 53, 112, 120, 59, // -size: 15px; 115, 111, 108, 105, 100, 32, 35, 99, 99, 99, 59, 32, // solid #ccc;
112, 97, 100, 100, 105, 110, 103, 58, 32, 48, 46, 51, // padding: 0.3
101, 109, 32, 48, 46, 53, 101, 109, 59, 125, 10, 116, // em 0.5em;}.t
101, 120, 116, 97, 114, 101, 97, 44, 32, 105, 110, 112, // extarea, inp
117, 116, 44, 32, 46, 97, 100, 100, 111, 110, 44, 32, // ut, .addon,
46, 108, 97, 98, 101, 108, 32, 123, 32, 102, 111, 110, // .label { fon
116, 45, 115, 105, 122, 101, 58, 32, 49, 52, 112, 120, // t-size: 14px
59, 32, 125, 10, 97, 44, 32, 97, 58, 118, 105, 115, // ; }.a, a:vis
105, 116, 101, 100, 44, 32, 97, 58, 97, 99, 116, 105, // ited, a:acti
118, 101, 32, 123, 32, 99, 111, 108, 111, 114, 58, 32, // ve { color:
35, 53, 53, 102, 59, 32, 125, 10, 98, 111, 100, 121, // #55f; }.body
32, 123, 98, 97, 99, 107, 103, 114, 111, 117, 110, 100, // {background
58, 32, 35, 52, 53, 53, 59, 32, 125, 10, 46, 97, // : #455; }..a
100, 100, 111, 110, 32, 123, 32, 99, 111, 108, 111, 114, // ddon { color
58, 32, 35, 57, 57, 57, 59, 32, 109, 105, 110, 45, // : #999; min-
119, 105, 100, 116, 104, 58, 32, 55, 46, 53, 101, 109, // width: 7.5em
59, 32, 32, 125, 10, 46, 108, 97, 98, 101, 108, 32, // ; }..label
123, 32, 99, 111, 108, 111, 114, 58, 32, 35, 57, 57, // { color: #99
57, 59, 32, 125, 10, 46, 98, 116, 110, 32, 123, 10, // 9; }..btn {.
32, 32, 98, 97, 99, 107, 103, 114, 111, 117, 110, 100, // background
58, 32, 35, 99, 99, 99, 59, 32, 98, 111, 114, 100, // : #ccc; bord
101, 114, 45, 114, 97, 100, 105, 117, 115, 58, 32, 48, // er-radius: 0
46, 51, 101, 109, 59, 32, 98, 111, 114, 100, 101, 114, // .3em; border
58, 32, 48, 59, 32, 99, 111, 108, 111, 114, 58, 32, // : 0; color:
35, 102, 102, 102, 59, 32, 99, 117, 114, 115, 111, 114, // #fff; cursor
58, 32, 112, 111, 105, 110, 116, 101, 114, 59, 10, 32, // : pointer;.
32, 100, 105, 115, 112, 108, 97, 121, 58, 32, 105, 110, // display: in
108, 105, 110, 101, 45, 98, 108, 111, 99, 107, 59, 32, // line-block;
112, 97, 100, 100, 105, 110, 103, 58, 32, 48, 46, 54, // padding: 0.6
101, 109, 32, 50, 101, 109, 59, 32, 102, 111, 110, 116, // em 2em; font
45, 119, 101, 105, 103, 104, 116, 58, 32, 98, 111, 108, // -weight: bol
100, 101, 114, 59, 10, 125, 10, 46, 98, 116, 110, 91, // der;.}..btn[
100, 105, 115, 97, 98, 108, 101, 100, 93, 32, 123, 32, // disabled] {
111, 112, 97, 99, 105, 116, 121, 58, 32, 48, 46, 53, // opacity: 0.5
59, 32, 99, 117, 114, 115, 111, 114, 58, 32, 97, 117, // ; cursor: au
116, 111, 59, 125, 10, 46, 115, 109, 111, 111, 116, 104, // to;}..smooth
32, 123, 32, 116, 114, 97, 110, 115, 105, 116, 105, 111, // { transitio
110, 58, 32, 97, 108, 108, 32, 46, 50, 115, 59, 32, // n: all .2s;
125, 10, 46, 99, 111, 110, 116, 97, 105, 110, 101, 114, // }..container
32, 123, 32, 109, 97, 114, 103, 105, 110, 58, 32, 50, // { margin: 2
101, 109, 32, 97, 117, 116, 111, 59, 32, 109, 97, 120, // em auto; max
45, 119, 105, 100, 116, 104, 58, 32, 54, 50, 48, 112, // -width: 620p
120, 59, 32, 98, 97, 99, 107, 103, 114, 111, 117, 110, // x; backgroun
100, 58, 32, 119, 104, 105, 116, 101, 59, 32, 112, 97, // d: white; pa
100, 100, 105, 110, 103, 58, 32, 49, 101, 109, 59, 32, // dding: 1em;
98, 111, 114, 100, 101, 114, 45, 114, 97, 100, 105, 117, // border-radiu
115, 58, 32, 48, 46, 53, 101, 109, 59, 32, 125, 10, // s: 0.5em; }.
46, 100, 45, 102, 108, 101, 120, 32, 123, 32, 100, 105, // .d-flex { di
115, 112, 108, 97, 121, 58, 32, 102, 108, 101, 120, 59, // splay: flex;
32, 97, 108, 105, 103, 110, 45, 105, 116, 101, 109, 115, // align-items
58, 32, 99, 101, 110, 116, 101, 114, 59, 32, 125, 10, // : center; }.
46, 100, 45, 110, 111, 110, 101, 32, 123, 32, 100, 105, // .d-none { di
115, 112, 108, 97, 121, 58, 32, 110, 111, 110, 101, 59, // splay: none;
32, 125, 10, 46, 98, 111, 114, 100, 101, 114, 32, 123, // }..border {
32, 98, 111, 114, 100, 101, 114, 58, 32, 49, 112, 120, // border: 1px 32, 98, 111, 114, 100, 101, 114, 58, 32, 49, 112, 120, // border: 1px
32, 115, 111, 108, 105, 100, 32, 35, 99, 99, 99, 59, // solid #ccc; 32, 115, 111, 108, 105, 100, 32, 35, 100, 100, 100, 59, // solid #ddd;
32, 112, 97, 100, 100, 105, 110, 103, 58, 32, 48, 46, // padding: 0. 32, 125, 10, 46, 114, 111, 117, 110, 100, 101, 100, 32, // }..rounded
53, 101, 109, 59, 32, 125, 10, 97, 44, 32, 97, 58, // 5em; }.a, a: 123, 32, 98, 111, 114, 100, 101, 114, 45, 114, 97, 100, // { border-rad
118, 105, 115, 105, 116, 101, 100, 44, 32, 97, 58, 97, // visited, a:a 105, 117, 115, 58, 32, 48, 46, 53, 101, 109, 59, 32, // ius: 0.5em;
99, 116, 105, 118, 101, 32, 123, 32, 99, 111, 108, 111, // ctive { colo 125, 10, 46, 110, 111, 119, 114, 97, 112, 32, 123, 32, // }..nowrap {
114, 58, 32, 35, 53, 53, 102, 59, 32, 125, 10, 98, // r: #55f; }.b 119, 104, 105, 116, 101, 45, 115, 112, 97, 99, 101, 58, // white-space:
111, 100, 121, 32, 123, 98, 97, 99, 107, 103, 114, 111, // ody {backgro 32, 110, 111, 119, 114, 97, 112, 59, 32, 125, 10, 46, // nowrap; }..
117, 110, 100, 58, 32, 35, 52, 53, 53, 59, 32, 125, // und: #455; } 109, 115, 103, 32, 123, 32, 98, 97, 99, 107, 103, 114, // msg { backgr
10, 46, 97, 100, 100, 111, 110, 32, 123, 32, 98, 97, // ..addon { ba 111, 117, 110, 100, 58, 32, 35, 100, 101, 102, 59, 32, // ound: #def;
99, 107, 103, 114, 111, 117, 110, 100, 58, 32, 35, 101, // ckground: #e 98, 111, 114, 100, 101, 114, 45, 108, 101, 102, 116, 58, // border-left:
101, 101, 59, 32, 32, 109, 105, 110, 45, 119, 105, 100, // ee; min-wid 32, 53, 112, 120, 32, 115, 111, 108, 105, 100, 32, 35, // 5px solid #
116, 104, 58, 32, 57, 101, 109, 59, 125, 10, 46, 98, // th: 9em;}..b 53, 57, 100, 59, 32, 112, 97, 100, 100, 105, 110, 103, // 59d; padding
116, 110, 32, 123, 10, 32, 32, 98, 97, 99, 107, 103, // tn {. backg 58, 32, 48, 46, 53, 101, 109, 59, 32, 102, 111, 110, // : 0.5em; fon
114, 111, 117, 110, 100, 58, 32, 35, 99, 99, 99, 59, // round: #ccc; 116, 45, 115, 105, 122, 101, 58, 32, 57, 48, 37, 59, // t-size: 90%;
32, 98, 111, 114, 100, 101, 114, 45, 114, 97, 100, 105, // border-radi 32, 109, 97, 114, 103, 105, 110, 58, 32, 49, 101, 109, // margin: 1em
117, 115, 58, 32, 48, 46, 51, 101, 109, 59, 32, 98, // us: 0.3em; b 32, 48, 59, 32, 99, 111, 108, 111, 114, 58, 32, 35, // 0; color: #
111, 114, 100, 101, 114, 58, 32, 48, 59, 32, 99, 111, // order: 0; co 55, 55, 55, 59, 32, 125, 10, 46, 105, 110, 112, 117, // 777; }..inpu
108, 111, 114, 58, 32, 35, 102, 102, 102, 59, 32, 99, // lor: #fff; c 116, 32, 123, 32, 98, 97, 99, 107, 103, 114, 111, 117, // t { backgrou
117, 114, 115, 111, 114, 58, 32, 112, 111, 105, 110, 116, // ursor: point 110, 100, 58, 32, 35, 102, 101, 97, 59, 32, 112, 97, // nd: #fea; pa
101, 114, 59, 10, 32, 32, 100, 105, 115, 112, 108, 97, // er;. displa 100, 100, 105, 110, 103, 58, 32, 48, 46, 50, 101, 109, // dding: 0.2em
121, 58, 32, 105, 110, 108, 105, 110, 101, 45, 98, 108, // y: inline-bl 32, 49, 101, 109, 59, 32, 98, 111, 114, 100, 101, 114, // 1em; border
111, 99, 107, 59, 32, 112, 97, 100, 100, 105, 110, 103, // ock; padding 45, 114, 97, 100, 105, 117, 115, 58, 32, 48, 46, 52, // -radius: 0.4
58, 32, 48, 46, 54, 101, 109, 32, 50, 101, 109, 59, // : 0.6em 2em; 101, 109, 59, 32, 125, 10, 46, 111, 117, 116, 112, 117, // em; }..outpu
32, 102, 111, 110, 116, 45, 119, 101, 105, 103, 104, 116, // font-weight 116, 32, 123, 32, 98, 97, 99, 107, 103, 114, 111, 117, // t { backgrou
58, 32, 98, 111, 108, 100, 101, 114, 59, 10, 125, 10, // : bolder;.}. 110, 100, 58, 32, 35, 97, 101, 102, 59, 32, 112, 97, // nd: #aef; pa
46, 98, 116, 110, 91, 100, 105, 115, 97, 98, 108, 101, // .btn[disable 100, 100, 105, 110, 103, 58, 32, 48, 46, 50, 101, 109, // dding: 0.2em
100, 93, 32, 123, 32, 111, 112, 97, 99, 105, 116, 121, // d] { opacity 32, 49, 101, 109, 59, 32, 98, 111, 114, 100, 101, 114, // 1em; border
58, 32, 48, 46, 53, 59, 32, 99, 117, 114, 115, 111, // : 0.5; curso 45, 114, 97, 100, 105, 117, 115, 58, 32, 48, 46, 52, // -radius: 0.4
114, 58, 32, 97, 117, 116, 111, 59, 125, 10, 46, 115, // r: auto;}..s 101, 109, 59, 32, 125, 10, 46, 112, 114, 45, 49, 32, // em; }..pr-1
109, 111, 111, 116, 104, 32, 123, 32, 116, 114, 97, 110, // mooth { tran 123, 32, 112, 97, 100, 100, 105, 110, 103, 45, 114, 105, // { padding-ri
115, 105, 116, 105, 111, 110, 58, 32, 97, 108, 108, 32, // sition: all 103, 104, 116, 58, 32, 48, 46, 53, 101, 109, 59, 32, // ght: 0.5em;
46, 50, 115, 59, 32, 125, 10, 46, 99, 111, 110, 116, // .2s; }..cont 125, 10, 46, 109, 121, 45, 49, 32, 123, 32, 109, 97, // }..my-1 { ma
97, 105, 110, 101, 114, 32, 123, 32, 109, 97, 114, 103, // ainer { marg 114, 103, 105, 110, 45, 116, 111, 112, 58, 32, 48, 46, // rgin-top: 0.
105, 110, 58, 32, 50, 101, 109, 32, 97, 117, 116, 111, // in: 2em auto 51, 101, 109, 59, 32, 109, 97, 114, 103, 105, 110, 45, // 3em; margin-
59, 32, 109, 97, 120, 45, 119, 105, 100, 116, 104, 58, // ; max-width: 98, 111, 116, 116, 111, 109, 58, 32, 48, 46, 51, 101, // bottom: 0.3e
32, 54, 56, 48, 112, 120, 59, 32, 98, 97, 99, 107, // 680px; back 109, 59, 125, 10, 46, 109, 108, 45, 49, 32, 123, 32, // m;}..ml-1 {
103, 114, 111, 117, 110, 100, 58, 32, 119, 104, 105, 116, // ground: whit 109, 97, 114, 103, 105, 110, 45, 108, 101, 102, 116, 58, // margin-left:
101, 59, 32, 112, 97, 100, 100, 105, 110, 103, 58, 32, // e; padding: 32, 48, 46, 53, 101, 109, 59, 32, 125, 10, 10, 47, // 0.5em; }../
49, 101, 109, 59, 32, 98, 111, 114, 100, 101, 114, 45, // 1em; border- 42, 32, 71, 114, 105, 100, 32, 42, 47, 10, 46, 114, // * Grid */..r
114, 97, 100, 105, 117, 115, 58, 32, 48, 46, 53, 101, // radius: 0.5e 111, 119, 32, 123, 32, 100, 105, 115, 112, 108, 97, 121, // ow { display
109, 59, 32, 125, 10, 46, 100, 45, 102, 108, 101, 120, // m; }..d-flex 58, 32, 102, 108, 101, 120, 59, 32, 102, 108, 101, 120, // : flex; flex
32, 123, 32, 100, 105, 115, 112, 108, 97, 121, 58, 32, // { display: 45, 119, 114, 97, 112, 58, 32, 119, 114, 97, 112, 59, // -wrap: wrap;
102, 108, 101, 120, 59, 32, 125, 10, 46, 100, 45, 110, // flex; }..d-n 32, 125, 10, 46, 99, 111, 108, 32, 123, 32, 109, 97, // }..col { ma
111, 110, 101, 32, 123, 32, 100, 105, 115, 112, 108, 97, // one { displa 114, 103, 105, 110, 58, 32, 48, 59, 32, 112, 97, 100, // rgin: 0; pad
121, 58, 32, 110, 111, 110, 101, 59, 32, 125, 10, 46, // y: none; }.. 100, 105, 110, 103, 58, 32, 48, 59, 32, 111, 118, 101, // ding: 0; ove
98, 111, 114, 100, 101, 114, 32, 123, 32, 98, 111, 114, // border { bor 114, 102, 108, 111, 119, 58, 32, 97, 117, 116, 111, 59, // rflow: auto;
100, 101, 114, 58, 32, 49, 112, 120, 32, 115, 111, 108, // der: 1px sol 32, 125, 10, 46, 99, 111, 108, 45, 49, 50, 32, 123, // }..col-12 {
105, 100, 32, 35, 100, 100, 100, 59, 32, 125, 10, 46, // id #ddd; }.. 32, 119, 105, 100, 116, 104, 58, 32, 49, 48, 48, 37, // width: 100%
114, 111, 117, 110, 100, 101, 100, 32, 123, 32, 98, 111, // rounded { bo 59, 32, 125, 10, 46, 99, 111, 108, 45, 49, 49, 32, // ; }..col-11
114, 100, 101, 114, 45, 114, 97, 100, 105, 117, 115, 58, // rder-radius: 123, 32, 119, 105, 100, 116, 104, 58, 32, 57, 49, 46, // { width: 91.
32, 48, 46, 53, 101, 109, 59, 32, 125, 10, 46, 110, // 0.5em; }..n 54, 54, 37, 59, 32, 125, 10, 46, 99, 111, 108, 45, // 66%; }..col-
111, 119, 114, 97, 112, 32, 123, 32, 119, 104, 105, 116, // owrap { whit 49, 48, 32, 123, 32, 119, 105, 100, 116, 104, 58, 32, // 10 { width:
101, 45, 115, 112, 97, 99, 101, 58, 32, 110, 111, 119, // e-space: now 56, 51, 46, 51, 51, 37, 59, 32, 125, 10, 46, 99, // 83.33%; }..c
114, 97, 112, 59, 32, 125, 10, 46, 109, 115, 103, 32, // rap; }..msg 111, 108, 45, 57, 32, 123, 32, 119, 105, 100, 116, 104, // ol-9 { width
123, 32, 98, 97, 99, 107, 103, 114, 111, 117, 110, 100, // { background 58, 32, 55, 53, 37, 59, 32, 125, 10, 46, 99, 111, // : 75%; }..co
58, 32, 35, 100, 101, 102, 59, 32, 98, 111, 114, 100, // : #def; bord 108, 45, 56, 32, 123, 32, 119, 105, 100, 116, 104, 58, // l-8 { width:
101, 114, 45, 108, 101, 102, 116, 58, 32, 53, 112, 120, // er-left: 5px 32, 54, 54, 46, 54, 54, 37, 59, 32, 125, 10, 46, // 66.66%; }..
32, 115, 111, 108, 105, 100, 32, 35, 53, 57, 100, 59, // solid #59d; 99, 111, 108, 45, 55, 32, 123, 32, 119, 105, 100, 116, // col-7 { widt
32, 112, 97, 100, 100, 105, 110, 103, 58, 32, 48, 46, // padding: 0. 104, 58, 32, 53, 56, 46, 51, 51, 37, 59, 32, 125, // h: 58.33%; }
53, 101, 109, 59, 32, 102, 111, 110, 116, 45, 115, 105, // 5em; font-si 10, 46, 99, 111, 108, 45, 54, 32, 123, 32, 119, 105, // ..col-6 { wi
122, 101, 58, 32, 57, 48, 37, 59, 32, 109, 97, 114, // ze: 90%; mar 100, 116, 104, 58, 32, 53, 48, 37, 59, 32, 125, 10, // dth: 50%; }.
103, 105, 110, 58, 32, 49, 101, 109, 32, 48, 59, 32, // gin: 1em 0; 46, 99, 111, 108, 45, 53, 32, 123, 32, 119, 105, 100, // .col-5 { wid
125, 10, 46, 105, 110, 112, 117, 116, 32, 123, 32, 98, // }..input { b 116, 104, 58, 32, 52, 49, 46, 54, 54, 37, 59, 32, // th: 41.66%;
97, 99, 107, 103, 114, 111, 117, 110, 100, 58, 32, 35, // ackground: # 125, 10, 46, 99, 111, 108, 45, 52, 32, 123, 32, 119, // }..col-4 { w
102, 101, 97, 59, 32, 112, 97, 100, 100, 105, 110, 103, // fea; padding 105, 100, 116, 104, 58, 32, 51, 51, 46, 51, 51, 37, // idth: 33.33%
58, 32, 48, 46, 50, 101, 109, 32, 49, 101, 109, 59, // : 0.2em 1em; 59, 32, 125, 10, 46, 99, 111, 108, 45, 51, 32, 123, // ; }..col-3 {
32, 98, 111, 114, 100, 101, 114, 45, 114, 97, 100, 105, // border-radi 32, 119, 105, 100, 116, 104, 58, 32, 50, 53, 37, 59, // width: 25%;
117, 115, 58, 32, 48, 46, 52, 101, 109, 59, 32, 125, // us: 0.4em; } 32, 125, 10, 46, 99, 111, 108, 45, 50, 32, 123, 32, // }..col-2 {
10, 46, 111, 117, 116, 112, 117, 116, 32, 123, 32, 98, // ..output { b 119, 105, 100, 116, 104, 58, 32, 49, 54, 46, 54, 54, // width: 16.66
97, 99, 107, 103, 114, 111, 117, 110, 100, 58, 32, 35, // ackground: # 37, 59, 32, 125, 10, 46, 99, 111, 108, 45, 49, 32, // %; }..col-1
97, 101, 102, 59, 32, 112, 97, 100, 100, 105, 110, 103, // aef; padding 123, 32, 119, 105, 100, 116, 104, 58, 32, 56, 46, 51, // { width: 8.3
58, 32, 48, 46, 50, 101, 109, 32, 49, 101, 109, 59, // : 0.2em 1em; 51, 37, 59, 32, 125, 10, 64, 109, 101, 100, 105, 97, // 3%; }.@media
32, 98, 111, 114, 100, 101, 114, 45, 114, 97, 100, 105, // border-radi 32, 40, 109, 105, 110, 45, 119, 105, 100, 116, 104, 58, // (min-width:
117, 115, 58, 32, 48, 46, 52, 101, 109, 59, 32, 125, // us: 0.4em; } 32, 49, 51, 49, 48, 112, 120, 41, 32, 123, 32, 46, // 1310px) { .
10, 0 // . 99, 111, 110, 116, 97, 105, 110, 101, 114, 32, 123, 32, // container {
109, 97, 114, 103, 105, 110, 58, 32, 97, 117, 116, 111, // margin: auto
59, 32, 119, 105, 100, 116, 104, 58, 32, 49, 50, 55, // ; width: 127
48, 112, 120, 59, 32, 125, 32, 125, 10, 64, 109, 101, // 0px; } }.@me
100, 105, 97, 32, 40, 109, 97, 120, 45, 119, 105, 100, // dia (max-wid
116, 104, 58, 32, 57, 50, 48, 112, 120, 41, 32, 123, // th: 920px) {
32, 46, 114, 111, 119, 32, 46, 99, 111, 108, 32, 123, // .row .col {
32, 119, 105, 100, 116, 104, 58, 32, 49, 48, 48, 37, // width: 100%
59, 32, 125, 32, 125, 10, 0 // ; } }.
}; };
static const struct packed_file { static const struct packed_file {
@ -1470,9 +1763,9 @@ static const struct packed_file {
time_t mtime; time_t mtime;
} packed_files[] = { } packed_files[] = {
{"/web_root/index.html", v1, sizeof(v1), 1654623573}, {"/web_root/index.html", v1, sizeof(v1), 1654623573},
{"/web_root/main.js", v2, sizeof(v2), 1654674665}, {"/web_root/main.js", v2, sizeof(v2), 1655500873},
{"/web_root/preact.min.js", v3, sizeof(v3), 1654623573}, {"/web_root/preact.min.js", v3, sizeof(v3), 1654623573},
{"/web_root/style.css", v4, sizeof(v4), 1654653116}, {"/web_root/style.css", v4, sizeof(v4), 1655197477},
{NULL, NULL, 0, 0} {NULL, NULL, 0, 0}
}; };

112
examples/uart-bridge/web_root/main.js
View File

@ -7,24 +7,36 @@ const Message = m => html`<span
</span>`; </span>`;
const App = function(props) { const App = function(props) {
const [cfg, setCfg] = useState({tcp: '', ws: ''}); const [cfg, setCfg] = useState({tcp: {}, ws: {}, mqtt: {}});
const [messages, setMessages] = useState([]); const [messages, setMessages] = useState([]);
const [txt, setTxt] = useState('');
const [connected, setConnected] = useState(false); const [connected, setConnected] = useState(false);
const [txt, setTxt] = useState('');
const [ws, setWs] = useState(null); const [ws, setWs] = useState(null);
const [rx, setRx] = useState('');
const [tx, setTx] = useState('');
const [baud, setBaud] = useState('');
const [tcpport, setTcpport] = useState(4001);
const [wsport, setWsport] = useState(4002);
const [mqtt, setMqtt] = useState('');
const tcp_port = cfg.tcp.split(':')[2] || 4001; // const tcp_port = cfg.tcp.split(':')[2] || 4001;
const ws_port = cfg.ws.split(':')[2] || 4002; // const ws_port = cfg.ws.split(':')[2] || 4002;
const refresh = () => const refresh = () => fetch('/api/config/get').then(r => r.json()).then(r => {
fetch('/api/config/get').then(r => r.json()).then(r => setCfg(r)); setTx(r.tx), setRx(r.rx), setBaud(r.baud), setCfg(r);
setTcpport(r.tcp.url.split(':')[2] || 4001);
setWsport(r.ws.url.split(':')[2] || 4002);
setMqtt(r.mqtt.url);
});
const watchWebsocket = function() { const watchWebsocket = function() {
// Connect to websocker port, to implement WS console // Connect to websocker port, to implement WS console
var l = window.location, proto = l.protocol.replace('http', 'ws');
var tid, url = `${proto}//${l.hostname}:${ws_port}/ws`;
console.log(url);
var reconnect = function() { var reconnect = function() {
var port;
setWsport(x => port = x);
var l = window.location, proto = l.protocol.replace('http', 'ws');
var tid, url = `${proto}//${l.hostname}:${port}/ws`;
// console.log(url);
var ws = new WebSocket(url); var ws = new WebSocket(url);
ws.onopen = () => { ws.onopen = () => {
setConnected(true); setConnected(true);
@ -56,25 +68,81 @@ const App = function(props) {
setTxt(''); setTxt('');
}; };
const onchange = ev => false;
return html` return html`
<div class="container"> <div class="container">
<h1>UART \u27F7 network bridge </h1> <h1 style="margin-bottom: 0;">UART \u27F7 network bridge </h1>
<h3>UART settings</h3>
<pre class="d-none">${JSON.stringify(cfg, null, 2)}</pre> <pre class="d-none">${JSON.stringify(cfg, null, 2)}</pre>
<p>RX pin ${cfg.rx}, TX pin ${cfg.tx}, baud ${cfg.baud}</p> <div class="row">
<h3>TCP listener: port ${tcp_port}</h3> <div class="col col-4">
<p>Use netcat to connect:</p> <h3>UART configuration</h3>
<div class="msg"> $ nc ${location.hostname} ${tcp_port} </div> <div class="d-flex pr-1 my-1">
<h3>Websocket listener: port ${ws_port}</h3> <label class="addon">UART TX pin</label>
<div>UART console. Status: ${connected ? 'connected' : 'disconnected'}</div> <input style="width: 5em;" value=${tx} onchange=${onchange}
oninput=${ev => setTx(ev.target.value)} />
</div><div class="d-flex pr-1 my-1">
<label class="addon">UART RX pin</label>
<input style="width: 5em;" value=${rx} onchange=${onchange}
oninput=${ev => setRx(ev.target.value)} />
</div><div class="d-flex pr-1 my-y">
<label class="addon">UART Baud</label>
<input style="width: 5em;" value=${baud} onchange=${onchange}
oninput=${ev => setBaud(ev.target.value)} />
</div>
</div>
<div class="col col-8">
<h3>Network configuration</h3>
<div class="d-flex my-1">
<label class="addon">Local TCP port</label>
<input style="min-width: 4em; flex: 1 100%;"
value=${tcpport} onchange=${onchange}
oninput=${ev => setTcpport(ev.target.value)} />
<label class="ml-1 d-flex label"><input type="checkbox"
checked=${cfg.tcp.enable} /> enable</label>
</div><div class="d-flex my-1">
<label class="addon">Local WS port</label>
<input style="flex: 1 100%;"
value=${wsport} onchange=${onchange}
oninput=${ev => setWsport(ev.target.value)} />
<label class="ml-1 d-flex label"><input type="checkbox"
checked=${cfg.ws.enable} /> enable</label>
</div><div class="d-flex my-1">
<label class="addon">Remote MQTT</label>
<input style="flex: 1 100%;"
value=${mqtt} onchange=${onchange}
oninput=${ev => setMqtt(ev.target.value)} />
<label class="ml-1 d-flex label"><input type="checkbox"
checked=${cfg.mqtt.enable} /> enable</label>
</div>
</div>
</div>
<div class="msg">
Note: to connect over MQTT,
go to <a href="http://www.hivemq.com/demos/websocket-client/">
console</a>, subscribe to b/tx and publish to b/rx<br/>
Note: to connect over TCP, use netcat utility:<br/>
$ nc ${location.hostname} ${tcpport}
</div>
<div style="margin-top: 2em;">
<b>UART console</b><span style="margin-left: 1em; color: #777;">works
over the local WS port. WebSocket status: </span><span
style="color: ${connected ? 'teal' : 'red'};">
\u25cf ${connected ? 'connected' : 'disconnected'} </span>
</div>
<div style="margin: 0.5em 0; display: flex">
<input placeholder="to send data, type and press enter..." style="flex: 1 100%;"
value=${txt} onchange=${sendmessage}
oninput=${ev => setTxt(ev.target.value)} />
<button style="margin-left: 1em;"
onclick=${ev => setMessages([])}>clear</button>
</div>
<pre style="height: 15em; overflow: auto;"> <pre style="height: 15em; overflow: auto;">
${messages.map(message => h(Message, {message}))} ${messages.map(message => h(Message, {message}))}
</pre> </pre>
<div style="margin: 0.5em 0; display: flex">
<input placeholder="type and press enter..." style="flex: 1 100%;"
value=${txt} onchange=${sendmessage}
oninput=${ev => setTxt(ev.target.value)} />
</div>
</div>`; </div>`;
}; };

33
examples/uart-bridge/web_root/style.css
View File

@ -2,22 +2,45 @@
html, body { margin: 0; padding: 0; height: 100%; font: 16px sans-serif; } html, body { margin: 0; padding: 0; height: 100%; font: 16px sans-serif; }
select, input, label::before, textarea { outline: none; box-shadow:none !important; border: 1px solid #ccc !important; } select, input, label::before, textarea { outline: none; box-shadow:none !important; border: 1px solid #ccc !important; }
pre { color: #373; font-family: monospace; font-weight: bolder; font-size: smaller; background: #ddd; padding: 1em; border-radius: 0.2em; } pre { color: #373; font-family: monospace; font-weight: bolder; font-size: smaller; background: #ddd; padding: 1em; border-radius: 0.2em; }
textarea, input, .addon { font-size: 15px; border: 1px solid #ccc; padding: 0.5em; } textarea, input { border: 1px solid #ccc; padding: 0.3em 0.5em;}
textarea, input, .addon, .label { font-size: 14px; }
a, a:visited, a:active { color: #55f; } a, a:visited, a:active { color: #55f; }
body {background: #455; } body {background: #455; }
.addon { background: #eee; min-width: 9em;} .addon { color: #999; min-width: 7.5em; }
.label { color: #999; }
.btn { .btn {
background: #ccc; border-radius: 0.3em; border: 0; color: #fff; cursor: pointer; background: #ccc; border-radius: 0.3em; border: 0; color: #fff; cursor: pointer;
display: inline-block; padding: 0.6em 2em; font-weight: bolder; display: inline-block; padding: 0.6em 2em; font-weight: bolder;
} }
.btn[disabled] { opacity: 0.5; cursor: auto;} .btn[disabled] { opacity: 0.5; cursor: auto;}
.smooth { transition: all .2s; } .smooth { transition: all .2s; }
.container { margin: 2em auto; max-width: 680px; background: white; padding: 1em; border-radius: 0.5em; } .container { margin: 2em auto; max-width: 620px; background: white; padding: 1em; border-radius: 0.5em; }
.d-flex { display: flex; } .d-flex { display: flex; align-items: center; }
.d-none { display: none; } .d-none { display: none; }
.border { border: 1px solid #ddd; } .border { border: 1px solid #ddd; }
.rounded { border-radius: 0.5em; } .rounded { border-radius: 0.5em; }
.nowrap { white-space: nowrap; } .nowrap { white-space: nowrap; }
.msg { background: #def; border-left: 5px solid #59d; padding: 0.5em; font-size: 90%; margin: 1em 0; } .msg { background: #def; border-left: 5px solid #59d; padding: 0.5em; font-size: 90%; margin: 1em 0; color: #777; }
.input { background: #fea; padding: 0.2em 1em; border-radius: 0.4em; } .input { background: #fea; padding: 0.2em 1em; border-radius: 0.4em; }
.output { background: #aef; padding: 0.2em 1em; border-radius: 0.4em; } .output { background: #aef; padding: 0.2em 1em; border-radius: 0.4em; }
.pr-1 { padding-right: 0.5em; }
.my-1 { margin-top: 0.3em; margin-bottom: 0.3em;}
.ml-1 { margin-left: 0.5em; }
/* Grid */
.row { display: flex; flex-wrap: wrap; }
.col { margin: 0; padding: 0; overflow: auto; }
.col-12 { width: 100%; }
.col-11 { width: 91.66%; }
.col-10 { width: 83.33%; }
.col-9 { width: 75%; }
.col-8 { width: 66.66%; }
.col-7 { width: 58.33%; }
.col-6 { width: 50%; }
.col-5 { width: 41.66%; }
.col-4 { width: 33.33%; }
.col-3 { width: 25%; }
.col-2 { width: 16.66%; }
.col-1 { width: 8.33%; }
@media (min-width: 1310px) { .container { margin: auto; width: 1270px; } }
@media (max-width: 920px) { .row .col { width: 100%; } }