Startseite Erkunden Hilfe
Registrieren Anmelden
oleg
/
flasher.js
Mirror von https://github.com/thingsSDK/flasher.js.git
1
0
Fork 0
Dateien Issues 0 Wiki
Quellcode durchsuchen

New progress 'bar'

Andrew Chalkley vor 9 Jahren
Ursprung
f5bcb2c420
Commit
423eb5112b
4 geänderte Dateien mit 80 neuen und 40 gelöschten Zeilen
Gesamtansicht Diff-Statistik anzeigen
  1. 1 1
      front-end/css/style.css
  2. 0 23
      front-end/images/logo.svg
  3. 24 6
      front-end/index.html
  4. 55 10
      front-end/js/app.js

+ 1 - 1
front-end/css/style.css
Datei anzeigen 

@@ -57,7 +57,7 @@ footer {
 
 	width: 500px;
 
 	width: 500px;
 
 }
 
 }
 
 
 
-#logo img {
 
+#logo svg {
 
 	width:180px;
 
 	width:180px;
 
 }
 
 }

+ 0 - 23
front-end/images/logo.svg
Datei anzeigen 

@@ -1,23 +0,0 @@
 
-<?xml version="1.0" encoding="utf-8"?>
 
-<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 
-	 viewBox="0 0 180 180" style="enable-background:new 0 0 180 180;" xml:space="preserve">
 
-<style type="text/css">
 
