Featured image of post Web interface for Raspberry’s sensors (GPIO)

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.


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

DHT22 wiring
DHT22 wiring


OS : Linux Raspbian Jessie Lite.


Install the required software:

apt-get update
sudo apt-get install build-essential python-dev git
Install the library from Adafruit :
git clone
cd Adafruit_Python_DHT/
sudo python install


cd ~
And paste the following :
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)
	print 'Failed to get reading. Try again!'
Make it executable :
chmod +x
And run it :
sudo ./
Temp=30.7*C  Humidity=38.9%
Working !

Web UI


Install the required software :

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


Edit the file :

With this content :
from flask import Flask, render_template
import Adafruit_DHT
app = Flask(__name__)
sensor = Adafruit_DHT.DHT22
pin = 4

def main():
   humidity, temperature = Adafruit_DHT.read_retry(sensor, pin)
   templateData = {
      'temperature' : temperature,
      'humidity': humidity
   return render_template('main.html', **templateData)

if __name__ == "__main__":'', port=80, debug=True)
Make it executable :
chmod +x


Edit the template file :

vi templates/main.html
With this content :
<!doctype html>

    <title>Dynamic Resize</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    body {
        text-align: center;
        padding: 0px;
        margin: 0px;
    .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%;
    <div class="wrapper clear">
        <div id="g1" class="gauge"></div>
        <div id="g2" class="gauge"></div>
    <script src="{{ url_for('static', filename='raphael-2.1.4.min.js') }}"></script>
        <script src="{{ url_for('static', filename='justgage.js') }}"></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",


I use the files from :

mkdir static
cp justgage-1.2.2/*.js static/


Then we can run :

sudo ./
 * Running on (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger pin code: 867-781-657 - - [20/Mar/2016 10:47:04] "GET / HTTP/1.1" 200 - - - [20/Mar/2016 10:47:04] "GET /static/raphael-2.1.4.min.js HTTP/1.1" 200 - - - [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
Temperature gage
Humidity gage
Humidity gage

Licensed under CC BY-NC-SA 4.0
comments powered by Disqus
Built with Hugo
Theme Stack designed by Jimmy