ddp/photoassistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Damien De Paoli
2021-07-19 18:48:39 +10:00
parent 6355cff98e
commit 44620f1e18
1 changed files with 57 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
templates/viewer.html
View File

@@ -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
for( i=0; i<faces.length; i++ )
if( $('#faces').attr('faces') == 1 )
{
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 )
// draw rect on each face
for( i=0; i<faces.length; i++ )
{
context.font = "30px Arial";
context.textAlign = "center";
context.fillStyle = "green";
context.fillText(faces[i].who, x+w/2, y-4);
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 )
{
// 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>
<center>
<div id="bbar" class="form-row offset-lg-1 col">
<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 %}