Java Applets: Interactive Programming

Lab/Assignments


The purpose of this assignment is


Instructions:

Part 1

Objectives:
  1. Open the browser.
  2. Go to http://www.cs.sfu.ca/CourseCentral/365/li/material/cgi-bin/whichjpeg.cgi
  3. Click on the different numbers.
  4. Click on the button for "2" on "Number of Images Displayed"
  5. In the first box area, Click on the "5" button
  6. In the second box area, Click on the "100" button
  7. What is the difference between 5 and 100?

  8. To see how this works, download the following image to your account. fantasia.gif
  9. Now open a terminal window, and type
    	xv  fantasia.gif
    
    xv is a graphical viewer for images.
  10. Right-click on the image, and a dialog box appears for xv commands.
  11. Click on the "Save" button.
  12. Change the drop-down at the top for "Format:" to JPEG
  13. Click the "OK" button. A new dialog box appears.
    Look at the "Quality" dial on the left side. It defaults to 75% quality.
    Try moving the dial down to 5 or 10, and click the "Ok" button.
  14. In the "xv controls" dialog box, double-click on the file you just saved - with the .jpg extension
    How pretty is the picture now?


    Transparency

    First we need to set up an image that can be used, then we will use an on-line form available on the Internet that will transform our image for us.
  15. Copy the following file to your account: fantasia.gif
    You can download usually by right-clicking on the link above and select "Save Target As..." or "Save Link As..."
  16. Open a terminal window
  17. Move the image into your public_html directory.
    To see if you have this directory already, type
    	ls
    
    Does it list a public_html directory? If not, type:
    	mkdir public_html
    	chmod go+rx public_html
    
    Now, move the image into this directory by using the mv command:
    	mv fantasia.gif public_html/
    
  18. Change permissions on the image.
    To do this, we use the chmod command and specify that we want groups and others to have read access to this image.
    	chmod go+r public_html/fantasia.gif
    
  19. In your browser, go to http://stuff.mit.edu/tweb/map.html
    This site allows you to take .GIF images and make them transparent.
  20. Where it specifies "Image URL:", type in the box the URL to the image you set up.
    The URL will include your login name for the CS accounts where it specifies [login]
    Note that we do not specify the "public_html" directory!
    	http://www.cs.colostate.edu/~[login]/fantasia.gif
    
  21. Click on teh "Submit this URL" button.
    The image should appear. The directions ask you to click on the image color you want to become transparent.
  22. Try clicking on the dark background area.
    It will display an image with the background color removed! Here you can right-click on the image and save it in your account.
  23. Try clicking the "Back" button on the browser, and this time try selecting the red color from his robe.
  24. Save this image with one of the colors made transparent. When you load this image in to Java or an HTML file, the missing color will match whatever the background color is!

    NOTE: Transparency does NOT work on .jpg!


    Graphics Effects

  25. Click on the link for http://www.nbswebfx.com/
  26. Type in the text box the URL for your image from the last section.
  27. Click on the drop-down box for "Apply" and select "Emboss". Click on "Apply Effect". Save the image in your account
  28. Click on the drop-down box for "Apply" and select "One Dollar Bill". Click on "Apply Effect". Save the image in your account
  29. Click on the drop-down box for "Apply" and select "Buttonize". Click on "Apply Effect". Save the image in your account


    Copyright © 2006-2007: E.S.Boese All rights reserved.