We Keep Coding

How to combine images in a JFrame?

I have been working on a project that is displaying a grid 16 x 16 of images, based on user interaction this grid follows the user on a dynamically larger base (an example would be a base that is 50 x 50) than the 16 x 16 display.
However, I am using JLabel components to display these images, and every time the user interacts I have to move each of the 256 images and erase the ones that are no longer in the 16 x 16 display grid. This results in a lag that is close to a second per key press and is close to nonfunctional.
What I am looking to try to do is to chain these images together in the total width of the ground and simply move the focus to the portion that is within the 16 x 16 grid, making the process no longer have to use nested for loops for the display.
Is it possible that I could dynamically store and create these chained images for display using a label? If are there other ways to display .png files in Java that could be stored and used in a similar manner?
An example of my current methodology of having to draw every image upon every user interaction:
User user = game.user;
int floorWidth = game.floorWidth;
int floorHeight = game.floorHeight;
int pX = user.getTile().getX();
int pY = user.getTile().getY();
int minX = Math.max(pX - GameConstants.USER_DRAW_DISTANCE, 0);
int maxX = Math.min(floorWidth, pX + GameConstants.USER_DRAW_DISTANCE);
int minY = Math.max(pY - GameConstants.USER_DRAW_DISTANCE, 0);
int maxY = Math.min(floorHeight, pY + GameConstants.USER_DRAW_DISTANCE);
for (int i = minY; i < maxY; i++)
{
for (int x = minX; x < maxX; x++)
{
Tile tile = floor.getTile(x, i);
if (tile.getHasSeen())
{
JLabel cLabel = tile.imageLabel;
cLabel.setLocation(340 + x * 32, 140 + i * 32);
cLabel.setSize(64, 64);
cLabel.setVisible(true);
panel.add(cLabel, 1);
}
}
}

In principle your idea should work. So you're probably doing something else wrong.
I've made an example, where it displays a 16x16 square of JLabels out of 256x256 JLabels. When you move the mouse over the panel, it changes the layout to show a new set of 16x16 JLabels. The change is pretty snappy, definitely not a 1 second delay.
import javax.swing.*;
import java.awt.EventQueue;
import java.awt.Dimension;
import java.awt.Color;
import java.awt.event.*;
import java.util.*;
public class GridViewer{
int x0, y0;
int N = 256;
int display = 16;
int length = 32;
List<JLabel> showing = new ArrayList<>();
List<JLabel> available = new ArrayList<>();
JPanel panel = new JPanel(){
Dimension sz = new Dimension(length*display, length*display);
#Override
public Dimension getPreferredSize(){
return sz;
}
};
public void showGui(){
JFrame frame = new JFrame();
panel.setLayout(null);
panel.addMouseMotionListener( new MouseAdapter(){
Random r = new Random();
#Override
public void mouseMoved(MouseEvent evt){
int x = evt.getX();
int y = evt.getY();
//map to position on the image to the position on the grid.
x0 = x/2;
x0 = Math.min(x0, N-display);
y0 = y/2;
y0 = Math.min(y0, N-display);
updateLayout();
}
});
for(int i = 0; i<N*N; i++){
available.add(createItem(i));
}
updateLayout();
frame.setContentPane(panel);
frame.pack();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);
}
/**
* Creates a solid color jlabel, could be used to load an image
* as an icon.
**/
JLabel createItem(int i){
JLabel l = new JLabel("");
int r = (i/256);
int g = (0)&255;
int b = (i%256);
int c = (r << 16 ) + ( g << 8 ) + b;
l.setBackground(new Color(c));
l.setOpaque(true);
l.setSize(length, length);
return l;
}
public void updateLayout(){
for(JLabel l: showing){
panel.remove(l);
}
for(int i = 0; i<display; i++){
for(int j = 0; j<display; j++){
JLabel l = available.get((i + x0) + (j+y0)*N);
panel.add(l);
l.setLocation( i*length, j*length);
showing.add(l);
}
}
}
public static void main(String[] args){
EventQueue.invokeLater( () -> new GridViewer().showGui() );
}
}
Some variations.
Use a GridLayout
Using a layout manager has a lot of advantages. Especially when it comes to using different displays, fonts and platforms? When adding and removing elements, it could make partially showing elements tough.
Use a large JPanel with a ScrollPane
We could create a single JPanel and add all 256x256 components to it, then use a scroll pane to set the view. This would have an advantage of completely separating the layout and the view. Somebody wants a larger window, you don't have to change the layout, the view gets bigger and you just see more of the layout. For 256x256 components, it should perform well but if you have too many components you might want to reconsider it.
Use a JPanel and override paintComponent
This would involve loading your 'png' files as awt Images (probably BufferedImages) and drawing them with the graphics object. You would need to handle all of the layout and rendering. It gives you quite a bit of power over how you want to render your components.

