time_based.html

<script src="3rdparty/jQuery-Knob/1.2.12/js/jquery.knob.js"></script>
<div id="three_column_layout">
	<div class="center_col">
		<div id="thermal_image">
			<iframe src="/grideye/snapshot.html" style="overflow: hidden" seamless="seamless" scrolling="no" style="width: 100%"></iframe>
			<script>
				// There are silly CSS games that can be played
				// This is cleaner and sets sizing properly for inside the iframe
				var iframe = $('#thermal_image iframe');
				iframe.on('load', function() {
					iframe.css({'height':iframe.width()+'px'});
				});
			</script>
		</div>
		<div id="time_details" style="margin: 30px 0; height: 350px; width: 100%; display: table">
			<div style="display: table-row; text-align: center">
				<span id="time_dial" ng-click="time.microwave.adjust_time(30)" value="75" data-fgColor="#42A" data-bgColor="#BAC"></span>
			</div>
			<div id="power_wrapper">
				<canvas id="power_triangle" width="250px" height="60px"></canvas>
				<canvas id="power_marker" draggable="true" width="15px" height="70px"></canvas>
				<div><span>Power</span> <span id="power_pcnt">80</span>% (<span id="power_watts">900</span>W)</div>
			</div>
		</div>
	</div>
	<a ng-click="time.microwave.stop()" id="stop" type="button" class="btn btn-default footer" aria-label="Stop">
		<div class="btn btn-default btn-round" type="button">
			<span class="fa fa-stop" aria-hidden="true"></span>
		</div>
	</a>
</div>

<script>
$('.btn-round').each(function(index, elem) { square_element(elem); });
</script>

<script src="time_dial.js"></script>
<script src="draw_power_triangle.js"></script>