Commit 86e9aea7 authored by josh's avatar josh
Browse files

added selectors for images

parent 1deadb13
......@@ -6,7 +6,7 @@ import pathlib
import os
import sys
import shutil
from pprint import pprint
from werkzeug.utils import secure_filename
'''
......@@ -59,6 +59,52 @@ def upload_file():
file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
return jsonify("Ok")
'''
DATABASE HELPER FUNCTIONS
'''
def getAssociatedFiles( imageName: str ) -> dict:
'''
Retreives all file names from the following directories:
- MS_LOC/imageName/128
- MS_LOC/imageName/256
- MS_LOC/imageName/512
- SL_LOC/imageName/128
- SL_LOC/imageName/256
- SL_LOC/imageName/512
'''
imageMSPath = MS_LOC.joinpath( imageName )
imageSLPath = SL_LOC.joinpath( imageName )
print( imageMSPath )
print( imageSLPath )
# Mean Shift Color Seg files
msColor128 = [ f.name for f in imageMSPath.joinpath( "128" ).iterdir() if "color" in f.name ]
msColor256 = [ f.name for f in imageMSPath.joinpath( "256" ).iterdir() if "color" in f.name ]
msColor512 = [ f.name for f in imageMSPath.joinpath( "512" ).iterdir() if "color" in f.name ]
# Mean Shift Image Label files
msLabel128 = [ f.name for f in imageMSPath.joinpath( "128" ).iterdir() if "labels" in f.name ]
msLabel256 = [ f.name for f in imageMSPath.joinpath( "256" ).iterdir() if "labels" in f.name ]
msLabel512 = [ f.name for f in imageMSPath.joinpath( "512" ).iterdir() if "labels" in f.name ]
# Slice files
s128 = [ f.name for f in imageSLPath.joinpath( "128" ).iterdir() ]
s256 = [ f.name for f in imageSLPath.joinpath( "256" ).iterdir() ]
s512 = [ f.name for f in imageSLPath.joinpath( "512" ).iterdir() ]
return {
"msColor128": msColor128,
"msColor256": msColor256,
"msColor512": msColor512,
"msLabel128": msLabel128,
"msLabel256": msLabel256,
"msLabel512": msLabel512,
"s128": s128,
"s256": s256,
"s512": s512
}
'''
DATABASE FUNCTIONALITY
'''
......@@ -68,19 +114,25 @@ def getDBImageList():
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
print( imgLoc )
if imgLoc.is_file():
# clear images in active media
# Get all available processed images for image
associatedFiles = getAssociatedFiles( imgLoc.name.split( "." )[0] )
associatedFiles["mainImageName"] = imgLoc.name
associatedFiles["mainImageUrl"] = "static/activeMedia/{}".format( imgLoc.name )
pprint( associatedFiles )
# Clear images in active media
for f in ACTIVE_MEDIA.iterdir():
if f.is_file():
f.unlink()
# Copy image to active media
shutil.copy( imgLoc, ACTIVE_MEDIA.joinpath( imgLoc.name ) )
return "static/activeMedia/{}".format( imgLoc.name )
return jsonify( associatedFiles )
else:
return jsonify( "Not Found" )
......
......@@ -14,9 +14,9 @@ function showDBViewer( data=false )
$( "#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 ) );
}
//for ( i = 0; i < imageList.length; i++ ) {
// $( "#image-file-list ul" ).append( new DBListElement( imageList[i], i ) );
//}
}
......@@ -28,7 +28,6 @@ DBViewerTemplate.innerHTML = `
</div>
`;
/*
* DB Viewer Class
*/
......@@ -37,11 +36,20 @@ class DBViewer extends HTMLElement {
super();
this._imageList = imageList;
this._sliceSizes = [ "128", "256", "512" ];
this._originalImageController = false;
this._slicedImageController = false;
this._processedImageController = false;
this._toolBar = false;
this._sliceSizeSelector = false;
this._imageSelector = false;
this._sliceSelector = false;
this._processedTypeSelector = false;
this.appendChild( DBViewerTemplate.content.cloneNode( true ) );
}
......@@ -52,9 +60,24 @@ class DBViewer extends HTMLElement {
copyToStatic( newImage, this.updateImage, false );
}
sliceSizeSelected( ev ) {
console.log( "slice size selected" );
}
sliceSelected( ev ) {
console.log( "slice selected" );
}
processedTypeSelected( ev ) {
console.log( "processed type selected" );
}
updateOriginalImageCallback( returnData ) {
console.log( returnData )
/* Callback for updating image url */
var controller = document.getElementById( "originalImage" ).updateImage( returnData );
var controller = document.getElementById( "originalImage" ).updateImage( returnData["mainImageUrl"] );
}
newImageSelected( ev ) {
......@@ -69,58 +92,59 @@ class DBViewer extends HTMLElement {
// CREATE IMAGE CONTROLLERS
// Image controller for original image
this._originalImageController = new ImageController( "original-image", 400, 400, "static/activeMedia/GeoEye.jpg" );
this._originalImageController = new ImageController( "original-image", 450, 450, "static/default.jpg" );
this._originalImageController.id = "originalImage";
this._originalImageController.style.gridArea = "original";
// Image controller for sliced, unprocessed image
this._slicedImageController = new ImageController( "slice-image", 400, 400, "static/activeMedia/old/Slice.jpg" );
this._slicedImageController = new ImageController( "slice-image", 450, 450, "static/default.jpg" );
this._slicedImageController.id = "sliceImage";
this._slicedImageController.style.gridArea = "slice";
// Image controller for processed image
this._processedImageController = new ImageController( "processed-image", 400, 400, "static/activeMedia/old/MeanShift.jpg" );
this._processedImageController = new ImageController( "processed-image", 450, 450, "static/default.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";
this._toolBar = document.createElement( "div" );
this._toolBar.style.backgroundColor = "tomato";
this._toolBar.style.gridArea = "toolbar";
console.log( this._imageList )
var select = document.createElement( "select" );
select.name = "image-select";
select.id = "image-select"
select.addEventListener( "change", ( ev ) => this.newImageSelected( ev ) );
// Image selector
this._imageSelector = new ListSelector( this._imageList, "image-select", "Available Images: ", ( ev ) => this.newImageSelected( ev ) );
var option = document.createElement( "option" );
option.value = "Not Selected";
option.text = option.value.charAt( 0 ).toUpperCase() + option.value.slice( 1 );
select.appendChild( option );
// Slice Size Selector
this._sliceSizeSelector = new ListSelector( [], "slice-sizes", "Available Slice Sizes: ", ( ev ) => this.sliceSizeSelected( ev ) );
for ( const image of this._imageList ) {
option = document.createElement( "option" );
option.value = image;
option.text = image.charAt( 0 ).toUpperCase() + image.slice( 1 );
select.appendChild( option );
}
// Slice Selector
this._sliceSelector = new ListSelector( [], "slice-selector", "Available Slices: ", ( ev ) => this.sliceSelected( ev ) );
var label = document.createElement( "label" );
label.innerHTML = "Available Images: "
label.htmlFor = "image-select";
// Processed Selector
this._processedTypeSelector = new ListSelector( [], "processed-selector", "Available Processed: ", ( ev ) => this.processedTypeSelected( ev ) );
// Add Selectors
this._toolBar.appendChild( this._imageSelector );
this._toolBar.appendChild( this._sliceSizeSelector );
this._toolBar.appendChild( this._sliceSelector );
this._toolBar.appendChild( this._processedTypeSelector );
this._imageSelector.show();
this._sliceSizeSelector.show();
this._sliceSelector.show();
this._processedTypeSelector.show();
toolBar.appendChild(label).appendChild(select);
dbViewerCont.appendChild( this._originalImageController );
dbViewerCont.appendChild( this._slicedImageController );
dbViewerCont.appendChild( this._processedImageController );
dbViewerCont.appendChild( toolBar );
dbViewerCont.appendChild( this._toolBar );
dbViewerCont.style.display = "grid";
dbViewerCont.style.gridTemplateRows = "100px 50px 400px 1fr";
dbViewerCont.style.gridTemplateColumns = "400px 1fr 400px 1fr 400px";
dbViewerCont.style.gridTemplateColumns = "450px 1fr 400px 1fr 450px";
dbViewerCont.style.gridTemplateAreas = `"toolbar toolbar toolbar toolbar toolbar "
". . . . . "
"original . slice . processed"
......@@ -129,38 +153,54 @@ class DBViewer extends HTMLElement {
}
}
class DBListElement extends HTMLElement {
constructor( name, id ) {
super();
this._name = name;
class ListSelector extends HTMLElement {
constructor( elementList, id, label, onSelectCallback ) {
super();
this._elementList = elementList;
this._id = id;
this._label = label;
this._onSelectCallback = onSelectCallback;
}
this.innerHTML = `
<button class="db-list-element-cont" id="db-list-${id}">
${ name }
</button>
`
get elementList() { return this._elementList; }
set elementList( newList ) {
this._elementList = newList;
this.updateList();
}
get name() { return this._name; }
set name( name ) { this._name = name; }
show() { this.style.display = "inline-block"; }
hide() { this.style.display = "none"; }
updateList() {
this.innerHTML = "";
var select = document.createElement( "select" );
select.name = this._id;
select.id = this._id;
select.addEventListener( "change", ( ev ) => this._onSelectCallback( ev ) );
updateViewer() {
console.log( "click" )
var viewer = document.getElementsByTagName( "db-viewer" )[0];
viewer.copyImageToStatic( this._name );
var option = document.createElement( "option" );
option.value = "Not Selected";
option.text = option.value//.charAt( 0 ).toUpperCase() + option.value.slice( 1 );
select.appendChild( option );
for ( const image of this._elementList ) {
option = document.createElement( "option" );
option.value = image;
option.text = image.charAt( 0 ).toUpperCase() + image.slice( 1 );
select.appendChild( option );
}
connectedCallback() {
document.getElementById( "db-list-" + this._id ).addEventListener( "click", ev => this.updateViewer( ev ) );
var label = document.createElement( "label" );
label.innerHTML = this._label;
label.htmlFor = this._id;
this.appendChild(label).appendChild(select);
}
disconnectedCallback() {
//this.shadowRoot.querySelector("button1").removeEventListener();
connectedCallback() {
this.updateList();
}
}
window.customElements.define( "db-viewer", DBViewer );
window.customElements.define( "db-list-element", DBListElement );
window.customElements.define( "db-viewer", DBViewer )
window.customElements.define( "list-selector", ListSelector )
\ No newline at end of file
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