Skip to content

Commit 48b3e2c

Browse files
author
Stefania
authored
Improvements on the Debug Console (#600)
* fix diable list option, improve output formatting, fix issue about toolbar hidden on output growing [EDITOR-559] * improve code a bit * fix debug console template in correct file main.go * fix string interpolation * remove html tag from exported log * fix tab
1 parent aac77f7 commit 48b3e2c

File tree

2 files changed

+73
-33
lines changed

2 files changed

+73
-33
lines changed

‎home.html

+37-16
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
<!-- this file is just for development purpose, real code in main.go -->
12
<!DOCTYPE html>
2-
<html>
3+
<html lang="en">
34
<head>
45
<title>Arduino Create Agent Debug Console</title>
56
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap" rel="stylesheet">
@@ -17,19 +18,38 @@
1718
var MESSAGES_MAX_COUNT = 2000;
1819

1920
function appendLog(msg) {
20-
var startsWithBracked = msg.indexOf('{') == 0;
21+
let jsonMsg = {};
22+
let portListing = false;
23+
try {
24+
jsonMsg = JSON.parse(msg);
25+
portsListing = jsonMsg.Ports;
26+
} catch {
27+
// no valid json
28+
}
29+
2130
var startsWithList = msg.indexOf('list') == 0;
2231

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-
}
32+
if (listenabled.checked || (!portsListing && !startsWithList)) {
33+
let printMsg = msg;
34+
if (jsonMsg.Ports) {
35+
const validKeys = ['Name', 'SerialNumber', 'IsOpen', 'VendorID', 'ProductID'];
36+
if (jsonMsg.Network) {
37+
printMsg = "<b>Network Ports</b>:<br>"+JSON.stringify(jsonMsg.Ports, validKeys, 2);
38+
} else {
39+
printMsg = "<b>Serial Ports</b>:<br>"+JSON.stringify(jsonMsg.Ports, validKeys, 2);
40+
}
41+
} else if (Object.keys(jsonMsg).length !== 0) {
42+
printMsg = JSON.stringify(jsonMsg, undefined, 2);
43+
}
44+
messages.push(printMsg);
45+
if (messages.length > MESSAGES_MAX_COUNT) {
46+
messages.shift();
47+
}
48+
log.innerHTML = messages.join('<br><br>');
49+
if (autoscroll.checked) {
50+
log.scrollTop = log.scrollHeight - log.clientHeight;
51+
}
52+
}
3353
}
3454

3555
$('#form').submit(function(e) {
@@ -47,6 +67,7 @@
4767
var link = document.createElement('a');
4868
link.setAttribute('download', 'agent-log.txt');
4969
var text = log.innerHTML.replace(/<br>/g, '\n');
70+
text = text.replace(/<b>|<\/b>/g, '');
5071
link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
5172
link.click();
5273
});
@@ -92,14 +113,15 @@
92113
#container {
93114
display: flex;
94115
flex-direction: column;
95-
height: 100%;
116+
height: 100vh;
96117
width: 100%;
97118
}
98119

99120
#log {
100121
flex-grow: 1;
101122
font-family: "Roboto Mono", "Courier", "Lucida Grande", Verdana, sans-serif;
102123
background-color: #DAE3E3;
124+
height: calc(100vh - 61px);
103125
margin: 15px 15px 10px;
104126
padding: 8px 10px;
105127
overflow-y: auto;
@@ -182,16 +204,15 @@
182204
font-size: 1em;
183205
outline: none;
184206
}
185-
186207
</style>
187208
</head>
188209
<body>
189210
<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>
211+
<pre id="log"></pre>
191212
<div id="footer">
192213
<form id="form">
193214
<input type="submit" class="button" value="Send" />
194-
<input type="text" id="input" class="textfield" />
215+
<input type="text" id="input" class="textfield" aria-label="send command" />
195216
</form>
196217
<div id="secondary-controls">
197218
<div>

‎main.go

