Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 98bc4c8

Browse files
author
Roberto Sora
authoredMar 23, 2020
Merge pull request #538 from sbhklr/sbhklr/ux-improvements
UX Improvements
2 parents ab3d9e5 + 28e2a95 commit 98bc4c8

16 files changed

+5349
-4787
lines changed
 

‎home.html

Lines changed: 186 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,211 @@
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+Mono: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 = [];
17+
var MESSAGES_MAX_COUNT = 2000;
718

8-
var conn;
9-
var msg = $("#msg");
10-
var log = $("#log");
19+
function appendLog(msg) {
20+
var startsWithBracked = msg.indexOf('{') == 0;
21+
var startsWithList = msg.indexOf('list') == 0;
1122

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-
}
23+
if (listenabled.checked || (typeof msg === 'string' && !startsWithBracked && !startsWithList)) {
24+
messages.push(msg);
25+
if (messages.length > MESSAGES_MAX_COUNT) {
26+
messages.shift();
27+
}
28+
log.innerHTML = messages.join('<br>');
29+
if (autoscroll.checked) {
30+
log.scrollTop = log.scrollHeight - log.clientHeight;
31+
}
32+
}
33+
}
2034

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-
});
32-
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))
35+
$('#form').submit(function(e) {
36+
e.preventDefault();
37+
if (!socket) {
38+
return false;
39+
}
40+
if (!input.val()) {
41+
return false;
42+
}
43+
socket.emit('command', input.val());
44+
});
45+
46+
$('#export').click(function() {
47+
var link = document.createElement('a');
48+
link.setAttribute('download', 'agent-log.txt');
49+
var text = log.innerHTML.replace(/<br>/g, '\n');
50+
link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
51+
link.click();
52+
});
53+
54+
$('#clear').click(function() {
55+
messages = [];
56+
log.innerHTML = '';
57+
});
58+
59+
if (window['WebSocket']) {
60+
if (window.location.protocol === 'https:') {
61+
socket = io('https://{{$}}')
62+
} else {
63+
socket = io('http://{{$}}');
64+
}
65+
socket.on('disconnect', function(evt) {
66+
appendLog($('<div><b>Connection closed.</b></div>'))
67+
});
68+
socket.on('message', function(evt) {
69+
appendLog(evt);
70+
});
71+
} else {
72+
appendLog($('<div><b>Your browser does not support WebSockets.</b></div>'))
4073
}
41-
} else {
42-
appendLog($("<div><b>Your browser does not support WebSockets.</b></div>"))
43-
}
44-
});
74+
75+
$("#input").focus();
76+
});
4577
</script>
4678
<style type="text/css">
47-
html {
79+
html, body {
4880
overflow: hidden;
81+
height: 100%;
4982
}
5083

51-
body {
52-
overflow: hidden;
53-
padding: 0;
54-
margin: 0;
55-
width: 100%;
84+
body {
85+
margin: 0px;
86+
padding: 0px;
87+
background: #F8F9F9;
88+
font-size: 16px;
89+
font-family: "Open Sans", "Lucida Grande", Lucida, Verdana, sans-serif;
90+
}
91+
92+
#container {
93+
display: flex;
94+
flex-direction: column;
5695
height: 100%;
57-
background: gray;
96+
width: 100%;
5897
}
5998

6099
#log {
61-
background: white;
62-
margin: 0;
63-
padding: 0.5em 0.5em 0.5em 0.5em;
64-
position: absolute;
65-
top: 0.5em;
66-
left: 0.5em;
67-
right: 0.5em;
68-
bottom: 3em;
69-
overflow: auto;
100+
flex-grow: 1;
101+
font-family: "Roboto Mono", "Courier", "Lucida Grande", Verdana, sans-serif;
102+
background-color: #DAE3E3;
103+
margin: 15px 15px 10px;
104+
padding: 8px 10px;
105+
overflow-y: auto;
70106
}
71107

