Text-pain

[willemjav]

Computers are in fact sophisticated typewriters and that is why an important part of programming deals with text and text-writing. The text components in java are many and complicated.
My question is, how to display several lines of text (edited in a ´simple´ JTextArea component) over an image, without getting a white square that marks the text pane over the image.
Before I used (successfully) the component JLabel to display a single line of text over the image of my slideshow applet. As far as I understand you cannot display multi lines of text in JLabel. I would also like to be able set the position of the text block over the picture. Just give me a hint in what direction I need to go.

willemjav

[hardwired]

My question is, how to display several lines of text (edited in a ´simple´ JTextArea component) over an image, without getting a white square that marks the text pane over the image.
This would be difficult.
As far as I understand you cannot display multi lines of text in JLabel.
JLabel has rudimentary support for html version 3.2. For some ideas you can see Using HTML in Swing Components.
I would also like to be able set the position of the text block over the picture.
The easiest way to do this is to render the text in a graphic component using classes/methods in the java.awt.font package. So you draw your image and then render the text above/over the image in a paintComponent method, usually of a JPanel.

[Fubarable]

One way is to set the JTextArea opaque property to false. If the JTextArea is in a JScrollPane, you'll have to set it *and* it's jviewport's opaque to false as well. For instance:

Code:

import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.net.MalformedURLException;
import java.net.URL;

import javax.imageio.ImageIO;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTextArea;

public class TextAreaOverImage
{
  private static final String IMAGE_PATH = 
    "http://upload.wikimedia.org/wikipedia/commons/b/b5/HMS_Cardiff_%28D108%29_1.jpg";
  private BufferedImage image;
  private JTextArea textarea = new JTextArea(20, 40);
  private JPanel mainPanel = new JPanel()
  {
    @Override
    protected void paintComponent(Graphics g)
    {
      super.paintComponent(g);
      if (image != null)
      {
        g.drawImage(image, 0, 0, this);
      }
    }
  };
  
  public TextAreaOverImage()
  {
    URL imageUrl;
    try
    {
      imageUrl = new URL(IMAGE_PATH);
      image = ImageIO.read(imageUrl);
      Dimension imageSize = new Dimension(image.getWidth(), image.getHeight());
      mainPanel.setPreferredSize(imageSize);
      
      JScrollPane scrollpane = new JScrollPane(textarea);
      textarea.setOpaque(false);
      scrollpane.setOpaque(false);
      scrollpane.getViewport().setOpaque(false);
      mainPanel.add(scrollpane);
    }
    catch (MalformedURLException e)
    {
      e.printStackTrace();
    }
    catch (IOException e)
    {
      e.printStackTrace();
    }

  }
  
  public JPanel getPanel()
  {
    return mainPanel;
  }
  
  private static void createAndShowGUI()
  {
    JFrame frame = new JFrame("TextAreaOverImage Application");
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.getContentPane().add(new TextAreaOverImage().getPanel());
    frame.pack();
    frame.setLocationRelativeTo(null);
    frame.setVisible(true);
  }

  public static void main(String[] args)
  {
    javax.swing.SwingUtilities.invokeLater(new Runnable()
    {
      public void run()
      {
        createAndShowGUI();
      }
    });

  }
}

[willemjav]

Sorry, hardwired, I probably did not phrase my question very well. I know, now, that indeed using a graphical content it is possible the use: drawString(String str, int x, int y)

To display a text line over a picture.

Thanks, Fubarable, that was relatively easy to do for the moment. I looked up opaque and found “not able to see through/ not transparent”. Setting Opaque false makes since (yes, sometimes a programming problem is in fact a language problem). I added some lines of your code:

infotextPanel = new JTextArea();
scrollpane = new JScrollPane(infotextPanel); // probably won´t use the scroll pane
infotextPanel.setOpaque(false);
scrollpane.setOpaque(false);
scrollpane.getViewport().setOpaque(false);
setLayout(null);
setPreferredSize(new Dimension(800, 485));
add(infotextPanel);

public void drawinfotext (String infotext, int infotextx, int infotexty) {
infotextPanel.setBounds(infotextx, infotexty, 300, 300); // when setting // the layout to null this method changes the position, correct?
infotextPanel.setBounds(infotextx, infotexty, 300, 300);
// infotextPanel.setText(infotext);
}


great, I do see the text without white square. Thanks for the suggestion.

But I still have another ¨tiny¨ problem each time I draw a new picture the new text of that picture is printed over the previous text (which does not disappear!). The reason lies probably in the fact that I do the drawing in another class.
The class SetimagePanel triggers all GUI components and the class Editimages does the image/ text drawing etc. Each time one selects another image in JList present in the SetimagePanel class the image/text drawing happens:

public void valueChanged(ListSelectionEvent e) { // reads the list selection
// and gets the array index
if(!e.getValueIsAdjusting()) { // basically reads out the JList
sizeSlider.setValue(100); // draws the image and updates
//textinfo and all data
index = Piclist.getSelectedIndex();
editImages.downloadImage(filepath + "/Imagestore/" + img[index].name);

editImages.displayImage(1.0);
infotextPane.setText(img[index].textinfo); // the text of the edit pane
editImages.drawinfotext(img[index].textinfo, img[index].infotextx, img[index].infotexty); // text displayed over image
etc.
The info text gets two time drawn, ones on the edit pane at the same class (so the text can be edited) and ones over the image in a different class (to see the result together with the image), and only the first draw works correct! I tried several things (like repaint()) to repair this problem, but sincerely I do not understand why this happens (in one pane and not in the other……both are JTextArea panes).

willemjav

[willemjav]

I solved this problem myself.
I had the following code, which creates the info panel over the image,
at the wrong spot (in a file download method, so each time a image gets download the method creates a new info panel etc.). Instead it should be in the constructor of the second class (how stupid):

public Editimages() { //constructor of edit class
infotextPanel = new JTextArea();
scrollpane = new JScrollPane(infotextPanel);
infotextPanel.setOpaque(false);
scrollpane.setOpaque(false);
scrollpane.getViewport().setOpaque(false);
setLayout(null);
setPreferredSize(new Dimension(800, 485));
add(infotextPanel);

}

thanks
willemjav

[willemjav]

by the way where are these solved labels?
so I can mark this thread as solved