281 lines
14 KiB
HTML
281 lines
14 KiB
HTML
{% extends "base.html" %} {% block main_content %}
|
|
{# make the form-switch / toggle info color set, give or take #}
|
|
<style>
|
|
.norm-txt { font-size: 1.0rem }
|
|
.form-check-input:checked {
|
|
background-color: #39C0ED;
|
|
border-color: #CFF4FC;
|
|
}
|
|
.form-switch .form-check-input {
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2339C0ED'/%3e%3c/svg%3e");
|
|
}
|
|
.form-switch .form-check-input:focus {
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23CFF4FC'/%3e%3c/svg%3e");
|
|
}
|
|
</style>
|
|
|
|
<script src="{{ url_for( 'internal', filename='js/view_transform.js')}}"></script>
|
|
<script src="{{ url_for( 'internal', filename='js/view_support.js')}}"></script>
|
|
|
|
<script>
|
|
var gap=0.8
|
|
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.url = "{{objs[id].FullPathOnFS()|safe}}"
|
|
e.name = e.url
|
|
e.type = "{{objs[id].type.name}}"
|
|
{% 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 PrettyFname(fname)
|
|
{
|
|
s='<span class="alert alert-secondary py-2">'
|
|
if( fname.indexOf( "static/Import" ) == 0 )
|
|
{
|
|
s+='<svg width="20" height="20" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#import"/></svg>'
|
|
tmp_path=fname.replace("static/Import","" )
|
|
}
|
|
if( fname.indexOf( "static/Storage" ) == 0 )
|
|
{
|
|
s+='<svg width="20" height="20" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#db"/></svg>'
|
|
tmp_path=fname.replace("static/Storage","" )
|
|
}
|
|
if( fname.indexOf( "static/Bin" ) == 0 )
|
|
{
|
|
s+='<svg width="20" height="20" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#trash"/></svg>'
|
|
tmp_path=fname.replace("static/Bin","" )
|
|
}
|
|
s+=tmp_path+'</span>'
|
|
return s
|
|
}
|
|
|
|
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="{{OPT.orig_url}}">'
|
|
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">
|
|
<button title="Show previous image" class="col-auto btn btn-outline-info px-2" style="padding: 10%" id="la"
|
|
{% if OPT.offset == 0 and eids.find(current|string) == 0 %}
|
|
disabled
|
|
{% endif %}
|
|
onClick="
|
|
if( document.fullscreen == false )
|
|
fullscreen = false
|
|
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]
|
|
ViewImageOrVideo()
|
|
">
|
|
<svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#prev"/></svg>
|
|
</button>
|
|
<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="../" + objs[current].url
|
|
var context = canvas.getContext('2d')
|
|
window.addEventListener('resize', DrawImg, false);
|
|
</script>
|
|
<figcaption id="img-cap" class="figure-caption text-center text-wrap text-break"><span id="fname_i"></span></figcaption>
|
|
<script>$('#fname_i').html(PrettyFname('{{objs[current].FullPathOnFS()}}'))</script>
|
|
</figure>
|
|
{% if objs[current].type.name != "Image" %}
|
|
<script>$('#figure').hide()</script>
|
|
{% endif %}
|
|
<div id="video_div" class="col col-auto">
|
|
<video id="video" class="col col-auto" controls>
|
|
<source src="../{{objs[current].FullPathOnFS()}}" type="video/mp4">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
<figcaption id="vid-cap" class="figure-caption text-center text-wrap text-break"><span id="fname_v"></span></figcaption>
|
|
<script>$('#fname_v').html(PrettyFname('{{objs[current].FullPathOnFS()}}'))</script>
|
|
</div>
|
|
<script>
|
|
window.addEventListener('resize', ResizeVideo, false);
|
|
ResizeVideo()
|
|
{% if objs[current].type.name != "Video" %}
|
|
$('#video_div').hide()
|
|
{% endif %}
|
|
</script>
|
|
|
|
<button title="Show next image" class="col-auto btn btn-outline-info px-2" style="padding: 10%" id="ra"
|
|
onClick="
|
|
{% if OPT.last_entry_in_db is defined %}
|
|
if( current == {{OPT.last_entry_in_db}} )
|
|
{
|
|
$('#ra').attr('disabled', true )
|
|
return
|
|
}
|
|
{% endif %}
|
|
if( document.fullscreen == false )
|
|
fullscreen = false
|
|
cidx = eid_lst.indexOf(current.toString())
|
|
if( cidx < eid_lst.length-1 )
|
|
{
|
|
current=eid_lst[cidx+1]
|
|
ViewImageOrVideo()
|
|
$('#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-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-auto my-auto">Show:</span>
|
|
<div title="Toggle showing filename (hotkey: n)" 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_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 (hotkey: f)" 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">
|
|
<label class="form-check-label ps-1" for="faces">Faces</label>
|
|
</div>
|
|
<div title="Toggle showing 'distance' on matched faces (hotkey: d)" 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">
|
|
<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:
|
|
{# 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)">
|
|
<svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#rot90"/></svg>
|
|
</button>
|
|
<button class="btn btn-outline-info p-1" title="Rotate by 180 degrees" onClick="Transform(180)">
|
|
<svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#rot180"/></svg>
|
|
</button>
|
|
<button class="btn btn-outline-info p-1" title="Rotate by 270 degrees" onClick="Transform(270)">
|
|
<svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#rot270"/></svg>
|
|
</button>
|
|
<button class="btn btn-outline-info p-1" title="Flip horizontally" onClick="Transform('fliph')">
|
|
<svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#flip_h"/></svg>
|
|
</button>
|
|
<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 (hotkey: F)" onClick="fullscreen=true; ViewImageOrVideo()">
|
|
<svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#fullscreen"/></svg>
|
|
</button>
|
|
</div>
|
|
</div class="row">
|
|
{% endblock main_content %}
|
|
{% block script_content %}
|
|
<script>
|
|
$( document ).keydown(function(event) {
|
|
switch (event.key)
|
|
{
|
|
case "Left": // IE/Edge specific value
|
|
case "ArrowLeft":
|
|
if( $('#la').prop('disabled') == false )
|
|
$('#la').click()
|
|
break;
|
|
case "Right": // IE/Edge specific value
|
|
case "ArrowRight":
|
|
if( $('#ra').prop('disabled') == false )
|
|
$('#ra').click()
|
|
break;
|
|
case "d":
|
|
$('#distance').click()
|
|
break;
|
|
case "f":
|
|
$('#faces').click()
|
|
break;
|
|
case "n":
|
|
$('#fname_toggle').click()
|
|
break;
|
|
case "F":
|
|
fullscreen=!document.fullscreen
|
|
ViewImageOrVideo()
|
|
break;
|
|
default:
|
|
return; // Quit when this doesn't handle the key event.
|
|
}
|
|
});
|
|
|
|
var fullscreen=false;
|
|
{% if OPT.fullscreen=='true' %}
|
|
fullscreen=true;
|
|
ViewImageOrVideo()
|
|
{% endif %}
|
|
</script>
|
|
{% endblock script_content %}
|