firelab-general/templates/index.jinja2

{% extends "base.jinja2" %}
{% block content %} 
<form action="/ratio_pyro" method="POST" enctype="multipart/form-data">
    <h2>Simple Ratio Pyrometry 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>Camera Settings</h4>

    <label for="iso">ISO</label>
    <input type="number" name="iso" value="64"/>
    <br>

    <label for="i_darkcurrent">I_Darkcurrent</label>
    <input type="number" name="i_darkcurrent" value="7.7" step="0.1"/>
    <br>

    <label for="exposure_time">Exposure Time <i>t</i></label>
    <input type="number" name="exposure_time" value="0.5" step="0.1"/>
    <br>
    
    <label for="f_stop">F-stop <i>f</i></label>
    <input type="number" name="f_stop" value="2.4" step=0.1/>
    <br>
    
    <h4>Temperature Settings</h4>

    <label for="min_temp">Min Temp (°C)</label>
    <input type="number" name="min_temp" value="60"/>
    <br>

    <label for="max_temp">Max Temp (°C)</label>
    <input type="number" name="max_temp" value="1200"/>
    <br>

    <h4>Output Settings</h4>

    <label for="smoothing_radius">Smoothing Radius (px)</label>
    <input type="number" name="smoothing_radius" value="2"/>
    <br>

    <label for="legend_entries">Legend Entries</label>
    <input type="number" name="legend_entries" value="20"/>
    <br>

    <br>
    <input type="submit" value="Generate Heatmap"/>
</form>

<script>
let imgPreview = document.getElementById('img-preview');
let imgUpload = document.getElementById('img-upload');
imgUpload.onchange = event => {
    console.log("hi")
    const [file] = imgUpload.files;
    if (file) {
        console.log(file)
        imgPreview.src = URL.createObjectURL(file);
    }
};
</script>

<style>
#img-preview {
    width: 18rem;
}
</style>

{% endblock %}