move to form toggles, made them bg-info colours give or take, made the fname, face & distance toggles work. The model drop-down is not set correctly, or taking action, but mara needs more rel mem to run cnn model anyway

templates/viewer.html

@@ -1,4 +1,17 @@
 {% extends "base.html" %} {% block main_content %}
+{# make the form-switch / toggle info color set, give or take #}
+<style>
+.form-check-input:checked {
+    background-color: #39C0ED;
+    border-color: #CFF4FC;
+}
+.form-switch .form-check-input {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2339C0ED'/%3e%3c/svg%3e");
+}
+.form-switch .form-check-input:focus {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23CFF4FC'/%3e%3c/svg%3e");
+}
+</style>
 <script>
     var gap=0.8
 
@@ -35,7 +48,7 @@
         // actually draw the pixel images to the canvas at the right size
         context.drawImage(im, 0, 0, canvas.width, canvas.height )
 
-        if( $('#faces').attr('faces') == 1 )
+        if( $('#faces').prop('checked') )
         {
             // draw rect on each face
             for( i=0; i<faces.length; i++ )
@@ -57,7 +70,11 @@
                     context.lineWidth = 0.1
                     context.font = "30px Arial"
                     context.globalAlpha = 0.6
-                    bbox = context.measureText(faces[i].who);
+                    str=faces[i].who
+                    if( $('#distance').prop('checked') )
+                        str += "("+faces[i].distance+")"
+
+                    bbox = context.measureText(str);
                     f_h=bbox.fontBoundingBoxAscent
                     if( bbox.fontBoundingBoxDescent )
                         f_h += bbox.fontBoundingBoxDescent
@@ -71,7 +88,7 @@
                     context.font = "30px Arial"
                     context.textAlign = "center"
                     context.fillStyle = "green"
-                    context.fillText(faces[i].who, x+w/2, y-2)
+                    context.fillText(str, x+w/2, y-2)
                 }
                 /* can use to show lower left coords of a face for debugging
                 else
@@ -93,20 +110,12 @@
         $('#_v').height(window.innerHeight*gap)
     }
 
-    function Toggle(id)
+    function FaceToggle()
     {
-        b=$('.'+id+'_label')
-        b.toggleClass('text-success')
-        b.toggleClass('text-secondary')
-        b.toggleClass('border-success')
-        b.toggleClass('border-secondary')
-        b=$('#'+id )
-        if( b.attr('faces') == 1 )
-            b.attr('faces', 0 )
-        else
-            b.attr('faces', 1 )
+        $('#distance').prop('disabled', function(i, v) { return !v; });
         DrawImg()
     }
+
 </script>
 
 <div id="viewer" class="container-fluid">
@@ -137,6 +146,7 @@
                                 }
                             {% if face.refimg %}
                                 data['who']='{{face.refimg.person.tag}}'
+                                data['distance']="{{face.refimg_lnk.face_distance|round(2)}}"
                             {% endif %}
                             faces.push( data )
                         {% endfor %}
@@ -170,13 +180,29 @@
                 {% endif %}
             {% endfor %}
         </div id="/form-row">
-    <div id="bbar" class="row">
-        <div id="faces" faces=0 class="faces_label col col-auto border border-secondary rounded p-1 ms-5 mt-1" onClick="Toggle('faces')">
-            <svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('static', filename='upstream/icons.svg')}}#brain"/></svg>
-            <label class="sm-txt faces_label text-secondary">&nbsp;faces</label></span>
+{# use this for color of toggles: https://www.codeply.com/p/4sL9uhevwJ #}
+    <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()">
+          <label class="form-check-label" for="fname">Filename</label>
         </div>
-    </div>
-</div class="container">
+        <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">
+          <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">
+          <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>
+        </div>
+    </div class="row">
 {% endblock main_content %}
 {% block script_content %}
 <script>
@@ -192,7 +218,7 @@ $( document ).keydown(function(event) {
             $('#ra').click()
             break;
         case "f":
-            Toggle('faces')
+            $('#faces').click()
             break;
         default:
             return; // Quit when this doesn't handle the key event.