mirror of
https://github.com/cesanta/mongoose.git
synced 2025-07-23 21:56:16 +08:00
Refactor UART example
This commit is contained in:
Sergey Lyubka
parent
1640287897
commit
c84dab21e4
@ -3,13 +3,25 @@
|
||||
|
||||
#include "mongoose.h"
|
||||
|
||||
static const char *s_tcp_url = "tcp://0.0.0.0:4001";
|
||||
static const char *s_ws_url = "ws://0.0.0.0:4002";
|
||||
static struct mg_connection *s_tcp_conn;
|
||||
static struct mg_connection *s_ws_conn;
|
||||
static int s_rx = 4;
|
||||
static int s_tx = 5;
|
||||
static int s_baud = 115200;
|
||||
#define DEFAULT_TCP "tcp://0.0.0.0:4001"
|
||||
#define DEFAULT_WEBSOCKET "ws://0.0.0.0:4002"
|
||||
#define DEFAULT_MQTT "mqtt://broker.hivemq.com:1883?tx=b/tx&rx=b/rx"
|
||||
|
||||
struct endpoint {
|
||||
char *url;
|
||||
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);
|
||||
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
|
||||
c->recv.len = 0; // Discard received data
|
||||
} 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;
|
||||
}
|
||||
@ -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
|
||||
c->recv.len = 0; // Discard received data
|
||||
} 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;
|
||||
}
|
||||
@ -69,8 +109,16 @@ static void tcp_fn(struct mg_connection *c, int ev, void *evd, void *fnd) {
|
||||
static void timer_fn(void *param) {
|
||||
// Start listeners if they're stopped for any reason
|
||||
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_ws_conn == NULL) s_ws_conn = mg_http_listen(mgr, s_ws_url, ws_fn, 0);
|
||||
if (s_state.tcp.c == NULL && s_state.tcp.enable) {
|
||||
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
|
||||
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) {
|
||||
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] == '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 *fn_data) {
|
||||
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);
|
||||
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) {
|
||||
struct mg_http_message *hm = (struct mg_http_message *) ev_data;
|
||||
if (mg_http_match_uri(hm, "/api/hi")) {
|
||||
mg_http_reply(c, 200, "", "hi\n"); // Testing endpoint
|
||||
} else if (mg_http_match_uri(hm, "/api/config/get")) {
|
||||
mg_http_reply(
|
||||
c, 200, "Content-Type: application/json\r\n",
|
||||
"{\"tcp\":\"%s\",\"ws\":\"%s\",\"rx\":%d,\"tx\":%d,\"baud\":%d}\n",
|
||||
s_tcp_url, s_ws_url, s_rx, s_tx, s_baud);
|
||||
mg_http_reply(c, 200, "Content-Type: application/json\r\n",
|
||||
"{%Q:{%Q:%Q,%Q:%s},%Q:{%Q:%Q,%Q:%s},%Q:{%Q:%Q,%Q:%s},"
|
||||
"%Q:%d,%Q:%d,%Q:%d}\n",
|
||||
"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 {
|
||||
struct mg_http_serve_opts opts = {0};
|
||||
#if 1
|
||||
#if 0
|
||||
opts.root_dir = "/web_root";
|
||||
opts.fs = &mg_fs_packed;
|
||||
#else
|
||||
|
||||
@ -61,192 +61,424 @@ static const unsigned char v2[] = {
|
||||
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] =
|
||||
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: '
|
||||
39, 125, 41, 59, 10, 32, 32, 99, 111, 110, 115, 116, // '});. const
|
||||
32, 91, 109, 101, 115, 115, 97, 103, 101, 115, 44, 32, // [messages,
|
||||
115, 101, 116, 77, 101, 115, 115, 97, 103, 101, 115, 93, // setMessages]
|
||||
112, 58, 32, 123, 125, 44, 32, 119, 115, 58, 32, 123, // p: {}, ws: {
|
||||
125, 44, 32, 109, 113, 116, 116, 58, 32, 123, 125, 125, // }, mqtt: {}}
|
||||
41, 59, 10, 32, 32, 99, 111, 110, 115, 116, 32, 91, // );. const [
|
||||
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(
|
||||
91, 93, 41, 59, 10, 32, 32, 99, 111, 110, 115, 116, // []);. const
|
||||
32, 91, 116, 120, 116, 44, 32, 115, 101, 116, 84, 120, // [txt, setTx
|
||||
116, 93, 32, 61, 32, 117, 115, 101, 83, 116, 97, 116, // t] = useStat
|
||||
101, 40, 39, 39, 41, 59, 10, 32, 32, 99, 111, 110, // e('');. con
|
||||
115, 116, 32, 91, 99, 111, 110, 110, 101, 99, 116, 101, // st [connecte
|
||||
100, 44, 32, 115, 101, 116, 67, 111, 110, 110, 101, 99, // d, setConnec
|
||||
116, 101, 100, 93, 32, 61, 32, 117, 115, 101, 83, 116, // ted] = useSt
|
||||
97, 116, 101, 40, 102, 97, 108, 115, 101, 41, 59, 10, // ate(false);.
|
||||
32, 32, 99, 111, 110, 115, 116, 32, 91, 119, 115, 44, // const [ws,
|
||||
32, 115, 101, 116, 87, 115, 93, 32, 61, 32, 117, 115, // setWs] = us
|
||||
101, 83, 116, 97, 116, 101, 40, 110, 117, 108, 108, 41, // eState(null)
|
||||
59, 10, 10, 32, 32, 99, 111, 110, 115, 116, 32, 116, // ;.. const t
|
||||
99, 112, 95, 112, 111, 114, 116, 32, 61, 32, 99, 102, // cp_port = cf
|
||||
103, 46, 116, 99, 112, 46, 115, 112, 108, 105, 116, 40, // g.tcp.split(
|
||||
39, 58, 39, 41, 91, 50, 93, 32, 124, 124, 32, 52, // ':')[2] || 4
|
||||
48, 48, 49, 59, 10, 32, 32, 99, 111, 110, 115, 116, // 001;. const
|
||||
32, 119, 115, 95, 112, 111, 114, 116, 32, 61, 32, 99, // ws_port = c
|
||||
102, 103, 46, 119, 115, 46, 115, 112, 108, 105, 116, 40, // fg.ws.split(
|
||||
39, 58, 39, 41, 91, 50, 93, 32, 124, 124, 32, 52, // ':')[2] || 4
|
||||
48, 48, 50, 59, 10, 10, 32, 32, 99, 111, 110, 115, // 002;.. cons
|
||||
116, 32, 114, 101, 102, 114, 101, 115, 104, 32, 61, 32, // t refresh =
|
||||
40, 41, 32, 61, 62, 10, 32, 32, 32, 32, 32, 32, // () =>.
|
||||
102, 101, 116, 99, 104, 40, 39, 47, 97, 112, 105, 47, // fetch('/api/
|
||||
99, 111, 110, 102, 105, 103, 47, 103, 101, 116, 39, 41, // config/get')
|
||||
46, 116, 104, 101, 110, 40, 114, 32, 61, 62, 32, 114, // .then(r => r
|
||||
46, 106, 115, 111, 110, 40, 41, 41, 46, 116, 104, 101, // .json()).the
|
||||
110, 40, 114, 32, 61, 62, 32, 115, 101, 116, 67, 102, // n(r => setCf
|
||||
103, 40, 114, 41, 41, 59, 10, 10, 32, 32, 99, 111, // g(r));.. co
|
||||
110, 115, 116, 32, 119, 97, 116, 99, 104, 87, 101, 98, // nst watchWeb
|
||||
115, 111, 99, 107, 101, 116, 32, 61, 32, 102, 117, 110, // socket = fun
|
||||
99, 116, 105, 111, 110, 40, 41, 32, 123, 10, 32, 32, // ction() {.
|
||||
32, 32, 47, 47, 32, 67, 111, 110, 110, 101, 99, 116, // // Connect
|
||||
32, 116, 111, 32, 119, 101, 98, 115, 111, 99, 107, 101, // to websocke
|
||||
114, 32, 112, 111, 114, 116, 44, 32, 116, 111, 32, 105, // r port, to i
|
||||
109, 112, 108, 101, 109, 101, 110, 116, 32, 87, 83, 32, // mplement WS
|
||||
99, 111, 110, 115, 111, 108, 101, 10, 32, 32, 32, 32, // console.
|
||||
118, 97, 114, 32, 108, 32, 61, 32, 119, 105, 110, 100, // var l = wind
|
||||
111, 119, 46, 108, 111, 99, 97, 116, 105, 111, 110, 44, // ow.location,
|
||||
32, 112, 114, 111, 116, 111, 32, 61, 32, 108, 46, 112, // proto = l.p
|
||||
114, 111, 116, 111, 99, 111, 108, 46, 114, 101, 112, 108, // rotocol.repl
|
||||
97, 99, 101, 40, 39, 104, 116, 116, 112, 39, 44, 32, // ace('http',
|
||||
39, 119, 115, 39, 41, 59, 10, 32, 32, 32, 32, 118, // 'ws');. v
|
||||
102, 97, 108, 115, 101, 41, 59, 10, 32, 32, 99, 111, // false);. co
|
||||
110, 115, 116, 32, 91, 116, 120, 116, 44, 32, 115, 101, // nst [txt, se
|
||||
116, 84, 120, 116, 93, 32, 61, 32, 117, 115, 101, 83, // tTxt] = useS
|
||||
116, 97, 116, 101, 40, 39, 39, 41, 59, 10, 32, 32, // tate('');.
|
||||
99, 111, 110, 115, 116, 32, 91, 119, 115, 44, 32, 115, // const [ws, s
|
||||
101, 116, 87, 115, 93, 32, 61, 32, 117, 115, 101, 83, // etWs] = useS
|
||||
116, 97, 116, 101, 40, 110, 117, 108, 108, 41, 59, 10, // tate(null);.
|
||||
32, 32, 99, 111, 110, 115, 116, 32, 91, 114, 120, 44, // const [rx,
|
||||
32, 115, 101, 116, 82, 120, 93, 32, 61, 32, 117, 115, // setRx] = us
|
||||
101, 83, 116, 97, 116, 101, 40, 39, 39, 41, 59, 10, // eState('');.
|
||||
32, 32, 99, 111, 110, 115, 116, 32, 91, 116, 120, 44, // const [tx,
|
||||
32, 115, 101, 116, 84, 120, 93, 32, 61, 32, 117, 115, // setTx] = us
|
||||
101, 83, 116, 97, 116, 101, 40, 39, 39, 41, 59, 10, // eState('');.
|
||||
32, 32, 99, 111, 110, 115, 116, 32, 91, 98, 97, 117, // const [bau
|
||||
100, 44, 32, 115, 101, 116, 66, 97, 117, 100, 93, 32, // d, setBaud]
|
||||
61, 32, 117, 115, 101, 83, 116, 97, 116, 101, 40, 39, // = useState('
|
||||
39, 41, 59, 10, 32, 32, 99, 111, 110, 115, 116, 32, // ');. const
|
||||
91, 116, 99, 112, 112, 111, 114, 116, 44, 32, 115, 101, // [tcpport, se
|
||||
116, 84, 99, 112, 112, 111, 114, 116, 93, 32, 61, 32, // tTcpport] =
|
||||
117, 115, 101, 83, 116, 97, 116, 101, 40, 52, 48, 48, // useState(400
|
||||
49, 41, 59, 10, 32, 32, 99, 111, 110, 115, 116, 32, // 1);. const
|
||||
91, 119, 115, 112, 111, 114, 116, 44, 32, 115, 101, 116, // [wsport, set
|
||||
87, 115, 112, 111, 114, 116, 93, 32, 61, 32, 117, 115, // Wsport] = us
|
||||
101, 83, 116, 97, 116, 101, 40, 52, 48, 48, 50, 41, // eState(4002)
|
||||
59, 10, 32, 32, 99, 111, 110, 115, 116, 32, 91, 109, // ;. const [m
|
||||
113, 116, 116, 44, 32, 115, 101, 116, 77, 113, 116, 116, // qtt, setMqtt
|
||||
93, 32, 61, 32, 117, 115, 101, 83, 116, 97, 116, 101, // ] = useState
|
||||
40, 39, 39, 41, 59, 10, 10, 32, 32, 47, 47, 32, // ('');.. //
|
||||
99, 111, 110, 115, 116, 32, 116, 99, 112, 95, 112, 111, // const tcp_po
|
||||
114, 116, 32, 61, 32, 99, 102, 103, 46, 116, 99, 112, // rt = cfg.tcp
|
||||
46, 115, 112, 108, 105, 116, 40, 39, 58, 39, 41, 91, // .split(':')[
|
||||
50, 93, 32, 124, 124, 32, 52, 48, 48, 49, 59, 10, // 2] || 4001;.
|
||||
32, 32, 47, 47, 32, 99, 111, 110, 115, 116, 32, 119, // // const w
|
||||
115, 95, 112, 111, 114, 116, 32, 61, 32, 99, 102, 103, // s_port = cfg
|
||||
46, 119, 115, 46, 115, 112, 108, 105, 116, 40, 39, 58, // .ws.split(':
|
||||
39, 41, 91, 50, 93, 32, 124, 124, 32, 52, 48, 48, // ')[2] || 400
|
||||
50, 59, 10, 10, 32, 32, 99, 111, 110, 115, 116, 32, // 2;.. const
|
||||
114, 101, 102, 114, 101, 115, 104, 32, 61, 32, 40, 41, // refresh = ()
|
||||
32, 61, 62, 32, 102, 101, 116, 99, 104, 40, 39, 47, // => fetch('/
|
||||
97, 112, 105, 47, 99, 111, 110, 102, 105, 103, 47, 103, // api/config/g
|
||||
101, 116, 39, 41, 46, 116, 104, 101, 110, 40, 114, 32, // et').then(r
|
||||
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
|
||||
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
|
||||
101, 125, 58, 36, 123, 119, 115, 95, 112, 111, 114, 116, // e}:${ws_port
|
||||
125, 47, 119, 115, 96, 59, 10, 32, 32, 32, 32, 99, // }/ws`;. c
|
||||
111, 110, 115, 111, 108, 101, 46, 108, 111, 103, 40, 117, // onsole.log(u
|
||||
114, 108, 41, 59, 10, 32, 32, 32, 32, 118, 97, 114, // rl);. var
|
||||
32, 114, 101, 99, 111, 110, 110, 101, 99, 116, 32, 61, // reconnect =
|
||||
32, 102, 117, 110, 99, 116, 105, 111, 110, 40, 41, 32, // function()
|
||||
123, 10, 32, 32, 32, 32, 32, 32, 118, 97, 114, 32, // {. var
|
||||
119, 115, 32, 61, 32, 110, 101, 119, 32, 87, 101, 98, // ws = new Web
|
||||
83, 111, 99, 107, 101, 116, 40, 117, 114, 108, 41, 59, // Socket(url);
|
||||
10, 32, 32, 32, 32, 32, 32, 119, 115, 46, 111, 110, // . ws.on
|
||||
111, 112, 101, 110, 32, 61, 32, 40, 41, 32, 61, 62, // open = () =>
|
||||
32, 123, 10, 32, 32, 32, 32, 32, 32, 32, 32, 115, // {. s
|
||||
101, 116, 67, 111, 110, 110, 101, 99, 116, 101, 100, 40, // etConnected(
|
||||
116, 114, 117, 101, 41, 59, 10, 32, 32, 32, 32, 32, // true);.
|
||||
32, 32, 32, 115, 101, 116, 87, 115, 40, 119, 115, 41, // setWs(ws)
|
||||
59, 10, 32, 32, 32, 32, 32, 32, 125, 59, 10, 32, // ;. };.
|
||||
32, 32, 32, 32, 32, 119, 115, 46, 111, 110, 109, 101, // ws.onme
|
||||
101, 125, 58, 36, 123, 112, 111, 114, 116, 125, 47, 119, // e}:${port}/w
|
||||
115, 96, 59, 10, 32, 32, 32, 32, 32, 32, 47, 47, // s`;. //
|
||||
32, 99, 111, 110, 115, 111, 108, 101, 46, 108, 111, 103, // console.log
|
||||
40, 117, 114, 108, 41, 59, 10, 32, 32, 32, 32, 32, // (url);.
|
||||
32, 118, 97, 114, 32, 119, 115, 32, 61, 32, 110, 101, // var ws = ne
|
||||
119, 32, 87, 101, 98, 83, 111, 99, 107, 101, 116, 40, // w WebSocket(
|
||||
117, 114, 108, 41, 59, 10, 32, 32, 32, 32, 32, 32, // url);.
|
||||
119, 115, 46, 111, 110, 111, 112, 101, 110, 32, 61, 32, // ws.onopen =
|
||||
40, 41, 32, 61, 62, 32, 123, 10, 32, 32, 32, 32, // () => {.
|
||||
32, 32, 32, 32, 115, 101, 116, 67, 111, 110, 110, 101, // setConne
|
||||
99, 116, 101, 100, 40, 116, 114, 117, 101, 41, 59, 10, // cted(true);.
|
||||
32, 32, 32, 32, 32, 32, 32, 32, 115, 101, 116, 87, // setW
|
||||
115, 40, 119, 115, 41, 59, 10, 32, 32, 32, 32, 32, // s(ws);.
|
||||
32, 125, 59, 10, 32, 32, 32, 32, 32, 32, 119, 115, // };. ws
|
||||
46, 111, 110, 109, 101, 115, 115, 97, 103, 101, 32, 61, // .onmessage =
|
||||
32, 101, 118, 32, 61, 62, 32, 123, 10, 32, 32, 32, // ev => {.
|
||||
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 =
|
||||
62, 32, 123, 10, 32, 32, 32, 32, 32, 32, 32, 32, // > {.
|
||||
47, 47, 32, 99, 111, 110, 115, 111, 108, 101, 46, 108, // // console.l
|
||||
111, 103, 40, 101, 118, 44, 32, 101, 118, 46, 100, 97, // og(ev, ev.da
|
||||
116, 97, 41, 59, 10, 32, 32, 32, 32, 32, 32, 32, // ta);.
|
||||
32, 115, 101, 116, 77, 101, 115, 115, 97, 103, 101, 115, // setMessages
|
||||
40, 120, 32, 61, 62, 32, 120, 46, 99, 111, 110, 99, // (x => x.conc
|
||||
97, 116, 40, 91, 123, 100, 97, 116, 97, 58, 32, 101, // at([{data: e
|
||||
118, 46, 100, 97, 116, 97, 44, 32, 117, 97, 114, 116, // v.data, uart
|
||||
58, 32, 116, 114, 117, 101, 125, 93, 41, 41, 59, 10, // : true}]));.
|
||||
32, 32, 32, 32, 32, 32, 125, 59, 10, 32, 32, 32, // };.
|
||||
32, 32, 32, 119, 115, 46, 111, 110, 99, 108, 111, 115, // ws.onclos
|
||||
101, 32, 61, 32, 102, 117, 110, 99, 116, 105, 111, 110, // e = function
|
||||
40, 41, 32, 123, 10, 32, 32, 32, 32, 32, 32, 32, // () {.
|
||||
32, 99, 108, 101, 97, 114, 84, 105, 109, 101, 111, 117, // clearTimeou
|
||||
116, 40, 116, 105, 100, 41, 59, 10, 32, 32, 32, 32, // t(tid);.
|
||||
32, 32, 32, 32, 116, 105, 100, 32, 61, 32, 115, 101, // tid = se
|
||||
116, 84, 105, 109, 101, 111, 117, 116, 40, 114, 101, 99, // tTimeout(rec
|
||||
111, 110, 110, 101, 99, 116, 44, 32, 49, 48, 48, 48, // onnect, 1000
|
||||
41, 59, 10, 32, 32, 32, 32, 32, 32, 32, 32, 115, // );. s
|
||||
101, 116, 67, 111, 110, 110, 101, 99, 116, 101, 100, 40, // etConnected(
|
||||
102, 97, 108, 115, 101, 41, 59, 10, 32, 32, 32, 32, // false);.
|
||||
32, 32, 32, 32, 115, 101, 116, 87, 115, 40, 110, 117, // setWs(nu
|
||||
108, 108, 41, 59, 10, 32, 32, 32, 32, 32, 32, 125, // ll);. }
|
||||
59, 10, 32, 32, 32, 32, 125, 59, 10, 32, 32, 32, // ;. };.
|
||||
32, 114, 101, 99, 111, 110, 110, 101, 99, 116, 40, 41, // reconnect()
|
||||
59, 10, 32, 32, 125, 59, 10, 10, 32, 32, 117, 115, // ;. };.. us
|
||||
101, 69, 102, 102, 101, 99, 116, 40, 40, 41, 32, 61, // eEffect(() =
|
||||
62, 32, 123, 10, 32, 32, 32, 32, 114, 101, 102, 114, // > {. refr
|
||||
101, 115, 104, 40, 41, 59, 10, 32, 32, 32, 32, 119, // esh();. w
|
||||
97, 116, 99, 104, 87, 101, 98, 115, 111, 99, 107, 101, // atchWebsocke
|
||||
116, 40, 41, 59, 10, 32, 32, 125, 44, 32, 91, 93, // t();. }, []
|
||||
41, 59, 10, 10, 10, 32, 32, 99, 111, 110, 115, 116, // );... const
|
||||
32, 115, 101, 110, 100, 109, 101, 115, 115, 97, 103, 101, // sendmessage
|
||||
32, 61, 32, 101, 118, 32, 61, 62, 32, 123, 10, 32, // = ev => {.
|
||||
32, 32, 32, 115, 101, 116, 77, 101, 115, 115, 97, 103, // setMessag
|
||||
101, 115, 40, 120, 32, 61, 62, 32, 120, 46, 99, 111, // es(x => x.co
|
||||
110, 99, 97, 116, 40, 91, 123, 100, 97, 116, 97, 58, // ncat([{data:
|
||||
32, 116, 120, 116, 32, 43, 32, 39, 92, 110, 39, 44, // txt + '.n',
|
||||
32, 117, 97, 114, 116, 58, 32, 102, 97, 108, 115, 101, // uart: false
|
||||
125, 93, 41, 41, 59, 10, 32, 32, 32, 32, 105, 102, // }]));. if
|
||||
32, 40, 119, 115, 41, 32, 119, 115, 46, 115, 101, 110, // (ws) ws.sen
|
||||
100, 40, 116, 120, 116, 32, 43, 32, 39, 92, 110, 39, // d(txt + '.n'
|
||||
41, 59, 10, 32, 32, 32, 32, 115, 101, 116, 84, 120, // );. setTx
|
||||
116, 40, 39, 39, 41, 59, 10, 32, 32, 125, 59, 10, // t('');. };.
|
||||
10, 32, 32, 114, 101, 116, 117, 114, 110, 32, 104, 116, // . return ht
|
||||
109, 108, 96, 10, 60, 100, 105, 118, 32, 99, 108, 97, // ml`.<div cla
|
||||
115, 115, 61, 34, 99, 111, 110, 116, 97, 105, 110, 101, // ss="containe
|
||||
114, 34, 62, 10, 32, 32, 60, 104, 49, 62, 85, 65, // r">. <h1>UA
|
||||
82, 84, 32, 92, 117, 50, 55, 70, 55, 32, 110, 101, // RT .u27F7 ne
|
||||
116, 119, 111, 114, 107, 32, 98, 114, 105, 100, 103, 101, // twork bridge
|
||||
32, 60, 47, 104, 49, 62, 10, 32, 32, 60, 104, 51, // </h1>. <h3
|
||||
62, 85, 65, 82, 84, 32, 115, 101, 116, 116, 105, 110, // >UART settin
|
||||
103, 115, 60, 47, 104, 51, 62, 10, 32, 32, 60, 112, // gs</h3>. <p
|
||||
114, 101, 32, 99, 108, 97, 115, 115, 61, 34, 100, 45, // re class="d-
|
||||
110, 111, 110, 101, 34, 62, 36, 123, 74, 83, 79, 78, // none">${JSON
|
||||
46, 115, 116, 114, 105, 110, 103, 105, 102, 121, 40, 99, // .stringify(c
|
||||
102, 103, 44, 32, 110, 117, 108, 108, 44, 32, 50, 41, // fg, null, 2)
|
||||
125, 60, 47, 112, 114, 101, 62, 10, 32, 32, 60, 112, // }</pre>. <p
|
||||
62, 82, 88, 32, 112, 105, 110, 32, 36, 123, 99, 102, // >RX pin ${cf
|
||||
103, 46, 114, 120, 125, 44, 32, 84, 88, 32, 112, 105, // g.rx}, TX pi
|
||||
110, 32, 36, 123, 99, 102, 103, 46, 116, 120, 125, 44, // n ${cfg.tx},
|
||||
32, 98, 97, 117, 100, 32, 36, 123, 99, 102, 103, 46, // baud ${cfg.
|
||||
98, 97, 117, 100, 125, 60, 47, 112, 62, 10, 32, 32, // baud}</p>.
|
||||
60, 104, 51, 62, 84, 67, 80, 32, 108, 105, 115, 116, // <h3>TCP list
|
||||
101, 110, 101, 114, 58, 32, 112, 111, 114, 116, 32, 36, // ener: port $
|
||||
123, 116, 99, 112, 95, 112, 111, 114, 116, 125, 60, 47, // {tcp_port}</
|
||||
104, 51, 62, 10, 32, 32, 60, 112, 62, 85, 115, 101, // h3>. <p>Use
|
||||
32, 110, 101, 116, 99, 97, 116, 32, 116, 111, 32, 99, // netcat to c
|
||||
111, 110, 110, 101, 99, 116, 58, 60, 47, 112, 62, 10, // onnect:</p>.
|
||||
32, 32, 60, 100, 105, 118, 32, 99, 108, 97, 115, 115, // <div class
|
||||
61, 34, 109, 115, 103, 34, 62, 32, 36, 32, 110, 99, // ="msg"> $ nc
|
||||
32, 36, 123, 108, 111, 99, 97, 116, 105, 111, 110, 46, // ${location.
|
||||
104, 111, 115, 116, 110, 97, 109, 101, 125, 32, 36, 123, // hostname} ${
|
||||
116, 99, 112, 95, 112, 111, 114, 116, 125, 32, 60, 47, // tcp_port} </
|
||||
100, 105, 118, 62, 10, 32, 32, 60, 104, 51, 62, 87, // div>. <h3>W
|
||||
101, 98, 115, 111, 99, 107, 101, 116, 32, 108, 105, 115, // ebsocket lis
|
||||
116, 101, 110, 101, 114, 58, 32, 112, 111, 114, 116, 32, // tener: port
|
||||
36, 123, 119, 115, 95, 112, 111, 114, 116, 125, 60, 47, // ${ws_port}</
|
||||
104, 51, 62, 10, 32, 32, 60, 100, 105, 118, 62, 85, // h3>. <div>U
|
||||
65, 82, 84, 32, 99, 111, 110, 115, 111, 108, 101, 46, // ART console.
|
||||
32, 83, 116, 97, 116, 117, 115, 58, 32, 36, 123, 99, // Status: ${c
|
||||
111, 110, 110, 101, 99, 116, 101, 100, 32, 63, 32, 39, // onnected ? '
|
||||
99, 111, 110, 110, 101, 99, 116, 101, 100, 39, 32, 58, // connected' :
|
||||
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
|
||||
62, 32, 123, 10, 32, 32, 32, 32, 115, 101, 116, 77, // > {. setM
|
||||
101, 115, 115, 97, 103, 101, 115, 40, 120, 32, 61, 62, // essages(x =>
|
||||
32, 120, 46, 99, 111, 110, 99, 97, 116, 40, 91, 123, // x.concat([{
|
||||
100, 97, 116, 97, 58, 32, 116, 120, 116, 32, 43, 32, // data: txt +
|
||||
39, 92, 110, 39, 44, 32, 117, 97, 114, 116, 58, 32, // '.n', uart:
|
||||
102, 97, 108, 115, 101, 125, 93, 41, 41, 59, 10, 32, // false}]));.
|
||||
32, 32, 32, 105, 102, 32, 40, 119, 115, 41, 32, 119, // if (ws) w
|
||||
115, 46, 115, 101, 110, 100, 40, 116, 120, 116, 32, 43, // s.send(txt +
|
||||
32, 39, 92, 110, 39, 41, 59, 10, 32, 32, 32, 32, // '.n');.
|
||||
115, 101, 116, 84, 120, 116, 40, 39, 39, 41, 59, 10, // setTxt('');.
|
||||
32, 32, 125, 59, 10, 10, 32, 32, 99, 111, 110, 115, // };.. cons
|
||||
116, 32, 111, 110, 99, 104, 97, 110, 103, 101, 32, 61, // t onchange =
|
||||
32, 101, 118, 32, 61, 62, 32, 102, 97, 108, 115, 101, // ev => false
|
||||
59, 10, 10, 32, 32, 114, 101, 116, 117, 114, 110, 32, // ;.. return
|
||||
104, 116, 109, 108, 96, 10, 60, 100, 105, 118, 32, 99, // html`.<div c
|
||||
108, 97, 115, 115, 61, 34, 99, 111, 110, 116, 97, 105, // lass="contai
|
||||
110, 101, 114, 34, 62, 10, 32, 32, 60, 104, 49, 32, // ner">. <h1
|
||||
115, 116, 121, 108, 101, 61, 34, 109, 97, 114, 103, 105, // style="margi
|
||||
110, 45, 98, 111, 116, 116, 111, 109, 58, 32, 48, 59, // n-bottom: 0;
|
||||
34, 62, 85, 65, 82, 84, 32, 92, 117, 50, 55, 70, // ">UART .u27F
|
||||
55, 32, 110, 101, 116, 119, 111, 114, 107, 32, 98, 114, // 7 network br
|
||||
105, 100, 103, 101, 32, 60, 47, 104, 49, 62, 10, 32, // idge </h1>.
|
||||
32, 60, 112, 114, 101, 32, 99, 108, 97, 115, 115, 61, // <pre class=
|
||||
34, 100, 45, 110, 111, 110, 101, 34, 62, 36, 123, 74, // "d-none">${J
|
||||
83, 79, 78, 46, 115, 116, 114, 105, 110, 103, 105, 102, // SON.stringif
|
||||
121, 40, 99, 102, 103, 44, 32, 110, 117, 108, 108, 44, // y(cfg, null,
|
||||
32, 50, 41, 125, 60, 47, 112, 114, 101, 62, 10, 32, // 2)}</pre>.
|
||||
32, 60, 100, 105, 118, 32, 99, 108, 97, 115, 115, 61, // <div class=
|
||||
34, 114, 111, 119, 34, 62, 10, 32, 32, 32, 32, 60, // "row">. <
|
||||
100, 105, 118, 32, 99, 108, 97, 115, 115, 61, 34, 99, // div class="c
|
||||
111, 108, 32, 99, 111, 108, 45, 52, 34, 62, 10, 32, // ol col-4">.
|
||||
32, 32, 32, 32, 32, 60, 104, 51, 62, 85, 65, 82, // <h3>UAR
|
||||
84, 32, 99, 111, 110, 102, 105, 103, 117, 114, 97, 116, // T configurat
|
||||
105, 111, 110, 60, 47, 104, 51, 62, 10, 32, 32, 32, // ion</h3>.
|
||||
32, 32, 32, 60, 100, 105, 118, 32, 99, 108, 97, 115, // <div clas
|
||||
115, 61, 34, 100, 45, 102, 108, 101, 120, 32, 112, 114, // s="d-flex pr
|
||||
45, 49, 32, 109, 121, 45, 49, 34, 62, 10, 32, 32, // -1 my-1">.
|
||||
32, 32, 32, 32, 32, 32, 60, 108, 97, 98, 101, 108, // <label
|
||||
32, 99, 108, 97, 115, 115, 61, 34, 97, 100, 100, 111, // class="addo
|
||||
110, 34, 62, 85, 65, 82, 84, 32, 84, 88, 32, 112, // n">UART TX p
|
||||
105, 110, 60, 47, 108, 97, 98, 101, 108, 62, 10, 32, // in</label>.
|
||||
32, 32, 32, 32, 32, 32, 32, 60, 105, 110, 112, 117, // <inpu
|
||||
116, 32, 115, 116, 121, 108, 101, 61, 34, 119, 105, 100, // t style="wid
|
||||
116, 104, 58, 32, 53, 101, 109, 59, 34, 32, 118, 97, // th: 5em;" va
|
||||
108, 117, 101, 61, 36, 123, 116, 120, 125, 32, 111, 110, // lue=${tx} 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
|
||||
84, 120, 40, 101, 118, 46, 116, 97, 114, 103, 101, 116, // Tx(ev.target
|
||||
46, 118, 97, 108, 117, 101, 41, 125, 32, 47, 62, 10, // .value)} />.
|
||||
32, 32, 32, 32, 32, 32, 60, 47, 100, 105, 118, 62, // </div>
|
||||
60, 100, 105, 118, 32, 99, 108, 97, 115, 115, 61, 34, // <div class="
|
||||
100, 45, 102, 108, 101, 120, 32, 112, 114, 45, 49, 32, // d-flex pr-1
|
||||
109, 121, 45, 49, 34, 62, 10, 32, 32, 32, 32, 32, // my-1">.
|
||||
32, 32, 32, 60, 108, 97, 98, 101, 108, 32, 99, 108, // <label cl
|
||||
97, 115, 115, 61, 34, 97, 100, 100, 111, 110, 34, 62, // ass="addon">
|
||||
85, 65, 82, 84, 32, 82, 88, 32, 112, 105, 110, 60, // UART RX pin<
|
||||
47, 108, 97, 98, 101, 108, 62, 10, 32, 32, 32, 32, // /label>.
|
||||
32, 32, 32, 32, 60, 105, 110, 112, 117, 116, 32, 115, // <input s
|
||||
116, 121, 108, 101, 61, 34, 119, 105, 100, 116, 104, 58, // tyle="width:
|
||||
32, 53, 101, 109, 59, 34, 32, 118, 97, 108, 117, 101, // 5em;" value
|
||||
61, 36, 123, 114, 120, 125, 32, 111, 110, 99, 104, 97, // =${rx} oncha
|
||||
110, 103, 101, 61, 36, 123, 111, 110, 99, 104, 97, 110, // nge=${onchan
|
||||
103, 101, 125, 10, 32, 32, 32, 32, 32, 32, 32, 32, // ge}.
|
||||
32, 32, 111, 110, 105, 110, 112, 117, 116, 61, 36, 123, // oninput=${
|
||||
101, 118, 32, 61, 62, 32, 115, 101, 116, 82, 120, 40, // ev => setRx(
|
||||
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, 60, 47, 100, 105, 118, 62, 60, 100, 105, // </div><di
|
||||
118, 32, 99, 108, 97, 115, 115, 61, 34, 100, 45, 102, // v class="d-f
|
||||
108, 101, 120, 32, 112, 114, 45, 49, 32, 109, 121, 45, // lex pr-1 my-
|
||||
121, 34, 62, 10, 32, 32, 32, 32, 32, 32, 32, 32, // y">.
|
||||
60, 108, 97, 98, 101, 108, 32, 99, 108, 97, 115, 115, // <label class
|
||||
61, 34, 97, 100, 100, 111, 110, 34, 62, 85, 65, 82, // ="addon">UAR
|
||||
84, 32, 66, 97, 117, 100, 60, 47, 108, 97, 98, 101, // T Baud</labe
|
||||
108, 62, 10, 32, 32, 32, 32, 32, 32, 32, 32, 60, // l>. <
|
||||
105, 110, 112, 117, 116, 32, 115, 116, 121, 108, 101, 61, // input style=
|
||||
34, 119, 105, 100, 116, 104, 58, 32, 53, 101, 109, 59, // "width: 5em;
|
||||
34, 32, 118, 97, 108, 117, 101, 61, 36, 123, 98, 97, // " value=${ba
|
||||
117, 100, 125, 32, 111, 110, 99, 104, 97, 110, 103, 101, // ud} onchange
|
||||
61, 36, 123, 111, 110, 99, 104, 97, 110, 103, 101, 125, // =${onchange}
|
||||
10, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 111, // . o
|
||||
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
|
||||
46, 116, 97, 114, 103, 101, 116, 46, 118, 97, 108, 117, // .target.valu
|
||||
101, 41, 125, 32, 47, 62, 10, 32, 32, 60, 47, 100, // e)} />. </d
|
||||
105, 118, 62, 10, 60, 47, 100, 105, 118, 62, 96, 59, // iv>.</div>`;
|
||||
10, 125, 59, 10, 10, 119, 105, 110, 100, 111, 119, 46, // .};..window.
|
||||
111, 110, 108, 111, 97, 100, 32, 61, 32, 40, 41, 32, // onload = ()
|
||||
61, 62, 32, 114, 101, 110, 100, 101, 114, 40, 104, 40, // => render(h(
|
||||
65, 112, 112, 41, 44, 32, 100, 111, 99, 117, 109, 101, // App), docume
|
||||
110, 116, 46, 98, 111, 100, 121, 41, 59, 10, 0 // nt.body);.
|
||||
61, 62, 32, 115, 101, 116, 66, 97, 117, 100, 40, 101, // => setBaud(e
|
||||
118, 46, 116, 97, 114, 103, 101, 116, 46, 118, 97, 108, // v.target.val
|
||||
117, 101, 41, 125, 32, 47, 62, 10, 32, 32, 32, 32, // ue)} />.
|
||||
32, 32, 60, 47, 100, 105, 118, 62, 10, 32, 32, 32, // </div>.
|
||||
32, 60, 47, 100, 105, 118, 62, 10, 32, 32, 32, 32, // </div>.
|
||||
60, 100, 105, 118, 32, 99, 108, 97, 115, 115, 61, 34, // <div class="
|
||||
99, 111, 108, 32, 99, 111, 108, 45, 56, 34, 62, 10, // col col-8">.
|
||||
32, 32, 32, 32, 32, 32, 60, 104, 51, 62, 78, 101, // <h3>Ne
|
||||
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[] = {
|
||||
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
|
||||
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, 97, 44, 32, 105, 110, 112, 117, 116, 44, 32, 46, // ea, input, .
|
||||
97, 100, 100, 111, 110, 32, 123, 32, 102, 111, 110, 116, // addon { font
|
||||
45, 115, 105, 122, 101, 58, 32, 49, 53, 112, 120, 59, // -size: 15px;
|
||||
101, 97, 44, 32, 105, 110, 112, 117, 116, 32, 123, 32, // ea, input {
|
||||
98, 111, 114, 100, 101, 114, 58, 32, 49, 112, 120, 32, // border: 1px
|
||||
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, 115, 111, 108, 105, 100, 32, 35, 99, 99, 99, 59, // solid #ccc;
|
||||
32, 112, 97, 100, 100, 105, 110, 103, 58, 32, 48, 46, // padding: 0.
|
||||
53, 101, 109, 59, 32, 125, 10, 97, 44, 32, 97, 58, // 5em; }.a, a:
|
||||
118, 105, 115, 105, 116, 101, 100, 44, 32, 97, 58, 97, // visited, a:a
|
||||
99, 116, 105, 118, 101, 32, 123, 32, 99, 111, 108, 111, // ctive { colo
|
||||
114, 58, 32, 35, 53, 53, 102, 59, 32, 125, 10, 98, // r: #55f; }.b
|
||||
111, 100, 121, 32, 123, 98, 97, 99, 107, 103, 114, 111, // ody {backgro
|
||||
117, 110, 100, 58, 32, 35, 52, 53, 53, 59, 32, 125, // und: #455; }
|
||||
10, 46, 97, 100, 100, 111, 110, 32, 123, 32, 98, 97, // ..addon { ba
|
||||
99, 107, 103, 114, 111, 117, 110, 100, 58, 32, 35, 101, // ckground: #e
|
||||
101, 101, 59, 32, 32, 109, 105, 110, 45, 119, 105, 100, // ee; min-wid
|
||||
116, 104, 58, 32, 57, 101, 109, 59, 125, 10, 46, 98, // th: 9em;}..b
|
||||
116, 110, 32, 123, 10, 32, 32, 98, 97, 99, 107, 103, // tn {. backg
|
||||
114, 111, 117, 110, 100, 58, 32, 35, 99, 99, 99, 59, // round: #ccc;
|
||||
32, 98, 111, 114, 100, 101, 114, 45, 114, 97, 100, 105, // border-radi
|
||||
117, 115, 58, 32, 48, 46, 51, 101, 109, 59, 32, 98, // us: 0.3em; b
|
||||
111, 114, 100, 101, 114, 58, 32, 48, 59, 32, 99, 111, // order: 0; co
|
||||
108, 111, 114, 58, 32, 35, 102, 102, 102, 59, 32, 99, // lor: #fff; c
|
||||
117, 114, 115, 111, 114, 58, 32, 112, 111, 105, 110, 116, // ursor: point
|
||||
101, 114, 59, 10, 32, 32, 100, 105, 115, 112, 108, 97, // er;. displa
|
||||
121, 58, 32, 105, 110, 108, 105, 110, 101, 45, 98, 108, // y: inline-bl
|
||||
111, 99, 107, 59, 32, 112, 97, 100, 100, 105, 110, 103, // ock; padding
|
||||
58, 32, 48, 46, 54, 101, 109, 32, 50, 101, 109, 59, // : 0.6em 2em;
|
||||
32, 102, 111, 110, 116, 45, 119, 101, 105, 103, 104, 116, // font-weight
|
||||
58, 32, 98, 111, 108, 100, 101, 114, 59, 10, 125, 10, // : bolder;.}.
|
||||
46, 98, 116, 110, 91, 100, 105, 115, 97, 98, 108, 101, // .btn[disable
|
||||
100, 93, 32, 123, 32, 111, 112, 97, 99, 105, 116, 121, // d] { opacity
|
||||
58, 32, 48, 46, 53, 59, 32, 99, 117, 114, 115, 111, // : 0.5; curso
|
||||
114, 58, 32, 97, 117, 116, 111, 59, 125, 10, 46, 115, // r: auto;}..s
|
||||
109, 111, 111, 116, 104, 32, 123, 32, 116, 114, 97, 110, // mooth { tran
|
||||
115, 105, 116, 105, 111, 110, 58, 32, 97, 108, 108, 32, // sition: all
|
||||
46, 50, 115, 59, 32, 125, 10, 46, 99, 111, 110, 116, // .2s; }..cont
|
||||
97, 105, 110, 101, 114, 32, 123, 32, 109, 97, 114, 103, // ainer { marg
|
||||
105, 110, 58, 32, 50, 101, 109, 32, 97, 117, 116, 111, // in: 2em auto
|
||||
59, 32, 109, 97, 120, 45, 119, 105, 100, 116, 104, 58, // ; max-width:
|
||||
32, 54, 56, 48, 112, 120, 59, 32, 98, 97, 99, 107, // 680px; back
|
||||
103, 114, 111, 117, 110, 100, 58, 32, 119, 104, 105, 116, // ground: whit
|
||||
101, 59, 32, 112, 97, 100, 100, 105, 110, 103, 58, 32, // e; padding:
|
||||
49, 101, 109, 59, 32, 98, 111, 114, 100, 101, 114, 45, // 1em; border-
|
||||
114, 97, 100, 105, 117, 115, 58, 32, 48, 46, 53, 101, // radius: 0.5e
|
||||
109, 59, 32, 125, 10, 46, 100, 45, 102, 108, 101, 120, // m; }..d-flex
|
||||
32, 123, 32, 100, 105, 115, 112, 108, 97, 121, 58, 32, // { display:
|
||||
102, 108, 101, 120, 59, 32, 125, 10, 46, 100, 45, 110, // flex; }..d-n
|
||||
111, 110, 101, 32, 123, 32, 100, 105, 115, 112, 108, 97, // one { displa
|
||||
121, 58, 32, 110, 111, 110, 101, 59, 32, 125, 10, 46, // y: none; }..
|
||||
98, 111, 114, 100, 101, 114, 32, 123, 32, 98, 111, 114, // border { bor
|
||||
100, 101, 114, 58, 32, 49, 112, 120, 32, 115, 111, 108, // der: 1px sol
|
||||
105, 100, 32, 35, 100, 100, 100, 59, 32, 125, 10, 46, // id #ddd; }..
|
||||
114, 111, 117, 110, 100, 101, 100, 32, 123, 32, 98, 111, // rounded { bo
|
||||
114, 100, 101, 114, 45, 114, 97, 100, 105, 117, 115, 58, // rder-radius:
|
||||
32, 48, 46, 53, 101, 109, 59, 32, 125, 10, 46, 110, // 0.5em; }..n
|
||||
111, 119, 114, 97, 112, 32, 123, 32, 119, 104, 105, 116, // owrap { whit
|
||||
101, 45, 115, 112, 97, 99, 101, 58, 32, 110, 111, 119, // e-space: now
|
||||
114, 97, 112, 59, 32, 125, 10, 46, 109, 115, 103, 32, // rap; }..msg
|
||||
123, 32, 98, 97, 99, 107, 103, 114, 111, 117, 110, 100, // { background
|
||||
58, 32, 35, 100, 101, 102, 59, 32, 98, 111, 114, 100, // : #def; bord
|
||||
101, 114, 45, 108, 101, 102, 116, 58, 32, 53, 112, 120, // er-left: 5px
|
||||
32, 115, 111, 108, 105, 100, 32, 35, 53, 57, 100, 59, // solid #59d;
|
||||
32, 112, 97, 100, 100, 105, 110, 103, 58, 32, 48, 46, // padding: 0.
|
||||
53, 101, 109, 59, 32, 102, 111, 110, 116, 45, 115, 105, // 5em; font-si
|
||||
122, 101, 58, 32, 57, 48, 37, 59, 32, 109, 97, 114, // ze: 90%; mar
|
||||
103, 105, 110, 58, 32, 49, 101, 109, 32, 48, 59, 32, // gin: 1em 0;
|
||||
125, 10, 46, 105, 110, 112, 117, 116, 32, 123, 32, 98, // }..input { b
|
||||
97, 99, 107, 103, 114, 111, 117, 110, 100, 58, 32, 35, // ackground: #
|
||||
102, 101, 97, 59, 32, 112, 97, 100, 100, 105, 110, 103, // fea; padding
|
||||
58, 32, 48, 46, 50, 101, 109, 32, 49, 101, 109, 59, // : 0.2em 1em;
|
||||
32, 98, 111, 114, 100, 101, 114, 45, 114, 97, 100, 105, // border-radi
|
||||
117, 115, 58, 32, 48, 46, 52, 101, 109, 59, 32, 125, // us: 0.4em; }
|
||||
10, 46, 111, 117, 116, 112, 117, 116, 32, 123, 32, 98, // ..output { b
|
||||
97, 99, 107, 103, 114, 111, 117, 110, 100, 58, 32, 35, // ackground: #
|
||||
97, 101, 102, 59, 32, 112, 97, 100, 100, 105, 110, 103, // aef; padding
|
||||
58, 32, 48, 46, 50, 101, 109, 32, 49, 101, 109, 59, // : 0.2em 1em;
|
||||
32, 98, 111, 114, 100, 101, 114, 45, 114, 97, 100, 105, // border-radi
|
||||
117, 115, 58, 32, 48, 46, 52, 101, 109, 59, 32, 125, // us: 0.4em; }
|
||||
10, 0 // .
|
||||
32, 115, 111, 108, 105, 100, 32, 35, 100, 100, 100, 59, // solid #ddd;
|
||||
32, 125, 10, 46, 114, 111, 117, 110, 100, 101, 100, 32, // }..rounded
|
||||
123, 32, 98, 111, 114, 100, 101, 114, 45, 114, 97, 100, // { border-rad
|
||||
105, 117, 115, 58, 32, 48, 46, 53, 101, 109, 59, 32, // ius: 0.5em;
|
||||
125, 10, 46, 110, 111, 119, 114, 97, 112, 32, 123, 32, // }..nowrap {
|
||||
119, 104, 105, 116, 101, 45, 115, 112, 97, 99, 101, 58, // white-space:
|
||||
32, 110, 111, 119, 114, 97, 112, 59, 32, 125, 10, 46, // nowrap; }..
|
||||
109, 115, 103, 32, 123, 32, 98, 97, 99, 107, 103, 114, // msg { backgr
|
||||
111, 117, 110, 100, 58, 32, 35, 100, 101, 102, 59, 32, // ound: #def;
|
||||
98, 111, 114, 100, 101, 114, 45, 108, 101, 102, 116, 58, // border-left:
|
||||
32, 53, 112, 120, 32, 115, 111, 108, 105, 100, 32, 35, // 5px solid #
|
||||
53, 57, 100, 59, 32, 112, 97, 100, 100, 105, 110, 103, // 59d; padding
|
||||
58, 32, 48, 46, 53, 101, 109, 59, 32, 102, 111, 110, // : 0.5em; fon
|
||||
116, 45, 115, 105, 122, 101, 58, 32, 57, 48, 37, 59, // t-size: 90%;
|
||||
32, 109, 97, 114, 103, 105, 110, 58, 32, 49, 101, 109, // margin: 1em
|
||||
32, 48, 59, 32, 99, 111, 108, 111, 114, 58, 32, 35, // 0; color: #
|
||||
55, 55, 55, 59, 32, 125, 10, 46, 105, 110, 112, 117, // 777; }..inpu
|
||||
116, 32, 123, 32, 98, 97, 99, 107, 103, 114, 111, 117, // t { backgrou
|
||||
110, 100, 58, 32, 35, 102, 101, 97, 59, 32, 112, 97, // nd: #fea; pa
|
||||
100, 100, 105, 110, 103, 58, 32, 48, 46, 50, 101, 109, // dding: 0.2em
|
||||
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, 52, // -radius: 0.4
|
||||
101, 109, 59, 32, 125, 10, 46, 111, 117, 116, 112, 117, // em; }..outpu
|
||||
116, 32, 123, 32, 98, 97, 99, 107, 103, 114, 111, 117, // t { backgrou
|
||||
110, 100, 58, 32, 35, 97, 101, 102, 59, 32, 112, 97, // nd: #aef; pa
|
||||
100, 100, 105, 110, 103, 58, 32, 48, 46, 50, 101, 109, // dding: 0.2em
|
||||
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, 52, // -radius: 0.4
|
||||
101, 109, 59, 32, 125, 10, 46, 112, 114, 45, 49, 32, // em; }..pr-1
|
||||
123, 32, 112, 97, 100, 100, 105, 110, 103, 45, 114, 105, // { padding-ri
|
||||
103, 104, 116, 58, 32, 48, 46, 53, 101, 109, 59, 32, // ght: 0.5em;
|
||||
125, 10, 46, 109, 121, 45, 49, 32, 123, 32, 109, 97, // }..my-1 { ma
|
||||
114, 103, 105, 110, 45, 116, 111, 112, 58, 32, 48, 46, // rgin-top: 0.
|
||||
51, 101, 109, 59, 32, 109, 97, 114, 103, 105, 110, 45, // 3em; margin-
|
||||
98, 111, 116, 116, 111, 109, 58, 32, 48, 46, 51, 101, // bottom: 0.3e
|
||||
109, 59, 125, 10, 46, 109, 108, 45, 49, 32, 123, 32, // m;}..ml-1 {
|
||||
109, 97, 114, 103, 105, 110, 45, 108, 101, 102, 116, 58, // margin-left:
|
||||
32, 48, 46, 53, 101, 109, 59, 32, 125, 10, 10, 47, // 0.5em; }../
|
||||
42, 32, 71, 114, 105, 100, 32, 42, 47, 10, 46, 114, // * Grid */..r
|
||||
111, 119, 32, 123, 32, 100, 105, 115, 112, 108, 97, 121, // ow { display
|
||||
58, 32, 102, 108, 101, 120, 59, 32, 102, 108, 101, 120, // : flex; flex
|
||||
45, 119, 114, 97, 112, 58, 32, 119, 114, 97, 112, 59, // -wrap: wrap;
|
||||
32, 125, 10, 46, 99, 111, 108, 32, 123, 32, 109, 97, // }..col { ma
|
||||
114, 103, 105, 110, 58, 32, 48, 59, 32, 112, 97, 100, // rgin: 0; pad
|
||||
100, 105, 110, 103, 58, 32, 48, 59, 32, 111, 118, 101, // ding: 0; ove
|
||||
114, 102, 108, 111, 119, 58, 32, 97, 117, 116, 111, 59, // rflow: auto;
|
||||
32, 125, 10, 46, 99, 111, 108, 45, 49, 50, 32, 123, // }..col-12 {
|
||||
32, 119, 105, 100, 116, 104, 58, 32, 49, 48, 48, 37, // width: 100%
|
||||
59, 32, 125, 10, 46, 99, 111, 108, 45, 49, 49, 32, // ; }..col-11
|
||||
123, 32, 119, 105, 100, 116, 104, 58, 32, 57, 49, 46, // { width: 91.
|
||||
54, 54, 37, 59, 32, 125, 10, 46, 99, 111, 108, 45, // 66%; }..col-
|
||||
49, 48, 32, 123, 32, 119, 105, 100, 116, 104, 58, 32, // 10 { width:
|
||||
56, 51, 46, 51, 51, 37, 59, 32, 125, 10, 46, 99, // 83.33%; }..c
|
||||
111, 108, 45, 57, 32, 123, 32, 119, 105, 100, 116, 104, // ol-9 { width
|
||||
58, 32, 55, 53, 37, 59, 32, 125, 10, 46, 99, 111, // : 75%; }..co
|
||||
108, 45, 56, 32, 123, 32, 119, 105, 100, 116, 104, 58, // l-8 { width:
|
||||
32, 54, 54, 46, 54, 54, 37, 59, 32, 125, 10, 46, // 66.66%; }..
|
||||
99, 111, 108, 45, 55, 32, 123, 32, 119, 105, 100, 116, // col-7 { widt
|
||||
104, 58, 32, 53, 56, 46, 51, 51, 37, 59, 32, 125, // h: 58.33%; }
|
||||
10, 46, 99, 111, 108, 45, 54, 32, 123, 32, 119, 105, // ..col-6 { wi
|
||||
100, 116, 104, 58, 32, 53, 48, 37, 59, 32, 125, 10, // dth: 50%; }.
|
||||
46, 99, 111, 108, 45, 53, 32, 123, 32, 119, 105, 100, // .col-5 { wid
|
||||
116, 104, 58, 32, 52, 49, 46, 54, 54, 37, 59, 32, // th: 41.66%;
|
||||
125, 10, 46, 99, 111, 108, 45, 52, 32, 123, 32, 119, // }..col-4 { w
|
||||
105, 100, 116, 104, 58, 32, 51, 51, 46, 51, 51, 37, // idth: 33.33%
|
||||
59, 32, 125, 10, 46, 99, 111, 108, 45, 51, 32, 123, // ; }..col-3 {
|
||||
32, 119, 105, 100, 116, 104, 58, 32, 50, 53, 37, 59, // width: 25%;
|
||||
32, 125, 10, 46, 99, 111, 108, 45, 50, 32, 123, 32, // }..col-2 {
|
||||
119, 105, 100, 116, 104, 58, 32, 49, 54, 46, 54, 54, // width: 16.66
|
||||
37, 59, 32, 125, 10, 46, 99, 111, 108, 45, 49, 32, // %; }..col-1
|
||||
123, 32, 119, 105, 100, 116, 104, 58, 32, 56, 46, 51, // { width: 8.3
|
||||
51, 37, 59, 32, 125, 10, 64, 109, 101, 100, 105, 97, // 3%; }.@media
|
||||
32, 40, 109, 105, 110, 45, 119, 105, 100, 116, 104, 58, // (min-width:
|
||||
32, 49, 51, 49, 48, 112, 120, 41, 32, 123, 32, 46, // 1310px) { .
|
||||
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 {
|
||||
@ -1470,9 +1763,9 @@ static const struct packed_file {
|
||||
time_t mtime;
|
||||
} packed_files[] = {
|
||||
{"/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/style.css", v4, sizeof(v4), 1654653116},
|
||||
{"/web_root/style.css", v4, sizeof(v4), 1655197477},
|
||||
{NULL, NULL, 0, 0}
|
||||
};
|
||||
|
||||
|
||||
@ -7,24 +7,36 @@ const Message = m => html`<span
|
||||
</span>`;
|
||||
|
||||
const App = function(props) {
|
||||
const [cfg, setCfg] = useState({tcp: '', ws: ''});
|
||||
const [cfg, setCfg] = useState({tcp: {}, ws: {}, mqtt: {}});
|
||||
const [messages, setMessages] = useState([]);
|
||||
const [txt, setTxt] = useState('');
|
||||
const [connected, setConnected] = useState(false);
|
||||
const [txt, setTxt] = useState('');
|
||||
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 ws_port = cfg.ws.split(':')[2] || 4002;
|
||||
// const tcp_port = cfg.tcp.split(':')[2] || 4001;
|
||||
// const ws_port = cfg.ws.split(':')[2] || 4002;
|
||||
|
||||
const refresh = () =>
|
||||
fetch('/api/config/get').then(r => r.json()).then(r => setCfg(r));
|
||||
const refresh = () => fetch('/api/config/get').then(r => r.json()).then(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() {
|
||||
// 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 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);
|
||||
ws.onopen = () => {
|
||||
setConnected(true);
|
||||
@ -56,25 +68,81 @@ const App = function(props) {
|
||||
setTxt('');
|
||||
};
|
||||
|
||||
const onchange = ev => false;
|
||||
|
||||
return html`
|
||||
<div class="container">
|
||||
<h1>UART \u27F7 network bridge </h1>
|
||||
<h3>UART settings</h3>
|
||||
<h1 style="margin-bottom: 0;">UART \u27F7 network bridge </h1>
|
||||
<pre class="d-none">${JSON.stringify(cfg, null, 2)}</pre>
|
||||
<p>RX pin ${cfg.rx}, TX pin ${cfg.tx}, baud ${cfg.baud}</p>
|
||||
<h3>TCP listener: port ${tcp_port}</h3>
|
||||
<p>Use netcat to connect:</p>
|
||||
<div class="msg"> $ nc ${location.hostname} ${tcp_port} </div>
|
||||
<h3>Websocket listener: port ${ws_port}</h3>
|
||||
<div>UART console. Status: ${connected ? 'connected' : 'disconnected'}</div>
|
||||
<div class="row">
|
||||
<div class="col col-4">
|
||||
<h3>UART configuration</h3>
|
||||
<div class="d-flex pr-1 my-1">
|
||||
<label class="addon">UART TX pin</label>
|
||||
<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;">
|
||||
${messages.map(message => h(Message, {message}))}
|
||||
</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>`;
|
||||
};
|
||||
|
||||
|
||||
@ -2,22 +2,45 @@
|
||||
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; }
|
||||
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; }
|
||||
body {background: #455; }
|
||||
.addon { background: #eee; min-width: 9em;}
|
||||
.addon { color: #999; min-width: 7.5em; }
|
||||
.label { color: #999; }
|
||||
.btn {
|
||||
background: #ccc; border-radius: 0.3em; border: 0; color: #fff; cursor: pointer;
|
||||
display: inline-block; padding: 0.6em 2em; font-weight: bolder;
|
||||
}
|
||||
.btn[disabled] { opacity: 0.5; cursor: auto;}
|
||||
.smooth { transition: all .2s; }
|
||||
.container { margin: 2em auto; max-width: 680px; background: white; padding: 1em; border-radius: 0.5em; }
|
||||
.d-flex { display: flex; }
|
||||
.container { margin: 2em auto; max-width: 620px; background: white; padding: 1em; border-radius: 0.5em; }
|
||||
.d-flex { display: flex; align-items: center; }
|
||||
.d-none { display: none; }
|
||||
.border { border: 1px solid #ddd; }
|
||||
.rounded { border-radius: 0.5em; }
|
||||
.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; }
|
||||
.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%; } }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user