From 24c4b962e5fdbff27b73bdba9e8b419c4df804b6 Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Sat, 17 Jul 2021 16:37:43 +1000
Subject: [PATCH] now draws green rectangle and person.tag for matches on faces
 -- need to fix interface, but it works - lots of "plumbing" across
 database/classes and this viewer.html to get this to work

---
 templates/viewer.html | 42 +++++++++++++++++++++++++++++++-----------
 1 file changed, 31 insertions(+), 11 deletions(-)

diff --git a/templates/viewer.html b/templates/viewer.html
index 9fbcd9d..87c1737 100644
--- a/templates/viewer.html
+++ b/templates/viewer.html
@@ -35,17 +35,26 @@
         // actually draw the pixel images to the canvas at the right size
         context.drawImage(im, 0, 0, canvas.width, canvas.height )
 
-        /* need a for loop
-        context.beginPath();
-        new_x=(orig_face.x/orig_face.orig_w)*img.width/(img.height/canvas.height)
-        new_y=(orig_face.y/orig_face.orig_h)*thumbsize/(img.height/canvas.height)
-        new_w=(orig_face.w/orig_face.orig_w)*img.width/(img.height/canvas.height)
-        new_h=(orig_face.h/orig_face.orig_h)*thumbsize/(img.height/canvas.height)
-        context.rect(new_x, new_y, new_w, new_h)
-        context.lineWidth = 2;
-        context.strokeStyle = 'green';
-        context.stroke();
-        */
+        // draw rect on each face
+        for( i=0; i<faces.length; i++ )
+        {
+            x = faces[i].x / ( im.width/canvas.width )
+            y = faces[i].y / ( im.height/canvas.height )
+            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";
+                context.textAlign = "center";
+                context.fillStyle = "green";
+                context.fillText(faces[i].who, x+w/2, y-4);
+            }
+            context.stroke();
+        }
     }
 
     function ResizeVideo()
@@ -74,6 +83,17 @@
                         var im=new Image();
                         im.onload=DrawImg
                         im.src="/{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}"
+                        var faces=[]
+                        {% for face in obj.file_details.faces %}
+                            data = { 
+                                'name': 'TST', 'x': '{{face.locn[3]}}', 'y': '{{face.locn[0]}}', 'w': '{{face.locn[1]-face.locn[3]}}', 'h':'{{face.locn[2]-face.locn[0]}}' 
+                                }
+                            {% if face.refimg %}
+                                data['who']='{{face.refimg.person.tag}}'
+                            {% endif %}
+                            faces.push( data )
+                        {% endfor %}
+                        console.log( faces )
                         var context = canvas.getContext('2d')
                         window.addEventListener('resize', DrawImg, false);
                     </script>