EBC Exercise 32 gpio via flask

From eLinux.org
Revision as of 09:51, 16 September 2020 by Yoder (talk | contribs) (Adding Hardware)
Jump to: navigation, search

thumb‎ Embedded Linux Class by Mark A. Yoder

Intro. Much of this is from https://towardsdatascience.com/python-webserver-with-flask-and-raspberry-pi-398423cc6f5d.

Installing Flask

Flask should already be installed on the Bone. But if not:

bone$ sudo apt update
bone$ sudo apt install python3-flask

All the examples are in the class repo

bone$ git clone https://github.com/MarkAYoder/BeagleBoard-exercises.git examples
bone$ cd examples/flash/server

First Flask - hello, world

Our first example is helloWorld.py

#!/usr/bin/env python3
# From: https://towardsdatascience.com/python-webserver-with-flask-and-raspberry-pi-398423cc6f5d

from flask import Flask
app = Flask(__name__)
def index():
    return 'hello, world'
if __name__ == '__main__':
    app.run(debug=True, port=8081, host='')

The first line loads the Flask module into your Python script. The second line creates a Flask object called app. The third line is where the action is, it says to run the index() function when someone accesses the root URL (‘/’) of the server. In this case, only send the text “hello, world” to the client’s web browser via return.

The last line says to “listen” on port 8081, reporting any errors.

Now on your host computer, browse to an you should see.


Adding a template

Let’s improve our “hello, world” application, creating an HTML template and a CSS file for styling our page.


Create an HTML file that will be located in the “template” sub-folder, we can use separate files with placeholders for spots where you want dynamic data to be inserted. So, we will create a file named index1.html, that will be saved on /templates.

OK, let’s create templates/index1.html:


(Sorry about using an image here, it kept formatting the HTML tags. Go to the git repo to get the code.)

Note: a style sheet (style.css) is also included. This will be populated later.

Observe that anything in double curly braces within the HTML template is interpreted as a variable that would be passed to it from the Python script via the render_template function. Now, let’s create a new Python script. We will name it app1.py:

# Code created by Matt Richardson 
# for details, visit:  http://mattrichardson.com/Raspberry-Pi-Flask/inde...
from flask import Flask, render_template
import datetime
app = Flask(__name__)
def hello():
   now = datetime.datetime.now()
   timeString = now.strftime("%Y-%m-%d %H:%M")
   templateData = {
      'title' : 'HELLO!',
      'time': timeString
   return render_template('index1.html', **templateData)
if __name__ == "__main__":
   app.run(host='', port=80, debug=True)

Note that we create a formatted string("timeString") using the date and time from the "now" object, that has the current time stored on it.

Next important thing on the above code, is that we created a dictionary of variables (a set of keys, such as the title that is associated with values, such as HELLO!) to pass into the template. On “return”, we will return the index.html template to the web browser using the variables in the templateData dictionary.

Execute the Python script:

bone$ .\app1.py

Open any web browser and browse to You should see:


Note that the page’s content changes dynamically any time that you refresh it with the actual variable data passed by Python script. In our case, “title” is a fixed value, but “time” change it every second.

Adding Hardware

Let's wire a button to P9_11 and have the web page display the value of the button.


thumb‎ Embedded Linux Class by Mark A. Yoder