JLabel not loading on first load

I have an applet at: http COLON //pathhero DOT codemann8 DOT com/create DOT php

After you get the applet to load, you'll see an image. There's suppose to be a blank label on top of the image, which has a mouselistener. You're suppose to be able to click the image (actually the invisible label on top of it) and a green marker shows up and then you click in a second spot on the same line. This won't work until the user refreshes the page after the applet loads for the first time.

I know the problem is that that blank label isn't there, which is why clicking on it does nothing...I know it is doing this because I also added another label with that image as the icon, and got rid of the image display in the paint method...and it doesn't show, but after a refresh it does. But, I don't understand why.

Code:

---

import java.applet.*;
import java.awt.*;
import java.awt.image.*;
import java.awt.event.*;
import javax.swing.*;
import java.util.*;
import java.net.*;

public class create1 extends Applet implements ActionListener
{
    private JButton btnMask, btnUndo, btnRedo, btnSave;
    private JLabel transChart, lblMask, lblChart;
    private JSeparator sepTop;
    private Image chart, activation, squeeze, nowhammy, index;
    private ArrayList<int[]> masks = new ArrayList<int[]>();
    private ArrayList<int[]> redo = new ArrayList<int[]>();
    private int startX, startY, endX;
    private int mouseDown = 0, maskColor = 1; //0=red 1=blue 2=yellow

    public void init() {
        chart = getImage(getCodeBase(), getParameter("imageName"));
        ImageObserver io = null;
        int height = chart.getHeight(io);
        height -= 16;
       
        this.setLayout(null);
        this.resize(1014, height);
        this.setBackground(Color.WHITE);
       
        activation = getImage(getCodeBase(), "bluepicturefile");
        squeeze = getImage(getCodeBase(), "redpicturefile");
        nowhammy = getImage(getCodeBase(), "yellowpicturefile");
        index = getImage(getCodeBase(), "indexpicturefile");
       
        lblMask = new JLabel("Mask Color:", SwingConstants.RIGHT);
        lblMask.setBounds(10,10,100,30);
        this.add(lblMask);
       
        btnMask = new JButton("Blue");
        btnMask.setBounds(120,10,100,30);
        btnMask.addActionListener(this);
        this.add(btnMask);
       
        btnUndo = new JButton("Undo");
        btnUndo.setBounds(250,10,100,30);
        btnUndo.setEnabled(false);
        btnUndo.addActionListener(this);
        this.add(btnUndo);
       
        btnRedo = new JButton("Redo");
        btnRedo.setBounds(360,10,100,30);
        btnRedo.setEnabled(false);
        btnRedo.addActionListener(this);
        this.add(btnRedo);
       
        btnSave = new JButton("Save");
        btnSave.setBounds(490,10,100,30);
        btnSave.addActionListener(this);
        this.add(btnSave);
       
        sepTop = new JSeparator();
        sepTop.setBounds(10, 50, this.getWidth() - 20, 1);
        this.add(sepTop);
       
        //lblChart = new JLabel(new ImageIcon(chart));
        //lblChart.setBounds(10, 60, 1004, height);
        //this.add(lblChart);
       
        transChart = new JLabel("Ready...");
        transChart.setBounds(10, 60, 1004, height);
        transChart.addMouseListener(new MouseAdapter() {
            public void mouseClicked(MouseEvent evt) {
                imageClickEvent(evt);
            }
        });
        this.add(transChart);

        repaint();
    }
   
    public String getPath() {
        int[] temp = masks.get(0);
        String path = temp[0] + "-" + temp[1] + "-" + temp[2] + "-" + temp[3];
        for (int i = 1; i < masks.size(); i++) {
            temp = masks.get(i);
            path = path + "/" + temp[0] + "-" + temp[1] + "-" + temp[2] + "-" + temp[3];
        }
        return path;
    }

