Relative positioning of Graphics2D objects on JPanel - java

I am making a GUI with Swing and would like to configure the Graphics2D objects with relative positioning. I want to do this in a way that when I resize the window the objects are repainted in a new location relative to the initial anchor position (probably in the top left corner somewhere). I have tried using layout managers to do this but it doesn't impact the actual drawing because the points are pretty much hard coded.
What is the best way to do this? Can anyone provide an good example? Thanks.
Here is my self contained example:
import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.geom.Ellipse2D;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;
public class DrawPanelMain extends JPanel {
public static final double version = 0.0;
private JPanel btnPanel = new JPanel();
private JPanel switchPanel = new JPanel();
private JScrollPane switchPanelScrollPane = new JScrollPane(switchPanel);
//private JPanel[] panelArray = new JPanel[3];
DrawEllipses drawEllipses = new DrawEllipses(POINT_LIST);
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
public void run() {
initializePointList();
createAndShowGui();
}
});
}
public static java.util.List<Point> POINT_LIST = new ArrayList<>();
/*
* This loop will initialize POINT_LIST with the set of points for drawing the ellipses.
* The for each loop initializes points for the top row and the second for loop draws the
* right triangle.
*/
private static void initializePointList() {
int ellipsePointsYCoordinate[] = {140, 200, 260, 320, 380, 440, 500, 560, 620};
int ellipsePointsXCoordinate[] = {140, 200, 260, 320, 380, 440, 500, 560, 620, 680};
int xx = 80;
for (int aXt : ellipsePointsXCoordinate) {
POINT_LIST.add(new Point(aXt, xx));
}
for (int i = 0; i < ellipsePointsYCoordinate.length; i++) {
for (int j = i; j < ellipsePointsYCoordinate.length; j++) {
POINT_LIST.add(new Point(ellipsePointsXCoordinate[i], ellipsePointsYCoordinate[j]));
}
}
}
public DrawPanelMain() {
switchPanel.setBorder(BorderFactory.createLoweredSoftBevelBorder());
switchPanel.setBackground(Color.DARK_GRAY);
switchPanel.add(drawEllipses);
switchPanelScrollPane.setPreferredSize(new Dimension(600,600));
setLayout(new GridBagLayout());
GridBagConstraints c = new GridBagConstraints();
// first column
c.gridx = 0;
add(switchPanelScrollPane, c);
// second column
c.gridx = 1;
// first row
c.gridy = 0;
// second row
c.gridy = 1;
c.gridx = 0;
add(btnPanel, c);
btnPanel.add(new JButton(new AddSwitchAction("Add Switch Panel")));
}
public static void createAndShowGui() {
JFrame frame = new JFrame("RF Connection Panel " + version);
frame.setLayout(new BorderLayout());
frame.add(new DrawPanelMain());
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLocationByPlatform(false);
//frame.setLocationRelativeTo(null);
frame.pack();
frame.setVisible(true);
}
/*
* AddSwitchAction will add a new pane to the tabbedPane when the add switch button is clicked
*/
private class AddSwitchAction extends AbstractAction {
public AddSwitchAction(String name) {
super(name);
int mnemonic = (int) name.charAt(0);
putValue(MNEMONIC_KEY, mnemonic);
}
#Override
public void actionPerformed(ActionEvent e) {
String title = "Switch ";
DrawEllipses tabComponent = new DrawEllipses(POINT_LIST);
switchPanel.add(title, tabComponent);
}
}
}
#SuppressWarnings("serial")
class DrawEllipses extends JPanel {
private final int PREF_W = 750; //Window width
private final int PREF_H = 750; //Window height
private final int OVAL_WIDTH = 30;
private static final Color INACTIVE_COLOR = Color.RED;
private static final Color ACTIVE_COLOR = Color.green;
private java.util.List<Point> points;
private java.util.List<Ellipse2D> ellipses = new ArrayList<>();
private Map<Ellipse2D, Color> ellipseColorMap = new HashMap<>();
/*
* This method is used to populate "ellipses" with the initialized ellipse2D dimensions
*/
public DrawEllipses(java.util.List<Point> points) {
this.points = points;
for (Point p : points) {
int x = p.x - OVAL_WIDTH / 2;
int y = p.y - OVAL_WIDTH / 2;
int w = OVAL_WIDTH;
int h = OVAL_WIDTH;
Ellipse2D ellipse = new Ellipse2D.Double(x, y, w, h);
ellipses.add(ellipse);
ellipseColorMap.put(ellipse, INACTIVE_COLOR);
}
MyMouseAdapter mListener = new MyMouseAdapter();
addMouseListener(mListener);
addMouseMotionListener(mListener);
}
/*
* paintComponent is used to paint the ellipses
*/
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g); // paints the background
setBackground(Color.DARK_GRAY);
Graphics2D g2 = (Graphics2D) g;
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
for (Ellipse2D ellipse : ellipses) {
g2.setColor(ellipseColorMap.get(ellipse));
g2.fill(ellipse);
g2.setColor(Color.BLACK);
g2.setStroke(new BasicStroke(2));
g2.draw(ellipse);
}
/*
* Set the font characteristics, color, and draw the row labels.
*/
g.setFont(new Font("TimesRoman", Font.BOLD, 18));
g.setColor(Color.BLACK);
//Along the top row
g.drawString("External Port", 10, 50);
g.drawString("1", 135, 50);
g.drawString("2", 195, 50);
g.drawString("3", 255, 50);
g.drawString("4", 315, 50);
g.drawString("5", 375, 50);
g.drawString("6", 435, 50);
g.drawString("7", 495, 50);
g.drawString("8", 555, 50);
g.drawString("9", 615, 50);
g.drawString("10", 672, 50);
//Along the Y-axis
g.drawString("Radio 2", 40, 145);
g.drawString("3", 90, 205);
g.drawString("4", 90, 265);
g.drawString("5", 90, 325);
g.drawString("6", 90, 385);
g.drawString("7", 90, 445);
g.drawString("8", 90, 505);
g.drawString("9", 90, 565);
g.drawString("10", 90, 625);
//Along the X-Axis
g.drawString("1", 135, 670);
g.drawString("2", 195, 670);
g.drawString("3", 255, 670);
g.drawString("4", 315, 670);
g.drawString("5", 375, 670);
g.drawString("6", 435, 670);
g.drawString("7", 495, 670);
g.drawString("8", 555, 670);
g.drawString("9", 615, 670);
//Draws a 3DRect around the top row of ellipse2D objects
g2.setColor(Color.lightGray);
g2.draw3DRect(120, 60, 580, 40, true);
g2.draw3DRect(121, 61, 578, 38, true);
g2.draw3DRect(122, 62, 576, 36, true);
}
/*
* MouseAdapter is extended for mousePressed Event that detects if the x, y coordinates
* of a drawn ellipse are clicked. If the color is INACTIVE it is changed to ACTIVE and
* vice versa.
*/
private class MyMouseAdapter extends MouseAdapter {
#Override
/*
* When mousePressed event occurs, the color is toggled between ACTIVE and INACTIVE
*/
public void mousePressed(MouseEvent e) {
Color c;
for (Ellipse2D ellipse : ellipses) {
if (ellipse.contains(e.getPoint())) {
c = (ellipseColorMap.get(ellipse) == INACTIVE_COLOR) ? ACTIVE_COLOR : INACTIVE_COLOR;
ellipseColorMap.put(ellipse, c);
}
}
repaint();
}
}
/*
* This method will set the dimensions of the JFrame equal to the preferred H x W
*/
#Override
public Dimension getPreferredSize() {
if (isPreferredSizeSet()) {
return super.getPreferredSize();
}
return new Dimension(PREF_W, PREF_H);
}
/*
* Used for button click action to change all ellipses to ACTIVE_COLOR
*/
public void activateAll(){
for (Ellipse2D ellipse : ellipses){
ellipseColorMap.put(ellipse, ACTIVE_COLOR);
}
repaint();
}
/*
* Used for button click action to change all ellipses to INACTIVE_COLOR
*/
public void deactivateAll(){
for (Ellipse2D ellipse : ellipses){
ellipseColorMap.put(ellipse, INACTIVE_COLOR);
}
repaint();
}
}

