Is there a way to show an image in a JTable as a thumbnail?

[Mike Lipay]

As one column in my JTable I want to display an image in thumbnail size, the intent is for the viewer to click on the image which will then open a full-size view. I don't want to create two images (thumbnail and full size), is it possible to tell the JTable to reduce the size of the image to, say, 50x50?

Here is the table entry as it currently exists:

{ 10000, "12/25/2008", "Engine Replacement", "Engine, hoses, fluids", 2453.85, new ImageIcon("Files/2009-03-20 Engine.png") }

Thanks,

Mike

[Rob Spoor]

Check out how TableCellRenderers work. By default, for Icon, it returns a JLabel that contains the image. I'm sure you can use that to your advantage.

[Mike Lipay]

Rob Prime wrote:Check out how TableCellRenderers work. By default, for Icon, it returns a JLabel that contains the image. I'm sure you can use that to your advantage.

If I knew how to resize and image, it might. I have been looking at the renderers and haven't seen anything about sizing an image.

[Mike Lipay]

Mike Lipay wrote:

Rob Prime wrote:Check out how TableCellRenderers work. By default, for Icon, it returns a JLabel that contains the image. I'm sure you can use that to your advantage.

If I knew how to resize and image, it might. I have been looking at the renderers and haven't seen anything about sizing an image.

I think I need to find a new forum, one made for beginners. I work 90% in the mainframe arena, just dabbling with Java, which makes Java a bit harder to pick up. Sun's java docs are cryptic to me, so I need more help than just "read the tablecellrenderer docs". You guys are good, but too far above to provide the kind of help I need.

[Rob Spoor]

We try to let you find the answers yourself first, nudging you a bit in the right direction. So here's another nudge: Graphics.drawImage is overloaded to take a width and height. You now have several options:

1) create a BufferedImage:

BufferedImage thumbnail = new BufferedImage(50, 50, BufferedImage.TYPE_INT_ARGB); // or another type
Graphics2D g2d = thumbnail.createGraphics();
g2d.drawImage(...); //use null or an existing component for the ImageObserver; how about the JTable ;)
g2d.dispose();
// the image is now ready
// create an Icon for it:
ImageIcon icon = new ImageIcon(thumbnail);

2) Sub class a JLabel and override its paintComponent to draw the image. It's a bit unconventional though.

3) create your own implementation of Icon which you then add to the table. Your TableModel must return Icon.class for the column. This icon implementation is quite easy:
- getIconWidth() and getIconHeight() return the thumbnail size
- paintIcon paints the image with the custom size on the Graphics object.


Personally, I'd go for option 1. The scaling may take a long time, and if you use options 2 or 3 you may end up performing the same scaling operation over and over, each time the cells are repainted.

[Darryl Burke]

Rob Prime wrote:
2) Sub class a JLabel and override its paintComponent to draw the image. It's a bit unconventional though.

Bit of a nitpick, but if you're going to override paintComponent there's really no point in extending JLabel, might as well extend JPanel or JComponent.

A fourth approach could be to create a ThumbnailIcon class. Code typed here, may have typos or other bugs ;)

public class ThumbnailIcon implements Icon {
  
  int width, height;
  Image image;
  
  public ThumbnailIcon(Image image, int width) {
    this.image = image;
    this.width = width;
    this.height = (width * image.getHeight(null)) / image.getWidth(null);
  }
  
  // other constructor(s) if desired
  
  public int getIconWidth() {
    return width;
  }

  public int getIconHeight() {
    return height;
  }
  
