datadonkey-com
/
firelab-general
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: datadonkey-com:8a364b81e6c6b053791d4492e63e0d406bdfe312
Branches Tags
datadonkey-com:master
...
compare: datadonkey-com:76e178176d804af053bca978467af9bf8e9372aa
Branches Tags
datadonkey-com:master

4 Commits
8a364b81e6 ... 76e178176d

Author SHA1 Message Date
michael 76e178176d save csv + paper dims 
Co-authored-by: Alex <AlexanderMcDowell@users.noreply.github.com>
 2022-11-04 18:42:22 -07:00
michael fa1e988344 use static js 2022-11-04 17:55:25 -07:00
michael dcf78bb88d fix mm^2 issue 2022-11-03 17:36:22 -07:00
michael 481de4dfb1 update content 2022-10-31 21:01:37 -07:00
11 changed files with 100 additions and 42 deletions
Show Stats Expand all files Collapse all files

28
flask_frontend.py
View File

@ -1,11 +1,11 @@
from flask import Flask, render_template, request from flask import Flask, render_template, request, send_file
import numpy as np import numpy as np
from ratio_pyrometry import ratio_pyrometry_pipeline from ratio_pyrometry import ratio_pyrometry_pipeline
from size_projection import get_projected_area from size_projection import get_projected_area
import base64 import base64
import cv2 as cv import cv2 as cv
import plotly.figure_factory as ff import plotly.figure_factory as ff
from scipy import stats import pandas as pd
app = Flask( app = Flask(
__name__, __name__,
@ -58,12 +58,28 @@ def ratio_pyro():
) )
freq_plot = fig.to_html() freq_plot = fig.to_html()
# create csv-formatted stuff
# currently only supports 1 firebrand (grabs first object in plot).
plot_data=fig.to_dict()
x_data = plot_data["data"][0]["x"]
y_data = plot_data["data"][0]["y"]
tdata = [["Temperature", "Frequency"]]
for i in range(len(x_data)):
r = []
r.append(x_data[i])
r.append(y_data[i])
tdata.append(r)
csvstr = pd.DataFrame(tdata).to_csv(index=False, header=False)
return render_template( return render_template(
'pyrometry-results.html', 'pyrometry-results.html',
img_orig_b64=img_orig_b64, img_orig_b64=img_orig_b64,
img_res_b64=img_res_b64, img_res_b64=img_res_b64,
legend=key, legend=key,
freq_plot=freq_plot freq_plot=freq_plot,
csv_data=csvstr
) )
@ -81,6 +97,8 @@ def projected_area_results():
f_bytes, f_bytes,
int(request.form['area_threshold']), int(request.form['area_threshold']),
int(request.form['min_display_threshold']), int(request.form['min_display_threshold']),
float(request.form['paper_width']),
float(request.form['paper_width'])
) )
return render_template( return render_template(
@ -88,3 +106,7 @@ def projected_area_results():
img_b64=img, img_b64=img,
dtable=dtable dtable=dtable
) )
# @app.route("/download_pyrometry_temps")
# def download_pyrometry_temps():
# return send_file()

4
size_projection.py
View File

@ -9,9 +9,9 @@ import matplotlib.pyplot as plt
from skimage import measure, morphology, color, segmentation from skimage import measure, morphology, color, segmentation
import io import io
def get_projected_area(image, area_threshold, display_threshold): def get_projected_area(image, area_threshold, display_threshold, paper_width, paper_height):
total_px = image.size total_px = image.size
total_mm = 60322.46 total_mm = paper_width * paper_height * 25.4
output = [] output = []
original = cv.imdecode(image, cv.IMREAD_UNCHANGED) original = cv.imdecode(image, cv.IMREAD_UNCHANGED)

5
static/app.css
View File

@ -28,6 +28,11 @@ html {
margin-left: 3rem; margin-left: 3rem;
} }
.content {
display: flex;
margin: 0rem 1rem;
}
.form { .form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

11
static/img_preview.js
View File

@ -1,11 +0,0 @@
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);
}
};
}

21
static/js/csv_download.js Normal file
View File

@ -0,0 +1,21 @@
function saveCsv(csvStr) {
// string rep
// var csvStr = "";
// for (let r = 0; r < csvData.length; r++) {
// let row = csvData[r]
// for (let c = 0; c < row.length; c++) {
// let item = row[c]
// csvStr += item;
// if (c < row.length - 1)
// csvStr += ",";
// }
// if (r < csvStr.length - 1)
// csvStr += "\r\n";
// }
// define data blob
var data = new Blob([csvStr]);
// create & click temp link
window.open(URL.createObjectURL(data));
}