    public void paint(Graphics g) {
        super.paint(g);
        g.drawImage(chart, transChart.getX(), transChart.getY(), this);
        for (int i = 0; i < masks.size(); i++) {
            int[] temp = masks.get(i);
            if (temp[0] == 1) {
                g.drawImage(activation, temp[1], temp[2], temp[3], 49, this);
            }
            else if (temp[0] == 0) {
                g.drawImage(squeeze, temp[1], temp[2], temp[3], 49, this);
            }
            else {
                g.drawImage(nowhammy, temp[1], temp[2], temp[3], 49, this);
            }
        }
        if (mouseDown == 1) {
            g.drawImage(index, startX, startY - 3, 1, 55, this); 
        }
    }

    public void actionPerformed(ActionEvent e) {
        if (((JButton)e.getSource()).getText() == "Blue") {
            maskColor = 0;
            btnMask.setText("Red");
        }
        else if (((JButton)e.getSource()).getText() == "Red") {
            maskColor = 2;
            btnMask.setText("Yellow");
        }
        else if (((JButton)e.getSource()).getText() == "Yellow") {
            maskColor = 1;
            btnMask.setText("Blue");
        }
        else if (((JButton)e.getSource()).getText() == "Undo") {
            mouseDown = 0;
            redo.add(masks.get(masks.size() - 1));
            masks.remove(masks.size() - 1);
            if (masks.isEmpty()) {
                btnUndo.setEnabled(false);
            }
            btnRedo.setEnabled(true);
            repaint();
        }
        else if (((JButton)e.getSource()).getText() == "Redo") {
            mouseDown = 0;
            masks.add(redo.get(redo.size() - 1));
            redo.remove(redo.size() - 1);
            if (redo.isEmpty()) {
                btnRedo.setEnabled(false);
            }
            btnUndo.setEnabled(true);
            repaint();
        }
        else if (((JButton)e.getSource()).getText() == "Save") {
            try {
                AppletContext context = getAppletContext();
                URL link = new URL("http COLON //pathhero DOT codemann8 DOT com/submit DOT php?chart=" + getParameter("chartId") + "&path=" + getPath());
                context.showDocument(link, "_blank");
            }
            catch (MalformedURLException ex) {}
        }
        else {
        }
    }
   
    public void imageClickEvent(MouseEvent e) {
        mouseDown++;
        mouseDown %= 2;
        if (mouseDown == 1) {
            //set start of activation
            if (e.getY() < 114 || e.getY() % 114 > 49) {
                //cancel click
                mouseDown--;
            }
            else {
                startX = e.getX() + transChart.getX();
                startY = ((e.getY() / 114) * 114) + transChart.getY();
            }
        }
        else {
            endX = e.getX() + transChart.getX();
            if (startX > endX) {
                int t = endX;
                endX = startX;
                startX = t;
            }
            if (endX != startX) {
                masks.add(new int[] {maskColor, startX, startY, endX - startX + 1});
                btnUndo.setEnabled(true);
                btnRedo.setEnabled(false);
                redo.clear();
            }
        }
        repaint();
    }
}

---

Just look at this code segment.

Code:

