How to change image when a key is pressed?

**jerinjose61** · August 21st, 2014, 12:57 AM

I am very much new to Java. I have just started learning event handling. Currently I am learning about Key Events. And am learning by doing. Well that is how one could learn anything in fact. I want to write a program in which the currently loaded image in the panel of a frame changes upon a key press say "Enter" or any other key. Please help me with the program.

**Ada Lovelace** · August 21st, 2014, 03:24 AM

What have you tried so far? Post any code you are having problems with.

Wishes Ada xx

**GregBrannon** · August 21st, 2014, 05:13 AM

Since I missed your palindrome topic from a few weeks ago while I was on vacation, welcome to the Forum! Please read this topic to learn how to post code correctly and other useful tips for newcomers.

Which layout manager are you using? How did you get from your palindrome program of a few weeks ago to GUI programming? The Oracle Tutorials are a great place to start.

**jerinjose61** · August 21st, 2014, 07:57 AM

//The panel class
package learnGUI.rev;
import java.awt.*;
import java.awt.event.*;
import java.io.*;
 
import javax.imageio.*;
import javax.swing.*;
 
import java.util.*;
public class ImagePanel extends JPanel
{
	public ImagePanel()
	{
	KeyHandler listener = new KeyHandler();
	addKeyListener(listener);
	setFocusable(true);
	}
    public void paintComponent(Graphics g)
    {
    	super.paintComponent(g);
    	ImageIcon i = new ImageIcon("C:\\Users\\Jerin_Jose.JerinJose\\Desktop\\KidX\\Number Images\\2.png");
    	i.paintIcon(this,g,500,70);
    } 
}
 
 
// KeyHandler Class
 
public class KeyHandler implements KeyListener {
 
	public void keyPressed(KeyEvent e)
	{
		int code = e.getKeyCode();
		if(code == KeyEvent.VK_ENTER)
		{
			// Dont Know What to do.
		}
	}
	public void keyReleased(KeyEvent e){}
	public void keyTyped(KeyEvent e){}
}

--- Update ---

Is this how I should even do this?? I know how to load an Image onto a panel and also to write a basic Key Listening program. When I write a System.out.println() statement inside if(code == KeyEvent.VK_ENTER) I am able to print statements like "Hello World" and all when i press the ENTER key. But i dont know to do something on a panel when I press a key.

--- Update ---

All I know right now is how to load an image and basic key listener program. Is this much knowledge enough to do this program? I tried linking the panel class and the KeyHandler class using objects but failed in that also. Please advice me on this topic.

**jocdrew21** · August 21st, 2014, 08:15 AM

Can you please use code tags when posting code like

//The panel class
package learnGUI.rev;
import java.awt.*;
import java.awt.event.*;
import java.io.*;
 
import javax.imageio.*;
import javax.swing.*;
 
import java.util.*;
public class ImagePanel extends JPanel
{
public ImagePanel()
{
KeyHandler listener = new KeyHandler();
addKeyListener(listener);
setFocusable(true);
}
public void paintComponent(Graphics g)
{
super.paintComponent(g);
ImageIcon i = new ImageIcon("C:\\Users\\Jerin_Jose.JerinJose\\Deskto p\\KidX\\Number Images\\2.png");
i.paintIcon(this,g,500,70);
} 
}
 
 
// KeyHandler Class
 
public class KeyHandler implements KeyListener {
 
public void keyPressed(KeyEvent e)
{
int code = e.getKeyCode();
if(code == KeyEvent.VK_ENTER)
{
// Dont Know What to do.
}
}
public void keyReleased(KeyEvent e){}
public void keyTyped(KeyEvent e){}
}

**Norm** · August 21st, 2014, 08:33 AM

@jocdrew21 Please edit the code in your post and give it proper formatting. Nested statements should be indented.

@jerinjose61 Please edit your post and wrap your code with code tags:
[code=java]
YOUR CODE GOES HERE
[/code]
to get highlighting and preserve formatting.

