<!doctype html>
<html>
<head>
<title>sousvide</title>
<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="screen.css" />
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="main.css" />
<script src="jquery.min.js"></script>
<script src="d3.v3.min.js" charset="utf-8"></script>
<script src="themes.js"></script>
<script src="chart.js"></script>
<script src="timers.js"></script>
<script src="temp.js"></script>
<script src="editor.js"></script>
<script src="sousvide.js"></script>
</head>
<body class="bg-primary">
<div id="mask">
<div id="wait">
<h2>Sorry about this</h2>
Your sous vide is taking a second to give us the deets. Hold
tight.
</div>
</div>
<h1 class="fg-secondary">SV2.1.0</h1>
<div id="floater">
<div id="display">
<div id="temp_container"><span id="temp"></span> °C</div>
<div id="target_container">
<span class="fg-secondary">target</span>
<span id="target"></span> °C
</div>
<div id="error_container">
<span class="fg-secondary">error</span>
<span id="abs_err"></span> °C
</div>
</div>
<div id="buttonbar" class="bg-secondary">
<a id="button_enable" href="#">Enabled</a>
<a id="button_disable" href="#">Disabled</a>
</div>
</div>
<div id="editor_container">
<div id="editor" class="bg-secondary">
<table>
</table>
<form id="param_form" method="POST" action="/params">
<table>
<tr>
<td>target</td>
<td>
<form id="target_form" method="POST" action="/target">
<input type="text"
id="target_input"
name="target"
class="bg-secondary">°C
</form>
</td>
</tr>
<tr><td></td></tr>
<tr>
<td>Prop</td>
<td class="val">
<input type="text" class="bg-secondary" name="p" id="pid_p">
</td>
</tr>
<tr>
<td>Int</td>
<td class="val">
<input type="text" class="bg-secondary" name="i" id="pid_i">
</td>
</tr>
<tr>
<td>Deriv</td>
<td class="val">
<input type="text" class="bg-secondary" name="d" id="pid_d">
<input value="save PID" type="submit" style="display:none">
</td>
</tr>
<!--
<tr>
<td></td>
<td><input value="save PID" type="submit"></td>
</tr>
-->
</table>
</form>
</div>
<!-- this enclosing span is to get around strange behavior in Chrome
where the background of the <a> isn't dealt with correctly. -->
<span class="bg-secondary" style="float:left">
<a href="#" id="editor_expand" class="icon-double-angle-right fg-primary"></a>
</span>
</div>
<div id="loader" class="fg-secondary">°</div>
<section style="display:none;">
<h2>timers</h2>
<table id="timers">
</table>
<form action="/timer" method="POST">
<input type="text" name="name" placeholder="New timer">
<input type="text" name="h" placeholder="HH" class="time">
<input type="text" name="m" placeholder="MM" class="time">
<input type="text" name="s" placeholder="SS" class="time">
<input type="submit" value="save">
</form>
<input type="submit" value="enable timer audio" id="enable_audio">
<audio id="timernoise" src="/finished.ogg" preload="auto" volume="1"></audio>
</section>
<section style="display:none;">
<h2>status</h2>
<table>
<tr>
<td class="label">
Mean error per sample:
<span class="subtext">
Taken over 32-sample sliding window
</span>
</td>
<td class="val">±<span id="acc_err"></span> °C/sample</td>
</tr>
<tr>
<td class="label">
Max overshoot:
<span class="subtext">
Taken over 32-sample sliding window
</span>
</td>
<td class="val"><span id="max_err"></span> °C</td>
</tr>
</table>
</section>
</body>
</html>