templates/psf.html

<html>
    <head>
		{{ JSGlue.include() }}
	    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	    <script src={{ url_for('static', filename='js/main.js') }}></script>	
		<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
		<link rel="stylesheet" href="{{ url_for('static', filename='css/psf_style.css') }}">
		<meta name="viewport" content="width=device-width, initial-scale=1">
        <title>PSF Calculation</title>
    </head>
    <body>
		<div id=layout>
			<div id=main>
				<div class=content>
			        <div class="pure-g">
			            <div class="pure-u-1-3 l-box">
				            <h3>PSF calculation</h3>
			                <form role="form" method="post" action="{{ url_for('get_psf') }}" class="pure-form pure-form-aligned" onsubmit="return false;">
								<fieldset>
									{{ form.hidden_tag() }}
							        <div class="pure-control-group">
										{{ form.model.label }}
							            {{ form.model }}</br>
							        </div>
							        <div class="pure-control-group">
										{{ form.microscope.label }}
							            {{ form.microscope }}</br>
							        </div>
							        <div class="pure-control-group">
										{{ form.ex_wavelen.label }}
							            {{ form.ex_wavelen }}</br>
							        </div>
							        <div class="pure-control-group">
										{{ form.em_wavelen.label }}
							            {{ form.em_wavelen }}</br>
							        </div>
							        <div class="pure-control-group">
										{{ form.num_aperture.label }}
							            {{ form.num_aperture }}</br>
							        </div>
							        <div class="pure-control-group">
										{{ form.refr_index.label }}
							            {{ form.refr_index }}</br>
							        </div>
				                  	<button type="submit" class="pure-button pure-button-primary">Calculate</button>
						  		</fieldset>
			                </form>
						</div>
						<div class="pure-u-1-3 l-box" style="display: none;" id="psf">
								<h3><span id="scope"></span></h3>
								<h3>PSF FWHM</h3>
								<h3>z: <span id="sigmaz"></span> um</h3>
								<h3>r: <span id="sigmar"></span> um</h3>
								<img class="pure-img" src="" style="width:256px;height:256px" id="psfimg">
						</div>
						<div class ="pure-u-1-3 l-box" style="display: none;" id="nyquist">	
							<h3>Pixel size for nyquist sampling</h3>
							<h3>x,y: <span id="nyquistxy"></span> nm</h3>
							<h3>z: <span id="nyquistz"></span> nm</h3>	
						</div>
			        </div>
				</div>
			</div>
		</div>
    </body>
</html>