As I suggested earlier if you want relative positioning then you need to calculate the relative location every time your paint (or when the component is resized).
Basically you know that widthwise you have 10 circle you want to paint at 30 pixels each and a label at a fixed width of say 100. So that means you have a minimum width of 400 pixels.
Of course that is not reasonable as you want a gap between each circle, so you need to decide what your preferred gap is and multiply that by 9 to determine your true minimum size. Looks like you have about a 30 pixel gap so that is another 270 pixels giving a preferred size of 670 pixels.
So the question is what do you do when the width is greater than 670? Do you increase the gap or leave it at 30?
The harder case is when the width is less than 670, as you will now need to adjust the gap smaller, down to some minimum value.
Once you determine the horizontal gap to use, you go through the same analysis for the vertical gap.
Now when you do your painting you have your starting location and every row you paint will be increased by your vertical gap. And every circle on the row will be increased by the horizontal gap.
I have never tried it but I believe you can use the setFrame(...) method of your Ellipse to dynamically move its location. So when you do your painting the Ellipse will no be in the correct spot and it should respond to mouse events correctly.
So basically you are writing your own custom layout manager for Graphics.
The second approach, instead of doing custom painting, is to use real components.
You can easily create a custom Icon to represent the circles. Then maybe you can use a JToggleButton. Then your logic of changing color can be handled by the toggle button and two different colored Icons.
Now the hard part. I have never tried it before, but I believe you can use the Spring Layout.
SpringLayout positions components relative to one another. It also contains "springs" between the components to allow the gap to grow/shrink.
Those are the two approaches as I see it.

Related

the location(x,y) of java swing 'JLabel' and Graphics elements are not same