+36-17
Original file line numberDiff line numberDiff line change
@@ -412,7 +412,7 @@ var homeTemplate = template.Must(template.New("home").Parse(homeTemplateHtml))
412412
// If you navigate to this server's homepage, you'll get this HTML
413413
// so you can directly interact with the serial port server
414414
const homeTemplateHtml = `<!DOCTYPE html>
415-
<html>
415+
<html lang="en">
416416
<head>
417417
<title>Arduino Create Agent Debug Console</title>
418418
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap" rel="stylesheet">
@@ -430,19 +430,38 @@ const homeTemplateHtml = `<!DOCTYPE html>
430430
var MESSAGES_MAX_COUNT = 2000;
431431
432432
function appendLog(msg) {
433-
var startsWithBracked = msg.indexOf('{') == 0;
433+
let jsonMsg = {};
434+
let portListing = false;
435+
try {
436+
jsonMsg = JSON.parse(msg);
437+
portsListing = jsonMsg.Ports;
438+
} catch {
439+
// no valid json
440+
}
441+
434442
var startsWithList = msg.indexOf('list') == 0;
435443
436-
if (listenabled.checked || (typeof msg === 'string' && !startsWithBracked && !startsWithList)) {
437-
messages.push(msg);
438-
if (messages.length > MESSAGES_MAX_COUNT) {
439-
messages.shift();
440-
}
441-
log.innerHTML = messages.join('<br>');
442-
if (autoscroll.checked) {
443-
log.scrollTop = log.scrollHeight - log.clientHeight;
444-
}
445-
}
444+
if (listenabled.checked || (!portsListing && !startsWithList)) {
445+
let printMsg = msg;
446+
if (jsonMsg.Ports) {
447+
const validKeys = ['Name', 'SerialNumber', 'IsOpen', 'VendorID', 'ProductID'];
448+
if (jsonMsg.Network) {
449+
printMsg = "<b>Network Ports</b>:<br>"+JSON.stringify(jsonMsg.Ports, validKeys, 2);
450+
} else {
451+
printMsg = "<b>Serial Ports</b>:<br>"+JSON.stringify(jsonMsg.Ports, validKeys, 2);
452+
}
453+
} else if (Object.keys(jsonMsg).length !== 0) {
454+
printMsg = JSON.stringify(jsonMsg, undefined, 2);
455+
}
456+
messages.push(printMsg);
457+
if (messages.length > MESSAGES_MAX_COUNT) {
458+
messages.shift();
459+
}
460+
log.innerHTML = messages.join('<br><br>');
461+
if (autoscroll.checked) {
462+
log.scrollTop = log.scrollHeight - log.clientHeight;
463+
}
464+
}
446465
}
447466
448467
$('#form').submit(function(e) {
@@ -460,6 +479,7 @@ const homeTemplateHtml = `<!DOCTYPE html>
460479
var link = document.createElement('a');
461480
link.setAttribute('download', 'agent-log.txt');
462481
var text = log.innerHTML.replace(/<br>/g, '\n');
482+
text = text.replace(/<b>|<\/b>/g, '');
463483
link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
464484
link.click();
465485
});
@@ -505,14 +525,15 @@ body {
505525
#container {
506526
display: flex;
507527
flex-direction: column;
508-
height: 100%;
528+
height: 100vh;
509529
width: 100%;
510530
}
511531
512532
#log {
513533
flex-grow: 1;
514534
font-family: "Roboto Mono", "Courier", "Lucida Grande", Verdana, sans-serif;
515535
background-color: #DAE3E3;
536+
height: calc(100vh - 61px);
516537
margin: 15px 15px 10px;
517538
padding: 8px 10px;
518539
overflow-y: auto;
@@ -595,16 +616,15 @@ body {
595616
font-size: 1em;
596617
outline: none;
597618
}
598-
599619
</style>
600620
</head>
601621
<body>
602622
<div id="container">
603-
<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>
623+
<pre id="log"></pre>
604624
<div id="footer">
605625
<form id="form">
606626
<input type="submit" class="button" value="Send" />
607-
<input type="text" id="input" class="textfield" />
627+
<input type="text" id="input" class="textfield" aria-label="send command" />
608628
</form>
609629
<div id="secondary-controls">
610630
<div>
@@ -622,7 +642,6 @@ body {
622642
</div>
623643
</body>
624644
</html>
625-
626645
`
627646

628647
func parseIni(filename string) (args []string, err error) {

0 commit comments

Comments
 (0)