Headlines
Sources :
Objective :
Display GPIO signal on Gage UI.
Technologies:
– GPIO
In this example, we’ll use a Raspberry Pi and a DHT22 temperature and humidity sensor to print values on a web interface.
1. Hardware
Wire the DHT22 following the diagram. Note the resistor is a 10kΩ.
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
- File name: main.py
> vim main.py
#!/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
- File name: main.py
Edit the template file :
> 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>
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) :
Synthesis
Data flow:
