Writing an Etch A Sketch Program

[Joseph Ibrahim]

Hello again!

So, we've finally hit writing small applets/little graphics and this week we're given the following prompt:

TA will help you copy/paste download the EtchASketch starter program from our course website to your PC. You are to put several JButtons on the JFrame's content pane such that he buttons are of varying colors. The effect of any button being clicked must be to cuase all subsequent mouse drawing to draw its line in that color.
Hints:

declare a global/member variable at the top to represent the current drawing Color
declare an ARRAY of JButtons and an array of Color codes to assign to them.
get rid of the echoing of the mouse coordinate before handing in.

Here is a link to the starter file: Etch_A_Sketch.java

Now, here's my code:

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

public class Etch_A_Sketch implements MouseListener, MouseMotionListener {

	JFrame window;
	Container content;
	int mouseX,mouseY,oldX,oldY;
	JLabel coords;
	JButton[] colors = new JButton[5]; // Add 5 color buttons
	Color lineColor; // Set line default color

	public Etch_A_Sketch() {
		JFrame window = new JFrame("Classic Etch a Sketch");
		content = window.getContentPane();
		content.setLayout( new FlowLayout() );
		// Add Button Listener
		ButtonListener listener = new ButtonListener();
		// black
		colors[0] = new JButton("Black");
		colors[0].addActionListener(listener);
		// blue
		colors[1] = new JButton("Blue");
		colors[1].addActionListener(listener);
		// green
		colors[2] = new JButton("Green");
		colors[2].addActionListener(listener);
		// red
		colors[3] = new JButton("Red");
		colors[3].addActionListener(listener);
		// yellow
		colors[4] = new JButton("Yellow");
		colors[4].addActionListener(listener);
		// set default lineColor
		lineColor = Color.black;
				
		for (int i = 0; i < 5; i++)
			content.add(colors[i]);
		content.addMouseListener(this);        // "this" is the class that impliments that listener
		content.addMouseMotionListener(this);  // "this" is the class that impliments that listener
		window.setSize(640,480);
		window.setVisible(true);
	}


	// ..............................................................
	// IMPLEMENTING MOUSELISTENER REQUIRES YOU TO WRITE (OVER-RIDE) THESE METHODS 

	public void mouseClicked( MouseEvent me) {
		mouseX = me.getX();
		mouseY = me.getY();		
	}
	public void mousePressed( MouseEvent me) {
		mouseX = me.getX();
		mouseY = me.getY();
		//repaint();
	}

	public void mouseReleased( MouseEvent me) {
		mouseX = me.getX();
		mouseY = me.getY();
		//repaint();
	}

	public void mouseExited( MouseEvent me) {
		mouseX = me.getX();
		mouseY = me.getY();
		//repaint();
	}
	public void mouseEntered( MouseEvent me) {
		mouseX = me.getX();
		mouseY = me.getY();
		//repaint();
	}

	// ...............................................................
	// IMPLEMENTING MOUSEMOTIONLISTENER REQUIRES YOU WRITE (OVER-RIDE) THESE METHODS 

	public void mouseDragged( MouseEvent me) {
		mouseX = me.getX();
		mouseY = me.getY();

		if (oldX ==0 ) {
			oldX=mouseX;
			oldY=mouseY;
			return;
		}
		// drawPoint( x,y );
		Graphics g = content.getGraphics();
		g.drawLine( oldX,oldY, mouseX, mouseY );
		g.setColor(lineColor);
		oldX = mouseX;
		oldY = mouseY;
		//repaint();
	}
	public void mouseMoved( MouseEvent me) {
		mouseX = me.getX();
		mouseY = me.getY();
		//repaint();
	}

	class ButtonListener implements ActionListener {
		public void actionPerformed(ActionEvent e) {
			Component whichButton = (Component) e.getSource();
			// black
			if (whichButton == colors[0])
				lineColor = Color.black;
			// blue
			if (whichButton == colors[1])
				lineColor = Color.blue;
			// green
			if (whichButton == colors[2])
				lineColor = Color.green;
			// red
			if (whichButton == colors[3])
				lineColor = Color.red;
			// yellow
			if (whichButton == colors[4])
				lineColor = Color.yellow;
		}
	}

	public static void main( String[] args) {
		new Etch_A_Sketch();
	}
}//EOF

