WebUSB: Change Download/Flash and Connect/Disconnect buttons and improve actions (#261)

microbit-sam · microbit-carlos · commit 9a006becfc9d · 2019-10-10T17:34:25.000+01:00
diff --git a/editor.html b/editor.html
@@ -186,6 +186,16 @@ <h2><i class="fa fa-unlock-alt"></i> <strong>{{ title }}</strong></h2>
                     </div>
                     <div class="roundlabel">Download</div>
                 </a>
+                <a href="#" class="roundbutton action" id="command-flash"
+                    tabindex="11"
+                    title="Download a hex file to flash onto your micro:bit">
+                    <div class="roundsymbol">
+                        <svg class="svg svg-icon-touchdevelop" viewBox="50 50 380 380" xmlns="http://www.w3.org/2000/svg" role="presentation" aria-label="download">
+                            <path d="m 185.96612,110.36806 41.029,41.029 0,-72.834699 27.352,0 0.001,72.834699 41.029,-41.029 0,31.911 -54.706,54.706 -54.705,-54.706 0,-31.911 z m 98.203,181.9 c 0,-9.128 7.406,-16.539 16.541,-16.539 9.146,0 16.535,7.411 16.535,16.539 0,9.131 -7.389,16.548 -16.535,16.548 -9.135,0 -16.541,-7.417 -16.541,-16.548 z m -121.494,0.003 c 0,-9.129 7.413,-16.542 16.548,-16.542 9.129,0 16.537,7.413 16.537,16.542 0,9.131 -7.408,16.547 -16.537,16.547 -9.135,0 -16.548,-7.416 -16.548,-16.547 z m 16.544,-81.93 122.554,0.202 c 45.667,0 82.285,36.553 82.285,81.732 0,45.179 -36.757,81.934 -81.937,81.934 l -122.902,0 c -45.177,0 -81.934395,-36.755 -81.934395,-81.934 0,-45.179 36.757395,-81.934 81.934395,-81.934 z m -49.164,81.934 c 0,27.105 22.059,49.164 49.164,49.164 l 122.902,0 c 27.107,0 49.159,-22.059 49.159,-49.164 0,-27.112 -22.052,-49.164 -49.159,-49.164 l -122.902,0 c -27.105,0 -49.164,22.052 -49.164,49.164 z" id="path3341" inkscape:connector-curvature="0" style="fill:currentColor"></path>
+                        </svg>
+                    </div>
+                    <div class="roundlabel">Flash</div>
+                </a>
                 <a href="#" class="roundbutton action" id="command-connect"
                     tabindex="20"
                     title="Connect to your micro:bit">
@@ -196,6 +206,16 @@ <h2><i class="fa fa-unlock-alt"></i> <strong>{{ title }}</strong></h2>
                     </div>
                     <div class="roundlabel">Connect</div>
                 </a>
+                <a href="#" class="roundbutton action" id="command-disconnect"
+                    tabindex="21"
+                    title="Disconnect your micro:bit">
+                    <div class="roundsymbol">
+                        <svg class="svg svg-icon-touchdevelop" viewBox="50 50 380 380" xmlns="http://www.w3.org/2000/svg" role="presentation" aria-label="disconnect">
+                            <path d="m 295.37672,362.40336 -41.029,-41.029 0,72.8347 -27.352,0 -0.001,-72.8347 -41.029,41.029 0,-31.911 34.68462,-34.68462 20.02138,-20.02138 54.705,54.706 z m -98.203,-181.9 c 0,9.128 -7.406,16.539 -16.541,16.539 -9.146,0 -16.535,-7.411 -16.535,-16.539 0,-9.131 7.389,-16.548 16.535,-16.548 9.135,0 16.541,7.417 16.541,16.548 z m 121.494,-0.003 c 0,9.129 -7.413,16.542 -16.548,16.542 -9.129,0 -16.537,-7.413 -16.537,-16.542 0,-9.131 7.408,-16.547 16.537,-16.547 9.135,0 16.548,7.416 16.548,16.547 z m -16.544,81.93 -122.554,-0.202 c -45.667,0 -82.284997,-36.553 -82.284997,-81.732 0,-45.179 36.756997,-81.934 81.936997,-81.934 l 122.902,0 c 45.177,0 81.9344,36.755 81.9344,81.934 0,45.179 -36.7574,81.934 -81.9344,81.934 z m 49.164,-81.934 c 0,-27.105 -22.059,-49.164 -49.164,-49.164 l -122.902,0 c -27.107,0 -49.159,22.059 -49.159,49.164 0,27.112 22.052,49.164 49.159,49.164 l 122.902,0 c 27.105,0 49.164,-22.052 49.164,-49.164 z" id="path3342" inkscape:connector-curvature="0" style="fill:currentColor" sodipodi:nodetypes="cccccccccccssssssssssccsssscsssssss" />
+                        </svg>
+                    </div>
+                    <div class="roundlabel">Disconnect</div>
+                </a>
                 <a href="#" class="roundbutton action" id="command-files"
                     tabindex="30"
                     title="Load/Save files">
diff --git a/partial-flashing.js b/partial-flashing.js
@@ -634,7 +634,18 @@ let PartialFlashing = {
         dapwrapper.daplink.on(DAPjs.DAPLink.EVENT_PROGRESS, function(progress) {
             $("#webusb-flashing-progress").val(progress).css("display", "inline-block");
         });
-        return dapwrapper.daplink.flash(image);
+        return dapwrapper.transport.open()
+                    .then(() => { return dapwrapper.daplink.flash(image) } )
+                    .then(() => {
+                        // Send event
+                        var details = {
+                                "flash-type": "partial-flash",
+                                "event-type": "info",
+                                "message": "full-flash-successful"
+                        };
+
+                        document.dispatchEvent(new CustomEvent('webusb', { detail: details }));
+                    } );
     },
 
     // Connect to the micro:bit using WebUSB and setup DAPWrapper.
@@ -707,6 +718,14 @@ let PartialFlashing = {
             // Fall back to full flash if attempting to reset times out.
             if (err === "Timeout") {
                 PartialFlashingUtils.log("Partial flashing failed. Attempting Full Flash");
+                // Send event
+                var details = {
+                        "flash-type": "partial-flash",
+                        "event-type": "error",
+                        "message": "flash-failed" + "/" + "attempting-full-flash"
+                };
+
+                document.dispatchEvent(new CustomEvent('webusb', { detail: details }));
                 return this.fullFlashAsync(dapwrapper, image);
             }
             return Promise.reject(err);
diff --git a/python-main.js b/python-main.js
@@ -1243,14 +1243,12 @@ function web_editor(config) {
 
         return p.then(function() {
             // Change button to disconnect
-            $("#command-connect").attr("id", "command-disconnect");
-            $("#command-disconnect > .roundlabel").text(config["translate"]["static-strings"]["buttons"]["command-disconnect"]["label"]);
-            $("#command-disconnect").attr("title", config["translate"]["static-strings"]["buttons"]["command-disconnect"]["title"]);
+            $("#command-connect").hide();
+            $("#command-disconnect").show();
 
             // Change download to flash
-            $("#command-download").attr("id", "command-flash");
-            $("#command-flash > .roundlabel").text(config["translate"]["static-strings"]["buttons"]["command-flash"]["label"]);
-            $("#command-flash").attr("title", config["translate"]["static-strings"]["buttons"]["command-flash"]["title"]);
+            $("#command-download").hide();
+            $("#command-flash").show();
 
             if (serial) {
                 doSerial();
@@ -1307,10 +1305,10 @@ function web_editor(config) {
                     errorDescription + '</div>' + '<div class="flashing-overlay-buttons"><hr />' +
                     ((err.name === 'device-disconnected' && $("#flashing-overlay-error").html() === "")
                             ?  ""
-                            : '<a href="#" id="flashing-overlay-download">' +
+                            : '<a href="#" id="flashing-overlay-download" class="action" onclick="actionClickListener(event)">' +
                               config["translate"]["webusb"]["download"] + 
                               '</a> | ' +
-                              '<a href="https://support.microbit.org/a/solutions/articles/19000105428-webusb-troubleshooting/en" id="flashing-overlay-troubleshoot">' +
+                              '<a href="https://support.microbit.org/a/solutions/articles/19000105428-webusb-troubleshooting/en" id="flashing-overlay-troubleshoot" class="action" onclick="actionClickListener(event)">' +
                               config["translate"]["webusb"]["troubleshoot"] + 
                               '</a> | ') +
                     '<a href="#" onclick="flashErrorClose()">' +
@@ -1329,7 +1327,13 @@ function web_editor(config) {
         $("#flashing-overlay-download").click(doDownload);
 
         // Send event
-        var details = {"flash-type": (usePartialFlashing ? "partial-flash" : "full-flash"), "event-type": "error", "message": errorType};
+        // Append error message, replace all special chars with '-', if last char is '-' remove it
+        var details = {
+                "flash-type": (usePartialFlashing ? "partial-flash" : "full-flash"), 
+                "event-type": ((err.name == "device-disconnected") ? "info" : "error"), 
+                "message": errorType + "/" + err.message.replace(/\W+/g, '-').replace(/\W$/, '').toLowerCase()
+        };
+
         document.dispatchEvent(new CustomEvent('webusb', { detail: details }));
     }
 
@@ -1352,14 +1356,12 @@ function web_editor(config) {
         REPL = null;
 
         // Change button to connect
-        $("#command-disconnect").attr("id", "command-connect");
-        $("#command-connect > .roundlabel").text(config["translate"]["static-strings"]["buttons"]["command-connect"]["label"]);
-        $("#command-connect").attr("title", config["translate"]["static-strings"]["buttons"]["command-connect"]["title"]);
+        $("#command-disconnect").hide();
+        $("#command-connect").show();
 
         // Change flash to download
-        $("#command-flash").attr("id", "command-download");
-        $("#command-download > .roundlabel").text(config["translate"]["static-strings"]["buttons"]["command-download"]["label"]);
-        $("#command-download").attr("title", config["translate"]["static-strings"]["buttons"]["command-download"]["title"]);
+        $("#command-flash").hide();
+        $("#command-download").show();
 
         var p = Promise.resolve();
 
@@ -1388,9 +1390,6 @@ function web_editor(config) {
     function doFlash() {
         var startTime = new Date().getTime();
         
-        // Listen for unhandled rejections in DAPjs
-        window.addEventListener("unhandledrejection", webusbErrorHandler);
-
         // Hide serial and disconnect if open
         if ($("#repl").css('display') != 'none') {
             $("#repl").hide();
@@ -1508,7 +1507,7 @@ function web_editor(config) {
         }
 
         // Check if we need to connect
-        if ($("#command-connect").length){
+        if ($("#command-connect").is(":visible")){
             doConnect(true);
         } else {
             // Change Serial button to close
@@ -1614,11 +1613,10 @@ function web_editor(config) {
     // handling what to do when they're clicked.
     function setupButtons() {
         $("#command-download").click(function () {
-            if ($("#command-download").length) {
-                doDownload();
-            } else {
-                doFlash();
-            }
+            doDownload();
+        });
+        $("#command-flash").click(function () {
+            doFlash();
         });
         $("#command-files").click(function () {
             doFiles();
@@ -1634,11 +1632,10 @@ function web_editor(config) {
         });
         if (navigator.usb) {
             $("#command-connect").click(function () {
-                if ($("#command-connect").length) {
-                    doConnect();
-                } else {
-                    doDisconnect();
-                }
+                doConnect();
+            });
+            $("#command-disconnect").click(function () {
+                doDisconnect();
             }); 
             $("#command-serial").click(function () {
                 doSerial();
diff --git a/static/css/style.css b/static/css/style.css
@@ -1034,3 +1034,12 @@ ul.tree li:last-child:before {
   display:none;
   margin-bottom: 10px;
 }
+
+/* Hide disconnect initially */
+#command-disconnect {
+  display: none;
+}
+
+#command-flash {
+  display: none;
+}