JavaFX SVGPath very slow with a large content

I am working with a large array of dots (4096x256) to be displayed as an image in a JavaFX application. I started with a BMP image built from the 2D array of dots, but the zooming operation produced a blurred image on screen. So, I decided to use SVGPath to draw my image which now zooms in properly (no blur) with a simple SVGPath content, but becomes veeeeeery slow when it comes to displaying a checkerboard of two colors, probably because the SVGPath content is so large for fail bits information, as shown in my code.
Is there an efficient way to achieve this? By efficient, I mean fast execution time while keeping the pixel-sharp zooming effect.
public Group createImage(final int width, final int height, final int boxIdx)
{
// assuming that pass data bits are more numerous than others, we can
// start by drawing full green colored lines
StringBuilder svgPass = new StringBuilder();
for (int y = 0; y < height; y++)
{
svgPass.append("M0,");
svgPass.append(Integer.toString(y));
svgPass.append(" ");
svgPass.append("L0,");
svgPass.append(Integer.toString(y));
svgPass.append(" ");
svgPass.append(Integer.toString(width - 1));
svgPass.append(",");
svgPass.append(Integer.toString(y));
svgPass.append(" z");
}
SVGPath imgPass = new SVGPath();
imgPass.setContent(svgPass.toString());
imgPass.setStrokeLineJoin(StrokeLineJoin.BEVEL);
imgPass.setStroke(Color.GREEN);
imgPass.setStrokeWidth(1);
// fail data bits
StringBuilder svgFail = new StringBuilder();
Bit[][] bits = WordLineManager.getInstance().getBlocksMap().get(boxIdx);
for (int y = 0; y < bits.length; y++)
{
for (int x = 0; x < bits[0].length; x++)
{
if (bits[y][x].getNature() == BitNature.DATA && !bits[y][x].getStatus())
{
svgFail.append("M");
svgFail.append(Integer.toString(x));
svgFail.append(",");
svgFail.append(Integer.toString(y));
svgFail.append(" ");
svgFail.append("L");
svgFail.append(Integer.toString(x));
svgFail.append(",");
svgFail.append(Integer.toString(y));
svgFail.append(" ");
svgFail.append(Integer.toString(x + 1));
svgFail.append(",");
svgFail.append(Integer.toString(y));
svgFail.append(" z");
}
}
}
SVGPath imgFail = new SVGPath();
imgFail.setContent(svgFail.toString());
imgFail.setStrokeLineJoin(StrokeLineJoin.BEVEL);
imgFail.setStroke(Color.RED);
imgFail.setStrokeWidth(1);
return new Group(imgPass, imgFail);
}

How do I flip an image upside-down?

