Skip to content

Commit 3c36740

Browse files
umbynoscmaglie
umbynos
authored and
cmaglie
committed
use go:embed for the HTML home
1 parent fd31f87 commit 3c36740

File tree

2 files changed

+8
-238
lines changed

2 files changed

+8
-238
lines changed

‎home.html

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
<!-- this file is just for development purpose, real code in main.go -->
21
<!DOCTYPE html>
32
<html lang="en">
43
<head>

‎main.go

+8-237
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,14 @@ var (
8686
//go:embed config.ini
8787
var configContent []byte
8888

89+
var homeTemplate = template.Must(template.New("home").Parse(homeTemplateHTML))
90+
91+
// If you navigate to this server's homepage, you'll get this HTML
92+
// so you can directly interact with the serial port server
93+
//
94+
//go:embed home.html
95+
var homeTemplateHTML string
96+
8997
// global clients
9098
var (
9199
Tools tools.Tools
@@ -452,243 +460,6 @@ func loop() {
452460
}()
453461
}
454462

455-
var homeTemplate = template.Must(template.New("home").Parse(homeTemplateHTML))
456-
457-
// If you navigate to this server's homepage, you'll get this HTML
458-
// so you can directly interact with the serial port server
459-
const homeTemplateHTML = `<!DOCTYPE html>
460-
<html lang="en">
461-
<head>
462-
<title>Arduino Create Agent Debug Console</title>
463-
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap" rel="stylesheet">
464-
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,600,700&display=swap" rel="stylesheet">
465-
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
466-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
467-
<script type="text/javascript">
468-
$(function() {
469-
var socket;
470-
var input = $('#input');
471-
var log = document.getElementById('log');
472-
var autoscroll = document.getElementById('autoscroll');
473-
var listenabled = document.getElementById('list');
474-
var messages = [];
475-
var MESSAGES_MAX_COUNT = 2000;
476-
477-
function appendLog(msg) {
478-
let jsonMsg = {};
479-
let portListing = false;
480-
try {
481-
jsonMsg = JSON.parse(msg);
482-
portsListing = jsonMsg.Ports;
483-
} catch {
484-
// no valid json
485-
}
486-
487-
var startsWithList = msg.indexOf('list') == 0;
488-
489-
if (listenabled.checked || (!portsListing && !startsWithList)) {
490-
let printMsg = msg;
491-
if (jsonMsg.Ports) {
492-
const validKeys = ['Name', 'SerialNumber', 'IsOpen', 'VendorID', 'ProductID'];
493-
if (jsonMsg.Network) {
494-
printMsg = "<b>Network Ports</b>:<br>"+JSON.stringify(jsonMsg.Ports, validKeys, 2);
495-
} else {
496-
printMsg = "<b>Serial Ports</b>:<br>"+JSON.stringify(jsonMsg.Ports, validKeys, 2);
497-
}
498-
} else if (Object.keys(jsonMsg).length !== 0) {
499-
printMsg = JSON.stringify(jsonMsg, undefined, 2);
500-
}
501-
messages.push(printMsg);
502-
if (messages.length > MESSAGES_MAX_COUNT) {
503-
messages.shift();
504-
}
505-
log.innerHTML = messages.join('<br><br>');
506-
if (autoscroll.checked) {
507-
log.scrollTop = log.scrollHeight - log.clientHeight;
508-
}
509-
}
510-
}
511-
512-
$('#form').submit(function(e) {
513-
e.preventDefault();
514-
if (!socket) {
515-
return false;
516-
}
517-
if (!input.val()) {
518-
return false;
519-
}
520-
socket.emit('command', input.val());
521-
});
522-
523-
$('#export').click(function() {
524-
var link = document.createElement('a');
525-
link.setAttribute('download', 'agent-log.txt');
526-
var text = log.innerHTML.replace(/<br>/g, '\n');
527-
text = text.replace(/<b>|<\/b>/g, '');
528-
link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
529-
link.click();
530-
});
531-
532-
$('#clear').click(function() {
533-
messages = [];
534-
log.innerHTML = '';
535-
});
536-
537-
if (window['WebSocket']) {
538-
if (window.location.protocol === 'https:') {
539-
socket = io('https://{{$}}')
540-
} else {
541-
socket = io('http://{{$}}');
542-
}
543-
socket.on('disconnect', function(evt) {
544-
appendLog($('<div><b>Connection closed.</b></div>'))
545-
});
546-
socket.on('message', function(evt) {
547-
appendLog(evt);
548-
});
549-
} else {
550-
appendLog($('<div><b>Your browser does not support WebSockets.</b></div>'))
551-
}
552-
553-
$("#input").focus();
554-
});
555-
</script>
556-
<style type="text/css">
557-
html, body {
558-
overflow: hidden;
559-
height: 100%;
560-
}
561-
562-
body {
563-
margin: 0px;
564-
padding: 0px;
565-
background: #F8F9F9;
566-
font-size: 16px;
567-
font-family: "Open Sans", "Lucida Grande", Lucida, Verdana, sans-serif;
568-
}
569-
570-
#container {
571-
display: flex;
572-
flex-direction: column;
573-
height: 100vh;
574-
width: 100%;
575-
}
576-
577-
#log {
578-
flex-grow: 1;
579-
font-family: "Roboto Mono", "Courier", "Lucida Grande", Verdana, sans-serif;
580-
background-color: #DAE3E3;
581-
height: calc(100vh - 61px);
582-
margin: 15px 15px 10px;
583-
padding: 8px 10px;
584-
overflow-y: auto;
585-
}
586-
587-
#footer {
588-
display: flex;
589-
flex-wrap: wrap;
590-
align-items: flex-start;
591-
justify-content: space-between;
592-
margin: 0px 15px 0px;
593-
}
594-
595-
#form {
596-
display: flex;
597-
flex-grow: 1;
598-
margin-bottom: 15px;
599-
}
600-
601-
#input {
602-
flex-grow: 1;
603-
}
604-
605-
#secondary-controls div {
606-
display: inline-block;
607-
padding: 10px 15px;
608-
}
609-
610-
#autoscroll,
611-
#list {
612-
vertical-align: middle;
613-
width: 20px;
614-
height: 20px;
615-
}
616-
617-
618-
#secondary-controls button {
619-
margin-bottom: 15px;
620-
vertical-align: top;
621-
}
622-
623-
.button {
624-
background-color: #b5c8c9;
625-
border: 1px solid #b5c8c9;
626-
border-radius: 2px 2px 0 0;
627-
box-shadow: 0 4px #95a5a6;
628-
margin-bottom: 4px;
629-
color: #000;
630-
cursor: pointer;
631-
font-size: 14px;
632-
letter-spacing: 1.28px;
633-
line-height: normal;
634-
outline: none;
635-
padding: 9px 18px;
636-
text-align: center;
637-
text-transform: uppercase;
638-
transition: box-shadow .1s ease-out, transform .1s ease-out;
639-
}
640-
641-
.button:hover {
642-
box-shadow: 0 2px #95a5a6;
643-
outline: none;
644-
transform: translateY(2px);
645-
}
646-
647-
.button:active {
648-
box-shadow: none;
649-
transform: translateY(4px);
650-
}
651-
652-
.textfield {
653-
background-color: #dae3e3;
654-
width: auto;
655-
height: auto;
656-
padding: 10px 8px;
657-
margin-left: 8px;
658-
vertical-align: top;
659-
border: none;
660-
font-family: "Open Sans", "Lucida Grande", Lucida, Verdana, sans-serif;
661-
font-size: 1em;
662-
outline: none;
663-
}
664-
</style>
665-
</head>
666-
<body>
667-
<div id="container">
668-
<pre id="log"></pre>
669-
<div id="footer">
670-
<form id="form">
671-
<input type="submit" class="button" value="Send" />
672-
<input type="text" id="input" class="textfield" aria-label="send command" />
673-
</form>
674-
<div id="secondary-controls">
675-
<div>
676-
<input name="pause" type="checkbox" checked id="autoscroll" />
677-
<label for="autoscroll">Autoscroll</label>
678-
</div>
679-
<div>
680-
<input name="list" type="checkbox" checked id="list" />
681-
<label for="list">Enable&nbsp;List&nbsp;Command</label>
682-
</div>
683-
<button id="clear" class="button">Clear&nbsp;Log</button>
684-
<button id="export" class="button">Export&nbsp;Log</button>
685-
</div>
686-
</div>
687-
</div>
688-
</body>
689-
</html>
690-
`
691-
692463
func parseIni(filename string) (args []string, err error) {
693464
cfg, err := ini.LoadSources(ini.LoadOptions{IgnoreInlineComment: false, AllowPythonMultilineValues: true}, filename)
694465
if err != nil {

0 commit comments

Comments
 (0)