Web-Accessible Temperature Logger for Raspberry Pi

Homebrew Talk - Beer, Wine, Mead, & Cider Brewing Discussion Forum

Help Support Homebrew Talk - Beer, Wine, Mead, & Cider Brewing Discussion Forum:

This site may earn a commission from merchant affiliate links, including eBay, Amazon, and others.
Looks good! I've been wanting to do exactly this for some time now but I suck when it comes to code. Glad it's finally up here in a way I can understand. Where did you insert this code to display in the upper right hand corner like you have?


Sent from my iPhone using Home Brew

Where the RaspberryPints logo and link used to reside in the top right corner.
Look for this code
Code:
					<?php if($config[ConfigNames::UseHighResolution]) { ?>			
						<a href="http://www.raspberrypints.com"><img src="img/RaspberryPints-4k.png" height="200" alt=""></a>
					<?php } else { ?>
						<a href="http://www.raspberrypints.com"><img src="img/RaspberryPints.png" height="100" alt=""></a>
					<?php } ?>

And because I want to support the RaspberryPints I just moved the above code and placed it just above
Code:
	</body>
</html>
in the index.php file
 
I'm liking ^all that^. But I'd like to go one step further and have the sensor readings cycle through on say a 3 second period using just one line up in the top-right corner. I have no idea if that can be coded directly in the 'Pints php page, or if it'd take a java/js applet.

It'd be a nice Extra-Early Christmas present if someone could code that up ;)

Cheers!

A smooth running machine right here :D

keezer_temps_01oct2014.jpg
 
I'm liking ^all that^. But I'd like to go one step further and have the sensor readings cycle through on say a 3 second period using just one line up in the top-right corner. I have no idea if that can be coded directly in the 'Pints php page, or if it'd take a java/js applet.

It'd be a nice Extra-Early Christmas present if someone could code that up ;)

Cheers!

A smooth running machine right here :D

A vertical or horizontal scroll?
 
Wasn't thinking scroll - too busy I think. Rather just having the one short line change from one reading to the next with an identifying label for each similar to how I've labelled the sensors...

Cheers!


Try this:
First open LXTerminal and type
Code:
sudo apt-get update
and hit enter and when it finishes type
Code:
sudo apt-get install php5-sqlite
and hit enter

Then add this code to the index.php file where you want the temperature

Code:
				<script type="text/javascript">

/***********************************************
* Fading Scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var delay = 2000; //set delay between message change (in miliseconds)
var maxsteps=30; // number of steps to take to change from start color to endcolor
var stepdelay=40; // time in miliseconds of a single step
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
var startcolor= new Array(255,255,255); // start color (red, green, blue)
var endcolor=new Array(0,0,0); // end color (red, green, blue)

var fcontent=new Array();
begintag='<div style="font: normal 22px Arial; padding: 5px;">'; //set opening tag, such as font declarations
fcontent[0]="Room Temp <?php
$db = new SQLite3('temp_data5.db');
$result = $db->querySingle('SELECT temp0 FROM temps ORDER BY timestamp DESC', true);
foreach ($result as $row) {
echo $row;
}
?>F";
fcontent[1]="Tower Air Temp <?php
$db = new SQLite3('temp_data5.db');
$result = $db->querySingle('SELECT temp1 FROM temps ORDER BY timestamp DESC', true);
foreach ($result as $row) {
echo $row;
}
?>F";
fcontent[2]="Upper Air Temp <?php
$db = new SQLite3('temp_data5.db');
$result = $db->querySingle('SELECT temp2 FROM temps ORDER BY timestamp DESC', true);
foreach ($result as $row) {
echo $row;
}
?>F";
fcontent[3]="Lower Air Temp <?php
$db = new SQLite3('temp_data5.db');
$result = $db->querySingle('SELECT temp3 FROM temps ORDER BY timestamp DESC', true);
foreach ($result as $row) {
echo $row;
}
?>F";
fcontent[4]="Keg Temp <?php
$db = new SQLite3('temp_data5.db');
$result = $db->querySingle('SELECT temp4 FROM temps ORDER BY timestamp DESC', true);
foreach ($result as $row) {
echo $row;
}
?>F";
closetag='</div>';

var fwidth='200px'; //set scroller width
var fheight='150px'; //set scroller height

var fadelinks=1;  //should links inside scroller content also fade like text? 0 for no, 1 for yes.

///No need to edit below this line/////////////////


var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;


/*Rafael Raposo edited function*/
//function to change content
function changecontent(){
  if (index>=fcontent.length)
    index=0
  if (DOM2){
    document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
    document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
    if (fadelinks)
      linkcolorchange(1);
    colorfade(1, 15);
  }
  else if (ie4)
    document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
  index++
}