  public void paintIcon((Component c, Graphics g, int x, int y) {
    g.drawImage(image, x, y, width, height, c);
  }
}

Instead of the ImageIcons, the ThumbnailIcons could be pre-constructed and cached in the TableModel. Returning Icon.class from getColumnClass() would use the default Icon renderer to display them, no need of a custom renderer.

[Rob Spoor]

Isn't that the same as option 3 - a custom Icon implementation?

[Darryl Burke]

Rob Prime wrote:Isn't that the same as option 3 - a custom Icon implementation?

I'm really sorry, Rob, I don't know how I missed reading your response thoroughly

[Mike Lipay]

Worked (50%)

I'm not sure why the second image shows up blank (first image shows up fine), can someone try this and see whether there is something wrong with the image?

static Object[][] serviceTable = {
	{ 10300, "2/28/2009", "Oil change", "Oil, filter", 32.40, new ThumbnailIcon(Toolkit.getDefaultToolkit().getImage("NoDoc.png"), 25) },
	{ 10000, "12/25/2008", "Engine Replacement", "Engine, hoses, fluids", 2453.85, new ThumbnailIcon(Toolkit.getDefaultToolkit().getImage("20090320Engine.png"), 50) }
};

[Rob Spoor]

Not with this little information. You should post an SSCCE that includes at least the following:
- the creation of the table model
- the creation of the JTable and its renderers / editors
- a main method

[Darryl Burke]

Try using ImageIO#read(URL) instead of Toolkit to load the images.

[Mike Lipay]

Darryl Burke wrote:Try using ImageIO#read(URL) instead of Toolkit to load the images.

That can't be done inside the table, it requires IOException to be caught.

[Mike Lipay]

Rob Prime wrote:Not with this little information. You should post an SSCCE that includes at least the following:
- the creation of the table model
- the creation of the JTable and its renderers / editors
- a main method

Sorry, never sure how much is too much, and how little is too little. I think the problem with the image is that there is too much white space, and the routine that is creating the thumbnail is not as good at rendering as Mac and Win when they create the icon image in the folders.

I guess another method, if possible, is to access the desktop's icon for the file, but I don't know if there is a way to do that.

Here is the code for the ThumbnailIcon class (as posted above)

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

	public class ThumbnailIcon implements Icon {  
		int width, height;  
		Image image;  

		public ThumbnailIcon(Image image, int width) {  
			this.image = image;  
			this.width = width;  
			this.height = (width * image.getHeight(null)) / image.getWidth(null);  
		}
		
		public int getIconHeight () {
			return height;
		}
		
		public int getIconWidth () {
			return width;
		}

		public void paintIcon (Component c, Graphics g, int x, int y) {  
			g.drawImage(image, x, y, width, height, c);  
		}  
	}  

And the code for the Service class:

import java.awt.*;
import java.awt.event.*;
import java.io.*;
import java.lang.Integer;
import java.text.*;
import java.util.*;
import java.util.Locale;
import java.util.prefs.*;

import javax.swing.*;
import javax.swing.JComponent.*;
import javax.swing.SwingConstants;
import javax.swing.table.*;


/**
 * Service Form
 * @author	Mike Lipay
 * @version	1.0
*/
public class Service
{
	public static void Service (JFrame frame, String arg)
	{
		displayMenu(frame, arg);
	}


	/**
	 * Display main window to the user
	*/
	public static void displayMenu(JFrame aFrame, String arg)
	{
		final String VIN = arg;
		final JFrame frame = aFrame;

		EventQueue.invokeLater (new Runnable()
		{
			public void run()
			{
				ServiceDialog dialog = new ServiceDialog(frame, VIN);
				dialog.setDefaultCloseOperation (JFrame.DISPOSE_ON_CLOSE);
				dialog.setVisible(true);
			}
		});
	}
}



/**
  * Create the window frame
*/
class ServiceDialog extends JDialog implements Serializable
{
	VIN VINarray  = new VIN();
	static String VINrecord[];
	static String VIN;
	static int    VINindex;
	final  String fieldSep = "\t";
	final  int windowWidth  = 600;
	final  int windowHeight = 350;

	private String[] columnNames = { "Mileage", "Service Date", "Service", "Parts", "Cost", "Invoice" };
		
