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.

Saving the message String to the atm.html file

• Now that we have prepared our message String, we need to save it to our atm.html file.
• Add the following lines to the end of our program as per the example below.
  • f = open(‘/home/pi/botanica-park-lake/atm.html’, ‘w’)
  • f.write(message)
  • f.close()

• In the first statement we used the ‘w’ option, which is short for write.
• This means that when we write to the atm.html file - all existing contents will be erased and written over.
• If the option was ‘a’ (short for append) – then we would add new content to the end of the file, preserving existing data in the file.

• The output will look like the following.
• Behind the scenes, our message String will have been written to the file atm.html

Displaying an HTML file using a web browser

• When developing an HTML file we want to be able to quickly view it without having to load it onto a live web server.
• One easy way to view an HTML file is to open it up in a Web Browser.
• The following example will show you how to use the Chromium Web Browser on the Raspberry Pi to view HTML files.

Viewing HTML files using a Web Browser

• To open the atm.html file open the File Manager.
• Find the file atm.html and right-mouse button click.
• Select the Chromium Web Browser option.

• This should open up the Chromium Web browser and show the following output.

Adding more sensor data to the HTML file

• Now that we know how to view our dynamic web page, we can start adding more sensor data.
• Modify the multi-line message variable to include atmospheric pressure data.
• Follow the example below.

• When you Run the program, you should see the following output in the Python Shell.

• You can also see the changes in the Web Browser.
• Don’t forget to click on the Reload Page button, so that the changes to the atm.html file are loaded into the Browser.

• Lastly, we can also include sensor data for battery voltage.

• The output in the Python Shells looks like this.

• The output in the web browser will look like the following.
• Don’t forget to click the Reload this page button.

Troubleshooting using the Terminal

• If your web page doesn’t display correctly you may have missed some code or received a syntax error.
• A syntax error is the equivalent of a grammatical error or spelling mistake in English.
• In this example we will use the Terminal to see if changes have been written to the atm.html file.

Checking for file changes using the Terminal command cat

• Open the Terminal and navigate to your project directory.
• List the files in the project directory with the command ls
• You should see your atm.html file.
• To inspect the contents of the atm.html file, enter the command cat atm.html

• In the example above, some of the html in the file appears to be missing.
• Perhaps there was an error in my program.
• After fixing the error and running the program again, this is the output I get.
• Using the command cat is an easy way to inspect your files.
• This will produce a listing of the file contents.

• Congratulations! Now you can make you’re own dynamic web pages.
• In our next lesson we will try to automate the creation of these dynamic web pages.