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

complete rewrite of viewer, videos need to be fixed. Otherwise, viewer now loads entry data for all "how_many" images on the screen, and allows prev/next movement between images without a DB load for the current page of images, then as required, it will retrieve the prev/next "how_many" from the database via /viewlist route, and go back into view/<id> of the appropriate new image of the new list. Also prevents going below 0 and beyond end of DB for the first time.

Browse Source
This commit is contained in:
Damien De Paoli
2021-08-27 23:38:31 +10:00
parent 652a89161d
commit 1d3caf17de
6 changed files with 419 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

269
templates/viewer.html
View File

@@ -21,6 +21,33 @@
var grayscale=0
var throbber=0
var objs=[]
var current={{current}}
var eids="{{eids}}"
var eid_lst=eids.split(",")
{% for id in objs %}
e=new Object()
e.name = "{{objs[id].name}}"
e.url = "{{objs[id].FullPathOnFS()}}"
{% if objs[id].file_details.faces %}
e.face_model="{{objs[id].file_details.faces[0].facefile_lnk.model_used}}"
{% endif %}
e.faces=[]
{% for face in objs[id].file_details.faces %}
data = {
'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}}'
data['distance']="{{face.refimg_lnk.face_distance|round(2)}}"
{% endif %}
e.faces.push( data )
{% endfor %}
objs[{{id}}]=e
{% endfor %}
function NewWidth()
{
w_r=im.width/(window.innerWidth*gap)
@@ -61,20 +88,48 @@
else
$('#throbber').hide();
// show (or not) the whole figcaption with fname in it - based on state of fname_toggle
if( $('#fname_toggle').prop('checked' ) )
{
$('.figcaption').attr('style', 'display:show' )
// reset fname for new image (if navigated left/right to get here)
$('#fname').html(objs[current].name)
}
else
$('.figcaption').attr('style', 'display:none' )
// if we have faces, the enable the toggles, otherwise disable them
// and reset model select too
if( objs[current].faces.length )
{
$('#faces').attr('disabled', false)
$('#distance').attr('disabled', false)
$('#model').val( Number(objs[current].face_model) )
}
else
{
$('#faces').attr('disabled', true)
$('#distance').attr('disabled', true)
// if no faces, then model is N/A (always 1st element - or 0 in select)
$('#model').val(0)
}
// okay, we want faces drawn so lets do it
if( $('#faces').prop('checked') )
{
// draw rect on each face
for( i=0; i<faces.length; i++ )
for( i=0; i<objs[current].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 )
x = objs[current].faces[i].x / ( im.width/canvas.width )
y = objs[current].faces[i].y / ( im.height/canvas.height )
w = objs[current].faces[i].w / ( im.width/canvas.width )
h = objs[current].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 )
if( objs[current].faces[i].who )
{
// finish face box, need to clear out new settings for
// transparent backed-name tag
@@ -83,9 +138,9 @@
context.lineWidth = 0.1
context.font = "30px Arial"
context.globalAlpha = 0.6
str=faces[i].who
str=objs[current].faces[i].who
if( $('#distance').prop('checked') )
str += "("+faces[i].distance+")"
str += "("+objs[current].faces[i].distance+")"
bbox = context.measureText(str);
f_h=bbox.fontBoundingBoxAscent
@@ -109,8 +164,8 @@
context.font = "14px Arial"
context.textAlign = "center"
context.fillStyle = "black"
context.fillText( 'x=' + faces[i].x + ', y=' + faces[i].y, x+w/2, y-2)
context.fillText( 'x=' + faces[i].x + ', y=' + faces[i].y, x+w/2, y-2)
context.fillText( 'x=' + objs[current].faces[i].x + ', y=' + objs[current].faces[i].y, x+w/2, y-2)
context.fillText( 'x=' + objs[current].faces[i].x + ', y=' + objs[current].faces[i].y, x+w/2, y-2)
}
*/
context.stroke();
@@ -129,128 +184,133 @@
DrawImg()
}
function CallViewListRoute(dir)
{
s='<form id="_fmv" method="POST" action="/viewlist">'
s+='<input type="hidden" name="eids" value="'+$("#eids").val() + '">'
s+='<input type="hidden" name="noo" value="{{OPT['noo']}}">'
s+='<input type="hidden" name="cwd" value="{{OPT['cwd']}}">'
s+='<input type="hidden" name="root" value="{{OPT['root']}}">'
s+='<input type="hidden" name="size" value="{{OPT['size']}}">'
s+='<input type="hidden" name="grouping" value="{{OPT['grouping']}}">'
s+='<input type="hidden" name="offset" value="{{OPT['offset']}}">'
s+='<input type="hidden" name="folders" value="{{OPT['folders']}}">'
s+='<input type="hidden" name="how_many" value="{{OPT['how_many']}}">'
s+='<input type="hidden" name="orig_url" value="{{request.path}}">'
s+='<input type="hidden" name="' + dir + '" value="1">'
{% if search_term is defined %}
s+='<input type="hidden" name="search_term" value="{{search_term}}">'
{% endif %}
s+='</form>'
$(s).appendTo('body')
$('#_fmv').submit();
}
</script>
<div id="viewer" class="container-fluid">
{% set max=eids.split(',')|length %}
<input type="hidden" name="eids" value={{eids}}>
<div class="row">
{% if eids.find(obj.id|string) > 0 %}
<form id="prev" class="col col-auto" action="/viewprev" method="POST">
<input id="current" type="hidden" name="current" value="{{obj.id}}">
<input type="hidden" name="eids" value="{{eids}}">
<input id="prev_fname" type="hidden" name="fname" value="">
<input id="prev_faces" type="hidden" name="faces" value="">
<input id="prev_distance" type="hidden" name="distance" value="">
<button title="Show previous image" class="btn btn-outline-info h-75" id="la"
<button title="Show previous image" class="col-auto btn btn-outline-info px-2" style="padding: 10%" id="la"
onClick="
$('#prev_fname').val($('#fname').prop('checked'))
$('#prev_faces').val($('#faces').prop('checked'))
$('#prev_distance').val($('#distance').prop('checked'))
cidx = eid_lst.indexOf(current.toString())
prev=cidx-1
if( prev < 0 )
{
if( {{OPT['offset']}} )
{
CallViewListRoute('prev')
return
}
else
{
$('#la').attr('disabled', true )
prev=0
}
}
$('#ra').attr('disabled', false )
current=eid_lst[prev]
im.src='http://mara.ddp.net:5000/' + objs[current].url
">
<svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#prev"/></svg>
</button>
</form id="prev">
{% endif %}
{% if obj.type.name == "Image" %}
<figure class="col col-auto border border-info rounded m-0 p-1" id="figure">
<canvas id="canvas"></canvas>
<img id="throbber" src="{{url_for('internal', filename='throbber.gif')}}" style="display:none;">
{% if objs[current].type.name == "Image" %}
<figure class="col col-auto border border-info rounded m-0 p-1" id="figure">
<canvas id="canvas"></canvas>
<img id="throbber" src="{{url_for('internal', filename='throbber.gif')}}" style="display:none;">
<script>
var im=new Image();
im.onload=DrawImg
im.src="http://mara.ddp.net:5000/" + objs[current].url
var context = canvas.getContext('2d')
window.addEventListener('resize', DrawImg, false);
</script>
<figcaption class="figure-caption text-center text-wrap text-break"><span id="fname">{{objs[current].name}}</span></figcaption>
</figure>
{% elif objs[current].type.name == "Video" %}
<video id="_v" controls>
<source src="http://mara.ddp.net:5000/{{objs[current].FullPathOnFS()}}" type="video/mp4">
Your browser does not support the video tag.
</video>
<script>
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 = {
'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}}'
data['distance']="{{face.refimg_lnk.face_distance|round(2)}}"
data['model']="{{face.facefile_lnk.model_used}}"
{% endif %}
faces.push( data )
{% endfor %}
var context = canvas.getContext('2d')
window.addEventListener('resize', DrawImg, false);
window.addEventListener('resize', ResizeVideo, false);
ResizeVideo()
</script>
<figcaption class="figure-caption text-center text-wrap text-break"
{% if sels['fname']=='false' %}
style="display:none"
{% endif %}
>{{obj.name}}
</figcaption>
</figure>
{% elif obj.type.name == "Video" %}
<video id="_v" controls>
<source src="/{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}" type="video/mp4">
Your browser does not support the video tag.
</video>
<script>
window.addEventListener('resize', ResizeVideo, false);
ResizeVideo()
</script>
{% endif %}
{% for eid in eids.split(',') %}
{% if loop.index == max-1 %}
{% if eid|int != obj.id %}
<form id="next" class="col col-auto" action="/viewnext" method="POST">
<input type="hidden" name="current" value="{{obj.id}}">
<input type="hidden" name="eids" value="{{eids}}">
<input id="next_fname" type="hidden" name="fname" value="">
<input id="next_faces" type="hidden" name="faces" value="">
<input id="next_distance" type="hidden" name="distance" value="">
<button title="Show next image" class="col col-auto btn btn-outline-info h-75" id="ra"
onClick="
$('#next_fname').val($('#fname').prop('checked'))
$('#next_faces').val($('#faces').prop('checked'))
$('#next_distance').val($('#distance').prop('checked'))
">
<svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#next"/></svg>
</button>
</form id="next">
{% endif %}
{% endif %}
{% endfor %}
<button title="Show next image" class="col-auto btn btn-outline-info px-2" style="padding: 10%" id="ra"
onClick="
{% if 'last_entry_in_db' in OPT %}
if( current == {{OPT['last_entry_in_db']}} )
{
$('#ra').attr('disabled', true )
return
}
{% endif %}
cidx = eid_lst.indexOf(current.toString())
if( cidx < eid_lst.length-1 )
{
current=eid_lst[cidx+1]
im.src='http://mara.ddp.net:5000/' + objs[current].url
$('#la').attr('disabled', false )
}
else
{
{# only go next route if list contains as many elements as we asked to display... can be more than how_many on any page in reality, as its really how_many per dir? #}
if( eid_lst.length >= {{OPT['how_many']}} )
CallViewListRoute('next')
}
">
<svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#next"/></svg>
</button>
</div id="/form-row">
{# use this for color of toggles: https://www.codeply.com/p/4sL9uhevwJ #}
<div class="row">
{# this whole div, just takes up the same space as the left button and is hidden for alignment only #}
<div class="col col-auto">
<button class="btn btn-outline-info" disabled style="visibility:hidden">
<div class="col-auto px-0">
<button class="btn btn-outline-info px-2" disabled style="visibility:hidden">
<svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#next"/></svg>
</button>
</div>
<span class="col col-auto my-auto">Show:</span>
<span class="col-auto my-auto">Show:</span>
<div title="Toggle showing filename" class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
<input class="form-check-input" type="checkbox" id="fname" onChange="$('.figure-caption').toggle()"
{% if sels['fname']=='true' %} checked {% endif %} >
<label class="form-check-label ps-1" for="fname">Filename</label>
<input class="form-check-input" type="checkbox" id="fname_toggle" onChange="$('.figure-caption').toggle()" checked>
<label class="form-check-label ps-1" for="fname_toggle">Filename</label>
</div>
<div title="Toggle showing matched faces" class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
<input class="form-check-input" type="checkbox" onChange="FaceToggle()" id="faces"
{% if not obj.file_details.faces %} disabled {% endif %}
{% if sels['faces']=='true' %} checked {% endif %}
>
<input class="form-check-input" type="checkbox" onChange="FaceToggle()" id="faces">
<label class="form-check-label ps-1" for="faces">Faces</label>
</div>
<div title="Toggle showing 'distance' on matched faces" class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
<input class="form-check-input" type="checkbox" onChange="DrawImg()" id="distance"
{% if not obj.file_details.faces or sels['faces']=='false' %} disabled {% endif %}
{% if sels['distance']=='true' %} checked {% endif %}
>
<input class="form-check-input" type="checkbox" onChange="DrawImg()" id="distance">
<label class="form-check-label ps-1" for="distance">Distance</label>
</div>
<div title="Change the model used to detect faces" class="col col-auto my-auto">
AI Model:
{% if not obj.file_details.faces %}
{{CreateSelect( "model", 0, ["N/A", "normal", "slow/accurate"], "", "rounded norm-txt", [0,1,2])|safe }}
{% else %}
{{CreateSelect( "model", obj.file_details.faces[0].facefile_lnk.model_used, ["normal", "slow/accurate"], "", "rounded norm-txt", [1,2])|safe }}
{% endif %}
{# can use 0 as default, it will be (re)set correctly in DrawImg() anyway #}
{{CreateSelect( "model", 0, ["N/A", "normal", "slow/accurate"], "", "rounded norm-txt", [0,1,2])|safe }}
</div>
<div class="col col-auto pt-1">
<button class="btn btn-outline-info p-1" title="Rotate by 90 degrees" onClick="Transform(90)">
@@ -268,7 +328,7 @@
<button class="btn btn-outline-info p-1" title="Flip vertically" onClick="Transform('flipv')">
<svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#flip_v"/></svg>
</button>
<button class="btn btn-outline-info p-1" title="View in Fullscreen mode" onClick="document.getElementById('canvas').requestFullscreen()">
<button class="btn btn-outline-info p-1" title="View in Fullscreen mode" onClick="$('#prev_fullscreen').val('true'); $('#next_fullscreen').val('true'); document.getElementById('canvas').requestFullscreen()">
<svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#fullscreen"/></svg>
</button>
</div>
@@ -300,5 +360,8 @@ $( document ).keydown(function(event) {
return; // Quit when this doesn't handle the key event.
}
});
{% if OPT['fullscreen']=='true' %}
$( document ).ready ( function() { document.getElementById('canvas').requestFullscreen() } )
{% endif %}
</script>
{% endblock script_content %}