git.haldean.org sousvide / master static / index.html
master

Tree @master (Download .tar.gz)

index.html @masterraw · history · blame

<!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> &deg;C</div>
				<div id="target_container">
					<span class="fg-secondary">target</span>
					<span id="target"></span> &deg;C
				</div>
				<div id="error_container">
					<span class="fg-secondary">error</span>
					<span id="abs_err"></span> &deg;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">&deg;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">&deg;</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">&plusmn;<span id="acc_err"></span> &deg;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> &deg;C</td>
				</tr>
			</table>
		</section>
	</body>
</html>