8

As per assignment, we have to create a image viewer just like Picasas one. picture in the middle, translucent black background and changing images with left/right buttons.

i can display an image set it to undercoated, set it to translucent frame but along with frame the the picture becomes translucent. what am i doing wrong.

Dimension dim = Toolkit.getDefaultToolkit().getScreenSize();   

JFrame f1 = new JFrame("ShowImage");
f1.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

f1.setSize(dim);

f1.setUndecorated(true);
f1.setOpacity(0.5f);
ShowImage panel = new ShowImage();
panel.setBackground(Color.black);

f1.setContentPane(panel); 
f1.setVisible(true);  

i tried

si.setOpaque();   
si.setBackground(Color.black);
si.setForeground(Color.red);

none worked

when i took a boolean and tested

si.isDisplayable();
si.isVisible();
si.isShowing();

only is visible returns true, rest are false, are these any contributing factor?

sabbibJAVA
  • 1,068
  • 1
  • 11
  • 17
  • `JLabel` is meant to be non Opaque by default, why do you want it to be otherwise ? Any specific need ? – nIcE cOw Jul 29 '12 at 05:39
  • JLabel is a just a method of displaying pictures, its i think the easiest way. the thing im trying to achieve is transparent background (window), and a opaque foreground(the picture imported by JLabel). but ive imported it in the proper way. so i doubt the Label is necessary anymore. thanks for the effor though – sabbibJAVA Jul 29 '12 at 21:06
  • *"i tried"* `si.setOpaque();` That would have been a compilation error. For better help sooner, post an [SSCCE](http://sscce.org/). – Andrew Thompson Jul 29 '12 at 22:23

1 Answers1

21

The problem is, the JFrame's default Layout manager is a BorderLayout, this means that your ShowImage pane is filling the entire area of the frame (in black). I bet if you changed the background of the ShowPane to red. It would show up completely filled in red instead

Now you can have a look at A Visual Guide to Layout Managers or change the way your ShowPane works

UPDATE

Apologies, I'm not familiar with the new Transparency API in Java 7 (still using the Java 6 hack ;))

Transparent Frame

Can you verify for me that this is the kind of effect you are looking for? Where the read square would be the image (and the black background is the frame - nb, I only captured the frame)

UPDATE

Image Preview

First you want to read Window.isOpaque and Window.setBackground to understand how this solution works.

Next, don't use Window.setOpacity, it isn't going to achieve what you want. The main reason is that the opacity value is applied to the parent and it's children (this through me at first).

So, the frame code:

Dimension dim = Toolkit.getDefaultToolkit().getScreenSize();

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

// Make sure where in the top left corner, please lookup how
// to find the screen insets ;)
setLocation(0, 0);
setSize(dim);
// Set undecorated
setUndecorated(true);
// Apply a transparent color to the background
// This is ALL important, without this, it won't work!
setBackground(new Color(0, 255, 0, 0));

// This is where we get sneaky, basically where going to 
// supply our own content pane that does some special painting
// for us
setContentPane(new ContentPane());
getContentPane().setBackground(Color.BLACK);
setLayout(new BorderLayout());

// Add out image pane...    
ShowImage panel = new ShowImage();
add(panel);

setVisible(true);

The ContentPane. Basically, we need to "trick" the paint engine into thinking where transparent (not opaque) and then paint our own opacity

public class ContentPane extends JPanel {

    public ContentPane() {

        setOpaque(false);

    }

    @Override
    protected void paintComponent(Graphics g) {

        // Allow super to paint
        super.paintComponent(g);

        // Apply our own painting effect
        Graphics2D g2d = (Graphics2D) g.create();
        // 50% transparent Alpha
        g2d.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.5f));

        g2d.setColor(getBackground());
        g2d.fill(getBounds());

        g2d.dispose();

    }

}

I'm sorry for my earlier answer, but I hope this makes up for it ;)

UPDATE with Buttons

This is how I modified it

ShowImage panel = new ShowImage();
panel.setBackground(Color.RED);

setContentPane(new ContentPane());
getContentPane().setBackground(Color.BLACK);
setLayout(new BorderLayout());
add(panel);

JPanel pnlButtons = new JPanel(new FlowLayout(FlowLayout.RIGHT));
pnlButtons.setOpaque(false);
pnlButtons.add(new JButton("<<"));
pnlButtons.add(new JButton("<"));
pnlButtons.add(new JButton(">"));
pnlButtons.add(new JButton(">>"));

// Okay, in theory, getContentPane() is required, but better safe the sorry
getContentPane().add(pnlButtons, BorderLayout.SOUTH);

setVisible(true);

Sample with Buttons

