arduino · rsora · Mar 23, 2020 · Mar 5, 2020 · Mar 5, 2020 · Mar 6, 2020
diff --git a/home.html b/home.html
@@ -1,91 +1,211 @@
+<!DOCTYPE html>
 <html>
 <head>
-<title>Arduino Create Agent Debug Interface</title>
+<title>Arduino Create Agent Debug Console</title>
+<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,600,700&display=swap" rel="stylesheet">
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
 <script type="text/javascript">
     $(function() {
+	    var socket;
+	    var input = $('#input');
+	    var log = document.getElementById('log');
+	    var autoscroll = document.getElementById('autoscroll');
+	    var listenabled = document.getElementById('list');
+	    var messages = [];
+        var MESSAGES_MAX_COUNT = 2000;
 
-    var conn;
-    var msg = $("#msg");
-    var log = $("#log");
+	    function appendLog(msg) {
+            var startsWithBracked = msg.indexOf('{') == 0;
+            var startsWithList = msg.indexOf('list') == 0;
 
-    function appendLog(msg) {
-        var d = log[0]
-        var doScroll = d.scrollTop == d.scrollHeight - d.clientHeight;
-        msg.appendTo(log)
-        if (doScroll) {
-            d.scrollTop = d.scrollHeight - d.clientHeight;
-        }
-    }
+	        if (listenabled.checked || (typeof msg === 'string' && !startsWithBracked && !startsWithList)) {
+	            messages.push(msg);
+	            if (messages.length > MESSAGES_MAX_COUNT) {
+	                messages.shift();
+	            }
+	            log.innerHTML = messages.join('<br>');
+	            if (autoscroll.checked) {
+	                log.scrollTop = log.scrollHeight - log.clientHeight;
+	            }
+	        }
+	    }
 
-    $("#form").submit(function() {
-        if (!conn) {
-            return false;
-        }
-        if (!msg.val()) {
-            return false;
-        }
-        conn.send(msg.val());
-        msg.val("");
-        return false
-    });
-
-    if (window["WebSocket"]) {
-        conn = new WebSocket("wss://{{$}}/ws");
-        conn.onclose = function(evt) {
-            appendLog($("<div><b>Connection closed.</b></div>"))
-        }
-        conn.onmessage = function(evt) {
-            appendLog($("<div/>").text(evt.data))
+	    $('#form').submit(function(e) {
+	    	e.preventDefault();
+	        if (!socket) {
+	            return false;
+	        }
+	        if (!input.val()) {
+	            return false;
+	        }
+	        socket.emit('command', input.val());
+	    });
+
+	    $('#export').click(function() {
+	    	var link = document.createElement('a');
+	    	link.setAttribute('download', 'agent-log.txt');
+	    	var text = log.innerHTML.replace(/<br>/g, '\n');
+	    	link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+    		link.click();
+    	});
+
+        $('#clear').click(function() {
+            messages = [];
+            log.innerHTML = '';
+        });
+
+	    if (window['WebSocket']) {
+	        if (window.location.protocol === 'https:') {
+	            socket = io('https://{{$}}')
+	        } else {
+	            socket = io('http://{{$}}');
+	        }
+	        socket.on('disconnect', function(evt) {
+	            appendLog($('<div><b>Connection closed.</b></div>'))
+	        });
+	        socket.on('message', function(evt) {
+	            appendLog(evt);
+	        });
+	    } else {
+	        appendLog($('<div><b>Your browser does not support WebSockets.</b></div>'))
         }
-    } else {
-        appendLog($("<div><b>Your browser does not support WebSockets.</b></div>"))
-    }
-    });
+
+        $("#input").focus();
+	});
 </script>
 <style type="text/css">
-html {
+html, body {
     overflow: hidden;
+    height: 100%;
 }
 
-body {
-    overflow: hidden;
-    padding: 0;
-    margin: 0;
-    width: 100%;
+body {    
+    margin: 0px;
+    padding: 0px;
+    background: #F8F9F9;
+    font-size: 16px;
+    font-family: "Open Sans", "Lucida Grande", Lucida, Verdana, sans-serif;
+}
+
+#container {
+    display: flex;
+    flex-direction: column;    
     height: 100%;
-    background: gray;
+    width: 100%;
 }
 
 #log {
-    background: white;
-    margin: 0;
-    padding: 0.5em 0.5em 0.5em 0.5em;
-    position: absolute;
-    top: 0.5em;
-    left: 0.5em;
-    right: 0.5em;
-    bottom: 3em;
-    overflow: auto;
+    flex-grow: 1;
+    font-family: "Roboto Mono", "Courier", "Lucida Grande", Verdana, sans-serif;
+    background-color: #DAE3E3;
+    margin: 15px 15px 10px;
+    padding: 8px 10px;
+    overflow-y: auto;
 }
 
