lab04, CISC106, Fall 2006

Overview

Last week, in lab03, we started with a simple data file of numbers—in this case, data about Hurricane Katrina (from August of 2005)—and produced two graphs

• a map showing the path of Hurricane Katrina (longitude on the x axis, and latitude on the y axis)
• a graph showing the relationship between air pressure and wind speed

In the process, we also learned a few things about slicing up Matrices in MATLAB, i.e. selecting out particular rows and columns.

This week, in lab04, we'll add two more graphs:

• a graph showing the relationship between elapsed time from the start of the storm, and wind speed
• a graph showing the relationship between elapsed time from the start of the storm, and air pressure

and do a bit more practice with selecting out rows and columns from matrices.

We'll also learn a little bit of HTML so that we can incorporate all four graphs into a simple web page.

Prerequisites

Before starting this lab, you should already be comfortable with the following skills from lab01, lab02 and lab03.

( As you can see, we've already learned quite a bit!)

1. Using the pwd, mkdir, and cd commands to manage directories in MATLAB
2. Converting simple mathematical formulas into MATLAB assignment statements
3. Saving a sequence of MATLAB commands into a file (a so-called "dot-M" file)
4. Using the diary command to save your work into a file you can submit for grading
5. Using the "load" command to load in some data from an ASCII formatted data file.
6. Running existing .m files
7. Selecting out a "column" from a matrix into a column vector
8. Plotting two column vectors on the x and y axis, and putting a legend and title on your graph
9. Saving the results of your plots to a graphic file suitable for use on the web.
10. Submitting your saved work for grading using "MyCourses" (also known as WebCT).

Goals

By the time you complete this lab, you should be able to:

1. Use the symbol end in array and matrix slices to "peel off" the first or last row or column of a matrix.
2. Format a series of .jpeg files (which in this case are MATLAB graphs) into a simple web page.
3. Make that web page available on the web.

This week's lab will be easier if done on a Sun Ray, but...

... but you can do it on a PC if you want to.

Here's why doing this week's lab on the Sun Ray will be easier, and how to work around it so that you can do it at home.

1. Use of plotting
   • You can work around this if you have the Student Version of MATLAB for PC or Mac
   • You can also work around this by following the instructions at this page on the wiki page CISC106_Accessing_MATLAB_on_strauss
   • In particular, follow the instructions to log onto strauss and get into MATLAB.
   • Then pay particular attention look at the section of the page titled "How to Plot when you aren't in Graphics Mode".
2. Setting up a web page on copland.udel.edu
   • This is just easier if you are already logged into strauss, since strauss and copland share the same hard drive space.
   • You can also work around this by creating the web page on your PC, and then using the instructions from one of the labs for my other course, CISC103, for copying a web page from a PC to the copland.udel.edu web server: http://www.udel.edu/CIS/103/pconrad/06F/labs/lab01.html#step6

Step-by-Step Instructions

Step 1: Preparing your lab04 directory, and copying files you will need

You can review the instructions from lab01 for starting up MATLAB on the SunRays if you are not sure how to do this.

Step 1a: Create a new subdirectory for lab04

Create a new subdirectory ~/cisc106/lab04, and make that your working directory.

If you are not sure how to do this, then review the instructions from lab03, steps 1a through 1d.

Step 1b: Copy the katrina.dat file from your lab03 directory into your current directory

Assuming that:

1. Your current directory is ~/cisc106/lab04
2. The files katrina.dat is located in ~/cisc106/lab03,

then, the following command can be used to copy that file into your current directory.

>> !cp ../lab03/katrina.dat .
>> 
  

Some notes (some of this is review from lab03, step 1d):

• Be sure to put the exclamation point ! at the beginning of the command. This signifies to MATLAB that what you are typing is actually not a MATLAB command, but instead a command to the Unix operating system.
• Be sure to put a space and a period at the end of the line. This period, by itself, signifies the destination for your copy, namely the current directory.
• The cp command is the Unix command to copy a file.
• This command might not work in the Student Version of MATLAB for windows, in which case you can use copyfile in place of !cp
  • The rest of the command line is the same.
  • copyfile is a MATLAB command, and therefore should work on all different types of systems
  • However, I want you to learn a few Unix commands as well, which is why I'm suggesting the !cp command instead.
  • !cp is also less typing than copyfile

Step 2: Learning about the "end" symbol for slicing up Matrices

First: there is nothing to turn in for Step 2

The work you do in step 2 of this lab is only for practice and learning. There is nothing to turn in from this step of the lab.

So you could skip it if you wanted to, and neither your instructor nor your TA would know.

Well, actually that's not entirely true. We'd know if,

• you missed the exam questions that were based on this part of the lab
• you asked questions about step 3 that you should have already known if you had actually done this step.

So, don't skip this step.

Slicing up Matrices

Enter the following in the MATLAB command window:

>> a = [1 2 3 4; 5 6 7 8; 9 10 11 12; 13 14 15 16]

a =

     1     2     3     4
     5     6     7     8
     9    10    11    12
    13    14    15    16

>>

Note that we can actually enter the same matrix faster this way:

>>  a = [1:4; 5:8; 9:12; 13:16]       

a =

     1     2     3     4
     5     6     7     8
     9    10    11    12
    13    14    15    16

>>

Now try typing in the following assignment statement:: b = a(2:end,:) as shown below. See if you get the same output.

>> b = a(2:end,:)

b = 
  5   6   7   8
  9  10  11  12
 13  14  15  16

>>

Notice that in effect, what happens is that the variable b is assigned a new matrix, which is the same as the a matrix but with its top row chopped off. This is because the expression 2:end takes all the rows from 2 to the last row, and the expression : takes all columns.

Now, try each of the following assignments. In each case, observe what the result is for b. Better yet, try to predict what b will be before you type in each statement.

• b = a(:,2:end)
• b = a(1:end-1,:)
• b = a(1:end-1,1:end-1)
• b = a(:,end)
• b = a(end,end)
  
  

You'll need this skill of "slicing off" one row of a matrix to complete part 3 of this week's lab.

Step 3: Produce two more plots

Now, once again load the katrina.dat file into a matrix called katrina, and set up the format so that the numbers don't show up in scientific notation.

• Refer back to step 2 of lab3 if you need help with remembering how.

We want to produce two more plots:

• a graph showing the relationship between elapsed time from the start of the storm, and wind speed
• a graph showing the relationship between elapsed time from the start of the storm, and air pressure

Step 3a: Start editing an M-file called lab04a.m to produce the wind vs. time graph.

Open lab04a.m in the MATLAB editor window.

Start the lab04a.m file with a command that loads the katrina.dat file into the workspace.

Step 3b: Slice off the top row of the Matrix

Note that the file starts with an observation taken at 18 hours GMT on 08/23/2005. We are going to slice off this top row, and start our graphs with the row that corresponds to the observation at midnight on 08/24/2005. This will simplify our calculation for elapsed time.

So, after the command that loads the katrina.dat file, issue a MATLAB command to slice off the top row, and store the result back into a new matrix called katrina2. Put this command in your .m file as well, and test whether it works.

Step 3c: Construct column vectors for hours, days, wind and pressure

Next, construct column vectors for hours, days, wind and pressure, corresponding to the correct columns of katrina2, using the techniques we covered in step3a of lab03.

Step 3d: Construct a vector for elapsedTime

Then, construct a vector for elapsedTime (measured in hours), which measures the elapsed time in hours from the starting point of midnight on 08/24/2006. The vector should start with the entries 0 6 12 18 24, etc and have exactly the same number of entries as there are rows in the new katrina2 matrix.

Think in terms of coming up with a formula for "elapsedTime" in terms of the corresponding entries in the hours and days vectors.

Step 3e: Finish the lab04a.m file so that it plots wind speed vs. elapsedTime

Then, put the commands into your M-file lab04a.m to make a plot with wind vs elapsedTime (with time on the x axis, wind on the y axis). The M-file should function even from a clear workspace---that is, if you type clear;, followed by the name of the M-file (lab04a;) you should get a correct result. Put a reasonable legend and title on your plot. Include your full name in the title.

Save the result of your plot in a file called lab04a.jpg

Step 3f: Write a similar lab04b.m file that plots pressure vs. elapsedTime

Now create an M-file lab04b.m to make a similar plot with pressure vs elapsedTime (with time on the x axis, pressure on the y axis). All the same criteria as in Step 3d apply.

Save the result of your plot in a file called lab04b.jpg

Step 4: Make a web page out of the four jpeg files you've produced

• Note: if you are working from a PC or Mac version of MATLAB, just skip this step until you can work on a Sun Ray, or directly on strauss via SSH.
• These instructions for Step 2 assume you are on a SunRay or directly connected to strauss via SSH
• You can complete step 3 and then come back to these steps later.

Step 4a: Preparing a directory for your cisc106 web files

At the MATLAB command prompt (working from a SunRay, or directly on strauss via SSH) type the following commands as shown.

• Note: if you are working from a PC or Mac version of MATLAB, just skip directly to step 3 for now.
• These steps must be done on a SunRay or directly on strauss via SSH.

>> !mkdir -p ~/public_html/cisc106/lab04
>> !chmod a+x ~
>> !chmod -R 755 ~/public_html
>> 

Here is what each of these commands does

• The !mkdir -p ~/public_html/cisc106/lab04 command creates an entire path of directories that will correspond to the web site http://copland.udel.edu/~username/cisc106/lab04, where
  • username is replaced by the userid you use to log in to the SunRays, and for your UD email, etc.
  • whatever files you put in that directory will show up at that web address
• The command !chmod a+x ~ is necessary to make sure that the web server can "pass through" your home directory to find your public_html directory. Otherwise, you might get a "403 Forbidden" error message when you try to bring up your files on the web.
• The command !chmod -R 755 ~/public_html command makes everything in your public_html folder, and every subdirectory under it, available on the web.
  • The -R stands for recursive, and it means "don't just do the command to this one directory---do it to also to every directory inside this directory, and every directory inside all those directories, and so on, and so on." All the files in the directories get affected also.
  • The 755 part is an octal number specifying a permission mode. When this number is applied to a file (or directory), it signifies that only you can make changes to the file (or directory), but other people are allowed to read the file (or browse through the directory.)
  • The ~/public_html part refers to the root directory for all your web content.

To see if these commands work, try opening a web browser to the page http://copland.udel.edu/~username/cisc106/lab04, except change username to your actual username. Don't forget the tilde (i.e. the "squiggle", the ~ symbol!)

You should see an empty web page, something like this:

\

If, instead, you get an error such as "403 Forbidden", then try the commands again, and/or ask your TA for assistance.

As we copy files into the directory ~/public_html/cisc106/lab04, these files will show up in this directory. To make them readable, we may need to do the following command again, each time we add files to this directory:

Don't confuse the directory where you do your MATLAB work with this web directory

Note the important distinction between

• the directory that contains katrina.dat, which is ~/cisc106/lab04, and is NOT available on the web, and
• the directory ~/public_html/cisc106/lab04, which IS available on the web.

Step 4b: Copy the jpeg files from last week's lab into your web directory

The following commands--if done in MATLAB on strauss---will copy the files from last week's lab into your web directory.

• Note: When you use MATLAB on the SunRays, you are in fact using MATLAB on strauss.
  • The SunRay terminals make a connection over the campus network to the computer known as strauss.udel.edu
  • strauss.udel.edu is where MATLAB is actually running.
  • The SunRay is just a terminal that reads your keyboard and mouse input and sends it to strauss, and takes the graphics from strauss and displays them on your local monitor. This kind of terminal is called an "X Windows Terminal".

>> !cp ~/cisc106/lab03/*.jpg ~/public_html/cisc106/lab04
>>

Explanation:

• The !cp part should be familiar by now
• The *.jpg part means "all files that end with .jpg". This will copy both lab03a.jpg and lab03b.jpg with one command.
• The * is called a wildcard, because it matches all filenames

Now, type the following command to make these newly copied files readable on the web:

>> !chmod -R 755 ~/public_html
>> 

Then, go to the web site http://copland.udel.edu/~username/cisc106/lab04, again (except change username to your actual username) and you should be able to click on both of your jpeg files.

• From now on, I'll expect you to just know to change username to your own username when it occurs in web links on copland.

Step 4c: Write an HTML file to make these files into a web page

Temporarily, change your working directory to ~/public_html/cisc106/lab04. You do this with the following command:

>> cd ~/public_html/cisc106/lab04
>>

Then, in the MATLAB command window, type edit katrina.html

>> edit katrina.html
>>

In the edit window that comes up, enter the following text. In the places that the name Daisy Duck appears, please change the name to your own name, and fill in your section number, etc.

There are also several places where there are @@@ symbols—this signifies that you should fill in some comment of your own, rather than what I have written here. You don't have to do this for the first draft... for now, you can type it in just as it is here.

<html>
  <!-- katrina.html   Daisy Duck for CISC106, Fall 2006, Section 010 -->

<head>
   <title>Hurricane Katrina plots, by Daisy Duck for CISC106 Section 010</title>
</head>
<body>
<h1>Katrina Plots</h1>
<h2>By Daisy Duck for CISC106, Section 010 </h2>

<h3>Katrina's Path</h3>
<p>
This plot shows Katrina's position from 1800 GMT on 08/23/2005
through 0600 hours GMT on 08/31/2005
</p>
<img src="lab03a.jpg" alt="diagram of Katrina's position"/>

<h3>Wind speed vs. Pressure</h3>
<p>
This plot shows wind speed in mph on the x axis, and 
barometric pressure in millibars on the y axis.  From 
this plot we can observe that @@@ blah blah blah blah 
blah blah blah blah continue over as many lines as
you need to say something intelligent about this plot. 
When you are done remove all this nonsense and the 
at signs at the beginning and the end @@@
</p>
<img src="lab03b.jpg" alt="plot of wind speed vs. barometric pressure"/>

<h3>Plot of wind speed vs. elapsed time</h3>
<p>
  @@@ A description of this plot will go here @@@
</p>
<img src="lab04a.jpg" alt="plot of wind speed vs. time"/>

<h3>Plot of barometric pressure vs. elapsed time</h3>
<p>
 @@@ A description of this plot will go here @@@
</p>
<img src="lab04b.jpg" alt="plot of pressure vs. time"/>

</body>
</html>

When you have typed all this in, save it and then once again do the command to make things readable on the web:

>> !chmod -R 755 ~/public_html
>> 

Then, once again visit the web address http://copland.udel.edu/~username/cisc106/lab04 and this time click on the file katrina.html.

You should see a web page that contains your four plots, plus your commentary about them.

Now, if you left the @@@ placeholder text in on your first go around, go back and fill it in with some more intelligent comments. I'm not looking for profound metrological insights—I just want to see that you actually took a few seconds to look at the graph and figure out what it means.

Also, hopefully this text is in your own words, and not that of any of your classmates—it would be truly remarkable if two people chose to describe their graphs in exactly the same way.

Why don't my lab04a.jpg and lab04b.jpg files come up?

Probably because you didn't copy them yet! Look back at the command we used to copy the jpg files from last week's lab03 directory into your web directory. The files have to be in the same directory with the katrina.html file for them to show up on that page.

Issue a command to copy those files into the proper directory. Remember to also do the chmod command that makes the newly copied files readable to the web server.

• If you know HTML, you may know that strictly speaking, the previous statement is not precisely true—the files don't have to specifically be in the same directory as katrina.html to be included on that page—they just have to be somewhere under your public_html directory so that you can reference them. But the specific way we coded the HTML file, they do have to be in the same directory.

Step 5: Submit the four files on WebCT.

Before uploading to WebCT, be sure that your web page at

http://copland.udel.edu/~username/cisc106/lab04/katrina.html

is looking spiffy. The TA will take your submission on WebCT as a signal that your web page is ALSO ready for grading, so don't submit until that part is also done.

Once it is, you should upload and submit your two new M-files, your two new JPEG files, and your katrina.html file on WebCT, and submit.

That's it for lab04!

Grading

1. lab04a.m (20 pts)
2. lab04a.jpg (15 pts)
3. lab04b.m (20 pts)
4. lab04b.jpg (15 pts)
5. katrina.html (20 pts)
6. Generally submitting everything according to instructions: 10 pts.

End of lab04 for CISC106, Fall 2006 (100 pts)