---

    public void init() {
        chart = getImage(getCodeBase(), getParameter("imageName"));
        ImageObserver io = null;
        int height = chart.getHeight(io);

---

Do you have any idea what happen is?

Quote:

---

Originally Posted by Eranga

Just look at this code segment.

Code:

---

    public void init() {
        chart = getImage(getCodeBase(), getParameter("imageName"));
        ImageObserver io = null;
        int height = chart.getHeight(io);

---

Do you have any idea what happen is?

---

Yes the ImageObserver is needed to grab the height of the image. The ImageObserver can be null, its just used as a dummy object.
And the fileName/path of the image is passed in through the browser, view the page source to see for yourself.

try replacing repaint() with validate() in the initialiser

As an aside, I see that you are mixing Swing (JLabels, JButtons) and AWT (Applet) components in the same app. I recommend that you don't do that, that you stick with Swing and make this a JApplet.

Quote:

---

Originally Posted by OrangeDog

try replacing repaint() with validate() in the initialiser

---

Nothing happened, no difference.

Quote:

---

Originally Posted by Fubarable

As an aside, I see that you are mixing Swing (JLabels, JButtons) and AWT (Applet) components in the same app. I recommend that you don't do that, that you stick with Swing and make this a JApplet.

---

The reason I made it an Applet not a JApplet is because for some reason, you cannot change the background color with it. It compiles like it should work but it doesn't. I'll copy the code from above but only change it to JApplet to show you. This will be found in /java/create.html from the base of my website.

I'm not sure what you mean by not being able to change the background color of a JApplet. Perhaps you didn't change the background color of the contentPane which I believe is the correct way to do this.

Actually, when I create JApplets, I usually create a JPanel, and then when I've got it working well, the class that extends the JApplet has nothing more than an init method where the newly created JPanel is placed in the JApplet's contentPane. In this situation I would change the background color of the main JPanel.

Quote:

---

Originally Posted by Fubarable

I'm not sure what you mean by not being able to change the background color of a JApplet. Perhaps you didn't change the background color of the contentPane which I believe is the correct way to do this.

Actually, when I create JApplets, I usually create a JPanel, and then when I've got it working well, the class that extends the JApplet has nothing more than an init method where the newly created JPanel is placed in the JApplet's contentPane. In this situation I would change the background color of the main JPanel.

---

I was working off a template I was given in a class I took. Isn't the way I have the code now right, to change the background color?

And, would you have an example of how to do the JPanel?

Sure. Here is an example with your code but with the image stuff removed (I don't have access to your images). I also fixed your actionPerformed error where you were trying to check for String equality with ==. This is prone to errors as there is no guarantee that two Strings with the same text are the same object. Much better to use equals() or equalsIgnoreCase():

Create2.java

Code:

---

import java.awt.*;
import java.awt.event.*;
import java.util.ArrayList;

import javax.swing.*;

public class Create2
{
  private static final int HEIGHT = 800;
  private static final int WIDTH = 1014;
  private JPanel mainPanel = new JPanel();
  private JButton btnMask, btnUndo, btnRedo, btnSave;
  private JLabel transChart, lblMask, lblChart;
  private JSeparator sepTop;
  //private Image chart, activation, squeeze, nowhammy, index;
  private ArrayList<int[]> masks = new ArrayList<int[]>();
  private ArrayList<int[]> redo = new ArrayList<int[]>();
  private int startX, startY, endX;
  private int mouseDown = 0, maskColor = 1; //0=red 1=blue 2=yellow
  private MyListener listener = new MyListener();

  public Create2()
  {
//    chart = getImage(getCodeBase(), getParameter("imageName"));
//    ImageObserver io = null;
//    int height = chart.getHeight(io);
//    height -= 16;

    mainPanel.setLayout(null);
    mainPanel.setPreferredSize(new Dimension(WIDTH, HEIGHT));
    mainPanel.setBackground(Color.pink); // set the color of the panel

//    activation = getImage(getCodeBase(), "bluepicturefile");
//    squeeze = getImage(getCodeBase(), "redpicturefile");
//    nowhammy = getImage(getCodeBase(), "yellowpicturefile");
//    index = getImage(getCodeBase(), "indexpicturefile");

    lblMask = new JLabel("Mask Color:", SwingConstants.RIGHT);
    lblMask.setBounds(10, 10, 100, 30);
    mainPanel.add(lblMask);

    btnMask = new JButton("Blue");
    btnMask.setBounds(120, 10, 100, 30);
    btnMask.addActionListener(listener);
    mainPanel.add(btnMask);

    btnUndo = new JButton("Undo");
    btnUndo.setBounds(250, 10, 100, 30);
    btnUndo.setEnabled(false);
    btnUndo.addActionListener(listener);
    mainPanel.add(btnUndo);

    btnRedo = new JButton("Redo");
    btnRedo.setBounds(360, 10, 100, 30);
    btnRedo.setEnabled(false);
    btnRedo.addActionListener(listener);
    mainPanel.add(btnRedo);

    btnSave = new JButton("Save");
    btnSave.setBounds(490, 10, 100, 30);
    btnSave.addActionListener(listener);
    mainPanel.add(btnSave);

    sepTop = new JSeparator();
    sepTop.setBounds(10, 50, mainPanel.getWidth() - 20, 5);
    mainPanel.add(sepTop);

    //lblChart = new JLabel(new ImageIcon(chart));
    //lblChart.setBounds(10, 60, 1004, height);
    //this.add(lblChart);

    transChart = new JLabel("Ready...");
    transChart.setBounds(10, 60, WIDTH - 10, HEIGHT);
    transChart.addMouseListener(new MouseAdapter()
    {
      public void mouseClicked(MouseEvent evt)
      {
        imageClickEvent(evt);
      }
    });
    mainPanel.add(transChart);

    //repaint();
  }

  public void imageClickEvent(MouseEvent e)
  {
    mouseDown++;
    mouseDown %= 2;
    if (mouseDown == 1)
    {
      //set start of activation
      if (e.getY() < 114 || e.getY() % 114 > 49)
      {
        //cancel click
        mouseDown--;
      }
      else
      {
        startX = e.getX() + transChart.getX();
        startY = ((e.getY() / 114) * 114) + transChart.getY();
      }
    }
    else
    {
      endX = e.getX() + transChart.getX();
      if (startX > endX)
      {
        int t = endX;
        endX = startX;
        startX = t;
      }
      if (endX != startX)
      {
        masks.add(new int[]
        {
          maskColor, startX, startY, endX - startX + 1
        });
        btnUndo.setEnabled(true);
        btnRedo.setEnabled(false);
        redo.clear();
      }
    }
    mainPanel.repaint();
  }


  public JComponent getComponent()
  {
    return mainPanel;
  }
 
  private class MyListener implements ActionListener
  {
    public void actionPerformed(ActionEvent e)
    {
      String command = e.getActionCommand();
      if (command.equalsIgnoreCase("Blue"))
      {
        maskColor = 0;
        btnMask.setText("Red");
      }
      else if (command.equalsIgnoreCase("Red"))
      {
        maskColor = 2;
        btnMask.setText("Yellow");
      }
      else if (command.equalsIgnoreCase("Yellow"))
      {
        maskColor = 1;
        btnMask.setText("Blue");
      }
      else if (command.equalsIgnoreCase("Undo"))
      {
        mouseDown = 0;
        redo.add(masks.get(masks.size() - 1));
        masks.remove(masks.size() - 1);
        if (masks.isEmpty())
        {
          btnUndo.setEnabled(false);
        }
        btnRedo.setEnabled(true);
        mainPanel.repaint();
      }
      else if (command.equalsIgnoreCase("Redo"))
      {
        mouseDown = 0;
        masks.add(redo.get(redo.size() - 1));
        redo.remove(redo.size() - 1);
        if (redo.isEmpty())
        {
          btnRedo.setEnabled(false);
        }
        btnUndo.setEnabled(true);
        mainPanel.repaint();
      }
      else if (command.equalsIgnoreCase("Save"))
      {
        //TODO: save code
      }
      else
      {
      }
    }

  }

  // this code below is not necessary, but allows me to show this JPanel as either a JFrame using this code below
  // or as a JApplet using a separate class
  private static void createAndShowUI()
  {
    JFrame frame = new JFrame("Create2");
    frame.getContentPane().add(new Create2().getComponent());
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.pack();
    frame.setLocationRelativeTo(null);
    frame.setVisible(true);
  }

  public static void main(String[] args)
  {
    java.awt.EventQueue.invokeLater(new Runnable()
    {
      public void run()
      {
        createAndShowUI();
      }
    });
  }
}

---

And here is the applet that holds the JPanel:
Create2Applet.java

Code:

---

import javax.swing.JApplet;

public class Create2Applet extends JApplet
{
  public void init()
  {
    try
    {
      javax.swing.SwingUtilities.invokeAndWait(new Runnable()
      {
        public void run()
        {
          createGUI();
        }
      });
    }
    catch (Exception e)
    {
      System.err.println("createGUI didn't successfully complete");
    }
  }

  private void createGUI()
  {
    getContentPane().add(new Create2().getComponent());
  }
}

---

Thanks this is great stuff. But then how would I load images into this? It's like I HAVE to be able to paint those transparent images on top. I can't see it happening any other way.

I'm still not clear on what you're trying to do. What is your ultimate goal here? Why are you painting images on top of things? Do you in fact need to use the glassPane instead?

I guess what I want to know is what you are desiring your program to do, not how you are not able to implement it.

When the applet first loads, I want an image to load (a fairly large image). When the user clicks on the image, it will set a start point, when the user clicks again, it will set an end point...a transparent image is then painted on top of the image wherever the start and end points were set. An temporary example that I'm using can be found using the website at the top of this forum (I can't use links until I have 20 posts...so I put DOT in place of a DOT...COLON too)

Oh, one thing I forgot. If you wanted to use my example to draw with, you'd have to access the paintComponent method of the mainPanel. This can be done by changing how mainPanel is declared.

Instead of this:

Code:

---

  private JPanel mainPanel = new JPanel();

---

You declare it like so:
Instead of this:

Code:

---

  private JPanel mainPanel = new JPanel()
  {
    @Override
    protected void paintComponent(Graphics g)
    {
      super.paintComponent(g);
      myPaint(g);
    }
  };

---

And then in the body of the code, have a method, myPaint like so:

Code:

---

  private void myPaint(Graphics g)
  {
    g.drawImage(chart, transChart.getX(), transChart.getY(), mainPanel);
    for (int i = 0; i < masks.size(); i++)
    {
      int[] temp = masks.get(i);
      if (temp[0] == 1)
      {
        g.drawImage(activation, temp[1], temp[2], temp[3], 49, mainPanel);
      }
      else if (temp[0] == 0)
      {
        g.drawImage(squeeze, temp[1], temp[2], temp[3], 49, this);
      }
      else
      {
        g.drawImage(nowhammy, temp[1], temp[2], temp[3], 49, this);
      }
    }
    if (mouseDown == 1)
    {
      g.drawImage(index, startX, startY - 3, 1, 55, this);
    }
  }

---

You may wish to look into getting the glass pane and drawing on that. That sits on top of any JApplet, JFrame, or JDialog.

You can use SwingUtilities to get the JRootPane that holds the JPanel and then use this to get the glass pane:

Code:

---

JRootPane rootPane = SwingUtilities.getRootPane(mainPanel);
Component glassPane = rootPane.getGlassPane();

---

I'm no expert on this, but if you draw on the glass pane, it will be on top of everything else in your app. Note that this is only for JApplets and not for Applets. Good luck.

Also looking at your code, another option is to display your chart image in a JLabel as the label's ImageIcon. If you override the JLabel's paintComponent you should be able to draw on it just fine. If you also add a MouseListener to the JLabel, you should be able to detect mouse clicks. Would this work for you?

Whenever I do that, it chops off the top 8 pixels of my image and throws off the alignment when the user clicks.

Also, I'm having problems getting this to pass in arguments from the browser. I tried adding them to the Container's constructor but now nothing shows up.

Just curious, what if you tried to do something simpler, just create a JLabel that holds an ImageIcon and then allow the user to draw on it. Would it work? Something like so:

DrawOnImage.java

Code:

---

import java.awt.*;
import java.awt.event.*;
import java.awt.geom.Line2D;
import java.util.ArrayList;
import java.util.List;
import javax.swing.*;

public class DrawOnImage
{
  private static final String[] BUTTON_STRINGS =
  {
    "Blue", "Undo", "Redo", "Save"
  };
  private static final Stroke STROKE = new BasicStroke(5);
  private JPanel mainPanel = new JPanel();
  private JLabel imageLabel = new JLabel()
  {
    @Override
    protected void paintComponent(Graphics g)
    {
      super.paintComponent(g);
      imageLabelPaint(g);
    }
  };
  private JButton[] buttons = new JButton[BUTTON_STRINGS.length];
  private List<Line2D> lineList = new ArrayList<Line2D>();

  public DrawOnImage(Image image)
  {
    ImageMouseListener imageMouseListener = new ImageMouseListener();
    imageLabel.setIcon(new ImageIcon(image));
    imageLabel.addMouseListener(imageMouseListener);
    imageLabel.addMouseMotionListener(imageMouseListener);
   
    ButtonListener buttonListener = new ButtonListener();
    JPanel buttonPanel = new JPanel(new GridLayout(1, 0, 20, 0));
    buttonPanel.setOpaque(false);
    for (int i = 0; i < buttons.length; i++)
    {
      buttons[i] = new JButton(BUTTON_STRINGS[i]);
      buttons[i].addActionListener(buttonListener);
      buttonPanel.add(buttons[i]);
    }
    JPanel topPanel = new JPanel(new FlowLayout(FlowLayout.LEFT, 20, 5));
    topPanel.setOpaque(false);
    topPanel.add(new JLabel("Select Something"));
    topPanel.add(buttonPanel);

    int gap = 10;
    mainPanel.setBorder(BorderFactory.createEmptyBorder(gap, gap, gap, gap));
    mainPanel.setBackground(Color.white);
    mainPanel.setLayout(new BorderLayout(10, 10));
    mainPanel.add(topPanel, BorderLayout.NORTH);
    mainPanel.add(imageLabel, BorderLayout.CENTER);
  }

  private void imageLabelPaint(Graphics g)
  {
    Graphics2D g2 = (Graphics2D)g;
    g2.setRenderingHint(
        RenderingHints.KEY_ANTIALIASING,
        RenderingHints.VALUE_ANTIALIAS_ON);
    g2.setStroke(STROKE);
    for (Line2D line : lineList)
    {
      g2.draw(line);
    }
  }

  public JComponent getComponent()
  {
    return mainPanel;
  }
 
  private class ButtonListener implements ActionListener
  {
    public void actionPerformed(ActionEvent e)
    {
      //TODO: work on this
      String command = e.getActionCommand();
      System.out.println(command);  // TODO: delete
    }
  }
 
  private class ImageMouseListener extends MouseAdapter
  {
    Point p0, p1;
    @Override
    public void mousePressed(MouseEvent e)
    {
      p0 = e.getPoint();
    }
   
    @Override
    public void mouseReleased(MouseEvent e)
    {
      p1 = e.getPoint();
      lineList.add(new Line2D.Double(p0.x, p0.y, p1.x, p1.y));
      imageLabel.repaint();
    }
   
    @Override
    public void mouseDragged(MouseEvent e)
    {
      p1 = e.getPoint();
      lineList.add(new Line2D.Double(p0.x, p0.y, p1.x, p1.y));
      imageLabel.repaint();
      p0 = p1;
    }
  }
}

---

DrawOnImageApplet.java

Code:

---

import java.awt.Image;

import javax.swing.JApplet;

public class DrawOnImageApplet extends JApplet
{
  public void init()
  {
    try
    {
      javax.swing.SwingUtilities.invokeAndWait(new Runnable()
      {
        public void run()
        {
          createGUI();
        }
      });
    }
    catch (Exception e)
    {
      System.err.println("createGUI didn't successfully complete");
    }
  }

  private void createGUI()
  {
    Image image = getImage(getCodeBase(), getParameter("imageName"));
    DrawOnImage drawOnImage = new DrawOnImage(image);
    getContentPane().add(drawOnImage.getComponent());
  }
}

---

Yeah, putting it in a JLabel chops off the top 8 pixels of the image, which I can't have.
http COLON //pathhero.codemann8 DOT com/java/DrawOnImageApplet.html

Do you know a way to fix that?

Quote:

---

Yeah, putting it in a JLabel chops off the top 8 pixels of the image, which I can't have.

---

I wonder if this could be fixed by allowing for the applet to have more height than you currently allow. This would need to be changed in the HTML code, not the applet code. At least the user clicks appear to be aligned. Well I'm out of ideas at this point. :)

Good luck!

You've been really helpful, I think from here I'll use the paint method instead, since it works on the first load now.

But I would ask you to check something else out that has always been happening...if you go to that applet I just posted, scroll all the way down and see that the image is chopped off. Now keep refreshing until it appears, then start drawing on it...it disappears, any ideas whats happening here...this happens when the image is in a Jlabel and when painting the image, but it always happens at the same spot for all images, about 2400 pixels down.