Tweaked the UI

back-end/prepare_binaries.js

@@ -27,7 +27,7 @@ function prepareBinaries(manifest, callback) {
                     display: `Extracting ${fileName}`,
                     stage: "start"
                 });
-            
+
                 let body;
                 entry.on("data", function(data){
                     if(body) {
@@ -47,7 +47,6 @@ function prepareBinaries(manifest, callback) {
                 entry.autodrain();
             }
         }).on("close", () => {
-            console.log("close");
             callback(null, flashContents);
         });
         response.on("error", callback);

front-end/css/style.css

@@ -18,6 +18,7 @@ button {
 	padding: 10px 20px 10px 20px;
 	text-decoration: none;
 	border:0;
+    width: 100%;
 }
 
 button:disabled {
@@ -36,10 +37,8 @@ button:hover:disabled {
     color: #aaa
 }
 
-
-
 label {
-	width: 215px;
+	width: 180px;
 	display: inline-block;
 }
 
@@ -63,24 +62,28 @@ footer span {
 	position: relative;
 }
 
+#progressBar {
+    display:none;
+}
+
 #progress {
 	width: 0;
 }
 
 #form div {
-	margin-bottom: 10px;
+	margin-bottom: 30px;
 	text-align: center;
 }
 #form label {
-	text-align: left;
+	text-align: right;
 }
 /*
 * https://css-tricks.com/examples/ProgressBars/
 */
 .meter {
-	height: 20px;  /* Can be anything */
+	height: 40px;  /* Can be anything */
 	position: relative;
-	margin: 60px 0 20px 0; /* Just for demo spacing */
+	margin: 40px 0 20px 0; /* Just for demo spacing */
 	background: #555;
 	border-radius: 25px;
 	padding: 10px;
@@ -145,6 +148,5 @@ footer span {
 
 .nostripes > span > span, .nostripes > span:after {
 	-webkit-animation: none;
-	-moz-animation: none;
 	background-image: none;
 }

front-end/index.html

@@ -25,7 +25,7 @@
         </button>
     </div>
 </div>
-<div class="meter animate">
+<div id="progressBar" class="meter animate">
     <span id="progress"><span></span></span>
 </div>
 

front-end/js/app.js

@@ -36,7 +36,9 @@ const flashButton = $("flash-button");
 const appStatus = $("status");
 const portsSelect = new PortSelect($("ports"));
 const manifestsSelect = $("manifests");
+const progressHolder = $("progressBar");
 const progressBar =  $("progress");
+const form = $("form");
 
 /************************
  * Utility Functions
@@ -98,6 +100,8 @@ serialScanner.on("error", onError);
  * Updates UI to say it's ready
  */
 function readyToFlash() {
+    progressHolder.style.display = "none";
+    form.style.display = "block";
     appStatus.textContent = "Ready";
     enableInputs();
 }
@@ -151,26 +155,27 @@ function getManifests() {
 }
 
 function flashWithManifest(manifest) {
+    form.style.display = "none";
+    progressHolder.style.display = "block";
     appStatus.textContent = `Flashing ${portsSelect.value}`;
     const numberOfSteps = manifest.flash.length * 2;
-    let currectStepNumber = 0;
+    let currectStepNumber = 1;
     prepareBinaries(manifest, (err, flashSpec) => {
         if(err) throw err;
 
         const esp = new RomComm({
             portName: portsSelect.value,
-            baudRate: 115200,
+            baudRate: 115200
         });
 
         esp.on('progress', (progress) => {
-            applicationCache.textContent = progress.display;
-            const progressPercent = Math.round((progress.details.flashedBytes/progress.details.totalBytes) * 100);
-            updateProgressBar(progressPercent);
+            appStatus.textContent = progress.display;
+            const progressPercent = Math.round((progress.details.flashedBytes/progress.details.totalBytes) * 50);
+            updateProgressBar(50 + progressPercent);
         });
 
         esp.open().then((result) => {
-            appStatus.textContent = `Flashing ${portsSelect.value}...Opened Port.`;
-            updateProgressBar(0);
+            appStatus.textContent = `Flashing device connected to ${portsSelect.value}`;
             let promise = Promise.resolve();
             return esp.flashSpecifications(flashSpec)
                 .then(() => esp.close())
@@ -180,10 +185,13 @@ function flashWithManifest(manifest) {
                     log.info("Flashed to latest Espruino build!", result);
                 });
         }).catch((error) => {
+            new Notification("An error occured during flashing.");
+            readyToFlash();
             log.error("Oh noes!", error);
         });
     }).on("entry", (progress) => {
-        const percent = Math.round((currectStepNumber++/numberOfSteps) * 100);
+        //For the download progress. The other half is flashing.
+        const percent = Math.round((currectStepNumber++/numberOfSteps) * 50);
         updateProgressBar(percent);
         appStatus.textContent = progress.display;
     });

index.js

@@ -23,10 +23,10 @@ app.on('window-all-closed', function() {
 app.on('ready', function() {
   // Create the browser window.
   mainWindow = new BrowserWindow({
-    width: 450,
-    height: 160,
-    'min-width': 450,
-    'min-height': 160,
+    width: 520,
+    height: 300,
+    'min-width': 520,
+    'min-height': 300,
     'accept-first-mouse': true
   });