nenuscanner/templates/calibrate.html

50 lines
1.8 KiB
HTML

{% extends "base.html" %}
{% block content %}
<section class="section">
<div class="container">
<h1 class="title">Étalonnage</h1>
<p>Placez la mire devant le scanner puis appuyez sur le bouton pour prévisualiser ou étalonner le scanner.</p>
<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 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>
</section>
{% endblock content %}
{% block extrajs %}
<script>
let previewButton = document.getElementById('preview-button');
let errorContainer = document.getElementById('error-container');
let errorContent = document.getElementById('error-content');
previewButton.addEventListener('click', async () => {
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) {
let img = document.getElementById('preview-image');
img.src = "/data/{{ object.id }}/previews/" + uuid + ".jpg";
img.style.display = "block";
errorContainer.style.display = "none";
} else {
errorContainer.style.display = "block";
errorContent.innerHTML = uuid;
}
previewButton.classList.remove('is-loading');
});
</script>
{% endblock extrajs %}