This post shows how I built a Temperature and Humidity sensor web site using a Rasberry Pi and a DHT22 Sensor. 

The Sensor is attached to the Raspberry Pi with the only other component being a 10k resistor. 

Wire the DHT22 Sensor following the Digram Below.

Now we need to install the software on the Raspberry Pi.

EVERTHING YOU NEED TO TYPE IS SHOWN AS A BULLET POINT.

This is not going to be a tutorial on how to set up a Raspberry Pi, and the assumption is you already have a working raspberrypi and have SSH access or terminal window from the Rpi Desktop.

First lets install the required python files.

  • apt-get update
  • sudo apt-get install build-essential python-dev git

Next, the Sensor Libraries

  • git clone https://github.com/adafruit/Adafruit_Python_DHT.git
  • cd Adafruit_Python_DHT/
  • sudo python setup.py install

Ok, nows lets do a test to make sure we are communicating with the sensor correctly.

To do this we create a small test Python Script and run it…

Lets go to the home directory

  • cd ~

Now using your favourite editor (i use nano)

  • sudo nano test.py

Paste the following into the new file

  • #!/usr/bin/python
  • import Adafruit_DHT
  •  
  • # Adafruit_DHT.DHT11, Adafruit_DHT.DHT22 or Adafruit_DHT.AM2302.
  • sensor = Adafruit_DHT.DHT22
  • pin = 4
  • humidity, temperature = Adafruit_DHT.read_retry(sensor, pin)
  •  
  • if humidity is not None and temperature is not None:
  • print ‘Temp={0:0.1f}*C  Humidity={1:0.1f}%’.format(temperature, humidity)
  • else:
  • print ‘Failed to get reading. Try again!’
 
 Should look something like this when you are done.

 

(to exit press Ctrl X, then press Y to save and exit)

Next we need to edit the permissions of the new file so that we are able to run it. 

  • chmod +x test.py

 

And now with the DHT22 connected, let run the test

  • sudo ./test.py

 

After a few seconds, you should get a response with the current Temp and Humidity.

 

Excellent, so now we have a working sensor that we can communicate with using Python.

If you got an error, then please check your wiring, coding of the above and try rebooting the Raspberry Pi. 

There is no point continuing until the above is working as you will not get any data otherwise. 


PART 2.  Web Server

So now we need to install some software in order to run a small web application and display the readings from the sensor into a browser, not just via an SSH terminal window.

First lets install Python PIP, this will allow us to install Python packages with a single command line.

So type

  • sudo apt-get install python-pip
  • sudo pip install flask

 

Now we need to create the web application we are going to run.

Again, using nano to create a blank file called main.py

  • sudo nano main.py

 

Now paste in the following code.

 

  • #!/usr/bin/python
  • from flask import Flask, render_template
  • import Adafruit_DHT
  • app = Flask(__name__)
  • sensor = Adafruit_DHT.DHT22
  • pin = 4
  •  
  • @app.route(“/”)
  • def main():
  •    humidity, temperature = Adafruit_DHT.read_retry(sensor, pin)
  •    templateData = {
  •       ‘temperature’ : temperature,
  •       ‘humidity’: humidity
  •    }
  •    return render_template(‘main.html’, **templateData)
  •  
  • if __name__ == “__main__”:
  •    app.run(host=’0.0.0.0′, port=80, debug=True)

 

You should have something like this. 

 

 

VARIATION TIP: If you want to run this on something other than port 80, maybe because you are already running a webserver on the RPi then simply amend the last line to change the port to something else such as 8080.

Again lets make this file executable as its new.

  • chmod +x main.py

 

Next we need to create our webpage template. This file will be stored in a folder called templates. so lets create this first.

  • mkdir templates

 

Now create and edit the new main.html file

  • nano main.html

 

Paste the following into the file and then Ctrl-X, Y to exit and save.

  • <!doctype html>
  • <html>
  •  
  • <head>
  •     <title>Dynamic Resize</title>
  •     <meta httpequiv=“Content-Type” content=“text/html; charset=UTF-8” />
  •     <style>
  •     body {
  •         text-align: center;
  •         padding: 0px;
  •         margin: 0px;
  •     }
  •     .clear:before,
  •     .clear:after {
  •         content: “”;
  •         display: table;
  •     }
  •     .clear:after {
  •         clear: both;
  •     }
  •     .clear {
  •         *zoom: 1;
  •     }
  •     .wrapper {
  •         position: absolute;
  •         top: 0;
  •         right: 0;
  •         bottom: 0;
  •         left: 0;
  •         margin: 30px;
  •         border: 1px solid #cccccc;
  •     }
  •     .gauge {
  •         display: block;
  •         float: left;
  •     }
  •     #g1 {
  •         width: 50%;
  •     }
  •     #g2 {
  •         width: 50%;
  •     }
  •     </style>
  • </head>
  • <body>
  •     <div class=“wrapper clear”>
  •         <div id=“g1” class=“gauge”></div>
  •         <div id=“g2” class=“gauge”></div>
  •     </div>
  •     <script src=“{{ url_for(‘static’, filename=’raphael-2.1.4.min.js’) }}”></script>
  •         <script src=“{{ url_for(‘static’, filename=’justgage.js’) }}”></script>
  •     <script>
  •     document.addEventListener(“DOMContentLoaded”, function(event) {
  •         var g1, g2, g3;
  •  
  •         var g1 = new JustGage({
  •             id: “g1”,
  •             value: {{temperature}},
  •             min: 0,
  •             max: 50,
  •             title: “Temperature”,
  •         });
  •  
  •         var g2 = new JustGage({
  •             id: “g2”,
  •             value: {{humidity}},
  •             min: 0,
  •             max: 100,
  •             title: “Humidity”,
  •         });
  •     });
  •     </script>
  • </body>
  • </html>

 


We need some template files for the gauges, these can be downloaded from the internet and copied into a new folder called static.

  • wget http://justgage.com/download/justgage1.2.2.zip
  • unzip justgage1.2.2.zip
  • mkdir static
  • cp justgage1.2.2/*.js static/

 

Thats it!!

We now have all the files we need and are ready to run our webserver application.

  • sudo ./main.py

 

You should see the following output (port will be what ever you set it to)

 

Now to view the webpage, just open your browser and enter the IP address or Hostname of your Raspberry pi. Dont forget the port if you used anything other than port 80!

 

So in my case it would be:

http://192.168.1.152:80

 

I added a little more information into my main.html so there is a title. but you can edit the HTML as much as you like to build your own page.

Hope this helps people and prompts another project on the Raspberry Pi.

Andrew

M0ONH