However, nothing happens, and frankly I'm stumped. I feel like I'm doing this completely wrong. I added a ButtonListener/ActionListener and registered it with the corresponding buttons. I even added the following line:

g.setColor(lineColor);

in the mouseDragged method, but nothing happens...

Any advice or nudge in the right direction would be much appreciated. I feel like I'm not doing this assignment how I should be.

Thank you for any help,
Joe

[Ulf Dittmer]

"Nothing happens" doesn't seem accurate to me. I have no problems getting lines to be drawn along the path of the mouse. (You're are keeping the mouse button pressed while dragging, right? Just checking :-) ) The only thing that doesn't work right is the color selection, but a small change in the mouseDragged method will fix that.

Oh, and after releasing the mouse button you need to do a bit of housekeeping - otherwise the next line segment starts at the end of the previous segment instead of at the position where the mouse button was pressed again.

[Joseph Ibrahim]

Sorry,
Should of been more specific. I meant nothing happens in the color changer. Do you have any tips you can give me?

Thanks,
Joe

[Ulf Dittmer]

You have all the code you need in the mouseDragged method - but you need to reorder it just a little bit

[Piet Souris]

hi Joseph,

every time you create a new Graphics environment (see the mouseDraaged method)), you get one in its
complete default state, Therefore, in your mouseDragged method, you always
draw first with the default color, black. It is only after you have drawn that you change
the drawing color, Therefore you do not see any impacr whatsoever.

Two other remarks:

the assignment indicates that your buttons should have corresponding colors. Currently,
you are only supplying names on them.

The direct drwing which you do in the mouseDragged method works, but is considered
dubious. Normally, you would do all the painting in a paintComponent() method (you have
systematically outcommented the repainf() command).
Well, this technique works, but it has some drawbacks. First, it lets you draw over your buttons,
although the effect is actually pleasing. If you then click on an overdrawn button, you will see
your lines erased at that button.
Which brings me to the second remark: since you do not paint anything in your paintComponent
method, you should expect some problems when your frame changes. Now, covering your
frame by some other frame and then uncovering, you won't notice anything. That's because
of the double buffering that Java uses. However, resize your window and see what happens.

But then, storing all the drawing information such that you can restore everything in the paintComponent,
may be covered in a lesson to come.

Greetz,
Piet

[Joseph Ibrahim]

Piet Souris wrote:hi Joseph,

every time you create a new Graphics environment (see the mouseDraaged method)), you get one in its
complete default state, Therefore, in your mouseDragged method, you always
draw first with the default color, black. It is only after you have drawn that you change
the drawing color, Therefore you do not see any impacr whatsoever.

Two other remarks:

the assignment indicates that your buttons should have corresponding colors. Currently,
you are only supplying names on them.

The direct drwing which you do in the mouseDragged method works, but is considered
dubious. Normally, you would do all the painting in a paintComponent() method (you have
systematically outcommented the repainf() command).
Well, this technique works, but it has some drawbacks. First, it lets you draw over your buttons,
although the effect is actually pleasing. If you then click on an overdrawn button, you will see
your lines erased at that button.
Which brings me to the second remark: since you do not paint anything in your paintComponent
method, you should expect some problems when your frame changes. Now, covering your
frame by some other frame and then uncovering, you won't notice anything. That's because
of the double buffering that Java uses. However, resize your window and see what happens.

But then, storing all the drawing information such that you can restore everything in the paintComponent,
may be covered in a lesson to come.

Greetz,
Piet

Thank you for your response.
The repaint() method was commented out in the starter file he gave us, and the current draw method was already done. To be honest, we haven't really learned much in regards to drawing/gui. We're kinda rushing this in at the very end..
Now, for the buttons, I plan on sticking them on their own little pane and pretting it up, I just wanted to make sure they work first.
Any advice in how the paint method would look or work?
Thanks,
Joe

[Piet Souris]

putting the buttons in a separate panel is certainly a good idea. You would need a separate
panel for your line drawings, then.

There are many ways in which you can do all the drawing in the paintComponent method.
One is to store all the points and the colors in some way, and do all the drawings later on.
Another way would be to draw to a BufferedImage instead of directly to a panel,
and paint that bufferedimage to your panel.

But I suggest to leave that to when you get the lessons that will cover this subject.

For now, I would advice to follow Ulfs remarks: get the colors working, and make sure
that a mousePressed event starts a new curve, instead of connecting the new point to
the former point.

Greetings,
Piet