94 lines
4.6 KiB
HTML
94 lines
4.6 KiB
HTML
{% extends "base.html" %} {% block main_content %}
|
|
<script src="{{ url_for( 'internal', filename='js/face.js')}}"></script>
|
|
|
|
<div class="container-fluid">
|
|
<div class="row col-12"><h3 class="offset-3">{{page_title}}</h3></div>
|
|
<form id="pfm" class="form form-inline" action="" method="POST">
|
|
{% for field in form %}
|
|
{% if field.type == 'HiddenField' or field.type == 'CSRFTokenField' %}
|
|
{{field}}
|
|
{% elif field.type != 'SubmitField' %}
|
|
<div class="row col-12">
|
|
{{ field.label( class="col-3" ) }}
|
|
{{ field( class="form-control col" ) }}
|
|
</div class="row col-12">
|
|
{% endif %}
|
|
{% endfor %}
|
|
<div class="row col-12">
|
|
<label class="col-3">Reference Images:</label>
|
|
{% for refimg in person.refimg %}
|
|
{% set offset="" %}
|
|
{% if (loop.index % 10) == 0 %}
|
|
{% set offset= "offset-3" %}
|
|
{% endif %}
|
|
<div id="RI{{refimg.id}}" class="col-1 px-0 {{offset}}">
|
|
<input type="hidden" id="ref-img-id-{{refimg.id}}" name="ref-img-id-{{refimg.id}}" value="1"></input>
|
|
<figure id="fig_{{refimg.id}}">
|
|
<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}}";
|
|
fig_{{refimg.id}}=$('#fig_{{refimg.id}}')
|
|
|
|
// 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.tmp_locn[3]}}
|
|
orig_face_{{refimg.id}}.y = {{refimg.tmp_locn[0]}}
|
|
orig_face_{{refimg.id}}.w = {{refimg.tmp_locn[1]}}-{{refimg.tmp_locn[3]}}
|
|
orig_face_{{refimg.id}}.h = {{refimg.tmp_locn[2]}}-{{refimg.tmp_locn[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( fig_{{refimg.id}}, im_{{refimg.id}}, c_{{refimg.id}}, orig_face_{{refimg.id}} ) });
|
|
|
|
</script>
|
|
<div style="position:absolute; top: 2px; right: 2px;">
|
|
<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>
|
|
</div id="/RI*">
|
|
{% endfor %}
|
|
<div id="throb" style="display:none" class="col-1 px-0 {{offset}}">
|
|
<img height="64px" src="{{url_for('internal', filename='throbber.gif')}}"></img>
|
|
</div>
|
|
</div class="row col-12">
|
|
<div class="row col-12">
|
|
<br>
|
|
</div class="form-row">
|
|
<div class="row col-12">
|
|
{{ form.save( id="save", class="btn btn-primary offset-3 col-2" )}}
|
|
{% if 'Edit' in page_title %}
|
|
{{ form.delete( class="btn btn-outline-danger col-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>
|
|
<div class="row col-12">
|
|
<label class="btn btn-success offset-3 col-2">
|
|
Add reference image
|
|
<input name="refimg_file" type="file" onChange="$('#throb').attr('style','show'); $('#new_ri').submit()" style="display:none;" id="new_file_chooser">
|
|
</label>
|
|
</div class="row col-12">
|
|
</form>
|
|
{% endif %}
|
|
</div class="container">
|
|
{% endblock main_content %}
|
|
|
|
{% block script_content %}
|
|
<script>
|
|
function DelImg(ri_num)
|
|
{
|
|
$('#RI'+ri_num).remove()
|
|
$('#pfm').submit()
|
|
}
|
|
|
|
</script>
|
|
{% endblock script_content %}
|