interface improvements

Co-authored-by: Alex <AlexanderMcDowell@users.noreply.github.com>

README.md

@@ -6,6 +6,10 @@
 | --- | --- | --- |
 | ![](screenshots/pyro_input.png) | ![](screenshots/pyro_results.png) | ![](screenshots/temp_dist_plot.png) 
 
+| Labeling Input | Labeling Results | 
+| --- | --- |
+| ![](screenshots/projected_area_in.png) | ![](screenshots/projected_area_out.png) |
+
 ## Using the web version 
 
 ### Ratio Pyrometry

size_projection.py

@@ -1,3 +1,7 @@
+# use headless backend
+import matplotlib
+matplotlib.use("Agg")
+
 import base64
 import cv2 as cv
 import numpy as np
@@ -18,7 +22,7 @@ def get_projected_area(image, area_threshold, display_threshold):
 
     img = morphology.area_closing(thresh_gray, area_threshold=area_threshold, connectivity=1)
 
-    contours = measure.find_contours(array=img, level=100)
+    contours = measure.find_contours(image=img, level=100)
 
     fig, ax = plt.subplots()
     ax.imshow(original, cmap=plt.cm.gray, alpha=0.3)

static/app.css

@@ -33,6 +33,14 @@ html {
     flex-direction: column;
 }
 
+#img-preview {
+    width: 18rem;
+}
+
+#pyro-eqn {
+    width: 800px;
+}
+
 .img-table-heading {
     padding: 4px 10px;
 }

static/img_preview.js

@@ -0,0 +1,11 @@
+function setOnchange() {
+    let imgPreview = document.getElementById('img-preview');
+    let imgUpload = document.getElementById('img-upload');
+    imgUpload.onchange = event => {
+        const [file] = imgUpload.files;
+        if (file) {
+            console.log(file)
+            imgPreview.src = URL.createObjectURL(file);
+        }
+    };
+}

templates/index.html

@@ -58,25 +58,17 @@
     <input type="submit" value="Generate Heatmap"/>
 </form>
 
+<!-- <script src="/img_preview.js" onload="setOnChange()"></script> -->
 <script>
-let imgPreview = document.getElementById('img-preview');
+    let imgPreview = document.getElementById('img-preview');
-let imgUpload = document.getElementById('img-upload');
+    let imgUpload = document.getElementById('img-upload');
-imgUpload.onchange = event => {
+    imgUpload.onchange = event => {
-    const [file] = imgUpload.files;
+        const [file] = imgUpload.files;
-    if (file) {
+        if (file) {
-        console.log(file)
+            console.log(file)
-        imgPreview.src = URL.createObjectURL(file);
+            imgPreview.src = URL.createObjectURL(file);
-    }
+        }
-};
+    };
 </script>
 
-<style>
-#img-preview {
-    width: 18rem;
-}
-#pyro-eqn {
-    width: 800px;
-}
-</style>
-
 {% endblock %} 

templates/projected-area.html

@@ -4,6 +4,9 @@
 <form action="/projected_area_results" method="POST" enctype="multipart/form-data">
     <h2>Projected Area Interface</h2>
 
+    <img src="#" id="img-preview" type="file"/>
+    <br>
+
     <input id="img-upload" type="file" name="file" accept=".png,.jpg,.jpeg,.tiff" value="Choose Image"/>
 
     <h4>Settings</h4>
@@ -20,4 +23,17 @@
     <input type="submit" value="Generate Projected Sizes"/>
 </form>
 
+<!-- <script src="/img_preview.js" onload="setOnChange()"></script> -->
+<script>
+    let imgPreview = document.getElementById('img-preview');
+    let imgUpload = document.getElementById('img-upload');
+    imgUpload.onchange = event => {
+        const [file] = imgUpload.files;
+        if (file) {
+            console.log(file)
+            imgPreview.src = URL.createObjectURL(file);
+        }
+    };
+</script>
+
 {% endblock %}

templates/pyrometry-results.html

@@ -5,6 +5,7 @@
     <tr>
         <th class="img-table-heading">Input Image</th>
         <th class="img-table-heading">Output Heatmap</th>
+        <th class="img-table-heading">Legend</th>
     </tr>
     <tr>
         {# Original image #}
@@ -15,11 +16,8 @@
         <td class="img-table-cell" id="res-cell">
             <img class="img-out" src="data:image/png;base64,{{ img_res_b64 }}" alt="result image">
         </td>
-    </tr>
+        {# Legend #}
-    {# Legend #}
+        <td>
-    <tr>
-        <td class="img-table-cell"></td>
-        <td class="img-table-cell">
             <table class="legend" id="legend">
                 <tr>
                     <th class="legend-heading">Color</th>