100 lines
2.8 KiB
HTML
100 lines
2.8 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block head %}
|
|
<script src="/s/js/csv_download.js"></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<div style="display:flex; flex-direction: column;">
|
|
|
|
<h2>General Results</h2>
|
|
|
|
<table class="img-table">
|
|
<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 #}
|
|
<td class="img-table-cell" id="orig-cell">
|
|
<img class="img-out" src="data:image/png;base64,{{ img_orig_b64 }}" alt="original image">
|
|
</td>
|
|
{# Result image #}
|
|
<td class="img-table-cell" id="res-cell">
|
|
<img class="img-out" src="data:image/png;base64,{{ img_res_b64 }}" alt="result image">
|
|
</td>
|
|
{# Legend #}
|
|
<td>
|
|
<table class="legend" id="legend">
|
|
<tr>
|
|
<th class="legend-heading">Color</th>
|
|
<th class="legend-heading">Temperature</th>
|
|
</tr>
|
|
{% for temp, color in legend.items() %}
|
|
<tr>
|
|
<td class="legend-cell"><div style="width:30px;height:20px;background-color:{{ color }};"></div></td>
|
|
<td class="legend-cell">{{ temp }}°C</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
|
|
<h2>Individual Firebrands</h2>
|
|
|
|
<table>
|
|
<tr>
|
|
<th>Output Heatmap</th>
|
|
<th>Legend</th>
|
|
</tr>
|
|
|
|
{% for item in individual_firebrands %}
|
|
<tr>
|
|
{# output heatmap #}
|
|
<td>
|
|
<img class="img-out" src="data:image/png;base64,{{ item['img_data'] }}" alt="result image">
|
|
</td>
|
|
|
|
</td>
|
|
{# legend #}
|
|
<td>
|
|
<h3>Firebrand {{ loop.index }}</h3>
|
|
<table class="legend" id="legend">
|
|
<tr>
|
|
<th class="legend-heading">Color</th>
|
|
<th class="legend-heading">Temperature</th>
|
|
</tr>
|
|
{% for temp, color in item["legend"].items() %}
|
|
<tr>
|
|
<td class="legend-cell"><div style="width:30px;height:20px;background-color:{{ color }};"></div></td>
|
|
<td class="legend-cell">{{ temp }}°C</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
|
|
</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;"
|
|
onclick="saveData(`{{csv_data}}`, 'temperature-data.csv')">Download Data as CSV</button>
|
|
</div>
|
|
{{ freq_plot | safe }}
|
|
|
|
|
|
<!-- Firebrands: {{ individual_firebrands }} -->
|
|
|
|
</div>
|
|
|
|
{% endblock %}
|