460 lines
16 KiB
JavaScript
460 lines
16 KiB
JavaScript
// image, then use the width of the image (with the specified gap) otherwise
|
|
// the height > width, so scale the new width based on height ratio of
|
|
// image to window
|
|
function NewWidth()
|
|
{
|
|
w_r=im.width/(window.innerWidth*gap)
|
|
h_r=im.height/(window.innerHeight*gap)
|
|
if( w_r > h_r )
|
|
return window.innerWidth*gap
|
|
else
|
|
return im.width*gap / (im.height/window.innerHeight)
|
|
}
|
|
|
|
// work out new height for canvas. depending on whether height > width of the
|
|
// image, then use the height of the image (with the specified gap) otherwise
|
|
// the width > height, so scale the new height based on width ratio of
|
|
// image to window
|
|
function NewHeight()
|
|
{
|
|
w_r=im.width/(window.innerWidth*gap)
|
|
h_r=im.height/(window.innerHeight*gap)
|
|
if( h_r > w_r )
|
|
return window.innerHeight*gap
|
|
else
|
|
return im.height*gap / (im.width/window.innerWidth)
|
|
}
|
|
|
|
function DrawLabelOnFace(str)
|
|
{
|
|
// finish face box, need to clear out new settings for // transparent backed-name tag
|
|
context.stroke();
|
|
context.beginPath()
|
|
context.lineWidth = 0.1
|
|
context.font = "30px Arial"
|
|
context.globalAlpha = 0.6
|
|
|
|
bbox = context.measureText(str);
|
|
f_h=bbox.fontBoundingBoxAscent
|
|
if( bbox.fontBoundingBoxDescent )
|
|
f_h += bbox.fontBoundingBoxDescent
|
|
f_h -= 8
|
|
context.rect( x+w/2-bbox.width/2, y-f_h, bbox.width, f_h )
|
|
context.fillStyle="white"
|
|
context.fill()
|
|
context.stroke();
|
|
context.beginPath()
|
|
context.globalAlpha = 1.0
|
|
context.font = "30px Arial"
|
|
context.textAlign = "center"
|
|
context.fillStyle = context.strokeStyle
|
|
context.fillText(str, x+w/2, y-2)
|
|
}
|
|
|
|
// This draws the image, it can be called on resize events, img.src finishing
|
|
// loading or explicitly on page load. Will also deal with all state/toggles
|
|
// for items like name, grayscale, etc.
|
|
function DrawImg()
|
|
{
|
|
// another call to this func will occur on load, so skip this one
|
|
if( im.width == 0 )
|
|
return
|
|
|
|
canvas.width=NewWidth(im)
|
|
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();
|
|
|
|
// show (or not) the whole figcaption with fname in it - based on state of fname_toggle
|
|
if( $('#fname_toggle').prop('checked' ) )
|
|
{
|
|
// reset fname for new image (if navigated left/right to get here)
|
|
$('#fname').html(PrettyFname(objs[current].url))
|
|
$('.figcaption').show()
|
|
}
|
|
else
|
|
$('.figcaption').hide()
|
|
|
|
// if we have faces, the enable the toggles, otherwise disable them
|
|
// and reset model select too
|
|
if( objs[current].faces )
|
|
{
|
|
$('#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') && objs[current].faces )
|
|
{
|
|
// draw rect on each face
|
|
for( i=0; i<objs[current].faces.length; i++ )
|
|
{
|
|
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
|
|
|
|
// this face has an override so diff colour
|
|
if( objs[current].faces[i].override )
|
|
{
|
|
context.strokeStyle = 'blue'
|
|
DrawLabelOnFace( objs[current].faces[i].override.who )
|
|
}
|
|
else
|
|
{
|
|
context.strokeStyle = 'green'
|
|
if( objs[current].faces[i].who )
|
|
{
|
|
str=objs[current].faces[i].who
|
|
if( $('#distance').prop('checked') )
|
|
str += "("+objs[current].faces[i].distance+")"
|
|
DrawLabelOnFace( str )
|
|
}
|
|
}
|
|
context.stroke();
|
|
}
|
|
}
|
|
}
|
|
|
|
// resize a video based when event calls this -- TODO: is this right for ratios
|
|
// where vid is different w/h ratio?
|
|
function ResizeVideo()
|
|
{
|
|
$('#video').height(window.innerHeight*gap)
|
|
}
|
|
|
|
// change faces being shown or not (if not showing faces, then cant set distance on anyway)
|
|
// and a face or not, needs to redraw the image to add/remove green box, etc.
|
|
function FaceToggle()
|
|
{
|
|
$('#distance').prop('disabled', function(i, v) { return !v; });
|
|
DrawImg()
|
|
}
|
|
|
|
// func to set show/hide the image or video div, and set the URL appropriately
|
|
// also deals with fullsecreen if needed
|
|
function ViewImageOrVideo()
|
|
{
|
|
if( objs[current].type == 'Image' )
|
|
{
|
|
im.src='../' + objs[current].url
|
|
$('#video_div').hide()
|
|
if( $('#fname_toggle').prop('checked' ) )
|
|
$('#img-cap').show()
|
|
$('#fname_i').html(PrettyFname(objs[current].url))
|
|
$('#figure').show()
|
|
if( fullscreen )
|
|
$('#canvas').get(0).requestFullscreen()
|
|
else
|
|
if( document.fullscreen )
|
|
document.exitFullscreen()
|
|
}
|
|
if( objs[current].type == 'Video' )
|
|
{
|
|
$('#figure').hide()
|
|
$('#video').prop('src', '../' + objs[current].url )
|
|
$('#fname_v').html(PrettyFname(objs[current].url))
|
|
if( $('#fname_toggle').prop('checked' ) )
|
|
$('#img-cap').hide()
|
|
ResizeVideo()
|
|
$('#video_div').show()
|
|
if( fullscreen )
|
|
$('#video').get(0).requestFullscreen()
|
|
else
|
|
if( document.fullscreen )
|
|
document.exitFullscreen()
|
|
}
|
|
}
|
|
|
|
var offsetX,offsetY;
|
|
|
|
function reOffset()
|
|
{
|
|
var BB=$('#canvas').get(0).getBoundingClientRect();
|
|
offsetX=BB.left;
|
|
offsetY=BB.top;
|
|
}
|
|
|
|
window.onscroll=function(e){ reOffset(); }
|
|
window.onresize=function(e){ reOffset(); }
|
|
|
|
$(document).ready( function()
|
|
{
|
|
var cw=$('#canvas').width;
|
|
var ch=$('#canvas').height;
|
|
reOffset();
|
|
window.onscroll=function(e){ reOffset(); }
|
|
window.onresize=function(e){ reOffset(); }
|
|
|
|
$.contextMenu({
|
|
selector: '#canvas',
|
|
trigger: 'left',
|
|
// trigger: 'none',
|
|
hideOnSecondTrigger: true,
|
|
|
|
build: function($triggerElement, e) {
|
|
reOffset();
|
|
// get mouse position relative to the canvas (left-click uses page*)
|
|
var x=parseInt(e.pageX-offsetX);
|
|
var y=parseInt(e.pageY-offsetY);
|
|
|
|
item_list = { not_a_face: { name: "Not a face", which_face: '-1' } }
|
|
|
|
for( i=0; i<objs[current].faces.length; i++ )
|
|
{
|
|
fx = objs[current].faces[i].x / ( im.width/canvas.width )
|
|
fy = objs[current].faces[i].y / ( im.height/canvas.height )
|
|
fw = objs[current].faces[i].w / ( im.width/canvas.width )
|
|
fh = objs[current].faces[i].h / ( im.height/canvas.height )
|
|
|
|
if( x >= fx && x <= fx+fw && y >= fy && y <= fy+fh )
|
|
{
|
|
if( objs[current].faces[i].override )
|
|
{
|
|
item_list['remove_override_force_match']={ 'name': 'Remove override for this face', 'which_face': i, 'id': objs[current].faces[i].id }
|
|
}
|
|
else if( objs[current].faces[i].who )
|
|
{
|
|
item_list['match']={ 'name': objs[current].faces[i].who, 'which_face': i, 'id': objs[current].faces[i].id }
|
|
item_list['wrong_person']={ 'name': 'wrong person', 'which_face': i, 'id': objs[current].faces[i].id }
|
|
}
|
|
else
|
|
{
|
|
item_list['no_match_new_person']={ 'name': 'Add as reference image to NEW person', 'which_face': i, 'id': objs[current].faces[i].id }
|
|
item_list['no_match_new_refimg']={ 'name': 'Add as reference image to EXISTING person', 'which_face': i, 'id': objs[current].faces[i].id }
|
|
for( var el in NMO ) {
|
|
item_list['NMO_'+el]={'type_id': NMO[el].type_id, 'name': 'Override: ' + NMO[el].name, 'which_face': i, 'id': objs[current].faces[i].id }
|
|
}
|
|
}
|
|
delete item_list['not_a_face']
|
|
$('#canvas').prop('menu_item', item_list )
|
|
break
|
|
}
|
|
}
|
|
return {
|
|
callback: function( key, options) {
|
|
if( key == 'not_a_face' ) { return true }
|
|
item=$('#canvas').prop( 'menu_item' );
|
|
FaceDBox( key, item )
|
|
},
|
|
items: item_list
|
|
};
|
|
}
|
|
} )
|
|
} );
|
|
|
|
// quick wrapper function to make calling this ajax code simpler in SearchForPerson
|
|
function OverrideForceMatch( person_id, face_id, face_pos, type_id )
|
|
{
|
|
// we have type_id passed in, so dig the NMO out, and use that below (its really just for name, but in case we change that in the DB)
|
|
for( el in NMO )
|
|
{
|
|
if( NMO[el].type_id == type_id )
|
|
{
|
|
fm_idx=el
|
|
break
|
|
}
|
|
}
|
|
ofm='&person_id='+person_id+'&face_id='+face_id
|
|
$.ajax({ type: 'POST', data: ofm, url: '/override_force_match', success: function(data) {
|
|
objs[current].faces[face_pos].override={}
|
|
objs[current].faces[face_pos].override.who=data.person_tag
|
|
objs[current].faces[face_pos].override.distance='N/A'
|
|
objs[current].faces[face_pos].override.type_id=NMO[fm_idx].id
|
|
objs[current].faces[face_pos].override.type_name=NMO[fm_idx].name
|
|
|
|
$('#dbox').modal('hide')
|
|
$('#faces').prop('checked',true)
|
|
DrawImg()
|
|
}
|
|
} )
|
|
}
|
|
|
|
// function to facilitate adding a face match override to this "found" person
|
|
// uses Ajax to the f/e to get any person matching #stext's content (via any name/tag)
|
|
// and displays results in #search_person_results
|
|
function SearchForPerson(face_id, face_pos, type_id)
|
|
{
|
|
// make URI safe
|
|
who = encodeURIComponent( $('#stext').val() )
|
|
// call ajax to find ppl
|
|
$.ajax({ type: 'POST', data: null, url: '/find_persons/'+ who,
|
|
success: function(data) {
|
|
content='Click one of the link(s) below to manually connect this face as once-off connection to the person:<br><br>'
|
|
for( var key in data ) {
|
|
var person = data[key];
|
|
content+= '<a role=button class="link link-primary" onClick="OverrideForceMatch('+person.id+','
|
|
+face_id+','+face_pos+','+type_id+')">'+person.firstname+' '+person.surname+' ('+person.tag+')</a><br>'
|
|
}
|
|
$('#search_person_results').html( content )
|
|
}
|
|
} )
|
|
return false
|
|
}
|
|
|
|
function RemoveOverrideForceMatch(face_pos)
|
|
{
|
|
d='&face_id='+objs[current].faces[face_pos].id+'&person_tag='+objs[current].faces[face_pos].who+
|
|
'&file_eid='+current
|
|
$.ajax({ type: 'POST', data: d, url: '/remove_override_force_match',
|
|
success: function(data) {
|
|
delete objs[current].faces[face_pos].override
|
|
$('#dbox').modal('hide')
|
|
DrawImg()
|
|
return false
|
|
}
|
|
} )
|
|
return false
|
|
}
|
|
|
|
function RemoveOverrideNoMatch(face_pos, type_id)
|
|
{
|
|
d='&face_id='+objs[current].faces[face_pos].id+'&type_id='+type_id
|
|
$.ajax({ type: 'POST', data: d, url: '/remove_override_no_match',
|
|
success: function(data) {
|
|
delete objs[current].faces[face_pos].override
|
|
$('#dbox').modal('hide')
|
|
DrawImg()
|
|
return false
|
|
}
|
|
} )
|
|
return false
|
|
}
|
|
|
|
function AddNoMatchOverride(type_id, face_id, face_pos, type_id)
|
|
{
|
|
d='&type_id='+type_id+'&face_id='+face_id
|
|
$.ajax({ type: 'POST', data: d, url: '/add_no_match_override',
|
|
success: function(data) {
|
|
objs[current].faces[face_pos].override={}
|
|
objs[current].faces[face_pos].override.who=NMO[type_id].name
|
|
objs[current].faces[face_pos].override.distance='N/A'
|
|
objs[current].faces[face_pos].override.type_id=type_id
|
|
objs[current].faces[face_pos].override.type_name=NMO[type_id].name
|
|
$('#dbox').modal('hide')
|
|
$('#faces').prop('checked',true)
|
|
DrawImg()
|
|
}
|
|
} )
|
|
}
|
|
|
|
|
|
// function that is called when we click on a face in the viewer and we want to
|
|
// potentially override the non-match / match... it shows the face, and then
|
|
// based on which menu item got us here, shows appropriate text to do next action
|
|
function FaceDBox(key, item)
|
|
{
|
|
face_pos=item[key]['which_face']
|
|
div ='<p>'
|
|
div+='Face position #' + face_pos
|
|
div+='<div id="face_img"></div>'
|
|
$.ajax({ type: 'POST', data: null, url: '/get_face_from_image/'+item[key]['id'],
|
|
success: function(img_data) {
|
|
$('#face_img').html( '<img src="data:image/jpeg;base64,' + img_data + '"></img>' )
|
|
}
|
|
} )
|
|
div+='</p>'
|
|
if ( key == 'remove_override_force_match' )
|
|
{
|
|
if( objs[current].faces[face_pos].override.type_name == 'Manual match to existing person' )
|
|
div+='<div class="row col-12">remove this override (force match to: ' + objs[current].faces[face_pos].override.who + ')</div>'
|
|
else
|
|
div+='<div class="row col-12">remove this override (no match)</div>'
|
|
div+='<div class="row">'
|
|
div+='<button class="btn btn-outline-info col-6" type="button" onClick="$(\'#dbox\').modal(\'hide\'); return false">Cancel</button>'
|
|
div+='<button class="btn btn-outline-danger col-6" type="button" '
|
|
if( objs[current].faces[face_pos].override.type_name == 'Manual match to existing person' )
|
|
div+='onClick="RemoveOverrideForceMatch(' +face_pos+ ')">Remove</button>'
|
|
else
|
|
div+='onClick="RemoveOverrideNoMatch(' +face_pos+','+objs[current].faces[face_pos].override.type_id+ ')">Remove</button>'
|
|
div+='</div>'
|
|
}
|
|
if ( key == 'no_match_new_person' )
|
|
{
|
|
div+='<br>create new person NOT YET'
|
|
}
|
|
if ( key == 'no_match_new_refimg' )
|
|
{
|
|
div+='<h5>search for existing person: NOT YET</h5>'
|
|
}
|
|
if ( key == 'wrong_person' )
|
|
{
|
|
div+='<br>wrong person, so mark this as the wrong person/refimg connection, for face#' + item[key]['which_face']
|
|
div+='<br>face db id: ' + item[key]['id']
|
|
}
|
|
if( /NMO_/.test(key) )
|
|
{
|
|
if( item[key].name == 'Override: Manual match to existing person' )
|
|
{
|
|
div+='<h5>search for existing person:</h5>'
|
|
div+=
|
|
`
|
|
<div class="input-group mb-3"><input type="text" class="form-control" id="stext" placeholder="tag/name">
|
|
<button id="search_person_btn" class="btn btn-outline-success" type="button" onClick="SearchForPerson(`
|
|
div+= item[key]['id'] + ',' + face_pos + ',' + item[key].type_id
|
|
div+=`)">Search</button>
|
|
</div>
|
|
<div id="search_person_results">
|
|
</div>
|
|
<script>
|
|
$("#stext").keypress(function (e) { if (e.which == 13) { $("#search_person_btn").click(); return false; } } )
|
|
</script>`
|
|
}
|
|
else
|
|
{
|
|
type_id=item[key].type_id
|
|
face_id=item[key].id
|
|
div+='<div class="row">'
|
|
div+='<button class="btn btn-outline-info col-6" type="button" onClick="$(\'#dbox\').modal(\'hide\'); return false">Cancel</button>'
|
|
div+='<button class="btn btn-outline-danger col-6" type="button" '+
|
|
'onClick="AddNoMatchOverride('+type_id+','+face_id+','+face_pos+','+type_id+ ')">Apply Override</button>'
|
|
div+='</div>'
|
|
}
|
|
}
|
|
$('#dbox-title').html(item[key]['name'])
|
|
$('#dbox-content').html(div)
|
|
$('#dbox').modal('show')
|
|
}
|
|
|
|
|
|
// func called to show logs relating to this filename from viewer
|
|
// pops results up in a dbox
|
|
function JoblogSearch()
|
|
{
|
|
data="eid="+current
|
|
$.ajax({ type: 'POST', data: data, url: '/joblog_search', success: function(res) {
|
|
data = JSON.parse(res)
|
|
div ='<div><table class="table table-striped table-sm sm-txt">'
|
|
div+='<tr><th>Log</th><th>When</th><th>Job</th></tr>'
|
|
for( i=0; i<data.length; i++ )
|
|
{
|
|
div+='<tr><td>' + data[i].log + '</td><td>' + data[i].log_date + '</td><td>'
|
|
div+='<a href="/job/' + data[i].id + '">' + data[i].name + ' #:'+data[i].id+'</a></td></tr>'
|
|
}
|
|
div+='</table></div>'
|
|
$('#dbox-title').html("Logs relating to this filename")
|
|
$('#dbox-content').html(div)
|
|
$('#dbox').modal('show')
|
|
}
|
|
})
|
|
}
|