save mask implemented, some formatting also

HDRData.py

+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

@@ -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

@@ -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

@@ -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

+
+
+.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

@@ -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

@@ -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

@@ -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

@@ -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

 {% 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