Good stream
This commit is contained in:
parent
de053f043f
commit
1643eb636e
|
|
@ -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 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);
|
||||
let response = await fetch('/api/scan-for-calibration/{{ object.id }}');
|
||||
let reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
|
||||
|
||||
if (xhr.readyState === 4) {
|
||||
buttons.forEach(x => x.removeAttribute('disabled'));
|
||||
calibrateButton.classList.remove('is-loading');
|
||||
}
|
||||
while (true) {
|
||||
let { value, done } = await reader.read();
|
||||
|
||||
if (done) {
|
||||
buttons.forEach(x => x.removeAttribute('disabled'));
|
||||
calibrateButton.classList.remove('is-loading');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
xhr.send();
|
||||
let [ uuid, ratio ] = value.trim().split(',');
|
||||
progress = Math.ceil(1000 * parseFloat(ratio));
|
||||
let cell = document.createElement('div');
|
||||
cell.classList.add('cell');
|
||||
let img = document.createElement('img');
|
||||
img.src = '/data/{{ object.id }}/calibration/' + uuid + '.jpg?v=' + scanIndex;
|
||||
cell.appendChild(img);
|
||||
grid.appendChild(cell);
|
||||
}
|
||||
});
|
||||
|
||||
function refreshProgressBar() {
|
||||
if (progress !== progressBar.value) {
|
||||
let diff = progress - progressBar.value;
|
||||
progressBar.value += Math.max(diff / 20, 1);
|
||||
}
|
||||
requestAnimationFrame(refreshProgressBar);
|
||||
}
|
||||
|
||||
refreshProgressBar();
|
||||
</script>
|
||||
{% endblock extrajs %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue