moved most of the js out to internal/js/view_support.js
This commit is contained in:
@@ -15,6 +15,7 @@
|
||||
</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
|
||||
@@ -36,9 +37,9 @@
|
||||
{% 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]}}'
|
||||
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}}'
|
||||
@@ -49,142 +50,6 @@
|
||||
objs[{{id}}]=e
|
||||
{% endfor %}
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
// Define this once and before it will be called, hence at the top of this file
|
||||
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' ) )
|
||||
{
|
||||
$('.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<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
|
||||
context.strokeStyle = 'green'
|
||||
if( objs[current].faces[i].who )
|
||||
{
|
||||
// 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
|
||||
str=objs[current].faces[i].who
|
||||
if( $('#distance').prop('checked') )
|
||||
str += "("+objs[current].faces[i].distance+")"
|
||||
|
||||
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 = "green"
|
||||
context.fillText(str, x+w/2, y-2)
|
||||
}
|
||||
/* can use to show lower left coords of a face for debugging
|
||||
else
|
||||
{
|
||||
context.font = "14px Arial"
|
||||
context.textAlign = "center"
|
||||
context.fillStyle = "black"
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function ResizeVideo()
|
||||
{
|
||||
$('#video').height(window.innerHeight*gap)
|
||||
}
|
||||
|
||||
function FaceToggle()
|
||||
{
|
||||
$('#distance').prop('disabled', function(i, v) { return !v; });
|
||||
DrawImg()
|
||||
}
|
||||
|
||||
function CallViewListRoute(dir)
|
||||
{
|
||||
s='<form id="_fmv" method="POST" action="/viewlist">'
|
||||
@@ -207,32 +72,6 @@
|
||||
$('#_fmv').submit();
|
||||
}
|
||||
|
||||
function ViewImageOrVideo()
|
||||
{
|
||||
if( objs[current].type == 'Image' )
|
||||
{
|
||||
im.src='http://mara.ddp.net:5000/' + objs[current].url
|
||||
$('#video').hide()
|
||||
$('#figure').show()
|
||||
if( fullscreen )
|
||||
{
|
||||
console.log('going fs on image')
|
||||
$('#canvas').get(0).requestFullscreen()
|
||||
}
|
||||
}
|
||||
if( objs[current].type == 'Video' )
|
||||
{
|
||||
$('#video').prop('src', 'http://mara.ddp.net:5000/' + objs[current].url )
|
||||
$('#figure').hide()
|
||||
$('#video').show()
|
||||
if( fullscreen )
|
||||
{
|
||||
console.log('going fs on video')
|
||||
$('#video').get(0).requestFullscreen()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div id="viewer" class="container-fluid">
|
||||
|
||||
Reference in New Issue
Block a user