**jerinjose61** · August 21st, 2014, 08:53 AM

ThankYou!! I have edited my post.

So any advice on how to do the program?

--- Update ---

Okay! I tried doing the program using the following code. But there are errors. My idea is when I press the key "1" I load one image and when I press "2" I load another image. I tried doing this the following way but failed. Somebody please advise me on this. I am stuck here.

--- Update ---

import java.awt.*;
import java.awt.event.*;
import java.io.*;
import javax.imageio.*;
import javax.swing.*;
public class ImageTest {
	public static void main(String[] args) {
		ImageFrame frame = new ImageFrame();
		frame.setDefaultCloseOperation((JFrame.EXIT_ON_CLOSE));
		frame.setVisible(true);
	}
}
class ImageFrame extends JFrame
{
	public ImageFrame()
	{
		setTitle("KidX");
		setSize(500,500);
 
		ImagePanel panel = new ImagePanel();
		add(panel);
	}
}
class ImagePanel extends JPanel
{
	public ImagePanel()
	{
		KeyHandler listener = new KeyHandler(); 
		addKeyListener(listener);
		setFocusable(true);
	}
	public void img(int imgno)
	{
		ImageIcon a;		
		if (imgno == 1)
		{
			a = new ImageIcon("C:\\Users\\Jerin_Jose.JerinJose\\Desktop\\KidX\\Number Images\\1.png ");
		}
		else if (imgno == 2)
		{
			a = new ImageIcon("C:\\Users\\Jerin_Jose.JerinJose\\Desktop\\KidX\\Number Images\\2.png ");
		}
	}
	public void paintComponent(Graphics g)
	{
		super.paintComponent(g);
		a,paintIcon(this,g,200,200); // Error Here: a cannot be resolved
	}
}
class KeyHandler implements KeyListener
{
	public void keyPressed(KeyEvent event)
	{
		int KeyCode = event.getKeyCode();
		if(KeyCode == KeyEvent.VK_1) 
		{
			img(1); // Error Here: Method img(int) not defined.
		}
		if(KeyCode == KeyEvent.VK_2)
		{
			img(2); //Error Here: Method img(int) not defined.
		}
	}
	public void keyReleased(KeyEvent event){}
	public void keyTyped(KeyEvent event){}
}

**Norm** · August 21st, 2014, 09:32 AM

But there are errors.

When you have errors, you should copy the full text of the message and paste it here.

**jerinjose61** · August 21st, 2014, 09:49 AM

I refined my code and eclipse now shows no errors. But the image is not loading. And there are run time errors. The code and errors are given below.

--- Update ---

import java.awt.*;
import java.awt.event.*;
import java.io.*;
import javax.imageio.*;
import javax.swing.*;
public class ImageTest 
{
	public static void main(String[] args) 
	{
		ImageFrame frame = new ImageFrame();
		frame.setDefaultCloseOperation((JFrame.EXIT_ON_CLOSE));
		frame.setVisible(true);
	}
}
class ImageFrame extends JFrame
{
	public ImageFrame()
	{
		setTitle("KidX");
		setSize(500,500);
		ImagePanel panel = new ImagePanel();
		add(panel);
	}
}
class ImagePanel extends JPanel
{
	public ImagePanel()
	{
		KeyHandler listener = new KeyHandler(); 
		addKeyListener(listener);
		setFocusable(true);
	}
	public void img(int imgno)
	{	
		if (imgno == 1)
		{
			a = new ImageIcon("C:\\Users\\Jerin_Jose.JerinJose\\Desktop\\KidX\\Number Images\\1.png ");
		}
		else if (imgno == 2)
		{
			a = new ImageIcon("C:\\Users\\Jerin_Jose.JerinJose\\Desktop\\KidX\\Number Images\\2.png ");
		}
	}
	public void paintComponent(Graphics g)
	{
		super.paintComponent(g);
		a.paintIcon(this,g,200,200);
	}
private ImageIcon a;
private class KeyHandler implements KeyListener
{
	public void keyPressed(KeyEvent event)
	{
		int KeyCode = event.getKeyCode();
		if(KeyCode == KeyEvent.VK_1) 
		{
			int n = 1;
			img(n);
		}
		if(KeyCode == KeyEvent.VK_2)
		{
			int o = 2;
			img(o); 
		}
	}
	public void keyReleased(KeyEvent event){}
	public void keyTyped(KeyEvent event){}
}
}