	static Object[][] serviceTable = 
	{
		{ 10300, "2/28/2009", "Oil change", "Oil, filter", 32.40, new ThumbnailIcon(Toolkit.getDefaultToolkit().getImage("NoDoc.png"), 25) },
		{ 10000, "12/25/2008", "Engine Replacement", "Engine, hoses, fluids", 2453.85, new ThumbnailIcon(Toolkit.getDefaultToolkit().getImage("2009-03-20 Engine.png"), 50) }
	};


// Main panel fields
	private JPanel servicePanel	= new JPanel();
	private JTextField textFld	= new JTextField();
	private JLabel jlCost		= new JLabel("");
	private GBC gbcCost			= new GBC(1,3,1,1).setAnchor(GBC.EAST);


// Work Fields
	double dblYtdCost    = 0.00;
	double dblTotalCost  = 0.00;
	double dblAnnualCost = 0.00;


// Text fields
	JTextField mileageTxtFld     = new JTextField();
	JTextField dateTxtFld        = new JTextField();
	JTextField descriptionTxtFld = new JTextField();
	JTextField costTxtFld        = new JTextField();
	JTextField documentTxtFld    = new JTextField();


/**
 * Create the main frame which enables the selection of or addition of
 * vehicles to the Vehicle Identification File (VIF.obj)
*/
	public ServiceDialog(JFrame owner, String arg)
	{
		super (owner, "Vehicle Specifications", true);
		int panelLine = 0;

	// Main window setup
		setLocationByPlatform(true);
		setSize(windowWidth, windowHeight);
		setTitle("Vehicle Service");
		GridBagLayout layout = new GridBagLayout();
		setLayout(layout);

	// Get the VIN
		String [] tempArgs = arg.split(",");
		VIN = tempArgs[0];

	// Read the Service record
		String temp = VINarray.readService(VIN);

		if (temp != null)
		{
			VINrecord = temp.split(fieldSep);
			VINindex  = Integer.parseInt(VINrecord[0]);
		}
		else
		{
			VINindex  = -1;
		}



	// Vehicle Information
		add (new JLabel (VIN), new GBC(0,panelLine,8,1).setAnchor(GBC.CENTER));

	// Blank Line
		add (new JLabel (" "), new GBC(0,++panelLine,3,1).setAnchor(GBC.WEST));

	// Show Costs
		NumberFormat cf = NumberFormat.getCurrencyInstance();

		add (new JLabel (" Current Year: "), new GBC(0,++panelLine,1,1).setAnchor(GBC.WEST));
		add (new JLabel (cf.format(dblYtdCost)), new GBC(1,panelLine,1,1).setAnchor(GBC.EAST));
		add (new JLabel (" Total Cost:"), new GBC(0,++panelLine,1,1).setAnchor(GBC.WEST));
		add (jlCost, gbcCost);
		add (new JLabel (" Annual Cost.:"), new GBC(0,++panelLine,1,1).setAnchor(GBC.WEST));
		add (new JLabel (cf.format(dblAnnualCost)), new GBC(1,panelLine,1,1).setAnchor(GBC.EAST));

	// Service Table
		TableModel model = new ServiceTableModel(2, 6);
		JTable table = new JTable(model);
		table.setRowHeight(50);
		TableColumn column = table.getColumnModel().getColumn(5);
		column.setPreferredWidth(100);

		add (new JScrollPane(table), new GBC(0,++panelLine,3,1).setFill(GBC.BOTH).setWeight(100, 100));
		panelLine = panelLine + 4;
		table.setAutoCreateRowSorter(true);
		table.setFillsViewportHeight(true);
	}


	// Service Table Model
	class ServiceTableModel extends AbstractTableModel
	{
		public ServiceTableModel (int r, int c)
		{
			row = r;
			col = c;
		}

		public int getRowCount()			{ return row; }
		public int getColumnCount()			{ return col; }
		public String getColumnName(int c)	{ return columnNames[c]; }
		public Class<?> getColumnClass(int c)
		{
			if (c == 4) return Integer.class;
			if (c == 5) return ImageIcon.class;
			return serviceTable[0][c].getClass();
		}


		public Object getValueAt (int r, int c)
		{
			DecimalFormat mf = new DecimalFormat ("000,000");
			NumberFormat  cf = NumberFormat.getCurrencyInstance();

			if (r == 0) dblTotalCost = 0;	// First time through init cost
			if (c == 0)	return mf.format(serviceTable[r][c]);
			if (c == 4)
			{
				dblTotalCost = dblTotalCost + Double.parseDouble(serviceTable[r][c].toString());
				if (this.getRowCount() == (r + 1))	jlCost.setText(cf.format(dblTotalCost));
				return cf.format(serviceTable[r][c]);
			}
			return serviceTable [r][c];
		}

		private int row;
		private int col;
	}

// Send message dialog
	public void sendMessage(String msg)
	{
		JOptionPane.showMessageDialog(
		servicePanel,
		msg,
		"Message Dialog",
		JOptionPane.INFORMATION_MESSAGE);
	}
}

[Rob Spoor]

That's not an SSCCE. There is now too much code; I don't need all those labels, the dialog, etc. And there is no main method like I asked you.

I've copied / pasted bits and pieces and have come up with the following SSCCE, containing only the table model and the thumbnail icon. As a comparison, my code is 96 lines with both classes and import statements. Your code has over twice as much.

import java.awt.*;
import java.text.*;
import javax.swing.*;
import javax.swing.table.*;

class ServiceTableModel extends AbstractTableModel
{
    private String[] columnNames = { "Mileage", "Service Date", "Service", "Parts", "Cost", "Invoice" };