I was wondering if I could find some help on this problem. I was asked to use an image ("corn.jpg"), and flip it entirely upside down. I know I need to write a program which will switch pixels from the top left corner with the bottom left, and so on, but I wasn't able to get my program to work properly before time ran out. Could anyone provide a few tips or suggestions to solve this problem? I'd like to be able to write my code out myself, so suggestions only please. Please note that my knowledge of APImage and Pixel is very limited. I am programming in Java.
Here is what I managed to get done.
import images.APImage;
import images.Pixel;
public class Test2
{
public static void main(String [] args)
{
APImage image = new APImage("corn.jpg");
int width = image.getImageWidth();
int height = image.getImageHeight();
int middle = height / 2;
//need to switch pixels in bottom half with the pixels in the top half
//top half of image
for(int y = 0; y < middle; y++)
{
for (int x = 0; x < width; x++)
{
//bottom half of image
for (int h = height; h > middle; h++)
{
for(int w = 0; w < width; w++)
{
Pixel bottomHalf = image.getPixel(h, w);
Pixel topHalf = image.getPixel(x, y);
//set bottom half pixels to corresponding top ones?
bottomHalf.setRed(topHalf.getRed());
bottomHalf.setGreen(topHalf.getGreen());
bottomHalf.setBlue(topHalf.getBlue());
//set top half pixels to corresponding bottom ones?
topHalf.setRed(bottomHalf.getRed());
topHalf.setGreen(bottomHalf.getGreen());
topHalf.setBlue(bottomHalf.getBlue());
}
}
}
}
image.draw();
}
}
Thank you for your help!

See Transforming Shapes, Text, and Images.
import java.awt.*;
import java.awt.geom.AffineTransform;
import java.awt.image.BufferedImage;
import javax.swing.*;
public class FlipVertical {
public static BufferedImage getFlippedImage(BufferedImage bi) {
BufferedImage flipped = new BufferedImage(
bi.getWidth(),
bi.getHeight(),
bi.getType());
AffineTransform tran = AffineTransform.getTranslateInstance(0, bi.getHeight());
AffineTransform flip = AffineTransform.getScaleInstance(1d, -1d);
tran.concatenate(flip);
Graphics2D g = flipped.createGraphics();
g.setTransform(tran);
g.drawImage(bi, 0, 0, null);
g.dispose();
return flipped;
}
FlipVertical(BufferedImage bi) {
JPanel gui = new JPanel(new GridLayout(1,2,2,2));
gui.add(new JLabel(new ImageIcon(bi)));
gui.add(new JLabel(new ImageIcon(getFlippedImage(bi))));
JOptionPane.showMessageDialog(null, gui);
}
public static void main(String[] args) throws AWTException {
final Robot robot = new Robot();
Runnable r = new Runnable() {
#Override
public void run() {
final BufferedImage bi = robot.createScreenCapture(
new Rectangle(0, 660, 200, 100));
new FlipVertical(bi);
}
};
SwingUtilities.invokeLater(r);
}
}

