Skip to content

GitLab

Commit 94f0981c authored by josh's avatar josh
Browse files

added brush feature to mask creator

parent 7fb06a54
Hide whitespace changes
Inline Side-by-side
app.py
View file @ 94f0981c
......@@ -16,18 +16,18 @@ import base64
from celery import Celery
def make_celery(app):
def make_celery( app ):
celery = Celery(
app.import_name,
backend=app.config['result_backend'],
broker=app.config['broker_url']
)
celery.conf.update(app.config)
celery.conf.update( app.config )
class ContextTask(celery.Task):
class ContextTask( celery.Task ):
def __call__(self, *args, **kwargs):
with app.app_context():
return self.run(*args, **kwargs)
return self.run( *args, **kwargs )
celery.Task = ContextTask
return celery
......@@ -50,13 +50,18 @@ app.config["STATIC_PATH"] = str( Path.cwd().joinpath( "static" ) )
app.config["broker_url"] = 'redis://localhost:6379'
app.config["result_backend"] = 'redis://localhost:6379'
celery = make_celery(app)
celery = make_celery( app )
'''
Celery Tasks
'''
@celery.task(name="app.importAndProcessImage")
def importAndProcessImage( imagePath ):
imageDB.importAndProcessImage( imagePath )
return "OK"
'''
App Routes
'''
......@@ -141,10 +146,8 @@ def uploadImage():
file.save( os.path.join( str( tmpDir ), filename ) )
# Launch import and process
#imageDB.importAndProcessImage( tmpDir.joinpath( filename ).resolve() )
result = importAndProcessImage.delay( str( tmpDir.joinpath( filename ).resolve() ) )
result.wait() # 65
print( "BACK TO APP" )
return render_template( "imageUpload.html" )
......@@ -160,8 +163,6 @@ def saveMask():
imageDB.saveMask( sliceId, maskImage, maskName=maskName )
return jsonify( "OK" )
......@@ -205,11 +206,5 @@ def getProcessedImages( sliceId ):
if __name__ == "__main__":
#if len( sys.argv ) == 2:
#imageDB = HDRFileDB( sys.argv[1] )
webbrowser.open_new( "http://127.0.0.1:2000/" )
app.run( debug=True, port=2000 )
#else:
# print( "Must Provide Database Location" )
\ No newline at end of file
app.run( debug=True, port=2000 )
\ No newline at end of file
launchApp.sh
View file @ 94f0981c
python app.py ../ImageDatabase
\ No newline at end of file
python app.py
\ No newline at end of file
launchWorker.sh
View file @ 94f0981c
rq worker hdr-tasks
\ No newline at end of file
celery -A app.celery worker -E
\ No newline at end of file
static/js/base.js
View file @ 94f0981c
......@@ -86,28 +86,6 @@ class Controller {
get mouseOver() { return this._mouseOver; }
set mouseOver( over ) { over = this._mouseOver; }
/* PRIVATE METHODS */
_getRelativeMousePos( ev ) {
// SOURCE - https://stackoverflow.com/questions/55677/how-do-i-get-the-coordinates-of-a-mouse-click-on-a-canvas-element/5932203#5932203
var totalOffsetX = 0;
var totalOffsetY = 0;
var canvasX = 0;
var canvasY = 0;
var currentElement = this._canvas;
do {
totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
}
while( currentElement = currentElement.offsetParent )
canvasX = ev.pageX - totalOffsetX;
canvasY = ev.pageY - totalOffsetY;
return { "x": canvasX, "y": canvasY }
}
/* PUBLIC METHODS */
clear() { this._context.clearRect( 0, 0, this._canvas.width, this._canvas.height ); }
......@@ -224,8 +202,43 @@ class Controller {
this.redraw();
}
}
/* PRIVATE METHODS */
_getRelativeMousePos( ev ) {
// SOURCE - https://stackoverflow.com/questions/55677/how-do-i-get-the-coordinates-of-a-mouse-click-on-a-canvas-element/5932203#5932203
var totalOffsetX = 0;
var totalOffsetY = 0;
var canvasX = 0;
var canvasY = 0;
var currentElement = this._canvas;
do {
totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
}
while( currentElement = currentElement.offsetParent )
canvasX = ev.pageX - totalOffsetX;
canvasY = ev.pageY - totalOffsetY;
return { "x": canvasX, "y": canvasY }
}
_mouseXToImageX( xPos ) {
var pixXOffsetFromCorner = xPos - this._imgCornerX;
var percentOfCurrWidth = pixXOffsetFromCorner / this._imgCurrentWidth;
return Math.round( this._imageX * percentOfCurrWidth );
}
_mouseYToImageY( yPos ) {
var pixYOffsetFromCorner = yPos - this._imgCornerY;
var percentOfCurrHeight = pixYOffsetFromCorner / this._imgCurrentHeight;
return Math.round( this._imageY * percentOfCurrHeight );
}
}
/*
* MASK CONTROLLER CLASS
* - Derived from Controller
......@@ -248,6 +261,9 @@ class MaskController extends Controller {
this._erase = false;
this._paintBrush = false;
this._brushSize = 10;
// Init image data
this._imageData = this._context.createImageData( sizeX, sizeY );
for ( var i = 0; i < this._imageData.data.length; i += 4) {
......@@ -288,6 +304,11 @@ class MaskController extends Controller {
set erase( val ) { this._erase = val; }
get erase() { return this._erase; }
set paint( p ) { this._paintBrush = p; }
get paint() { return this._paintBrush; }
set brushSize( val ) { this._brushSize = val; }
get brushSize() { return this._brushSize; }
/* PUBLIC METHODS */
......@@ -342,36 +363,78 @@ class MaskController extends Controller {
this.redraw();
}
mouseMoved( ev ) {
ev.preventDefault();
var mousePos = this._getRelativeMousePos( ev );
this._mousePosX = mousePos["x"];
this._mousePosY = mousePos["y"];
if ( this._clicked ) {
var imageXLoc = this._mouseXToImageX( this._mousePosX );
var imageYLoc = this._mouseYToImageY( this._mousePosY );
if ( this._paintBrush ) {
if ( this._erase )
this.resetData( this._getBrushArea( imageXLoc, imageYLoc ) );
else
this.updateData( this._getBrushArea( imageXLoc, imageYLoc ) );
}
}
}
clicked( ev ) {
ev.preventDefault();
var mousePos = this._getRelativeMousePos( ev );
this._mousePosX = mousePos["x"];
this._mousePosY = mousePos["y"];
var pixXOffsetFromCorner = mousePos["x"] - this._imgCornerX;
var percentOfCurrWidth = pixXOffsetFromCorner / this._imgCurrentWidth;
var imageXLoc = this._imageX * percentOfCurrWidth;
var pixYOffsetFromCorner = mousePos["y"] - this._imgCornerY;
var percentOfCurrHeight = pixYOffsetFromCorner / this._imgCurrentHeight;
var imageYLoc = this._imageY * percentOfCurrHeight;
var imageXLoc = this._mouseXToImageX( this._mousePosX );
var imageYLoc = this._mouseYToImageY( this._mousePosY );
this._clicked = true;
if ( !this._erase ) {
this._clicked = true;
console.log( "FILL" )
$.get( `/get-homogeneous-pixels/${this._sliceId}/${Math.round( imageYLoc )}/${Math.round( imageXLoc )}`,
( data ) => this.updateData( data )
);
if ( this._erase ) {
if ( this._paintBrush )
this.resetData( this._getBrushArea( imageXLoc, imageYLoc ) );
else {
$.get( `/get-homogeneous-pixels/${this._sliceId}/${imageYLoc}/${imageXLoc}`,
( data ) => this.resetData( data )
);
}
}
else {
console.log( "ERASE" )
this._clicked = true;
$.get( `/get-homogeneous-pixels/${this._sliceId}/${Math.round( imageYLoc )}/${Math.round( imageXLoc )}`,
( data ) => this.resetData( data )
);
if ( this._paintBrush )
this.updateData( this._getBrushArea( imageXLoc, imageYLoc ) );
else {
$.get( `/get-homogeneous-pixels/${this._sliceId}/${Math.round( imageYLoc )}/${Math.round( imageXLoc )}`,
( data ) => this.updateData( data )
);
}
}
}
/* PRIVATE METHODS */
_getBrushArea( clickX, clickY ) {
var size = 10;
var xArr = [];
var yArr = [];
var startX = clickX - 5;
var startY = clickY - 5;
for ( var i = 0; i < size; i++ ) {
for ( var j = 0; j < size; j++ ) {
xArr.push( startX + j );
yArr.push( startY + i );
}
}
return {
"x": xArr,
"y": yArr
}
}
}
......@@ -390,13 +453,16 @@ class ImageController extends Controller {
this.resetImage();
}
/* PUBLIC METHODS */
updateImage() {
this._image = document.getElementById( this._imageId );
this.redraw();
}
redraw() {
this._context.clearRect( 0, 0, this._canvas.width, this._canvas.height );
this._context.drawImage( this._image,
......@@ -406,7 +472,6 @@ class ImageController extends Controller {
this._imgCurrentHeight );
}
}
/*
......
static/js/createMask.js
View file @ 94f0981c
......@@ -81,6 +81,17 @@ function toggleFillMode( button ) {
}
}
function toggleBrushMode( button ) {
if ( MASK_CONTROLLER.paint ) {
button.innerHTML = "Brush: CLICK";
MASK_CONTROLLER.paint = false;
}
else {
button.innerHTML = "Brush: PAINT";
MASK_CONTROLLER.paint = true;
}
}
var activeR;
var activeG;
......
templates/createMask.html
View file @ 94f0981c
......@@ -45,6 +45,10 @@
<button id="toggle-fill-button" onclick="toggleFillMode( document.getElementById( 'toggle-fill-button' ) )">Mode: FILL</button>
</div>
<div>
<button id="toggle-brush-button" onclick="toggleBrushMode( document.getElementById( 'toggle-brush-button' ) )">Brush: CLICK</button>
</div>
<div>
<button id="add-class" onclick="addColorClass()">Add Class</button>
</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