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

include the js form the internal dir and viewer now has tooltips on buttons, and all buttons work, call the right javascript, send jobs to the pa_job_manager, and make image go gray with throbber, and on job completion, hide throbber, redraw the image in color and with the newly transformed image

Browse Source
This commit is contained in:
Damien De Paoli
2021-08-15 21:26:43 +10:00
parent 40c0e3631c
commit 652a89161d
7 changed files with 101 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
TODO
View File

@@ -1,10 +1,6 @@
## GENERAL
* use new js/* in files.py:
- rename rotate->transforms
- then use in viewer to get transform buttons to work
* viewer:
buttons need tootltips
can we make it preload next/prev images, and only reload the image div when we jump? to make arrow-based nav much faster
im_next = new Image()
im_next.src="..."
@@ -12,15 +8,6 @@
- have to remember the details of not just the src fname, but also face* details
- onload event, what if we use it and use say arrow keys to load/change image, will one beat the other, but if we arrow next too fast, the img wont be loaded?
fullscreen could maybe use a bit of this:
document.getElementById('canvas').requestFullscreen()
buttons (with tootltips):
rot90, rot180, rot270
flip h, flip z
fullscreen
to (re)do faces (always or somehow turn on for select???)
* remove dirs after the duplicate cleanup removes all its content
* Face matching:
@@ -39,7 +26,6 @@
* viewer needs to allow toggle to scan_model (and prob. right-click on file... AI (with CNN) AI (with hog)
- make the form-select AI_Model actually do the change (but need more mem on mara really)
## DB
* Dir can have date in the DB, so we can do Oldest/Newest dirs in Folder view

3
files.py
View File

@@ -593,6 +593,7 @@ def view_img(id):
# specific rotation job is finished (/checkrotatejob) which will be called (say) every 1 sec. from f/e
# with a spinning wheel, then when pa_job_mgr has finished it will return the rotated thumb
@app.route("/rotate", methods=["POST"])
@app.route("/transform", methods=["POST"])
@login_required
def rotate():
id = request.form['id']
@@ -617,6 +618,7 @@ def rotate():
# rotated image's thumbnail is returned so the f/e can
# update with it
################################################################################
@app.route("/checktransformjob", methods=["POST"])
@app.route("/checkrotatejob", methods=["POST"])
@login_required
def checkrotatejob():
@@ -637,7 +639,6 @@ def checkrotatejob():
################################################################################
@app.route("/internal/<path:filename>")
def internal(filename):
print( filename )
return send_from_directory("internal/", filename)
################################################################################

29
internal/js/files_transform.js Normal file
View File

@@ -0,0 +1,29 @@
function CheckTransformJob(id,job_id)
{
$.ajax(
{
type: 'POST', data: '&job_id='+job_id, url: '/checktransformjob', success: function(data) {
if( data.finished )
{
$('#s'+id).hide()
$('#'+id).find('img.thumb').attr('style', 'filter: color(100%);' );
$('#'+id).addClass('entry')
$('#'+id).find('.thumb').attr('src', 'data:image/jpeg;base64,'+data.thumbnail)
return false;
}
else
{
setTimeout( function() { CheckTransformJob(id,job_id) }, 1000,id, job_id );
}
},
} )
}
function Transform(amt)
{
$('.highlight').each(function( id, e ) {
post_data = '&amt='+amt+'&id='+e.id
// send /transform for this image, grayscale the thumbmail, add color spinning wheel overlay, and start checking for job end
$.ajax({ type: 'POST', data: post_data, url: '/transform', success: function(data){ $('#'+e.id).find('img.thumb').attr('style', 'filter: grayscale(100%);' ); $('#'+e.id).removeClass('entry'); $('#s'+e.id).show(); CheckTransformJob(e.id,data.job_id); return false; } })
} )
}

29
internal/js/transform.js
View File

@@ -1,29 +0,0 @@
function CheckRotateJob(id,job_id)
{
$.ajax(
{
type: 'POST', data: '&job_id='+job_id, url: '/checkrotatejob', success: function(data) {
if( data.finished )
{
$('#s'+id).hide()
$('#'+id).find('img.thumb').attr('style', 'filter: color(100%);' );
$('#'+id).addClass('entry')
$('#'+id).find('.thumb').attr('src', 'data:image/jpeg;base64,'+data.thumbnail)
return false;
}
else
{
setTimeout( function() { CheckRotateJob(id,job_id) }, 1000,id, job_id );
}
},
} )
}
function Rotate(amt)
{
$('.highlight').each(function( id, e ) {
post_data = '&amt='+amt+'&id='+e.id
{# send rotate for this image, grayscale the thumbmail, add color spinning wheel overlay, and start checking for job end #}
$.ajax({ type: 'POST', data: post_data, url: '/rotate', success: function(data){ $('#'+e.id).find('img.thumb').attr('style', 'filter: grayscale(100%);' ); $('#'+e.id).removeClass('entry'); $('#s'+e.id).show(); CheckRotateJob(e.id,data.job_id); return false; } })
} )
}

28
internal/js/view_transform.js Normal file
View File

@@ -0,0 +1,28 @@
function CheckTransformJob(id,job_id)
{
$.ajax(
{
type: 'POST', data: '&job_id='+job_id, url: '/checktransformjob', success: function(data) {
if( data.finished )
{
// stop throbber, remove grayscale & then force reload with timestamped version of im.src
grayscale=0
throbber=0
im.src=im.src + '?t=' + new Date().getTime();
return false;
}
else
{
setTimeout( function() { CheckTransformJob(id,job_id) }, 1000,id, job_id );
}
},
} )
}
function Transform(amt)
{
id=$('#current').val()
post_data = '&amt='+amt+'&id='+id
// send /transform for this image, grayscale the thumbmail, add color spinning wheel overlay, and start checking for job end
$.ajax({ type: 'POST', data: post_data, url: '/transform', success: function(data) { grayscale=1; throbber=1; DrawImg(); CheckTransformJob(id,data.job_id); return false; } })
}

295
templates/files.html
View File

@@ -1,6 +1,9 @@
{% extends "base.html" %}
{% block main_content %}
<script src="{{ url_for( 'internal', filename='js/files_support.js')}}"></script>
<script src="{{ url_for( 'internal', filename='js/files_transform.js')}}"></script>
<div class="container-fluid">
<form id="main_form" method="POST">
<input type="hidden" name="cwd" id="cwd" value="{{cwd}}">
@@ -233,277 +236,9 @@
</div class="container">
{% endblock main_content %}
{% block script_content %}
<script>
function GetSelnAsDiv()
{
seln=''
$('.highlight').each(function( index ) {
seln+='<div fname="' + $(this).attr('fname') + '" yr="' + $(this).attr('yr') +
'" date="' + $(this).attr('date') +
'" class="px-1">' + $(this).children().parent().html() + '</div>'
seln+='<input type="hidden" name="eid-'+index+'" value="'+$(this).attr('id')+'">'
} )
return '<div class="row col-12">'+seln+'</div>'
}
function GetSelnAsData()
{
to_del=''
$('.highlight').each(function( index ) { to_del+='&eid-'+index+'='+$(this).attr('id') } )
return to_del
}
function RunAIOnSeln(person)
{
post_data = GetSelnAsData()
post_data += '&person='+person.replace('ai-','')
$.ajax({ type: 'POST', data: post_data, url: '/run_ai_on', success: function(data){ window.location='/'; return false; } })
}
function DelDBox(del_or_undel)
{
to_del = GetSelnAsData()
$('#dbox-title').html(del_or_undel+' Selected File(s)')
div ='<div class="row col-12"><p class="col">' + del_or_undel + ' the following files?</p></div>'
div+=GetSelnAsDiv()
div+=`<div class="row col-12">
<button onClick="$('#dbox').modal('hide')" class="btn btn-outline-secondary col-2">Cancel</button>
`
div+=`
<button onClick="$('#dbox').modal('hide'); $.ajax({ type: 'POST', data: to_del, url:
`
if( del_or_undel == "Delete" )
div+=`
'/delete_files',
success: function(data){ window.location='/'; return false; } })" class="btn btn-outline-danger col-2">Ok</button>
</div>
`
else
div+=`
'/restore_files',
success: function(data){ window.location='/'; return false; } })" class="btn btn-outline-success col-2">Ok</button>
</div>
`
$('#dbox-content').html(div)
$('#dbox').modal('show')
}
function DetailsDBox()
{
$('#dbox-title').html('Details of Selected File(s)')
var div ='<div class="row col-12">'
$('.highlight').each(function( index ) {
div += "<div class='col-3' style='background-color:lightgray'>Name:</div><div class='col-9' style='background-color:lightgray'>" + $(this).attr('fname') + "</div>"
div += "<div class='col-3'>Date:</div><div class='col-9'>" + $(this).attr('pretty_date') + "</div>"
dir = $(this).attr('in_dir')
if( dir.slice(-1) != "/" )
dir=dir.concat('/')
div += "<div class='col-3'>Dir:</div><div class='col-9'>" + dir + "</div>"
div += "<div class='col-3'>Size:</div><div class='col-9'>" + $(this).attr('size') + " MB</div>"
div += "<div class='col-3'>Hash:</div><div class='col-9'>" + $(this).attr('hash') + "</div>"
div += "<div class='col-3'>Path Type:</div><div class='col-9'>" + $(this).attr('path_type') + "</div>"
} )
div += `
</div>
<br>
<div class="form-row col-12">
<button onClick="$('#dbox').modal('hide'); return false;" class="btn btn-outline-secondary offset-1 col-2">Cancel</button>
</div>
`
$('#dbox-content').html(div)
$('#dbox').modal('show')
}
var attempt=0;
function CheckRotateJob(id,job_id)
{
$.ajax(
{
type: 'POST', data: '&job_id='+job_id, url: '/checkrotatejob', success: function(data) {
if( data.finished )
{
$('#s'+id).hide()
$('#'+id).find('img.thumb').attr('style', 'filter: color(100%);' );
$('#'+id).addClass('entry')
$('#'+id).find('.thumb').attr('src', 'data:image/jpeg;base64,'+data.thumbnail)
return false;
}
else
{
setTimeout( function() { CheckRotateJob(id,job_id) }, 1000,id, job_id );
}
},
} )
}
function Rotate(amt)
{
$('.highlight').each(function( id, e ) {
post_data = '&amt='+amt+'&id='+e.id
{# send rotate for this image, grayscale the thumbmail, add color spinning wheel overlay, and start checking for job end #}
$.ajax({ type: 'POST', data: post_data, url: '/rotate', success: function(data){ $('#'+e.id).find('img.thumb').attr('style', 'filter: grayscale(100%);' ); $('#'+e.id).removeClass('entry'); $('#s'+e.id).show(); CheckRotateJob(e.id,data.job_id); return false; } })
} )
}
function MoveDBox()
{
$('#dbox-title').html('Move Selected File(s) to new directory in Storage Path')
div =`
<div class="form-row col-12">
<p class="col">Moving the following files?</p>
</div>
<form id="mv_fm" class="form form-control-inline col-12" method="POST" action="/move_files">
`
div+=GetSelnAsDiv()
yr=$('.highlight').first().attr('yr')
dt=$('.highlight').first().attr('date')
div+=`
<div class="input-group my-3">
<alert class="alert alert-primary my-auto py-1">
<svg width="20" height="20" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#db"/></svg>
`
sps={{StoragePathNames()|safe}}
if( sps.length > 1 ) {
{# NB: alert-primary here is a hack to get the bg the same color as the alert primary by #}
div+= '<select name="storage_rp" class="text-primary alert-primary py-1 border border-primary rounded">'
for(p of sps) {
div+= '<option>'+p+'</option>'
}
div+= '</select>'
} else {
div+= '/'+sps[0]+'/'
div+= '<input type="hidden" name="storage_rp" value="' + sps[0] + '">'
}
div+=`
</alert>
<input id="prefix" type="text" name="prefix" class="text-primary text-right form-control"
`
div+="value="+yr+'/'+dt+"-"
div+=`
"></input>
<input type="text" name="suffix" class="form-control" placeholder="name"> </input>
</div>
<br>
<div class="form-row col-12">
<button onClick="$('#dbox').modal('hide'); return false;" class="btn btn-outline-secondary offset-1 col-2">Cancel</button>
<button onClick="$('#dbox').modal('hide'); $('#mv_fm').submit(); return false;" class="btn btn-outline-primary col-2">Ok</button>
</div>
</form>
`
$('#dbox-content').html(div)
$('#dbox').modal('show')
}
function ChangeSize(clicked_button,sz)
{
$('.sz-but.btn-info').removeClass('btn-info text-white').addClass('btn-outline-info')
$(clicked_button).addClass('btn-info text-white').removeClass('btn-outline-info')
$('.thumb').attr( {height: sz, style: 'font-size:'+sz+'px' } )
$('#size').val(sz)
sz=sz-22
$('.svg').height(sz);
$('.svg').width(sz);
$('.svg_cap').width(sz);
}
// e == event (can see if shift/ctrl held down while left-clicking
// el == element the click is on
// this allows single-click to select, ctrl-click to (de)select 1 item, and
// shift-click to add all elements between highlighted area and clicked area,
// whether you click after highlight or before
function DoSel(e, el)
{
if( e.ctrlKey )
{
$(el).toggleClass('highlight')
return
}
if( e.shiftKey )
{
st=Number($('.highlight').first().attr('ecnt'))
end=Number($('.highlight').last().attr('ecnt'))
clicked=Number($(el).attr('ecnt'))
if( ! $('#folders').value )
{
st -= 1
end -= 1
clicked -= 1
}
// if we shift-click first element, then st/end are NaN, so just highlightthe one clicked
if( isNaN(st) )
{
$('.entry').slice( clicked, clicked+1 ).addClass('highlight')
return
}
if( clicked > end )
$('.entry').slice( end, clicked+1 ).addClass('highlight')
else
$('.entry').slice( clicked, st ).addClass('highlight')
return
}
$('.highlight').removeClass('highlight')
$(el).addClass('highlight')
}
function SetButtonState() {
var sel=false
$('.highlight').each(function( index ) { sel=true } )
if( sel ) {
$('#move').attr('disabled', false )
$('#del').attr('disabled', false )
} else {
$('#move').attr('disabled', true )
$('#del').attr('disabled', true )
}
}
function FiguresOrDirsOrBoth() {
var figure=false
var dir=false
$('.highlight').each(function( index ) {
if( $(this).hasClass('figure') ) {
figure=true
}
if( $(this).hasClass('dir') ) {
dir=true
}
} )
if( figure & ! dir )
return "figure"
if( ! figure & dir )
return "dir"
return "both"
}
function SelContainsBinAndNotBin() {
var bin=false
var not_bin=false
$('.highlight').each(function( index ) {
if( $(this).attr('path_type') == "Bin" ) {
bin=true
} else {
not_bin=true
}
} )
if( bin && not_bin )
return true
else
return false
}
function NoSel() {
var sel=false
$('.highlight').each(function( index ) { sel=true } )
// func looks for No Selection, so if sel is true and we have a sel, return false (i.e. NOT No Sel -> Sel )
if( sel )
return false
else
return true
}
$('.figure').click( function(e) { DoSel(e, this ); SetButtonState(); return false; });
$(document).on('click', function(e) { $('.highlight').removeClass('highlight') ; SetButtonState() });
@@ -533,13 +268,13 @@ $.contextMenu({
if( e.currentTarget.getAttribute('type') == 'Image' )
{
item_list['rotate'] = {
name: "Rotate",
name: "Transform",
items: {
"r90": { "name" : "90 degrees" },
"r180": { "name" : "180 degrees" },
"r270": { "name" : "270 degrees" },
"fliph": { "name" : "flip horizontally" },
"flipv": { "name" : "flip vertically" }
"r90": { "name" : "Rotate 90 degrees" },
"r180": { "name" : "Rotate 180 degrees" },
"r270": { "name" : "Rotate 270 degrees" },
"fliph": { "name" : "Flip horizontally" },
"flipv": { "name" : "Flip vertically" }
}
}
@@ -580,11 +315,11 @@ $.contextMenu({
if( key == "move" ) { MoveDBox() }
if( key == "del" ) { DelDBox('Delete') }
if( key == "undel") { DelDBox('Restore') }
if( key == "r90" ) { Rotate(90) }
if( key == "r180" ) { Rotate(180) }
if( key == "r270" ) { Rotate(270) }
if( key == "fliph" ) { Rotate("fliph") }
if( key == "flipv" ) { Rotate("flipv") }
if( key == "r90" ) { Transform(90) }
if( key == "r180" ) { Transform(180) }
if( key == "r270" ) { Transform(270) }
if( key == "fliph" ) { Transform("fliph") }
if( key == "flipv" ) { Transform("flipv") }
if( key.startsWith("ai")) { RunAIOnSeln(key) }
},
items: item_list

39
templates/viewer.html
View File

@@ -13,8 +13,13 @@
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>
var gap=0.8
var grayscale=0
var throbber=0
function NewWidth()
{
@@ -47,7 +52,14 @@
canvas.height=NewHeight(im)
// actually draw the pixel images to the canvas at the right size
if( grayscale )
context.filter='grayscale(1)'
context.drawImage(im, 0, 0, canvas.width, canvas.height )
// -50 is a straight up hack, no idea why this works, but its good enough for me
if( throbber )
$('#throbber').attr('style', 'display:show; position:absolute; left:'+canvas.width/2+'px; top:'+(canvas.height/2-50)+'px' )
else
$('#throbber').hide();
if( $('#faces').prop('checked') )
{
@@ -125,12 +137,12 @@
<div class="row">
{% if eids.find(obj.id|string) > 0 %}
<form id="prev" class="col col-auto" action="/viewprev" method="POST">
<input type="hidden" name="current" value="{{obj.id}}">
<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 class="btn btn-outline-info h-75" id="la"
<button title="Show previous image" class="btn btn-outline-info h-75" id="la"
onClick="
$('#prev_fname').val($('#fname').prop('checked'))
$('#prev_faces').val($('#faces').prop('checked'))
@@ -143,6 +155,7 @@
{% 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;">
<script>
var im=new Image();
im.onload=DrawImg
@@ -190,7 +203,7 @@
<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 class="col col-auto btn btn-outline-info h-75" id="ra"
<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'))
@@ -212,26 +225,26 @@
</button>
</div>
<span class="col col-auto my-auto">Show:</span>
<div class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
<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>
</div>
<div class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
<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 %}
>
<label class="form-check-label ps-1" for="faces">Faces</label>
</div>
<div class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
<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 %}
>
<label class="form-check-label ps-1" for="distance">Distance</label>
</div>
<div class="col col-auto my-auto">
<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 }}
@@ -240,22 +253,22 @@
{% endif %}
</div>
<div class="col col-auto pt-1">
<button class="btn btn-outline-info p-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">
<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">
<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">
<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">
<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" onClick="document.getElementById('canvas').requestFullscreen()">
<button class="btn btn-outline-info p-1" title="View in Fullscreen mode" onClick="document.getElementById('canvas').requestFullscreen()">
<svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#fullscreen"/></svg>
</button>
</div>