mirror of
https://github.com/cesanta/mongoose.git
synced 2026-11-06 15:51:25 +00:00
Refactor UART example
This commit is contained in:
Sergey Lyubka committed
1 parent
1640287897
commit
c84dab21e4
4 files changed
+747
-304
No files matched your search
@@ -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%; } }
|
||||
Reference in new issue
Block a user