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

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

  1. 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. Thanks for the feedback. I’ve corrected the port to 80 and changed the wget URL.
      DHT22 is running from 3.3v to 6v.
      🙂

  2. 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?

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

      1. Hello Ryuka, can you teach me how you did that? I mean, where did you store the javascript code? In the html file?

  4. 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. You (your user) is not allowed to create a socket, right issue…
      Try as root (for debug purpose only).

  5. 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?

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

  6. 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?

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

  8. 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 –

Leave a Reply to alex Cancel reply

Your email address will not be published. Required fields are marked *