Back
Featured image of post Web interface for Raspberry’s sensors (GPIO)

Web interface for Raspberry’s sensors (GPIO)

In this example, we'll use a Raspberry Pi and a DHT22 temperature and humidity sensor to print values on a web interface.

Hardware

Wire the DHT22 following the diagram. Note the resistor is a 10kΩ.

DHT22 wiring
DHT22 wiring

Software

OS : Linux Raspbian Jessie Lite.

Installation

Install the required software:

apt-get update
sudo apt-get install build-essential python-dev git
Install the library from Adafruit :
git clone https://github.com/adafruit/Adafruit_Python_DHT.git
cd Adafruit_Python_DHT/
sudo python setup.py install

Tests

cd ~
vi test.py
And paste the following :
#!/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!'
Make it executable :
chmod +x test.py
And run it :
sudo ./test.py
Temp=30.7*C  Humidity=38.9%
Working !

Web UI

software

Install the required software :

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

file

Edit the file :

vim main.py
With this content :
#!/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)
Make it executable :
chmod +x server.py

Template

Edit the template file :

vi templates/main.html
With this content :
<!doctype html>
<html>

<head>
    <title>Dynamic Resize</title>
    <meta http-equiv="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>

files

I use the files from justGage.com :

wget http://justgage.com/download/justgage-1.2.2.zip
unzip justgage-1.2.2.zip
mkdir static
cp justgage-1.2.2/*.js static/

Run

Then we can run :

sudo ./main.py
 * Running on http://0.0.0.0:80/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger pin code: 867-781-657
192.168.137.1 - - [20/Mar/2016 10:47:04] "GET / HTTP/1.1" 200 -
192.168.137.1 - - [20/Mar/2016 10:47:04] "GET /static/raphael-2.1.4.min.js HTTP/1.1" 200 -
192.168.137.1 - - [20/Mar/2016 10:47:04] "GET /static/justgage.js HTTP/1.1" 200 -
Then open a browser and go to X.X.X.X:80 (replace by the Pi IP) :
Temperature gage
Temperature gage
Humidity gage
Humidity gage

Licensed under CC BY-NC-SA 4.0
Built with Hugo
Theme Stack designed by Jimmy