Programming Assignment 09

Creating

with

(Creating Words with Photos)

Due: Wednesday, April 30th 10:00 A.M.

An introduction

To begin

• create a directory named PA09 in the root of your directory space on the p: drive
• download and unzip  letters.zip  in this directory

Check out the contents of this zip file. 

Inside this directory are twenty Seven (27) picture files.  Twenty Six of these represent letters of the alphabet (for example, "A.jpg").  Most of these were taken on the UNI campus last spring.  The Twenty Seventh is called "space.jpg"  and is simply a blank space.  Each of these images is exactly 100 pixels tall, although the width varies from picture to picture.

The final thing in this directory is a file called page.html.  At the moment this contains a VERY simple HTML file that produces the word HELLO something like what is below.  You can overwrite this file when completing this assignment

In this PA you will create several different methods that use these images to produce a "new image" that looks like a word.  For example, if I made the word "HELLO" using these images I would get:

Creating a Web Page with a Message

Write a method called

webMessage(text,file)

As indicated, this method takes two parameters - a string containing a simple text message and a file that will be written into  (for example, page.html).

This method should write out to the text file a simple HTML page that will display a series of image files which, together, writes out the text message that was provided.  For example, running

webMessage("Hello", getMediaPath("page.html") )

will produce the following HTML code which is visible on this page:

If you need some assistance with the concept of HTML you may refer to the material in sections 11.1-11.2.  However, you really don't need to understand much HTML to create this method.  All this method does is:

• open the file for writing
• write out the first "six" lines of HTML (which are the same regardless of the parameters to webMessage)
• write out the sentence that says indicates what the message should say by using the text parameter
• write out a series of img tags which are a combination of basic HTML and information from the text tag.
• write out the last line of HTML
• close the text file.

Things to think about:

• case of the input text - Your method should be case-insensitive.  That is, your method should handle "HELLO", "hello", "Hello", and "HeLlO" all as the same thing.  Regardless of which of those four parameters was provided as text, you should generate the same HTML file listed above.
• Non-alpha characters  -  The only non-alpha character you need to worry about is the space.  In other words "Ben Schafer" is valid input to webMessage() but "Schafer Rocks!!!!" and "Schafer is #1" are not valid.

Creating a Picture with a Message

Write a method called

pictureMessage(text)

As indicated, this method takes only one parameters - a string containing a simple text message.

This method should return one, new picture object which is the "concatenation" of the individual letter photos represented in the text message.  Thus,

output = pictureMessage("Hello")
show(output)

would return and display a single picture image that

Things to think about:

• case of the input text - same as above
• Non-alpha characters  -  same as above
• what to do when you call makeEmptyPicture(width,height)  -  The height of the output picture is easy.  All of the photos in the letter directory are 100 pixels tall.  However, the width of each image varies.  I suggest that you do this as a two pass problem.  That is, first open each letter picture to see how wide it is and add this to the total width of the new picture.  THEN, invoke makeEmptyPicture() using this information.  Only then will you make a second pass through the text to build the image.

Final Submission

As is normal, please prepare all of this in a file called pa09.py and located in a directory called pa09 in your root directory on the p: drive.

Prepare a paper printout of your code to submit at the start of class.