added viewnext and viewprev routes and plumbed these in to the file viewer code. Viewer code now works has a prev/next button, and handles videos

templates/viewer.html

@@ -0,0 +1,108 @@
+{% extends "base.html" %} {% block main_content %}
+<script>
+    var gap=0.8
+
+    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
+        context.drawImage(im, 0, 0, canvas.width, canvas.height )
+
+        /* need a for loop
+        context.beginPath();
+        new_x=(orig_face.x/orig_face.orig_w)*img.width/(img.height/canvas.height)
+        new_y=(orig_face.y/orig_face.orig_h)*thumbsize/(img.height/canvas.height)
+        new_w=(orig_face.w/orig_face.orig_w)*img.width/(img.height/canvas.height)
+        new_h=(orig_face.h/orig_face.orig_h)*thumbsize/(img.height/canvas.height)
+        context.rect(new_x, new_y, new_w, new_h)
+        context.lineWidth = 2;
+        context.strokeStyle = 'green';
+        context.stroke();
+        */
+    }
+
+    function ResizeVideo()
+    {
+        $('#_v').height(window.innerHeight*gap)
+    }
+</script>
+
+<div class="container-fluid">
+    {% set max=eids.split(',')|length %}
+    <br>
+            <center>
+        <input type="hidden" name="eids" value={{eids}}>
+        <div class="form-row col-lg-12">
+            {% if eids.find(obj.id|string) > 0 %}
+                <form id="prev" class="form form-inline" action="/viewprev" method="POST">
+                <input type="hidden" name="current" value="{{obj.id}}">
+                <input type="hidden" name="eids" value="{{eids}}">
+                <button class="btn btn-outline-info h-75" id="la"><i class="fas fa-angle-double-left"></i></button>
+                </form id="prev">
+            {% endif %}
+            {% if obj.type.name == "Image" %}
+                <figure style="border: 1px solid #5bc0de; border-radius: 3px;">
+                    <canvas id="canvas"></canvas>
+                    <script>
+                        var im=new Image();
+                        im.onload=DrawImg
+                        im.src="/{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}"
+                        var context = canvas.getContext('2d')
+                        window.addEventListener('resize', DrawImg, false);
+                    </script>
+                    <figcaption class="figure-caption text-center text-wrap text-break">{{obj.name}}</figcaption>
+                </figure>
+            {% elif obj.type.name == "Video" %}
+                <video id="_v" controls>
+                    <source src="/{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+                <script>
+                window.addEventListener('resize', ResizeVideo, false);
+                ResizeVideo()
+                </script>
+            {% endif %}
+
+            {% for eid in eids.split(',') %}
+                {% if loop.index == max-1 %}
+                    {% if eid|int != obj.id %}
+                        <form id="next" class="form form-inline" action="/viewnext" method="POST">
+                        <input type="hidden" name="current" value="{{obj.id}}">
+                        <input type="hidden" name="eids" value="{{eids}}">
+                        <button class="btn btn-outline-info h-75" id="ra"><i class="fas fa-angle-double-right"></i></button>
+                        </form id="next">
+                    {% endif %}
+                {% endif %}
+            {% endfor %}
+        </div id="/form-row">
+    </div class="form-row col-lg-12">
+            </center>
+</div class="container">
+{% endblock main_content %}