We will continue from where we stopped last time.

We'll cover the feedback form, the file upload and the following combination of programs that makes use of both Java and Javascript to transform an image into a two-dimensional radio button.

Run the script.


1. This is adapted from the newform of last lecture.

#!/usr/bin/perl

use CGI;
$query = new CGI;

print $query->header, 
      $query->start_html (-bgcolor=>'white', 
                          -title=>'HTML Forms Widgets'); 
if ($query->request_method eq 'GET') {
  &show_form; 
} else {
  print $query->dump, $query->hr; 
  # &process_query;   
} 
print $query->end_html; 

sub show_form { print 
  "\n", $query->start_form(-method=>'POST', 
                           -action=>$query->url),
  "\n", qq{<b>1. </b> Write your name: <p>}, 
  "\n", $query->textfield(-name=>'fieldT1', 
                          -size=>20, 
                          -maxlength=>40),
  "\n", qq{<hr><b>2. </b> Choose a beverage: <p>},
  "\n", $query->popup_menu(-name=>'fieldM',
                           -values=> [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
                           -labels=> { 1 => 'pepsi', 2 => 'diet coke',
                                       3 => 'diet pepsi', 4 => 'soda', 
                                       5 => 'coke', 6 => 'orange juice', 
                                       7 => 'seven up', 8 => 'root beer',
                                       9 => 'sprite', 10 => 'yellow mellow'}), 
		    qq{
<hr>
<script language="JavaScript1.1">
    function passCoords(frm) {
	frm.hImage_x.value = document.myImage.report_x(); 
	frm.hImage_y.value = document.myImage.report_y(); 
    }
</script>
<p> 
<b>3. </b> Pick a point in the image: <p> 
<applet name="myImage"
        code="image.class"
        codebase="/java"
        width=149 height=120>
</applet>
<input type="hidden" name="hImage_x" value="initial value"> 
<input type="hidden" name="hImage_y" value="initial value"> 
    <hr><b>4.</b> Pick a point in the image: <p>}, 
  $query->image_button(-name=>'picture',
                       -src=>'http://tucotuco.cs.indiana.edu:19800/images/Q1.jpg'),

    qq{ <hr> 
        Push <input type="submit" value="proceed" onClick="passCoords(this.form)"> when done. 
    }, 
    $query->end_form;  
} 


2. And this takes care of the image.

import java.applet.Applet;
import java.awt.*; 
import java.net.*; 

public class image extends Applet {
    int oldx, oldy, fresh = 0; 
    public void init() { }
    public void start() { repaint(); }
    public void stop() { }
    public void destroy() { }
    public int report_x () { return oldx; } 
    public int report_y () { return oldy; } 

    public void paint (Graphics g) {
      try {
        Toolkit toolkit = Toolkit.getDefaultToolkit(); 
        Image image2 = 
        toolkit.getImage(new URL
           ("http://tucotuco.cs.indiana.edu:19800/images/Q1.jpg")
                        ); 
        // g.drawString("This is a new test", 10, 10); 
        g.drawImage(image2, 0, 0, this); 
      } catch (MalformedURLException e) {
        e.printStackTrace(); 
      }
      if (fresh == 1) {
        g.setXORMode(Color.red); 
        g.drawRect(oldx - 6, oldy - 6, 10, 10); 
      }  
    }

    public boolean mouseDown (Event e, int x, int y) {
      if (fresh == 0) { 
        fresh = 1;  
        Graphics g = this.getGraphics();
        g.setXORMode(Color.red); 
        g.drawRect(x - 6, y - 6, 10, 10); 
        oldx = x;
        oldy = y; 
      } else {
        Graphics g = this.getGraphics();
        g.setXORMode(Color.red); 
        g.drawRect(oldx - 6, oldy - 6, 10, 10);
        oldx = x ; 
        oldy = y; 
        g.drawRect(x - 6, y - 6, 10, 10); 
      } 
      return true; 
    } 
}