Add panel ontop of panel and both are visible

Question

I'm making a music/drawing application which you free draw lines with your mouse and a TrackBar passes horizontally through it and reads the lines and uses the x and y coordinate to modify music.

• The problem I'm having is that TrackBar class is a JPanel and DrawBoard class is a JPanel which I add inside a Frame. But which ever is on-top is the one that will show, what I want is for them to both show, and the TrackBar to pass on top of the lines drawn.

Below Is the source code of this 3 classes and took out some unncesesary code:

The MainFrame class where I add them (with the current setup the TrackBar doesnt appear but the Drawing board appears since it overlaps it):

public class MainFrame extends JFrame {

public static ColourToolbar colourBar;
public static TrackBar tb;

public MainFrame(){

    super("VIPE by Prestige WorldWide");


    // Top colour toolbar for tones
    colourBar = new ColourToolbar();
    this.getContentPane().add(colourBar, BorderLayout.NORTH);

    // This class ImagePanel is a JPanel which I overite the paintCOmponent to have background
    ImagePanel bg = new ImagePanel();   
        bg.setLayout(new BorderLayout());
        Dimension size = getPreferredSize();
        size.setSize(1024,800); //w, h
        bg.setPreferredSize(size);
    this.getContentPane().add(bg, BorderLayout.CENTER);



    // I add the TrackBar to the ImagePanel since its the Background
    tb = new TrackBar();
    bg.add(tb, BorderLayout.CENTER);

    // I add the drawing board but It will overlap the Trackbar
    DrawBoard dboard =  new DrawBoard();
    bg.add(dboard, BorderLayout.CENTER);




    // The control toolbar where the settings and control buttons are.
    Toolbar toolBar = new Toolbar();
    this.getContentPane().add(toolBar, BorderLayout.SOUTH);
}

public static void main(String[] args){

    MainFrame frame = new MainFrame();

    frame.setBackground(Color.WHITE);
    frame.setSize(1024,768);
    frame.setLocationRelativeTo(null);
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setResizable(false);
    //frame.pack();
    frame.setVisible(true);

}


}

Now the TrackBar class:

public class TrackBar extends JPanel{

private TrackBarAction tba = new TrackBarAction(this);
public static int TIME = 9;

public Timer t = new Timer(TIME, tba);
public static double x = 0, y = 0, velX = 1.0, velY = 0;

private int SKIP = 120;


public TrackBar(){

    this.setOpaque(false);
}

@Override
public void paintComponent(Graphics g){
            super.paintComponent(g);

            Graphics2D g2d = (Graphics2D)g;
            //g2d.drawRect((int)x, (int)y, 10, 800);

            Rectangle2D r2d = new Rectangle2D.Double(x, y, 8.0, 800.0);  // x,x, w, h
            g2d.setPaint(Color.DARK_GRAY);
            g2d.fill(r2d);
            g2d.draw(r2d);
}

public void reset(){

    t.stop();
    x = 0;
    y = 0;
    velX = 0.5;
    velY = 0;
    this.repaint();
}

public void skipForward(){

    if(x+SKIP <= 1024){
     x += SKIP;   
    } else {
        x = 1024 - x;
    }

    this.repaint();
}

public void skipBackwards(){

    if(x-SKIP >= 0){
    x -= SKIP;
    } else {
        x = 0;
    }

    this.repaint();
}

}

And now the DrawBoard class:

public class DrawBoard extends JPanel implements MouseListener, MouseMotionListener{


 (..)

public Color currentColor;

public static boolean eraser = false;

private int xX1, yY1;

public DrawBoard(){  



   Graphics2D g2d = bImage.createGraphics();
   g2d.dispose();

    Dimension size = getPreferredSize();
    size.setSize(1024,800); //w, h
    setPreferredSize(size);
    //status =  new JLabel("default");
    //add(status, BorderLayout.SOUTH);
    addMouseListener(this);
    addMouseMotionListener(this);  


     imgLabel = new JLabel(new ImageIcon(bImage)) {
     @Override
     protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        paintInLabel(g);
     }
   };
     imgLabel.setOpaque(false);
     setOpaque(false);
      add(imgLabel, BorderLayout.CENTER);

}

private void paintInLabel(Graphics g) {

    if(!eraser){
        Graphics2D g2d = (Graphics2D) g;
        g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
        g2d.setColor(getColor()); // this colour is when mouse is pressed
        g2d.setStroke(new BasicStroke(STROKESIZE));
        if (points.size() < 1) {
            return;
        }
        for (int i = 1; i < points.size(); i++) {
            int x1 = points.get(i - 1).x;
            int y1 = points.get(i - 1).y;
            int x2 = points.get(i).x;
            int y2 = points.get(i).y;
            g2d.drawLine(x1, y1, x2, y2);
        }
    }

}


// Where the drawing happens
@Override
public void mousePressed(MouseEvent e) {
    //status.setText("you pressed down the mouse");
    if(!eraser){
        xX1 = e.getX();
        yY1 = e.getY();
        points.add(e.getPoint());
    }
}

@Override
public void mouseDragged(MouseEvent e) {
  //status.setText("you draged the mouse");
    Graphics2D g2d = bImage.createGraphics();

    // this is the eraser code
    if(eraser){
        //Graphics2D g2d = bImage.createGraphics();
        System.out.println("eraser = true");
        System.out.println("Stroke = " + STROKESIZE);
        g2d.setComposite(AlphaComposite.Clear);
        g2d.setColor(new Color(0, 0, 0, 0));
        g2d.drawRect(e.getX(), e.getY(), STROKESIZE, STROKESIZE);
        g2d.fillRect(e.getX(), e.getY(), STROKESIZE, STROKESIZE);
       // g2d.setColor(c);

        imgLabel.repaint();
    }else {
        //g2d.setComposite();
        points.add(e.getPoint());
        System.out.println("point = " + e.getPoint());
        imgLabel.repaint();
    }

}

@Override
public void mouseReleased(MouseEvent e) {
    //status.setText("you release the mouse click");
    if(!eraser){
        Graphics2D g2d = bImage.createGraphics();
        g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
        g2d.setColor(getColor()); // this is the final colour
        g2d.setStroke(new BasicStroke(STROKESIZE));


        if (points.size() >= 2) {
            for (int i = 1; i < points.size(); i++) {
                int x1 = points.get(i - 1).x;
                int y1 = points.get(i - 1).y;
                int x2 = points.get(i).x;
                int y2 = points.get(i).y;
                g2d.drawLine(x1, y1, x2, y2);
            }
        }
     g2d.dispose();

     points.clear();
     imgLabel.repaint();
    }
    //imgLabel.repaint();

}
// End of where the drawing happens

public void clearDrawBoard() {

}

private Color getColor() {

    return ColourToolbar.selectedColor;
}

private void setColor(Color col){

    this.currentColor = col;
}

@Override
public void mouseClicked(MouseEvent e) {
    //throw new UnsupportedOperationException("Not supported yet.");
}

}

Answer 1

BorderLayout can only have one component add to each of it a 5 positions. By adding the DrawPanel to the center position, you are effectively removing the TrackPanel.

Instead, set the layout manager of the TrackBar to BorderLayout and add the DrawPanel to it.

You could also use a JLayeredPane, but the management becomes more involved