Good stream

templates/calibrate.html

@@ -27,7 +27,7 @@
 
             </div>
         </div>
-        <progress id="progress-bar" class="progress is-link" style="display: none;" value="0" max="100"></progress>
+        <progress id="progress-bar" class="progress is-link" style="display: none;" value="0" max="1000"></progress>
     </div>
 </section>
 {% endblock content %}
@@ -35,6 +35,7 @@
 {% block extrajs %}
 <script>
     let scanIndex = 0;
+    let progress = 0;
     let previewButton = document.getElementById('preview-button');
     let calibrateButton = document.getElementById('calibrate-button');
     let progressBar = document.getElementById('progress-bar');
@@ -64,37 +65,44 @@
     });
 
     calibrateButton.addEventListener('click', async () => {
+        progress = 0;
+        progressBar.value = 0;
         previewImage.style.display = "none";
         buttons.forEach(x => x.setAttribute('disabled', 'disabled'));
         calibrateButton.classList.add('is-loading');
         progressBar.style.display = "block";
 
-        let xhr = new XMLHttpRequest();
-        grid.innerHTML = '';
-        xhr.open('GET', '/api/scan-for-calibration/{{ object.id }}');
-        xhr.onreadystatechange = () => {
-            if (xhr.readyState === 3 || xhr.readyState === 4) {
-                let uuids = xhr.responseText.split('\n');
-                let split = uuids[uuids.length - 2].split(',');
-                let uuid = split[0];
-                let ratio = parseFloat(split[1]);
-                progressBar.value = 100 * ratio;
+        let response = await fetch('/api/scan-for-calibration/{{ object.id }}');
+        let reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
+
+        while (true) {
+            let { value, done } = await reader.read();
+
+            if (done) {
+                buttons.forEach(x => x.removeAttribute('disabled'));
+                calibrateButton.classList.remove('is-loading');
+                break;
+            }
+
+            let [ uuid, ratio ] = value.trim().split(',');
+            progress = Math.ceil(1000 * parseFloat(ratio));
             let cell = document.createElement('div');
             cell.classList.add('cell');
-                cell.classList.add('is-col-min-4');
             let img = document.createElement('img');
             img.src = '/data/{{ object.id }}/calibration/' + uuid + '.jpg?v=' + scanIndex;
             cell.appendChild(img);
             grid.appendChild(cell);
-
-                if (xhr.readyState === 4) {
-                    buttons.forEach(x => x.removeAttribute('disabled'));
-                    calibrateButton.classList.remove('is-loading');
         }
-            }
-        };
-
-        xhr.send();
     });
+
+    function refreshProgressBar() {
+        if (progress !== progressBar.value) {
+            let diff = progress - progressBar.value;
+            progressBar.value += Math.max(diff / 20, 1);
+        }
+        requestAnimationFrame(refreshProgressBar);
+    }
+
+    refreshProgressBar();
 </script>
 {% endblock extrajs %}