|
1 | 1 | <!DOCTYPE html>
|
2 |
| -<html> |
| 2 | +<html lang="en"> |
3 | 3 | <head>
|
4 | 4 | <title>Arduino Create Agent Debug Console</title>
|
5 | 5 | <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap" rel="stylesheet">
|
|
17 | 17 | var MESSAGES_MAX_COUNT = 2000;
|
18 | 18 |
|
19 | 19 | function appendLog(msg) {
|
20 |
| - var startsWithBracked = msg.indexOf('{') == 0; |
| 20 | + let jsonMsg = {}; |
| 21 | + let portListing = false; |
| 22 | + try { |
| 23 | + jsonMsg = JSON.parse(msg); |
| 24 | + portsListing = jsonMsg.Ports; |
| 25 | + } catch { |
| 26 | + } |
| 27 | + |
21 | 28 | var startsWithList = msg.indexOf('list') == 0;
|
22 | 29 |
|
23 |
| - if (listenabled.checked || (typeof msg === 'string' && !startsWithBracked && !startsWithList)) { |
24 |
| - messages.push(msg); |
25 |
| - if (messages.length > MESSAGES_MAX_COUNT) { |
26 |
| - messages.shift(); |
27 |
| - } |
28 |
| - log.innerHTML = messages.join('<br>'); |
29 |
| - if (autoscroll.checked) { |
30 |
| - log.scrollTop = log.scrollHeight - log.clientHeight; |
31 |
| - } |
32 |
| - } |
| 30 | + if (listenabled.checked || (!portsListing && !startsWithList)) { |
| 31 | + let printMsg = msg; |
| 32 | + if (jsonMsg.Ports) { |
| 33 | + if (jsonMsg.Network) { |
| 34 | + printMsg = `<b>Network Ports</b>:<br>${JSON.stringify(jsonMsg.Ports, ['Name', 'SerialNumber', 'IsOpen', 'VendorID', 'ProductID'], 2)}` |
| 35 | + } else { |
| 36 | + printMsg = `<b>Serial Ports</b>:<br>${JSON.stringify(jsonMsg.Ports, ['Name', 'SerialNumber', 'IsOpen', 'VendorID', 'ProductID'], 2)}` |
| 37 | + } |
| 38 | + } else if (Object.keys(jsonMsg).length !== 0) { |
| 39 | + printMsg = `${JSON.stringify(jsonMsg, undefined, 2)}`; |
| 40 | + } |
| 41 | + messages.push(printMsg); |
| 42 | + if (messages.length > MESSAGES_MAX_COUNT) { |
| 43 | + messages.shift(); |
| 44 | + } |
| 45 | + log.innerHTML = messages.join('<br><br>'); |
| 46 | + if (autoscroll.checked) { |
| 47 | + log.scrollTop = log.scrollHeight - log.clientHeight; |
| 48 | + } |
| 49 | + } |
| 50 | + |
33 | 51 | }
|
34 | 52 |
|
35 | 53 | $('#form').submit(function(e) {
|
|
92 | 110 | #container {
|
93 | 111 | display: flex;
|
94 | 112 | flex-direction: column;
|
95 |
| - height: 100%; |
| 113 | + height: 100vh; |
96 | 114 | width: 100%;
|
97 | 115 | }
|
98 | 116 |
|
99 | 117 | #log {
|
100 | 118 | flex-grow: 1;
|
101 | 119 | font-family: "Roboto Mono", "Courier", "Lucida Grande", Verdana, sans-serif;
|
102 | 120 | background-color: #DAE3E3;
|
| 121 | + height: calc(100vh - 61px); |
103 | 122 | margin: 15px 15px 10px;
|
104 | 123 | padding: 8px 10px;
|
105 | 124 | overflow-y: auto;
|
|
182 | 201 | font-size: 1em;
|
183 | 202 | outline: none;
|
184 | 203 | }
|
185 |
| - |
186 | 204 | </style>
|
187 | 205 | </head>
|
188 | 206 | <body>
|
189 | 207 | <div id="container">
|
190 |
| - <div id="log">This is some random text This is some random textThis is some random textThis is some random textThis is some random textThis is some random textThis is some random text<br />This is some random text<br />This is some random text<br /></div> |
| 208 | + <pre id="log"></pre> |
191 | 209 | <div id="footer">
|
192 | 210 | <form id="form">
|
193 | 211 | <input type="submit" class="button" value="Send" />
|
194 |
| - <input type="text" id="input" class="textfield" /> |
| 212 | + <input type="text" id="input" class="textfield" aria-label="send command" /> |
195 | 213 | </form>
|
196 | 214 | <div id="secondary-controls">
|
197 | 215 | <div>
|
|
0 commit comments