Skip to content

Commit 2b3e8ae

Browse files
XaytonXayton
committed
The Debug Console is now jQuery-free.
The code has been restructured to be simpler and avoid global variable as much as possible.
1 parent 3729bb1 commit 2b3e8ae

File tree

1 file changed

+127
-106
lines changed

1 file changed

+127
-106
lines changed

‎home.html

+127-106
Original file line numberDiff line numberDiff line change
@@ -5,121 +5,64 @@
55
<title>Arduino Create Agent Debug Console</title>
66
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap" rel="stylesheet">
77
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,600,700&display=swap" rel="stylesheet">
8-
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
9-
<script type="text/javascript"
10-
src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
11-
<script type="text/javascript">
12-
$(function () {
13-
var socket;
14-
var input = $('#input');
15-
var log = document.getElementById('log');
16-
var logList = document.getElementById('log-list');
17-
18-
var autoscroll = document.getElementById('autoscroll');
19-
var messages = [];
20-
const MESSAGES_MAX_COUNT = 2000;
21-
22-
// Check if the list visibility setting is saved in the localStorage.
23-
const LOCAL_STORAGE_KEY = "ArduinoAgentListVisibility";
24-
let savedSetting = localStorage.getItem(LOCAL_STORAGE_KEY);
25-
let listCommand = savedSetting != null ? parseInt(savedSetting) : 1; // Default: Show list commands inline.
26-
document.getElementById('listShow').value = listCommand;
27-
updateLogVisibility();
28-
29-
function appendLog(msg) {
30-
let jsonMsg = {};
31-
let portsListing = false;
32-
try {
33-
// Try to parse the received message as JSON, and then check if it contains a "Ports" property.
34-
jsonMsg = JSON.parse(msg);
35-
portsListing = jsonMsg.Ports !== undefined;
36-
} catch {
37-
// no valid json
38-
}
39-
40-
// This is a "list" message if it starts with "list" or if it's valid JSON and has a "Ports" property.
41-
let isListMessage = portsListing || msg.indexOf('list') == 0;
42-
43-
// If this is a "LIST" command and we want to hide them. Skip.
44-
if (isListMessage && listCommand == 0) return;
45-
46-
47-
let printMsg = msg;
48-
if (jsonMsg.Ports) {
49-
const validKeys = ['Name', 'SerialNumber', 'IsOpen', 'VendorID', 'ProductID'];
50-
printMsg = "Serial Ports:\n" + JSON.stringify(jsonMsg.Ports, validKeys, 2);
51-
} else if (Object.keys(jsonMsg).length !== 0) {
52-
printMsg = JSON.stringify(jsonMsg, undefined, 2);
53-
}
54-
55-
// when parsing JSON we're escaping some html charaters like "&<>", we want to show their
56-
// original value in the log
57-
function decode(str) {
58-
let txt = new DOMParser().parseFromString(str, "text/html");
59-
return txt.documentElement.textContent;
60-
}
61-
printMsg = decode(printMsg);
8+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
629

10+
<script type="text/javascript">
11+
const LOCAL_STORAGE_KEY = "ArduinoAgentListVisibility";
12+
let messages = []; // The messages to show in the main log.
6313

64-
// Check if this is a "LIST" message and needs to be shown in a separate log.
65-
if (isListMessage && listCommand == 2) {
66-
// Show the "list" message in the specific log element. Replace any previous content.
67-
logList.textContent = "list\n\n" + printMsg;
14+
document.addEventListener("DOMContentLoaded", function () {
15+
let listMsgVisibility = getListMsgVisibility();
16+
updateListMsgVisibility(listMsgVisibility);
6817

69-
} else {
70-
// Show the message in the log element.
71-
messages.push(printMsg);
72-
if (messages.length > MESSAGES_MAX_COUNT) {
73-
messages.shift();
74-
}
75-
log.textContent = messages.join('\n\n');
76-
if (autoscroll.checked) {
77-
log.scrollTop = log.scrollHeight - log.clientHeight;
78-
}
79-
}
80-
}
18+
const socket = setupWebsocket();
8119

82-
$('#form').submit(function (e) {
83-
e.preventDefault();
20+
// Handle the form submission and send the message to the websocket.
21+
document.getElementById("form").addEventListener("submit", function (event) {
22+
event.preventDefault(); // Stop the from from actually submitting.
8423
if (!socket) {
8524
return false;
8625
}
87-
if (!input.val()) {
26+
27+
let input = document.getElementById("input");
28+
if (!input.value) {
8829
return false;
8930
}
90-
socket.emit('command', input.val());
91-
input.val('');
31+
socket.emit('command', input.value);
32+
input.value = '';
9233
});
34+
});
9335

94-
$('#export').click(function () {
95-
var link = document.createElement('a');
96-
link.setAttribute('download', 'agent-log.txt');
97-
var text = log.textContent;
98-
link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
99-
link.click();
100-
});
10136

102-
$('#clear').click(function () {
103-
messages = [];
104-
log.innerHTML = '';
105-
logList.innerHTML = '';
106-
});
37+
function getListMsgVisibility() {
38+
// Check if the list visibility setting is saved in the localStorage.
39+
let savedSetting = localStorage.getItem(LOCAL_STORAGE_KEY);
40+
let listCommand = savedSetting != null ? parseInt(savedSetting) : 1; // Default: Show list commands inline.
10741

108-
$('#listShow').change(function () {
109-
listCommand = document.getElementById('listShow').value;
110-
localStorage.setItem(LOCAL_STORAGE_KEY, "" + listCommand);
111-
updateLogVisibility();
112-
});
42+
document.getElementById('listShow').value = listCommand;
43+
return listCommand;
44+
}
11345

114-
function updateLogVisibility() {
115-
if (listCommand == 2) {
116-
logList.innerHTML = '';
117-
$("#log-list").show();
118-
} else {
119-
$("#log-list").hide();
120-
}
46+
function onListMsgVisibilityChange() {
47+
let listCommand = document.getElementById('listShow').value;
48+
localStorage.setItem(LOCAL_STORAGE_KEY, "" + listCommand); // Save the setting for future use.
49+
50+
// Update the rest of the UI so that it reflects the selected setting.
51+
updateListMsgVisibility(listCommand);
52+
}
53+
54+
function updateListMsgVisibility(visibility) {
55+
const element = document.getElementById('log-list');
56+
if (visibility == 2) {
57+
element.innerHTML = ''; // Clear the "list" log.
58+
element.style.display = 'block'; // Make sure the "list" log UI is visible.
59+
} else {
60+
element.style.display = 'none'; // Make sure the "list" log UI is hidden.
12161
}
62+
}
12263

64+
function setupWebsocket() {
65+
let socket;
12366
if (window['WebSocket']) {
12467
if (window.location.protocol === 'https:') {
12568
socket = io('https://{{$}}')
@@ -135,9 +78,87 @@
13578
} else {
13679
appendLog('Your browser does not support WebSockets.')
13780
}
81+
return socket;
82+
}
13883

139-
$("#input").focus();
140-
});
84+
function appendLog(msg) {
85+
const MESSAGES_MAX_COUNT = 2000;
86+
87+
let jsonMsg = {};
88+
let portsListing = false;
89+
try {
90+
// Try to parse the received message as JSON, and then check if it contains a "Ports" property.
91+
jsonMsg = JSON.parse(msg);
92+
portsListing = jsonMsg.Ports !== undefined;
93+
} catch {
94+
// no valid json
95+
}
96+
97+
// This is a "list" message if it starts with "list" or if it's valid JSON and has a "Ports" property.
98+
let isListMessage = portsListing || msg.indexOf('list') == 0;
99+
100+
// Get the current setting for the "list" message visibility.
101+
const listMsgVisibility = document.getElementById('listShow').value;
102+
103+
// If this is a "LIST" command and we want to hide them. Skip.
104+
if (isListMessage && listMsgVisibility == 0) return;
105+
106+
107+
let printMsg = msg;
108+
if (jsonMsg.Ports) {
109+
const validKeys = ['Name', 'SerialNumber', 'IsOpen', 'VendorID', 'ProductID'];
110+
printMsg = "Serial Ports:\n" + JSON.stringify(jsonMsg.Ports, validKeys, 2);
111+
} else if (Object.keys(jsonMsg).length !== 0) {
112+
printMsg = JSON.stringify(jsonMsg, undefined, 2);
113+
}
114+
115+
// when parsing JSON we're escaping some html charaters like "&<>", we want to show their
116+
// original value in the log
117+
function decode(str) {
118+
let txt = new DOMParser().parseFromString(str, "text/html");
119+
return txt.documentElement.textContent;
120+
}
121+
printMsg = decode(printMsg);
122+
123+
124+
const log1 = document.getElementById('log');
125+
const log2 = document.getElementById('log-list');
126+
const autoscroll = document.getElementById('autoscroll');
127+
128+
// Check if this is a "LIST" message and needs to be shown in a separate log.
129+
if (isListMessage && listMsgVisibility == 2) {
130+
// Show the "list" message in the specific log element. Replace any previous content.
131+
log2.textContent = "list\n\n" + printMsg;
132+
133+
} else {
134+
// Show the message in the log element.
135+
messages.push(printMsg);
136+
if (messages.length > MESSAGES_MAX_COUNT) {
137+
messages.shift();
138+
}
139+
log1.textContent = messages.join('\n\n');
140+
if (autoscroll.checked) {
141+
log1.scrollTop = log1.scrollHeight - log1.clientHeight;
142+
}
143+
}
144+
}
145+
146+
function clearLogs() {
147+
const log1 = document.getElementById('log');
148+
const log2 = document.getElementById('log-list');
149+
150+
messages = [];
151+
log1.innerHTML = '';
152+
log2.innerHTML = '';
153+
}
154+
155+
function exportLogs() {
156+
const link = document.createElement('a');
157+
link.setAttribute('download', 'agent-log.txt');
158+
const text = document.getElementById('log').textContent;
159+
link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
160+
link.click();
161+
}
141162
</script>
142163
<style type="text/css">
143164
html,
@@ -278,20 +299,20 @@
278299
<div id="footer">
279300
<form id="form">
280301
<input type="submit" class="button" value="Send" />
281-
<input type="text" id="input" class="textfield" aria-label="send command" autocomplete="off" />
302+
<input type="text" id="input" class="textfield" autocomplete="off" autofocus />
282303
</form>
283304
<div id="secondary-controls">
284305
<div>
285-
<input name="pause" type="checkbox" checked id="autoscroll" />
306+
<input type="checkbox" checked id="autoscroll" />
286307
<label for="autoscroll">Autoscroll</label>
287308
</div>
288-
<select name="listShow" id="listShow" class="button">
309+
<select id="listShow" class="button" onchange="onListMsgVisibilityChange()">
289310
<option value="0">Hide 'list' commands</option>
290311
<option value="1" selected>Show 'list' commands inline</option>
291312
<option value="2">Show 'list' commands separately</option>
292313
</select>
293-
<button id="clear" class="button">Clear&nbsp;Log</button>
294-
<button id="export" class="button">Export&nbsp;Log</button>
314+
<button class="button" onclick="clearLogs()">Clear Log</button>
315+
<button class="button" onclick="exportLogs()">Export Log</button>
295316
</div>
296317
</div>
297318
</div>

0 commit comments

Comments
 (0)