interface improvements

Co-authored-by: Alex <AlexanderMcDowell@users.noreply.github.com>
master
michael 2022-10-28 20:49:54 -07:00
parent 97ab6a1ed1
commit 8a364b81e6
10 changed files with 57 additions and 24 deletions

View File

@ -6,6 +6,10 @@
| --- | --- | --- | | --- | --- | --- |
| ![](screenshots/pyro_input.png) | ![](screenshots/pyro_results.png) | ![](screenshots/temp_dist_plot.png) | ![](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 ## Using the web version
### Ratio Pyrometry ### Ratio Pyrometry

Binary file not shown.

After

Width:  |  Height:  |  Size: 436 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 826 KiB

After

Width:  |  Height:  |  Size: 1.3 MiB

View File

@ -1,3 +1,7 @@
# use headless backend
import matplotlib
matplotlib.use("Agg")
import base64 import base64
import cv2 as cv import cv2 as cv
import numpy as np 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) 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() fig, ax = plt.subplots()
ax.imshow(original, cmap=plt.cm.gray, alpha=0.3) ax.imshow(original, cmap=plt.cm.gray, alpha=0.3)

View File

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

11
static/img_preview.js Normal file
View File

@ -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);
}
};
}

View File

@ -58,25 +58,17 @@
<input type="submit" value="Generate Heatmap"/> <input type="submit" value="Generate Heatmap"/>
</form> </form>
<!-- <script src="/img_preview.js" onload="setOnChange()"></script> -->
<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> </script>
<style>
#img-preview {
width: 18rem;
}
#pyro-eqn {
width: 800px;
}
</style>
{% endblock %} {% endblock %}

View File

@ -4,6 +4,9 @@
<form action="/projected_area_results" method="POST" enctype="multipart/form-data"> <form action="/projected_area_results" method="POST" enctype="multipart/form-data">
<h2>Projected Area Interface</h2> <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"/> <input id="img-upload" type="file" name="file" accept=".png,.jpg,.jpeg,.tiff" value="Choose Image"/>
<h4>Settings</h4> <h4>Settings</h4>
@ -20,4 +23,17 @@
<input type="submit" value="Generate Projected Sizes"/> <input type="submit" value="Generate Projected Sizes"/>
</form> </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 %} {% endblock %}

View File

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