Headlines

Sources :

Objective :

Display GPIO signal on Gage UI.

Technologies:

– GPIO

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

1. Hardware

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

2. Software

OS : Linux Raspbian Jessie Lite.

2.1 Installation

Install the required software:

> apt-get update

> sudo apt-get install build-essential python-dev git

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

> 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

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

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

2.2 Tests

> cd ~

> vi test.py

> cd ~ > vi test.py

> 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!'

#!/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!'

#!/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

> chmod +x test.py

And run it :

> sudo ./test.py

Temp=30.7*C Humidity=38.9%

> sudo ./test.py Temp=30.7*C Humidity=38.9%

> sudo ./test.py
Temp=30.7*C  Humidity=38.9%

Working !

3. Web UI

3.1 Required software

Install the required software :

> sudo apt-get install python-pip

> sudo pip install flask

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

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

3.2 Main file

File name: main.py

> vim main.py

> vim main.py

#!/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)

#!/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)

#!/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

> chmod +x server.py

3.2 Template

File name: main.py

Edit the template file :

> vi templates/main.html

> vi templates/main.html

With this content :

<!doctype html>

<html>

<head>

<title>Dynamic Resize</title>

<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>

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>

<!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>

<!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>

3.3 Static 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/

> 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/

>  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/

3.4 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 -

> 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 -

> 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) :

N@bil WebSite

Web interface for Raspberry’s sensors (GPIO)