From c0a8ab8f793c125066a30549d560bf2f29aef7e4 Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Thu, 29 Jul 2021 21:44:54 +1000
Subject: [PATCH] allowed view prev/next to remember settings (fname, faces,
 distance) and use new CreateSelect() for AI menu, also make fname toggle
 actually do that

---
 templates/viewer.html | 57 +++++++++++++++++++++++++++++++++++--------
 1 file changed, 47 insertions(+), 10 deletions(-)

diff --git a/templates/viewer.html b/templates/viewer.html
index 43eb167..299791c 100644
--- a/templates/viewer.html
+++ b/templates/viewer.html
@@ -1,6 +1,7 @@
 {% extends "base.html" %} {% block main_content %}
 {# make the form-switch / toggle info color set, give or take #}
 <style>
+.norm-txt { font-size: 1.0rem }
 .form-check-input:checked {
     background-color: #39C0ED;
     border-color: #CFF4FC;
@@ -126,7 +127,15 @@
                 <form id="prev" class="col col-auto" action="/viewprev" method="POST">
                 <input type="hidden" name="current" value="{{obj.id}}">
                 <input type="hidden" name="eids" value="{{eids}}">
-                <button class="btn btn-outline-info h-75" id="la">
+                <input id="prev_fname" type="hidden" name="fname" value="">
+                <input id="prev_faces" type="hidden" name="faces" value="">
+                <input id="prev_distance" type="hidden" name="distance" value="">
+                <button class="btn btn-outline-info h-75" id="la"
+                    onClick="
+                        $('#prev_fname').val($('#fname').prop('checked'))
+                        $('#prev_faces').val($('#faces').prop('checked'))
+                        $('#prev_distance').val($('#distance').prop('checked'))
+                        ">
                     <svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('static', filename='upstream/icons.svg')}}#prev"/></svg>
                 </button>
                 </form id="prev">
@@ -147,13 +156,19 @@
                             {% if face.refimg %}
                                 data['who']='{{face.refimg.person.tag}}'
                                 data['distance']="{{face.refimg_lnk.face_distance|round(2)}}"
+                                data['model']="{{face.facefile_lnk.model_used}}"
                             {% endif %}
                             faces.push( data )
                         {% endfor %}
                         var context = canvas.getContext('2d')
                         window.addEventListener('resize', DrawImg, false);
                     </script>
-                    <figcaption class="figure-caption text-center text-wrap text-break">{{obj.name}}</figcaption>
+                    <figcaption class="figure-caption text-center text-wrap text-break"
+                        {% if sels['fname']=='false' %}
+                            style="display:none"
+                        {% endif %}
+                        >{{obj.name}}
+                    </figcaption>
                 </figure>
             {% elif obj.type.name == "Video" %}
                 <video id="_v" controls>
@@ -172,7 +187,15 @@
                         <form id="next" class="col col-auto" action="/viewnext" method="POST">
                         <input type="hidden" name="current" value="{{obj.id}}">
                         <input type="hidden" name="eids" value="{{eids}}">
-                        <button class="col col-auto btn btn-outline-info h-75" id="ra">
+                        <input id="next_fname" type="hidden" name="fname" value="">
+                        <input id="next_faces" type="hidden" name="faces" value="">
+                        <input id="next_distance" type="hidden" name="distance" value="">
+                        <button class="col col-auto btn btn-outline-info h-75" id="ra" 
+                            onClick="
+                                $('#next_fname').val($('#fname').prop('checked'))
+                                $('#next_faces').val($('#faces').prop('checked'))
+                                $('#next_distance').val($('#distance').prop('checked'))
+                                ">
                             <svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('static', filename='upstream/icons.svg')}}#next"/></svg>
                         </button>
                         </form id="next">
@@ -184,23 +207,31 @@
     <div class="row">
         <span class="d-flex col-1 justify-content-end my-auto">Show:</span>
         <div class="d-flex form-check form-switch border border-info rounded col-1 my-auto py-1 justify-content-center">
-          <input class="form-check-input" type="checkbox" checked id="fname" onChange="$('.figure-caption').toggle()">
+          <input class="form-check-input" type="checkbox" id="fname" onChange="$('.figure-caption').toggle()"
+          {% if sels['fname']=='true' %} checked {% endif %} >
           <label class="form-check-label" for="fname">Filename</label>
         </div>
         <div class="d-flex form-check form-switch border border-info rounded col-1 my-auto py-1 justify-content-center">
-          <input class="form-check-input" type="checkbox" onChange="FaceToggle()" id="faces">
+          <input class="form-check-input" type="checkbox" onChange="FaceToggle()" id="faces"
+              {% if not obj.file_details.faces %} disabled {% endif %}
+              {% if sels['faces']=='true' %} checked {% endif %} 
+              >
           <label class="form-check-label" for="faces">Faces</label>
         </div>
         <div class="d-flex form-check form-switch border border-info rounded col-1 my-auto py-1 justify-content-center">
-          <input class="form-check-input" type="checkbox" disabled onChange="DrawImg()" id="distance">
+          <input class="form-check-input" type="checkbox" onChange="DrawImg()" id="distance"
+              {% if not obj.file_details.faces or sels['faces']=='false' %} disabled {% endif %} 
+              {% if sels['distance']=='true' %} checked {% endif %}
+              >
           <label class="form-check-label" for="distance">Distance</label>
         </div>
         <span class="col col-auto my-auto py-1">AI Model:</span>
         <div class="col col-auto">
-        <select id="model" class="form-select">
-            <option>hog</option>
-            <option>cnn</option>
-        </select>
+        {% if not obj.file_details.faces %}
+            {{CreateSelect( "model", 0, ["N/A", "normal", "slow/accurate"], "", "rounded-end h-100 norm-txt", [0,1,2])|safe }}
+        {% else %}
+            {{CreateSelect( "model", obj.file_details.faces[0].facefile_lnk.model_used, ["normal", "slow/accurate"], "", "rounded-end h-100 norm-txt", [1,2])|safe }}
+        {% endif %}
         </div>
     </div class="row">
 {% endblock main_content %}
@@ -217,9 +248,15 @@ $( document ).keydown(function(event) {
         case "ArrowRight":
             $('#ra').click()
             break;
+        case "d":
+            $('#distance').click()
+            break;
         case "f":
             $('#faces').click()
             break;
+        case "n":
+            $('#fname').click()
+            break;
         default:
             return; // Quit when this doesn't handle the key event.
     }