I have to draw a JLabel with an onclick event on an drawn circle. The newly created JLabel should be placed placed very closed a line which is already created. I was trying to draw this JLabel at the middle position of the line. But problem is, even after setting fixed calculated coordinates(x,y), the JLabel is not drawn in the given location.(unlike g.drawLine() or g.drawOval()). My code is given below: need help to fix it.
public class ButtonExample extends JFrame{
JFrame frame;
JLabel label1, label2, label3;
private Shape myShape;
private int arrowAdded = 0;
public ButtonExample() {
super("Location test of JLabel and Graphics objects");
label1 = new JLabel("0,0");
//label2 = new JLabel("40,40");
label1.setBounds(0, 0, 50, 50);
label1.setBorder(BorderFactory.createLineBorder(Color.black));
//label2.setBounds(100, 100, 50, 50);
//label2.setBorder(BorderFactory.createLineBorder(Color.black));
add(label1);
//add(label2);
repaint();
addMouseListener(new MouseAdapter() {
#Override
public void mouseClicked(MouseEvent me) {
super.mouseClicked(me);
if (myShape.contains(me.getPoint())) {
arrowAdded = 1;
repaint();
}
}
});
setLayout(null);
setSize(1000,600);
setLocationRelativeTo(null);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setVisible(true);
}
#Override
public Dimension getPreferredSize() {
return new Dimension(1000, 600);
}
public void paint(Graphics g){
super.paint(g);
int startX = 100;
int startY = 100;
int endX = 180;
int endY = 120;
g.setColor(new Color(0, 255, 0));
myShape = new Ellipse2D.Double(startX, startY, 30, 30);
Graphics2D g2d = (Graphics2D) g;
g2d.draw(myShape);
g.drawLine(startX, startY, endX, endY);
int lX = (int)Math.abs(endX-startX)/2;
int lY = (int)Math.abs(endY-startY)/2;
if(endX>startX) {
lX = lX+startX;
}else {
lX = lX+endX;
}
if(endY>startY) {
lY = lY+startY;
}else {
lY = lY+endY;
}
if(arrowAdded == 1) {
label3 = new JLabel();
label3.setBounds(lX, lY, 20, 15);
label3.setBorder(BorderFactory.createLineBorder(Color.black));
add(label3);
g.drawRect(lX, lY, 20, 15);
}enter code here
}
public static void main(String[] args) {
new ButtonExample();
}
}
Don't override paint() on a JFrame!
The frame includes the title bar and borders, so you can't just paint at (0, 0). You would need your painting to be offset by the frame decorations.
Instead, custom painting should be done by overriding the paintComponent(...) method of a JPanel and then you add the panel to the frame. Now the offsets will be relative to the panel, so you can use (0, 0). Of course you would also add the label to the panel at your desired location.
Read the section from the Swing tutorial on Custom Painting for more information and working examples.
Change your code
int lX = (int)Math.abs(endX-startX) / 2;
int lY = (int)Math.abs(endY-startY) / 2;
to
int lX = (endX-startX) / 2;
int lY = (endY-startY) / 2;
and your rectangle (left upper corner) will be placed in the middle position of the line (you can still set an offset if it´s too close :-) )

Line2D between elements in an ArrayList<>

