convert OPT from a dict to a class

internal/js/view_support.js

@@ -0,0 +1,161 @@
+    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 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()
+            }
+        }
+    }