|
4 | 4 | <title>Arduino Create Agent Debug Console</title>
|
5 | 5 | <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap" rel="stylesheet">
|
6 | 6 | <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,600,700&display=swap" rel="stylesheet">
|
7 |
| -<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> |
9 | 7 | <script type="text/javascript">
|
10 |
| - $(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 = []; |
17 |
| - var MESSAGES_MAX_COUNT = 2000; |
| 8 | + var ready = (callback) => { |
| 9 | + if (document.readyState != "loading") callback(); |
| 10 | + else document.addEventListener("DOMContentLoaded", callback); |
| 11 | + } |
| 12 | + |
| 13 | + ready(() => { |
| 14 | + /* Do things after DOM has fully loaded */ |
| 15 | + let socket; |
| 16 | + let input = document.getElementById('input'); |
| 17 | + let log = document.getElementById('log'); |
| 18 | + let autoscroll = document.getElementById('autoscroll'); |
| 19 | + let listenabled = document.getElementById('list'); |
| 20 | + let messages = []; |
| 21 | + let MESSAGES_MAX_COUNT = 2000; |
18 | 22 |
|
19 | 23 | function appendLog(msg) {
|
20 | 24 | let jsonMsg = {};
|
21 |
| - let portListing = false; |
22 | 25 | try {
|
23 | 26 | jsonMsg = JSON.parse(msg);
|
24 |
| - portsListing = jsonMsg.Ports; |
25 | 27 | } catch {
|
26 | 28 | // no valid json
|
27 | 29 | }
|
28 | 30 |
|
29 |
| - var startsWithList = msg.indexOf('list') == 0; |
30 |
| - |
31 |
| - if (listenabled.checked || (!portsListing && !startsWithList)) { |
32 |
| - let printMsg = msg; |
33 |
| - if (jsonMsg.Ports) { |
34 |
| - const validKeys = ['Name', 'SerialNumber', 'IsOpen', 'VendorID', 'ProductID']; |
35 |
| - if (jsonMsg.Network) { |
36 |
| - printMsg = "Network Ports:\n"+JSON.stringify(jsonMsg.Ports, validKeys, 2); |
37 |
| - } else { |
38 |
| - printMsg = "Serial Ports:\n"+JSON.stringify(jsonMsg.Ports, validKeys, 2); |
39 |
| - } |
40 |
| - } else if (Object.keys(jsonMsg).length !== 0) { |
41 |
| - printMsg = JSON.stringify(jsonMsg, undefined, 2); |
42 |
| - } |
43 |
| - |
44 |
| - // when parsing JSON we're escaping some html charaters like "&<>", we want to show their |
45 |
| - // original value in the log |
46 |
| - function decode(str) { |
47 |
| - let txt = new DOMParser().parseFromString(str, "text/html"); |
48 |
| - return txt.documentElement.textContent; |
49 |
| - } |
50 |
| - printMsg = decode(printMsg); |
51 |
| - |
52 |
| - messages.push(printMsg); |
53 |
| - if (messages.length > MESSAGES_MAX_COUNT) { |
54 |
| - messages.shift(); |
55 |
| - } |
56 |
| - log.textContent = messages.join('\n\n'); |
57 |
| - if (autoscroll.checked) { |
58 |
| - log.scrollTop = log.scrollHeight - log.clientHeight; |
59 |
| - } |
| 31 | + if (!listenabled.checked) { |
| 32 | + return |
| 33 | + } |
| 34 | + |
| 35 | + let printMsg = msg; |
| 36 | + if (jsonMsg.Ports) { |
| 37 | + const validKeys = ['Name', 'SerialNumber', 'IsOpen', 'VendorID', 'ProductID']; |
| 38 | + const prefix = (jsonMsg.Network) ? "Network Ports:\n" : "Serial Ports:\n"; |
| 39 | + printMsg = prefix+JSON.stringify(jsonMsg.Ports, validKeys, 2); |
| 40 | + } else if (Object.keys(jsonMsg).length !== 0) { |
| 41 | + printMsg = JSON.stringify(jsonMsg, undefined, 2); |
| 42 | + } |
| 43 | + |
| 44 | + // when parsing JSON we're escaping some html charaters like "&<>", we want to show their |
| 45 | + // original value in the log |
| 46 | + const decode = (str) => { return new DOMParser().parseFromString(str, "text/html").documentElement.textContent; } |
| 47 | + messages.push(decode(printMsg)); |
| 48 | + if (messages.length > MESSAGES_MAX_COUNT) { |
| 49 | + messages.shift(); |
| 50 | + } |
| 51 | + log.textContent = messages.join('\n\n'); |
| 52 | + if (autoscroll.checked) { |
| 53 | + log.scrollTop = log.scrollHeight - log.clientHeight; |
60 | 54 | }
|
61 | 55 | }
|
62 | 56 |
|
63 |
| - $('#form').submit(function(e) { |
64 |
| - e.preventDefault(); |
65 |
| - if (!socket) { |
66 |
| - return false; |
67 |
| - } |
68 |
| - if (!input.val()) { |
69 |
| - return false; |
70 |
| - } |
71 |
| - socket.emit('command', input.val()); |
72 |
| - input.val(''); |
73 |
| - }); |
74 |
| - |
75 |
| - $('#export').click(function() { |
76 |
| - var link = document.createElement('a'); |
77 |
| - link.setAttribute('download', 'agent-log.txt'); |
78 |
| - var text = log.textContent; |
79 |
| - link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); |
80 |
| - link.click(); |
81 |
| - }); |
82 |
| - |
83 |
| - $('#clear').click(function() { |
| 57 | + document.getElementById('form').addEventListener('submit', (e) => { |
| 58 | + e.preventDefault(); |
| 59 | + if (!socket) { |
| 60 | + return false; |
| 61 | + } |
| 62 | + if (!input.value) { |
| 63 | + return false; |
| 64 | + } |
| 65 | + socket.send(input.value) |
| 66 | + input.value = ''; |
| 67 | + }); |
| 68 | + |
| 69 | + document.getElementById('export').addEventListener('click', (e) => { |
| 70 | + let link = document.createElement('a'); |
| 71 | + link.setAttribute('download', 'agent-log.txt'); |
| 72 | + link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(log.textContent)); |
| 73 | + link.click(); |
| 74 | + }); |
| 75 | + |
| 76 | + document.getElementById('clear').addEventListener('click', (e) => { |
84 | 77 | messages = [];
|
85 | 78 | log.innerHTML = '';
|
86 | 79 | });
|
87 | 80 |
|
88 | 81 | if (window['WebSocket']) {
|
89 |
| - if (window.location.protocol === 'https:') { |
90 |
| - socket = io('https://{{$}}') |
91 |
| - } else { |
92 |
| - socket = io('http://{{$}}'); |
93 |
| - } |
94 |
| - socket.on('disconnect', function(evt) { |
95 |
| - appendLog('Connection closed.') |
96 |
| - }); |
97 |
| - socket.on('message', function(evt) { |
98 |
| - appendLog(evt); |
99 |
| - }); |
| 82 | + socket = new WebSocket((window.location.protocol === 'https:') ? 'wss://{{$}}/ws' : 'ws://{{$}}/ws') |
| 83 | + socket.onopen = () => { }; |
| 84 | + socket.onmessage = (message) => { appendLog(message.data) }; |
| 85 | + socket.onclose = () => { appendLog('Connection closed.') }; |
100 | 86 | } else {
|
101 | 87 | appendLog('Your browser does not support WebSockets.')
|
102 | 88 | }
|
103 | 89 |
|
104 |
| - $("#input").focus(); |
105 |
| - }); |
| 90 | + input.focus(); |
| 91 | + }); |
106 | 92 | </script>
|
107 | 93 | <style type="text/css">
|
108 | 94 | html, body {
|
|
0 commit comments