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.
wiring-picture

1. Hardware

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

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

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

2.2 Tests

> cd ~
> vi test.py

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

Make it executable :

> chmod +x test.py

1	> chmod +x test.py

And run it :

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

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

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

3.2 Main file

Edit the file :

> vim main.py

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

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

1	> chmod +x server.py

3.2 Template

Edit the template file :

> vi templates/main.html

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

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

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/

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 -

Then open a browser and go to X.X.X.X:80 (replace by the Pi IP) :
temperature-gage
humidity-gage

Facebook

Google+

Twitter

12 thoughts on “Web interface for Raspberry’s sensors (GPIO)”

mypapit says:

2016-08-16 at 05:58

Pin 4 isn’t connected, in fact there aren’t any Raspberry PI GPIO connected to the DHT22!

The fritzing diagram is inaccurate :v :v

just saying

1. Ronan says:
  
  2016-08-22 at 19:07
  
  Thanks ! It’s now corrected 🙂
  
Arjan says:

2017-03-08 at 10:28

thanks for your work

1/ i think there is a conenction error in your fritzing 🙂 (5v)
2/ justgauge wget http://justgage.com/download/justgage-1.2.2.zip
3/ in the code you use port 80 , and you mention 5000 🙂
4/ working fine though 🙂 (RPI3/DHT11)

1. Ronan says:
  
  2017-03-23 at 20:14
  
  Thanks for the feedback. I’ve corrected the port to 80 and changed the wget URL.
  DHT22 is running from 3.3v to 6v.
  🙂
  
Raash says:

2017-06-22 at 12:17

I keep getting error states that “jinja2.exceptions.TemplateNotFound
TemplateNotFound: main.html” whenever i tried to login to the given port.
I want to know at at point 3.2 Templates, where should I place the main.html?

Sree says:

2017-06-22 at 19:08

How to refresh the value for certain time? The gauge value stay the same until I refresh it. how to make it auto refresh

1. Ryuka says:
  
  2017-12-29 at 08:49
  
  instead of rendering a html template do this:
  save each value as a .txt
  read the .txt-files via javascript(ajax)
  srtinterval thr ajaxcall for refreshing
  display those values with gage
  
Miami says:

2017-06-28 at 20:35

Hi Ronan,
thanks for work!!!
How to work this code on Bottle framework? its similar?

alex says:

2017-08-23 at 09:00

Hi, Ronan. I an getting this these error. I try to solve but no answer now. Can you help?

Traceback (most recent call last):
File “/home/pi/Desktop/main.py”, line 19, in
app.run(host=’192.168.137.243′, port=80, debug=True)
File “/usr/local/lib/python2.7/dist-packages/flask/app.py”, line 841, in run
run_simple(host, port, self, **options)
File “/usr/local/lib/python2.7/dist-packages/werkzeug/serving.py”, line 720, in run_simple
s.bind((hostname, port))
File “/usr/lib/python2.7/socket.py”, line 224, in meth
return getattr(self._sock,name)(*args)
error: [Errno 13] Permission denied

1. Ronan says:
  
  2017-08-23 at 20:43
  
  You (your user) is not allowed to create a socket, right issue…
  Try as root (for debug purpose only).
  
Youssef says:

2017-08-29 at 19:59

Hello, i have a rpi 3 with a dht11 sensor and when i try to open the web page it says “TemplateNotFound”.How can i fix this?

nicole says:

2018-01-07 at 14:07

hi Ronan,

everything goes correctly for me the. when running the python
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 –

is same with yours.
but my HTML page nothing shows up?