denis/PlanarianScanner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web ui

Browse Source
This commit is contained in:
denis
2026-04-22 23:48:12 +02:00
parent 8df347fa7f
commit dc56f118a7
13 changed files with 246 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test_tube_scanner/scanner/templates/scanner/calibration.html
+169 -164
View File
@@ -8,175 +8,180 @@
{% block columns %}{% endblock %}
{% block content %}
<div class="container w3-black">
<div class="header">
<div class="w3-row w3-row-padding">
<div class="w3-col" style="width:20%">
{% trans 'Position multi-puit' %}<br>
<select id="_well" class="w3-select">
{% for w in wells %}
<option value="{{ w.position }}" {% if w.position == default_position %}selected{% endif %}>{{ w }}</option>
{% endfor %}
</select>
</div>
<div class="w3-col" style="width:15%">
<div>{% trans 'Vitesse' %}</div>
<select id="_feed" class="w3-select">
<option value="500">500 mm/mn</option>
<option value="750">750 mm/mn</option>
<option value="1000" selected>1000 mm/mn</option>
<option value="1200">1200 mm/mn</option>
<option value="1500">1500 mm/mn</option>
<option value="2000">2000 mm/mn</option>
<option value="3000">3000 mm/mn</option>
</select>
</div>
<div class="w3-col" style="width:10%">
<div>{% trans 'Pas' %}</div>
<select id="_step" class="w3-select">
<option value="0.1">0.1 mm</option>
<option value="0.25">0.25 mm</option>
<option value="0.5">0.5 mm</option>
<option value="1.0" selected>1.0 mm</option>
<option value="1.5">1.5 mm</option>
<option value="2.0">2.0 mm</option>
<option value="2.5">2.5 mm</option>
<option value="5.0">5.0 mm</option>
<option value="10.0">10.0 mm</option>
<option value="20.0">20.0 mm</option>
<option value="30.0">30.0 mm</option>
<option value="40.0">40.0 mm</option>
<option value="50.0">50.0 mm</option>
</select>
</div>
<div class="w3-col" style="width:10%">
<div>{% trans 'Durée' %}</div>
<select id="_duration" class="w3-select" title="{% trans 'Durée entre vidéos' %}">
<option value="1.0">1 s</option>
<option value="2.0">2 s</option>
<option value="3.0">3 s</option>
<option value="4.0">4 s</option>
<option value="5.0" selected>5 s</option>
<option value="10">10 s</option>
<option value="15">15 s</option>
<option value="20">20 s</option>
<option value="30">30 s</option>
</select>
</div>
<div class="w3-col" style="width:45%">
<div class="w3-margin-top w3-padding w3-right-align">
<span id="_ts"></span><br>
</div>
</div>
<div class="w3-row w3-black">
<div class="w3-quarter w3-center">
<div class="w3-row w3-row-padding">
<div class="w3-col w3-margin-bottom">
{% trans 'Position multi-puit' %}<br>
<select id="_well" class="w3-select">
{% for w in wells %}
<option value="{{ w.position }}" {% if w.position == default_position %}selected{% endif %}>{{ w }}</option>
{% endfor %}
</select>
</div>
<div class="w3-twothird">
<div>{% trans 'Vitesse' %}</div>
<select id="_feed" class="w3-select" title="{% trans 'Vitesse en mm / mn' %}">
<option value="500">500</option>
<option value="750">750</option>
<option value="1000" selected>1000</option>
<option value="1200">1200</option>
<option value="1500">1500</option>
<option value="2000">2000</option>
<option value="3000">3000</option>
</select>
</div>
<div class="w3-third">
<div>{% trans 'Pas' %}</div>
<select id="_step" class="w3-select" title="{% trans 'Pas en mm' %}">
<option value="0.1">0.1</option>
<option value="0.25">0.25</option>
<option value="0.5">0.5</option>
<option value="1.0" selected>1.0</option>
<option value="1.5">1.5</option>
<option value="2.0">2.0</option>
<option value="2.5">2.5</option>
<option value="5.0">5.0</option>
<option value="10.0">10.0</option>
<option value="20.0">20.0</option>
<option value="30.0">30.0</option>
<option value="40.0">40.0</option>
<option value="50.0">50.0</option>
</select>
</div>
</div>
<div class="w3-row w3-row-padding">
<div class="w3-col">
<button id="_xy-base" class="w3-button w3-dark-xlight w3-round-large w3-margin-top w3-margin-bottom w3-block"
title="{% trans 'Définir la base (x, y) du multi-puit' %}">
{% trans 'Définir base' %}<br><i class="fa-solid fa-circle-check w3-text-orange w3-xlarge"></i>
</button>
</div>
<div class="w3-col">
<button id="_right" class="w3-button w3-dark-xlight w3-round-large w3-margin-bottom w3-padding-small">
+X<br><i class="fa-solid fa-circle-up w3-xlarge"></i>
</button>
</div>
<div class="w3-third">
<button id="_down" class="w3-button w3-dark-xlight w3-round-large w3-padding-small">
-Y<br><i class="fa-solid fa-circle-arrow-left w3-xlarge"></i>
</button>
</div>
<div class="w3-third">
<button id="_set_well" class="w3-button w3-dark-xlight w3-round-large w3-padding-small"
title="{% trans 'Sauvegarder la position du puit courant' %}">
<span class="w3-small">Position</span><br><i class="fa-solid fa-circle-check w3-xlarge w3-text-orange"></i>
</button>
</div>
<div class="w3-third">
<button id="_up" class="w3-button w3-dark-xlight w3-round-large w3-padding-small">
+Y<br><i class="fa-solid fa-circle-arrow-right w3-xlarge"></i>
</button>
</div>
<div class="w3-col">
<button id="_left" class="w3-button w3-dark-xlight w3-round-large w3-padding-small w3-margin-top">
-X<br><i class="fa-solid fa-circle-down w3-xlarge"></i>
</button>
</div>
</div>
<div class="move w3-center">
<div class="w3-row w3-border w3-bold w3-margin-bottom">
<div class="w3-half">X<br><span id="_x"></span></div>
<div class="w3-half">Y<br><span id="_y"></span></div>
</div>
<div class="w3-row">
<div class="w3-col">
<button id="_xy-base" class="w3-button w3-dark-xlight w3-round-large w3-margin-small w3-block"
title="{% trans 'Définir la base (x, y) du multi-puit' %}">
{% trans 'Définir base' %}<br><i class="fa-solid fa-circle-check w3-text-orange w3-xxlarge"></i>
</button>
</div>
<div class="w3-col">
<button id="_right" class="w3-button w3-dark-xlight w3-round-large w3-padding-small">
+X<br><i class="fa-solid fa-circle-up w3-xxlarge"></i>
</button>
</div>
<div class="w3-third">
<button id="_down" class="w3-button w3-dark-xlight w3-round-large w3-padding-small">
-Y<br><i class="fa-solid fa-circle-arrow-left w3-xxlarge"></i>
</button>
</div>
<div class="w3-third">
<button id="_set_well" class="w3-button w3-dark-xlight w3-round-large w3-padding-small"
title="{% trans 'Sauvegarder la position du puit courant' %}">
<span class="w3-small">Position</span><br><i class="fa-solid fa-circle-check w3-xxlarge w3-text-orange"></i>
</button>
</div>
<div class="w3-third">
<button id="_up" class="w3-button w3-dark-xlight w3-round-large w3-padding-small">
+Y<br><i class="fa-solid fa-circle-arrow-right w3-xxlarge"></i>
</button>
</div>
<div class="w3-col">
<button id="_left" class="w3-button w3-dark-xlight w3-round-large w3-padding-small">
-X<br><i class="fa-solid fa-circle-down w3-xxlarge"></i>
</button>
</div>
</div>
<div class="w3-row">
<div id="_well_btn" class="w3-col w3-margin-top w3-margin-bottom"></div>
<div class="w3-third">
<button id="_previous" class="w3-button w3-dark-xlight w3-round-large w3-padding-small">
<span class="w3-small">{% trans 'Précéd.' %}</span><br><i class="fa-solid fa-circle-left w3-xxlarge"></i>
</button>
</div>
<div class="w3-third">
<button id="_calib_center" class="w3-button w3-dark-xlight w3-round-large w3-padding-small" title="{% trans 'Centrer manuellement' %}">
<span class="w3-small">{% trans 'Centrer' %}</span><br><i class="fa-regular fa-circle w3-xxlarge w3-text-orange"></i>
</button>
</div>
<div class="w3-third">
<button id="_next" class="w3-button w3-dark-xlight w3-round-large w3-padding-small">
<span class="w3-small">{% trans 'Suivant' %}</span><br><i class="fa-solid fa-circle-right w3-xxlarge"></i>
</button>
</div>
<div class="w3-col">
<button id="_calib_auto" class="w3-button w3-dark-xlight w3-round-large w3-margin-small w3-block"
title="{% trans 'Centrage auto et sauvegarde des positions' %}">
{% trans 'Calibrage auto' %}<br><i class="fa-solid fa-robot w3-text-orange w3-xxlarge"></i>
</button>
</div>
<div class="w3-row">
<div id="_well_btn" class="w3-col w3-margin-top w3-margin-bottom"></div>
<div class="w3-third">
<button id="_previous" class="w3-button w3-dark-xlight w3-round-large w3-padding-small">
<span class="w3-small">{% trans 'Précéd.' %}</span><br><i class="fa-solid fa-circle-left w3-xlarge"></i>
</button>
</div>
<div class="w3-third">
<button id="_calib_center" class="w3-button w3-dark-xlight w3-round-large w3-padding-small" title="{% trans 'Centrer manuellement' %}">
<span class="w3-small">{% trans 'Centrer' %}</span><br><i class="fa-regular fa-circle w3-xlarge w3-text-orange"></i>
</button>
</div>
<div class="w3-third">
<button id="_next" class="w3-button w3-dark-xlight w3-round-large w3-padding-small">
<span class="w3-small">{% trans 'Suivant' %}</span><br><i class="fa-solid fa-circle-right w3-xlarge"></i>
</button>
</div>
</div>
<div class="scan w3-center">
<button id="_goto-0" class="w3-button w3-dark-xlight w3-round w3-round-large w3-margin-small w3-block">
Origine (0, 0)<br><i class="fa-solid fa-house w3-text-amber w3-xlarge"></i>
</button>
<button id="_goto-xy" class="w3-button w3-dark-xlight w3-round-large w3-margin-small w3-block w3-margin-bottom">
{% trans 'Aller à la base' %}<br>(<span id="_xbase"></span>, <span id="_ybase"></span>)<br><i class="fa-solid fa-bullseye w3-text-amber w3-xlarge"></i>
</button>
<div class="w3-row">
<div class="w3-half">
<button id="_calib_debug" class="w3-button w3-dark-xlight w3-round-large w3-padding-small">
{% trans 'Debug' %}<br><i class="fa-solid fa-triangle-exclamation w3-text-amber w3-xlarge"></i>
</button>
</div>
<div class="w3-half">
<button id="_median" class="w3-button w3-dark-xlight w3-round-large w3-padding-small">
{% trans 'Axes' %}&nbsp;<br><i class="fa-solid fa-crosshairs w3-text-amber w3-xlarge"></i>
</button>
</div>
<div class="w3-col">
<button id="_crop" class="w3-button w3-dark-xlight w3-round-large w3-padding-small w3-margin-top w3-block">
{% trans 'Recadrer' %}<br><i class="fa-solid fa-crop w3-text-amber w3-xlarge"></i>
</button>
</div>
<div class="w3-col w3-padding-small w3-border w3-round-large w3-margin-top">
<span class="w3-bold w3-text-amber">{% trans 'Rayon' %}</span><br>
<input id="_crop_radius" type="number" min="100" max="1200" step="1" class="w3-round" title="{% trans 'Rayon du recadrement' %}"
value="{{ conf.calibration_crop_radius }}" title="{% trans 'Rayon de cadrage' %}"> px
</div>
</div>
<button id="_test" class="w3-button w3-dark-xlight w3-round-large w3-margin-small w3-block">
{% trans 'Tester le cirduit' %}<br><i class="fa-solid fa-circle-check w3-text-orange w3-xxlarge"></i>
</button>
<button id="_halt" class="w3-button w3-red w3-round-large w3-margin-small w3-block">
{% trans 'ARRET' %}<br><i class="fa-solid fa-hand w3-xxlarge"></i>
</button>
</div>
{% include 'scanner/scan-image.html' %}
</div>
<ul id="_debug" class="w3-scroll-y" style="height: 30vh"></ul>
<div class="w3-half">
{% include 'scanner/scan-image.html' %}
</div>
<div class="w3-quarter w3-center">
<div class="w3-row w3-row-padding">
<div class="w3-col">
<div class="w3-right-align w3-small"><span id="_ts"></span></div>
</div>
<div class="w3-half">X<br><span id="_x"></span></div>
<div class="w3-half">Y<br><span id="_y"></span></div>
<div class="w3-col w3-margin-bottom">
<button id="_goto-0" class="w3-button w3-dark-xlight w3-round w3-round-large w3-block">
Origine (0, 0)<br><i class="fa-solid fa-house w3-text-amber w3-xlarge"></i>
</button>
</div>
<div class="w3-col w3-margin-bottom">
<button id="_goto-xy" class="w3-button w3-dark-xlight w3-round-large w3-block">
{% trans 'Aller à la base' %}<br>(<span id="_xbase"></span>, <span id="_ybase"></span>)<br><i class="fa-solid fa-bullseye w3-text-amber w3-xlarge"></i>
</button>
</div>
</div>
<div class="w3-row w3-row-padding">
<div class="w3-half">
<button id="_calib_debug" class="w3-button w3-dark-xlight w3-round-large w3-padding-small w3-block">
{% trans 'Debug' %}<br><i class="fa-solid fa-triangle-exclamation w3-text-amber w3-xlarge"></i>
</button>
</div>
<div class="w3-half">
<button id="_median" class="w3-button w3-dark-xlight w3-round-large w3-padding-small w3-block">
{% trans 'Axes' %}&nbsp;<br><i class="fa-solid fa-crosshairs w3-text-amber w3-xlarge"></i>
</button>
</div>
<div class="w3-col">
<button id="_crop" class="w3-button w3-dark-xlight w3-round-large w3-padding-small w3-margin-top w3-block">
{% trans 'Recadrer' %}<br><i class="fa-solid fa-crop w3-text-amber w3-xlarge"></i>
</button>
</div>
</div>
<div class="w3-row w3-row-padding ">
<div class="w3-half w3-margin-top">
<span>{% trans 'Rayon' %} px</span><br>
<input id="_crop_radius" type="number" min="100" max="1200" step="1" class="w3-round w3-input" title="{% trans 'Rayon du recadrement' %}"
value="{{ conf.calibration_crop_radius }}" title="{% trans 'Rayon de cadrage' %}">
</div>
<div class="w3-half w3-margin-top">
<div>{% trans 'Durée' %}</div>
<select id="_duration" class="w3-select w3-round" title="{% trans 'Durée entre vidéos' %}">
<option value="1.0">1 s</option>
<option value="2.0">2 s</option>
<option value="3.0">3 s</option>
<option value="4.0">4 s</option>
<option value="5.0" selected>5 s</option>
<option value="10">10 s</option>
<option value="15">15 s</option>
<option value="20">20 s</option>
<option value="30">30 s</option>
</select>
</div>
<div class="w3-col">
<button id="_test" class="w3-button w3-dark-xlight w3-round-large w3-margin-top w3-block">
{% trans 'Tester le cirduit' %}<br><i class="fa-solid fa-circle-check w3-text-orange w3-xlarge"></i>
</button>
</div>
<div class="w3-col">
<button id="_calib_auto" class="w3-button w3-dark-xlight w3-round-large w3-margin-top w3-block"
title="{% trans 'Centrage auto et sauvegarde des positions' %}">
{% trans 'Calibrage auto' %}<br><i class="fa-solid fa-robot w3-text-orange w3-xlarge"></i>
</button>
</div>
<div class="w3-col">
<button id="_halt" class="w3-button w3-red w3-round-large w3-margin-top w3-block">
{% trans 'ARRET' %}<br><i class="fa-solid fa-hand w3-xlarge"></i>
</button>
</div>
</div>
</div>
</div>
<ul id="_debug" class="w3-scroll-y" style="height: 30vh"></ul>
{% endblock %}
{% block js_footer %}
test_tube_scanner/scanner/templates/scanner/images.html
+3 -5
View File
@@ -6,7 +6,7 @@
<link href="/static/scanner/css/images.css" rel="stylesheet">
{% endblock %}
{% block sidebar_list %}
<a href="/" class="w3-bar-item w3-btn w3-hover-opacity"><i class="fa-solid fa-house w3-text-orange"></i> {% trans "Retour accueil" %}</a>
<a href="/" class="w3-bar-item w3-btn w3-hover-opacity"><i class="fa-solid fa-house w3-text-orange w3-xlarge"></i> {% trans "Retour accueil" %}</a>
<form method="post" class="w3-bar-item" action="">
{% csrf_token %}
<select id="_sid" name="_sid" class="w3-select w3-margin-bottom" onchange="this.form.submit()">
@@ -16,14 +16,12 @@
{% endfor %}
</select>
{% if cursid %}
<div class="multiwell_cards">
{% multiwell_cards cursid observations %}
</div>
{% multiwell_cards cursid observations %}
{% endif %}
</form>
{% if cursid %}
<a href="#" class="w3-bar-item w3-btn w3-hover-opacity" onclick="download_all_images()">
<i class="fa-solid fa-file-export w3-text-red"></i> {% trans "Exporter l'ensemble des images" %}
<i class="fa-solid fa-file-export w3-text-red w3-xlarge"></i> {% trans "Exporter l'ensemble des images" %}
</a>
{% endif %}
{% endblock %}
test_tube_scanner/scanner/templates/scanner/main.html
+50 -31
View File
@@ -8,45 +8,63 @@
{% block columns %}{% endblock %}
{% block content %}
<div class="container w3-black">
<div class="header">
<div class="w3-row w3-row-padding">
<div class="w3-half">
<div>{% trans "Choix de la session" %}</div>
<select id="_session" class="w3-select">
{% for s in sessions %}
<option value="{{ s.id }}">{{ s.name }}</option>
{% endfor %}
</select>
</div>
<div class="w3-half">
<div class="w3-margin-top w3-padding w3-right">
<span id="_ts"></span><br>
(<span id="_x"></span>, <span id="_y"></span>)
</div>
</div>
</div>
<div class="w3-row w3-row-padding w3-black">
<div class="w3-quarter w3-center">
<div class="w3-col">
<div>{% trans "Choix de la session" %}</div>
<select id="_session" class="w3-select">
{% for s in sessions %}
<option value="{{ s.id }}">{{ s.name }}</option>
{% endfor %}
</select>
</div>
<div class="scan">
<button id="_median" class="w3-button w3-teal w3-round-large w3-margin-small w3-block"><i class="fa-solid fa-crosshairs"></i> {% trans 'Axes' %}</button>
<button id="_crop" class="w3-button w3-teal w3-round-large w3-margin-small w3-block w3-margin-bottom"><i class="fa-solid fa-crop"></i> {% trans 'Recadrer' %}</button>
<hr>
<button id="_scan" class="w3-button w3-warning w3-round-large w3-large w3-block">
<i class="fa-solid fa-camera"></i><br>{% trans 'Lancer le balayage' %}
<div class="w3-col">
<div class="w3-row w3-bold">
<div class="w3-half">X<br><span id="_x"></span></div>
<div class="w3-half">Y<br><span id="_y"></span></div>
<div class="w3-col w3-padding"><span id="_uuid"></span></div>
</div>
</div>
<div class="w3-col">
<button id="_median" class="w3-button w3-dark-xlight w3-round-large w3-padding-small w3-block">
{% trans 'Axes' %}&nbsp;<br><i class="fa-solid fa-crosshairs w3-text-amber w3-xlarge"></i>
</button>
</div>
<div class="w3-col">
<button id="_crop" class="w3-button w3-dark-xlight w3-round-large w3-padding-top w3-margin-top w3-block">
{% trans 'Recadrer' %}<br><i class="fa-solid fa-crop w3-text-amber w3-xlarge"></i>
</button>
</div>
<div class="w3-col">
<button id="_scan" class="w3-button w3-dark-xlight w3-round-large w3-margin-top w3-block">
{% trans 'Lancer le balayage' %}<br><i class="fa-solid fa-circle-check w3-text-orange w3-xlarge"></i>
</button>
</div>
<div class="w3-col">
<button id="_halt" class="w3-button w3-red w3-round-large w3-margin-top w3-block">
{% trans 'ARRET' %}<br><i class="fa-solid fa-hand w3-xlarge"></i>
</button>
<button id="_halt" class="w3-button w3-red w3-round-large w3-padding-16 w3-block w3-margin-top"><i class="fa-solid fa-hand"></i><br>{% trans 'ARRET' %}</button>
</div>
{% include 'scanner/scan-image.html' %}
<div class="w3-col">
<div class="w3-margin-top w3-padding w3-small">
<span id="_ts"></span>
</div>
</div>
</div>
<ul id="_debug" class="w3-scroll-y" style="height: 50vh"></ul>
<div class="w3-threequarter">
{% include 'scanner/scan-image.html' %}
</div>
</div>
<ul id="_debug" class="w3-scroll-y" style="height: 50vh"></ul>
{% endblock %}
{% block js_footer %}
{{ block.super }}
<script>
const container = sId("scan-img");
const ws_route = "{{ ws_route }}";
const use_tracking = "{{ use_tracking }}" == "True";
const container = sId("scan-img");
const ws_route = "{{ ws_route }}";
const use_tracking = "{{ use_tracking }}" == "True";
const options = {
ts: sId("_ts"),
cx: sId("_cx"),
@@ -63,7 +81,8 @@
axial_speed : sId("_axial_speed"),
axial_pos : sId("_axial_pos"),
area_px : sId("_area_px"),
frame_count : sId("_count")
frame_count : sId("_count"),
uuid: sId("_uuid")
};
</script>
<script src="/static/scanner/js/main.js"></script>
test_tube_scanner/scanner/templates/scanner/replay.html
+3 -5
View File
@@ -7,7 +7,7 @@
{% endblock %}
{% block columns %}{% endblock %}
{% block sidebar_list %}
<a href="/" class="w3-bar-item w3-btn w3-hover-opacity"><i class="fa-solid fa-house w3-text-orange"></i> {% trans "Retour accueil" %}</a>
<a href="/" class="w3-bar-item w3-btn w3-hover-opacity"><i class="fa-solid fa-house w3-text-orange w3-xlarge"></i> {% trans "Retour accueil" %}</a>
<form method="post" class="w3-bar-item" action="">
{% csrf_token %}
<select id="_sid" name="_sid" class="w3-select w3-margin-bottom" onchange="this.form.submit()">
@@ -17,14 +17,12 @@
{% endfor %}
</select>
{% if cursid %}
<div class="multiwell_cards">
{% multiwell_cards cursid observations %}
</div>
{% multiwell_cards cursid observations %}
{% endif %}
</form>
{% if cursid %}
<a href="#" class="w3-bar-item w3-btn w3-hover-opacity" onclick="download_all_videos()">
<i class="fa-solid fa-file-export w3-text-red"></i> {% trans "Exporter l'ensemble des vidéos" %}
<i class="fa-solid fa-file-export w3-text-red w3-xlarge"></i> {% trans "Exporter l'ensemble des vidéos" %}
</a>
{% endif %}
{% endblock %}
test_tube_scanner/scanner/templates/scanner/scan-image.html
+1 -1
View File
@@ -1,5 +1,5 @@
<div class="scanner w3-row">
<div class="w3-row">
{% if use_tracking %}
<div class="w3-col w3-small" style="width:180px">
<div>Num: <span id="_count"></span></div>