ddp/photoassistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

include the js form the internal dir and viewer now has tooltips on buttons, and all buttons work, call the right javascript, send jobs to the pa_job_manager, and make image go gray with throbber, and on job completion, hide throbber, redraw the image in color and with the newly transformed image

Browse Source
This commit is contained in:
Damien De Paoli
2021-08-15 21:26:43 +10:00
parent 40c0e3631c
commit 652a89161d
7 changed files with 101 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
templates/viewer.html
View File

@@ -13,8 +13,13 @@
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23CFF4FC'/%3e%3c/svg%3e");
}
</style>
<script src="{{ url_for( 'internal', filename='js/view_transform.js')}}"></script>
<script>
var gap=0.8
var grayscale=0
var throbber=0
function NewWidth()
{
@@ -47,7 +52,14 @@
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();
if( $('#faces').prop('checked') )
{
@@ -125,12 +137,12 @@
<div class="row">
{% if eids.find(obj.id|string) > 0 %}
<form id="prev" class="col col-auto" action="/viewprev" method="POST">
<input type="hidden" name="current" value="{{obj.id}}">
<input id="current" type="hidden" name="current" value="{{obj.id}}">
<input type="hidden" name="eids" value="{{eids}}">
<input id="prev_fname" type="hidden" name="fname" value="">
<input id="prev_faces" type="hidden" name="faces" value="">
<input id="prev_distance" type="hidden" name="distance" value="">
<button class="btn btn-outline-info h-75" id="la"
<button title="Show previous image" class="btn btn-outline-info h-75" id="la"
onClick="
$('#prev_fname').val($('#fname').prop('checked'))
$('#prev_faces').val($('#faces').prop('checked'))
@@ -143,6 +155,7 @@
{% if obj.type.name == "Image" %}
<figure class="col col-auto border border-info rounded m-0 p-1" id="figure">
<canvas id="canvas"></canvas>
<img id="throbber" src="{{url_for('internal', filename='throbber.gif')}}" style="display:none;">
<script>
var im=new Image();
im.onload=DrawImg
@@ -190,7 +203,7 @@
<input id="next_fname" type="hidden" name="fname" value="">
<input id="next_faces" type="hidden" name="faces" value="">
<input id="next_distance" type="hidden" name="distance" value="">
<button class="col col-auto btn btn-outline-info h-75" id="ra"
<button title="Show next image" class="col col-auto btn btn-outline-info h-75" id="ra"
onClick="
$('#next_fname').val($('#fname').prop('checked'))
$('#next_faces').val($('#faces').prop('checked'))
@@ -212,26 +225,26 @@
</button>
</div>
<span class="col col-auto my-auto">Show:</span>
<div class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
<div title="Toggle showing filename" class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
<input class="form-check-input" type="checkbox" id="fname" onChange="$('.figure-caption').toggle()"
{% if sels['fname']=='true' %} checked {% endif %} >
<label class="form-check-label ps-1" for="fname">Filename</label>
</div>
<div class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
<div title="Toggle showing matched faces" class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
<input class="form-check-input" type="checkbox" onChange="FaceToggle()" id="faces"
{% if not obj.file_details.faces %} disabled {% endif %}
{% if sels['faces']=='true' %} checked {% endif %}
>
<label class="form-check-label ps-1" for="faces">Faces</label>
</div>
<div class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
<div title="Toggle showing 'distance' on matched faces" class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
<input class="form-check-input" type="checkbox" onChange="DrawImg()" id="distance"
{% if not obj.file_details.faces or sels['faces']=='false' %} disabled {% endif %}
{% if sels['distance']=='true' %} checked {% endif %}
>
<label class="form-check-label ps-1" for="distance">Distance</label>
</div>
<div class="col col-auto my-auto">
<div title="Change the model used to detect faces" class="col col-auto my-auto">
AI Model:
{% if not obj.file_details.faces %}
{{CreateSelect( "model", 0, ["N/A", "normal", "slow/accurate"], "", "rounded norm-txt", [0,1,2])|safe }}
@@ -240,22 +253,22 @@
{% endif %}
</div>
<div class="col col-auto pt-1">
<button class="btn btn-outline-info p-1">
<button class="btn btn-outline-info p-1" title="Rotate by 90 degrees" onClick="Transform(90)">
<svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#rot90"/></svg>
</button>
<button class="btn btn-outline-info p-1">
<button class="btn btn-outline-info p-1" title="Rotate by 180 degrees" onClick="Transform(180)">
<svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#rot180"/></svg>
</button>
<button class="btn btn-outline-info p-1">
<button class="btn btn-outline-info p-1" title="Rotate by 270 degrees" onClick="Transform(270)">
<svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#rot270"/></svg>
</button>
<button class="btn btn-outline-info p-1">
<button class="btn btn-outline-info p-1" title="Flip horizontally" onClick="Transform('fliph')">
<svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#flip_h"/></svg>
</button>
<button class="btn btn-outline-info p-1">
<button class="btn btn-outline-info p-1" title="Flip vertically" onClick="Transform('flipv')">
<svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#flip_v"/></svg>
</button>
<button class="btn btn-outline-info p-1" onClick="document.getElementById('canvas').requestFullscreen()">
<button class="btn btn-outline-info p-1" title="View in Fullscreen mode" onClick="document.getElementById('canvas').requestFullscreen()">
<svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#fullscreen"/></svg>
</button>
</div>