// colorfade() partially by Marcio Galli for Netscape Communications.  ////////////
// Modified by Dynamicdrive.com

function linkcolorchange(step){
  var obj=document.getElementById("fscroller").getElementsByTagName("A");
  if (obj.length>0){
    for (i=0;i<obj.length;i++)
      obj[i].style.color=getstepcolor(step);
  }
}

/*Rafael Raposo edited function*/
var fadecounter;
function colorfade(step) {
  if(step<=maxsteps) {	
    document.getElementById("fscroller").style.color=getstepcolor(step);
    if (fadelinks)
      linkcolorchange(step);
    step++;
    fadecounter=setTimeout("colorfade("+step+")",stepdelay);
  }else{
    clearTimeout(fadecounter);
    document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
    setTimeout("changecontent()", delay);
	
  }   
}

/*Rafael Raposo's new function*/
function getstepcolor(step) {
  var diff
  var newcolor=new Array(3);
  for(var i=0;i<3;i++) {
    diff = (startcolor[i]-endcolor[i]);
    if(diff > 0) {
      newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
    } else {
      newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
    }
  }
  return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
}

if (ie4||DOM2)
  document.write('<div id="fscroller" style="border:1px solid black;width:'+fwidth+';height:'+fheight+'"></div>');

if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)
window.onload=changecontent

</script>

You might have to change the font size scroller width and height to match your index.php

Database name and senor labels may have to be changed depending on what you called them, I was just guessing.

Scroll delay and speed and fade speed can be adjusted to suite whatever looks good to you.

Enjoy.
 
Oh, wow! Do you need a new best friend? ;)

If you could tell me where I stick that chunk o' code I'm all in to give it a try!

Cheers! :mug:
 
Oh, wow! Do you need a new best friend? ;)

If you could tell me where I stick that chunk o' code I'm all in to give it a try!

Cheers! :mug:

Where do you want it?
Post a screen capture, circle where you want it and I can tell you where the code goes.

If you want it in the top right corner read this post and just replace the code
 
I tried doing just that. I replaced the code in the upper right with the code you provided, and when I went back to my tap list all I was given was my background image. No beers, kegs, or anything really. Obviously I changed something else that I shouldn't have so I'll try it again tonight when I get home. On another note, can you guys tell me how to change the labeling for the sensors? I know which one is which but I don't know how to change them as "keg temp" "tower temp" etc. I LOVE the idea of having the temp monitor display cycle between sensors periodically. Would love to implement this into my system


Sent from my iPhone using Home Brew
 
Interestingly, my Max / Min temperatures are way off. I'm not sure if there's a glitch or I messed somethign up, but it shows my room temp min at 38, max in the 50s, even though the 'current' temp is showing mid 70s. I'll poke around in the code (for what good that'll do), maybe it's reading something funky.
 
[...]On another note, can you guys tell me how to change the labeling for the sensors? I know which one is which but I don't know how to change them as "keg temp" "tower temp" etc.[...]

In the webgui.py file, look for this chunk of code:

def print_graph_script(table):

