Installing / Using Flask or Raspberry Pi IoT Project: Temperature Part 4 (Raspberry Pi / Python)

Flask running and updating data

Now that the temperature sensor is taking readings and tweeting them I want to look at exporting the results another way, and what better way than a web page. I have created guides on using a Raspberry Pi as various different types of web server; see:

So today I am going to look at a different web framework, Flask. Flask is a web framework built on Python, it’s official website can be found at: http://flask.pocoo.org

Flask can be installed via pip using the line:

pip install Flask

Flask running and updating data
Flask running and updating data

Flask uses Python (.py) files to update web pages (which can be created via HTML and CSS). Originally I got Flask to just send a string of text saying the variables, however this doesn’t make a great webpage. Next I tried using the render_template module of Flask and after a few moments of HTML editing had something a little better. To run the Flask web server takes a brief command;

FLASK_APP=sensor_flask.py flask run

However, to make the page available to all machines on my home network I cancelled this command (CTRL Z) after running it and then used the command:

flask run –host=0.0.0.0

Which tells flask to run on the local IP address and listen for external connections. For me this meant I could type in my Pis IP address with port 5000 on the end (http://192.168.0.28:5000) on other devices to load the page.

Site loading on a different device
Site loading on a different device
flask_first_template_geektechstuff
Flask with a basic template

My whole project lives within a basic folder structure:

  • MyFlaskWebsite – contains the complete project and the Python program for Flask to run
  • static – contains CSS for the webpage
  • templates – contains the HTML for the webpage

The terminal window on the Raspberry Pi will show any errors that Flask hits, any connections made and what commands (e.g. GET to ask for a page) the connection sent.

Flask running in the terminal
Flask running in the terminal

Time to take a slightly deeper look at the coding involved. All the coding for this project is available at https://github.com/geektechdude/temperature_project :

  • sensor_flask.py – is the the Python file containing the relevant Python
  • flask_temp.html – is the webpage (HTML) that render_template calls to add details to
  • main.css – is the cascading style sheet to edit how the page looks

The CSS is a regular cascading style sheet. The HTML has {{variables}} inside double curly brackets that match up with variables that Flask has the values for. The Python file contains a lot of the functions I’ve used in the first few parts of the this project with a new function called get(), which is located just under:

@app.route(‘/’)

This @app.route says to run the get() function, so anyone hitting the root of the site runs the get() function. However, other @app.routes can be created and linked to other functions depending on the pages visited on the site.

The get() function runs the other functions I’ve created and then the “return” asks render_template to return flask_temp.html and fill in the variables with their values.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.