--- Update ---

/*Errors
Exception in thread "AWT-EventQueue-0" java.lang.NullPointerException
	at learnGUI.rev.ImagePanel.paintComponent(ImageTest.java:48)
	at javax.swing.JComponent.paint(Unknown Source)
	at javax.swing.JComponent.paintChildren(Unknown Source)
	at javax.swing.JComponent.paint(Unknown Source)
	at javax.swing.JComponent.paintChildren(Unknown Source)
	at javax.swing.JComponent.paint(Unknown Source)
	at javax.swing.JLayeredPane.paint(Unknown Source)
	at javax.swing.JComponent.paintChildren(Unknown Source)
	at javax.swing.JComponent.paintToOffscreen(Unknown Source)
	at javax.swing.RepaintManager$PaintManager.paintDoubleBuffered(Unknown Source)
	at javax.swing.RepaintManager$PaintManager.paint(Unknown Source)
	at javax.swing.RepaintManager.paint(Unknown Source)
	at javax.swing.JComponent.paint(Unknown Source)
	at java.awt.GraphicsCallback$PaintCallback.run(Unknown Source)
	at sun.awt.SunGraphicsCallback.runOneComponent(Unknown Source)
	at sun.awt.SunGraphicsCallback.runComponents(Unknown Source)
	at java.awt.Container.paint(Unknown Source)
	at java.awt.Window.paint(Unknown Source)
	at javax.swing.RepaintManager$3.run(Unknown Source)
	at javax.swing.RepaintManager$3.run(Unknown Source)
	at java.security.AccessController.doPrivileged(Native Method)
	at java.security.ProtectionDomain$1.doIntersectionPrivilege(Unknown Source)
	at javax.swing.RepaintManager.paintDirtyRegions(Unknown Source)
	at javax.swing.RepaintManager.paintDirtyRegions(Unknown Source)
	at javax.swing.RepaintManager.prePaintDirtyRegions(Unknown Source)
	at javax.swing.RepaintManager.access$1100(Unknown Source)
	at javax.swing.RepaintManager$ProcessingRunnable.run(Unknown Source)
	at java.awt.event.InvocationEvent.dispatch(Unknown Source)
	at java.awt.EventQueue.dispatchEventImpl(Unknown Source)
	at java.awt.EventQueue.access$400(Unknown Source)
	at java.awt.EventQueue$3.run(Unknown Source)
	at java.awt.EventQueue$3.run(Unknown Source)
	at java.security.AccessController.doPrivileged(Native Method)
	at java.security.ProtectionDomain$1.doIntersectionPrivilege(Unknown Source)
	at java.awt.EventQueue.dispatchEvent(Unknown Source)
	at java.awt.EventDispatchThread.pumpOneEventForFilters(Unknown Source)
	at java.awt.EventDispatchThread.pumpEventsForFilter(Unknown Source)
	at java.awt.EventDispatchThread.pumpEventsForHierarchy(Unknown Source)
	at java.awt.EventDispatchThread.pumpEvents(Unknown Source)
	at java.awt.EventDispatchThread.pumpEvents(Unknown Source)
	at java.awt.EventDispatchThread.run(Unknown Source)
*/

--- Update ---

