Creating a Dynamic web page - Revision history

EdmondLascaris at 06:27, 26 December 2021

2021-12-26T06:27:35Z

← Older revision		Revision as of 06:27, 26 December 2021
Line 155:		Line 155:

	[[File:Screen Shot 2021-12-26 at 5.23.51 pm.png]]		[[File:Screen Shot 2021-12-26 at 5.23.51 pm.png]]

			== 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'''

			[[File:Screen Shot 2021-12-26 at 5.25.45 pm.png]]

			* 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.

			[[File:Screen Shot 2021-12-26 at 5.26.57 pm.png]]

			* 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.

EdmondLascaris at 06:24, 26 December 2021

2021-12-26T06:24:25Z

← Older revision		Revision as of 06:24, 26 December 2021
Line 90:		Line 90:

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

			[[File:Screen Shot 2021-12-26 at 5.12.59 pm.png]]

			=== 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.

			[[File:Screen Shot 2021-12-26 at 5.14.49 pm.png]]

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

			[[File:Screen Shot 2021-12-26 at 5.15.47 pm.png]]

			== 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.

			[[File:Screen Shot 2021-12-26 at 5.17.50 pm.png]]

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

			[[File:Screen Shot 2021-12-26 at 5.18.29 pm.png]]

			=== 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.

			[[File:Screen Shot 2021-12-26 at 5.19.41 pm.png]]

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

			[[File:Screen Shot 2021-12-26 at 5.20.31 pm.png]]

			* 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.

			[[File:Screen Shot 2021-12-26 at 5.21.31 pm.png]]

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

			[[File:Screen Shot 2021-12-26 at 5.22.17 pm.png]]

			* The output in the Python Shells looks like this.

			[[File:Screen Shot 2021-12-26 at 5.23.02 pm.png]]

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

			[[File:Screen Shot 2021-12-26 at 5.23.51 pm.png]]

EdmondLascaris at 06:07, 26 December 2021

2021-12-26T06:07:06Z

← Older revision		Revision as of 06:07, 26 December 2021
Line 12:		Line 12:
	* They need water to be present all year round (especially in summer) so that they can breed successfully.		* 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!		* 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)'''.

			[[File:Screen Shot 2021-12-26 at 4.54.06 pm.png]]

			* This will open the Python Shell.

			[[File:Screen Shot 2021-12-26 at 4.54.48 pm.png]]

			* 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.

			[[File:Screen Shot 2021-12-26 at 4.56.01 pm.png]]

			=== 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 ~)

			[[File:Screen Shot 2021-12-26 at 4.57.08 pm.png]]

			* 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.

			[[File:Screen Shot 2021-12-26 at 4.58.49 pm.png]]

			* Enter '''ls''' to view the contents of the directory.

			[[File:Screen Shot 2021-12-26 at 4.59.43 pm.png]]

			* 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.

			[[File:Screen Shot 2021-12-26 at 5.01.06 pm.png]]

			=== 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.

			[[File:Screen Shot 2021-12-26 at 5.02.33 pm.png]]

			* 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.

			[[File:Screen Shot 2021-12-26 at 5.03.36 pm.png]]

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

			[[File:Screen Shot 2021-12-26 at 5.04.40 pm.png]]

			* 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.

			[[File:Screen Shot 2021-12-26 at 5.06.14 pm.png]]

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

EdmondLascaris: Created page with "== 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 pag..."

2021-12-26T05:29:58Z

Created page with "== 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 pag..."

New 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!