The study material for Experiment No.

9
Raspberry Pi Web Server using Flask to Control GPIOs

https://randomnerdtutorials.com/raspberry-pi-web-server-using-flask-to-control-gpios/

Section-1: Led Blinking without any web servers

To control the RPi GPIO using basic Python Programming ExampleLed Blinking
without any web servers.

Note: students are requested to change the interfacing as per programming

1
Procedure/Steps to follow for programming in nano or python editor
1. First: need to go to this(documents) directory on the Raspberry Pi do this by
writing/type this in the Terminal.

2. Then, need to make a new folder called ledBlinking to organize our Work (best
Practice) we do this in the documents directory by writing:

3. Then we need to go to the folder which we made (ledBlinking):

4. Then we need to make/write the Python Script using nano editor which willdo the
work.

5. The nano editor will open empty like this:

2
 6. Then we need to write the Code To Control The GPIO26 we need to make the led
turn on for 1 second and turn off for 1 second

Explanation about the LED blinking code

• First Line: import the time library to allow to use the (sleep function) to make a
delay between each order

• Second Line: import the RPi.GPIO to initialize and allow us to control theGPIO in
the RPi as (inputs or outputs). we give it a simple name (GPIO) forfurther uses.

• There are two main modes to numbering the GPIO:

7. GPIO.BCM
8. GPIO.BOARD

3
 The GPIO.BOARD option specifies that you are referring to the pins by thenumber
of the pin the plug - which in the Outside of the diagrams. (Pin), Example: pin
number (1, 2, 3, 4, ............................... , 40)

The GPIO.BCM option means that you are referring to the pins by the "Broadcom
SOC channel" number, these are the numbers after "GPIO" in the (NAME)
Coloumn
Example: (GPIO02, GPIO03, GPIO04,....), we take only the number afterThe
"GPIO" Word.

• We make a variable called (led) to store the GPIO number which we connectthe led
on it, in our case we connect the led on GPIO26. (pin 37)

• In first line: we set the direction of pin number (GPIO26) to output, it tells the RPi
to make this pin an OUTPUT Pin that we will write a value on it (HIGH or LOW).

In Second Line: we tell the RPi to Write a Logical value (LOW) which means (0
VOLT) to the (GPIO26) which means that this led on the beginning of the program
will be turned OFF.

4
• Here we are making an infinite loop, that means the block of code in this while loop will
be executed until we force stop the whole program.

• NOTE: The spaces in the block of code is very important without this spaces the script
will not work, to make this space press (tab) button on every lineof code under the
while Loop, this means that these line belongs to the while loop to write another block
doesn’t belong to the while loop, easily remove this spaces, its python
programming language rules.

In this block of code we tell the led to turn on (3.3 VOLT), then print on thescreen
"the led is turning ON" then delay 1 sec. then turn the led off, then print on the
screen "the led in turning OFF", then delay 1 sec.

After we finish writing the code correctly we need to close the nano editor, then
run the python script:

– Press CTNRL +x
– The editor will ask you if you want to save the changes press y
– Then press enter

Then run the python script by writting

5
• After running the program you will see that messages printing on the screen:

• This block of code will repeat over and over (infinite), only to stop this programwe need
to press:
CNTRL + c

6
 Section 2: Control Led from a Push Button
To control the RPi GPIO using basic Python Programming control Ledfrom a Push
Button without any web servers.

Note: students are requested to change the interfacing as per the programming

We will work on the same directory on the same ledBlinking.py script, to make this example we
need to write different code, we need take an input from a switch, and according to this input we
will take an action (turn led ON or OFF), it’s a verybasic and easy example how to deal with
input and outputs together.

7
Procedure/Steps: Programming in python for led and switch
1. In the previous code we will find small changes

2. Here we define a new variable it’s name (button) has a value 19, 19 is the GPIO
number, we connecting the push button in the GPIO19.

3. Here we set the button as INPUT because we want to know if someone presson the
button or not, if the button is pressed we will take an input (1 or HIGH) if the button is
not pressed we will take an input(0 or LOW) according to this input we can take an
action (turn led ON or OFF).

4. First line: Make a new variable called (buttonread) to store the button read- ing value
(pressed(1), not pressed(0)) if the button is pressed the button read Value Will be (1),
if button is not pressed the button read Value will be (0).
5. Second line: To print the value of the button read on the screen.
6. Third line: we will take the action according to the button Read Value, if the button
is pressed the led will turn ON, if button is not pressed the led will turn OFF.

8
 Section 3: Creating Web Server
RPi as a web server Using Flask and Python

First we need to install Flask On our Raspberry Pi.

Objectives: To install the lightweight web framework Flask and set up a basic
web server with different pages using Python, HTML, and CSS.

Learning after completing this section

• How to install software on your Raspberry Pi
• How to Make a Python-powered web server
• How to build a basic web app with Flask and run it as a local website on your
Raspberry Pi
• How routes are used to map URLs to web pages
• How to configure Flask and make your website accessible to other devices on your
local network

Procedure/Steps: for creating web server using Flask in raspberry pi

• Start by opening a Terminal window from the taskbar or applications menu:

• To install the Flask package. Make sure you are connected to the internet, either by
Ethernet cable or WiFi before you start.

9
• Now install Flask by typing:

• Wait until finishes the updating, then type:

• After finishing downloading and installing flask framework, now we are able start the
hard work.

• What we want to do ?

• We need to make the web page that we built, accessible to anyone has internet, anyone
can access this web page from anywhere in the world. To do this we need to make
a new folder inside the
/home/pi/Documents directory called (myFirstApp)