/*Errors
Exception in thread "AWT-EventQueue-0" java.lang.NullPointerException
	at learnGUI.rev.ImagePanel.paintComponent(ImageTest.java:48)
	at javax.swing.JComponent.paint(Unknown Source)
	at javax.swing.JComponent.paintChildren(Unknown Source)
	at javax.swing.JComponent.paint(Unknown Source)
	at javax.swing.JComponent.paintChildren(Unknown Source)
	at javax.swing.JComponent.paint(Unknown Source)
	at javax.swing.JLayeredPane.paint(Unknown Source)
	at javax.swing.JComponent.paintChildren(Unknown Source)
	at javax.swing.JComponent.paintToOffscreen(Unknown Source)
	at javax.swing.RepaintManager$PaintManager.paintDoubleBuffered(Unknown Source)
	at javax.swing.RepaintManager$PaintManager.paint(Unknown Source)
	at javax.swing.RepaintManager.paint(Unknown Source)
	at javax.swing.JComponent.paint(Unknown Source)
	at java.awt.GraphicsCallback$PaintCallback.run(Unknown Source)
	at sun.awt.SunGraphicsCallback.runOneComponent(Unknown Source)
	at sun.awt.SunGraphicsCallback.runComponents(Unknown Source)
	at java.awt.Container.paint(Unknown Source)
	at java.awt.Window.paint(Unknown Source)
	at javax.swing.RepaintManager$3.run(Unknown Source)
	at javax.swing.RepaintManager$3.run(Unknown Source)
	at java.security.AccessController.doPrivileged(Native Method)
	at java.security.ProtectionDomain$1.doIntersectionPrivilege(Unknown Source)
	at javax.swing.RepaintManager.paintDirtyRegions(Unknown Source)
	at javax.swing.RepaintManager.paintDirtyRegions(Unknown Source)
	at javax.swing.RepaintManager.prePaintDirtyRegions(Unknown Source)
	at javax.swing.RepaintManager.access$1100(Unknown Source)
	at javax.swing.RepaintManager$ProcessingRunnable.run(Unknown Source)
	at java.awt.event.InvocationEvent.dispatch(Unknown Source)
	at java.awt.EventQueue.dispatchEventImpl(Unknown Source)
	at java.awt.EventQueue.access$400(Unknown Source)
	at java.awt.EventQueue$3.run(Unknown Source)
	at java.awt.EventQueue$3.run(Unknown Source)
	at java.security.AccessController.doPrivileged(Native Method)
	at java.security.ProtectionDomain$1.doIntersectionPrivilege(Unknown Source)
	at java.awt.EventQueue.dispatchEvent(Unknown Source)
	at java.awt.EventDispatchThread.pumpOneEventForFilters(Unknown Source)
	at java.awt.EventDispatchThread.pumpEventsForFilter(Unknown Source)
	at java.awt.EventDispatchThread.pumpEventsForHierarchy(Unknown Source)
	at java.awt.EventDispatchThread.pumpEvents(Unknown Source)
	at java.awt.EventDispatchThread.pumpEvents(Unknown Source)
	at java.awt.EventDispatchThread.run(Unknown Source)
*/

**Norm** · August 21st, 2014, 09:51 AM

Exception in thread "AWT-EventQueue-0" java.lang.NullPointerException
at learnGUI.rev.ImagePanel.paintComponent(ImageTest.j ava:48)

There is a null value when line 48 is executed. Look at line 48, find the null value and then backtrack in the code to see where the null value came from.

**jerinjose61** · August 21st, 2014, 09:59 AM

line 48 is actually the a.paintComponent(this,g,200,200) statement.
So that means a is having a value null? There is no image in a?

--- Update ---

But I used the img method to load an image to a when i press the key "1" and "2" using the keyPressed method of keyListener.
How can I rectify the error? Please advise.

**Norm** · August 21st, 2014, 10:04 AM

The paintComponent() method is called BEFORE the user gets a chance to press any keys. Add code there to test if a is null before using the value in a.

**jerinjose61** · August 21st, 2014, 10:12 AM

Yeah you are right! There is nothing in a! What is the solution to this problem?
How can I rectify it? Where should i actually place the keyPressed method?

--- Update ---

Yeah you are right! There is nothing in a! What is the solution to this problem?
How can I rectify it? Where should i actually place the keyPressed method?

**Norm** · August 21st, 2014, 10:15 AM

The test for a being null would be in the paintComponent() method.

You can't change the order of when the methods are executed. The user's key pressed can't be recognized before the screen is painted.

**jerinjose61** · August 21st, 2014, 10:20 AM

So I Should paint the screen first then only can I check for any keystrokes and then paint it again?

**Norm** · August 21st, 2014, 10:29 AM

You don't control when the system calls the paint methods. The repaint() method requests that a call be made some time (usually soon).
What do you want to see on the screen BEFORE the user presses any key?
What do you want the paintComponent() method to display if a is null?

**jerinjose61** · August 21st, 2014, 10:42 AM

BEFORE the user presses any key I want to display a "WELCOME" image. I have the image.
And then when I press the key "1" I want to load another image and when I press the key "2" I want to load another message.
That is what i am trying to do.

--- Update ---

Please advise what I should do.

**Norm** · August 21st, 2014, 10:47 AM

Set a to the first image in the constructor so its value is not null when paintComponent() is called.

**jerinjose61** · August 21st, 2014, 10:53 AM

Okay. I did that and thankfully my WELCOME image has loaded!!!

Now what should I do to load another Image when I press the key "1".

**Norm** · August 21st, 2014, 10:58 AM

Change a and call repaint().

**jerinjose61** · August 21st, 2014, 11:03 AM

package learnGUI.rev;
import java.awt.*;
import java.awt.event.*;
import java.io.*;
import javax.imageio.*;
import javax.swing.*;
public class ImageTest 
{
	public static void main(String[] args) 
	{
		ImageFrame frame = new ImageFrame();
		frame.setDefaultCloseOperation((JFrame.EXIT_ON_CLOSE));
		frame.setVisible(true);
	}
}
class ImageFrame extends JFrame
{
	public ImageFrame()
	{
		setTitle("KidX");
		setSize(500,500);
		ImagePanel panel = new ImagePanel();
		add(panel);
	}
}
class ImagePanel extends JPanel
{
	public ImagePanel()
	{
		KeyHandler listener = new KeyHandler(); 
		addKeyListener(listener);
		setFocusable(true);
		a = new ImageIcon("C:\\Users\\Jerin_Jose.JerinJose\\Desktop\\KidX\\Welcome\\welcome2.png");
	}
	public void img(int imgno)
	{	
		if (imgno == 1)
		{
		l = 1;
		}
		else if (imgno == 2)
		{
		l = 2;	  
		}
	}
	public void paintComponent(Graphics g)
	{   
		if(l == 1)
		{
			a = new ImageIcon("C:\\Users\\Jerin_Jose.JerinJose\\Desktop\\KidX\\Number Images\\1.png");
			repaint();
		}
		else if(l == 2)
		{
			a = new ImageIcon("C:\\Users\\Jerin_Jose.JerinJose\\Desktop\\KidX\\Number Images\\2.png");
			repaint();
		}
		super.paintComponent(g);
		a.paintIcon(this,g,200,200);
	}
private ImageIcon a;
private int l;
private class KeyHandler implements KeyListener
{
	public void keyPressed(KeyEvent event)
	{
		int KeyCode = event.getKeyCode();
		if(KeyCode == KeyEvent.VK_1) 
		{
			int n = 1;
			img(n);
		}
		if(KeyCode == KeyEvent.VK_2)
		{
			int o = 2;
			img(o); 
		}
	}
	public void keyReleased(KeyEvent event){}
	public void keyTyped(KeyEvent event){}
 
}
}

**Norm** · August 21st, 2014, 11:05 AM

New images should NOT be loaded in the paintComponent() method. Load the image outside of that method and then call repaint() to have the system call the paintComponent() method where the newly loaded image can be displayed.

BTW It is very poor coding style to use Single letter variable names.
Variable names should describe what the variable contains.

**jerinjose61** · August 21st, 2014, 11:17 AM

The first code after your reply is what I did. Is the repaint() method in the right place? Because upon pressing "1" the image is not changing.

--- Update ---

import java.awt.*;
import java.awt.event.*;
import java.io.*;
import javax.imageio.*;
import javax.swing.*;
public class ImageTest 
{
	public static void main(String[] args) 
	{
		ImageFrame frame = new ImageFrame();
		frame.setDefaultCloseOperation((JFrame.EXIT_ON_CLOSE));
		frame.setVisible(true);
	}
}
class ImageFrame extends JFrame
{
	public ImageFrame()
	{
		setTitle("KidX");
		setSize(500,500);
		ImagePanel panel = new ImagePanel();
		add(panel);
	}
}
class ImagePanel extends JPanel
{
	public ImagePanel()
	{
		KeyHandler listener = new KeyHandler(); 
		addKeyListener(listener);
		setFocusable(true);
		a = new ImageIcon("C:\\Users\\Jerin_Jose.JerinJose\\Desktop\\KidX\\Welcome\\welcome2.png");
	}
	public void img(int imgno)
	{	
		if (imgno == 1)
		{
			a = new ImageIcon("C:\\Users\\Jerin_Jose.JerinJose\\Desktop\\KidX\\Number Images\\1.png");
			repaint();
		}
		else if (imgno == 2)
		{
			a = new ImageIcon("C:\\Users\\Jerin_Jose.JerinJose\\Desktop\\KidX\\Number Images\\2.png");
			repaint();  
		}
	}
	public void paintComponent(Graphics g)
	{   
		super.paintComponent(g);
		a.paintIcon(this,g,200,200);
	}
private ImageIcon a;
private class KeyHandler implements KeyListener
{
	public void keyPressed(KeyEvent event)
	{
		int KeyCode = event.getKeyCode();
		if(KeyCode == KeyEvent.VK_1) 
		{
			int n = 1;
			img(n);
		}
		if(KeyCode == KeyEvent.VK_2)
		{
			int o = 2;
			img(o); 
		}
	}
	public void keyReleased(KeyEvent event){}
	public void keyTyped(KeyEvent event){}
 
}
}

--- Update ---

The above code is what I did. I changed the image in another method. Then called repaint() method. But the Image is still not changing upon keypress. what might be the problem?

**Norm** · August 21st, 2014, 11:28 AM

The code works for me.

**jerinjose61** · August 21st, 2014, 11:33 AM

Only the WELCOME image is being loaded. There are no errors but the Image is not changing upon Key press.

Thread: How to change image when a key is pressed?

LinkBack

Thread Tools

Display

How to change image when a key is pressed?

Related threads:

Re: How to change image when a key is pressed?

Re: How to change image when a key is pressed?

Re: How to change image when a key is pressed?

Re: How to change image when a key is pressed?

Re: How to change image when a key is pressed?

The Following User Says Thank You to Norm For This Useful Post:

Re: How to change image when a key is pressed?

Re: How to change image when a key is pressed?

Re: How to change image when a key is pressed?

Re: How to change image when a key is pressed?

Re: How to change image when a key is pressed?

Re: How to change image when a key is pressed?

Re: How to change image when a key is pressed?

Re: How to change image when a key is pressed?

Re: How to change image when a key is pressed?

Re: How to change image when a key is pressed?

Re: How to change image when a key is pressed?

Re: How to change image when a key is pressed?

Re: How to change image when a key is pressed?

Re: How to change image when a key is pressed?

Re: How to change image when a key is pressed?

Re: How to change image when a key is pressed?

Re: How to change image when a key is pressed?

Re: How to change image when a key is pressed?

Re: How to change image when a key is pressed?

Similar Threads

[SOLVED] trying to change image by mouse click

KeyListener - how to make program react to the key that was pressed twice?

Is Key Pressed statements

how to know user pressed a key in the keyboard

[SOLVED] Change the size of an image

Tags for this Thread