How do I display the temperature from the internal sensor on a HTML page?

Question

I am just getting into this and whilst I can display the temp via SSH, I am struggling with displaying it on the little webpage I setup on my Pi running Apache2. I followed this example http://www.raspberrypi.org/phpBB3/viewtopic.php?t=35487&p=310038 which included some AJAX and a script in the cgi-bin directory, but I get an error saying that $ was not defined and being really clueless with JavaScript, I have no clue where the error lies. I am wondering if it could be the cgi-bin directory. I just created it and could not locate info on whether or not I had to do anything special to enable its use for scripts. Can anyone answer that question for me? If it is relevant, I am running latest version of Raspbian.

Eventually, I want to log the values to a database and graph from it, but first things first. :)

Main question is how can I display the temperature on my webpage from the internal sensor?

EDIT

I will try the first suggestion later tonight when I get home, but I quickly got the second one (Lenik) going which seems to be working good. I had to make some edits though to get it to work. The script wouldn't create the rrd file so I manually created it by using the syntax he used in the script. I also modified the UPDATE command since it didn't like the value that was being passed to it. I had to remove the width portion from the GRAPH command because it threw an error as well. Then at the end, I added a cp so that it places the file in the images directory of the website and then added */5 * * * * /home/root/scripts/temprec.sh >/dev/null 2>&1 to my crontab so it runs every 5 minutes. It seems to be working, but with only 4 samples so far it is difficult to know for sure. Within an hour or so I'll have a better idea if my edits have worked.

#!/bin/bash
#
# update .rrd database with CPU temperature
#
# $Id: update_cputemp 275 2013-05-16 05:20:56Z lenik $
# Thanks to Lenik @ Raspberrypi.stackexchange.com.
cd /path/to/scripts
# read the temperature and convert .59234. into .59.234. (degrees celsius)
TEMPERATURE=`cat /sys/class/thermal/thermal_zone0/temp`
TEMPERATURE=`echo -n ${TEMPERATURE:0:2}; echo -n .; echo -n ${TEMPERATURE:2}`
/usr/bin/rrdtool update cputemp.rrd N:$TEMPERATURE
/usr/bin/rrdtool graph cputemp.png DEF:temp=cputemp.rrd:cputemp:AVERAGE LINE2:temp#00FF00
cp /path/to/scripts/cputemp.png /path/to/website/images

Answer 1

The $ sounds like you might be trying to use jQuery. If this is the case, you may want to download and install it as well.

Since you are on the Pi, I would also recommend trying to write your own web application using Tornado. It is written using Python (the Pi's favourite language), and I always find it very easy to create web applications using it.

Just install it using 'sudo apt-get install python-tornado'. I just wrote a minimalistic tornado web-app, that you could try out (I could not test it), by taking a function from some other forum post:

#!/usr/bin/env python

import tornado.ioloop
import tornado.web
import os

class MainHandler(tornado.web.RequestHandler):
    def getCPUtemperature( self ):
        res = os.popen('vcgencmd measure_temp').readline()
        return(res.replace("temp=","").replace("'C\n",""))

    def get(self):
        self.write( "Temperature: %s" % ( self.getCPUtemperature() ) )

application = tornado.web.Application([
    (r"/", MainHandler),
])

if __name__ == "__main__":
    application.listen(8888)
    tornado.ioloop.IOLoop.instance().start()

If you run this program (chmod +x yourprogram.py ; ./yourprogram.py), you should be able to point your browser to http://raspberrypi.local:8888/ and see the output.

Update: I just tried the above script at home, and it works. Not nice, but it is a start!

Answer 2

Some time ago I wrote an article "Raspberry Pi :: Monitoring CPU temperature with RRDTOOL" about the same problem. My solution includes receiving temperature from CPU, saving it into the round-robin database and building a nice graph as .PNG file, that is quite easy to put on the web page -- just copy it wherever you want. I hope you'll find it useful.

Answer 3

I believe you could grab and stream the data from your RPi and embed it in the browser with this package on GitHub.

Here's how a graph looks: https://plot.ly/~jensb89/12/.

Once you've generated your graph, you can embed it as an iframe with this snippet:

<iframe id="igraph" src="https://plot.ly/~abhishek.mitra.963/1/400/250/" width="400" height="250" seamless="seamless" scrolling="no"></iframe>

You'll want to swap in your URL in the code. Let me know if you have any issues or I can help with anything. Also, I'm part of Plotly, which was used in this package.

Here's how it looks:

Answer 4

The other answers here are fantastic. My solution, using a shell script and PHP is as follows:

Please note I did this on Raspbian Wheezy, so the location of all my code is in /var/www/. If you're using Jessie, it'll need to be in '/var/www/html/'

Firstly lets switch user to root (super user):

• sudo su (and enter your password)

get to the correct location:

• cd /var/www/ (Wheezy)

Now create a new directory there:

• mkdir scripts

Give it the correct attributes:

• chmod 755 scripts/

Now create a new file in it, lets call it 'temp.sh'

• nano scripts/temp.sh

Enter the following code:

#!/bin/bash

cpuTemp0=$(/opt/vc/bin/vcgencmd measure_temp)
cpuTemp0=${cpuTemp0//\'C/}
cpuTemp0=${cpuTemp0//temp=/}

echo CPU: $cpuTemp0 > /var/www/include/temp.txt

Ctrl+X - Y - Enter to save and exit.

Now set the attributes of that file:

• chmod 755 scripts/temp.sh

Now create a new directory

• mkdir include/

Set it's attributes

• chmod 744 include/

OK, now lets run the script and test it's output:

• cd scripts/
• ./temp.sh
• cd ../include/
• cat temp.txt

It should display something like this:

53.5

Awesome! Now, lets get that to run once a minute. We'll enter a new line in the Crontab.

• crontab -e

Paste the below line at the bottom of the file

* * * * * /var/www/scripts/temp.sh

Ctrl+X - Y - Enter to save and exit.

Now we need to edit the Page on which the temperatures will be displayed. So we go edit the PHP file:

• cd /var/www/
• nano index.php

And insert this in the <div> of your choice:

<?php require_once("include/temp.txt"); ?>&#176;C

That will do it. Just reload your page and you should see the CPU and GPU temps being displayed.

Added bonus: I also like to force the page to load each time (prevent the browser from caching the temperature) To do this, I also include the following PHP at the very beginning of the file:

<?php
    header("Cache-Control: no-cache, no-store, must-revalidate");
    header("Pragma: no-cache");
    header("Expires: 0");
?>

Notes: The reason this works for me is that it is displayed on a company "dashboard", A page up on a TV in my office that shows a whole bunch of graphs (server status, user numbers, load averages, etc, etc, etc). I've set up the pi to be in Kiosk Mode (full screen browser on boot using Iceweasel) and show a single page that auto-scrolls down to the bottom. It takes about 4 to 5 minutes to get there from the top and then reloads automatically once it hits the bottom. So it does reload once in a while, bypassing the need for me to update the temperature display using a client-side tech. I've also set it up to be viewed using different CSS/JS based on user agent (no scrolling, no current time in the corner, no reload at the bottom), but on that version, I've enabled a 5 minute reload so that the graphs will update and so will the temperatures.