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

Install the library from Adafruit :

> 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

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 !

3. Web UI

3.1 Required software

Install the required software :

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

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

3.2 Template

Edit the template file :

> vi templates/main.html

With this content :





    Dynamic Resize

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/

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 -

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

20 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

Reply
1. Ronan says:
  
  2016-08-22 at 19:07
  
  Thanks ! It’s now corrected 🙂
  
  Reply
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)

Reply
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.
  🙂
  
  Reply
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?

Reply
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

Reply
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
  
  Reply
  1. Fabian Baischer says:
    
    2019-04-25 at 16:49
    
    Hello Ryuka, can you teach me how you did that? I mean, where did you store the javascript code? In the html file?
    
    Reply
Miami says:

2017-06-28 at 20:35

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

Reply
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

Reply
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).
  
  Reply
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?

Reply
1. Leon Horka says:
  
  2019-11-25 at 21:18
  
  I know it’s late so perhaps this is for future visitors but in your main.py file you need to change: app = Flask(__name__)
  
  To:
  app = Flask(__name__, template_folder=’../templates’)
  
  And move the main.html file to the “Templates” folder (which is located at /home/pi/Templates). Because your program is incomplete and isn’t finding this file.
  
  This is how I fixed it.
  
  Reply
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?

Reply
1. Andrew says:
  
  2019-07-18 at 15:21
  
  Heeey
  Did you solve it?
  
  Reply
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 🙂

Reply
Lee SungJin says:

2019-02-25 at 13:41

Hi,
I have an error.
Tell me how please

esungjin@gmail.com

192.168.77.2 – – [25/Feb/2019 21:37:18] “GET / HTTP/1.1” 200 –
192.168.77.2 – – [25/Feb/2019 21:37:18] “GET /static/raphael-2.1.4.min.js HTTP/1.1” 404 –
192.168.77.2 – – [25/Feb/2019 21:37:18] “GET /static/justgage.js HTTP/1.1” 404 –

Reply
1. Iuli says:
  
  2019-07-18 at 15:10
  
  Hi,did you solve this problem
  I have the same problem
  
  Reply
Sarah says:

2020-08-04 at 10:12

the template section for editing is missing

Reply
Use this says:

2020-09-27 at 21:18

https://ukmesh.org/2020/01/26/raspberry-pi-dht22-temp-sensor-and-web-server/

Reply