Skip to content

Commit c3b5435

Browse files
sebromerosebromero
committed
Update Colors and fonts of console template
1 parent d081593 commit c3b5435

File tree

1 file changed

+119
-49
lines changed

1 file changed

+119
-49
lines changed

‎home.html

+119-49
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,68 @@
1+
<!DOCTYPE html>
12
<html>
23
<head>
3-
<title>Arduino Create Agent Debug Interface</title>
4+
<title>Arduino Create Agent Debug Console</title>
5+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap" rel="stylesheet">
6+
<link href="https://fonts.googleapis.com/css?family=Roboto:400,600,700&display=swap" rel="stylesheet">
47
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
8+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
59
<script type="text/javascript">
610
$(function() {
11+
var socket;
12+
var input = $('#input');
13+
var log = document.getElementById('log');
14+
var autoscroll = document.getElementById('autoscroll');
15+
var listenabled = document.getElementById('list');
16+
var messages = [];
717

8-
var conn;
9-
var msg = $("#msg");
10-
var log = $("#log");
18+
function appendLog(msg) {
19+
if (listenabled.checked || (typeof msg === 'string' && msg.indexOf('{') !== 0 && msg.indexOf('list') !== 0)) {
20+
messages.push(msg);
21+
if (messages.length > 2000) {
22+
messages.shift();
23+
}
24+
log.innerHTML = messages.join('<br>');
25+
if (autoscroll.checked) {
26+
log.scrollTop = log.scrollHeight - log.clientHeight;
27+
}
28+
}
29+
}
1130

12-
function appendLog(msg) {
13-
var d = log[0]
14-
var doScroll = d.scrollTop == d.scrollHeight - d.clientHeight;
15-
msg.appendTo(log)
16-
if (doScroll) {
17-
d.scrollTop = d.scrollHeight - d.clientHeight;
18-
}
19-
}
31+
$('#form').submit(function(e) {
32+
e.preventDefault();
33+
if (!socket) {
34+
return false;
35+
}
36+
if (!input.val()) {
37+
return false;
38+
}
39+
socket.emit('command', input.val());
40+
});
2041

21-
$("#form").submit(function() {
22-
if (!conn) {
23-
return false;
24-
}
25-
if (!msg.val()) {
26-
return false;
27-
}
28-
conn.send(msg.val());
29-
msg.val("");
30-
return false
31-
});
42+
$('#export').click(function() {
43+
var link = document.createElement('a');
44+
link.setAttribute('download', 'agent-log.txt');
45+
var text = log.innerHTML.replace(/<br>/g, '\n');
46+
link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
47+
link.click();
48+
});
3249

33-
if (window["WebSocket"]) {
34-
conn = new WebSocket("wss://{{$}}/ws");
35-
conn.onclose = function(evt) {
36-
appendLog($("<div><b>Connection closed.</b></div>"))
37-
}
38-
conn.onmessage = function(evt) {
39-
appendLog($("<div/>").text(evt.data))
40-
}
41-
} else {
42-
appendLog($("<div><b>Your browser does not support WebSockets.</b></div>"))
43-
}
44-
});
50+
if (window['WebSocket']) {
51+
if (window.location.protocol === 'https:') {
52+
socket = io('https://{{$}}')
53+
} else {
54+
socket = io('http://{{$}}');
55+
}
56+
socket.on('disconnect', function(evt) {
57+
appendLog($('<div><b>Connection closed.</b></div>'))
58+
});
59+
socket.on('message', function(evt) {
60+
appendLog(evt);
61+
});
62+
} else {
63+
appendLog($('<div><b>Your browser does not support WebSockets.</b></div>'))
64+
}
65+
});
4566
</script>
4667
<style type="text/css">
4768
html {
@@ -54,38 +75,87 @@
5475
margin: 0;
5576
width: 100%;
5677
height: 100%;
57-
background: gray;
78+
background: #F8F9F9;
79+
font-size: 16px;
80+
font-family: "Open Sans", "Lucida Grande", Lucida, Verdana, sans-serif;
5881
}
5982

6083
#log {
61-
background: white;
84+
font-family: "Roboto", "Lucida Grande", Lucida, Verdana, sans-serif;
85+
background: #DAE3E3;
6286
margin: 0;
63-
padding: 0.5em 0.5em 0.5em 0.5em;
87+
padding: .5em;
6488
position: absolute;
65-
top: 0.5em;
66-
left: 0.5em;
67-
right: 0.5em;
89+
top: .5em;
90+
left: .5em;
91+
right: .5em;
6892
bottom: 3em;
6993
overflow: auto;
7094
}
7195

72-
#form {
73-
padding: 0 0.5em 0 0.5em;
96+
.buttons {
97+
align-items: center;
98+
display: flex;
99+
padding: 0 .5em;
74100
margin: 0;
75101
position: absolute;
76102
bottom: 1em;
77-
left: 0px;
78-
width: 100%;
103+
left: 0;
104+
width: calc(100% - 1em);
79105
overflow: hidden;
80106
}
81107

108+
#form {
109+
display: inline-block;
110+
}
111+
112+
#export {
113+
float: right;
114+
margin-left: auto;
115+
}
116+
117+
#autoscroll,
118+
#list {
119+
margin-left: 2em;
120+
vertical-align: middle;
121+
}
122+
123+
@media screen and (max-width: 950px) {
124+
#form {
125+
max-width: 60%;
126+
}
127+
128+
#input {
129+
max-width: 55%;
130+
}
131+
}
132+
@media screen and (max-width: 825px) {
133+
.buttons {
134+
flex-direction: column;
135+
}
136+
137+
#log {
138+
bottom: 7em;
139+
}
140+
141+
#autoscroll,
142+
#list {
143+
margin-left: 0;
144+
margin-top: .5em;
145+
}
146+
}
82147
</style>
83148
</head>
84149
<body>
85150
<div id="log"></div>
86-
<form id="form">
87-
<input type="submit" value="Send" />
88-
<input type="text" id="msg" size="64"/>
89-
</form>
151+
<div class="buttons">
152+
<form id="form">
153+
<input type="submit" value="Send" />
154+
<input type="text" id="input" size="64"/>
155+
</form>
156+
<div><input name="pause" type="checkbox" checked id="autoscroll"/> Autoscroll</div>
157+
<div><input name="list" type="checkbox" checked id="list"/> Toggle List</div>
158+
<button id="export">Export Log</button>
159+
</div>
90160
</body>
91161
</html>

0 commit comments

Comments
 (0)