Compare commits

...

4 Commits

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

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
from ratio_pyrometry import ratio_pyrometry_pipeline
from size_projection import get_projected_area
import base64
import cv2 as cv
import plotly.figure_factory as ff
from scipy import stats
import pandas as pd
app = Flask(
__name__,
@ -58,12 +58,28 @@ def ratio_pyro():
)
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(
'pyrometry-results.html',
img_orig_b64=img_orig_b64,
img_res_b64=img_res_b64,
legend=key,
freq_plot=freq_plot
freq_plot=freq_plot,
csv_data=csvstr
)
@ -81,6 +97,8 @@ def projected_area_results():
f_bytes,
int(request.form['area_threshold']),
int(request.form['min_display_threshold']),
float(request.form['paper_width']),
float(request.form['paper_width'])
)
return render_template(
@ -88,3 +106,7 @@ def projected_area_results():
img_b64=img,
dtable=dtable
)
# @app.route("/download_pyrometry_temps")
# def download_pyrometry_temps():
# return send_file()

View File

@ -9,9 +9,9 @@ import matplotlib.pyplot as plt
from skimage import measure, morphology, color, segmentation
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_mm = 60322.46
total_mm = paper_width * paper_height * 25.4
output = []
original = cv.imdecode(image, cv.IMREAD_UNCHANGED)

View File

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

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

View File

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

View File

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

View File

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

View File

@ -14,26 +14,25 @@
<label for="area_threshold">Area threshold (to remove dust particles) in px</label>
<input type="number" name="area_threshold" value="250"/>
<br>
<br>
<label for="min_display_threshold">Minimum display threshold (in px)</label>
<input type="number" name="min_display_threshold" value="300"/>
<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>
<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>
<!-- Image Preview -->
<script src="/s/js/img_preview.js"></script>
{% endblock %}

View File

@ -1,6 +1,12 @@
{% extends "base.html" %}
{% block head %}
<script src="/s/js/csv_download.js"></script>
{% endblock %}
{% block content %}
<div style="display:flex; flex-direction: column;">
<table class="img-table">
<tr>
<th class="img-table-heading">Input Image</th>
@ -33,8 +39,17 @@
</td>
</tr>
</table>
<br>
{# Temperature Frequency Plot #}
<div style="display: flex; flex-direction: row; align-items: center;">
<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 }}
</div>
{% endblock %}