Welcome to the Java Programming Forums


The professional, friendly Java community. 21,500 members and growing!


The Java Programming Forums are a community of Java programmers from all around the World. Our members have a wide range of skills and they all have one thing in common: A passion to learn and code Java. We invite beginner Java programmers right through to Java professionals to post here and share your knowledge. Become a part of the community, help others, expand your knowledge of Java and enjoy talking with like minded people. Registration is quick and best of all free. We look forward to meeting you.


>> REGISTER NOW TO START POSTING


Members have full access to the forums. Advertisements are removed for registered users.

Results 1 to 20 of 20

Thread: Creating a custom panel:

  1. #1
    Junior Member
    Join Date
    Oct 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Creating a custom panel:

    I need to create a custom panel that displays X,0, or nothing, randomly.
    It is supposed to be something like a tic tac toe board. The only thing is, when you open it it must randomly place the x's, 0's, or blank spaces, and when the screen is resized by pulling on the corner, or elsewhere, it must randomly change the figures in its grid.

    I can not figure out how to display the images randomly. I have no idea what I'm missing, it just escapes me.

    I will post what I have thus far and kindly request assistance. What I need help with is randomly generating the figures positions, and making it repaint when resized or reopened.

    Thanks, here is what I have thus far:
    import java.awt.Color;
    import java.awt.Graphics;
    import java.awt.GridLayout;
    import javax.swing.JFrame;
    import javax.swing.JPanel;
     
    public class Exercise15_07 extends JFrame {
     
        public Exercise15_07() {
            add(new ticTacToeBoard());
     
     
        }
     
        public static void main(String[] args) {
            Exercise15_07 ticTac = new Exercise15_07();
            ticTac.setVisible(true);
            ticTac.setSize(200, 200);
            ticTac.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
            ticTac.setLocationRelativeTo(null);
            ticTac.setTitle("Tic Tac Toe");
        }
    }
     
    class ticTacToeBoard extends JPanel {
     
        JPanel frame = new JPanel(new GridLayout(3, 3));
     
        @Override
        protected void paintComponent(Graphics g) {
            super.paintComponent(g);
            g.drawLine(2, 2, 30, 30);
            g.drawLine(30, 2, 2, 30);
     
     
     
        }
    }


  2. #2
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    Eastern Florida
    Posts
    25,042
    Thanks
    63
    Thanked 2,708 Times in 2,658 Posts

    Default Re: Creating a custom panel:

    how to display the images randomly
    Are you asking how to choose which image to display?
    See the Random class. It has methods to return random values that you could use to choose which image to display.

    help with is randomly generating the figures positions
    Again you can use the methods of the Random class to return values for positioning the figures.
    You need to get the range of possible values and use that with the Random class methods to generate x,y values in the range of values you want.

  3. #3
    Forum VIP
    Join Date
    Jul 2010
    Posts
    1,676
    Thanks
    25
    Thanked 329 Times in 305 Posts

    Default Re: Creating a custom panel:

    Ok, so what do you mean by "randomly generating the figures positions"? Do you mean that you want them in random places? If so, have a look at how you draw your lines. Imagine your Xs and Os as having a box around them, where a coordinate would specify the the top-left corner of the box. Now, if we randomly generate a coordinate for that top-left corner, we can randomly place our box.
    So, to get a random number, you can use the Math.random() method. This method returns a random double between 0 and 1 inclusively. But we want to randomly get a number between 0 and 200 inclusively, because 200 is our frame size. So, we multiply the random number by 200. So, you would want to code:
    double randomNumber = Math.random()*200;
    Do that to get a random x value and to get a random y value. Now that we have our coordinate for our box, we need to draw the X or O by offsetting the x and y coordinates for the start and end of your lines from the coordinate of our box. So we need a formula to do that. Now, according to your current setup, we know that the ending x coordinate and the ending y coordinate for the first line is 28 units more than the starting x and y coordinates. For the second line, the starting x coordinate is 28 units more than the ending x coordinate and the ending y coordinate is 28 units more than the starting y coordinate. So, provided you have generated a random number for x (and placed it in an int value named x) and a random number for y (and placed it in an int value named y), your code would look like this:
    g.drawLine(x, y, x+28, y+28);
    g.drawLine(x+28, y, x, y+28);

    Would would go about the same sort of procedure for your 0s.
    Does that make sense?

  4. #4
    Junior Member
    Join Date
    Oct 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Creating a custom panel:

    Quote Originally Posted by Norm View Post
    Are you asking how to choose which image to display?
    See the Random class. It has methods to return random values that you could use to choose which image to display.


    Again you can use the methods of the Random class to return values for positioning the figures.
    You need to get the range of possible values and use that with the Random class methods to generate x,y values in the range of values you want.
    Not exactly, what I am trying to figure out is: I am using a 3 x 3 grid and each time there may be something like this: x0x or 00x
    xx0 0x0
    0x x0
    I could get the coordinates of each spot and draw the images on there but if I want them placed randomly then how do I get them in the correct position? Earlier I had it where it painted an 0 with an x through it in every spot. I used: int fig1[] = new int[3]
    for (int j = 0; j < 3; j++) {

    int fig1 = (int)(Math.random() * 2);
    }

    Ha, that may have been part of the problem I don't think that I had an image for the "blank" space. Regardless though, I was using the ImageIcon earlier and had the numbers stored in an array so I had something like this: ImageIcon card1 = new ImageIcon(fig[0]);

    I am writing this while trying to remember but even as I do so I am seeing that I had more errors than I had thought.

    Let me give this another shot, I have changed so many things that I need to just start over.

  5. #5
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    Eastern Florida
    Posts
    25,042
    Thanks
    63
    Thanked 2,708 Times in 2,658 Posts

    Default Re: Creating a custom panel:

    Ok, we'll want until you get a new design.

  6. #6
    Junior Member
    Join Date
    Oct 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Creating a custom panel:

    OK, I can't get any further. I have written and erased and re-written my code over and over and I can't seem to figure it out, or even get to the point I was at earlier.

    I think I am getting hung up on the idea of doing in as an ImageIcon because in one of the later problems in my book it asks us to redo the program in a JPanel instead of as an ImageIcon.

    Please help

  7. #7
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    Eastern Florida
    Posts
    25,042
    Thanks
    63
    Thanked 2,708 Times in 2,658 Posts

    Default Re: Creating a custom panel:

    If getting a image is a problem right now, leave it until later to solve.
    Use something simple to get the logic working for now. Something like: drawString(x,y, "X") for example.

  8. #8
    Junior Member
    Join Date
    Oct 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Creating a custom panel:

    I can draw an X with the: protected void paintComponent(Graphics g) {
    super.paintComponent(g);
    g.drawLine(int x, int y, int x, int y);
    }

    but I can't figure out how to do more than draw a line and circle and display it at the coordinates that I want. I have know idea how to get it into a 3 x 3 grid randomly and then make it change when I resize the screen by dragging it.

    How would I store the lines I make above, so that I can call them in something and then use the random class to, randomly, re-paint them back to the screen (or does that even make sense)
    Last edited by xterradaniel; October 2nd, 2010 at 08:26 PM.

  9. #9
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    Eastern Florida
    Posts
    25,042
    Thanks
    63
    Thanked 2,708 Times in 2,658 Posts

    Default Re: Creating a custom panel:

    Which problem are you working on? One at a time is better.

    How would I store the lines
    You compute the x,y of the ends of the lines and save them for the paint method to use.

  10. #10
    Junior Member
    Join Date
    Oct 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Creating a custom panel:

    well if I draw a line by its coordinates as: g.drawLine(x, y, x, y,);
    then how can I store it as an object or something so that I can randomly paint it in any of the positions in a 3 x 3 grid?

    or is this a terrible way of attempting to do what I want?

  11. #11
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    Eastern Florida
    Posts
    25,042
    Thanks
    63
    Thanked 2,708 Times in 2,658 Posts

    Default Re: Creating a custom panel:

    how can I store it as an object or something so that I can randomly paint it
    Which problem is this one? I thought we were working on how to draw the lines for the 3x3 grid.
    What goes in the squares of the grid was going to be a simple "X" or "O" drawn by drawString().

    Which problem do you want to work on?

  12. #12
    Junior Member
    Join Date
    Oct 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Creating a custom panel:

    No, I am sorry if I was misleading. I know how to draw lines for a 3 x 3 grid, I already had to write a program like that for my first assignment in GUI. The program description does not even call for lines in the grid. I am trying to get the images, the 'x', 'o', or ' ' placed randomly in the grid. Or when I said I wanted a way to store the letters it was only so I could then get them into the grid. I am probably trying to write this program all wrong...

  13. #13
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    Eastern Florida
    Posts
    25,042
    Thanks
    63
    Thanked 2,708 Times in 2,658 Posts

    Default Re: Creating a custom panel:

    Ok, drawing the lines and repositioning them when the component changes size is solved.
    Now you want to draw an image in one of the nine squares created by the lines.
    Is that the problem?
    A design: When the positions for the lines are computed, also compute the center of each of the nine squares and save it with the size of the square in a 9 element array. Need new class to save the x,y and size.
    To chose one at random, generate a random number from 0 to 8 as index to the array.
    The paint method takes that index into the array and draws the figure centered on the location.

  14. #14
    Junior Member
    Join Date
    Oct 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Creating a custom panel:

    OK, I get what you are saying to do. However, since I don't actually need to draw the lines that would separate the grid into 3 x 3, should I still just compute the centers of where the 9 boxes would be and then save that to an array.

    Now, since I am going to try and put these coordinates in an array wouldn't I also need two two dimensional arrays for the x, y of the first line and the x, y of the second line to create a cross? Or is there a way to draw a cross and a circle just from their center coordinates? Then for the circles I would need just an x, y for the starting position and then a width and a height. So I could just put those coordinates in the 2d array also?


    But if I use the random methods to get the coordinates couldn't I potentially get 4 coordinates that wouldn't draw a cross, but something like two lines parallel or something?

  15. #15
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    Eastern Florida
    Posts
    25,042
    Thanks
    63
    Thanked 2,708 Times in 2,658 Posts

    Default Re: Creating a custom panel:

    need two two dimensional arrays
    Use classes to hold the properties of the figures vs using arrays.
    way to draw a cross and a circle just from their center coordinates
    If the center coords require too much programming, then save the x,y for the upper left corner vs the center.

    if I use the random methods to get the coordinates
    What is random about drawing a circle or an X at a given x,y location?
    I thought the random part was in choosing one of 9 locations to do the drawing.

  16. #16
    Junior Member
    Join Date
    Oct 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Creating a custom panel:

    I just don't get it, I guess.

    I don't see how to use a class to save the coordinates and then use that in paintComponent.

  17. #17
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    Eastern Florida
    Posts
    25,042
    Thanks
    63
    Thanked 2,708 Times in 2,658 Posts

    Default Re: Creating a custom panel:

    // A class to save the starting and ending x,y coords for a line
    class LineCoords {
     int firstX;
     int firstY;
     int endX;
     int endY;
      // draw the above line
     public void drawLine(Graphics g) {
        g.drawLine(firstX, firstY, endX, endY);
     }
    }

  18. #18
    Junior Member
    Join Date
    Oct 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Creating a custom panel:

    OK, I see but how do I get it to be random whether it will draw a line or a circle?

  19. #19
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    Eastern Florida
    Posts
    25,042
    Thanks
    63
    Thanked 2,708 Times in 2,658 Posts

    Default Re: Creating a custom panel:

    Look at the Random class. It has many methods to choose from.
    Get the System time and test if its odd or even.

  20. #20
    Member Darryl.Burke's Avatar
    Join Date
    Mar 2010
    Location
    Madgaon, Goa, India
    Posts
    494
    Thanks
    8
    Thanked 48 Times in 46 Posts

    Default Re: Creating a custom panel:

    Cross posted
    Creating a custom panel: - Java Forums

    db

Similar Threads

  1. My Custom Layout (VERY EASY TO USE)
    By aussiemcgr in forum AWT / Java Swing
    Replies: 10
    Last Post: August 5th, 2010, 01:37 PM
  2. Adding panels to a central panel.
    By Johannes in forum AWT / Java Swing
    Replies: 3
    Last Post: July 4th, 2010, 05:31 PM
  3. repaint panel without clearing it
    By enflation in forum Java Theory & Questions
    Replies: 5
    Last Post: June 27th, 2010, 04:00 PM
  4. suggestionbox inside modal panel
    By smackdown90 in forum Web Frameworks
    Replies: 1
    Last Post: April 8th, 2010, 01:16 PM
  5. Custom Java stack class (with generics) problem
    By TBBucs in forum What's Wrong With My Code?
    Replies: 2
    Last Post: March 7th, 2010, 02:25 AM