Assume you have already installed PHP, Apache and flask on your Raspberry Pi 4B (if not, go to lesson 2 & 3 first)
In this lesson, you are going to build a device to detect if the circuit is broken. The results is displayed on web browser.
Step (1): Build electronic circuit
Step (2): Create a folder so called "localhost_brokencircuit" in the directory /home/pi/Documents/localhost_broken circuit
Step (3): Create two sub-folders (static, templates) inside the folder (localhost_brokencircuit)
Step (4): Use "Geany" to create a index.html in the folder (templates). The browser will be refreshed automatically due to <meta http-equiv="refresh" content="1">. "1" means 1 second
Step (5): Use "Geany" to create a style.css in the folder "static"
Step (6): Use "Thonny" to create app.py inside the folder (localhost_brokencircuit)
In this lesson, you are going to build a device to detect if the circuit is broken. The results is displayed on web browser.
Step (1): Build electronic circuit
Step (3): Create two sub-folders (static, templates) inside the folder (localhost_brokencircuit)
Step (4): Use "Geany" to create a index.html in the folder (templates). The browser will be refreshed automatically due to <meta http-equiv="refresh" content="1">. "1" means 1 second
<!DOCTYPE html>
<head>
<meta http-equiv="refresh" content="1">
<title>{{ title }}</title>
<link rel="stylesheet" href='../static/style.css'/>
</head>
<body>
<h1>{{ title }}</h1>
<h2>Testing: {{ sen }}</h2>
</body>
</html>Step (5): Use "Geany" to create a style.css in the folder "static"
body
{
background: blue;
color: yellow;
}
.button
{
font: bold 60 Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
Step (6): Use "Thonny" to create app.py inside the folder (localhost_brokencircuit)
import RPi.GPIO as GPIO
from flask import Flask, render_template
app = Flask(__name__)
GPIO.setmode(GPIO.BCM)
GPIO.setwarnings(False)
sen = 16
senSts = GPIO.LOW
# Set sensor pins as an input
GPIO.setup(sen, GPIO.IN)
@app.route("/")
def index():
# Read Sensors Status
senSts = GPIO.input(sen)
templateData = {
'title' : 'Detect if the circuit is broken!',
'sen' : senSts
}
return render_template('index.html', **templateData)
if __name__ == "__main__":
app.run(host='0.0.0.0', port=83, debug=True)
Step (7): Run python3 app.py in the specified directory. Go to http://0.0.0.0:83. Try unplugging the resistor and then you will see testing ="1" on the browser. Plugging the resistor will drop the value to "0" again
*The above code are modified from open source platform
Comments
Post a Comment