# google chart snippet
chart_code="""
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Time', 'Ch0 Room', 'Ch1 Tower Air', 'Ch2 Upper Air', 'Ch3 Lower Air', 'Ch4 Keg'],
%s
]);


This is from my system and you can see the familiar labels instantiated. You can make them pretty much anything you'd like...

Cheers!
 
Thank you! I'll be sure to make those changes when I get back to my computer at home. Unfortunately for me that won't be till Sunday.


Sent from my iPhone using Home Brew
 
I tried doing just that. I replaced the code in the upper right with the code you provided, and when I went back to my tap list all I was given was my background image. No beers, kegs, or anything really. [...]

Exact same result here: background, brewery name, and the icon to the management gui, nothing else.

The java console shows this is the last line executed:

fcontent[0]="Room Temp

I'm playing around with the 'Pints php file to see if I can get this thing to work...

[edit] ...and not having much luck...

Cheers!
 
Exact same result here: background, brewery name, and the icon to the management gui, nothing else.

The java console shows this is the last line executed:

fcontent[0]="Room Temp

I'm playing around with the 'Pints php file to see if I can get this thing to work...

[edit] ...and not having much luck...

Cheers!

It looks like the it is not reading the database. Is your database file 'temp_data5.db'? If not you'll have to change it to its proper name.

If it still gives you trouble send me your index.php file and I can run it on my machine to find the problem.
 
To help everyone out I modified the stock RaspberryPints index.php page with the fade scroller for two to five sensors to mirror day_trippr's files, a singles sensor setup gets a static output.

So if you have one sensor you would download index1.php, two sensors you would download index2.php, etc....

In all of these files I've moved the Rpints link and logo to the bottom left and day_trippr's temperature log link and logo to the bottom right.

All files were tested on my Pi and worked.
With that said I have the Rpints 2.0 version with flow sensors and day_trippr's temperature log app installed and viewed with Chromium on the Pi and Chrome on my main computer.

Download the file that corresponds to your sensor into your Pi's /var/www/ folder and the call up the file into your browser with its proper name i.e. index1.php, index2.php, etc...

If it works and you like it delete your original index.php file and rename the index(x).php file to index.php. If you've already made coding changes to your index.php file you can still view the code and add it where you want.

The files can be found here on my google drive.

Enjoy and let me know if there are any problems. :mug:
 
It looks like the it is not reading the database. Is your database file 'temp_data5.db'? If not you'll have to change it to its proper name.[...].

Did that, of course.

Do you have a working example I could clone?

[edit] Doh! Should have read your second post first ;)
When I get a chance today I'll pull the file and give that a try...

Cheers!

[edit] And the exact same results. Here's why: (from the Apache error.log)

[Sat Oct 04 00:49:04 2014] [error] [client nnn.nnn.nnn.nnn] PHP Fatal error: Class 'SQLite3' not found in /var/www/index.php on line 117

So, what's up with that?
 
Did that, of course.

Do you have a working example I could clone?

[edit] Doh! Should have read your second post first ;)
When I get a chance today I'll pull the file and give that a try...

Cheers!

[edit] And the exact same results. Here's why: (from the Apache error.log)

[Sat Oct 04 00:49:04 2014] [error] [client nnn.nnn.nnn.nnn] PHP Fatal error: Class 'SQLite3' not found in /var/www/index.php on line 117

So, what's up with that?

Oops, my bad. It seems I forgot some late night drunken coding to get this to work. :(

Try running this in terminal
Code:
$ sudo apt-get install php5-sqlite

then reboot.

It seems that even though sqlite is installed during your instructions it can't be read in PHP so this enables it.
Let me know if this fixes it and I'll add it to my previous posts.
 
Oops, my bad. It seems I forgot some late night drunken coding to get this to work. :(

Try running this in terminal
Code:
$ sudo apt-get install php5-sqlite

then reboot.

It seems that even though sqlite is installed during your instructions it can't be read in PHP so this enables it.
Let me know if this fixes it and I'll add it to my previous posts.

Excellent - thanks for the follow-up. Totally makes sense. While R'Pints installs php support for mysql, I didn't need php support for sqlite3 to cobble together the logger. Now that you're calling it from inside the "home page" that package suddenly becomes necessary.

I'll give this a go tomorrow - after I back-up the SD card on my (temporary) keezer system. Right now I'm carving up a sheet of 1/8" aluminum into an I/O panel for the "real" R'Pints/BrewPi/all_my_other_RPi_gadgets system I'm building for my keezer.

I'm gunning for solid over-kill this time :D

Cheers!

keezer_controller_panel_sm.jpg
 
Yay! I have the temperature display working! Brilliant!
Thanks very much, ichbinbier!

I tweaked the settings to defeat the color fade thing, I like the simple effect.
And I noticed that there's a lot of code trying to "scroll" something (presumably the same table data values) but there's no apparent scrolling going on. Given that, I shrunk the bounding box down to 40px (was 150px) so it didn't use so much vertical space.

Then I glued back my hot-linked thermometer icon so I can get to my logger. It's a second instance of "HeaderRight" which I'm sure is not kosher, but it "kinda" works, though as a result it's offset vertically below the scroller.

I'd like the thermometer icon to be back up the top right corner of the page instead of being offset down by the lower edge of the scroller bounding box. And I'd like to have the top edge of the scroller itself at the top of the page as well, so everything is lined up.

Actually, getting rid of the scroller bounding box and just having the one line of plain white text show up just left of the thermometer in the top-right corner would be ideal. Any suggestions to do all that end are appreciated.

Anyway, the current result can be seen here. I'm still playing around with it so it might go all pear shaped when I break something ;)

Cheers!
 
Yay! I have the temperature display working! Brilliant!
Thanks very much, ichbinbier!

I tweaked the settings to defeat the color fade thing, I like the simple effect.
And I noticed that there's a lot of code trying to "scroll" something (presumably the same table data values) but there's no apparent scrolling going on. Given that, I shrunk the bounding box down to 40px (was 150px) so it didn't use so much vertical space.

Then I glued back my hot-linked thermometer icon so I can get to my logger. It's a second instance of "HeaderRight" which I'm sure is not kosher, but it "kinda" works, though as a result it's offset vertically below the scroller.

I'd like the thermometer icon to be back up the top right corner of the page instead of being offset down by the lower edge of the scroller bounding box. And I'd like to have the top edge of the scroller itself at the top of the page as well, so everything is lined up.

Actually, getting rid of the scroller bounding box and just having the one line of plain white text show up just left of the thermometer in the top-right corner would be ideal. Any suggestions to do all that end are appreciated.

Anyway, the current result can be seen here. I'm still playing around with it so it might go all pear shaped when I break something ;)

Cheers!

The code I found for this looks like it was based on a scroll script, just modified to make it fade.

Black Box Fix

Find the line:
Code:
if (ie4||DOM2)
  document.write('<div id="fscroller" style="border:1px solid black;width:'+fwidth+';height:'+fheight+'"></div>');

and remove
Code:
border:1px solid black;

Temp icon & line alignment fix

Find each occurrence of
Code:
?>F";

should be five for you, and change to

Code:
?>&deg;F <a href=\"http://96.252.83.39:84/cgi-bin/webgui.py\"><img src=\"img/thermometer.png\" height=\"100\" align=\"top\"></a>";

then delete the second header call entirely
Code:
				<div class="HeaderRight">
											<a href="http://96.252.83.39:84/cgi-bin/webgui.py"><img src="img/thermometer.png" height="100" alt=""></a>
									</div>

It's a bit of a hack but will work. You might have to adjust the scroller width value to get it to fit and get it closer to the corner. It also adds the degree symbol in front of the 'F'.

Hope this works for you :)
 
Last edited:
Black border eliminated successfully. Good start! :)

The other part - almost there! What happens is the temperature text string runs across the top of the thermometer icon, shoving the latter downward by the 40pixels I reserved for the text box.

Also, I've noticed that the HeaderRight tag doesn't put the scroller to the right border - it's shoved to the left a few hundred pixels or so. I need to figure out why that happens.

I need Web Pages For Dummies ;) It seems to me there must be a set of tags I could use to line up a whole host of elements in the header space all aligned to the top of the page...

Cheers!
 
Black border eliminated successfully. Good start! :)

The other part - almost there! What happens is the temperature text string runs across the top of the thermometer icon, shoving the latter downward by the 40pixels I reserved for the text box.

Also, I've noticed that the HeaderRight tag doesn't put the scroller to the right border - it's shoved to the left a few hundred pixels or so. I need to figure out why that happens.

I need Web Pages For Dummies ;) It seems to me there must be a set of tags I could use to line up a whole host of elements in the header space all aligned to the top of the page...

Cheers!

Try changing this line
Code:
begintag='<div style="font: normal 22px; padding: 5px;">'; //set opening tag, such as font declarations
to
Code:
begintag='<div style="font: normal 22px" align="right">'; //set opening tag, such as font declarations

then look for this line
Code:
 document.write('<div id="fscroller" style="width:'+fwidth+';height:'+fheight+'"></div>');
and change to
Code:
document.write('<div id="fscroller" style="width:100%;height:'+fheight+'"></div>');

You still might have to tweak the height setting
 
For those of us that aren't code monkies, but would love to implement this - when it's all flushed out and functional, can you post the final "how to" on what goes where? I'm impressed by how smart you folks are with this stuff.
 
Try changing this line[...]
You still might have to tweak the height setting

Brilliant! Check it out!

I made those changes on top of the previous set and the result is spot-on - as long as the screen width isn't so narrow that the temp readings bump into the Title. It'll wrap around in that case, but it's a non-issue imo - the only things that are affected are hand-helds and I'm not optimizing for that.

[edit] I went "terse" with the text fields and now everything stays up top even on my GS4, so if I want to freak someone out with all this it'll look good doing it :D

Otoh, my old DroidX with the smaller screen still wraps the text over the thermometer, but I only use the poor thing when I'm out riding around on my tractor anyway ;)

Cheers! And thanks for the help on this! :mug:
 
For those of us that aren't code monkies, but would love to implement this - when it's all flushed out and functional, can you post the final "how to" on what goes where? I'm impressed by how smart you folks are with this stuff.

I'll write this last feature up and add is to the list of "Extras" in the logger instructions. I'll note here when it's in the kit...

Cheers!
 
Brilliant! Check it out!

I made those changes on top of the previous set and the result is spot-on - as long as the screen width isn't so narrow that the temp readings bump into the Title. It'll wrap around in that case, but it's a non-issue imo - the only things that are affected are hand-helds and I'm not optimizing for that.

[edit] I went "terse" with the text fields and now everything stays up top even on my GS4, so if I want to freak someone out with all this it'll look good doing it :D

Otoh, my old DroidX with the smaller screen still wraps the text over the thermometer, but I only use the poor thing when I'm out riding around on my tractor anyway ;)

Cheers! And thanks for the help on this! :mug:

You're welcome and thank you for starting this crazy ride to begin with.

Just to let you know your site looks good on a phone, well mine at least.

1412657444807.jpg
 
The temp page has some issues with lining up the tables on my phone. It isn't as bad on my tablet but still isn't completely aligned there either.

I just scored a 19" monitor off of Craigslist for $12 and already have a raspberry pi. I will be setting up R-pints followed by this extension soon. Thanks for putting this together.

1412658097096.jpg
 
lol! Yeah, I've mentioned the coding for that tabular data is rude and crude - "My God. It's full of space characters!" ;)

Honest, the sum of my html experience can be found in the various HBT threads I've been playing in. Been a hard-core hardware design engineer since 1973 and am a wizard in my CAE/CAD space, but my web page skills barely move the needle off the stop :)

Cheers! ("Relies on the kindness of HBTers")
 
It appears that the addition of the temperature "scroller" has introduced a bug in the tap list.

I have a keg that's nearly empty, one of the originals that were already in the keezer when I first brought up R'Pints v2.0.1, so I didn't know how much beer was actually in it. When the remaining volume goes negative I've been re-tapping the same keg set for a half-gallon. When it finally kicks I'll have a fresh, full keg to register.

With the scroller version of index.php resident, when I went through that "Kick Then Re-Tap" routine, the re-tapped keg appeared as "Full", even though there's only a half gallon remaining. If I switch back to my original index.php, that same keg will be displayed as pretty close to empty.

Up until this happened things looked like they were working perfectly - kegs were dropping, colors were changing, etc. I'm going to need to walk through the scroller version of index.php and hope to find what got broken. Meanwhile I have my original version resident...

Cheers!

[edit] DOH! Found it: my normally tight version control let me down and this whole time I've been editing a V2.0.0 index.php :smack:
Cloned all the changes to the v2.0.1 index.php and it's all good...
 
And now, for something totally different and out of left field, I give you: The Death Of An MH1210 Temperature Controller!

Plots from a normal day's run, followed by two days with bizarre behavior. I had noticed the weirdness the evening of the first event - I probably pull up my tap list and logger a half-dozen times a day. Then when it happened again a couple days later I called Shenanigans. Since then the controller has gone totally ape ****, with the display gyrating wildly. Not a probe - I swapped it with a previously tested spare.

I have a replacement MH1210 enroute, but the plan is to have BrewPi run the keezer once I finish up my new system (which I guarantee will be one of the more insane rigs running a friggin' beer dispensing appliance ever seen in the wild :D) The MH1210 will then become the backup controller (a bit ironic, but there we are).

In the mean time I'm glad I didn't sell my first Ranco single-stage controller as it's been keeping the keezer under control for the last couple of days. And the logger gave me hints that things were going pear shaped before it became critical, so I'm pleased about that...

Cheers!

keezer_temps_01oct2014.jpg


keezer_temps_02oct2014.jpg


keezer_temps_03oct2014.jpg
 
Ok, let's give this a go...

Two points:

You still have to add this to the instructions
Code:
$ sudo apt-get install php5-sqlite

and to simplify
add my index.php files that mirror naming of files in your temp_logger_kit
i.e. monitor_1sensor.py, webgui1.py, index1.php
monitor_2sensor.py, webgui2.py, index2.php
monitor_3sensor.py, webgui3.py, index3.php
etc...

As for the Rpints logo I placed mine at the bottom left as per instructions here
 
Thanks for the feedback. I've added the php-sqlite package installation instructions to my earlier post.

I really do not want to have to maintain five edited copies of a web page that I don't own and is subject to changes out of my control. That'd be a royal pita. And the RPints folks are making noises about changes again.

So I'm currently trying to make one file that will work for 1 through 5 channels, with the user only having to edit a short set of variables. Once I have that, then I can package up the contiguous block of code that would need to be inserted into whatever the R'Pints folks come up with (at least until they break it).

So new users would insert the code block, edit the handful of variables, and be up and running. And folks can just keep cutting and pasting their already-configured-and-running code into the next index.php that comes down the pike.

To that end, I already have the channel readings executing conditionally based on a "channels" variable, so that part is done. The user won't have to chop or comment out any code.

Next I want to use variables for the database file name, for the channel labels and for the temperature logger web page url.

dbname
chname0
chname1
chname2
chname3
chname4
loggerurl

But I'm having a friggin' ***** of a time trying to get any of that to work.

So, for example, starting from the top, I tried defining the database file name variable:

var dbname = "tempdata5.db";

then use it wherever the $db variable gets set:

$db = new sqlite3(dbname);

Aaaand that doesn't work. Apache complains:

"PHP Notice: Use of undefined constant dbname - assumed 'dbname' in /var/www/index.php on line 118"

So for some reason php doesn't believe dbname was ever defined so it passes the variable name instead to sqlite - which promptly pukes on it, of course.

I've played with punctuation with no joy, and the interwebs isn't very helpful. Apparently this is such a stupid simple problem to solve that I'm the first one who ever needed help on it ;) Everywhere I look ends up solving far more complex string issues than what I need...

Cheers!
 
var dbname = "tempdata5.db";

then use it wherever the $db variable gets set:

$db = new sqlite3(dbname);

Cheers!

One step at a time and we can conquer this.

So when setting up your variable you forgot the dollar ($) and in this case no double quotes (") so it should read

$dbname = 'temp_data5.db';

and to use it in this example

$db = new sqlite3($dbname);

and place the variable $dbname either above or below $db = true; near the top of the page
 
One step closer. And once again you've bailed me out :mug:

I'd like to keep all the code together in one block, so after verifying that the $dbname worked when defined inside the php chunk near the top of the file, I created a tiny php chunk at the top of the scroller code for it instead. Works perfectly, and that'll make it a lot easier to distribute as a monolithic chunk.

So...two down, two to go: the channel labels, and the url string? What's your pleasure? :D

Cheers!
 
One step closer. And once again you've bailed me out :mug:

I'm going to try to kill a few birds with one stone all the while staying consistent with my stubbornness. Hear me out on this.

Make 5 files named temp_insert(x).php in /var/www This will allow you to maintain the code even if the Rpints page changes. This is the code for temp_insert5.php
Code:
<?php
	//Enter all variables between the php tags
	//Set database name
	$dbname = 'temp_data2.db';
	//Set Fahrenheit(F) or Celcius(C)
	$cf = "F";
	//Channel labels here
	$ch0 = "Channel One";
	$ch1 = "Channel 2";
	$ch2 = "Channel Three";
	$ch3 = "Channel 4";
	$ch4 = "Channel Five";
	//URL string to webgui(x).py
	$url = "localhost";
?>

<script type="text/javascript">

/***********************************************
* Fading Scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var delay = 500; //set delay between message change (in miliseconds)
var maxsteps=50; // number of steps to take to change from start color to endcolor
var stepdelay=40; // time in miliseconds of a single step
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
var startcolor= new Array(255,255,255); // start color (red, green, blue)
var endcolor=new Array(0,0,0); // end color (red, green, blue)

var fcontent=new Array();
begintag='<div style="font: normal 22px"; align="right">'; //set opening tag, such as font declarations
fcontent[0]="<?php echo $ch0; ?> <?php
$db = new SQLite3($dbname);
$result = $db->querySingle('SELECT temp0 FROM temps ORDER BY timestamp DESC', true);
foreach ($result as $row) {
echo $row;
}
?>&deg;<?php echo $cf; ?> <a href =\"http://<?php echo $url; ?>/cgi-bin/webgui2.py\"><img src=\"img/thermometer.png\" height=\"50\" align=\"top\"></a>";
fcontent[1]="<?php echo $ch1; ?> <?php
$db = new SQLite3($dbname);
$result = $db->querySingle('SELECT temp1 FROM temps ORDER BY timestamp DESC', true);
foreach ($result as $row) {
echo $row;
}
?>&deg;<?php echo $cf; ?> <a href =\"http://<?php echo $url; ?>/cgi-bin/webgui2.py\"><img src=\"img/thermometer.png\" height=\"50\" align=\"top\"></a>";
fcontent[2]="<?php echo $ch2; ?> <?php
$db = new SQLite3($dbname);
$result = $db->querySingle('SELECT temp2 FROM temps ORDER BY timestamp DESC', true);
foreach ($result as $row) {
echo $row;
}
?>&deg;<?php echo $cf; ?> <a href =\"http://<?php echo $url; ?>/cgi-bin/webgui2.py\"><img src=\"img/thermometer.png\" height=\"50\" align=\"top\"></a>";
fcontent[3]="<?php echo $ch3; ?> <?php
$db = new SQLite3($dbname);
$result = $db->querySingle('SELECT temp3 FROM temps ORDER BY timestamp DESC', true);
foreach ($result as $row) {
echo $row;
}
?>&deg;<?php echo $cf; ?> <a href =\"http://<?php echo $url; ?>/cgi-bin/webgui2.py\"><img src=\"img/thermometer.png\" height=\"50\" align=\"top\"></a>";
fcontent[4]="<?php echo $ch4; ?> <?php
$db = new SQLite3($dbname);
$result = $db->querySingle('SELECT temp4 FROM temps ORDER BY timestamp DESC', true);
foreach ($result as $row) {
echo $row;
}
?>&deg;<?php echo $cf; ?> <a href =\"http://<?php echo $url; ?>/cgi-bin/webgui2.py\"><img src=\"img/thermometer.png\" height=\"50\" align=\"top\"></a>";

closetag='</div>';

var fheight='150px'; //set scroller height

var fadelinks=1;  //should links inside scroller content also fade like text? 0 for no, 1 for yes.

///No need to edit below this line/////////////////


var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;


/*Rafael Raposo edited function*/
//function to change content
function changecontent(){
  if (index>=fcontent.length)
    index=0
  if (DOM2){
    document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
    document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
    if (fadelinks)
      linkcolorchange(1);
    colorfade(1, 15);
  }
  else if (ie4)
    document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
  index++
}

// colorfade() partially by Marcio Galli for Netscape Communications.  ////////////
// Modified by Dynamicdrive.com

function linkcolorchange(step){
  var obj=document.getElementById("fscroller").getElementsByTagName("A");
  if (obj.length>0){
    for (i=0;i<obj.length;i++)
      obj[i].style.color=getstepcolor(step);
  }
}

/*Rafael Raposo edited function*/
var fadecounter;
function colorfade(step) {
  if(step<=maxsteps) {	
    document.getElementById("fscroller").style.color=getstepcolor(step);
    if (fadelinks)
      linkcolorchange(step);
    step++;
    fadecounter=setTimeout("colorfade("+step+")",stepdelay);
  }else{
    clearTimeout(fadecounter);
    document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
    setTimeout("changecontent()", delay);
	
  }   
}

/*Rafael Raposo's new function*/
function getstepcolor(step) {
  var diff
  var newcolor=new Array(3);
  for(var i=0;i<3;i++) {
    diff = (startcolor[i]-endcolor[i]);
    if(diff > 0) {
      newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
    } else {
      newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
    }
  }
  return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
}

if (ie4||DOM2)
  document.write('<div id="fscroller" style="width100%;height:'+fheight+'"></div>');

if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)
window.onload=changecontent

</script>

Now you can delete one line per temp call and then save as temp_insert4.php etc..

The fun starts here
In the index.php delete everything between HeaderRight div tags so we have this
Code:
				<div class="HeaderRight">
			
				</div>
and delete any variables you already set on the index page.

Here comes the punch line...

Now all we do is add this little tiny bit of code in to the index.php between the HeaderRight div tags or really anywhere we want.
Code:
<?php include'temp_insert5.php'; ?>

That's it. Now if the index.php changes in any upcoming versions all we have to do is add our tiny bit of code wherever we want all the while keeping any changes to the temperature code part separate.

I do need a beer after this :mug:
 
ichbinbier is my hero! :mug:

That is a fantastic solution, and seeing the switching in and out of php context made everything much clearer. Thanks so much again for the help and education :)

So I've refined the temp_insert.php file a wee bit further to avoid the whole "five files" thing by using the conditional execution I had figured out yesterday and adding another php variable to point to the user's webgui file.

Now one file should be usable by anyone. They just need to set the variables at the top of temp_insert.php, stick the one command into index.php, and be good to go.

Installation instructions follow. Once one or two folks go through it successfully I'll add this feature to the full installation kit on my Google Drive.

Cheers!
 
With a huge amount of help I can now offer "The Ichbinbier Option" - a "scrolling" temperature display with a link to the temperature logger gui as an add-on to the RaspberryPints tap list display. You can see the latest temperature data for each One-Wire probe display in sequence for up to five channels right on the tap list page.

Overview:

Basically, this procedure will cause the RaspberryPints tap list web page to pull in a chunk of primarily JavaScript code that will take the latest entry in the temperature logger database, sort out the individual probe readings, and then display them in turn in a small bit of text next to a thermometer icon that links to the logger display gui.

Installation:

- Obviously, this add-on assumes one is using my temperature logger to begin with :) If you're not currently running the logger, please start with the instructions found here.

Get that running first, then you can add this on.

- Next, you must install support for sqlite on php, by executing the following two commands from a terminal session:

$ sudo apt-get update
$ sudo apt-get install php5-sqlite

- Next, copy the file temp_insert.php from my Google Drive here to /var/www/temp_insert.php. Be sure to set the ownership and permissions to match whatever is set for the RaspberryPints index.php file. I use WinSCP from my W7U workstation to view and change file properties, but you can use a terminal session as well.

Show ownership and permissions of index.php:

$ ls -l /var/www/index.php

-rwxrwxrwx 1 pi pi 13315 Oct 9 21:17 index.php

Index.php is owned by user 'pi' in group 'pi' with permissions set to 0777

If the same command used for temp_insert.php results in different owner and/or permissions, change them:

Change ownership to 'pi' in group 'pi':

$ sudo chown pi:pi /var/www/temp_insert.php

Change permissions:

$ sudo chmod 777 /var/www/temp_insert.php


- Edit temp_insert.php and set the variables listed below.
Note that there is a "php" set and a "javascript" set of variables to configure.
The "php" set is at the top of temp_insert.php, the "javascript" set follows.

This is the php set.

//Enter all variables between the php tags
//Set database name. If you used the original logger installation, this could be temp_data1.db, temp_data2.db...to temp_data5.db.
$dbname = 'temp_data5.db';
//Set Fahrenheit(F) or Celcius(C). Note that this is just part of the label, it doesn't affect the numeric temperature readings.
$cf = "F";
//Channel labels go here. Terse works best if you want to support handheld displays. My 5 channel labels are shown.
$ch0 = "Ch0 Room";
$ch1 = "Ch1 Tower";
$ch2 = "Ch2 Upper";
$ch3 = "Ch3 Lower";
$ch4 = "Ch4 Keg";
//URL string to the RaspberryPints server. If your server listens to a non-standard port (ie: anything other than 80) be sure to include the port as shown in the example setting below. If you never changed the default listening port, omit the colon and the numbers that follow. If you do not intend to access the tap list from beyond the RaspberryPi console, you can use 'localhost' or '127.0.0.1'; if you want to access the RPi inside your LAN, you need to set this to the LAN addressfor the RPi; if you want to access from the internet, you need to use your WAN address. The example shown is a WAN address listening on port 84.
$url = "96.252.83.39:84";
//Name of webguiN.py file for the temperature logger gui. If you installed the temperature logger using the filenames in the original logger kit, 'N' could be 1 through 5 (hence webgui1.py, webgui2.py...webgui5.py) depending on the number of supported channels. Default is set to webgui5.py for five channels.
$gui_file = "webgui5.py";


The "javascript" variables start at line 28. The only critical setting is the variable "channels", the rest tune the appearance of the temperature display and aren't shown here.

var channels = 5; //valid setting is from 1 through 5, and defines the number of temperature channels to display

Now save the file.


- Next, make a back-up copy of the RaspberryPints /var/www/index.php file just in case, then edit index.php as follows:

Read the next steps carefully:

Look for this line (occurs at line 98 in the original v2.0.1 file):

<div class="HeaderRight">

Cut the (5) lines of code directly following the above tag, down to but not including the </div> tag.

Then type in this single line (still in between the <div class="HeaderRight"> tag and the following </div> tag):

<?php include'temp_insert.php'; ?>

Then, scroll down near the very bottom of the file, find the last occurrence of the </body> tag, and paste the cut lines directly above that tag. This will move the RaspberryPints logo to the bottom of the tap list display, making room for the temperature display.

Save the file and exit the text editor.

And that's it. If you load your RaspberryPints tap list page, the thermometer icon that links to the logger gui should appear in the top right corner, with the "rolling" temperature channel data listed directly to the left.

Cheers!

[edited 10/10/14 to refine instructions]
 
Nice work. Cudos to you for a great addition for our kegerators/keezers and to the RaspberryPints project.
 
Nice work. Cudos to you for a great addition for our kegerators/keezers and to the RaspberryPints project.

Thanks, but you know I owe most of this last bit to you. In fact when I bundle this with the rest of the kit I shall name this "The Ichbinbier Option" in your honor for all your kind help on this particular obsession :)

Cheers! :mug:
 

Latest posts

Back
Top