-	.st0{fill:none;stroke:url(#SVGID_1_);stroke-width:2.7653;stroke-miterlimit:10;}
 
-	.st1{fill:none;stroke:#FFAB91;stroke-width:2.7653;stroke-miterlimit:10;}
 
-	.st2{fill:none;stroke:#FFD600;stroke-width:2.7653;stroke-miterlimit:10;}
 
-</style>
 
-<g>
 
-	<title>Flasherjs</title>
 
-	
-		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="49.358" y1="145.223" x2="127.8842" y2="145.223" gradientTransform="matrix(1 0 0 1 0 -55.223)">
 
-		<stop  offset="0" style="stop-color:#FFAB91"/>
 
-		<stop  offset="1" style="stop-color:#FFD600"/>
 
-	</linearGradient>
 
-	<polyline class="st0" points="52.1,27.5 62.6,27.5 51,92.5 56.5,92.5 72.3,4 77.8,4 62.1,92.5 67.6,92.5 78.4,37.7 83.9,37.7 
-		73.1,92.5 78.7,92.5 85.9,55.4 91.4,55.4 69.3,176 74.8,176 91.4,87.5 96.9,87.5 84.5,153.9 90,153.9 102.4,87.5 108,87.5 
-		99.7,136.2 105.2,136.2 113.5,87.5 119,87.5 116.8,99.4 127.9,99.4"/>
 
-	<circle class="st1" cx="48.8" cy="27.5" r="3.3"/>
 
-	<circle class="st2" cx="131.2" cy="99.7" r="3.3"/>
 
-</g>
 
-</svg>

+ 24 - 6
front-end/index.html
Datei anzeigen 

@@ -8,7 +8,29 @@
 
 <body>
 
 <body>
 
     <div id="app">
 
     <div id="app">
 
         <div id="logo">
 
         <div id="logo">
 
-            <img src="images/logo.svg">
 
+            <svg version="1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 
+     viewBox="0 0 180 180" style="enable-background:new 0 0 180 180;" xml:space="preserve">
 
+        <style type="text/css">
 
+            .st0{fill:none;stroke:url(#SVGID_1_);stroke-width:3;stroke-miterlimit:10;}
 
+            .st1{fill:none;stroke:#FFAB91;stroke-width:3;stroke-miterlimit:10;}
 
+            .st2{fill:none;stroke:#FFD600;stroke-width:3;stroke-miterlimit:10;}
 
+            .bg{fill:none;stroke:#EEEEEE;stroke-width:3;stroke-miterlimit:10;}
 
+        </style>
 
+        <g>
 
+            <title>Flasherjs</title>
 
+
 
+        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="49" y1="145" x2="128" y2="145" gradientTransform="matrix(1 0 0 1 0 -55)">
 
+            <stop  offset="0" style="stop-color:#FFAB91"/>
 
+            <stop  offset="1" style="stop-color:#FFD600"/>
 
+        </linearGradient>
 
+
 
+        <polyline class="st0" points="52,28 63,28 51,93 57,93 72,4 78,4 62,93 68,93 78,38 84,38
 
+        73,93 79,93 86,55 91,55 69,176 75,176 91,88 97,88 85,154 90,154 102,88 108,88
 
+        100,136 105,136 114,88 119,88 117,99 128,99"/>
 
+        <circle class="st1" cx="49" cy="28" r="3"/>
 
+        <circle class="st2" cx="131" cy="100" r="3"/>
 
+        </g>
 
+        </svg>
 
         </div>
 
         </div>
 
         <div id="form">
 
         <div id="form">
 
             <div class="field">
 
             <div class="field">
 
@@ -30,11 +52,7 @@
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
-
 
-    <div id="progressBar" class="meter animate">
 
-        <span id="progress"><span></span></span>
 
-    </div>
 
-
 
+    
     <footer><span id="status"></span></footer>
 
     <footer><span id="status"></span></footer>
 
 
 
     <!-- Javascript -->
 
     <!-- Javascript -->

+ 55 - 10
front-end/js/app.js
Datei anzeigen 

@@ -36,8 +36,8 @@ const flashButton = $("flash-button");
 
 const appStatus = $("status");
 
 const appStatus = $("status");
 
 const portsSelect = new PortSelect($("ports"));
 
 const portsSelect = new PortSelect($("ports"));
 
 const manifestsSelect = $("manifests");
 
 const manifestsSelect = $("manifests");
 
-const progressHolder = $("progressBar");
 
-const progressBar =  $("progress");
 
+const svg = $("Layer_1");
 
+
 
 const form = $("form");
 
 const form = $("form");
 
 
 
 /************************
 
 /************************
 
@@ -101,9 +101,7 @@ serialScanner.on("error", onError);
 
  * Updates UI to say it's ready
 
  * Updates UI to say it's ready
 
  */
 
  */
 
 function readyToFlash() {
 
 function readyToFlash() {
 
-    updateProgressBar(0);
 
-    progressHolder.style.display = "none";
 
-    //form.style.display = "block";
 
+    form.style.display = "block";
 
     appStatus.textContent = "Ready";
 
     appStatus.textContent = "Ready";
 
     enableInputs();
 
     enableInputs();
 
 }
 
 }
 
@@ -161,7 +159,6 @@ function getManifests() {
 
 
 
 function flashWithManifest(manifest) {
 
 function flashWithManifest(manifest) {
 
     form.style.display = "none";
 
     form.style.display = "none";
 
-   // progressHolder.style.display = "block";
 
     appStatus.textContent = `Flashing ${portsSelect.value}`;
 
     appStatus.textContent = `Flashing ${portsSelect.value}`;
 
     const numberOfSteps = manifest.flash.length * 2;
 
     const numberOfSteps = manifest.flash.length * 2;
 
     let correctStepNumber = 1;
 
     let correctStepNumber = 1;
 
@@ -177,7 +174,7 @@ function flashWithManifest(manifest) {
 
             const flashPercent = Math.round((progress.details.flashedBytes/progress.details.totalBytes) * 100);
 
             const flashPercent = Math.round((progress.details.flashedBytes/progress.details.totalBytes) * 100);
 
             const processSoFar = 50; //From download and extracting.
 
             const processSoFar = 50; //From download and extracting.
 
             const flashProcess = flashPercent / 2; //To add to the overall progress
 
             const flashProcess = flashPercent / 2; //To add to the overall progress
 
-            updateProgressBar(processSoFar + flashProcess);
 
+            updateProgressBar(processSoFar + flashProcess, svg);
 
             appStatus.textContent = `${progress.display} - ${flashPercent}%`;
 
             appStatus.textContent = `${progress.display} - ${flashPercent}%`;
 
 
 
         });
 
         });
 
@@ -200,13 +197,61 @@ function flashWithManifest(manifest) {
 
     }).on("entry", (progress) => {
 
     }).on("entry", (progress) => {
 
         //For the download/extract progress. The other half is flashing.
 
         //For the download/extract progress. The other half is flashing.
 
         const extractPercent = Math.round((correctStepNumber++/numberOfSteps) * 50);
 
         const extractPercent = Math.round((correctStepNumber++/numberOfSteps) * 50);
 
-        updateProgressBar(extractPercent);
 
+        updateProgressBar(extractPercent, svg);
 
         appStatus.textContent = progress.display;
 
         appStatus.textContent = progress.display;
 
     });
 
     });
 
 }
 
 }
 
 
 
-function updateProgressBar(percent) {
 
-    progressBar.style.width = `${percent}%`;
 
+function cloneSVGNode(node) {
 
+    return node.cloneNode(true);
 
+}
 
+
 
+function updateClass(node) {
 
+    node.setAttribute("class", "bg");
 
+    return node;
 
+}
 
+
 
+function updateProgressBar(percent, svg){
 
+    const line = svg.getElementsByClassName("st0")[0];
 
+    const startDot = svg.getElementsByClassName("st1")[0];
 
+    const finishDot = svg.getElementsByClassName("st2")[0];
 
+
 
+    let backgroundElements = svg.getElementsByClassName("bg");
 
+
 
+    if(backgroundElements.length === 0) {
 
+        const g = svg.getElementsByTagName("g")[0];
 
+        backgroundElements = [line, startDot, finishDot]
 
+                                    .map(cloneSVGNode)
 
+                                    .map(updateClass);
 
+
 
+        backgroundElements.forEach(node => g.insertBefore(node, line));
 
+    }
 
+
 
+    const bgLine = backgroundElements[0];
 
+
 
+    line.points.clear();
 
+    
+    if( percent < 1 ) {
 
+        startDot.style.opacity = 0;
 
+    } else {
 
+        startDot.style.opacity = 1;
 
+    }
 
+
 
+    if( percent > 99 ) {
 
+        finishDot.style.opacity = 1;
 
+    } else {
 
+        finishDot.style.opacity = 0;
 
+    }
 
+
 
+    for(var i = 0; i < percent * (bgLine.points.numberOfItems / 100); i ++) {
 
+        if(i < bgLine.points.numberOfItems) {
 
+            const point = bgLine.points.getItem(i);
 
+            const newPoint = svg.createSVGPoint();
 
+	        newPoint.x = point.x;
 
+            newPoint.y = point.y;
 
+            line.points.appendItem(newPoint);
 
+        }
 
+    }
 
 }
 
 }
 
 
 
 /**
 
 /**