how to move pics to other direction ?

[conanzz]

I have a picture with 2 buttons, and I want to move it through these buttones
the problem is I don`t know how to make the actionListener for the other button to move to the other side,

pictures are in the attachments

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



public class Transformation2D extends JFrame implements ActionListener {


    MyDrawingPanel drawingPanel = new MyDrawingPanel();
    MyDrawingPanel2 drawingPanel2 = new MyDrawingPanel2();
    JButton goLeft = new JButton("<--");
    JButton goRight = new JButton("-->");
    int previousX;
	int previousY;
    Image stick1;
    Image stick2;
	boolean movementFlag = false;
    public Transformation2D(){
        super("Walking Stickfigure");
        setSize(600,200);
        previousX = 250;
        previousY = 0;
		setBackground(Color.WHITE);
        setLayout(new BorderLayout());
        add(drawingPanel,BorderLayout.CENTER);
        add(drawingPanel2,BorderLayout.SOUTH);
        drawingPanel2.add(goLeft);
        drawingPanel2.add(goRight);
        stick1 = null;
        stick2 = null;

        try{
        stick1 = ImageIO.read(new File("sw1.png"));
        stick2 = ImageIO.read(new File("sw2.png"));
        }
        catch(IOException ex){
            JOptionPane.showMessageDialog(this, ex.getMessage(), "Error", JOptionPane.ERROR_MESSAGE);
            System.exit(0);
        }
		goLeft.addActionListener(this);
		goRight.addActionListener(this);
		setVisible(true);
    }

	public void actionPerformed(ActionEvent ae){
			if(ae.getSource() == goLeft){
				drawingPanel.repaint();
			}
			else if(ae.getSource() == goRight){
				drawingPanel2.repaint();
				}

			}

    public static void main(String[] args) {
        new Transformation2D();
    }


	class MyDrawingPanel extends JPanel{
		public MyDrawingPanel(){
			setBackground(Color.WHITE);
		}

		public void paintComponent(Graphics g){

                    g.clearRect(previousX,previousY,stick1.getWidth(this),stick1.getHeight(this));
                    g.drawLine(0,134,600,134);
                    previousX -= 3;

                    if(movementFlag){
                    	g.drawImage(stick1, previousX, previousY, this);
                    	movementFlag = false;
                    }
                    else{
                   	g.drawImage(stick2, previousX, previousY, this);
                   	movementFlag = true;
                    }
	}
}
	class MyDrawingPanel2 extends JPanel{
		public MyDrawingPanel2(){
			setBackground(Color.WHITE);
		}

		public void paintComponent(Graphics g){

                    g.clearRect(previousX,previousY,stick1.getWidth(this),stick1.getHeight(this));
                    g.drawLine(0,134,600,134);
                   previousX += 3;

                    if(movementFlag){
                    	g.drawImage(stick1, previousX, previousY, this);
                    	movementFlag = false;
                    }
                    else{
                   	g.drawImage(stick2, previousX, previousY, this);
                   	movementFlag = true;
                    }
	}
}


}

[mKorbel]

JLabel is best of ways how to display Icon or ImageIcon

[conanzz]

My problem is how to move ,, please try the code and you`ll understand me sir

[Ezzaral]

paintComponent() should just be used to render graphics based on current state. You should avoid changing variables in that method. Update your variables externally in some other method and then call repaint() to render the update.

In your case, that would entail moving the code that changes previousX into your action listeners before repainting.

Edit: Note that I didn't actually run your code or study it in detail. This is just a general suggestion based on a quick glance.

[NormR1]

Which is the "other"button?
I see two one on top and one on bottom.
Which button is supposed to do what?
On the bottom there are two buttons with arrows. When I press them the upper button moves and then the bottom button moves. The images seem to overwrite each other also.

Please explain what the program is supposed to do.

[conanzz]

paintComponent() should just be used to render graphics based on current state. You should avoid changing variables in that method. Update your variables externally in some other method and then call repaint() to render the update.

In your case, that would entail moving the code that changes previousX into your action listeners before repainting.

how can I do it ??

g.clearRect(previousX,previousY,stick1.getWidth(this),stick1.getHeight(this));
                    g.drawLine(0,134,600,134);
                    previousX -= 3;

