Lab date: Wednesday October 4th. Assignment due by 2pm Friday, October 6th. This version of the lab updated Wednesday morning, October 4th.
A GIF image is an image file (extension ".gif") that is compressed according to the Graphics Interchange Format (hence the acronym). GIFs are often used to hold line drawings and other schematic material. A JPEG file is similar (extension ".jpg"); it is typically used for pictures such as photographs that have a variety of subtle color differences in them. They both originates as an array of colored pixels, such as the gif picture you've seen of the lab assignment envelope which is an image 120 pixels wide by 171 pixels tall as shown below:
But browsers allow you to display such an image with any dimensions you want, witness the version below which has been forced to display with a width of 200 and a height of 100:
The goal of this first programming assignment is for you to display one (or more) gifs or jpegs with various distortions, by using C++ to compute various widths and heights using the type of arithmetic expressions described in Chapter 2 of Friedman and Koffman.
The HTML text that causes the distorted image to be displayed is:
<IMG SRC="envelope.gif" WIDTH="200" HEIGHT="100">
The HTML "tag" is "IMG", indicating that an image is to be displayed. The "SRC" attribute names the file to be displayed (in the same directory as your .html file). The "WIDTH" attribute specifies the width in pixels as 200, and the HEIGHT is specified as 100.
The only trick in using cout to produce such html code is the printing out of the double quotes, ". To do this, C++ uses an "escape character" described in Friedman and Koffman, page 51. The escape character is a backslash, "\", as it is in a number of other languages. So the two character sequence \" would put a double quote into a string and would allow you to print a double quote. So to print "envelope.gif", including the two double quotes, you'd need to write a double-quoted string which itself contains two escaped double quotes.
cout << "\"envelope.gif\"";
Producing html with computed values:
As a simple example suppose you want to produce a simple html line with a double quoted number that you compute. Here's a sequence of statements that would do it:
int m;
m = 28/3;
cout << "Here's a quoted number: \"" << m << "\"." << endl;
This will produce the output: Here's a quoted number: "9".
You should think through carefully about just why this worked the way it did.
By carefully extending this technique you can produce lines such as:
<p> <IMG SRC="envelope.gif" WIDTH="200" HEIGHT="100"> </p>
where I've inserted the beginning and end html paragraph tags, <p> and </p> to leave space before and after the image.
How to obtain an image file to work with: Any GIF or JPEG image displayed in your browser can be saved to a file. In Windows, mouse right on the image (clicking the right button on the mouse while the cursor is on positioned within the image) will bring up a menu that includes the choice of saving the file, which you can name as you like, but you should use the same extension as the original. In Netscape you can find out the dimensions of an image file by viewing the source and clicking on the reference to the file. I've included some images at the end of this web page for you to use, though you can pick what you like from any other pages on the web. (You can use google.com or alltheweb.com to search or use images from your favorite sites.) Put the file you choose in the same directory as the HTML file you create in your assignment.
You are to use C++ cout to generate HTML code, as you did in the first assignment, which includes a GIF or JPEG image with three different sets of dimensions, width and height. That is, it should include three <IMG...> tags of the type shown above. The integer values of the dimensions are to be computed by your program, not just typed in. The dimensions will differ in the three images because they are to be computed as a function of an integer n that has the values 0, 1, and 2. That is, n is a parameter. For example, if a dimension was 100 + 50*n, the values would be 100, 150 and 200. But your task is a little more difficult than this. You are to create a function (one function for the width and one function for the height) such that the picture is smallest for n = 1 and larger for n = 0 and n = 2. (As one piece of the puzzle, consider the ratio of 15/abs(4*n - 5) which is largest for n = 1.) Adjust your computations so that the picture is its normal size for n = 0 and smaller than normal for n = 1. The way to go about this is just to experiment with various kinds of expressions for a typical dimension which you could assume was 100. Scale each dimension by the same amount. Remember that if you do decide to use the abs(x) or fabs(x) functions you'll have to include the <cstdlib> or <cmath> libraries with an #include statement (Friedman pg. 116).
Once you create your HTML file with the three IMG tags with the filename and the three different sets of image dimensions, you can manually edit it to include your name and other information and even notes about what function you used to scale the images.
A strategy for getting your lab assignment done: First, write a tiny program that simply prints out the HTML for displaying one image and does not do any computations of the width and height, e.g., use cout's to print something like the following:
<html> <body> My first try: <p> <IMG SRC="envelope.gif" WIDTH="200" HEIGHT="100"> </p> </body> </html>You should replace "envelope.gif" by the name of whatever file you've decided to use. If you paste this into a .htm or .html file and display it in your browser, it should work. If you haven't got the image file yet, it should still work, but the graphic will be missing. Once you have the image file you're using in your folder on the hard drive, a .gif or .jpg, your HTML file should display the image also. In the next stage of the development of your code, you can simply set two int variables to the values you want and embed those variables in your cout statements. Next, you can compute the values of one pair of width and height before your cout uses them. Finally, you can compute the three different values for the width, height pair and write out three IMG tags, each with differently computed width and height pairs. (Compute one pair, do a cout, compute the next, do another cout, and finally the third pair and its cout.) In all of this, remember to escape those quotes by putting \" in your cout statements whenever you want a quote to print!
More advanced possibilities (not part of the required assignment): Use a for loop to generate the three IMG tags. Write your HTML output to a file rather than to the screen. Include the source code for the function you used in a <pre>...</pre> block in your HTML file. You could also work with more than one gif or jpeg. You could generate HTML that allows the user to see the dimensions on the screen as I have done for the six sample images below. Download an animated gif from a web page (they're just single files).
Here are the sample images that you're welcome to use for your work:
WIDTH="201" HEIGHT="261":
WIDTH="500" HEIGHT="50":
WIDTH="150" HEIGHT="101":
WIDTH="100" HEIGHT="130":
WIDTH="218" HEIGHT="288":
WIDTH="1384" HEIGHT="268":
WIDTH="360" HEIGHT="480":
WIDTH="511" HEIGHT="439":