Whenever you're swapping variables, if your language doesn't allow for simultaneous assignment (and Java doesn't), you need to use a temporary variable.
Consider this:
a = 1;
b = 2;
a = b; // a is now 2, just like b
b = a; // b now uselessly becomes 2 again
Rather than that, do this:
t = a; // t is now 1
a = b; // a is now 2
b = t; // b is now 1
EDIT: And also what #vandale says in comments :P

If you are able to use the Graphics class, the following may be of use:
http://www.javaworld.com/javatips/jw-javatip32.html
And the Graphics class documentation:
http://docs.oracle.com/javase/7/docs/api/java/awt/Graphics.html

Instead of using
Pixel bottomHalf = image.getPixel(h, w);
Pixel topHalf = image.getPixel(x, y);
//set bottom half pixels to corresponding top ones?
bottomHalf.setRed(topHalf.getRed());
bottomHalf.setGreen(topHalf.getGreen());
bottomHalf.setBlue(topHalf.getBlue());
//set top half pixels to corresponding bottom ones?
topHalf.setRed(bottomHalf.getRed());
topHalf.setGreen(bottomHalf.getGreen());
topHalf.setBlue(bottomHalf.getBlue());
You should have stored the bottomHalf's RGB into a temporary Pixel and used that to set topHalf after replacing bottomHalf's values (if you follow). You could have also really used something like this.... assuming your pixel operates on integer rgb values (which would have improved your main method).
private static final Pixel updateRGB(Pixel in, int red, int green, int blue) {
in.setRed(red); in.setGreen(green); in.setBlue(blue);
}

You want to flip the image upside down, not swap the top and bottom half.
The loop could look like this.
int topRow = 0;
int bottomRow = height-1;
while(topRow < bottomRow) {
for(int x = 0; x < width; x++) {
Pixel t = image.getPixel(x, topRow);
image.setPixel(x, topRow, image.getPixel(x, bottomRow));
image.setPixel(x, bottomRow, t);
}
topRow++;
bottomRow--;
}

Color Grid: figure out which box was clicked

My question concerns the Color Grid teechart. I'm trying to write code so that when the user touches a box on the grid, only that box color will change. I find the using chart.getHeight() and chart.getWidth() give the whole area of the chart and not just the color grid dimensions. So right now, I'm estimating the length and width of the grid in pixels to estimate the box that the user touched. Is there any way that I can figure out the exact amount of pixels of just the color grid length and height? Additionally, I noticed a "clicked" method in the Color Grid api. Is there anything already built-in that would allow me to find which box the user touched/clicked? Thanks!

I've made a simple example that uses the seriesClicked event. However, it seems to give a correct index but the cell colored seems to be in the opposite row:
oldIndex = -1;
tChart1.getAspect().setView3D(false);
tChart1.getLegend().setVisible(false);
ColorGrid col1 = new ColorGrid(tChart1.getChart());
col1.setColorEach(true);
for (int x=0; x<10; x++)
for (int z=0; z<10; z++)
col1.add(x, 1, z, Color.random());
col1.addSeriesMouseListener(new SeriesMouseAdapter() {
#Override
public void seriesClicked(SeriesMouseEvent e) {
ColorGrid myGrid = (ColorGrid)tChart1.getSeries(0);
int valueIndex = myGrid.clicked(e.getPoint().x, e.getPoint().y);
if (valueIndex > -1) {
if (oldIndex > -1) {
myGrid.getColors().setColor(oldIndex, oldColor);
}
oldIndex = valueIndex;
oldColor = myGrid.getValueColor(valueIndex);
myGrid.getColors().setColor(valueIndex, Color.red);
tChart1.getHeader().setText(String.valueOf(valueIndex));
tChart1.getSeries(0).repaint();
}
}
});
I'll add to the defect list the need to revise the clicked function for the ColorGrid (TJ71016603)
In the meanwhile, a workaround could be to modify the given valueIndex as follows:
if (valueIndex > -1) {
valueIndex = valueIndex / myGrid.getNumZValues() * myGrid.getNumZValues() + (myGrid.getNumZValues()-1 - (valueIndex % myGrid.getNumZValues()));
if (oldIndex > -1) {
//...
}

Image histogram generated by JFreeChart

I want to display histogram of image color channels.
At first my reading of pixels looks like:
for(int i=0; i<width; i++)
for(int j=0; j<height; j++) {
data=writeableRaster.getDataElements(i, j, null);
red=colorModel.getRed(data);
green=colorModel.getGreen(data);
blue=colorModel.getBlue(data);
rgb=(red+green+blue)/3;
++redL[red];
++greenL[green];
++blueL[blue];
++rgbL[rgb];
}
}
I also have additional method for creating chart with given channel colors table:
int number = channelHistogram.length;
HistogramDataset dataset = new HistogramDataset();
dataset.setType(HistogramType.RELATIVE_FREQUENCY);
dataset.addSeries("Hist",channelHistogram,number);
String plotTitle = "Hist";
String xaxis = "number";
String yaxis = "value";
PlotOrientation orientation = PlotOrientation.VERTICAL;
boolean show = false;
boolean toolTips = false;
boolean urls = false;
JFreeChart chart = ChartFactory.createHistogram( plotTitle, xaxis, yaxis,
dataset, orientation, show, toolTips, urls);
But chart is wrong displayed. It means at Y axis there are "low" values (from ~ 0 - 0.09) and at X axis there aren't values from scope 0 - 255.
Any help?

dataset.setType(HistogramType.RELATIVE_FREQUENCY);
Can you try setting different options here and see if it helps? Also if you can show what channelHistogram field contains that may be helpful to debug.