this code is only works inside paintComponent() with variable g ... isn`t that right ?

[mKorbel]

crossposted here

[Ezzaral]

I told you explicitly: update "previousX" in your listener.

[conanzz]

Which is the "other"button?
I see two one on top and one on bottom.
Which button is supposed to do what?
On the bottom there are two buttons with arrows. When I press them the upper button moves and then the bottom button moves. The images seem to overwrite each other also.

Please explain what the program is supposed to do.

here I should make 2 buttons one to move the pic to the right(which has the ==>)
and the other is to move to the left(<==)
the other picture is another problem I couldnt fix it, leave it later ^_

[NormR1]

You need to have separate x values for the items that are being moved.
They belong in the class that is moving the images.

[conanzz]

I told you explicitly: update "previousX" in your listener.

it wont move(repaint) if I updated it in the listener !!!

[NormR1]

Please show your code where "it won't move".

You can change the x position in the listener, call repaint and the paint method will draw the image at the new x position set by the listener.

[conanzz]

Please show your code where "it won't move".

You can change the x position in the listener, call repaint and the paint method will draw the image at the new x position set by the listener.

public void actionPerformed(ActionEvent ae){
			if(ae.getSource() == goLeft ){
			 previousX -= 3;
			 drawingPanel.repaint();
            } 
            	
            if(ae.getSource() == goRight ){
           	  previousX += 3;
           	  drawingPanel.repaint();
            }
	}

if I pressed on the left it will go left, but if I pressed the right it wont move

[NormR1]

You need to have a separate value of x for each panel.
Your code appears to use the same x for both panels.

Try debugging your code by printing out the value of previousX every time you change it and every time the paintComponent method uses it. The print outs will show you what is happening to its value.

[conanzz]

how to make a separate value I didnt get it

[NormR1]

Each panel should have its own value of x as a class variable. You have one value of x for all the panels.
How can you move the two panels in different x directions if there is only one value of x that can be used to keep track of the all the panels x position? Don't you need an x for each panel?

[conanzz]

I really dont know "^_^

[NormR1]

Can you do this:
Try debugging your code by printing out the value of previousX every time you change it and every time the paintComponent methods uses it. The print outs will show you what is happening to its value.

[conanzz]

I did it, it decreases when I press left, but with the right it remains static

[NormR1]

Did you add a println here:

if(ae.getSource() == goRight ){
           	  previousX += 3;
                  System.out.println("goRight X=" + previousX); // show X

If you did you would see that the value of previousX increased by 3

If you did not see that message, then you know that the if test returned false and the value of previousX was not increased.

Did you do that? What did you see printed out?

[conanzz]

public void actionPerformed(ActionEvent ae){
			if(ae.getSource() == goLeft){
				previousX -= 3;
				drawingPanel.repaint();
				System.out.println(previousX);
			}
			else if(ae.getSource() == goRight){
				previousX += 3;
				drawingPanel.repaint();
				System.out.println(previousX);
				}

			}

right button give me static number, while left is increasing by 3

[NormR1]

right button give me static number, while left is increasing by 3

That's strange. The goLeft code has -= 3. How can left be increasing???
How do you know where the number was printed? Your printlns don't say which code is being executed.

You need to add id Strings to your printouts so you know which one is printing:
See the String I have in my printlns in my last post.

Also you print the value AFTER you call paintComponent. You need to add a println EVERY PLACE that you change the value of previousX. EVERY PLACE. Your earlier code shows that you change the value of previousX in the paintComponent method. Add printlns next to EVERY PLACE where you change the value of previousX.

[conanzz]

I found the mistake !!! finally....
it was in

class MyDrawingPanel2 extends JPanel { 
       public MyDrawingPanel2() { 
           setBackground(Color.WHITE); 
       }     
      public void paintComponent(Graphics g) {
      g.clearRect(previousXB, previousY, stick1.getWidth(this),stick1.getHeight(this));
      g.drawLine(0, 134, 600, 134);
      previousXB += 3;

[NormR1]

The x variable should be defined inside of the MyDrawngPanel class.
It should NOT be a global variable.

You should only have one MyDrawingPanel class. You can create multiple instances of the class and pass the image it is to draw and any other specific data to it in the constructor.
This would allow you to create 1 or 20 instances of the MyDrawingPanel and position them around on your GUI. You can not easily add more drawing panels to your existing code.

[conanzz]

Thank you sir, I appreciate your help