I want to draw lines from each Ellipse2D in an ArrayList<>() of them. I know I can hard code the locations of each line to make it look like it connects each Ellipse2D but I want to make it work efficiently with getCenterX() or getCenterY() or something else if there is a better way. I have posted a minimal, self contained example of what I am working with.
The line that is in there is obviously not in the right place. I tried adding coordinates by accessing the elements of the ArrayList and I could not figure out a way to make it work. Any help is appreciated!
import java.awt.*;
import java.awt.geom.*;
import java.util.*;
import javax.swing.*;
public class SelfContainedExample extends JPanel {
private ArrayList<Shape> shapes = new ArrayList<>();
public static void main(String[] args)
{
EventQueue.invokeLater(new Runnable() {
public void run() {
createAndShowGUI();
}
});
}
public SelfContainedExample()
{
//Circle of Radios
shapes.add(new Ellipse2D.Double(110, 70, 15, 15));
shapes.add(new Ellipse2D.Double(90, 80, 15, 15));
shapes.add(new Ellipse2D.Double(70, 100, 15, 15));
shapes.add(new Ellipse2D.Double(70, 120, 15, 15));
shapes.add(new Ellipse2D.Double(90, 140, 15, 15));
shapes.add(new Ellipse2D.Double(110, 150, 15, 15));
shapes.add(new Ellipse2D.Double(130, 140, 15, 15));
shapes.add(new Ellipse2D.Double(150, 120, 15, 15));
shapes.add(new Ellipse2D.Double(150, 100, 15, 15));
shapes.add(new Ellipse2D.Double(130, 80, 15, 15));
//for this line I want to use getCenterX() of the Ellipses added to this ArrayList
shapes.add(new Line2D.Double(10,10,90,10));
}
#Override
protected void paintComponent(Graphics g)
{
super.paintComponent(g);
Graphics2D g2d = (Graphics2D)g.create();
g2d.setColor(Color.BLUE);
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
for(Shape shape : shapes) {
g2d.fill(shape);
g2d.draw(shape);
}
g2d.dispose();
}
private static void createAndShowGUI()
{
//Make the big window be indented 50 pixels from each edge
//of the screen.
int inset = 50;
Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
JFrame frame = new JFrame("Example");
JDesktopPane desktopPane = new JDesktopPane();
JInternalFrame internalFrame = new JInternalFrame("Example",
false, //resizable
false, //closable
false, //maximizable
true); //iconifiable
internalFrame.setSize(260, 260);
internalFrame.add(new SelfContainedExample());
internalFrame.setVisible(true);
desktopPane.add(internalFrame);
desktopPane.setVisible(true);
desktopPane.setBounds(inset, inset,
screenSize.width - inset * 7,
screenSize.height - inset * 4);
frame.add(desktopPane);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(desktopPane.getSize());
frame.setLocationByPlatform( false );
frame.setLocationRelativeTo( null );
frame.setContentPane( desktopPane );
frame.setVisible( true );
}
}
You want to draw the lines before you draw the Shapes so the Shapes are painted on top of the lines.
The code would be something like:
for (int i = 0; i < shapes.size() - 1; i++)
{
Rectangle r1 = shapes.get(i).getBounds();
Rectangle r2 = shapes.get(i+1).getBounds();
int x1 = r1.x + r1.width / 2;
int y1 = r1.y + r1.height / 2;
int x2 = r2.x + r2.width / 2;
int y2 = r2.y + r2.height / 2;
g.drawLine(x1, y1, x2, y2);
}
for(Shape shape : shapes) {

Graphics2D on JPanel and adding JPanel to JFrame

I am trying to draw on a JPanel and add it to a JFrame in my createAndShowGui method. I have tried a few different things: creating the JPanel in the createAndShowGui method, adding the drawing to the JFrame, etc... The one thing that is common, I don't see any of my graphics!
Note: I am able to get the graphics to display in a JTabbedPane but not on a JPanel, which is what I actually want them to show up on to make the code more object oriented.
Edit:
Here is the working concept self contained example:
import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.geom.Ellipse2D;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;
public class DrawPanelMain extends JPanel {
/*
* Variables used to set the value of preferred height and width
*/
public static final double version = 0.0;
JPanel switchPanel = new JPanel();
JPanel testPanel = new JPanel();
JPanel btnPanel = new JPanel();
DrawEllipses drawEllipses = new DrawEllipses(POINT_LIST);
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
public void run() {
initializePointList();
createAndShowGui();
}
});
}
public static java.util.List<Point> POINT_LIST = new ArrayList<>();
/*
* This loop will initialize POINT_LIST with the set of points for drawing the ellipses.
* The for each loop initializes points for the top row and the second for loop draws the
* right triangle.
*/
public static void initializePointList() {
int ellipsePointsYCoordinate[] = {140, 200, 260, 320, 380, 440, 500, 560, 620};
int ellipsePointsXCoordinate[] = {140, 200, 260, 320, 380, 440, 500, 560, 620, 680};
int xx = 80;
for (int aXt : ellipsePointsXCoordinate) {
POINT_LIST.add(new Point(aXt, xx));
}
for (int i = 0; i < ellipsePointsYCoordinate.length; i++) {
for (int j = i; j < ellipsePointsYCoordinate.length; j++) {
POINT_LIST.add(new Point(ellipsePointsXCoordinate[i], ellipsePointsYCoordinate[j]));
}
}
}
public DrawPanelMain() {
testPanel.setBackground(Color.RED);
switchPanel.add(drawEllipses);
setLayout(new BorderLayout());
add(switchPanel, BorderLayout.CENTER);
add(testPanel, BorderLayout.EAST);
add(btnPanel, BorderLayout.SOUTH);
getPreferredSize();
btnPanel.add(new JButton(new AddSwitchAction("Add Switch Panel")));
}
public static void createAndShowGui() {
JFrame frame = new JFrame("RF Connection Panel " + version);
frame.setLayout(new BorderLayout());
frame.add(new DrawPanelMain());
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLocationByPlatform(false);
//frame.setLocationRelativeTo(null);
frame.pack();
frame.setVisible(true);
}
/*
* AddSwitchAction will add a new pane to the tabbedPane when the add switch button is clicked
*/
private class AddSwitchAction extends AbstractAction {
public AddSwitchAction(String name) {
super(name);
int mnemonic = (int) name.charAt(0);
putValue(MNEMONIC_KEY, mnemonic);
}
#Override
public void actionPerformed(ActionEvent e) {
int index = 0;
DrawEllipses tabComponent = new DrawEllipses(POINT_LIST);
switchPanel.add(tabComponent, index++);
}
}
}
#SuppressWarnings("serial")
class DrawEllipses extends JPanel {
private final int PREF_W = 750; //Window width
private final int PREF_H = 750; //Window height
private static final int OVAL_WIDTH = 30;
private static final Color INACTIVE_COLOR = Color.RED;
private static final Color ACTIVE_COLOR = Color.green;
private java.util.List<Point> points;
private java.util.List<Ellipse2D> ellipses = new ArrayList<>();
private Map<Ellipse2D, Color> ellipseColorMap = new HashMap<>();
/*
* This method is used to populate "ellipses" with the initialized ellipse2D dimensions
*/
public DrawEllipses(java.util.List<Point> points) {
this.points = points;
for (Point p : points) {
int x = p.x - OVAL_WIDTH / 2;
int y = p.y - OVAL_WIDTH / 2;
int w = OVAL_WIDTH;
int h = OVAL_WIDTH;
Ellipse2D ellipse = new Ellipse2D.Double(x, y, w, h);
ellipses.add(ellipse);
ellipseColorMap.put(ellipse, INACTIVE_COLOR);
}
MyMouseAdapter mListener = new MyMouseAdapter();
addMouseListener(mListener);
addMouseMotionListener(mListener);
}
/*
* paintComponent is used to paint the ellipses
*/
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2 = (Graphics2D) g;
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
for (Ellipse2D ellipse : ellipses) {
g2.setColor(ellipseColorMap.get(ellipse));
g2.fill(ellipse);
g2.setColor(Color.BLACK);
g2.setStroke(new BasicStroke(2));
g2.draw(ellipse);
}
/*
* Set the font characteristics, color, and draw the row labels.
*/
g.setFont(new Font("TimesRoman", Font.BOLD, 18));
g.setColor(Color.BLACK);
//Along the top row
g.drawString("External Port", 10, 50);
g.drawString("1", 135, 50);
g.drawString("2", 195, 50);
g.drawString("3", 255, 50);
g.drawString("4", 315, 50);
g.drawString("5", 375, 50);
g.drawString("6", 435, 50);
g.drawString("7", 495, 50);
g.drawString("8", 555, 50);
g.drawString("9", 615, 50);
g.drawString("10", 672, 50);
//Along the Y-axis
g.drawString("Radio 2", 40, 145);
g.drawString("3", 90, 205);
g.drawString("4", 90, 265);
g.drawString("5", 90, 325);
g.drawString("6", 90, 385);
g.drawString("7", 90, 445);
g.drawString("8", 90, 505);
g.drawString("9", 90, 565);
g.drawString("10", 90, 625);
//Along the X-Axis
g.drawString("1", 135, 670);
g.drawString("2", 195, 670);
g.drawString("3", 255, 670);
g.drawString("4", 315, 670);
g.drawString("5", 375, 670);
g.drawString("6", 435, 670);
g.drawString("7", 495, 670);
g.drawString("8", 555, 670);
g.drawString("9", 615, 670);
//Draws a 3DRect around the top row of ellipse2D objects
g2.setColor(Color.lightGray);
g2.draw3DRect(120, 60, 580, 40, true);
g2.draw3DRect(121, 61, 578, 38, true);
g2.draw3DRect(122, 62, 576, 36, true);
}
/*
* MouseAdapter is extended for mousePressed Event that detects if the x, y coordinates
* of a drawn ellipse are clicked. If the color is INACTIVE it is changed to ACTIVE and
* vice versa.
*/
private class MyMouseAdapter extends MouseAdapter {
#Override
/*
* When mousePressed event occurs, the color is toggled between ACTIVE and INACTIVE
*/
public void mousePressed(MouseEvent e) {
Color c;
for (Ellipse2D ellipse : ellipses) {
if (ellipse.contains(e.getPoint())) {
c = (ellipseColorMap.get(ellipse) == INACTIVE_COLOR) ? ACTIVE_COLOR : INACTIVE_COLOR;
ellipseColorMap.put(ellipse, c);
}
}
repaint();
}
}
/*
* This method will set the dimensions of the JFrame equal to the preferred H x W
*/
#Override
public Dimension getPreferredSize() {
if (isPreferredSizeSet()) {
return super.getPreferredSize();
}
return new Dimension(PREF_W, PREF_H);
}
}
switchPanel.add(title, tabComponent);
By default a JPanel uses a FlowLayout which respects the preferred size of the component. The preferred size of your component is (0, 0) so there is nothing to paint. Also, you are using the "title" string which is incorrect (and obsolete as has already been mentioned). That string represents a constraint for the layout manager. You can't just make up a String value. In any case FlowLayout does not accept any contraints so you should just be using:
switchPanel.add(tabComponent);
I am trying to draw on a JPanel
When doing custom painting you need to override the getPreferredSize() of the panel so the layout manager can use the information. If you don't override this method then the size is (0, 0) so there is nothing to paint.
Edit:
First some general comments:
Don't hardcode sizes of the panel. Your hardcoded size of (1200 x 750) is too large for my monitor. If you want full screen then use frame.setExtendedState(JFrame.MAXIMIZED_BOTH);
Post code that you are actually testing. As has already been mentioned your posted code doesn't even add the "switchPanel" to the frame.
You haven't updated the code to show how you override the getPreferredSize() method.
Finally, I see in your code that you add the panel dynamically to the visible GUI. In this case the general code should be:
panel.add(....);
panel.revalidate(); // to invoke the layout manager otherwise size is still (0, 0)
panel.repaint();
You are adding DrawEllipses instances to switchPanel using an obsolete method add(String,Component); you should use something like add(component, index). Also, You don't add switchPanel to anything (commented out in DrawPanelMain ctor).

