interface improvements

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

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 imgUpload = document.getElementById('img-upload');
-imgUpload.onchange = event => {
-    const [file] = imgUpload.files;
-    if (file) {
-        console.log(file)
-        imgPreview.src = URL.createObjectURL(file);
-    }
-};
+    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>
 
-<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 #}
-    <tr>
-        <td class="img-table-cell"></td>
-        <td class="img-table-cell">
+        {# Legend #}
+        <td>
             <table class="legend" id="legend">
                 <tr>
                     <th class="legend-heading">Color</th>