refimgs now contain face, orig_w, orig_h and face_locns. This is done via json.* to allow arrays to be saved/loaded back into face_locn - not useful for refimg as there has to be only 1, but tested for images where there will be many faces. This commit has a fair few changes. So overall, no more refimg menus/creation. You now create a person (the add button is hidden until you save), when you save you go back to the person you created rather than the list of persons. From there you can click add ref img, and it will create a thumbnail, and draw a green box around the face locations based on the data. Persons can have many refimgs, and they will all work the same, be formatted prettily no matter how many you have. Each refimg "tab" not only has the thumbnail, but also a red X click to delete button that will remove all refimg data and connection to the person table too. This all works/is tested.
This commit is contained in:
@@ -1,67 +1,118 @@
|
||||
{% extends "base.html" %} {% block main_content %}
|
||||
<div class="container-fluid">
|
||||
<h3 class="offset-lg-3">{{page_title}}</h3>
|
||||
<form id="pfm" class="form form-inline" action="" method="POST">
|
||||
{% for field in form %}
|
||||
{% if field.type == 'HiddenField' or field.type == 'CSRFTokenField' %}
|
||||
{{field}}<br>
|
||||
{% elif field.type != 'SubmitField' %}
|
||||
<div class="form-row col-lg-12">
|
||||
{{ field.label( class="col-lg-3" ) }}
|
||||
{{ field( class="form-control col" ) }}
|
||||
</div class="form-row col-lg-12">
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="form-row col-lg-12">
|
||||
<span class="col-lg-3"><center>Reference Images:</center></span>
|
||||
{% for ref_img in person.refimg %}
|
||||
{% set offset="" %}
|
||||
{% if (loop.index % 10) == 0 %}
|
||||
{% set offset= "offset-lg-3" %}
|
||||
{% endif %}
|
||||
<div id="RI{{ref_img.id}}" class="px-0 col-lg-1 w-100 {{offset}}">
|
||||
<input type="hidden" id="ref-img-id-{{ref_img.id}}" name="ref-img-id-{{ref_img.id}}" value="1"></input>
|
||||
<figure style="border: 1px solid #5bc0de; border-radius: 3px;" class="figure my-auto h-100 w-100">
|
||||
<div style="position:relative">
|
||||
<center><img height="128" class="thumb" src="data:image/jpeg;base64,{{ref_img.thumbnail}}"></img></center>
|
||||
<div style="position:absolute; top: 2; right: 2;">
|
||||
<button type="button" style="font-size:12px" class="btn btn-danger"
|
||||
onClick="DelImg({{ref_img.id}})">X</button>
|
||||
</div>
|
||||
<figcaption class="figure-caption text-center text-wrap text-break">{{ref_img.fname}}</figcaption>
|
||||
</div>
|
||||
</figure>
|
||||
</div id="/RI*">
|
||||
{% endfor %}
|
||||
</div class="form-row col-lg-12">
|
||||
<div class="form-row col-lg-12">
|
||||
<br>
|
||||
</div class="form-row">
|
||||
<div class="form-row col-lg-12">
|
||||
{{ form.save( id="save", class="btn btn-primary offset-lg-3 col-lg-2" )}}
|
||||
{% if 'Edit' in page_title %}
|
||||
{{ form.delete( class="btn btn-outline-danger col-lg-2" )}}
|
||||
{% endif %}
|
||||
</div class="form-row">
|
||||
</form>
|
||||
<form id="new_ri" class="form" action="{{url_for('add_refimg')}}" method="POST" enctype="multipart/form-data">
|
||||
<input type="hidden" name="person_id" value="{{person.id}}"></input>
|
||||
<label class="btn btn-success offset-lg-3 col-lg-2">
|
||||
Add reference image
|
||||
<input name="refimg_file" type="file" onChange="$('#new_ri').submit()" style="display:none;" id="new_file_chooser">
|
||||
</label>
|
||||
</form>
|
||||
</div class="row">
|
||||
</div class="container">
|
||||
<script>
|
||||
// Define this once and before it will be called, hence at the top of this file
|
||||
function DrawRefimg(img, canvas, orig_face )
|
||||
{
|
||||
// FIXME: should get this from shared.py, not sure why this doesnt work at present
|
||||
thumbsize=256
|
||||
|
||||
context=canvas.getContext('2d')
|
||||
// another call to this func will occur on load, so skip this one
|
||||
if( img.width == 0 )
|
||||
return
|
||||
|
||||
// only set canvas.width once we have valid img dimensions
|
||||
canvas.width=img.width/2
|
||||
|
||||
// actually draw the pixel images to the canvas at the right size
|
||||
context.drawImage(img, 0, 0, img.width/(img.height/canvas.height), canvas.height);
|
||||
|
||||
// draw rectangle on face
|
||||
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();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="offset-lg-3">{{page_title}}</h3>
|
||||
<form id="pfm" class="form form-inline" action="" method="POST">
|
||||
{% for field in form %}
|
||||
{% if field.type == 'HiddenField' or field.type == 'CSRFTokenField' %}
|
||||
{{field}}<br>
|
||||
{% elif field.type != 'SubmitField' %}
|
||||
<div class="form-row col-lg-12">
|
||||
{{ field.label( class="col-lg-3" ) }}
|
||||
{{ field( class="form-control col" ) }}
|
||||
</div class="form-row col-lg-12">
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="form-row col-lg-12">
|
||||
<span class="col-lg-3"><center>Reference Images:</center></span>
|
||||
{% for refimg in person.refimg %}
|
||||
{% set offset="" %}
|
||||
{% if (loop.index % 10) == 0 %}
|
||||
{% set offset= "offset-lg-3" %}
|
||||
{% endif %}
|
||||
<div id="RI{{refimg.id}}" class="px-0 col-lg-1 w-100 {{offset}}">
|
||||
<center>
|
||||
<input type="hidden" id="ref-img-id-{{refimg.id}}" name="ref-img-id-{{refimg.id}}" value="1"></input>
|
||||
<figure style="border: 1px solid #5bc0de; border-radius: 3px;" class="figure my-auto h-100 w-100">
|
||||
<div style="position:relative">
|
||||
<canvas id="c_{{refimg.id}}" height="128"></canvas>
|
||||
<script>
|
||||
var im_{{refimg.id}}=new Image();
|
||||
im_{{refimg.id}}.src="data:image/jpeg;base64,{{refimg.thumbnail}}";
|
||||
|
||||
// store this stuff in an javascript Object to use when document is ready event is triggered
|
||||
var orig_face_{{refimg.id}}=new Object;
|
||||
orig_face_{{refimg.id}}.x = {{refimg.face_locn[0][3]}}
|
||||
orig_face_{{refimg.id}}.y = {{refimg.face_locn[0][0]}}
|
||||
orig_face_{{refimg.id}}.w = {{refimg.face_locn[0][1]}}-{{refimg.face_locn[0][3]}}
|
||||
orig_face_{{refimg.id}}.h = {{refimg.face_locn[0][2]}}-{{refimg.face_locn[0][0]}}
|
||||
orig_face_{{refimg.id}}.orig_w = {{refimg.orig_w}}
|
||||
orig_face_{{refimg.id}}.orig_h = {{refimg.orig_h}}
|
||||
|
||||
// when the document is ready, then DrawRefimg
|
||||
$(function() { DrawRefimg(im_{{refimg.id}}, c_{{refimg.id}}, orig_face_{{refimg.id}} ) });
|
||||
|
||||
</script>
|
||||
<div style="position:absolute; top: 2; right: 2;">
|
||||
<button type="button" style="font-size:12px" class="btn btn-danger"
|
||||
onClick="DelImg({{refimg.id}})">X</button>
|
||||
</div>
|
||||
<figcaption class="figure-caption text-center text-wrap text-break">{{refimg.fname}}</figcaption>
|
||||
</div>
|
||||
</figure>
|
||||
</center>
|
||||
</div id="/RI*">
|
||||
{% endfor %}
|
||||
</div class="form-row col-lg-12">
|
||||
<div class="form-row col-lg-12">
|
||||
<br>
|
||||
</div class="form-row">
|
||||
<div class="form-row col-lg-12">
|
||||
{{ form.save( id="save", class="btn btn-primary offset-lg-3 col-lg-2" )}}
|
||||
{% if 'Edit' in page_title %}
|
||||
{{ form.delete( class="btn btn-outline-danger col-lg-2" )}}
|
||||
{% endif %}
|
||||
</div class="form-row">
|
||||
</form>
|
||||
{% if person.id %}
|
||||
<form id="new_ri" class="form" action="{{url_for('add_refimg')}}" method="POST" enctype="multipart/form-data">
|
||||
<input type="hidden" name="person_id" value="{{person.id}}"></input>
|
||||
<label class="btn btn-success offset-lg-3 col-lg-2">
|
||||
Add reference image
|
||||
<input name="refimg_file" type="file" onChange="$('#new_ri').submit()" style="display:none;" id="new_file_chooser">
|
||||
</label>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div class="container">
|
||||
{% endblock main_content %}
|
||||
|
||||
{% block script_content %}
|
||||
<script>
|
||||
function DelImg(ri_num)
|
||||
{
|
||||
$('#RI'+ri_num).remove()
|
||||
$('#pfm').submit()
|
||||
$('#RI'+ri_num).remove()
|
||||
$('#pfm').submit()
|
||||
}
|
||||
|
||||
</script>
|
||||
{% endblock script_content %}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user