72-
#form {
73-
padding: 0 0.5em 0 0.5em;
74-
margin: 0;
75-
position: absolute;
76-
bottom: 1em;
77-
left: 0px;
78-
width: 100%;
79-
overflow: hidden;
108+
#footer {
109+
display: flex;
110+
flex-wrap: wrap;
111+
align-items: flex-start;
112+
justify-content: space-between;
113+
margin: 0px 15px 0px;
114+
}
115+
116+
#form {
117+
display: flex;
118+
flex-grow: 1;
119+
margin-bottom: 15px;
120+
}
121+
122+
#input {
123+
flex-grow: 1;
124+
}
125+
126+
#secondary-controls div {
127+
display: inline-block;
128+
padding: 10px 15px;
129+
}
130+
131+
#autoscroll,
132+
#list {
133+
vertical-align: middle;
134+
width: 20px;
135+
height: 20px;
136+
}
137+
138+
139+
#secondary-controls button {
140+
margin-bottom: 15px;
141+
vertical-align: top;
142+
}
143+
144+
.button {
145+
background-color: #b5c8c9;
146+
border: 1px solid #b5c8c9;
147+
border-radius: 2px 2px 0 0;
148+
box-shadow: 0 4px #95a5a6;
149+
margin-bottom: 4px;
150+
color: #000;
151+
cursor: pointer;
152+
font-size: 14px;
153+
letter-spacing: 1.28px;
154+
line-height: normal;
155+
outline: none;
156+
padding: 9px 18px;
157+
text-align: center;
158+
text-transform: uppercase;
159+
transition: box-shadow .1s ease-out, transform .1s ease-out;
160+
}
161+
162+
.button:hover {
163+
box-shadow: 0 2px #95a5a6;
164+
outline: none;
165+
transform: translateY(2px);
166+
}
167+
168+
.button:active {
169+
box-shadow: none;
170+
transform: translateY(4px);
171+
}
172+
173+
.textfield {
174+
background-color: #dae3e3;
175+
width: auto;
176+
height: auto;
177+
padding: 10px 8px;
178+
margin-left: 8px;
179+
vertical-align: top;
180+
border: none;
181+
font-family: "Open Sans", "Lucida Grande", Lucida, Verdana, sans-serif;
182+
font-size: 1em;
183+
outline: none;
80184
}
81185

82186
</style>
83187
</head>
84-
<body>
85-
<div id="log"></div>
86-
<form id="form">
87-
<input type="submit" value="Send" />
88-
<input type="text" id="msg" size="64"/>
89-
</form>
90-
</body>
188+
<body>
189+
<div id="container">
190+
<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>
191+
<div id="footer">
192+
<form id="form">
193+
<input type="submit" class="button" value="Send" />
194+
<input type="text" id="input" class="textfield" />
195+
</form>
196+
<div id="secondary-controls">
197+
<div>
198+
<input name="pause" type="checkbox" checked id="autoscroll" />
199+
<label for="autoscroll">Autoscroll</label>
200+
</div>
201+
<div>
202+
<input name="list" type="checkbox" checked id="list" />
203+
<label for="list">Enable&nbsp;List&nbsp;Command</label>
204+
</div>
205+
<button id="clear" class="button">Clear&nbsp;Log</button>
206+
<button id="export" class="button">Export&nbsp;Log</button>
207+
</div>
208+
</div>
209+
</div>
210+
</body>
91211
</html>

‎icon/icon_hiber.ico

-30.9 KB
Binary file not shown.

‎icon/icon_hiber.png

-1.88 KB
Binary file not shown.

‎icon/icon_linux.png

3.91 KB
Loading

‎icon/icon_linux_hiber.png

7.99 KB
Loading

‎icon/icon_mac.png

-1.49 KB
Loading

‎icon/icon_mac_hiber.png

2.63 KB
Loading

‎icon/icon_mac_light.png

1.34 KB
Loading

‎icon/icon_mac_light_hiber.png

2.64 KB
Loading

‎icon/icon_win.ico

11.8 KB
Binary file not shown.

‎icon/icon_win_hiber.ico

9.44 KB
Binary file not shown.

‎icon/icondarwin.go

Lines changed: 842 additions & 456 deletions
Large diffs are not rendered by default.

‎icon/iconlinux.go

Lines changed: 1109 additions & 289 deletions
Large diffs are not rendered by default.

‎icon/iconwin.go

Lines changed: 3073 additions & 3897 deletions
Large diffs are not rendered by default.

‎main.go

