Add network status progress bar.

It's a bit ugly, but it works
nepx · Dec 25, 2020 · ea3c072 · ea3c072
1 parent 6ec0a80
commit ea3c072
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -8,6 +8,17 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
+    <style>
+        .progress {
+            text-align: center;
+        }
+
+        .progress-value {
+            position: absolute;
+            right: 0;
+            left: 0;
+        }
+    </style>
 </head>
 
 <body>
@@ -122,6 +133,9 @@ <h5 class="mb-0">
                 <div class="text-center">
                     <canvas id="canvas" height="480" width="640">Your browser does not support canvas</canvas>
                 </div>
+                <div class="text-center">
+                    <span>Downloading <code id="pbt">nothing</code><progress id="pb" max="100" value="0"></progress>
+                </div>
             </main>
         </div>
     </div>
@@ -301,7 +315,7 @@ <h5 class="modal-title">Other Settings</h5>
                         <small id="hlp_fast" class="form-text text-muted">If checked, the emulator runs as fast as possible, causing time to become desynchronized.</small>
                     </div>
                     <div class="form-check">
-                        <input class="form-check-input" type="checkbox" id="inp_winnt" checked />
+                        <input class="form-check-input" type="checkbox" id="inp_winnt" />
                         <label class="form-check-label" for="inp_winnt" aria-describedby="hlp_winnt">
                         Work around Windows NT CPUID bug
                     </label>
@@ -374,6 +388,13 @@ <h5 class="modal-title">Other Settings</h5>
             opts.floppy = $("#inp_floppy")[0].checked;
             opts.winnt_hack = getParameterByName("winnt") ? true : $("#inp_winnt")[0].checked;
 
+            var pbt = $("#pbt"),
+                pb = $("#pb")[0];
+            opts.onprogress = function(file, cur, tot) {
+                pbt.html(file);
+                pb.setAttribute("value", (cur / tot * 100) | 0);
+            };
+
             var letters = ["a", "b", "c", "d"];
             for (var i = 0; i < 4; i++) {
                 if (diskinfos[i].type !== "none") {

diff --git a/libhalfix.js b/libhalfix.js
@@ -23,6 +23,8 @@
         this.image_data = null;
 
         this.config = this.buildConfiguration();
+
+        this.onprogress = options["onprogress"] || function (a, b, c) { };
     }
 
     var _cache = [];
@@ -108,10 +110,12 @@
     };
 
     /**
-     * @param {number} progress Fraction of completion * 100 
+     * @param {string} f name of file
+     * @param {number} a current position
+     * @param {number} b end
      */
-    Halfix.prototype.updateNetworkProgress = function (progress) {
-
+    Halfix.prototype.updateNetworkProgress = function (f, a, b) {
+        this.onprogress(f, a, b);
     };
     /**
      * @param {number} total Total bytes loaded
@@ -227,8 +231,7 @@
 
                 xhr.onprogress = function (e) {
                     if (e.lengthComputable) {
-                        var now = e.loaded / e.total * 100 | 0;
-                        _halfix.updateNetworkProgress(now - lastProgress | 0);
+                        _halfix.updateNetworkProgress(path, e.loaded, e.total);
                         lastProgress = now;
                     }
                 };