Results 1 to 10 of 10
Like Tree4Likes
  • 1 Post By Norm
  • 1 Post By jim829
  • 1 Post By jim829
  • 1 Post By jim829

Thread: Drawing JPanels on top of background image of parent JPanel

  1. #1
    igorland is offline Member
    Join Date
    Jan 2013
    Posts
    86
    Rep Power
    0

    Default Drawing JPanels on top of background image of parent JPanel

    I am trying to create a JPanel with a background image. Then I would like to add a few more JPanels to the first JPanel that will contain JSliders. My problem is that I am trying to add the panels with sliders on top of the image, but it is drawn under the image. Another challenge is to make sure that the position of the panels with sliders are fixed relative to the background image, whereas the position of the image itself may be shifted (e.g., when resizing the frame). Is it possible to achieve just with Layouts or it is more complicated?

    Java Code:
    private void createPanelLoad()
        {
            java.awt.GridBagConstraints gridBagConstraints;
            
            pnlLoad = new JPanel();
            pnlLoad.setLayout(new java.awt.BorderLayout());
            
            pnlLoadPaxImage = new PanelLoadPlanePax(pnlLoad.getSize());
            pnlLoadPaxImage.setLayout(new java.awt.GridBagLayout());
            pnlLoadPaxImage.setBorder(javax.swing.BorderFactory.createBevelBorder(javax.swing.border.BevelBorder.LOWERED));
            
            JPanel panel1 = new JPanel();
            panel1.setLayout(new java.awt.FlowLayout(0, 0, 0));
            panel1.setBackground(Color.red);
            panel1.setPreferredSize(new Dimension(100,50));
            gridBagConstraints = new java.awt.GridBagConstraints();
            gridBagConstraints.gridx = 0;
            gridBagConstraints.gridy = 0;
            gridBagConstraints.weightx = 1.0;
            gridBagConstraints.anchor = java.awt.GridBagConstraints.WEST;
            gridBagConstraints.insets = new java.awt.Insets(10, 250, 5, 5);
            pnlLoadPaxImage.add(panel1,gridBagConstraints);
    
            pnlLoad.add(pnlLoadPaxImage, java.awt.BorderLayout.CENTER);
    }

    Java Code:
    public class PanelLoadPlanePax extends JPanel
    {
        private int box_width;
        private int box_height;
        private Image planeImg;
        
    
        public PanelLoadPlanePax(Dimension dimension) 
        {
            this.box_width = (int)dimension.getWidth();
            this.box_height = (int)dimension.getHeight();
            
            planeImg = new ImageIcon("src/images/plane/plane_side.png").getImage();
        }
        
        
        @Override
        public void paintComponent(Graphics g) 
        {
            super.paintComponent(g); 
      
            Graphics2D g2d = (Graphics2D)g.create();
            int x = (this.getWidth() - planeImg.getWidth(null)) / 2;
            
            g2d.drawImage(planeImg, x, 0, null);
    
        }
        
    }
    Drawing JPanels on top of background image of parent JPanel-image1.png

    Drawing JPanels on top of background image of parent JPanel-image2.png

    Thanks a lot!

  2. #2
    Norm's Avatar
    Norm is offline Moderator
    Join Date
    Jun 2008
    Location
    Eastern Florida
    Posts
    19,942
    Rep Power
    30

    Default Re: Drawing JPanels on top of background image of parent JPanel

    Look at using the JFrame's GlassPane to draw other components on top.
    igorland likes this.
    If you don't understand my response, don't ignore it, ask a question.

  3. #3
    jim829 is offline Senior Member
    Join Date
    Jan 2013
    Location
    Northern Virginia, United States
    Posts
    6,174
    Rep Power
    12

    Default Re: Drawing JPanels on top of background image of parent JPanel

    You can also override the paint method of JFrame and draw the image there as background. Then
    the other panels and images will be on top when you add them to the frame. There may also be a
    better method using JLayer but I have not worked with it that much.

    Regards,
    Jim
    igorland likes this.
    The JavaTM Tutorials | SSCCE | Java Naming Conventions
    Poor planning on your part does not constitute an emergency on my part

  4. #4
    igorland is offline Member
    Join Date
    Jan 2013
    Posts
    86
    Rep Power
    0

    Default Re: Drawing JPanels on top of background image of parent JPanel

    Thanks a lot, guys. After several days of trying JLayeredPane, GlassPane, and other options, I think I ended up just using an AbsoluteLayout, which I did using a GUI Builder.

    By the way, kind of unrelated. Is there a way in Swing to create a slider that would look like a rectangle without a thumb and highlighted selected area. Something like this:

    Drawing JPanels on top of background image of parent JPanel-igd_b733_img3.jpg

    Much appreciated!
    Last edited by igorland; 08-13-2017 at 03:33 AM.

  5. #5
    jim829 is offline Senior Member
    Join Date
    Jan 2013
    Location
    Northern Virginia, United States
    Posts
    6,174
    Rep Power
    12

    Default Re: Drawing JPanels on top of background image of parent JPanel

    Do you mean a slider or a progress bar? And I am not certain what you mean by thumb. I know you can make just about any widget you want using
    Swing. But you will need to understand generating and handling events.

    Regards,
    Jim
    The JavaTM Tutorials | SSCCE | Java Naming Conventions
    Poor planning on your part does not constitute an emergency on my part

  6. #6
    igorland is offline Member
    Join Date
    Jan 2013
    Posts
    86
    Rep Power
    0

    Default Re: Drawing JPanels on top of background image of parent JPanel

    Jim. I meant JSlider. I do understand the concept of generating and handling events. The techniques of transforming the default JSlider:

    Drawing JPanels on top of background image of parent JPanel-slider.png

    into the above was unclear to me.

    Cheers.

  7. #7
    jim829 is offline Senior Member
    Join Date
    Jan 2013
    Location
    Northern Virginia, United States
    Posts
    6,174
    Rep Power
    12

    Default Re: Drawing JPanels on top of background image of parent JPanel

    I thought I would toy around with this to see how easy it could be done. So here is what I came up with.
    I was pretty certain I needed to modify the SliderUI or a subclass since that is what does the painting. The
    only real change was the MySliderUI class. The rest is boiler plate for using the slider.

    Java Code:
    import java.awt.Dimension;
    import java.awt.FlowLayout;
    import java.awt.Graphics;
    
    import javax.swing.DefaultBoundedRangeModel;
    import javax.swing.JFrame;
    import javax.swing.JPanel;
    import javax.swing.JSlider;
    import javax.swing.SwingUtilities;
    import javax.swing.plaf.basic.BasicSliderUI;
    
    public class SliderMod extends JPanel {
       JSlider slider = new JSlider();
    
       public static void main(String[] args) {
          SwingUtilities.invokeLater(() -> {
             new SliderMod().start();
          });
       }
       public void start() {
          JFrame frame = new JFrame("New Slider");
          frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
          frame.add(this);
          setPreferredSize(new Dimension(200, 50));
          setLayout(new FlowLayout());
          slider.setModel(new DefaultBoundedRangeModel(0, 0, 0, 100));
          slider.addChangeListener((e) -> System.out.println(slider.getValue()));
          slider.setUI(new MySliderUI(slider));
          add(slider);
          frame.pack();
          frame.setLocationRelativeTo(null);
          frame.setVisible(true);
       }
    }
    
    class MySliderUI extends BasicSliderUI {
    
       public MySliderUI(JSlider b) {
          super(b);
       }
       // ignore the thumb and just do a fill
       public void paintThumb(Graphics g) {
          g.fillRect(0, 0, thumbRect.x, thumbRect.height);
       }
    
       // don't paint the track
       public void paintTrack(Graphics g) {
       }
    }
    However, this is a minimalistic approach, very incomplete, and is probably fraught with errors. And its a good
    idea not to override methods which may not have been intended to be overridden (even if they aren't declared final).
    Note that the JavaDoc does not discuss the meanings of the protected values so they could change in the future.
    So I would still write my own slider code since the current one does not seem to be intended for modification at the developer
    level.

    Regards,
    Jim
    igorland likes this.
    The JavaTM Tutorials | SSCCE | Java Naming Conventions
    Poor planning on your part does not constitute an emergency on my part

  8. #8
    igorland is offline Member
    Join Date
    Jan 2013
    Posts
    86
    Rep Power
    0

    Default Re: Drawing JPanels on top of background image of parent JPanel

    Jim. Thank you so much! The approach is very clear now.

    Best regards,
    Igor

  9. #9
    igorland is offline Member
    Join Date
    Jan 2013
    Posts
    86
    Rep Power
    0

    Default Re: Drawing JPanels on top of background image of parent JPanel

    OK. I managed to somewhat solve the issue by implementing a ChangeListener like this:

    Java Code:
    slider.addChangeListener((ChangeEvent e) -> {
              int value = slider.getValue();
              panel.setScale(value);
              System.out.println(value);
          });
    And subclassed my JPanel to implement the following:

    Java Code:
    public class MyPanel extends JPanel 
    {
        int rectWidth;
    
        @Override
        protected void paintComponent(Graphics g)
        {
                super.paintComponent(g); 
    
                int originX = 0; 
                int originY = 0;
    
                g.setColor(Color.RED);
                Graphics2D g2d = (Graphics2D) g.create();
                
                g.fillRect(originX, originY, rectWidth, this.getHeight());
        }
        
        
        public void setScale(int percent) 
        {
                rectWidth = (int)(this.getWidth() / 100d * percent);
                repaint();
        }
    }
    Now, I have my panel filling the rectangle together with the slider. I decided to retain the thumb. Without it, it is kind of difficult sometimes to get where to move the mouse. Unfortunately, the mouse clickable area is limited by the small size of the thumb and I was not able to change its height. Not sure even if it is possible.

    Cheers.

  10. #10
    jim829 is offline Senior Member
    Join Date
    Jan 2013
    Location
    Northern Virginia, United States
    Posts
    6,174
    Rep Power
    12

    Default Re: Drawing JPanels on top of background image of parent JPanel

    You can eliminate the thumb and still make it usable by just clicking anywhere inside the slider and moving your mouse in the desired direction. All you need to do is keep track of the slider's current position (probably the right edge). Then you can then adjust the position of the slider based on relative movements of the mouse. In other words, the mouse need not be at a specific location to properly move the slider. Other methods which may be of use are getMousePosition() (inherited from Container) or SwingUtilities.convertPoint(). Both of these are used to obtain the mouse coordinates in the coordinate space of the desired component.

    Regards,
    Jim
    igorland likes this.
    The JavaTM Tutorials | SSCCE | Java Naming Conventions
    Poor planning on your part does not constitute an emergency on my part

Similar Threads

  1. Replies: 1
    Last Post: 04-30-2014, 03:08 PM
  2. Replies: 4
    Last Post: 04-19-2011, 05:09 AM
  3. Replies: 1
    Last Post: 11-10-2010, 10:14 PM
  4. how to put a background image in a JPanel
    By yanipao in forum New To Java
    Replies: 5
    Last Post: 10-21-2009, 02:27 PM
  5. How to drawing free hand on background image ?
    By it.manveer.singh in forum Java Applets
    Replies: 0
    Last Post: 04-18-2009, 02:48 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •