During this project which is a sequel to the introduction to how to make a web server. Are you going to make a web server with which you can switch an LED light on and off.
This is a beginner/intermediate project where you take the knowledge from the introduction and expand it even further. We do this by sending a signal to the GPIO pins by means of a web server to turn a light on or off. The GPIO pins on the Raspberry Pi are the steering pins. There are 26 GPIO pins, 8 ground pins, 2 3,3V pins, 2 5V pins and 2 ID EEPROM pins.
For this project we again use the Raspbian software.
- Level - beginner 40%
- Duration - 20/25 Min 30%
- Costs - € 70.93 euros complete 50%
Step 1: Requirements
1X Raspberry Pi
1X HDMI cable
1X Monitor
1X Keyboard
1X Mouse
1X 16GB micro SDHC raspbian
1X Raspberry Pi power adapter
2X M / F jumer wire
Step 2: Building and Wiring
Now that you have collected everything you can wire it.
First you put the LED light in the breadboard so you still know what the plus and what the minus is, the long pin is the plus and the short the minus. The moment you accidentally switch this, for example, your LED lamp can break.
Then you go from the plus with a 220 ohm resistor to the plus of the breadboard† The reason you put a resistor before or after the light is to limit the amount of current flowing through it. This in turn ensures that your LED light cannot suddenly break. From the plus on the breadboard go to the GPIO 2 pin that is on the bottom row the second from the left and last you go from one of the ground pins to the minus of your LED light. The ground pin I'm using here is on the top row and is third from the right.
You now also need to connect the monitor, mouse, keyboard and power supply. You connect the display via the HDMI connection with an HDMI cable. The mouse and keyboard are connected via the USB connection and the power supply via the micro USB connection.
Step 3: Programming
Now that you have everything connected you can start programming your Raspberry Pi.
We do the programming in the via Thonny Python IDE and in the Text Editor. The first code below is the code that should be in the Thonny Python IDE. This code ensures that your web server switches on and that if a signal is sent via the server, it switches on the GPIO pin.
The second code is your HTML file which ensures that we can send a signal to the Raspberry via the web server. The moment you know how this works you could even put multiple buttons on your server.
Also for this project you have to put the py and the html file in the same folder, otherwise the server will not work.
You need to put the code below in the Thonny Python IDE.
from flask import Flask, send_file
import RPi.GPIO as GPIO
#Here you define the GPIO pins
GPIO.setmod (GPIO.BCM)
led = 2
GPIO.setup (led, GPIO.OUT)
app = Flask ('light')
@ app.route ('/')
def index ():
return send_file ('light.html')
@ app.route ('/ images /
def get_image (filename):
return send_file ('images /' + filename)
# when the server gives the turnOn signal, the light turns on
@ app.route ('/ turnOn')
def turnOn ():
GPIO.output (LED, GPIO.HIGH)
return 'turnedOn'
# when the server gives the turnOff signal the light goes out
@ app.route ('/ turnOff')
def turnOff ():
GPIO.output (led, GPIO.LOW)
return 'turnedOff'
app.run (debug = true, port = 3000, host = '0.0.0.0 ′)
The code below is the html code you have to write in Text Editor and then name light.html and put it in the same folder as your py file.
Internet light
.head {
width: 50%;
margin: 0 car;
text-align: center;
}
.content {
width: 50%;
margin: 10% car;
text-align: center;
font-size: 30px;
}
.button {
margin: 20px;
width: 200px;
height: 100px;
border: solid 5px;
border-radius: 30px;
line-height: 60px;
font-size: 25px;
text-align: center;
}
#output {
text-align: center;
font-size: 20px;
color: #AAA;
}
var button;
varoutput;
var on = true;
window.onload = function () {
button = document.getElementById ('button');
output = document.getElementById ('output');
button.style.backgroundColor = '# CFD0D0';
button.style.borderColor = '# F1F1F1';
output.innerHTML = '';
}
var send = function () {
var xhr = new XMLHttpRequest ();
output.innerHTML = 'Wait…';
if (on === true) {
xhr.open ('GET', 'turnOn', true);
Else {}
xhr.open ('GET', 'turnOff', true);
}
xhr.onreadystatechange = function () {
console.log (xhr.readystate, xhr.response);
if (xhr.readystate === 4) {
if (xhr.response === ”) {
output.innerHTML = 'No connection';
Else {}
output.innerHTML = '';
if (on === true) {
button.innerHTML = 'Turn off';
button.style.backgroundColor = '# FF0';
button.style.borderColor = '# CC0';
Else {}
button.innerHTML = 'Turn on';
button.style.backgroundColor = '# CFD0D0';
button.style.borderColor = '# F1F1F1';
}
on =! on;
}
}
}
xhr.send ();
}
light
</div>
Turn on
loading ...
</div>