Commit b05d5bb9 authored by josh's avatar josh
Browse files

select and load image from database

parent addbf8dc
......@@ -19,7 +19,8 @@ OR_LOC = None
MS_LOC = None
SL_LOC = None
STATIC_LOC = None
STATIC_LOC = None
ACTIVE_MEDIA = None
'''
APP CONFIG
......@@ -73,8 +74,13 @@ def copyImageToStatic():
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 )
# clear images in active media
for f in ACTIVE_MEDIA.iterdir():
if f.is_file():
f.unlink()
shutil.copy( imgLoc, ACTIVE_MEDIA.joinpath( imgLoc.name ) )
return "static/activeMedia/{}".format( imgLoc.name )
else:
return jsonify( "Not Found" )
......@@ -92,7 +98,8 @@ if __name__ == "__main__":
MS_LOC = DB_LOC.joinpath( "MeanShift" )
SL_LOC = DB_LOC.joinpath( "Sliced" )
STATIC_LOC = pathlib.Path.cwd().absolute().joinpath( "static" )
STATIC_LOC = pathlib.Path.cwd().absolute().joinpath( "static" )
ACTIVE_MEDIA = STATIC_LOC.joinpath( "activeMedia" )
'''
Run app
......
......@@ -38,6 +38,10 @@ class DBViewer extends HTMLElement {
this._imageList = imageList;
this._originalImageController = false;
this._slicedImageController = false;
this._processedImageController = false;
this.appendChild( DBViewerTemplate.content.cloneNode( true ) );
}
......@@ -48,33 +52,38 @@ class DBViewer extends HTMLElement {
copyToStatic( newImage, this.updateImage, false );
}
updateImage( newImageUrl ) {
console.log( "update image" );
$("#original-image").attr( "src", newImageUrl );
updateOriginalImageCallback( returnData ) {
/* Callback for updating image url */
var controller = document.getElementById( "originalImage" ).updateImage( returnData );
}
newImageSelected( ev ) {
var select = document.getElementById( "image-select" );
console.log( select.value );
copyToStatic( select.value, this.updateOriginalImageCallback, false );
}
connectedCallback() {
// create image controllers
var dbViewerCont = document.getElementsByClassName( "db-view-container" )[0];
var originalImage = new ImageController( "original-image", 800, 800, "static/GeoEye.jpg" );
originalImage.id = "originalImage";
originalImage.style.gridArea = "original";
// CREATE IMAGE CONTROLLERS
// Image controller for original image
this._originalImageController = new ImageController( "original-image", 800, 800, "static/activeMedia/GeoEye.jpg" );
this._originalImageController.id = "originalImage";
this._originalImageController.style.gridArea = "original";
var sliceImage = new ImageController( "slice-image", 500, 500, "static/Slice.jpg" );
sliceImage.id = "sliceImage";
sliceImage.style.gridArea = "slice";
// Image controller for sliced, unprocessed image
this._slicedImageController = new ImageController( "slice-image", 500, 500, "static/activeMedia/old/Slice.jpg" );
this._slicedImageController.id = "sliceImage";
this._slicedImageController.style.gridArea = "slice";
var processedSlice = new ImageController( "processed-image", 500, 500, "static/MeanShift.jpg" );
processedSlice.id = "processedSlice";
processedSlice.style.gridArea = "processed";
// Image controller for processed image
this._processedImageController = new ImageController( "processed-image", 500, 500, "static/activeMedia/old/MeanShift.jpg" );
this._processedImageController.id = "processedSlice";
this._processedImageController.style.gridArea = "processed";
// Temporary tool bar
var toolBar = document.createElement( "div" );
toolBar.style.backgroundColor = "tomato";
toolBar.style.gridArea = "toolbar";
......@@ -103,9 +112,9 @@ class DBViewer extends HTMLElement {
toolBar.appendChild(label).appendChild(select);
dbViewerCont.appendChild( originalImage );
dbViewerCont.appendChild( sliceImage );
dbViewerCont.appendChild( processedSlice );
dbViewerCont.appendChild( this._originalImageController );
dbViewerCont.appendChild( this._slicedImageController );
dbViewerCont.appendChild( this._processedImageController );
dbViewerCont.appendChild( toolBar );
dbViewerCont.style.display = "grid";
......@@ -117,21 +126,6 @@ class DBViewer extends HTMLElement {
"original . slice . "
"original . processed . "`;
/*
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 75px 1fr;
grid-template-areas:
"header"
"content";
*/
//this.shadowRoot.getElementById("button1").addEventListener( "click", () => this.button1() );
}
disconnectedCallback() {
//this.shadowRoot.querySelector("button1").removeEventListener();
}
}
......
/* Mask Toolbar template */
const ImageControllerTemplate = document.createElement( "template" );
ImageControllerTemplate.innerHTML = `
<div id="original-image" style="display:none;">
<img id="image" src="static/GeoEyeLarge-2.jpg">
</div>
<canvas id="myCanvas" width="1000" height="1000" style="border:1px solid #000000;"></canvas>
`;
/*
* DB Viewer Class
*/
class ImageController extends HTMLElement {
constructor( id, w, h, imageUrl ) {
super();
//this.appendChild( ImageControllerTemplate.content.cloneNode( true ) );
this._canvasID = id + "-canvas";
this._imageID = id + "-image";
......@@ -28,8 +17,8 @@ class ImageController extends HTMLElement {
this._mousePosX = 0;
this._mousePosY = 0;
this._canvCornerX = 0;
this._canvCornerY = 0;
this._imgCornerX = 0;
this._imgCornerY = 0;
this._scale = 1.0;
......@@ -47,6 +36,27 @@ class ImageController extends HTMLElement {
`;
}
resetImage() {
this._imgMaxWidth = this._image.width;
this._imgMaxHeight = this._image.height;
this._imgCurrentWidth = this._image.width;
this._imgCurrentHeight = this._image.height;
this._scale = 1.0;
this._imgCornerX = 0;
this._imgCornerY = 0;
this._context.clearRect( 0, 0, this._canvas.width, this._canvas.height );
this._context.drawImage( this._image, 0, 0 );
}
updateImage( newUrl ) {
this._image.src = newUrl;
this.resetImage();
}
//get id() { return this._id; }
clicked( ev ) {
......@@ -71,14 +81,14 @@ class ImageController extends HTMLElement {
var offsetX = this._mousePosX - prevX;
var offsetY = this._mousePosY - prevY;
this._canvCornerX += offsetX;
this._canvCornerY += offsetY;
this._imgCornerX += offsetX;
this._imgCornerY += offsetY;
// Redraw
this._context.clearRect( 0, 0, this._canvas.width, this._canvas.height );
this._context.drawImage( this._image,
this._canvCornerX,
this._canvCornerY ,
this._imgCornerX,
this._imgCornerY ,
this._imgMaxWidth * this._scale,
this._imgMaxHeight * this._scale );
}
......@@ -94,8 +104,8 @@ class ImageController extends HTMLElement {
// Redraw
this._context.clearRect( 0, 0, this._canvas.width, this._canvas.height );
this._context.drawImage( this._image,
this._canvCornerX,
this._canvCornerY ,
this._imgCornerX,
this._imgCornerY ,
this._imgMaxWidth * this._scale,
this._imgMaxHeight * this._scale );
}
......@@ -107,13 +117,7 @@ class ImageController extends HTMLElement {
this._image = document.getElementById( this._imageID );
this._image.addEventListener('load', e => {
this._imgMaxWidth = this._image.width;
this._imgMaxHeight = this._image.height;
this._imgCurrentWidth = this._image.width;
this._imgCurrentHeight = this._image.height;
this._context.drawImage( this._image, 0, 0 );
this.resetImage();
});
// Mouse Click Events
......@@ -123,12 +127,10 @@ class ImageController extends HTMLElement {
// Mouse Wheel Events
this._canvas.addEventListener( "wheel", ( ev ) => this.wheel( ev ) );
//this.shadowRoot.getElementById("button1").addEventListener( "click", () => this.button1() );
}
disconnectedCallback() {
//this.shadowRoot.querySelector("button1").removeEventListener();
this._canvas.removeEventListener();
}
}
......
......@@ -56,11 +56,9 @@ function appPOST( url, successCallback=false, errorCallback=false, data=false )
processData: false,
async: false,
success: function( data ) {
if ( successCallback ) {
console.log( successCallback );
successCallback( data );
}
else {
defaultSuccess( data );
......
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