282 lines
14 KiB
HTML
282 lines
14 KiB
HTML
{% extends 'scanner/base.html' %}
|
|
{% load i18n home_tags scanner_tags %}
|
|
|
|
{% block styles %}
|
|
{{ block.super }}
|
|
<link href="/static/scanner/css/calibration.css" rel="stylesheet">
|
|
{% endblock %}
|
|
{% block columns %}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="w3-row w3-black">
|
|
<div class="w3-col w3-center" style="width:25%">
|
|
<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">{% trans 'Sauver' %}</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="w3-row w3-row-padding">
|
|
<div id="_well_btn" class="w3-col 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 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>
|
|
</div>
|
|
<div class="w3-col" style="width: 50%">
|
|
{% include 'scanner/scan-image.html' %}
|
|
</div>
|
|
<div class="w3-col w3-center" style="width: 25%">
|
|
<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-1 w3-block" title="{% trans 'Ce mode permet les réglages graphiques' %}">
|
|
<span class="debug">{% trans 'Debug' %}</span><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-1 w3-block">
|
|
<span class="median">{% trans 'Axes' %}</span><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" title="{% trans 'Ce mode actionne le pointage graphique' %}">
|
|
<span class="crop">{% trans 'Recadrer pour calibrer / suivre' %}</span><br><i class="fa-solid fa-crop w3-text-amber w3-xlarge"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% if conf.tracking and conf.tracking_setting %}
|
|
<div class="w3-row w3-row-padding w3-light-grey w3-padding-small w3-margin-1 w3-round w3-round-large w3-margin-top w3-left-align w3-paddin-top">
|
|
<div class="w3-half">
|
|
<input id="_min_area_px" type="number" min="5" max="100" step="1" class="w3-round" value="{{ conf.min_area_px }}"
|
|
title="{% trans 'surface minimale de contour pour être considéré valide (px carré)' %}"><br>{% trans 'Min contour' %}
|
|
</div>
|
|
<div class="w3-half">
|
|
<input id="_max_area_ratio" type="number" min="0.05" max="1.0" step="0.05" class="w3-round" value="{{ conf.max_area_ratio|stringformat:"s" }}"
|
|
title="{% trans 'surface maximale de contour en fraction de la frame (défaut 10%)' %}"><br>{% trans 'Max contour' %}
|
|
</div>
|
|
<div class="w3-half">
|
|
<input id="_merge_kernel_size" type="number" min="5" max="320" step="1" class="w3-round" value="{{ conf.merge_kernel_size }}"
|
|
title="{% trans 'Taille du kernel elliptique de fusion des fragments (px)' %}"><br>{% trans 'Taille kernel' %}
|
|
</div>
|
|
<div class="w3-half">
|
|
<input id="_min_contour_dist_px" type="number" min="10" max="320" step="1" class="w3-round" value="{{ conf.min_contour_dist_px }}"
|
|
title="{% trans 'Distance min entre deux contours pour les considérer comme individus distincts. Défaut: 40px' %}"><br>{% trans 'Distance min' %}
|
|
</div>
|
|
<div class="w3-half">
|
|
<input id="_max_planarians" type="number" min="1" max="10" step="1" class="w3-round" value="{{ conf.max_planarians }}"
|
|
title="{% trans 'Nombre maximum de planaires à suivre simultanément (1-10)' %}"><br>{% trans 'Planaires' %}
|
|
</div>
|
|
<div class="w3-half">
|
|
<input id="_draw" type="checkbox" value="0" onclick="if (this.checked){this.value='1';}else{ this.value='0';}" title="{% trans 'Dessiner le contour' %}">
|
|
<span class="w3-nbsp">{% trans 'Contour' %}</span>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<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="_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 %}
|
|
{{ block.super }}
|
|
<script>
|
|
const container = sId("scan-img");
|
|
const ws_route = "{{ ws_route }}";
|
|
const use_tracking = "{{ use_tracking }}" == "True";
|
|
|
|
const options = {
|
|
ts : sId("_ts"),
|
|
cx : sId("_cx"),
|
|
cy : sId("_cy"),
|
|
x : sId("_x"),
|
|
y : sId("_y"),
|
|
xbase: sId("_xbase"),
|
|
ybase: sId("_ybase"),
|
|
test : sId("_test"),
|
|
halt : sId("_halt"),
|
|
speed_px_s : sId("_speed_px_s"),
|
|
axial_speed : sId("_axial_speed"),
|
|
axial_pos : sId("_axial_pos"),
|
|
area_px : sId("_area_px"),
|
|
frame_count : sId("_count"),
|
|
goto_0 : sId("_goto-0"),
|
|
goto_xy : sId("_goto-xy"),
|
|
xy_base : sId ("_xy-base"),
|
|
up : sId("_up"),
|
|
down : sId("_down"),
|
|
left : sId("_left"),
|
|
right : sId("_right"),
|
|
duration: sId("_duration"),
|
|
feed : sId("_feed"),
|
|
step : sId("_step"),
|
|
well : sId("_well"),
|
|
debug : sId("_debug"),
|
|
calib_debug : sId("_calib_debug"),
|
|
calib_auto : sId("_calib_auto"),
|
|
calib_center: sId("_calib_center"),
|
|
previous : sId("_previous"),
|
|
next : sId("_next"),
|
|
set_well : sId("_set_well"),
|
|
well_btn : sId("_well_btn"),
|
|
median : sId("_median"),
|
|
crop : sId("_crop"),
|
|
crop_radius : sId("_crop_radius"),
|
|
min_area_px : sId("_min_area_px"),
|
|
max_area_ratio : sId("_max_area_ratio"),
|
|
max_planarians : sId("_max_planarians"),
|
|
merge_kernel_size : sId("_merge_kernel_size"),
|
|
min_contour_dist_px : sId("_min_contour_dist_px"),
|
|
draw : sId("_draw")
|
|
};
|
|
</script>
|
|
<script src="/static/scanner/js/calibration.js"></script>
|
|
<script>
|
|
const manager = new ScannerManager(container, options);
|
|
const protocol = location.protocol === "https:" ? "wss" : "ws";
|
|
const wsUrl = `${protocol}://${location.host}/${ws_route}`;
|
|
const socket = new MetadataSocket(wsUrl);
|
|
socket.setManager(manager);
|
|
socket.connect();
|
|
manager.registerSocket(socket);
|
|
|
|
function goto_well(b) { manager.goto_well(b); }
|
|
</script>
|
|
{% endblock %}
|
|
|