• Then we need to go the myFirstApp folder and make a new two sub-folders (
templates) and (static):

10
• The final folder "tree", will look like:

• Inside /home/pi/Documents/myFirstApp we need to make an app.py fileusing nano

editor:

• Now enter the following lines into the blank app.py window:

• First import the Flask class, Next create an instance of this class. Then use the
route()decorator to tell Flask what URL should trigger our function(index( )), The
function is given a name(index) which is also used to generate URLsfor that particular
function, and returns the message we want to display in the user’s browser..

• NOTE: Note here the host=’0.0.0.0’ means the web app will be accessible to
any device on the network.

• Just save it as app.py or something similar. Make sure to not call your appli-cation
11
 flask.py because this would conflict with Flask itself.

• Return to the Terminal window and enter python3 app.py to run the web server, If
everything has been written correctly, you should see an output similar to this:

• Open the Pi’s web browser from the taskbar or application menu and navigate to
http://127.0.0.1:5000/. You should see a white screen with the words Hello world:

• Note: 127.0.0.1means ‘home’ i.e. this computer, and:5000means ‘port 5000’, which is
the port the web server is running on
• How to route app: This route is made up of three parts:

– @app.route(’/’): this determines the entry point; the / means the root of the
website, so just http://127.0.0.1:5000/.
– def index(): this is the name we give to the route. Here it was called index
because it’s the index of the website.
– return ’Hello world’: this is the content of the web page, which is returned when
the user browses the index of the website.
• Create a new route by adding the following lines below the first route:

12
• Save your code and navigate to your website’s cake page in the browser at
127.0.0.1:5000/cakes. You should see a webpage with the text Yummy cakes! on
it:

• Next, we will modify your existing routes to return full HTML templates, rather
than simple text strings.

• Now we will go to the folder we created before (templates) at this directory

• And create a new HTML file by typing:

• This will open the empty nano editor, we will enter our HTML code:

• Save the file as index.html in the templates directory. Return to your app.pyfile and
modify the first line of your code to import the render_template function as well:

• Finally, you’ll need to modify your index view to return the HTML templateinstead
of the normal text. Change the index() function to this:

13
 – Flask will look for index.html in a directory called templates, in the same
directory as the app.py file.
– Save the file. Make sure your web app is still running. If you stopped it,just run
python3 app.py from your myFirstApp directory.
– Reload the route in your web browser
(go to the base route at http://127.0.0.1:5000/) to see your new HTMLtemplate
being displayed.

• Adding colour to the web page with CSS

Cascading Style Sheets (CSS) are rules for how HTML content is displayed by the
browser. Now you’ll add some CSS to add colour to your web page.

If you’re in the templates directory, go back up one level with cd ... nowu should
be at /home/pi/Documents/myFirstApp directory. Go to thestatic folder which we
made before by typing:

• Then make a new file called style.css using the nano editor by typing:

• Add the following CSS rules to the file:

• Note: here we’ve used colour names: usually colours are defined by hex codes like
ff0000 (red) but this is a simple example.
Then exit and save this CSS file.
Now modify your HTML template called index.html to include the CSS file, by
14
 adding a <head> tag containing a <link> tag with a reference to the stylesheet:

• Save the HTML file and reload the web server. You should see a colour ful l
version of the web app!

• We have so far created a number of files and directories. It is worth just double-
checking your myFirstApp project directory.

• Adding dynamic content to a view

So far you’ve learned to deliver HTML templates through a web server running on your
Raspberry Pi. Wouldn’t it be good if you could add some dynamic content to the
pages to display different information? Large websites like Facebook, YouTube, and
BBC News show different content depending on the route you visit, even though the
templates are very similar.

Now you’ll create a new route on your website so that when you go to

15
 http://127.0.0.1/hello/name, it will say “Hello name!” and replace ‘name’ with
whatever you put there; so /hello/Paul/ will display “Hello Paul!”.

Create a new route in your application like so:

• @app.route(’/hello/<name>’) - the <name> part means it passes

• the name into the hello function as a variable called name def hello(name) - this is the
function that determines what content is shown - this time it takesthe given name as
a parameter

• return render_template(’index.html’, name=name) - here we look up the tem- plate

index.html and pass in the variable name from the URL, so the template can use it
We will modify our index.html file to be like this:

• Save the files, reload the web server and visit

http://127.0.0.1:5000/hello/paul. It should look like this:

Try It With Different names.

• Browsing on other devices

To browse this web page you need to know what is the IP address of the RPi.

• Note: For checking IP address of Raspberry pi, kindly type ifconfig on terminal
window

16
It’s something like 192.168.1.3. Open up a web browser on the other device and
enter the Raspberry Pi’s IP address into the address bar with :5000 on the end e.g.
http://192.168.1.3:5000/:

At this point you now know to use Flask and how to turn your RPi as alocal
Web Server, and how to render different contents using render_template function, it’s
a great job, let’s dive into our last part and the most importantpart.

17
Section-4: To control RPi GPIO over the internet
• Browsing on other devices
To browse this web page you need to know what is the IP address of the RPi.

Note: For checking IP address of Raspberry pi, kindly type ifconfig on terminal
window

We want to control the 3 of the RPi GPIO pins over the internet, by making this 3
pins as an outputs, when the user press on any button from the six buttons it changes
the URL we will read the URL and according to it we willtake the Action

Note: students are requested to change the interfacing as per programming

• The Web Page from PC

18
• The Python Script:

19
• HTML Script index.html

• The CSS Code: style.css

20