Commit fa6ca750 authored by josh's avatar josh
Browse files

save mask implemented, some formatting also

parent 547ef415
import os
import numpy as np
from PIL import Image
from PIL import Image
from abc import ABC
from pathlib import Path
'''
HDR App database interface
'''
......@@ -81,9 +84,6 @@ class HDRDatabaseInterface( ABC ):
def getProcessedSlices( self, id: str, size: int ) -> dict:
raise NotImplementedError( "getProcessedSlices: Method Not Implemented" )
class HDRFileDB( HDRDatabaseInterface ):
......@@ -194,6 +194,23 @@ class HDRFileDB( HDRDatabaseInterface ):
return np.load( msLabelsPath )
def saveMask( self, sliceId: str, maskImage: Image.Image, maskName: str="Mask" ):
print( type( maskImage ) )
maskName = maskName.replace( "-", "_" )
baseDir = self._idToBasePath( sliceId )
sliceDir = [ p for p in baseDir.rglob( sliceId ) ][0]
processedDir = sliceDir.joinpath( self.PROCESSED_FOLDER )
newMaskDir = processedDir.joinpath( "{}-{}-Processed".format( sliceId, maskName ) )
newMaskPath = newMaskDir.joinpath( "{}.{}".format( newMaskDir.name, self._idImageExt( sliceId ) ) )
print( "=====================")
print( sliceId )
print( newMaskPath )
os.mkdir( newMaskDir )
maskImage.save( newMaskPath )
'''
PRIVATE METHODS
'''
......@@ -223,24 +240,21 @@ class HDRFileDB( HDRDatabaseInterface ):
idParts = self._idParts( imageId )
if len( idParts ) > 3:
return idParts[self.SL_SIZE]
else:
return ""
return ""
def _idXPix( self, imageId: str ) -> str:
idParts = self._idParts( imageId )
if len( idParts ) > 3:
return idParts[self.X_PIX]
else:
return ""
return ""
def _idYPix( self, imageId: str ) -> str:
idParts = self._idParts( imageId )
if len( idParts ) > 3:
return idParts[self.Y_PIX]
else:
return ""
return ""
def _idToBasePath( self, imageId: str ) -> Path:
......
......@@ -115,12 +115,15 @@ def uploadImage():
def saveMask():
imageId = request.values["imageId"]
sliceId = request.values["sliceId"]
sliceSize = request.values["sliceSize"]
maskName = request.values["maskName"]
maskBase64 = request.values["maskBase64"].split(',')[1]
im = Image.open( io.BytesIO( base64.b64decode( maskBase64 ) ) )
im = im.convert( "RGB" )
im.save( "test.jpg" )
maskImage = Image.open( io.BytesIO( base64.b64decode( maskBase64 ) ) )
maskImage = maskImage.convert( "RGB" )
imageDB.saveMask( sliceId, maskImage, maskName=maskName )
return jsonify( "OK" )
......
......@@ -15,21 +15,82 @@
.slice-image-container {
grid-area: slice-image;
background-color: aquamarine;
background-color: black;
border: solid;
overflow: hidden;
}
.processed-image-container {
grid-area: working-image;
background-color: brown;
background-color: black;
border: solid;
overflow: hidden;
}
.mask-toolbar-container {
grid-area: mask-toolbar;
background-color: burlywood;
background-color: #747474;
display: block;
padding-left: 10%;
padding-right: 10%;
border-radius: 5px;
}
.mask-toolbar-container div button {
width: 100%;
height: 100%;
background-color: white;
border-radius: 5px;
border: none;
text-decoration: none;
font-size: small;
}
.mask-toolbar-container div button:hover {
cursor: pointer;
}
#html5colorpicker {
width: 100% !important;
height: 100%;
}
.mask-toolbar-container div {
width: 100%;
height: 30px;
margin-top: 8%;
margin-bottom: 8%;
}
/* TOOLBAR */
.reference-image-selection {
width: 100%;
}
.mask-toolbar-container a {
color: black;
position: relative;
text-decoration: none;
font-size: small;
}
.mask-toolbar-container #cancel-mask-containter {
width: 100%;
height: 100%;
background-color: white;
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 5px;
}
.mask-toolbar-container #cancel-mask-containter:hover {
cursor: pointer;
}
\ No newline at end of file
......@@ -4,7 +4,7 @@
display: grid;
grid-template-columns: 1fr 95% 1fr;
grid-template-rows: 1fr 5% 1fr 45% 1fr 45% 1fr;
grid-template-rows: 1fr auto 1fr 45% 1fr 45% 1fr;
grid-template-areas:
". . ."
......@@ -35,6 +35,40 @@
.slice-menu-container {
grid-area: slice-menu;
background-color: #747474;
display: flex;
justify-content: space-around;
align-items: center;
padding: 2% 1%;
border-radius: 5px;
}
.slice-menu-container select {
width: 30%;
height: 30px;
}
.slice-menu-container a {
color: black;
position: relative;
text-decoration: none;
}
.slice-menu-container #mask-create-containter {
width: 30%;
height: 30px;
background-color: white;
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 5px;
}
.slice-menu-container #mask-create-containter:hover {
cursor: pointer;
}
.slice-image-container {
......
.upload-file-container {
width: 30%;
height: 30%;
margin-top: 5%;
background-color: #747474;
display: grid;
grid-template-columns: 1fr 80% 1fr;
grid-template-rows: 1fr 30% 1fr 30% 1fr;
grid-template-areas:
". . ."
". header ."
". form ."
". . .";
border-radius: 5px;
}
.upload-header-container {
grid-area: header;
}
.upload-header-container h1 {
color: white
}
.upload-form-container {
grid-area: form;
}
......@@ -243,8 +243,7 @@ class MaskController extends Controller {
// Init image data
this._imageData = this._context.createImageData( sizeX, sizeY );
var i;
for (i = 0; i < this._imageData.data.length; i += 4) {
for ( var i = 0; i < this._imageData.data.length; i += 4) {
this._imageData.data[i+0] = 0;
this._imageData.data[i+1] = 0;
this._imageData.data[i+2] = 0;
......
......@@ -35,17 +35,20 @@ function processedSelectChange( sliceId ) {
function saveMask( mainImageId, sliceId, selectedSize ) {
$.post( "/save-mask",
{
"imageId": mainImageId,
"sliceId": sliceId,
"sliceSize": selectedSize,
"maskBase64": MASK_CONTROLLER.dataUrl
},
function( data, status ) {
alert( `Mask Save Status: ${status}` );
window.location.href = `/image-slice-content/${mainImageId}/${selectedSize}`;
});
var saveName = prompt( "Give Mask a Name:", "" );
if ( saveName != null && saveName != "" ) {
$.post( "/save-mask",
{
"imageId": mainImageId,
"sliceId": sliceId,
"maskName": saveName,
"maskBase64": MASK_CONTROLLER.dataUrl
},
function( data, status ) {
alert( `Mask Save Status: ${status}` );
window.location.href = `/image-slice-content/${mainImageId}/${selectedSize}`;
});
}
}
......
......@@ -24,18 +24,26 @@
</div>
<div class="mask-toolbar-container">
<select name="reference-images" id="reference-image-selection" class="reference-image-selection" onchange="processedSelectChange( '{{sliceId}}' )">
<option value="">-- Select Slice --</option>
{% for imgInfo in refImages %}
<option value="{{imgInfo.id}}">{{imgInfo.name}}</option>
{% endfor %}
</select>
<a href="/image-slice-content/{{ imageId }}/{{ size }}">Cancel Mask</a>
<button id="save-mask-button" onclick="saveMask( '{{imageId}}', '{{sliceId}}', '{{size}}' )">Save Mask</button>
<input type="color" id="html5colorpicker" value="#ff0000" style="width:85%;">
<div>
<select name="reference-images" id="reference-image-selection" class="reference-image-selection" onchange="processedSelectChange( '{{sliceId}}' )">
<option value="">-- Select Slice --</option>
{% for imgInfo in refImages %}
<option value="{{imgInfo.id}}">{{imgInfo.name}}</option>
{% endfor %}
</select>
</div>
<div>
<div id="cancel-mask-containter"><a href="/image-slice-content/{{ imageId }}/{{ size }}">Cancel Mask</a></div>
</div>
<div>
<button id="save-mask-button" onclick="saveMask( '{{imageId}}', '{{sliceId}}', '{{size}}' )">Save Mask</button>
</div>
<div>
<input type="color" id="html5colorpicker" value="#ff0000" style="width:85%;">
</div>
</div>
......
......@@ -23,7 +23,7 @@
<option value="">-- Select Processed Image --</option>
</select>
<a href="" id="mask-create-link">Create Mask</a>
<div id="mask-create-containter"><a href="" id="mask-create-link">Create Mask</a></div>
</div>
......
{% extends "base.html" %}
{% block head %}
<link rel="stylesheet" href="{{ url_for( 'static', filename='css/imageUpload.css' ) }}">
{% endblock %}
{% block body %}
<h1>Upload new File</h1>
<form method=post enctype=multipart/form-data>
<input type=file name=file>
<input type=submit value=Upload>
</form>
<div class="upload-file-container">
<div class="upload-header-container">
<h1>Upload new File</h1>
</div>
<div class="upload-form-container">
<form method=post enctype=multipart/form-data>
<input type=file name=file>
<input type=submit value=Upload>
</form>
</div>
</div>
{% endblock %}
\ No newline at end of file
test.jpg

14.7 KB

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