9
static/js/img_preview.js Normal file
View File

@ -0,0 +1,9 @@
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);
}
};

4
templates/base.html
View File

@ -2,6 +2,8 @@
<head> <head>
<title>Pyrometry Application</title> <title>Pyrometry Application</title>
<link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}">
{% block head %}
{% endblock %}
</head> </head>
<body> <body>
<div class="navbar"> <div class="navbar">
@ -12,7 +14,9 @@
</div> </div>
</div> </div>
<br> <br>
<div class="content">
{% block content required %} {% block content required %}
{% endblock %} {% endblock %}
</div>
<br><br><br> <br><br><br>
</body> </body>

18
templates/index.html
View File

@ -1,4 +1,8 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block head %}
{% endblock %}
{% block content %} {% block content %}
<form action="/ratio_pyro" method="POST" enctype="multipart/form-data"> <form action="/ratio_pyro" method="POST" enctype="multipart/form-data">
<h2>Ratio Pyrometry Interface</h2> <h2>Ratio Pyrometry Interface</h2>
@ -58,17 +62,7 @@
<input type="submit" value="Generate Heatmap"/> <input type="submit" value="Generate Heatmap"/>
</form> </form>
<!-- <script src="/img_preview.js" onload="setOnChange()"></script> --> <!-- Image Preview -->
<script> <script src="/s/js/img_preview.js"></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 %}

4
templates/projected-area-results.html
View File

@ -11,13 +11,13 @@
<table style="background: #f1f1f1"> <table style="background: #f1f1f1">
<tr> <tr>
<th class="legend-heading">Index</th> <th class="legend-heading">Index</th>
<th class="legend-heading">Area</th> <th class="legend-heading">Area (mm²)</th>
<th class="legend-heading">Copy</th> <th class="legend-heading">Copy</th>
</tr> </tr>
{% for item in dtable %} {% for item in dtable %}
<tr> <tr>
<td class="legend-cell">{{ item.0 }}</td> <td class="legend-cell">{{ item.0 }}</td>
<td class="legend-cell">{{ item.1 }} mm²</td> <td class="legend-cell">{{ item.1 }}</td>
<td> <td>
<button onclick="() => navigator.clipboard.writeText('{{ item.1 }}')">Copy</button> <button onclick="() => navigator.clipboard.writeText('{{ item.1 }}')">Copy</button>
</td> </td>

23
templates/projected-area.html
View File

@ -14,26 +14,25 @@
<label for="area_threshold">Area threshold (to remove dust particles) in px</label> <label for="area_threshold">Area threshold (to remove dust particles) in px</label>
<input type="number" name="area_threshold" value="250"/> <input type="number" name="area_threshold" value="250"/>
<br> <br>
<br>
<label for="min_display_threshold">Minimum display threshold (in px)</label> <label for="min_display_threshold">Minimum display threshold (in px)</label>
<input type="number" name="min_display_threshold" value="300"/> <input type="number" name="min_display_threshold" value="300"/>
<br> <br>
<br>
<label for="min_display_threshold">Page size</label>
<input type="number" name="paper_width" value="8.5"/>
X
<input type="number" name="paper_height" value="11"/> inches
<br>
<br>
<br> <br>
<input type="submit" value="Generate Projected Sizes"/> <input type="submit" value="Generate Projected Sizes"/>
</form> </form>
<!-- <script src="/img_preview.js" onload="setOnChange()"></script> --> <!-- Image Preview -->
<script> <script src="/s/js/img_preview.js"></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 %}

15
templates/pyrometry-results.html
View File

@ -1,6 +1,12 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block head %}
<script src="/s/js/csv_download.js"></script>
{% endblock %}
{% block content %} {% block content %}
<div style="display:flex; flex-direction: column;">
<table class="img-table"> <table class="img-table">
<tr> <tr>
<th class="img-table-heading">Input Image</th> <th class="img-table-heading">Input Image</th>
@ -33,8 +39,17 @@
</td> </td>
</tr> </tr>
</table> </table>
<br>
{# Temperature Frequency Plot #} {# Temperature Frequency Plot #}
<div style="display: flex; flex-direction: row; align-items: center;">
<strong>Temperature Distribution</strong> <strong>Temperature Distribution</strong>
<button
style="width: 10rem; height: 2rem; margin-left: 1rem;"
download="temperature-data.csv" type="text/csv" onclick="saveCsv(`{{csv_data}}`)">Download Data as CSV</button>
</div>
{{ freq_plot | safe }} {{ freq_plot | safe }}
</div>
{% endblock %} {% endblock %}