Quantcast

Need Help with PHP for Steel Series Gauges

HomeBrewTalk.com - Beer, Wine, Mead, & Cider Brewing Discussion Community.

Help Support Homebrew Talk:

rockytoptim

Supporting Member
HBT Supporter
Joined
May 2, 2009
Messages
766
Reaction score
95
Location
Livonia, MI
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

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);">&nbsp;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];

}
?>
 

jcaudill

Well-Known Member
Joined
Dec 2, 2010
Messages
990
Reaction score
87
Location
VA Beach
Well there are many ways you can go about it. Simplest would be to toss all the html that changes into an iframe and just refresh the iframe on an interval. Next is going to be generate all the html in the PHP and return it through AJAX. And most complex is use JSON to return the values through AJAX and update the div.

So if you go the iframe, you need to expand your PHP to include all the variable HTML and then the iframe will just include the php file. You can refresh the iframe with some basic javascript in your base HTML file.

Make any sense?
 
Top