git.haldean.org sousvide / 0026d37 static / index.html
0026d37

Tree @0026d37 (Download .tar.gz)

index.html @0026d37raw · history · blame

<!doctype html>
<html>
	<head>
		<title>sousvide</title>
		<style>
			body {
				font-family: 'Source Sans Pro', sans-serif;
				margin: 50px 50px;
				max-width: 600px;
				font-size: 14pt;
			}

			section {
				border-left: 7pt solid #EEE;
				padding-left: 10pt;
			}

			.val {
				font-weight: bold;
				text-align: right;
				font-family: 'Source Code Pro', monospace;
				font-size: 18pt;
			}

			table {
				width: 100%;
			}

			#plot {
				margin-top: 14pt;
				width: 100%;
			}

			.label {
				border-left: 14pt solid #FFF;
				padding-left: 14pt;
			}
			.temp_label { border-color: #F00; }
			.target_label { border-color: #00F; }
			.error_label { border-color: #666; }
			.hot { color: #F00; }

			#target_change {
				display: none;
			}

			#target_input, .pid_param {
				font-size: 18pt;
				font-family: 'Source Code Pro', monospace;
				width: 100pt;
				text-align: right;
			}

			.subtext {
				display: block;
				font-size: 9pt;
				margin-top: -2pt;
				color: #CCC;
			}
		</style>
		<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Source+Code+Pro' rel='stylesheet' type='text/css'>

		<script src="http://cdn.enderjs.com/ender.min.js"></script>
		<script src="sousvide.js"></script>
	</head>
	<body>
		<h1>sousvide control</h1>
		<section>
			<h2>status</h2>
			<table>
				<tr>
					<td class="label heater_label">Heater is:</td>
					<td class="val"><span id="heating"></span></td>
				</tr>
				<tr>
					<td class="label temp_label">Current temperature:</td>
					<td class="val"><span id="temp"></span> &deg;C</td>
				</tr>
				<tr>
					<td class="label target_label">Target temperature:</td>
					<td class="val">
						<span id="target_display">
							<span id="target"></span> &deg;C
						</span>
						<span id="target_change">
							<form method="POST" action="/target">
								<input type="text" id="target_input" name="target">
								<input type="submit" style="display:none;">
							</form>
						</span>
					</td>
				</tr>
				<tr>
					<td class="label error_label">Error:</td>
					<td class="val" id="err_td"><span id="abs_err"></span> &deg;C</td>
				</tr>
				<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>
			</table>
			<img src="/plot" id="plot">
		</section>
		<section>
			<h2>controller</h2>
			<form method="POST" action="/pid">
				<table>
					<tr>
						<td>Proportional</td>
						<td class="val">
							<input type="text" class="pid_param" name="p" id="pid_p">
						</td>
					</tr>
					<tr>
						<td>Integral</td>
						<td class="val">
							<input type="text" class="pid_param" name="i" id="pid_i">
						</td>
					</tr>
					<tr>
						<td>Derivative</td>
						<td class="val">
							<input type="text" class="pid_param" name="d" id="pid_d">
						</td>
					</tr>
					<tr>
						<td></td>
						<td class="val">
							<input value="update" type="submit">
						</td>
					</tr>
				</table>
			</form>
		</section>
	</body>
</html>