    static Object[][] serviceTable =
    {
        { 10300, "2/28/2009", "Oil change", "Oil, filter", 32.40, new ThumbnailIcon(Toolkit.getDefaultToolkit().getImage("NoDoc.png"), 25) },
        { 10000, "12/25/2008", "Engine Replacement", "Engine, hoses, fluids", 2453.85, new ThumbnailIcon(Toolkit.getDefaultToolkit().getImage("20090320Engine.png"), 50) }
    };

    double dblYtdCost    = 0.00;
    double dblTotalCost  = 0.00;
    double dblAnnualCost = 0.00;

    public ServiceTableModel (int r, int c)
    {
        row = r;
        col = c;
    }

    public int getRowCount()            { return row; }
    public int getColumnCount()         { return col; }
    public String getColumnName(int c)  { return columnNames[c]; }
    public Class<?> getColumnClass(int c)
    {
        if (c == 4) return Integer.class;
        if (c == 5) return ImageIcon.class;
        return serviceTable[0][c].getClass();
    }


    public Object getValueAt (int r, int c)
    {
        DecimalFormat mf = new DecimalFormat ("000,000");
        NumberFormat  cf = NumberFormat.getCurrencyInstance();

        if (r == 0) dblTotalCost = 0;   // First time through init cost
        if (c == 0) return mf.format(serviceTable[r][c]);
        if (c == 4)
        {
            dblTotalCost = dblTotalCost + Double.parseDouble(serviceTable[r][c].toString());
//            if (this.getRowCount() == (r + 1))  jlCost.setText(cf.format(dblTotalCost));
            return cf.format(serviceTable[r][c]);
        }
        return serviceTable [r][c];
    }

    private int row;
    private int col;

    public static void main(String[] args) throws Exception
    {
        JFrame frame = new JFrame();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        TableModel model = new ServiceTableModel(2, 6);
        JTable table = new JTable(model);
        table.setRowHeight(50);
        TableColumn column = table.getColumnModel().getColumn(5);
        column.setPreferredWidth(100);
        frame.add(new JScrollPane(table));
        table.setAutoCreateRowSorter(true);
        table.setFillsViewportHeight(true);
        frame.pack();
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
}

class ThumbnailIcon implements Icon
{
    int width, height;
    Image image;

    public ThumbnailIcon(Image image, int width) {
        this.image = image;
        this.width = width;
        this.height = (width * image.getHeight(null)) / image.getWidth(null);
    }

    public int getIconHeight () {
        return height;
    }

    public int getIconWidth () {
        return width;
    }

