| Table of Contents | |
|---|---|
| 1. Problem | |
| 2. Solution | |
| 3. Sample Output | |
| 4. Sample Code | |
| 5. WWW Page | |
A company wanting to sell annuities via the WWW wanted something more visual than filling in an online form with start dates, monthly contributions, retirement dates, etc. and returning another table showing withdrawal amounts, dates etc.
Ideally they wanted a visually interactive tool that the propective customer could start with some initial values on a form and let them drag-and-drop to change the values and visually see when their annuity would run dry.
Uses Java/AWT.
This java applet is a wire-frame version of an interactive annuity analysis tool.
The applet would start with a starting annuity contribution, a regular contribution amount, a retirement date, and a withdrawal amount after retirement.
It would calculate values based on dragging and dropping
the appropriate line(s).When the user was done they could send the results back to the server to save the values.
This sample version doesn't do much more than show that you can drag the lines (shows outlining).
The live version would have some sort of Save Values button that would allow the current values to be returnded to the server for storage in a database or to perform additional calculations.
Many of the values are passed in via parameters.
<APPLET CODE="AnnuityChart.class" WIDTH=550 HEIGHT=300> <PARAM NAME=title VALUE="AnnuityChart Sample"> <PARAM NAME=font_name VALUE="Helvetica"> <PARAM NAME=font_size VALUE="15"> <PARAM NAME=left_margin VALUE="25"> <PARAM NAME=right_margin VALUE="15"> <PARAM NAME=top_margin VALUE="15"> <PARAM NAME=bottom_margin VALUE="15"> <PARAM NAME=x_label VALUE="X Axis"> <PARAM NAME=x_color VALUE="black"> <PARAM NAME=x_min VALUE="0"> <PARAM NAME=x_max VALUE="390"> <PARAM NAME=x_width VALUE="2"> <PARAM NAME=y_label VALUE="Y Axis"> <PARAM NAME=y_color VALUE="black"> <PARAM NAME=y_min VALUE="0"> <PARAM NAME=y_max VALUE="220"> <PARAM NAME=y_width VALUE="2"> <PARAM NAME=start_color VALUE="#FF0000"> <PARAM NAME=start_x VALUE="20"> <PARAM NAME=start_y VALUE="75"> <PARAM NAME=start_width VALUE="4"> <PARAM NAME=start_label VALUE="Start"> <PARAM NAME=current_color VALUE="#530053"> <PARAM NAME=current_x VALUE="175"> <PARAM NAME=current_y VALUE="175"> <PARAM NAME=current_width VALUE="4"> <PARAM NAME=current_label VALUE="Today"> <PARAM NAME=retirement_color VALUE="green"> <PARAM NAME=retirement_x VALUE="220"> <PARAM NAME=retirement_y VALUE="45"> <PARAM NAME=retirement_width VALUE="4"> <PARAM NAME=retirement_label VALUE="Retire"> <PARAM NAME=background_color VALUE="#1234"> <PARAM NAME=foreground_color VALUE="pink"> </APPLET>
The AnnuityChart.class is 8K bytes.
Double-click on any of the vertical lines, hold it down and drag it around. You should only be able to drag a line between the closest lines
Comments and some code have been removed so that the display is smaller.
public class AnnuityChart extends Applet {
String ws;
// ******* VARIABLES REMOVED FOR DISPLAY PURPOSES ********
public void init() {
titleFont = new java.awt.Font("Helvetica", Font.BOLD, 12);
titleFontMetrics = getFontMetrics(titleFont);
title = StringParam( "title", "AnnuityChart" );
// ******* INITIALIZATION CODE WAS REMOVED *******
wDim = new Dimension( screen.width, screen.height );
wImage = createImage( size().width, size().height );
wGraphics = wImage.getGraphics();
repaint();
}
private void DrawFrameParts(Graphics g) {
int i;
String ws;
g.setColor( background_color );
g.fillRect( 0, 0, screen.width, screen.height );
g.setColor( foreground_color );
g.fillRect( left_margin, top_margin,
screen.width - ( left_margin + right_margin ),
screen.height - ( top_margin + bottom_margin ) );
g.setColor( x_color );
if ( x_width > 1 ) {
g.fillRect( left_margin,
screen.height - bottom_margin - x_width,
screen.width - right_margin - left_margin,
x_width );
} else {
g.drawLine( left_margin,
screen.height - bottom_margin,
screen.width - right_margin,
screen.height - bottom_margin );
}
g.setColor( y_color );
if ( y_width > 1 ) {
g.fillRect( left_margin,
top_margin,
y_width,
screen.height - bottom_margin - top_margin );
} else {
g.drawLine( left_margin,
top_margin,
left_margin,
screen.height - bottom_margin );
}
g.setColor( start_color );
g.drawLine( left_margin + start_x[0], top_margin, left_margin + start_x[0], screen.height - bottom_margin );
g.drawLine( left_margin + start_x[0], screen.height - bottom_margin - start_y[0], left_margin + current_x[0], screen.height - bottom_margin - current_y[0] );
g.setColor( current_color );
g.drawLine( left_margin + current_x[0], top_margin, left_margin + current_x[0], screen.height - bottom_margin );
g.drawLine( left_margin + current_x[0], screen.height - bottom_margin - current_y[0], left_margin + retirement_x[0], screen.height - bottom_margin - retirement_y[0] );
g.setColor( retirement_color );
g.drawLine( left_margin + retirement_x[0], top_margin, left_margin + retirement_x[0], screen.height - bottom_margin );
g.setColor( retirement_color );
g.drawLine( left_margin + retirement_x[0], screen.height - bottom_margin - retirement_y[0], screen.width - right_margin, screen.height - bottom_margin - retirement_y[0] );
g.setColor( Color.black );
g.setFont( titleFont );
i = titleFontMetrics.stringWidth( title );
g.drawString(title, screen.width - i, titleHeight );
i = titleFontMetrics.stringWidth( start_label );
g.drawString( start_label, left_margin + start_x[0] - ( i / 2 ),
screen.height - bottom_margin - x_width );
i = titleFontMetrics.stringWidth( current_label );
g.drawString( current_label, left_margin + current_x[0] - ( i / 2 ),
top_margin + titleHeight );
i = titleFontMetrics.stringWidth( retirement_label );
g.drawString( retirement_label, left_margin + retirement_x[0] - ( i / 2 ),
screen.height - bottom_margin - x_width );
ws = Integer.toString( x_min );
g.drawString( ws, left_margin,
screen.height - bottom_margin + titleHeight );
ws = Integer.toString( x_max );
i = titleFontMetrics.stringWidth( ws );
g.drawString( ws, screen.width - right_margin - i,
screen.height - bottom_margin + titleHeight );
ws = Integer.toString( y_min );
i = titleFontMetrics.stringWidth( ws );
g.drawString( ws, left_margin - i, screen.height - bottom_margin );
ws = Integer.toString( y_max );
i = titleFontMetrics.stringWidth( ws );
g.drawString( ws, left_margin - i,
top_margin + titleHeight );
if ( mouseDrag == true && saveClosest > 0 ) {
int wX = wCursorLoc.width ;
int wY = wCursorLoc.height ;
int wT;
int wB;
if ( saveClosest == 4 ) {
g.setColor( retirement_color );
wY = Math.max( wY, 0 );
wY = Math.min( wY, screen.height - top_margin - bottom_margin );
g.drawLine( left_margin + retirement_x[1], wY,
screen.width - right_margin, wY );
g.drawLine( wX, wY - 2, wX, wY + 2 );
} else {
if ( saveClosest == 1 ) {
g.setColor( start_rb_color );
wX = Math.max( wX, left_margin + 2 );
wX = Math.min( wX, left_margin + current_x[1] - 2 );
} else if ( saveClosest == 2 ) {
g.setColor( current_rb_color );
wX = Math.min( wX, left_margin + retirement_x[1] - 2 );
wX = Math.max( wX, left_margin + start_x[1] + 2 );
} else if ( saveClosest == 3 ) {
g.setColor( retirement_rb_color );
wX = Math.max( wX, left_margin + current_x[1] + 2 );
wX = Math.min( wX, screen.width - right_margin );
}
wT = top_margin;
wB = screen.height - bottom_margin;
g.drawLine( wX, wT, wX, wB );
g.drawLine( wX - 4, wY, wX + 4, wY );
}
ws = "(" + wCursorLoc.width + "," + wCursorLoc.height + ")";
g.drawString( ws, wX - titleFontMetrics.stringWidth( ws ) / 2,
wY - titleHeight - 2 );
}
}
// ****** INTERNAL METHODS REMOVED FOR DISPLAY ******
public boolean mouseDown( Event e, int x, int y ) {
int wX;
int wY;
wX = x - left_margin;
wY = screen.height - bottom_margin - y;
if ( wX > retirement_x[0] - 2 && wX < retirement_x[0] + 2 ) {
saveClosest = 3;
} else if ( wX > current_x[0] - 2 && wX < current_x[0] + 2 ) {
saveClosest = 2;
} else if ( wX > start_x[0] - 2 && wX < start_x[0] + 2 ) {
saveClosest = 1;
} else if ( wY > retirement_y[0] - 2 && wY < retirement_y[0] + 2 ) {
saveClosest = 4;
} else {
saveClosest = 0;
}
if ( saveClosest > 0 ) {
mouseDrag = true;
wCursorLoc = new Dimension( x, y );
repaint();
}
return( true );
}
public boolean mouseUp( Event e, int x, int y ) {
int wX = x - left_margin;
int wY = y - top_margin;
if ( mouseDrag == true && saveClosest > 0 ) {
if ( saveClosest == 1 ) {
start_x[1] = Math.max( wX, 2 );
start_x[1] = Math.min( start_x[1], current_x[1] - 2 );
} else if ( saveClosest == 2 ) {
current_x[1] = Math.min( wX, retirement_x[1] - 2 );
current_x[1] = Math.max( current_x[1], start_x[1] + 2 );
} else if ( saveClosest == 3 ) {
retirement_x[1] = Math.min( wX, screen.width - left_margin - right_margin - 2 );
retirement_x[1] = Math.max( retirement_x[1], current_x[1] + 2 );
} else if ( saveClosest == 4 ) {
retirement_y[1] = Math.min( wY, screen.height - bottom_margin - wY );
retirement_y[1] = Math.max( retirement_y[1], 0 );
}
}
repaint();
return( true );
}
}
Sorry to say that the company changed directions and the tool was never finished.
| For more information contact: | |
| Steve Monroe | |
| Phone: 540-822-3946 | |
| Internet: steve@pcthree.com | |