Skip to content

Commit 75f4cf4

Browse files
microbit-henrymicrobit-carlos
microbit-henry
authored and
microbit-carlos
committed
WebUSB: Buttons visible in all browsers (#226)
Also updates the WebUSB error modal styling.
1 parent 191d07e commit 75f4cf4

File tree

6 files changed

+169
-35
lines changed

6 files changed

+169
-35
lines changed

‎editor.html‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,7 @@ <h2><i class="fa fa-unlock-alt"></i> <strong>{{ title }}</strong></h2>
180180
</div>
181181
<div class="roundlabel">Download</div>
182182
</a>
183-
<a href="#" class="roundbutton action hidden" id="command-connect"
183+
<a href="#" class="roundbutton action" id="command-connect"
184184
tabindex="20"
185185
title="Connect to your micro:bit">
186186
<div class="roundsymbol">
@@ -198,7 +198,7 @@ <h2><i class="fa fa-unlock-alt"></i> <strong>{{ title }}</strong></h2>
198198
</div>
199199
<div class="roundlabel">Load/Save</div>
200200
</a>
201-
<a href="#" class="roundbutton action hidden" id="command-serial"
201+
<a href="#" class="roundbutton action" id="command-serial"
202202
tabindex="40"
203203
title="Connect to your micro:bit via serial">
204204
<div class="roundsymbol">
@@ -327,8 +327,8 @@ <h2><i class="fa fa-unlock-alt"></i> <strong>{{ title }}</strong></h2>
327327
<div id="blockly"></div>
328328
<div id="editor" class="flex3" tabindex="-1"></div>
329329
</div>
330-
<div id="flashing-overlay-container">
331-
<div id="flashing-overlay">
330+
<div id="flashing-overlay-container" class="modal-overlay-container">
331+
<div id="flashing-overlay" class="modal-overlay">
332332
<div id="flashing-info">
333333
<h2 id="flashing-text">Flashing micro:bit</h2>
334334
<div id="webusb-flashing-loader"></div>
@@ -339,6 +339,16 @@ <h2 id="flashing-text">Flashing micro:bit</h2>
339339
<div id="flashing-overlay-error"></div>
340340
</div>
341341
</div>
342+
<div id="modal-msg-overlay-container" class="modal-overlay-container modal-msg-overlay-container">
343+
<div id="modal-msg-overlay" class="modal-overlay">
344+
<a class="vex-close" id="modal-msg-close" onclick="$('#modal-msg-overlay-container').hide()"></a>
345+
<div>
346+
<h2 id="modal-msg-title"></h2>
347+
<div id="modal-msg-content"></div>
348+
<div id="modal-msg-links" class="modal-msg-links"></div>
349+
</div>
350+
</div>
351+
</div>
342352
<script src="ace/ace.js" type="application/javascript"
343353
charset="utf-8"></script>
344354
<script src="ace/ext-language_tools.js" type="application/javascript"

‎lang/en.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,9 @@ var language = {
9292
'clear-connect': 'Another process is connected to this device.<br>Close any other tabs that may be using WebUSB (e.g. MakeCode, Python Editor), or unplug and replug the micro:bit before trying again.',
9393
'reconnect-microbit': 'Please reconnect your micro:bit and try again.',
9494
'partial-flashing-disable': 'If the errors persist, try disabling partial flashing in the beta options.',
95-
'device-disconnected': 'Device disconnected.'
95+
'device-disconnected': 'Device disconnected.',
96+
'unavailable': 'With WebUSB you can program your micro:bit and connect to the serial console directly from the online editor.<br/>Unfortunately, WebUSB is not supported in this browser. We recommend Chrome, or a Chrome-based browser to use WebUSB.',
97+
'find-more': 'Find Out More'
9698
},
9799
'close': 'Close',
98100
'request-repl': 'Send CTRL-C for REPL',

‎lang/es.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,9 @@ var language = {
9292
'clear-connect': 'Hay otro proceso conectado a este dispositivo.<br>Cierre cualquier otra pestaña que pueda estar usando WebUSB (por ejemplo, MakeCode or Editor de Python), o desconecte y vuelva a conectar el micro:bit antes de volver a intentarlo.',
9393
'reconnect-microbit': 'Por favor reconecta el micro:bit e intentalo de nuevo.',
9494
'partial-flashing-disable': 'Si el error persiste, intenta deshabilitar el flasheo parcial en las opciones beta.',
95-
'device-disconnected': 'Dispositivo desconectado.'
95+
'device-disconnected': 'Dispositivo desconectado.',
96+
'unavailable': 'Con WebUSB puedes programar tu micro: bit y conectarte a la consola de serie directamente desde el Editor de Python.<br/>Desafortunadamente, WebUSB no es compatible con este navegador. Recomendamos Chrome o un navegador basado en Chrome para usar WebUSB.',
97+
'find-more': 'Saber más'
9698
},
9799
'close': 'Cerrar',
98100
'request-repl': 'Envia CTRL-C para el REPL',

‎lang/pl.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,9 @@ var language = {
9292
'clear-connect': 'Inny proces jest podłączony do tego urządzenia.<br> Zamknij wszystkie inne okna które mogą korzystać z WebUSB (np. MakeCode, Python Editor), lub odłącz i ponownie podłącz micro: bit przed ponowną próbą.',
9393
'reconnect-microbit': 'Please reconnect your micro:bit and try again.',
9494
'partial-flashing-disable': 'If the errors persist, try disabling partial flashing in the beta options.',
95-
'device-disconnected': 'Device disconnected.'
95+
'device-disconnected': 'Device disconnected.',
96+
'unavailable': 'With WebUSB you can program your micro:bit and connect to the serial console directly from the online editor.<br/>Unfortunately, WebUSB is not supported in this browser. We recommend Chrome, or a Chrome-based browser to use WebUSB.',
97+
'find-more': 'Find Out More'
9698
},
9799
'close': 'Zamknij',
98100
'request-repl': 'Send CTRL-C for REPL',

‎python-main.js‎

Lines changed: 63 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -470,8 +470,6 @@ function web_editor(config) {
470470
script('static/js/dap.umd.js');
471471
script('static/js/hterm_all.js');
472472
script('partial-flashing.js');
473-
$("#command-connect").removeClass('hidden');
474-
$("#command-serial").removeClass('hidden');
475473
}
476474
}
477475

