{% 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' %}">
	                {% 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-1 w3-block">
	                {% trans 'Axes' %}<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' %}">
	                {% trans 'Recadrer' %}<br><i class="fa-solid fa-crop w3-text-amber w3-xlarge"></i>
	            </button>               
            </div>
        </div>    
        {% if conf.tracking %}
        <div class="w3-row w3-row-padding w3-light-grey w3-margin-1 w3-round w3-round-large"> 
             <div class="w3-col"><input id="_track_it" type="checkbox" value="0" onclick="if (this.checked){this.value='1';}else{ this.value='0';}"> 
                {% trans 'Configuration du tracking' %}
             </div>
             <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>    
        {% 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"),
            track : sId("_track_it")
        };          
    </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 %}