Raspberry Pi – Python Flask

Python flask

The aim is to display content on the Waveshare touchscreen on the Raspberry Pi. For this the Python module Flask is used. With this it is possible to generate a webside with dynamic Python content and much more.

flask_touch


Setup
Create folders and download image.

$cd 
$mkdir app
$cd app
$mkdir templates
$mkdir static
$cd static
$wget https://nm-projects.de/wp-content/uploads/2015/12/logo.png
$cd ~/app

Create the python flask script file.

$nano test_flask.py

Content of test_”flask.py”.

#!/usr/bin/env python

from flask import Flask, render_template
import datetime
app = Flask(__name__)

@app.route("/")
def test():
   now = datetime.datetime.now()
   timeString = now.strftime("%Y%m%d%H%M%S")
   dynamicData = {
         'time': timeString
      }
   return render_template('index.html', **dynamicData)

if __name__ == "__main__":
   app.run(host='0.0.0.0', port=8080, debug=True)

Now edit the content of the html file.

$nano templates/index.html

Content of “index.html”.

<!DOCTYPE html>
   <head>
      <title>Test page by NM-Projects.de</title>
      <meta charset="utf-8">
      <style>
         h1 { color: grey; }
         .imgright { float:right; margin: 0px 0px 10px 10px; padding: 2px; height: 50px; }
      </style>
   </head>

   <body>
      <a href="https://nm-projects.de">
      <img class="imgright" src="{{ url_for('static',filename="logo.png")}}">
      </a>
      <h1>Test Page</h1>
      <p>{{ time }}: Side loaded</p>
   </body>
</html>

After that the folder/file structure should look like this.

$find . -name \* -print
.
./templates
./templates/index.html
./static
./static/logo.png
./test_flask.py

Allow execution of the python script.

$ chmod +x test_flask.py

Execute the python script.

$ ./test_flask.py
 * Running on http://0.0.0.0:8080/
 * Restarting with reloader

To automatically start the script and the browser on the start-up of the Raspberry Pi edit the following file.

$ sudo nano /home/pi/.config/lxsession/LXDE/autostart

Append autostart by the following lines.

@xscreensaver -no-splash

@xset s off
@xset -dpms
@xset s noblank

@/home/pi/app/test_flaks.py

@iceweasel http://0.0.0.0:8080
@unclutter -grab -visible

Result 

This image shows the result on the touchscreen.

flask_touch

Furthermore it is possible to reach the content from any other device like PCs, Smartphones and Tablets. By simply

page_chrome

In the terminal it is possible to see connections, requests and more.

10.0.0.101 - - [06/Jan/2016 21:40:51] "GET / HTTP/1.1" 200 -

Leave a Reply

Your email address will not be published. Required fields are marked *

*

19 − 2 =