The following components are used for this project:

Raspberry Pi 3

Sense Hat

Sense Hat case

HDMI Cable

Monitor

Keyboard

Mouse

Looking for a great introduction to Raspberry Pi? Try the Zagros Raspberry Pi 3 Starter Kit which has everything you need to begin discovering Raspberry Pi.

Step 1: Revise Weather Display.

This tutorial begins with a Python file from a previous instructable: Weather Display with Sense Hat.

You can go back and follow that instructable first or download and open this file in a Python 3 editor for the next steps.

weather_log.py
Download

Step 2: Install and Import Flask Framework to Project.

Install Flask. In the Terminal type:

sudo apt-get install python3-flask

Import Flask to your project. In the weather_log.py file add this line below the other imported modules:

from flask import Flask

Step 3: Python Code to Display HTML on the Web.

Insert this code just below the "message" variable and save it. We will build out the rest of the app in future steps.

Python is space sensitive, the entire code below the line of 'def index():' should be indented.

@app.route('/')

def index();

now = str(asctime())

currentWeather = now + " " + "-" + message + "\n"

weatherData = {

'weather': currentWeather

}

return render_template('index.html', **weatherData)

You can go ahead and delete the while True: statement at the bottom of the code. In this step we have moved it inside the index function. The 'weather' property will be passed to the double curly braces in the HTML.

Step 4: Create a Web App Folder for Your Project.

Create a folder webapp in the pi directory.

Create two subfolders templates and static.

Step 5: Create an Index.html File From the Text Editor.

Navigate to Menu > Accessories > TextEditor

Paste in this section of HTML and save it under the templates folder with a file name of index.html.

<html>
  <head>
    <link rel = "stylesheet" href = "/static/style.css" />
  </head>
  <body>
    <h1>Weather:</h1>
    <h2>{{weather}}</h2>
  </body>
</html>