Streaming

app.py

@@ -54,8 +54,13 @@ def preview(id: int):
 def scan_calibration(id: int):
     conn = db.get()
     db.Object.get_from_id(id, conn)
-    scanner.scan(join(config.DATA_DIR, id, 'calibration'))
-    return jsonify(config.LEDS_UUIDS)
+
+    def generate():
+        length = len(config.LEDS_UUIDS)
+        for index, led_uuid in enumerate(scanner.scan(join(config.DATA_DIR, id, 'calibration'))):
+            yield f"{led_uuid},{(index+1)/length}\n"
+
+    return app.response_class(generate(), mimetype='text/plain')
 
 
 @app.route("/calibration/<id>")

scanner.py

@@ -20,3 +20,4 @@ def scan(output_dir: str):
         img = join(output_dir, led + '.jpg')
         capture(img)
         print(f'Turn off {led}')
+        yield led

templates/calibrate.html

@@ -22,17 +22,22 @@
         <div>
             <img id="preview-image" style="display: none;">
         </div>
-        <div id="grid" class="grid">
+        <div class="fixed-grid has-8-cols">
+            <div id="grid" class="grid">
 
+            </div>
         </div>
+        <progress id="progress-bar" class="progress is-link" style="display: none;" value="0" max="100"></progress>
     </div>
 </section>
 {% endblock content %}
 
 {% block extrajs %}
 <script>
+    let scanIndex = 0;
     let previewButton = document.getElementById('preview-button');
     let calibrateButton = document.getElementById('calibrate-button');
+    let progressBar = document.getElementById('progress-bar');
     let previewImage = document.getElementById('preview-image');
     let grid = document.getElementById('grid');
     let buttons = [previewButton, calibrateButton];
@@ -62,20 +67,34 @@
         previewImage.style.display = "none";
         buttons.forEach(x => x.setAttribute('disabled', 'disabled'));
         calibrateButton.classList.add('is-loading');
-        let response = await fetch('/api/scan-for-calibration/{{ object.id }}');
-        let ledsUuids = await response.json();
-        calibrateButton.classList.remove('is-loading');
-        buttons.forEach(x => x.removeAttribute('disabled'));
+        progressBar.style.display = "block";
 
-        for (let led of ledsUuids) {
-            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/' + led + '.jpg';
-            cell.appendChild(img);
-            grid.appendChild(cell);
-        }
+        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 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();
     });
 </script>
 {% endblock extrajs %}