So I am updating my fermenting fridge with arduino that I send data to my laptop (running Ubuntu) via python and then serve the data on the same laptop running apache 2.
So i have everything up and running but I can't figure out how to get the php portion (part that reads data from file to update gauges) to refresh every x seconds without the whole webpage refreshing. Also pardon my coding as I am no expert and this is still a work in progress. I still need to clean it up once I get everything finished
Main Page Code
LoadGaugeData.php file for include
So i have everything up and running but I can't figure out how to get the php portion (part that reads data from file to update gauges) to refresh every x seconds without the whole webpage refreshing. Also pardon my coding as I am no expert and this is still a work in progress. I still need to clean it up once I get everything finished
Main Page Code
Code:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="refresh" content="40">
<title>One Nut Brewery Fermentation Monitor</title>
<link rel="Shortcut Icon" href="http://thejohnsonshome.com/faviconbeer.ico" type="image/x-icon" />
</head>
<body onload="init();" style="background-color: rgb(25, 25, 25);">
<?php include 'LoadGaugeData.php'; ?>
<table style="text-align: left; margin-left: auto; margin-right: auto;" cellpadding="2" cellspacing="10">
<tbody>
<tr>
<td style="height: 400px; width: 400px;"> <canvas id="WortTemp" width="400" height="400">No
canvas in your browser...sorry...</canvas> </td>
<td style="height: 400px; width: 400px;">
<canvas id="AirTemp" width="400" height="400"></canvas>
</td>
<td style="height: 400px; width: 400px;">
<canvas id="AmbientTemp" width="400" height="400"><a href="Ferm.txt"></canvas>
</td>
</tr>
</tbody>
</table>
<br>
<table style="text-align: left; margin-left: auto; margin-right: auto;" cellpadding="2" cellspacing="10">
<tbody>
<tr>
<td style="height: 320px; width: 400px; text-align: center;">
<canvas id="Heat" width="140" height="320"></canvas>
</td>
<td style="height: 320px; width: 400px; text-align: center;">
<div style="text-align: center;"><big style="color: rgb(0, 0, 153);"><big><big>
SetPoint</big></big></big><span style="color: rgb(0, 0, 153);"></span><br>
</div>
<br>
<canvas id="Single1LCD" width="150" height="100"></canvas>
</td>
<td style="height: 320px; width: 400px; text-align: center;">
<canvas id="Refrig" width="140" height="320"></canvas></td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
<br>
<br>
<script language="javascript" type="text/javascript">
var SetPoint = "65.00";
var WortData = "76.32";
var AirData = "76.44";
var AmbientData = "76.55";
var RefrigData = "50.00";
var HeatData = "0.00";
var single1
document.write(SetPointData);
//document.write(WortData);
//document.write(AirData);
//document.write(AmbientData);
//document.write(RefrigData);
//document.write(HeatData);
function init() {
// Define some sections
var sections = [steelseries.Section(30, 70, 'rgba(0, 220, 0, 0.3)'),
steelseries.Section(70, 80, 'rgba(255, 102, 0, 0.6)')];
var sectionCooling= [steelseries.Section(0, 100, 'rgba(0, 0, 220, 1)')];
var sectionHeat= [steelseries.Section(0, 100, 'rgba(220, 0, 0, 1)')];
// Define one area
areas = [steelseries.Section(80, 110, 'rgba(220, 0, 0, 0.3)')];
// Initialzing gauges
WortTemp = new steelseries.Radial('WortTemp', {
gaugeType: steelseries.GaugeType.TYPE4,
pointerType: steelseries.PointerType.TYPE6,
pointerColor: steelseries.ColorDef.RED,
backgroundColor: steelseries.BackgroundColor.CARBON,
lcdColor: steelseries.LcdColor.BLACK,
ledVisible: false,
//ledColor: steelseries.LedColor.BLUE_LED,
size: 400,
section: sections,
area: areas,
minValue: 30,
maxValue: 110,
titleString: "Wort Temperature",
unitString: "Deg F",
thresholdVisible: false,
//threshold: 36,
frameDesign : steelseries.FrameDesign.GLOSSY_METAL,
lcdVisible: true
});
AirTemp = new steelseries.Radial('AirTemp', {
gaugeType: steelseries.GaugeType.TYPE4,
pointerType: steelseries.PointerType.TYPE6,
pointerColor: steelseries.ColorDef.RED,
backgroundColor: steelseries.BackgroundColor.CARBON,
lcdColor: steelseries.LcdColor.BLACK,
ledVisible: false,
//ledColor: steelseries.LedColor.BLUE_LED,
size: 400,
section: sections,
area: areas,
minValue: 30,
maxValue: 110,
titleString: "Air Temperature",
unitString: "Deg F",
thresholdVisible: false,
//threshold: 36,
frameDesign : steelseries.FrameDesign.GLOSSY_METAL,
lcdVisible: true
});
AmbientTemp = new steelseries.Radial('AmbientTemp', {
gaugeType: steelseries.GaugeType.TYPE4,
pointerType: steelseries.PointerType.TYPE6,
pointerColor: steelseries.ColorDef.RED,
backgroundColor: steelseries.BackgroundColor.CARBON,
lcdColor: steelseries.LcdColor.BLACK,
ledVisible: false,
//ledColor: steelseries.LedColor.BLUE_LED,
size: 400,
section: sections,
area: areas,
minValue: 30,
maxValue: 110,
titleString: "Ambient Temperature",
unitString: "Deg F",
thresholdVisible: false,
//threshold: 36,
frameDesign : steelseries.FrameDesign.GLOSSY_METAL,
lcdVisible: true
});
Refrig = new steelseries.LinearBargraph('Refrig', {
titleString: "Cooling On",
unitString: "%",
section: sectionCooling,
thresholdVisible: false,
lcdVisible: false,
ledVisible: false
});
Heat = new steelseries.LinearBargraph('Heat', {
titleString: "Heat ON",
unitString: "%",
section: sectionHeat,
valueColor : steelseries.ColorDef.BLUE,
thresholdVisible: false,
lcdVisible: false,
ledVisible: false
});
single1 = new steelseries.DisplaySingle('Single1LCD', {
width: 200,
height: 100,
lcdColor: steelseries.LcdColor.DARKBLUE,
valuesNumeric: false,
//value : SetPoint,
ledVisible: false
});
// Start the random update
WortTemp.setValue(WortData);
AirTemp.setValue(AirData);
AmbientTemp.setValue(AmbientData);
Refrig.setValue(RefrigData);
Heat.setValue(HeatData);
single1.setValue(SetPoint);
//setInterval(function(){ setRandomValue(AirTemp); }, 400);
//setInterval(function(){ setRandomValue(AmbientTemp); }, 400);
//setInterval(function(){ setRandomValue(Refrig); }, 400);
//setInterval(function(){ setRandomValue(Heat); }, 400);
}
function setRandomValue(gauge) {
var x = 1
var x = x+10
gauge.setValueAnimated(55.2);
}
</script>
<script src="tween-min.js"></script>
<script src="steelseries-min.js"></script>
<div style="text-align: center;">
<form name="SetPoint" action="SetpointForm.php" type="get"><big><big><big><span style="color: rgb(0, 0, 153);"> Setpoint:</span></big></big></big> <input name="setpoint" type="text"> <input value="Submit Me" type="submit">
</form>
</div>
</body>
</html>LoadGaugeData.php file for include
Code:
<?php
header("Refresh: 5;");
$handle = fopen("Test.txt", "r");
while (($data = fgetcsv($handle)) !== FALSE) {
$setpoint = $data[0];
$wort = $data[1];
$air = $data[2]
;
$ambient = $data[3];
$heat = $data[4];
$refrig = $data[5];
}
?>
