109 lines
4.2 KiB
HTML
109 lines
4.2 KiB
HTML
{% 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 %}
|