-#form {
-    padding: 0 0.5em 0 0.5em;
-    margin: 0;
-    position: absolute;
-    bottom: 1em;
-    left: 0px;
-    width: 100%;
-    overflow: hidden;
+#footer {    
+    display: flex;    
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin: 0px 15px 0px;    
+}
+
+#form {    
+    display: flex;
+    flex-grow: 1;
+    margin-bottom: 15px;
+}
+
+#input {
+    flex-grow: 1;
+}
+
+#secondary-controls div {
+    display: inline-block;        
+    padding: 10px 15px;    
+}
+
+#autoscroll,
+#list {
+    vertical-align: middle;
+    width: 20px;
+    height: 20px;
+}
+
+
+#secondary-controls button {
+    margin-bottom: 15px;
+    vertical-align: top;
+}
+
+.button {
+    background-color: #b5c8c9;
+    border: 1px solid #b5c8c9;
+    border-radius: 2px 2px 0 0;
+    box-shadow: 0 4px #95a5a6;
+    margin-bottom: 4px;
+    color: #000;
+    cursor: pointer;    
+    font-size: 14px;
+    letter-spacing: 1.28px;
+    line-height: normal;
+    outline: none;
+    padding: 9px 18px;
+    text-align: center;
+    text-transform: uppercase;
+    transition: box-shadow .1s ease-out, transform .1s ease-out;
+}
+
+.button:hover {
+    box-shadow: 0 2px #95a5a6;    
+    outline: none;
+    transform: translateY(2px);
+}
+
+.button:active {
+    box-shadow: none;    
+    transform: translateY(4px);
+}
+
+.textfield {
+    background-color: #dae3e3;
+    width: auto;
+    height: auto;    
+    padding: 10px 8px;
+    margin-left: 8px;
+    vertical-align: top;
+    border: none;
+    font-family: "Open Sans", "Lucida Grande", Lucida, Verdana, sans-serif;
+    font-size: 1em;
+    outline: none;
 }
 
 </style>
 </head>
-<body>
-<div id="log"></div>
-<form id="form">
-    <input type="submit" value="Send" />
-    <input type="text" id="msg" size="64"/>
-</form>
-</body>
+    <body>
+        <div id="container">
+            <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>
+            <div id="footer">
+                <form id="form">
+                    <input type="submit" class="button" value="Send" />
+                    <input type="text" id="input" class="textfield" />
+                </form>
+                <div id="secondary-controls">
+                    <div>
+                        <input name="pause" type="checkbox" checked id="autoscroll" />
+                        <label for="autoscroll">Autoscroll</label>
+                    </div>
+                    <div>
+                        <input name="list" type="checkbox" checked id="list" />
+                        <label for="list">Enable&nbsp;List&nbsp;Command</label>
+                    </div>
+                    <button id="clear" class="button">Clear&nbsp;Log</button>
+                    <button id="export" class="button">Export&nbsp;Log</button>
+                </div>
+            </div>
+        </div>
+    </body>
 </html>
diff --git a/icon/icon_hiber.ico b/icon/icon_hiber.ico
diff --git a/icon/icon_hiber.png b/icon/icon_hiber.png
diff --git a/icon/icon_linux.png b/icon/icon_linux.png
diff --git a/icon/icon_linux_hiber.png b/icon/icon_linux_hiber.png
diff --git a/icon/icon_mac.png b/icon/icon_mac.png
diff --git a/icon/icon_mac_hiber.png b/icon/icon_mac_hiber.png
diff --git a/icon/icon_mac_light.png b/icon/icon_mac_light.png
diff --git a/icon/icon_mac_light_hiber.png b/icon/icon_mac_light_hiber.png
diff --git a/icon/icon_win.ico b/icon/icon_win.ico
diff --git a/icon/icon_win_hiber.ico b/icon/icon_win_hiber.ico