Creating a Dynamic web page

Overview

• In this lesson we are going to learn how to present sensor data in a simple web page.
• The web page will be dynamic because we will update the web page with new data each time we run our atm_sensor_get.py program.
• Presenting dynamic data in a web page makes it much easier to monitor changes.
• Normally a dynamic web page is hosted on a web server.
• If data is hosted on a web server then you can view your sensor data from anywhere in the world.
• This very useful when you need to routinely monitor data coming from an important project.
• Today we will only be looking at simple weather sensor data: temperature, atmospheric pressure and battery voltage.
• We can also use sensors to monitor other important projects.
• We use water level sensors to monitor the health of waterbodies.
• Some waterbodies are home to the threatened Growling Grass Frog.
• They need water to be present all year round (especially in summer) so that they can breed successfully.
• We will develop and deploy these types of sensors soon!

Learning Objectives

• Learn how create a dynamic html file using python
• Learn how to display the html file using a web browser
• Learn how to troubleshoot using the Terminal

Create a dynamic HTML file using Python

• In this example we will experiment with a new python library named html that will help us create dynamic HTML pages.
• We will demonstrate how we can include new sensor data in a html file (web page).

Simplify existing atm_sensor_get.py file

• From the Raspberry Pi main menu drop down, select Programming > Python3 (IDLE).

• This will open the Python Shell.

• From the File drop down menu select Recent Files and open atm_sensor_get.py.
• Edit the file to remove some of the following:
  • Comments (comments start with a #)
  • print() statements.
  • White spaces between code statements.
• Your code should look like this when editing is complete.
• Save the changes.

Create an empty file named atm.html using the Terminal

• Open the Terminal.
• Enter the command ls to list the contents in the /home/pi directory (home directory path shown as ~)

• Navigate to your project directory (e.g. botanica-park-lake) using the command cd botanica-park-lake
• As a short-cut, you can press the Tab key to help complete a statement.
• Try it for yourself.
• Enter cd bot – then enter the Tab key to complete it.

• Enter ls to view the contents of the directory.

• To create a new file named atm.html enter the command touch atm.html
• Verify that the new file was created with the command ls
• This file will be our dynamic web page to display current atmospheric sensor data.

String variable over several lines

• Normally when we create a String it is normally contained within a single line of code as in the message = “Hello” example below.
• A string must be contained within quotation marks.

• If a String covers multiple lines, then we enclose the String with three quotation marks at the start (“””) and three quotation marks at the end (“””).
• The code below was added to the end of the atm_sensor.get.py section of code.

• Save and Run this program.
• The output of the program in the Python Shell is shown below.

• Now we can write several lines of HTML within the multi-line String.
  • Follow the example of the multi-line message String – message = “””
  • Don’t forget to add an extra import statement at the top of the code – import html
  • Add a final print() statement so that you can see the message.
  • We also need to add the str() method to convert numbers to String.

• You should see the following output when you run the code.