Lines changed: 123 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -340,6 +340,8 @@ const homeTemplateHtml = `<!DOCTYPE html>
340340
<html>
341341
<head>
342342
<title>Arduino Create Agent Debug Console</title>
343+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap" rel="stylesheet">
344+
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,600,700&display=swap" rel="stylesheet">
343345
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
344346
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
345347
<script type="text/javascript">
@@ -350,11 +352,15 @@ const homeTemplateHtml = `<!DOCTYPE html>
350352
var autoscroll = document.getElementById('autoscroll');
351353
var listenabled = document.getElementById('list');
352354
var messages = [];
355+
var MESSAGES_MAX_COUNT = 2000;
353356
354357
function appendLog(msg) {
355-
if (listenabled.checked || (typeof msg === 'string' && msg.indexOf('{') !== 0 && msg.indexOf('list') !== 0)) {
358+
var startsWithBracked = msg.indexOf('{') == 0;
359+
var startsWithList = msg.indexOf('list') == 0;
360+
361+
if (listenabled.checked || (typeof msg === 'string' && !startsWithBracked && !startsWithList)) {
356362
messages.push(msg);
357-
if (messages.length > 2000) {
363+
if (messages.length > MESSAGES_MAX_COUNT) {
358364
messages.shift();
359365
}
360366
log.innerHTML = messages.join('<br>');
@@ -383,6 +389,11 @@ const homeTemplateHtml = `<!DOCTYPE html>
383389
link.click();
384390
});
385391
392+
$('#clear').click(function() {
393+
messages = [];
394+
log.innerHTML = '';
395+
});
396+
386397
if (window['WebSocket']) {
387398
if (window.location.protocol === 'https:') {
388399
socket = io('https://{{$}}')
@@ -397,102 +408,146 @@ const homeTemplateHtml = `<!DOCTYPE html>
397408
});
398409
} else {
399410
appendLog($('<div><b>Your browser does not support WebSockets.</b></div>'))
400-
}
411+
}
412+
413+
$("#input").focus();
401414
});
402415
</script>
403416
<style type="text/css">
404-
html {
417+
html, body {
405418
overflow: hidden;
419+
height: 100%;
406420
}
407421
408-
body {
409-
overflow: hidden;
410-
padding: 0;
411-
margin: 0;
412-
width: 100%;
422+
body {
423+
margin: 0px;
424+
padding: 0px;
425+
background: #F8F9F9;
426+
font-size: 16px;
427+
font-family: "Open Sans", "Lucida Grande", Lucida, Verdana, sans-serif;
428+
}
429+
430+
#container {
431+
display: flex;
432+
flex-direction: column;
413433
height: 100%;
414-
background: #00979d;
415-
font-family: 'Lucida Grande', Lucida, Verdana, sans-serif;
434+
width: 100%;
416435
}
417436
418437
#log {
419-
background: white;
420-
margin: 0;
421-
padding: .5em;
422-
position: absolute;
423-
top: .5em;
424-
left: .5em;
425-
right: .5em;
426-
bottom: 3em;
427-
overflow: auto;
438+
flex-grow: 1;
439+
font-family: "Roboto Mono", "Courier", "Lucida Grande", Verdana, sans-serif;
440+
background-color: #DAE3E3;
441+
margin: 15px 15px 10px;
442+
padding: 8px 10px;
443+
overflow-y: auto;
428444
}
429445
430-
.buttons {
431-
align-items: center;
432-
display: flex;
433-
padding: 0 .5em;
434-
margin: 0;
435-
position: absolute;
436-
bottom: 1em;
437-
left: 0;
438-
width: calc(100% - 1em);
439-
overflow: hidden;
446+
#footer {
447+
display: flex;
448+
flex-wrap: wrap;
449+
align-items: flex-start;
450+
justify-content: space-between;
451+
margin: 0px 15px 0px;
452+
}
453+
454+
#form {
455+
display: flex;
456+
flex-grow: 1;
457+
margin-bottom: 15px;
440458
}
441459
442-
#form {
443-
display: inline-block;
460+
#input {
461+
flex-grow: 1;
444462
}
445463
446-
#export {
447-
float: right;
448-
margin-left: auto;
464+
#secondary-controls div {
465+
display: inline-block;
466+
padding: 10px 15px;
449467
}
450468
451469
#autoscroll,
452470
#list {
453-
margin-left: 2em;
454-
vertical-align: middle;
471+
vertical-align: middle;
472+
width: 20px;
473+
height: 20px;
455474
}
456475
457-
@media screen and (max-width: 950px) {
458-
#form {
459-
max-width: 60%;
460-
}
461476
462-
#input {
463-
max-width: 55%;
464-
}
477+
#secondary-controls button {
478+
margin-bottom: 15px;
479+
vertical-align: top;
465480
}
466-
@media screen and (max-width: 825px) {
467-
.buttons {
468-
flex-direction: column;
469-
}
470481
471-
#log {
472-
bottom: 7em;
473-
}
482+
.button {
483+
background-color: #b5c8c9;
484+
border: 1px solid #b5c8c9;
485+
border-radius: 2px 2px 0 0;
486+
box-shadow: 0 4px #95a5a6;
487+
margin-bottom: 4px;
488+
color: #000;
489+
cursor: pointer;
490+
font-size: 14px;
491+
letter-spacing: 1.28px;
492+
line-height: normal;
493+
outline: none;
494+
padding: 9px 18px;
495+
text-align: center;
496+
text-transform: uppercase;
497+
transition: box-shadow .1s ease-out, transform .1s ease-out;
498+
}
474499
475-
#autoscroll,
476-
#list {
477-
margin-left: 0;
478-
margin-top: .5em;
479-
}
500+
.button:hover {
501+
box-shadow: 0 2px #95a5a6;
502+
outline: none;
503+
transform: translateY(2px);
480504
}
505+
506+
.button:active {
507+
box-shadow: none;
508+
transform: translateY(4px);
509+
}
510+
511+
.textfield {
512+
background-color: #dae3e3;
513+
width: auto;
514+
height: auto;
515+
padding: 10px 8px;
516+
margin-left: 8px;
517+
vertical-align: top;
518+
border: none;
519+
font-family: "Open Sans", "Lucida Grande", Lucida, Verdana, sans-serif;
520+
font-size: 1em;
521+
outline: none;
522+
}
523+
481524
</style>
482525
</head>
483-
<body>
484-
<div id="log"></div>
485-
<div class="buttons">
486-
<form id="form">
487-
<input type="submit" value="Send" />
488-
<input type="text" id="input" size="64"/>
489-
</form>
490-
<div><input name="pause" type="checkbox" checked id="autoscroll"/> Autoscroll</div>
491-
<div><input name="list" type="checkbox" checked id="list"/> Toggle List</div>
492-
<button id="export">Export Log</button>
493-
</div>
494-
</body>
526+
<body>
527+
<div id="container">
528+
<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>
529+
<div id="footer">
530+
<form id="form">
531+
<input type="submit" class="button" value="Send" />
532+
<input type="text" id="input" class="textfield" />
533+
</form>
534+
<div id="secondary-controls">
535+
<div>
536+
<input name="pause" type="checkbox" checked id="autoscroll" />
537+
<label for="autoscroll">Autoscroll</label>
538+
</div>
539+
<div>
540+
<input name="list" type="checkbox" checked id="list" />
541+
<label for="list">Enable&nbsp;List&nbsp;Command</label>
542+
</div>
543+
<button id="clear" class="button">Clear&nbsp;Log</button>
544+
<button id="export" class="button">Export&nbsp;Log</button>
545+
</div>
546+
</div>
547+
</div>
548+
</body>
495549
</html>
550+
496551
`
497552

498553
func parseIni(filename string) (args []string, err error) {

‎trayicon.go

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,9 @@ import (
4747
func setupSysTray() {
4848
runtime.LockOSThread()
4949
if *hibernate == true {
50-
systray.Run(setupSysTrayHibernate,nil)
50+
systray.Run(setupSysTrayHibernate, nil)
5151
} else {
52-
systray.Run(setupSysTrayReal,nil)
52+
systray.Run(setupSysTrayReal, nil)
5353
}
5454
}
5555

@@ -102,10 +102,14 @@ func getConfigs() []ConfigIni {
102102
func setupSysTrayReal() {
103103

104104
systray.SetIcon(icon.GetIcon())
105-
mUrl := systray.AddMenuItem("Go to Arduino Create", "Arduino Create")
106-
mDebug := systray.AddMenuItem("Open debug console", "Debug console")
107105
menuVer := systray.AddMenuItem("Agent version "+version+"-"+git_revision, "")
106+
systray.AddSeparator()
107+
mUrl := systray.AddMenuItem("Go to Arduino Create", "Arduino Create")
108+
mDebug := systray.AddMenuItem("Open Debug Console", "Debug console")
108109
mPause := systray.AddMenuItem("Pause Plugin", "")
110+
systray.AddSeparator()
111+
mQuit := systray.AddMenuItem("Quit Plugin", "")
112+
109113
var mConfigCheckbox []*systray.MenuItem
110114

111115
configs := getConfigs()
@@ -148,11 +152,11 @@ func setupSysTrayReal() {
148152
restart("")
149153
}()
150154

151-
// go func() {
152-
// <-mQuit.ClickedCh
153-
// systray.Quit()
154-
// exit()
155-
// }()
155+
go func() {
156+
<-mQuit.ClickedCh
157+
systray.Quit()
158+
exit()
159+
}()
156160

157161
go func() {
158162
for {
@@ -174,8 +178,9 @@ func setupSysTrayReal() {
174178
func setupSysTrayHibernate() {
175179

176180
systray.SetIcon(icon.GetIconHiber())
177-
mOpen := systray.AddMenuItem("Open Plugin", "")
178-
mQuit := systray.AddMenuItem("Kill Plugin", "")
181+
mOpen := systray.AddMenuItem("Resume Plugin", "")
182+
systray.AddSeparator()
183+
mQuit := systray.AddMenuItem("Quit Plugin", "")
179184

180185
go func() {
181186
<-mOpen.ClickedCh

0 commit comments

Comments
 (0)
Please sign in to comment.