101 lines
3.9 KiB
HTML
101 lines
3.9 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<section class="section">
|
|
<div class="container">
|
|
<h1 class="title">Étalonnage</h1>
|
|
<div class="mb-2">
|
|
<p>Placez la mire devant le scanner puis appuyez sur le bouton pour prévisualiser ou étalonner le scanner.</p>
|
|
</div>
|
|
<div class="field is-grouped is-grouped-multiline">
|
|
<div class="control">
|
|
<button id="preview-button" class="button is-link">Prévisualiser</button>
|
|
</div>
|
|
<div class="control">
|
|
<button id="calibrate-button" class="button is-link">Étalonner</button>
|
|
</div>
|
|
</div>
|
|
<article id="error-container" class="message is-danger" style="display: none;">
|
|
<div id="error-content" class="message-body">
|
|
</div>
|
|
</article>
|
|
<div>
|
|
<img id="preview-image" style="display: none;">
|
|
</div>
|
|
<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];
|
|
let errorContainer = document.getElementById('error-container');
|
|
let errorContent = document.getElementById('error-content');
|
|
|
|
previewButton.addEventListener('click', async () => {
|
|
buttons.forEach(x => x.setAttribute('disabled', 'disabled'));
|
|
previewButton.classList.add('is-loading');
|
|
let response = await fetch('/api/preview/{{ object.id }}');
|
|
let uuid = await response.text();
|
|
|
|
if (response.status >= 200 && response.status < 400) {
|
|
previewImage.src = "/data/{{ object.id }}/previews/" + uuid + ".jpg";
|
|
previewImage.style.display = "block";
|
|
errorContainer.style.display = "none";
|
|
} else {
|
|
errorContainer.style.display = "block";
|
|
errorContent.innerHTML = uuid;
|
|
}
|
|
|
|
previewButton.classList.remove('is-loading');
|
|
buttons.forEach(x => x.removeAttribute('disabled'));
|
|
});
|
|
|
|
calibrateButton.addEventListener('click', async () => {
|
|
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);
|
|
|
|
if (xhr.readyState === 4) {
|
|
buttons.forEach(x => x.removeAttribute('disabled'));
|
|
calibrateButton.classList.remove('is-loading');
|
|
}
|
|
}
|
|
};
|
|
|
|
xhr.send();
|
|
});
|
|
</script>
|
|
{% endblock extrajs %}
|