MadProgrammer
  • 343,457
  • 22
  • 230
  • 366
  • no it didnt work, i changed background to red but still its translucent. i need to change it to opaque, leaving the jframe translucent. as i mentioned i setBackground but it didnt work. note ShowImage is just the class im creating this in. – sabbibJAVA Jul 28 '12 at 22:20
  • Hang on, I think I might know what's going, let me run some more tests and see if I make it work ;) – MadProgrammer Jul 28 '12 at 23:00
  • Could you verify my update is on the right track, if so, I'll post some code as to how to make it work – MadProgrammer Jul 28 '12 at 23:08
  • @sabbibJAVA I hope the new updates will better meet your requirements – MadProgrammer Jul 29 '12 at 03:17
  • where do you work, Java? or high school students are just so dumb :P im kidding. thanks it worked like a charm, even though half way through the program. im just curious, how did you see my question, or do you browse around helping others, i really appreciated your help. i would love you to answer in my future questions. thank you again. – sabbibJAVA Jul 29 '12 at 20:40
  • @sabbibJAVA I'm just one on many who like to monitor the questions. When I was learning to code, others answered my (stupid) questions, so I like to return the favour – MadProgrammer Jul 29 '12 at 21:06
  • Besides, you question was fun and it encouraged me to look in Java 7 which I've not had a chance to do yet :D – MadProgrammer Jul 29 '12 at 22:55
  • right dat reminds me, u mentioned Java 6 Hack. did you customize or downloaded it like that. if you customized it, how did you, i tried going into the jdk folder, unzipped the src folder, and added a class of mine in java.lang. zipped it an but it back. but i still coudnt find it or import it. is dere a secret i dont know :P – sabbibJAVA Jul 30 '12 at 02:37
  • No, before Java 7 and after Java 6.10, we had to use a little "hack" to use transparent/translucent windows. It's a "hack" because the support wasn't part of the official release. Check out http://docs.oracle.com/javase/tutorial/uiswing/misc/trans_shaped_windows.html for more detals – MadProgrammer Jul 30 '12 at 02:43
  • thanks for that. Um I tried adding other things, like buttons, labels, to the frame, but it doesnt appear. tried it all over in every method and constructor but does appear. – sabbibJAVA Jul 30 '12 at 21:40
  • @sabbibJAVA did you set a layout manager?? If you're using my example, make sure you are adding them AFTER I change the content pane – MadProgrammer Jul 30 '12 at 23:06
  • ive added "setLayout(new BorderLayout());" in the ContentPane constructor, also specified position with layout when adding to the frame, "f.add(label, BorderLayout.South); didnt help – sabbibJAVA Jul 31 '12 at 21:16
  • @sabbibJAVA add an example with buttons – MadProgrammer Jul 31 '12 at 23:19
  • i added buttons but now the image disappears – sabbibJAVA Aug 05 '12 at 11:46
  • @sabbibJAVA I'd need to see the code, as you can see from my example, unless you're setting a component to the center position, it should work fine – MadProgrammer Aug 05 '12 at 19:35
  • i am a little picky with passing out my codes, so where can i give it to you – sabbibJAVA Aug 07 '12 at 16:30
  • @sabbibJAVA, I only need to see te portion of the code that is setting up the min screen, ie the content pane, image pane & buttons. If you have a drop box account, you can share it there – MadProgrammer Aug 07 '12 at 19:38
  • no im afraid i dont have drop box but i do have 4shared. you can download it from here http://www.4shared.com/file/IUAmWayZ/ImageViewer.html – sabbibJAVA Aug 08 '12 at 12:22
  • unfortunately, it requires me "sign up" and frankly, I'm not willing to do that, sorry – MadProgrammer Aug 08 '12 at 20:56
  • thats weird. i set it to public. ill check it out again and let you. – sabbibJAVA Aug 11 '12 at 01:46
  • hi, finally i have an alternate heres the link http://www.mediafire.com/?hle7j737657s5kq – sabbibJAVA Aug 22 '12 at 08:50
  • `ImageViewer`- Not extend from `Component`, use `JComponent` instead. Replace the reference to `Button` with `JButton`. You've overridden the `paint` method (not normally a good idea), but you failed to call `super.paint(g)` (I know why you did, once you move to `JComponent` you'll be able to use `paintComponent` instead. You're assuming the screen the screen, but not taking into account the task bar. You could use `JFrame.setExtendedState` instead – MadProgrammer Aug 22 '12 at 10:14
  • I've uploaded the `ImageViewer` class to http://dl.dropbox.com/u/8411344/ImageViewer.java for you to have a look at – MadProgrammer Aug 22 '12 at 10:19
  • Also, I forgot to mention, you should avoid mixing heavy and light weight components (most AWT components are heavy weight, all Swing components are light weight ;)) hence the suggestions to use "J" components – MadProgrammer Aug 22 '12 at 22:55
  • thank you very much for your help, it worked perfectly. i think u deserve all the credit of making this software, because you really did half the coding. i do have another problem with it, i can seem to figure out the solution, i would like you to check it out. http://stackoverflow.com/questions/12084631/how-to-change-image-with-the-click-of-a-button-in-java – sabbibJAVA Aug 23 '12 at 04:13
  • @sabbibJAVA haaa, I just posted there :D – MadProgrammer Aug 23 '12 at 04:22
  • @sabbibJAVA it was actually a lot of fun and I got to play around a little with Java 7 :D – MadProgrammer Aug 23 '12 at 04:23
  • The foreground image is also 50% transparent. What did I do wrong? – Vijay Chavda May 31 '18 at 14:38
  • @VijayChavda It's hard to tell. Did you `dispose` of the `Graphics` context? Did you paint something after setting the alpha level? – MadProgrammer May 31 '18 at 20:27
  • No I didn't paint anything after setting alpha level, not atleast inside `ContentPane`'s `paintComponent()`. And yes I did dispose graphic object. I'm using Java 8 on Linux, which is known for *some* wierd issues. Could that be a reason? – Vijay Chavda Jun 01 '18 at 05:10
  • I don't have linux available to test – MadProgrammer Jun 01 '18 at 05:39
  • One correction i had to do was instead of **getContentPane().setBackground(Color.BLACK);** to use **getContentPane().setBackground(getBackground());** – George Z. Dec 28 '18 at 00:15
  • You could use Color.RED to make the background red, or use what ever color you want., that’s entirely up to you – MadProgrammer Dec 28 '18 at 00:25