photoassistant/internal/js/view_support.js

// work out new width for canvas.  depending on whether width > height of the
// 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)
}

// 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' ) )
    {
        $('.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();
        }
    }
}

// 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='http://mara.ddp.net:5000/' + objs[current].url
        $('#video').hide()
        $('#vid-caption').hide()
        $('#figure').show()
        if( fullscreen )
            $('#canvas').get(0).requestFullscreen()
    }
    if( objs[current].type == 'Video' )
    {
        $('#video').prop('src', 'http://mara.ddp.net:5000/' + objs[current].url )
        $('#figure').hide()
        $('#video').show()
        $('#vid-caption').show()
        ResizeVideo()
        if( fullscreen )
            $('#video').get(0).requestFullscreen()
    }
}