@@ -1130,6 +1128,11 @@ function web_editor(config) {
11301128
$("#flashing-overlay-container").css("display", "flex");
11311129
$("#flashing-info").addClass('hidden');
11321130

1131+
// We might get Error objects as Promise rejection arguments
1132+
if (!err.message && err.promise && err.reason) {
1133+
err = err.reason;
1134+
}
1135+
11331136
// If micro:bit does not support dapjs
11341137
var errorType;
11351138
var errorDescription;
@@ -1153,16 +1156,20 @@ function web_editor(config) {
11531156

11541157
// Show error message
11551158
$("#flashing-overlay-error").html(
1156-
'<div>' + ((err.message === undefined) ? "WebUSB Error" : err.message) + '<br >' +
1159+
'<div>' +
1160+
'<strong>' + ((err.message === undefined) ? "WebUSB Error" : err.message) + '</strong><br>' +
11571161
errorDescription +
1158-
(err.name === 'device-disconnected'
1159-
? ""
1160-
: '<br ><a href="#" id="flashing-overlay-download">' +
1161-
config["translate"]["webusb"]["download"] +
1162-
'</a> | ') +
1163-
'<a href="#" onclick="flashErrorClose()">' +
1164-
config["translate"]["webusb"]["close"] +
1165-
'</a>'
1162+
'<div class="modal-msg-links">' +
1163+
(err.name === 'device-disconnected'
1164+
? ""
1165+
: '<br ><a href="#" id="flashing-overlay-download">' +
1166+
config["translate"]["webusb"]["download"] +
1167+
'</a> | ') +
1168+
'<a href="#" onclick="flashErrorClose()">' +
1169+
config["translate"]["webusb"]["close"] +
1170+
'</a>' +
1171+
'</div>' +
1172+
'</div>'
11661173
);
11671174

11681175
// Attach download handler
@@ -1392,6 +1399,24 @@ function web_editor(config) {
13921399
REPL.prefs_.set('font-size', getFontSize());
13931400
}
13941401

1402+
function modalMsg(title, content, links){
1403+
var overlayContainer = "#modal-msg-overlay-container";
1404+
$(overlayContainer).css("display", "flex");
1405+
$("#modal-msg-title").text(title);
1406+
$("#modal-msg-content").html(content);
1407+
if (links) {
1408+
var modalLinks = [];
1409+
Object.keys(links).forEach(function(key) {
1410+
if (links[key] === "close") {
1411+
modalLinks.push('<a href="#" onclick = "$(\'' + overlayContainer + '\').hide()">Close</a>');
1412+
} else {
1413+
modalLinks.push('<a href="' + links[key] + '" target="_blank">' + key + '</a>');
1414+
}
1415+
});
1416+
$("#modal-msg-links").html((modalLinks).join(' | '));
1417+
}
1418+
}
1419+
13951420
function formatMenuContainer(parentButtonId, containerId) {
13961421
var container = $('#' + containerId);
13971422
if (container.is(':visible')) {
@@ -1434,16 +1459,33 @@ function web_editor(config) {
14341459
$("#command-share").click(function () {
14351460
doShare();
14361461
});
1437-
$("#command-connect").click(function () {
1438-
if ($("#command-connect").length) {
1439-
doConnect();
1440-
} else {
1441-
doDisconnect();
1442-
}
1443-
});
1444-
$("#command-serial").click(function () {
1445-
doSerial();
1446-
});
1462+
if (navigator.usb) {
1463+
$("#command-connect").click(function () {
1464+
if ($("#command-connect").length) {
1465+
doConnect();
1466+
} else {
1467+
doDisconnect();
1468+
}
1469+
});
1470+
$("#command-serial").click(function () {
1471+
doSerial();
1472+
});
1473+
} else {
1474+
var WebUSBUnavailable = function() {
1475+
var links = {};
1476+
links[config['translate']['webusb']['err']['find-more']] = 'help.html#WebUSB';
1477+
modalMsg('WebUSB', config['translate']['webusb']['err']['unavailable'], links);
1478+
};
1479+
$("#command-connect").click(WebUSBUnavailable);
1480+
$("#command-serial").click(WebUSBUnavailable);
1481+
1482+
$("#modal-msg-overlay-container").click(function(){
1483+
$("#modal-msg-overlay-container").hide()
1484+
});
1485+
$("#modal-msg-overlay").click(function(e){
1486+
e.stopPropagation();
1487+
});
1488+
}
14471489
$("#request-repl").click(function () {
14481490
var daplink = usePartialFlashing && window.dapwrapper ? window.dapwrapper.daplink : window.daplink;
14491491
daplink.serialWrite("\x03");

‎static/css/style.css‎

Lines changed: 83 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -308,6 +308,43 @@ body.hasFota .notfota {
308308
display: none;
309309
}
310310

311+
.modal{
312+
display: none;
313+
position: fixed;
314+
z-index: 101;
315+
left: 0;
316+
top: 0;
317+
width: 100%;
318+
height: 100%;
319+
overflow: auto;
320+
background: rgb(0,0,0);
321+
background-color: rgba(0,0,0,0.4);
322+
}
323+
324+
.modal-content{
325+
background-color: #f2f2f2;
326+
margin: 10% auto;
327+
padding: 10px;
328+
padding-left: 20px;
329+
border: 2px solid #FFCC33;
330+
width: 80%;
331+
border-radius: 7px;
332+
}
333+
334+
.close{
335+
color: #aaa;
336+
float: right;
337+
font-size: 28px;
338+
font-weight: bold;
339+
}
340+
341+
.close:hover,
342+
.close:focus{
343+
color: black;
344+
text-decoration: none;
345+
cursor: pointer;
346+
}
347+
311348
/* Misc */
312349
a.command, a.command:visited {
313350
color: black;
@@ -598,7 +635,7 @@ input:checked + .menu-switch-slider:before {
598635

599636

600637
/* WebUSB */
601-
#flashing-overlay-container {
638+
.modal-overlay-container {
602639
position: absolute;
603640
background-color: rgba(255,255,255,0.6);
604641
margin: auto auto;
@@ -607,16 +644,55 @@ input:checked + .menu-switch-slider:before {
607644
z-index: 99;
608645
justify-content: center;
609646
align-items: center;
610-
text-align: center;
611647
display: none;
612-
line-height: 30px;
648+
line-height: 25px;
649+
font-family: "Segoe UI Light","Segoe UI","Segoe WP Light","Segoe WP","HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",sans-serif;
613650
}
614651

615-
#flashing-overlay {
652+
.modal-msg-overlay-container {
653+
text-align: left;
654+
655+
}
656+
657+
.modal-overlay {
616658
background: white;
617-
padding: 1rem;
618-
border-radius: 6px;
619-
border: #febf2e 6px solid;
659+
padding: 2em;
660+
font-size: 1rem;
661+
margin: 0 auto;
662+
border: 6px solid #FFCC33;
663+
border-radius: 15px;
664+
}
665+
666+
#modal-msg-title{
667+
color:#336699;
668+
font-weight: bold;
669+
670+
}
671+
.modal-overlay-container #modal-msg-close{
672+
color:#336699;
673+
content: "\00D7";
674+
height: 80px;
675+
width: 80px;
676+
text-align: right;
677+
font-size: 40px;
678+
float:right;
679+
cursor: pointer;
680+
font-weight: normal;
681+
top: -10px;
682+
}
683+
684+
#modal-msg-close:hover{
685+
color:#febf2e;
686+
}
687+
688+
.modal-msg-links {
689+
text-align: center;
690+
padding-top: 10px;
691+
line-height: 1rem;
692+
}
693+
694+
.modal-msg-links a {
695+
padding: 0px 10px;
620696
}
621697

622698
#serial-buttons {

0 commit comments

Comments
 (0)