    public void paintIcon (Component c, Graphics g, int x, int y) {
        g.drawImage(image, x, y, width, height, c);
    }
}

I see two images just as I expected. I did change the name of the file to remove the space and dashes, as these were not in the file when I saved it from this thread. If I change the name in the code so it doesn't match anymore then I see a blank cell like you described. So my guess is that your physical file name and the file name in the code don't match.

[Mike Lipay]

Rob Prime wrote:That's not an SSCCE. There is now too much code; I don't need all those labels, the dialog, etc. And there is no main method like I asked you.

Sorry, will try to do better.

Rob Prime wrote:I see two images just as I expected. I did change the name of the file to remove the space and dashes, as these were not in the file when I saved it from this thread. If I change the name in the code so it doesn't match anymore then I see a blank cell like you described. So my guess is that your physical file name and the file name in the code don't match.

Not in my case, here is what I have:

static Object[][] serviceTable = 
	{
	{ 10300, "2/28/2009", "Oil change", "Oil, filter", 32.40, new ThumbnailIcon(Toolkit.getDefaultToolkit().getImage("NoDoc.png"), 25) },
	{ 10000, "12/25/2008", "Engine Replacement", "Engine, hoses, fluids", 2453.85, new ThumbnailIcon(Toolkit.getDefaultToolkit().getImage("2009-03-20 Engine.png"), 50) }
};

[Mike Lipay]

Rob,

I took your code, compiled and executed it, and the image shows. There must be something different between your code and mine that makes mine not work.

[pete stein]

Mike Lipay wrote:

Darryl Burke wrote:Try using ImageIO#read(URL) instead of Toolkit to load the images.

That can't be done inside the table, it requires IOException to be caught.

I don't understand what you're saying here. What does catching an IOException have to do with whether or not to use Darryl's (excellent) suggestion?

[Rob Spoor]

Mike Lipay wrote:Rob,

I took your code, compiled and executed it, and the image shows. There must be something different between your code and mine that makes mine not work.

Then look for the differences. Most of all, check the return value of your table model's getValueAt method.Just before returning something print out what you're going to return.

If that works out OK print out the image's real size in the ThumbnailIcon. Make sure that the width and height are not -1 (meaning an invalid image, at least at the time. It could be still loading). Component implements ImageObserver so if you do it in the paintIcon method that would be easiest.

[Mike Lipay]

Rob Prime wrote:

Mike Lipay wrote:Rob,

I took your code, compiled and executed it, and the image shows. There must be something different between your code and mine that makes mine not work.

Then look for the differences. Most of all, check the return value of your table model's getValueAt method.Just before returning something print out what you're going to return.

If that works out OK print out the image's real size in the ThumbnailIcon. Make sure that the width and height are not -1 (meaning an invalid image, at least at the time. It could be still loading). Component implements ImageObserver so if you do it in the paintIcon method that would be easiest.

Odd, I brought this into work to work on it during breaks. When I run your code under Win-XP I don't see the image.

[Mike Lipay]

Ok, I think I found the problem (at least on the WinXP system), but I'm not sure of the solution - it seems to be the size of the image. The original size is 2550 x 3317; I cut the size in half, just on a hunch, and it worked. Going on this I restored the image and progressively reduced the size until it worked, turns out the magic number is 60%, which brings the image down to 1530 x 1991.

Any idea what's going on, and if there is a way around it. I cannot control the size of an image someone else creates.

[Rob Spoor]

It could be a memory problem. Do you see any errors on the console?

[Mike Lipay]

Rob Prime wrote:It could be a memory problem. Do you see any errors on the console?

No, everything looks like it worked, the image just doesn't appear. In fact, I don't think it's being generated. If I click on the cell containing the first image (NoDoc.png) I can see the outline of the image inside of the selection background color; if I click on the cell with no image the entire cell is in background color.

[Rob Spoor]

Then I suggest you follow my previous suggestions - check out what is returned from getValueAt, what size the image has when painting, etc.

[Mike Lipay]

Rob Prime wrote:Then I suggest you follow my previous suggestions - check out what is returned from getValueAt, what size the image has when painting, etc.

I put the display into the ThumbnailIcon class (paint method) since I couldn't figure out how to put it into the getValueAt method.

H:50 W:50
H:50 W:50

public void paintIcon (Component c, Graphics g, int x, int y) {  
	g.drawImage(image, x, y, width, height, c);  
	System.out.println ("H:" + height + " W:" + width);
}  

[Rob Spoor]

Don't print the width and height you want it to get - print the actual width and height from the image.

[Mike Lipay]

Ok, I think I have what you asked for, here are the sizes: H:2106 W:1548

Here is the code (in case I guessed wrong):

Image img = Toolkit.getDefaultToolkit().getImage("20090126Oil Pressure SensorLg.png");
System.out.println ("H:" + img.getHeight(null) + " W:" + img.getWidth(null));

[Mike Lipay]

Ok, I have some more information. Running the script multiple times returns different values for h & w, sometimes one or the other will have a -1. I'm guessing that the image is not finished resizing when the paint is called. If you agree, any idea how to get the draw to wait, or to insert a delay before drawImage is called?

[Mike Lipay]

Ok, I added this right before the drawImage and the thumbnail was created

for (int i = 0; i< 100000000; i++);

Question is, is there a better way to wait for the resize operation to complete? I would imagine that the delay would vary depending on the speed of the J-engine, and the size of the original image.

[Rob Spoor]

There are a few ways of ensuring the images are loaded:

- use ImageIO.read as Darryl suggested. Don't worry about the IOException, you can catch it if you initialize the table in a static initializer block

- use ImageIcon like you originally did, then retrieve its image using getImage().

- use a MediaTracker. This is actually what ImageIcon does internally.