Commit aaecd5d5 authored by josh's avatar josh
Browse files

image viewer

parent ab28f438
{
"python.linting.enabled": false
}
\ No newline at end of file
......@@ -5,6 +5,7 @@ import webbrowser
import pathlib
import os
import sys
import shutil
from werkzeug.utils import secure_filename
......@@ -18,6 +19,8 @@ OR_LOC = None
MS_LOC = None
SL_LOC = None
STATIC_LOC = None
'''
APP CONFIG
'''
......@@ -61,9 +64,20 @@ DATABASE FUNCTIONALITY
@app.route("/image-list", methods=["GET", "POST"])
def getDBImageList():
if request.method == "GET":
imageList = [ str( f ) for f in OR_LOC.iterdir() ]
imageList = [ str( f.name ) for f in OR_LOC.iterdir() ]
return { "data": imageList }
@app.route("/copy-to-static", methods=["GET", "POST"])
def copyImageToStatic():
if request.method == "POST":
imgLoc = OR_LOC.joinpath( request.get_data().decode( "utf-8" ) )
# TO DO : DELETE PREVIOUS ACTIVE IMAGES
if imgLoc.is_file():
shutil.copy( imgLoc, STATIC_LOC.joinpath( imgLoc.name ) )
return "static/{}".format( imgLoc.name )
else:
return jsonify( "Not Found" )
def open_browser():
webbrowser.open_new( "http://127.0.0.1:2000/" )
......@@ -77,7 +91,8 @@ if __name__ == "__main__":
OR_LOC = DB_LOC.joinpath( "Original" )
MS_LOC = DB_LOC.joinpath( "MeanShift" )
SL_LOC = DB_LOC.joinpath( "Sliced" )
print( DB_LOC )
STATIC_LOC = pathlib.Path.cwd().absolute().joinpath( "static" )
'''
Run app
......
......@@ -5,9 +5,93 @@
function showDBViewer( data=false )
{
imageList = data["data"];
console.log( imageList );
var imageList = data["data"];
$('#main-content').empty();
var dbViewer = new DBViewer();
// clear main content
$( "#main-content" ).empty();
$( "#main-content" ).append( dbViewer );
// add image names to list
for ( i = 0; i < imageList.length; i++ ) {
$( "#image-file-list ul" ).append( new DBListElement( imageList[i], i ) );
}
}
/* Mask Toolbar template */
const DBViewerTemplate = document.createElement( "template" );
DBViewerTemplate.innerHTML = `
<div class="mask-toolbar-container">
<div id="image-file-list">
<ul>
</div>
<div id="image-view">
<img id="original-image" src="static/default.jpg">
</img>
</div>
</div>
`;
/*
* DB Viewer Class
*/
class DBViewer extends HTMLElement {
constructor() {
super();
this.appendChild( DBViewerTemplate.content.cloneNode( true ) );
}
copyImageToStatic( newImage ) {
copyToStatic( newImage, this.updateImage, false );
}
updateImage( newImageUrl ) {
$("#original-image").attr( "src", newImageUrl );
}
connectedCallback() {
//this.shadowRoot.getElementById("button1").addEventListener( "click", () => this.button1() );
}
disconnectedCallback() {
//this.shadowRoot.querySelector("button1").removeEventListener();
}
}
class DBListElement extends HTMLElement {
constructor( name, id ) {
super();
this._name = name;
this._id = id;
this.innerHTML = `
<button class="db-list-element-cont" id="db-list-${id}">
${ name }
</button>
`
}
get name() { return this._name; }
set name( name ) { this._name = name; }
updateViewer() {
var viewer = document.getElementsByTagName( "db-viewer" )[0];
viewer.copyImageToStatic( this._name );
}
connectedCallback() {
document.getElementById( "db-list-" + this._id ).addEventListener( "click", ev => this.updateViewer( ev ) );
}
disconnectedCallback() {
//this.shadowRoot.querySelector("button1").removeEventListener();
}
}
window.customElements.define( "db-viewer", DBViewer );
window.customElements.define( "db-list-element", DBListElement );
/*
* DB Viewer Class
*/
db-viewer {
width: 100%;
height: 100%;
}
.mask-toolbar-container {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 20% 80%;
grid-template-rows: 100%;
grid-template-areas:
"image-list image-view"
}
#image-file-list {
grid-area: image-list;
background-color: #333;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#image-file-list ul{
height: 500px;
width: 80%;
margin-top: 5%;
overflow: hidden;
overflow-y: scroll;
background-color: white;
}
#image-view {
grid-area: image-view;
background-color: white;
padding: 10px;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas:
"original-img"
}
#original-image {
grid-area: original-img;
}
/*
* DB List Element
*/
db-list-element {
background-color: white;
display: block;
padding: 12px;
/*text-align: center;*/
border: none;
text-decoration: none;
transition-duration: 0.2s;
cursor: pointer;
}
db-list-element:hover {
color: white;
background-color: gray;
}
db-list-element button {
border: none;
cursor: pointer;
background-color: rgba( 255, 255, 255, 0.0 );
}
\ No newline at end of file
......@@ -16,7 +16,7 @@ function defaultSuccess( data )
}
// GET Request to backend
function appGET( url, successCallback=defaultSuccess, errorCallback=defaultError, data=false )
function appGET( url, successCallback=false, errorCallback=false, data=false )
{
$.ajax({
type: "GET",
......@@ -27,10 +27,52 @@ function appGET( url, successCallback=defaultSuccess, errorCallback=defaultError
processData: false,
async: false,
success: function( data ) {
successCallback( data );
if ( successCallback ) {
successCallback( data );
}
else {
defaultSuccess( data );
}
},
error: function( err ) {
errorCallback( err );
if ( errorCallback ) {
errorCallback( data );
}
else {
defaultError( data );
}
}
});
}
function appPOST( url, successCallback=false, errorCallback=false, data=false )
{
$.ajax({
type: "POST",
url: url,
data: data,
contentType: false,
cache: false,
processData: false,
async: false,
success: function( data ) {
if ( successCallback ) {
console.log( successCallback );
successCallback( data );
}
else {
defaultSuccess( data );
}
},
error: function( err ) {
if ( errorCallback ) {
errorCallback( data );
}
else {
defaultError( data );
}
}
});
}
......@@ -43,5 +85,11 @@ function appGET( url, successCallback=defaultSuccess, errorCallback=defaultError
// Load a list of images in database
function loadImageList( callback )
{
appGET( "/image-list", successCallback=callback );
}
\ No newline at end of file
appGET( "/image-list", callback, false, false );
}
// copy image to static folder
function copyToStatic( imageName, successCallback, errorCallback )
{
appPOST( "/copy-to-static", successCallback, errorCallback, data=imageName );
}
......@@ -51,9 +51,7 @@ html, body {
.content {
background-color: #ecf0f1;
grid-area: content;
padding: 5%;
padding-top: 10%;
padding: 3%;
display: flex;
flex-flow: row nowrap;
justify-content: center;
......@@ -70,8 +68,6 @@ html, body {
}
.button {
border: none;
color: red;
padding: 10px;
text-align: center;
text-decoration: none;
......
......@@ -8,6 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="static/styles.css">
<link rel="stylesheet" href="static/dbViewerStyles.css">
</head>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment