<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link href="/images/favicon.ico" rel="icon" type="image/x-icon">
<link rel=StyleSheet href="css/styles.css" type="text/css">
<title>Kämpferstrahl Brew Monitor</title>
<script type="application/javascript" src="./js/gauge.js"></script>
<script type="application/javascript" src="./js/light.js"></script>
<script type="application/javascript">
// global variables to hold data from Ajax requests
var steamPress = 0;
var steamTemp = 0;
var mashTemp = 0;
var spargeTemp = 0;
var boilTemp = 0;
var mashVol = 0;
var boilVol = 0;
var lightTest = false;
var steamElement = 0;
// Ajax request for xml data generated by Arduino
function ajaxUpdateValues() {
var httpRequest;
var xmlDoc;
// get the xml document via Ajax/http
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange=function() {
if(httpRequest.readyState == 4) {
steamPress = Number(httpRequest.responseText);
}
}
httpRequest.open("GET","./xml/brewhut.xml",false);
httpRequest.send(null);
xmlDoc=httpRequest.responseXML;
// update the global variables by parsing the xml document
steamPress=Number(xmlDoc.getElementsByTagName("steamPress")[0].childNodes[0].nodeValue);
steamTemp=Number(xmlDoc.getElementsByTagName("steamTemp")[0].childNodes[0].nodeValue);
spargeTemp=Number(xmlDoc.getElementsByTagName("spargeTemp")[0].childNodes[0].nodeValue);
mashTemp=Number(xmlDoc.getElementsByTagName("mashTemp")[0].childNodes[0].nodeValue);
boilTemp=Number(xmlDoc.getElementsByTagName("boilTemp")[0].childNodes[0].nodeValue);
mashVol=Number(xmlDoc.getElementsByTagName("mashVol")[0].childNodes[0].nodeValue);
boilVol=Number(xmlDoc.getElementsByTagName("boilVol")[0].childNodes[0].nodeValue);
steamElement=Number(xmlDoc.getElementsByTagName("steamElement")[0].childNodes[0].nodeValue);
}
// force the webcam image to reload by appending time data
function updateImage() {
var img = document.getElementById("webcam");
var now = new Date();
img.src="images/cam.jpg"+ "?" + now.getTime();
}
// this function calls the Ajax update and draws the canvas elements
// it is to be executed repeatedly through the use of the setInterval method
function update() {
// update Arduino data
ajaxUpdateValues();
// draw gauges
var canvas = document.getElementById("steamPress");
var ctx = canvas.getContext("2d");
drawGauge(ctx, 0, 20, 0.25, 1, "Steam Pressure", "psi", steamPress);
canvas = document.getElementById("steamTemp");
ctx = canvas.getContext("2d");
if (steamTemp < 0) {
drawGauge(ctx, 60, 260, 5, 10, "Steam Temp", "Error", 0);
} else {
drawGauge(ctx, 60, 260, 5, 10, "Steam Temp", "Deg F", steamTemp);
}
canvas = document.getElementById("mashTemp");
ctx = canvas.getContext("2d");
if (mashTemp < 0) {
drawGauge(ctx, 20, 220, 5, 10, "Mash Temp", "Error", 0);
} else {
drawGauge(ctx, 20, 220, 5, 10, "Mash Temp", "Deg F", mashTemp);
}
canvas = document.getElementById("spargeTemp");
ctx = canvas.getContext("2d");
if (spargeTemp < 0) {
drawGauge(ctx, 20, 220, 5, 10, "Sparge Temp", "Error", 0);
} else {
drawGauge(ctx, 20, 220, 5, 10, "Sparge Temp", "Deg F", spargeTemp);
}
canvas = document.getElementById("boilTemp");
ctx = canvas.getContext("2d");
if (boilTemp < 0) {
drawGauge(ctx, 20, 220, 5, 10, "Boil Temp", "Error", 0);
} else {
drawGauge(ctx, 20, 220, 5, 10, "Boil Temp", "Deg F", boilTemp);
}
canvas = document.getElementById("mashVol");
ctx = canvas.getContext("2d");
if (mashVol < 0) {
drawGauge(ctx, 0, 24, 0.5, 1, "Mash Volume", "Error", 0);
} else {
drawGauge(ctx, 0, 24, 0.5, 1, "Mash Volume", "Gal", mashVol);
}
canvas = document.getElementById("boilVol");
ctx = canvas.getContext("2d");
if (boilVol < 0) {
drawGauge(ctx, 0, 24, 0.5, 1, "Boil Volume", "Error", 0);
} else {
drawGauge(ctx, 0, 24, 0.5, 1, "Boil Volume", "Gal", boilVol);
}
canvas = document.getElementById("steamElement");
ctx = canvas.getContext("2d");
drawGauge(ctx, 0, 100, 2, 10, "Heating Element", "%", steamElement);
}
// make the script execute at a set interval (in milliseconds)
function init() {
setInterval("update();", 500);
setInterval("updateImage();", 3000);
}
</script>
</head>
<body onload="init();">
<div>
<table style="margin-left:auto;margin-right:auto;">
<tr>
<td>
<table style="margin-left:auto;margin-right:auto;">
<tr>
<td>
<canvas id="steamPress" width="180" height="200">
This page is incompatible with your browser.
</canvas>
</td>
<td>
<canvas id="mashVol" width="180" height="200">
This page is incompatible with your browser.
</canvas>
</td>
<td>
<canvas id="boilVol" width="180" height="200">
This page is incompatible with your browser.
</canvas>
</td>
</tr>
<tr>
<td>
<canvas id="steamTemp" width="180" height="200">
This page is incompatible with your browser.
</canvas>
</td>
<td>
<canvas id="mashTemp" width="180" height="200">
This page is incompatible with your browser.
</canvas>
</td>
<td>
<canvas id="boilTemp" width="180" height="200">
This page is incompatible with your browser.
</canvas>
</td>
</tr>
<tr>
<td></td>
<td>
<canvas id="spargeTemp" width="180" height="200">
This page is incompatible with your browser.
</canvas>
</td>
<td>
<canvas id="steamElement" width="180" height="200">
This page is incompatible with your browser.
</canvas>
</td>
</tr>
</table>
</td>
<td style="vertical-align:text-top;">
<img id="webcam" height="400" src="images/cam.jpg">
</td>
</tr>
</table>
</div>
<div style="text-align:center;">
<span style="font-family: PHANTOM STENCIL; color: #222222; font-size: 69pt;">Kampferstrahl</span>
<h4>Version 0.2.3, 7 Feb 10 --- <a href="http://twitter.com/kampferstrahl">Twitter</a></h4>
</div>
<div>
<br><br><br><br>
<p><a href="http://brew-hut">Back to server homepage</a>
<p style="font-size:125%">
Arduino's output must be dumped to /var/www/xml/brewhut.xml in real time for this page to be useful.<br>
A script called brewhut runs `head -n 12 /dev/ttyUSB0 > /var/www/xml/brewhut.xml` about every 250 ms.<br>
Whenever a sketch is uploaded to Arduino, running `screen /dev/ttyUSB0 115200` will recapture the serial port for terminal use.<br>
</div>
</body>
</html>
