viewer now has toggle to turn on face bounding box + nametag

templates/viewer.html

@@ -35,25 +35,47 @@
         // actually draw the pixel images to the canvas at the right size
         context.drawImage(im, 0, 0, canvas.width, canvas.height )
 
-        // draw rect on each face
+        if( $('#faces').attr('faces') == 1 )
-        for( i=0; i<faces.length; i++ )
         {
-            x = faces[i].x / ( im.width/canvas.width )
+            // draw rect on each face
-            y = faces[i].y / ( im.height/canvas.height )
+            for( i=0; i<faces.length; i++ )
-            w = faces[i].w / ( im.width/canvas.width )
-            h = faces[i].h / ( im.height/canvas.height )
-            context.beginPath();
-            context.rect( x, y, w, h )
-            context.lineWidth = 2;
-            context.strokeStyle = 'green';
-            if( faces[i].who )
             {
-                context.font = "30px Arial";
+                x = faces[i].x / ( im.width/canvas.width )
-                context.textAlign = "center";
+                y = faces[i].y / ( im.height/canvas.height )
-                context.fillStyle = "green";
+                w = faces[i].w / ( im.width/canvas.width )
-                context.fillText(faces[i].who, x+w/2, y-4);
+                h = faces[i].h / ( im.height/canvas.height )
+                context.beginPath()
+                context.rect( x, y, w, h )
+                context.lineWidth = 2
+                context.strokeStyle = 'green'
+                if( faces[i].who )
+                {
+                    // finish face box, need to clear out new settings for
+                    // transparent backed-name tag
+                    context.stroke();
+                    context.beginPath()
+                    context.lineWidth = 0.1
+                    context.font = "30px Arial"
+                    context.globalAlpha = 0.7
+                    bbox = context.measureText(faces[i].who);
+                    console.log(bbox)
+                    f_h=bbox.fontBoundingBoxAscent
+                    if( bbox.fontBoundingBoxDescent )
+                        f_h += bbox.fontBoundingBoxDescent
+                    f_h -= 8
+                    context.rect( x+w/2-bbox.width/2, y-f_h, bbox.width, f_h )
+                    context.fillStyle="black"
+                    context.fill()
+                    context.stroke();
+                    context.beginPath()
+                    context.globalAlpha = 1.0
+                    context.font = "30px Arial"
+                    context.textAlign = "center"
+                    context.fillStyle = "green"
+                    context.fillText(faces[i].who, x+w/2, y-2)
+                }
+                context.stroke();
             }
-            context.stroke();
         }
     }
 
@@ -61,12 +83,28 @@
     {
         $('#_v').height(window.innerHeight*gap)
     }
+
+    function Toggle(id)
+    {
+        b=$('#'+id )
+        b.toggleClass('badge-info')
+        b.toggleClass('badge-outline-info')
+        b.toggleClass('text-white')
+        b.toggleClass('text-secondary')
+        if( b.attr('faces') == 1 )
+            b.attr('faces', 0 )
+        else
+            b.attr('faces', 1 )
+        DrawImg()
+    }
 </script>
 
 <div id="viewer" class="container-fluid">
     {% set max=eids.split(',')|length %}
-    <br>
+    <div id="bbar" class="form-row offset-lg-1 col">
-            <center>
+        <span id="faces" class="badge p-2 text-secondary" data-toggle="button" onClick="Toggle('faces')" style="border: 1px solid #5bc0de" faces=0><i class="fas fa-brain fa-2x"></i></button>
+    </div>
+    <center>
         <input type="hidden" name="eids" value={{eids}}>
         <div class="form-row col-lg-12">
             {% if eids.find(obj.id|string) > 0 %}
@@ -94,7 +132,6 @@
                             {% endif %}
                             faces.push( data )
                         {% endfor %}
-                        console.log( faces )
                         var context = canvas.getContext('2d')
                         window.addEventListener('resize', DrawImg, false);
                     </script>
@@ -123,8 +160,7 @@
                 {% endif %}
             {% endfor %}
         </div id="/form-row">
-    </div class="form-row col-lg-12">
+    </center>
-            </center>
 </div class="container">
 {% endblock main_content %}
 {% block script_content %}