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

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

Han Fei Ling says:

2018-06-06 at 02:22

Hi,
I tried the steps given. But when I run my HTML code, it display error as UncaughtSyntaxError : {

The error occurs at the justgage’s value where the value is to be passed from python script to html file.

Would appreciate if you can help to solve this issue. Thanks 🙂