Skip to content

Commit 8b7ca9f

Browse files
mastrolinuxmastrolinux
authored
Merge pull request #167 from arduino/debugger_UI
Well done!
2 parents 607334d + 12ef59b commit 8b7ca9f

File tree

1 file changed

+115
-69
lines changed

1 file changed

+115
-69
lines changed

‎main.go‎

Lines changed: 115 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -286,59 +286,62 @@ const homeTemplateHtml = `<!DOCTYPE html>
286286
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
287287
<script type="text/javascript">
288288
$(function() {
289-
290-
var socket;
291-
var msg = $("#msg");
292-
var log = document.getElementById('log');
293-
var pause = document.getElementById('myCheck');
294-
var messages = [];
295-
var only_log = true;
296-
297-
function appendLog(msg) {
298-
299-
if (!pause.checked && (only_log == false || (!(msg.indexOf("{") == 0) && !(msg.indexOf("list") == 0) && only_log == true))) {
300-
messages.push(msg);
301-
if (messages.length > 100) {
302-
messages.shift();
303-
}
304-
var doScroll = log.scrollTop == log.scrollHeight - log.clientHeight;
305-
log.innerHTML = messages.join("<br>");
306-
if (doScroll) {
307-
log.scrollTop = log.scrollHeight - log.clientHeight;
308-
}
309-
}
310-
}
311-
312-
$("#form").submit(function() {
313-
if (!socket) {
314-
return false;
315-
}
316-
if (!msg.val()) {
317-
return false;
318-
}
319-
socket.emit("command", msg.val());
320-
if (msg.val().indexOf("log off") != -1) {only_log = true}
321-
if (msg.val().indexOf("log on") != -1) {only_log = false}
322-
msg.val("");
323-
return false
324-
});
325-
326-
if (window["WebSocket"]) {
327-
if (window.location.protocol === 'https:') {
328-
socket = io('https://{{$}}')
329-
} else {
330-
socket = io("http://{{$}}");
331-
}
332-
socket.on("disconnect", function(evt) {
333-
appendLog($("<div><b>Connection closed.</b></div>"))
334-
});
335-
socket.on("message", function(evt) {
336-
appendLog(evt);
337-
});
338-
} else {
339-
appendLog($("<div><b>Your browser does not support WebSockets.</b></div>"))
340-
}
341-
});
289+
var socket;
290+
var input = $('#input');
291+
var log = document.getElementById('log');
292+
var autoscroll = document.getElementById('autoscroll');
293+
var listenabled = document.getElementById('list');
294+
var messages = [];
295+
296+
function appendLog(msg) {
297+
if (listenabled.checked || (typeof msg === 'string' && msg.indexOf('{') !== 0 && msg.indexOf('list') !== 0)) {
298+
messages.push(msg);
299+
if (messages.length > 2000) {
300+
messages.shift();
301+
}
302+
var doScroll = log.scrollTop == log.scrollHeight - log.clientHeight;
303+
log.innerHTML = messages.join('<br>');
304+
if (autoscroll.checked && doScroll) {
305+
log.scrollTop = log.scrollHeight - log.clientHeight;
306+
}
307+
}
308+
}
309+
310+
$('#form').submit(function(e) {
311+
e.preventDefault();
312+
if (!socket) {
313+
return false;
314+
}
315+
if (!input.val()) {
316+
return false;
317+
}
318+
socket.emit('command', input.val());
319+
});
320+
321+
$('#export').click(function() {
322+
var link = document.createElement('a');
323+
link.setAttribute('download', 'agent-log.txt');
324+
var text = log.innerHTML.replace(/<br>/g, '\n');
325+
link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
326+
link.click();
327+
});
328+
329+
if (window['WebSocket']) {
330+
if (window.location.protocol === 'https:') {
331+
socket = io('https://{{$}}')
332+
} else {
333+
socket = io('http://{{$}}');
334+
}
335+
socket.on('disconnect', function(evt) {
336+
appendLog($('<div><b>Connection closed.</b></div>'))
337+
});
338+
socket.on('message', function(evt) {
339+
appendLog(evt);
340+
});
341+
} else {
342+
appendLog($('<div><b>Your browser does not support WebSockets.</b></div>'))
343+
}
344+
});
342345
</script>
343346
<style type="text/css">
344347
html {
@@ -351,42 +354,85 @@ body {
351354
margin: 0;
352355
width: 100%;
353356
height: 100%;
354-
background: gray;
357+
background: #00979d;
358+
font-family: 'Lucida Grande', Lucida, Verdana, sans-serif;
355359
}
356360
357361
#log {
358362
background: white;
359363
margin: 0;
360-
padding: 0.5em 0.5em 0.5em 0.5em;
364+
padding: .5em;
361365
position: absolute;
362-
top: 0.5em;
363-
left: 0.5em;
364-
right: 0.5em;
366+
top: .5em;
367+
left: .5em;
368+
right: .5em;
365369
bottom: 3em;
366370
overflow: auto;
367371
}
368372
369-
#form {
370-
padding: 0 0.5em 0 0.5em;
373+
.buttons {
374+
display: flex;
375+
padding: 0 .5em;
371376
margin: 0;
372377
position: absolute;
373378
bottom: 1em;
374-
left: 0px;
375-
width: 100%;
379+
left: 0;
380+
width: calc(100% - 1em);
376381
overflow: hidden;
377382
}
378383
384+
#form {
385+
display: inline-block;
386+
}
387+
388+
#export {
389+
float: right;
390+
margin-left: auto;
391+
}
392+
393+
#autoscroll,
394+
#list {
395+
margin-left: 2em;
396+
vertical-align: middle;
397+
}
398+
399+
@media screen and (max-width: 950px) {
400+
#form {
401+
max-width: 60%;
402+
}
403+
404+
#input {
405+
max-width: 55%;
406+
}
407+
}
408+
@media screen and (max-width: 825px) {
409+
.buttons {
410+
flex-direction: column;
411+
}
412+
413+
#log {
414+
bottom: 7em;
415+
}
416+
417+
#autoscroll,
418+
#list {
419+
margin-left: 0;
420+
margin-top: .5em;
421+
}
422+
}
379423
</style>
380424
</head>
381425
<body>
382426
<div id="log"></div>
383-
<form id="form">
384-
<input type="submit" value="Send" />
385-
<input type="text" id="msg" size="64"/>
386-
<input name="pause" type="checkbox" value="pause" id="myCheck"/> Pause
387-
<!--<input type="button" value="Install Certificate" onclick="window.open('http://localhost:8991/certificate.crt')" />-->
388-
</form>
389-
</form>
427+
<div class="buttons">
428+
<form id="form">
429+
<input type="submit" value="Send" />
430+
<input type="text" id="input" size="64"/>
431+
</form>
432+
<div><input name="pause" type="checkbox" checked id="autoscroll"/> Autoscroll</div>
433+
<div><input name="list" type="checkbox" checked id="list"/> Toggle List</div>
434+
<button id="export">Export Log</button>
435+
</div>
390436
</body>
391437
</html>
392438
`

0 commit comments

Comments
 (0)