Java buttons on top of graphics in a GUI issue

For my end of the year project, I'm trying to make a game which helps a person study different questions, which are shown in a GUI. Ideally, buttons will be available for the user to press and see if their answer was correct. I have made the basis of the GUI with the variables, the ArrayList <String[]> variable which will hold the questions with their answers, and tried to make buttons.
However, when I try to run the program, the buttons (I only have one in the code shown) are cut off and I am unable to place them where they properly belong. Please help!
Somebody please show me a solution that actually has been tested and works! I can't seem to get it based off what has been posted for me so far!
Here's what it looks like when I run it:
And here's all of the program's code:
import java.awt.*;
import javax.swing.*;
import java.awt.geom.Line2D;
import java.util.*;
import java.awt.event.*;
public class EuroGUI extends JPanel {
//Instantiate necessary variables.
ArrayList <String[]> questions = new ArrayList <String[]>(); //Stores (Question + Answers, Correct Answer)
int width = 1280; //GUI Size
int height = 720; // ^
int correct = 0; //Number of correct answers
int attempted = 0; //Number of questions attempted
int streak = 0; //Number of correct answers in a row
int points = 0; //Points accumulated
Font title = new Font("Serif", Font.PLAIN, 60);
Font statsTitle = new Font("Serif", Font.PLAIN, 45);
Font sig = new Font("Mistral", Font.PLAIN, 45);
//Drop down options stuff
JMenu ddMenu = new JMenu("Select an option");
String[] dropDown = new String[] {"A", "B", "C", "D", "E"};
String completion = "starting"; //Determines if the first time repainting
Scanner keyboard = new Scanner(System.in); //Make a keyboard object to test stuff
public static void main(String[]args){ //Main Runner
EuroGUI g = new EuroGUI();
g.setUpScreen();
g.repaint();
}
public void setUpScreen() { //Create the physical GUI, which paints all graphics
//Used http://www.mathcs.emory.edu/~cheung/Courses/377/Syllabus/8-JDBC/GUI/Progs/Layout1.java for buttons
//Create actual GUI window and graphics.
//Create actual GUI window and graphics.
JFrame f = new JFrame("AP European History Study Tool");
JPanel panelGrid = new JPanel();
panelGrid.setLayout(new GridLayout());
setLayout(null);
JPanel panelBorder = new JPanel();
panelBorder.setLayout(new BorderLayout());
JButton xA = new JButton("Choice A");
panelGrid.add(xA, "West");
panelBorder.setLocation(500,500);
f.getContentPane().add(panelBorder);
f.setResizable(false);
f.setVisible(true);
f.setSize(width, height);
f.setBackground(Color.lightGray);
f.add(this);
}
public void paintComponent(Graphics g) { //Draws information on the GUI (Found information on graphics 2D at http://www.tutorialspoint.com/javaexamples/gui_line.htm)
Graphics2D g2 = (Graphics2D) (g);
//Draw a background box which will cover anything that was not re-painted over.
g.setColor(Color.lightGray);
g.fillRect (0, 1280, 0, 720);
//Title "interface"
//Change color back for the lines;
g.setColor(Color.blue);
//Enable bolder lines.
g2.setStroke(new BasicStroke(6));
//Create a box of lines around the title.
g2.draw(new Line2D.Double(200, 0, 200, 120));
g2.draw(new Line2D.Double(200, 120, 1070, 120));
g2.draw(new Line2D.Double(1070, 0, 1070, 120));
g2.draw(new Line2D.Double(200, 0, 1070, 0));
//Fill in box with title with some colors :)
g.setColor(Color.green);
g.fillRect (200, 0, 870, 120);
//Write title
g2.setFont(title);
g.setColor(Color.cyan);
g.drawString("AP European History Study Tool", 240, 80);
g.setColor(Color.black);
g.drawString("AP European History Study Tool", 238, 78);
//Signiature on Title
g.setColor(Color.white);
g2.setFont(sig);
g.drawString("by My Name", 600, 120);
g.setColor(Color.blue);
g.drawString("by My Name", 598, 118);
//Statistics Bar Outline
g.setColor(Color.blue);
g2.draw(new Line2D.Double(1000, 170, 1000, 670));
g2.draw(new Line2D.Double(1000, 170, 1280, 170));
g2.draw(new Line2D.Double(1280, 170, 1280, 670));
g2.draw(new Line2D.Double(1000, 670, 1280, 670));
g2.setStroke(new BasicStroke(6));
g.setColor(Color.black);
g.fillRect (1000, 170, 1280, 500);
g.setColor(Color.green); //Underline
g2.setStroke(new BasicStroke(2));
g2.draw(new Line2D.Double(1055, 230, 1215, 230));
g2.setStroke(new BasicStroke(6));
//Overall Score
g2.setFont(statsTitle);
g2.setColor(Color.green);
g.drawString("Statistics", 1055, 220);
g2.setColor(Color.cyan);
g.drawString(correct + "/" + attempted + " Correct", 1035, 285);
//Streak
if (streak >= 3)
{
g2.setColor(Color.red);
g.drawString(streak + " Streak", 1060, 340);
}
else{
g2.setColor(Color.cyan);
g.drawString(streak + " Streak", 1060, 340);
}
if (completion.equals("starting")){
}
}
}
This is a symptom of breaking the paint chain.
Graphics is a shared resources, that is, the same Graphics context is used to paint all the components within a paint cycle.
One of the jobs of paintComponent is to prepare the Graphics context for painting by clearing it before anything is painted to it.
So instead of...
public void paintComponent(Graphics g) { //Draws information on the GUI (Found information on graphics 2D at http://www.tutorialspoint.com/javaexamples/gui_line.htm)
Graphics2D g2 = (Graphics2D) (g);
Try using
public void paintComponent(Graphics g) { //Draws information on the GUI (Found information on graphics 2D at http://www.tutorialspoint.com/javaexamples/gui_line.htm)
super.paintComponent(g);
Graphics2D g2 = (Graphics2D) (g);
Pixel perfect layouts are an illusion in modern UIs. You don't control factors like font metrics, dpi or rendering pipelines which all effect the amount of space individual components might need. Instead you should make use of appropriate layout managers and consider using compound layouts to produce more complex solutions
Updated with example
There are a number of things wrong, the main problem is, panelGrid isn't been added to anything. The null layout manager is also not helping.
You're also focusing all your efforts into a single panel, which is going to make life messy.
Instead, try separating each section into its own component and focus on there individual needs, you'll find it much easier to manage in the long run.
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Font;
import java.awt.FontMetrics;
import java.awt.Graphics;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.Insets;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;
import javax.swing.border.CompoundBorder;
import javax.swing.border.EmptyBorder;
import javax.swing.border.LineBorder;
import javax.swing.border.MatteBorder;
public class Example {
public static void main(String[] args) {
new Example();
}
public Example() {
EventQueue.invokeLater(new Runnable() {
#Override
public void run() {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
ex.printStackTrace();
}
JFrame frame = new JFrame("Testing");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(new HeaderPane(), BorderLayout.NORTH);
frame.add(new StatisticsPane(), BorderLayout.EAST);
frame.add(new QuestionPane());
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
});
}
public class HeaderPane extends JPanel {
public HeaderPane() {
setLayout(new GridBagLayout());
GridBagConstraints gbc = new GridBagConstraints();
gbc.gridx = 1;
gbc.gridy = 0;
gbc.anchor = GridBagConstraints.SOUTH;
// gbc.ipadx = 100;
NamePane namePane = new NamePane();
FontMetrics fm = namePane.getFontMetrics(namePane.getFont());
add(namePane, gbc);
gbc.insets = new Insets(0, 0, fm.getDescent(), 0);
gbc.gridx = 0;
gbc.gridwidth = 2;
gbc.ipadx = 10;
gbc.ipady = 10;
gbc.anchor = GridBagConstraints.CENTER;
add(new TitlePane(), gbc);
}
public class ShadowLabel extends JPanel {
private String text;
private Color shadowColor;
private int shadowOffset;
public ShadowLabel(String text, Color shadowColor) {
this.text = text;
this.shadowColor = shadowColor;
this.shadowOffset = 2;
}
public int getShadowOffset() {
return shadowOffset;
}
public void setShadowOffset(int shadowOffset) {
this.shadowOffset = shadowOffset;
}
#Override
public Dimension getPreferredSize() {
FontMetrics fm = getFontMetrics(getFont());
return new Dimension(fm.stringWidth(getText()), fm.getHeight());
}
public String getText() {
return text;
}
public Color getShadowColor() {
return shadowColor;
}
public void setText(String text) {
this.text = text;
repaint();
}
public void setShadowColor(Color shadowColor) {
this.shadowColor = shadowColor;
repaint();
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
g.setFont(getFont());
FontMetrics fm = g.getFontMetrics();
int x = (getWidth() - fm.stringWidth(getText())) / 2;
int y = (getHeight() - fm.getHeight()) / 2;
g.setColor(getShadowColor());
g.drawString(getText(), x + getShadowOffset(), y + getShadowOffset() + fm.getAscent());
g.setColor(getForeground());
g.drawString(getText(), x, y + fm.getAscent());
}
}
public class TitlePane extends ShadowLabel {
public TitlePane() {
super("AP European History Study Tool", Color.CYAN);
setBackground(Color.GREEN);
setBorder(new MatteBorder(0, 1, 1, 1, Color.BLUE));
setFont(new Font("Serif", Font.PLAIN, 60));
}
}
public class NamePane extends ShadowLabel {
public NamePane() {
super("by Me", Color.WHITE);
setForeground(Color.BLUE);
setFont(new Font("Mistral", Font.PLAIN, 45));
setOpaque(false);
}
}
}
public class StatisticsPane extends JPanel {
private JLabel score;
private JLabel streak;
public StatisticsPane() {
setLayout(new BorderLayout());
setBackground(Color.BLACK);
setBorder(new CompoundBorder(new LineBorder(Color.BLUE), new EmptyBorder(4, 4, 4, 4)));
JLabel statistics = new JLabel("Statistics");
statistics.setFont(new Font("Serif", Font.PLAIN, 45));
statistics.setForeground(Color.GREEN);
statistics.setBorder(new CompoundBorder(new MatteBorder(0, 0, 1, 0, Color.GREEN), new EmptyBorder(4, 4, 4, 4)));
add(statistics, BorderLayout.NORTH);
score = new JLabel("0/0 correct");
score.setForeground(Color.GREEN);
score.setFont(new Font("Serif", Font.PLAIN, 45));
streak = new JLabel("0 streak");
streak.setForeground(Color.GREEN);
streak.setFont(new Font("Serif", Font.PLAIN, 45));
JPanel pnl = new JPanel(new GridBagLayout());
pnl.setOpaque(false);
GridBagConstraints gbc = new GridBagConstraints();
gbc.gridx = 0;
gbc.gridy = 0;
pnl.add(score, gbc);
gbc.gridy++;
gbc.weighty = 1;
gbc.anchor = GridBagConstraints.NORTH;
pnl.add(streak, gbc);
add(pnl);
}
}
public class QuestionPane extends JPanel {
public QuestionPane() {
setLayout(new GridBagLayout());
GridBagConstraints gbc = new GridBagConstraints();
gbc.gridwidth = GridBagConstraints.REMAINDER;
gbc.anchor = GridBagConstraints.WEST;
JButton xA = new JButton("Choice A");
add(xA, gbc);
}
}
}
I would also separate the management of the data and the UI, so that the data is managed by some kind of model or models which can respond to changes in the UI and visa-versa. This means that your UI becomes a visual representation of your data model and allows the two to decouple and work independently from each other...
Take a look Model–view–controller for more details. Note: Swing uses a version of this, but it's more like Model-View and Controller
You should also take a look at Creating a GUI With JFC/Swing to see how you make better use of the ready made components available in Swing
You did not set up your Layout properly. Might not be exactly what you are looking for but if you change from a FlowLayout to a BorderLayout it seems to fix your issue. Also you don't use panel2 anywhere in you code so you can remove it.
public void setUpScreen() { //Create the physical GUI, which paints all graphics
//Used http://www.mathcs.emory.edu/~cheung/Courses/377/Syllabus/8-JDBC/GUI/Progs/Layout1.java for buttons
//Create actual GUI window and graphics.
JFrame f = new JFrame("AP European History Study Tool");
JPanel panelGrid = new JPanel();
panelGrid.setLayout(new GridLayout());
setLayout(null);
JPanel panelBorder = new JPanel();
panelBorder.setLayout(new BorderLayout());
JButton xA = new JButton("Choice A");
panelGrid.add(xA, "West");
panelBorder.setLocation(500,500);
f.getContentPane().add(panelBorder);
f.setResizable(false);
f.setVisible(true);
f.setSize(width, height);
f.setBackground(Color.lightGray);
f.add(this);
}

Event handling in Java not working as expected

I cannot get the code linked below to do exactly what I want it to do.
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class Gui {
static JFrame frame;
static JLabel label;
public static void main (String[] args) {
Gui gui = new Gui();
gui.go();
}
public void go () {
frame = new JFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(400,300);
frame.setVisible(true);
MyDrawPanel panel = new MyDrawPanel();
frame.getContentPane().add(BorderLayout.CENTER, panel);
label = new JLabel("I'm a label");
frame.getContentPane().add(BorderLayout.WEST, label);
JButton colorButton = new JButton("Change Colors");
ColorButtonListener colorButtonListener = new ColorButtonListener();
colorButton.addActionListener(colorButtonListener);
frame.getContentPane().add(BorderLayout.SOUTH, colorButton);
JButton labelButton = new JButton("Change Label");
LabelButtonListener labelButtonListener = new LabelButtonListener();
labelButton.addActionListener(labelButtonListener);
frame.getContentPane().add(BorderLayout.EAST, labelButton);
}
}
class ColorButtonListener implements ActionListener {
JFrame frame = Gui.frame;
public void actionPerformed (ActionEvent event) {
frame.repaint();
}
}
class LabelButtonListener implements ActionListener {
JLabel label = Gui.label;
public void actionPerformed (ActionEvent event) {
if (label.getText() == "That hurt") {
label.setText("I'm a label");
} else {
label.setText("That hurt");
}
}
}
class MyDrawPanel extends JPanel {
public void paintComponent (Graphics g) {
Graphics2D g2d = (Graphics2D) g;
int red = (int) (Math.random() * 256);
int green = (int) (Math.random() * 256);
int blue = (int) (Math.random() * 256);
Color startColor = new Color(red, green, blue);
red = (int) (Math.random() * 256);
green = (int) (Math.random() * 256);
blue = (int) (Math.random() * 256);
Color endColor = new Color(red, green, blue);
GradientPaint gradient = new GradientPaint(70, 70, startColor, 150, 150, endColor);
g2d.setPaint(gradient);
g2d.fillOval(0, 0, this.getWidth(), this.getHeight());
}
}
There is a panel class used to draw a circle and then the panel is positioned in the center region of the frame.
A label is positioned in the west region of the frame, two buttons colorButton(positioned south) and labelButton(positioned east) should control the circle and the label respectively. 2 classes ColorButtonListener and LabelButtonListener implement the ActionListener interface and are registered with the colorButton and labelButton respectively. The color button when clicked should paint a circle with random colors and the label button when clicked should toggle between the text "I'm a label" and "That hurt".
Now, the issue I am having is with the label button. When clicking it, it not only changes the text(as expected), but also redraws the circle. This button should not be redrawing the circle. The color button works as expected.
The problem is you don't control when a repaint might occur. Instead of changing the color every time paintComponent is called, which you can't control, change the color only when you want to and reference from within the paintComponent method, for example
class MyDrawPanel extends JPanel {
private Color startColor;
private Color endColor;
// And setters or some other way
// to randomise the colors
public void paintComponent (Graphics g) {
Graphics2D g2d = (Graphics2D) g;
GradientPaint gradient = new GradientPaint(70, 70, startColor, 150, 150, endColor);
g2d.setPaint(gradient);
g2d.fillOval(0, 0, this.getWidth(), this.getHeight());
}
}
Check out Painting in AWT and Swing for more details
This is because setText() methods internally calls repaint() if new text is not same as old text. So results in color change whenever you click that button too.

Categories