Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
SULI 2021
AI4HDR_GUI
Commits
94f0981c
Commit
94f0981c
authored
Jan 29, 2021
by
josh
Browse files
added brush feature to mask creator
parent
7fb06a54
Changes
9
Hide whitespace changes
Inline
Side-by-side
Temp/0-GeoEye_Original/GeoEye_Original.jpg
0 → 100644
View file @
94f0981c
735 KB
Temp/1-GeoEye_Original/GeoEye_Original.jpg
0 → 100644
View file @
94f0981c
735 KB
__pycache__/app.cpython-36.pyc
View file @
94f0981c
No preview for this file type
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>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment