Multiple images from different classes

[superbriggs]

Hello,

In the project I'm working on at the moment, I have a number of different images all of which have their methods wrapped up in different classes.

Everything has been working fine while I've been designing them, but I dont seem to be able to put more than one in the window at the same time. Here's the kind of thing I've been doing:

The main class:

JFrame w = new JFrame();
w.setSize(800, 600);
w.addKeyListener(kl);
w.setDefaultCloseOperation(w.EXIT_ON_CLOSE);
w.setFocusable(true);

Erik erik = new Erik();
erik.addKeyListener(kl);
w.add(erik);
w.pack();
w.setVisible(true);

Inside Erik we have something like:

Erik()
{
    setImage("image.png", 100, 100)
}

private void setImage( String fileName, int x, int y )
{
    xPos = x;//Global Variables (within the class)
    yPos = y;

    try
    {
        File input = new File(fileName);
        myimage = ImageIO.read(input);//Also global
    } catch (IOException ie) {
        System.err.println("Error:"+ie.getMessage()+" : "+fileName);
    }
}

public void paint(Graphics g) {
        super.paint(g);
        g.drawImage( myimage, xPos, yPos, null);
    }

When I added a second class (ie second image) to the main class, it seems to overwrite the first;

The only thing its because I'm only drawing one images in paint. But then all I can think of doing is having a list of images in the first class (with co-ordinates) and passing the first class as an object to all the other ones. But this does seem rather messy.

What is the best way to do this?

Thank you

Rob Briggs

[keang]

What class does Erik extend? As you are using Swing it should be JComponent and you shouldn't be overriding paint() but should be overriding paintComponent() instead.

Have you set the LayoutManager to null?

Can you show how you are adding a second image.

[superbriggs]

Erik extended panel - I've changed that to JPanel.

I have changed the paint to paintComponent.

I was trying to add more images by just repeating:

Erik erik = new Erik();
erik.addKeyListener(kl);
w.add(erik);
w.pack();

but with different classes. Is this wrong?

The images are in fact animated. To do this I have a thread which sleeps and then runs a method in Erik which changes the global variables which contain his co-ordinates. Then call repaint()

I bevlive this calls what I had a paint() but you say should be paintComponent(). This is what is in that:

public void paintComponent(Graphics g) {
        super.paintComponent(g);
        g.drawImage( myimage, xPos, yPos, null);
    }

I hope that gives you enough information.

Thanks

[keang]

Erik extended panel - I've changed that to JPanel.

Good.

I was trying to add more images by just repeating: ...

That looks ok.
BTW You only need to call pack once ie just after adding all the images and just before displaying the frame.

What about the layout manager?

[superbriggs]

I've added

w.setLayout(null);

but this results in none of the images showing...

Thanks

[superbriggs]

In one example I read, they kind of wrapped it up in a Jlabel. Could that be the issue?

[keang]

Sorry I didn't mean you should call setLayout(null), I was worried that you might have done this in your code already.

Jlabel has built in support for displaying an Icon so you could load your image as an Icon and use that.

Without seeing all the code it's hard to say what is happening but I suspect your components aren't setting their size to the image size and so they are displaying at zero width and height. What you could do is set a GridLayout manager displaying say 2 rows and 2 columns on the panel that holds the images and see if that forces all the images to display (GridLayout effectively divides the screen into a grid of equal sized areas and gives each component an area to display in).

[superbriggs]

Sorry, I'm not entirely sure how to add an image into a grid without giving it a co-ordintate.

In terms of seeing more, I'm not quite sure what there is to say, without copying reams and reams of code. All I do is have a number of classes, all of which extend:

public class ImageDisplay extends JPanel
{
    protected int xPos;
    protected int yPos;
    protected Boolean visible;
    Image myimage;

    public void setImage( String fileName, int x, int y )
    {
        xPos = x;
        yPos = y;

        try
        {
            File input = new File(fileName);
            myimage = ImageIO.read(input);
        } catch (IOException ie) {
            System.err.println("Error:"+ie.getMessage()+" : "+fileName);
        }
    }

    @Override
    public void paintComponent(Graphics g) {
        super.paintComponent(g);
        g.drawImage( myimage, xPos, yPos, null);
    }
}

Methods in the extended classes simply change the three global variables (xPos, yPos and myimage) and call repaint(). All the objects of all the classes are created in the main run function, and added using the add() function.

I have, however, noticed that if I test my background image, it appears larger than it should. I have set the window size to be exactly the same the picture, yet the window is smaller. Could this indicate your right about the image sizing?

Thanks

[keang]

Sorry, I'm not entirely sure how to add an image into a grid without giving it a co-ordintate.

Ok, I think your problem is you don't understand how components are laid out by layout managers. If you use a layout manager (JPanel by default uses FlowLayout) the location and for some layout managers the size of your component is set by the layout manager. When you paint in a component your coordinates are relative to the components local space ie 0,0 is the top left corner regardless of where the component is positioned by the component it has been added to. If the layout manager of the panel holding all your components determines a particular component is located at 100,100 then if you paint your image at 0,0 within this component it will appear at 100,100 on the owning panel. If you are attempting to set the image location yourself then for any component other then the one placed at 0,0 you are possibly drawing the image outside the visible area of the component.

If you want to be able to move images around the screen then you have to remove the layout manager (setLayout(null)) and handle setting the component's size and location yourself and rather than setting the location to draw the image within the component you should be setting the location of the component itself.

I have, however, noticed that if I test my background image, it appears larger than it should. I have set the window size to be exactly the same the picture, yet the window is smaller. Could this indicate your right about the image sizing?

I'm not sure I understand what you mean by this. If you set the frame to the size of your image then the image won't display at the right size because a frame has borders which take up some room. You need to set the JPanel holding the image to the image size and use pack() to let the JFrame size itself accordingly.

[dlorde]

You might find this useful: Laying Out Components Within a Container, especially: How To Use GridLayout.

Any programming problem can be solved by adding a level of indirection...
Anon.

[superbriggs]

Hmm ok. I've now changed everywhere I called repaint() to call makeTheMove() which does:

this.setLocation( xPos, yPos );

My setImage() now says:

public void setImage( String fileName, int x, int y, int w, int h )
    {
        xPos = x;
        yPos = y;

        this.setSize( w, h );

        try
        {
            File input = new File(fileName);
            myimage = ImageIO.read(input);
        } catch (IOException ie) {
            System.err.println("Error:"+ie.getMessage()+" : "+fileName);
        }
    }

But now now images show. I have called makeTheMove() stright after calling setImage()

Sorry about this.

[superbriggs]

The same thing happens when I use setBounds instead of setLocation. I've not seen any example or tutorial which talks about animation not use the paint/repaint method

[keang]

Your going to have to post enough code to demo the problem so I can have a closer look at your code. You don't have to post all your code but what you post has to compile so I can run it.

[superbriggs]

Test.java

import java.awt.Component.*;
import javax.swing.InputMap.*;
import javax.swing.ActionMap.*;
import javax.swing.*;
import javax.swing.JFrame;

public class Test implements Runnable
{
    public static void main( String args[] )
    {
        Test program = new Test();
        SwingUtilities.invokeLater(program);
    }

    public void run()
    {
        JFrame w = new JFrame();
        w.setDefaultCloseOperation(w.EXIT_ON_CLOSE);
        w.setFocusable(true);
        w.setLayout(null);

        ImageDisplay background = new ImageDisplay();
        background.setImage( "img/page/pagesit.png", 100, 100, 88, 93 );
        background.makeTheMove();
        w.add(background);

        background.setVisible( true );
        w.setSize(800, 600); //Just while I'm trying to get one image to work
        w.setLocationByPlatform(true);
        w.setVisible(true);

    }
}

ImageDisplay.java

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

public class ImageDisplay extends JPanel
{
    protected int xPos;
    protected int yPos;
    protected int w;
    protected int h;
    protected Boolean visible;
    protected Image myimage;

    public void setImage( String fileName, int x, int y, int w, int h )
    {
        xPos = x;
        yPos = y;

        this.setSize( w, h );

        try
        {
            File input = new File(fileName);
            myimage = ImageIO.read(input);
        } catch (IOException ie) {
            System.err.println("Error:"+ie.getMessage()+" : "+fileName);
        }
    }

    protected void makeTheMove()
    {
        System.out.println("In makeTheMove()");
        this.setLocation( xPos, yPos );
    }

}

[keang]

Your ImageDisplay class is missing the paintComponent method. try adding this:

    @Override
    public void paintComponent(Graphics g) {
        super.paintComponent(g);
        g.drawImage( myimage, 0, 0, null);
    }

Then in your Test class's run method you can add multiple copies of the image as follows:

        ImageDisplay[] images = new ImageDisplay[5];
        
        for ( int i = 0; i < images.length; i++ )
	        {
	        images[i] = new ImageDisplay();
	        images[i].setImage( "img/page/pagesit.png", 60*i, 30*i, 88, 93 );
	        images[i].makeTheMove();
	        w.add(images[i]);
	        }

You probably should set the ImageDisplay to transparent (call setOpaque(false) in the constructor) so if the image has a transparent background the panel doesn't draw it's own background over the top of any images it overlaps.