<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<title>FFT - Current Analyser</title>

	<link href="/css/app.css" rel="stylesheet">
	<script src="/js/all.js"></script>
	<script>
		// server root (or URL) - used for local development with remote AJAX calls
		// (this needs CORS working on the target - which I added to esp-httpd)
		var _root = "";
	</script>
</head>
<body class="page-fft">
<div id="outer">
<nav id="menu">
	<div id="brand" onclick="$('#menu').toggleClass('expanded')">Current Analyser</div>
	<a href="/status">Home</a><a href="/wifi">WiFi config</a><a href="/waveform">Waveform</a><a href="/fft" class="selected">FFT</a><a href="/spectrogram">Spectrogram</a><a href="/about">About</a></nav>
<div id="content">
	<img src="/img/loader.gif" alt="Loading…" id="loader">

<h1>FFT</h1>

<div class="Box center" id="samp-ctrl">
	<div>
		<label for="count">Bins</label>
		<label for="count" class="select-wrap">
			<select name="count" id="count">
				<option value="16">8
				<option value="32">16
				<option value="64">32
				<option value="128">64
				<option value="256">128
				<option value="512">256
				<option value="1024">512
				<option value="2048" selected>1024
			</select>
		</label>
	</div>
	<div>
		<label for="freq">f<sub>bw</sub> <span class="mq-normal-min nb">=</span><span class="mq-tablet-max nb">(Hz)</span></label>
		<input id="freq" type="number" value="2048">
		<span class="mq-normal-min">Hz</span>
	</div>
	<div>
		<a id="load" class="button btn-green">Load</a>
	</div>
</div>

<div class="Box medium chartbox">
	<div id="chart" class="ct-chart ct-wide ct-with-area"></div>
	<div class="stats invis">
		<table>
			<tr>
				<th>Samples</th>
				<td id="stat-count"></td>
			</tr>
			<tr>
				<th>f<sub>s</sub></th>
				<td id="stat-f-s"></td>
			</tr>
			<tr>
				<th>I<sub>peak</sub></th>
				<td id="stat-i-peak"></td>
			</tr>
			<tr>
				<th>I<sub>RMS</sub></th>
				<td id="stat-i-rms"></td>
			</tr>
		</table>
		<div class="ar"><!-- auto reload -->
			<input type="number" id="ar-time" step="100" value="1000" min="0">&nbsp;ms
			<input type="button" id="ar-btn" class="btn-blue narrow" value="Auto">
		</div>
	</div>
</div>

<script>
	$().ready(page_waveform.init('fft'));
</script>


<div class="ErrMsg hidden" id="notif"></div>

</div><!-- content -->
</div><!-- outer -->
</body>
</html>