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:

Install the library from Adafruit :

2.2 Tests

And paste the following :

Make it executable :

And run it :

Working !

3. Web UI

3.1 Required software

Install the required software :

3.2 Main file

Edit the file :

With this content :

Make it executable :

3.2 Template

Edit the template file :

With this content :

3.3 Static files

I use the files from justGage.com :

3.4 Run

Then we can run :

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

13 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

  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?

  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 🙂

Leave a Reply to Arjan Cancel reply

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