Commit ab28f438 authored by Josh's avatar Josh
Browse files

adding db viwer

parent 32d151dd
......@@ -4,12 +4,23 @@ from threading import Timer
import webbrowser
import pathlib
import os
import sys
from werkzeug.utils import secure_filename
'''
GLOBAL VARIABLES
'''
UPLOAD_FOLDER = "/home/josh/Desktop/working_dir"
ALLOWED_EXTENSIONS = {'txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'}
DB_LOC = None
OR_LOC = None
MS_LOC = None
SL_LOC = None
'''
APP CONFIG
'''
app = Flask( __name__ )
CORS( app )
app.config["UPLOAD_FOLDER"] = UPLOAD_FOLDER
......@@ -18,6 +29,9 @@ app.config["UPLOAD_FOLDER"] = UPLOAD_FOLDER
def index():
return render_template( "index.html" )
'''
UPLOAD FOLDER
'''
# SOURCE - https://flask.palletsprojects.com/en/1.1.x/patterns/fileuploads/
def allowed_file(filename):
return '.' in filename and \
......@@ -41,10 +55,35 @@ def upload_file():
file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
return jsonify("Ok")
'''
DATABASE FUNCTIONALITY
'''
@app.route("/image-list", methods=["GET", "POST"])
def getDBImageList():
if request.method == "GET":
imageList = [ str( f ) for f in OR_LOC.iterdir() ]
return { "data": imageList }
def open_browser():
webbrowser.open_new('http://127.0.0.1:2000/')
webbrowser.open_new( "http://127.0.0.1:2000/" )
if __name__ == "__main__":
Timer( 1, open_browser ).start()
app.run( port=2000 )
if len( sys.argv ) == 2:
DB_LOC = pathlib.Path( sys.argv[1] ).absolute()
OR_LOC = DB_LOC.joinpath( "Original" )
MS_LOC = DB_LOC.joinpath( "MeanShift" )
SL_LOC = DB_LOC.joinpath( "Sliced" )
print( DB_LOC )
'''
Run app
'''
Timer( 1, open_browser ).start()
app.run( debug=True, port=2000 )
else:
print( "Provide database location" )
\ No newline at end of file
/*
* DATABASE VIEWER FUNCTIONALITY
*/
function showDBViewer( data=false )
{
imageList = data["data"];
console.log( imageList );
$('#main-content').empty();
}
/*
* MASK CREATOR COMPONENTS
* BACKEND INTERFACE
*/
function uploadImage()
// Defualt error callback
function defaultError( err )
{
console.log( err );
}
// Default success callback
function defaultSuccess( data )
{
console.log( data );
}
// GET Request to backend
function appGET( url, successCallback=defaultSuccess, errorCallback=defaultError, data=false )
{
var formDataRaw = $('#FileForm')[0];
var form_data = new FormData(formDataRaw);
console.log(form_data)
$.ajax({
type: 'POST',
url: '/demo-upload',
data: form_data,
type: "GET",
url: url,
data: data,
contentType: false,
cache: false,
processData: false,
async: false,
success: function (data) {
console.log('Success!');
$("#status").show();
success: function( data ) {
successCallback( data );
},
error: function( err ) {
errorCallback( err );
}
});
}
/*
* Clear side bar and place mask creator tool bar
*/
function loadMaskCreator() {
var content = document.getElementsByClassName( "content" )[0];
var sideBar = document.getElementsByClassName( "sideBar" )[0];
/* Create new toolbar and creator components */
var toolbar = new MaskCreatorToolBar();
var creator = new MaskCreator();
/* Clear sidebar and content, add above components */
sideBar.innerHTML = "";
content.innerHTML = "";
sideBar.appendChild( toolbar );
content.appendChild( creator );
}
/* Mask Toolbar template */
const MaskToolTemplate = document.createElement( "template" );
MaskToolTemplate.innerHTML = `
<style>
.mask-toolbar-container {
width: 100px;
height: 100%;
background-color: yellow;
display: flex;
flex-flow: column nowrap;
}
.mask-toolbar-button {
width: 100%;
height: 50px;
background-color: green;
color: black;
border: 0px;
}
</style>
<div class="mask-toolbar-container">
<button id="button1" class="mask-toolbar-button">Button 1</button>
<button id="button2" class="mask-toolbar-button">Button 2</button>
</div>
`;
/*
* Mask Creator Tool bar Class
* FRONTEND INTERFACE
*/
class MaskCreatorToolBar extends HTMLElement {
constructor() {
super();
/* Tool Settings */
this._data = "data";
this.attachShadow( { mode: "open" } );
this.shadowRoot.appendChild( MaskToolTemplate.content.cloneNode( true ) );
/*this.shadowRoot.querySelector( "h3" ).innerText = this.getAttribute( "name" );*/
}
get data() { return this._data; }
set data( data ) { this._data = data; }
button1() {
console.log( "button 1 pressed" );
}
button2() {
console.log( "button 2 pressed" );
}
connectedCallback() {
this.shadowRoot.getElementById("button1").addEventListener( "click", () => this.button1() );
this.shadowRoot.getElementById("button2").addEventListener( "click", () => this.button2() );
}
disconnectedCallback() {
this.shadowRoot.querySelector("button1").removeEventListener();
this.shadowRoot.querySelector("button2").removeEventListener();
}
}
const MaskCreatorTemplate = document.createElement( "template" );
MaskCreatorTemplate.innerHTML = `
<style>
.mask-creator-container {
width: 512px;
height: 512px;
padding: 30px;
background-color: yellow;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
#load-image-button {
width: 150px;
height: 50px;
}
canvas {
width: 512px;
height: 512px;
}
</style>
<span>upload image to process.</span><br/>
<form id="FileForm" name="file" enctype="multipart/form-data">
<input type="file" name="file" id="File" />
<input type="button" name="submit" value="submit" onclick="uploadImage()" />
</form>
<p id="status" hidden>Success!</p>
`;
/* https://pythonise.com/series/learning-flask/flask-uploading-files */
class MaskCreator extends HTMLElement {
constructor() {
super();
//this.attachShadow( { mode: "open" } );
//this.shadowRoot.appendChild( MaskCreatorTemplate.content.cloneNode( true ) );
this.appendChild( MaskCreatorTemplate.content.cloneNode( true ) );
}
loadImage() {
var ctx = this.shadowRoot.getElementById( "main-canvas" ).getContext( "2d" );
var img = document.getElementById( "img-test" );
ctx.drawImage( img, 0, 0, 512, 512 );
}
}
window.customElements.define( "mask-creator-toolbar", MaskCreatorToolBar );
window.customElements.define( "mask-creator", MaskCreator );
// Load a list of images in database
function loadImageList( callback )
{
appGET( "/image-list", successCallback=callback );
}
\ No newline at end of file
/*
* MASK CREATOR COMPONENTS
*/
function uploadImage()
{
var formDataRaw = $('#FileForm')[0];
var form_data = new FormData(formDataRaw);
console.log(form_data)
$.ajax({
type: 'POST',
url: '/demo-upload',
data: form_data,
contentType: false,
cache: false,
processData: false,
async: true,
success: function (data) {
console.log('Success!');
$("#status").show();
},
});
}
/*
* Clear side bar and place mask creator tool bar
*/
function loadMaskCreator() {
var content = document.getElementsByClassName( "content" )[0];
var sideBar = document.getElementsByClassName( "sideBar" )[0];
/* Create new toolbar and creator components */
var toolbar = new MaskCreatorToolBar();
var creator = new MaskCreator();
/* Clear sidebar and content, add above components */
sideBar.innerHTML = "";
content.innerHTML = "";
sideBar.appendChild( toolbar );
content.appendChild( creator );
}
/* Mask Toolbar template */
const MaskToolTemplate = document.createElement( "template" );
MaskToolTemplate.innerHTML = `
<style>
.mask-toolbar-container {
width: 100px;
height: 100%;
background-color: yellow;
display: flex;
flex-flow: column nowrap;
}
.mask-toolbar-button {
width: 100%;
height: 50px;
background-color: green;
color: black;
border: 0px;
}
</style>
<div class="mask-toolbar-container">
<button id="button1" class="mask-toolbar-button">Button 1</button>
<button id="button2" class="mask-toolbar-button">Button 2</button>
</div>
`;
/*
* Mask Creator Tool bar Class
*/
class MaskCreatorToolBar extends HTMLElement {
constructor() {
super();
/* Tool Settings */
this._data = "data";
this.attachShadow( { mode: "open" } );
this.shadowRoot.appendChild( MaskToolTemplate.content.cloneNode( true ) );
/*this.shadowRoot.querySelector( "h3" ).innerText = this.getAttribute( "name" );*/
}
get data() { return this._data; }
set data( data ) { this._data = data; }
button1() {
console.log( "button 1 pressed" );
}
button2() {
console.log( "button 2 pressed" );
}
connectedCallback() {
this.shadowRoot.getElementById("button1").addEventListener( "click", () => this.button1() );
this.shadowRoot.getElementById("button2").addEventListener( "click", () => this.button2() );
}
disconnectedCallback() {
this.shadowRoot.querySelector("button1").removeEventListener();
this.shadowRoot.querySelector("button2").removeEventListener();
}
}
const MaskCreatorTemplate = document.createElement( "template" );
MaskCreatorTemplate.innerHTML = `
<style>
.mask-creator-container {
width: 512px;
height: 512px;
padding: 30px;
background-color: yellow;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
#load-image-button {
width: 150px;
height: 50px;
}
canvas {
width: 512px;
height: 512px;
}
</style>
<span>upload image to process.</span><br/>
<form id="FileForm" name="file" enctype="multipart/form-data">
<input type="file" name="file" id="File" />
<input type="button" name="submit" value="submit" onclick="uploadImage()" />
</form>
<p id="status" hidden>Success!</p>
`;
/* https://pythonise.com/series/learning-flask/flask-uploading-files */
class MaskCreator extends HTMLElement {
constructor() {
super();
//this.attachShadow( { mode: "open" } );
//this.shadowRoot.appendChild( MaskCreatorTemplate.content.cloneNode( true ) );
this.appendChild( MaskCreatorTemplate.content.cloneNode( true ) );
}
loadImage() {
var ctx = this.shadowRoot.getElementById( "main-canvas" ).getContext( "2d" );
var img = document.getElementById( "img-test" );
ctx.drawImage( img, 0, 0, 512, 512 );
}
}
window.customElements.define( "mask-creator-toolbar", MaskCreatorToolBar );
window.customElements.define( "mask-creator", MaskCreator );
......@@ -15,7 +15,7 @@
<!--jquery-->
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="static/index.js"></script>
<script src="static/dbViewer.js"></script>
<div class="mainGrid">
<div class="header">
......@@ -23,11 +23,15 @@
<div id="siteName">AI 4 HDR</div>
</div>
</div>
<div class="content">
<div id="main-content" class="content">
<div class="jobPrompt">
<!--
<button class="button jobPromptButton">Process Image</button>
<button class="button jobPromptButton" onclick="loadMaskCreator()">Create Mask</button>
<button class="button jobPromptButton">Create Model</button>
-->
<button class="button jobPromptButton" onclick="loadImageList( showDBViewer )">View Database</button>
<button class="button jobPromptButton">Import Image</button>
</div>
</div>
<div class="sideBar"></div>
......
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