Skip to content

GitLab

Commit fa6ca750 authored by josh's avatar josh
Browse files

save mask implemented, some formatting also

parent 547ef415
Hide whitespace changes
Inline Side-by-side
HDRData.py
View file @ fa6ca750
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:
......
app.py
View file @ fa6ca750
......@@ -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" )
......
static/css/createMask.css
View file @ fa6ca750
......@@ -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
static/css/imageSliceContent.css
View file @ fa6ca750
......@@ -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 {
......
static/css/imageUpload.css 0 → 100644
View file @ fa6ca750
.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;
}
static/js/base.js
View file @ fa6ca750
......@@ -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;
......
static/js/createMask.js
View file @ fa6ca750
......@@ -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}`;
});
}
}
......
templates/createMask.html
View file @ fa6ca750
......@@ -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>
......
templates/imageSliceContent.html
View file @ fa6ca750
......@@ -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>
......
templates/imageUpload.html
View file @ fa6ca750
{% 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 0 → 100644
View file @ fa6ca750
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