We Keep Coding

Stack<Canvas> in a JavaFX FXML document

I'm creating an image manipulation program in JavaFX using FXML to organize the UI. It currently supports things like loading images, drawing, and saving those changes.
I do not know how/cannot find a way to represent a Stack of Canvas' in the FXML document. My goal is to have a stack of Canvas' that will allow me to undo the changes the user has made by simply clearing the top layer in the stack of canvas'. The idea is that each edit would reside on it's own canvas.
Below is some code from the FXML document. Here is the center pane of my border pane. This is the center of the image manipulating program. Inside of it I have a stack pane so that I can overlay things. The two comments are what I would expect to be able to do but those attempts do not work.
<!-- center pane -->
<center>
<StackPane>
<Canvas fx:id="currCanvas" />
<!-- <Canvas fx:id="canvasStack" /> -->
<!-- <Stack fx:id="canvasStack" /> -->
<Canvas fx:id="previewCanvas" />
</StackPane>
</center>
If I was going to implement this without the FXML document it would be much simpler but it would be more difficult to organize the UI. My confusion is that I do not know how to accomplish this using FXML.
Thanks

All you really need is one Canvas but whenever an edit is made, you should make a snapshot of the canvas or make a copy of the pixels in the canvas then push that array of pixels or object containing the pixel to a Stack. That would be a bad idea because making a copy of the canvas will be very expensive both computationally and memory wise. While feasible, I would advise against it.
To me the best and easiest way to deal with "undo operations" is to draw first on a BufferedImage then draw that image on the Canvas as explained here and here and second to introduce the concept of Action in your application. For instance a "paint action" would look something like:
interface Action
{
//Used to re-apply action after it was undone
public void apply();
//Undo the action
public void undo();
}
class PaintAction() implements Action
{
static class Pixel
{
final int x;
final int y;
final int oldColor;
final int newColor;
PixelPos(int x, int y, int oldColor, int newColor)
{
this.x = x;
this.y = y;
this.oldColor = oldColor;
this.newColor = newColor;
}
}
List<Pixel> affectedPixels;
PaintAction()
{
affectedPixels = new ArrayList<>();
}
#Override
public void apply(Canvas canvas)
{
for (Pixel pixel : pixel)
{
//draw new pixel's color on the canvas
}
}
#Override
public void undo(Canvas canvas)
{
for (Pixel pixel : pixel)
{
//draw old pixel's color on the canvas
}
}
public void addPixel(Pixel pixel)
{
affectedPixels.add(Pixel);
}
}
So when the user presses the mouse button to start painting, you create a new PaintAction then whenever the user moves the mouse, you would create a new Pixel object and add it to the list of "affected pixels by the PaintAction" then proceed to change the color of the pixel in the BufferedImage.
Then all you would need will be to keep a stack of Action and apply, undo them as you see fit.
Hope that make sense, cheers.

Simply use a Pane. This way there are no issues with aligning the children. Panes don't provide a Stack of children, but a List can be used for stack operation too, although the removing the last item from the list is a bit more difficult than for a stack, but simple enough.
The following code simply adds circles and rectangles, but you could replace this with adding Canvases instead:
#Override
public void start(Stage primaryStage) {
Button doBtn = new Button("draw");
Button undo = new Button("undo");
undo.setDisable(true);
Pane stack = new Pane();
stack.setPrefSize(400, 400);
VBox root = new VBox(new HBox(doBtn, undo), stack);
doBtn.setOnAction(new EventHandler<ActionEvent>() {
private int count = 0;
#Override
public void handle(ActionEvent event) {
// create & add some node
Node addedNode;
switch (count % 2) {
case 0:
addedNode = new Circle(count * 5 + 5, count * 5 + 5, 5, Color.BLUE);
break;
case 1:
Rectangle rect = new Rectangle(count * 5, 390 - count * 5, 10, 10);
rect.setFill(Color.RED);
addedNode = rect;
break;
default:
return;
}
stack.getChildren().add(addedNode);
undo.setDisable(false);
count++;
}
});
undo.setOnAction(evt -> {
// remove last child
List<Node> children = stack.getChildren();
children.remove(children.size() - 1);
// check, if undo button needs to be disabled
undo.setDisable(children.isEmpty());
});
Scene scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.show();
}
Note that I wouldn't recommend creating new Canvases for every operation though, since this could lead to memory issues pretty fast...

Set stackPane size in JavaFX

I want a stack pane to simulate a FullHD display, that is 1920x1080.
For that I am using 640x360 which follows the same proportion and then I scale the image nodes inside the stackPane (which is called "screen") using:
image.getWidth()/(fullWidth/screen.getWidth())),
image.getHeight()/(fullHeight/screen.getHeight()))
This is working great only problem is I can't set the size for the "screen" therefore it keeps big black bars on the bottom and on the top of it.
As you can see in the image below the "screen" has a white border around it for making the black bars easier to notice.
screen snapshot
Here is the code that creates the stack pane and handles it:
DisplayPane constructor method
public DisplayPane(TemporalViewPane temporalViewPane, SteveMenuBar steveMenuBar, SpatialTemporalView spatialTemporalView){
setId("display-pane");
screen = new StackPane();
screen.setId("screen-pane");
controlButtonPane = new ControlButtonPane(screen, temporalViewPane, steveMenuBar, spatialTemporalView);
setCenter(screen);
setBottom(controlButtonPane);
}
ControlButtonPane constructor class method:
public ControlButtonPane(StackPane screen, TemporalViewPane temporalViewPane,SteveMenuBar steveMenuBar, SpatialTemporalView spatialTemporalView){
fullHDLabel = new Label("FullHD");
fullHDLabel.setPadding(new Insets(5,5,5,5));
screen.getChildren().add(fullHDLabel);
setId("control-button-pane");
this.steveMenuBar = steveMenuBar;
this.screen = screen;
this.screen.setAlignment(Pos.TOP_LEFT);
this.temporalViewPane = temporalViewPane;
this.spatialTemporalView = spatialTemporalView;
this.webView = new WebView();
createButtons();
setLeft(fullButtonPane);
setLeft(fullHDLabel);
setCenter(centerButtonPane);
setRight(refreshButtonPane);
createListeners();
createButtonActions();
}
CreateButtons method:
public void createButtons(){
run = new Button();
run.setDisable(true);
run.setId("run-button");
run.setTooltip(new Tooltip(Language.translate("run")));
play = new Button();
play.setDisable(true);
play.setId("play-button");
play.setTooltip(new Tooltip(Language.translate("play")));
pause = new Button();
pause.setDisable(true);
pause.setId("pause-button");
pause.setTooltip(new Tooltip(Language.translate("pause")));
stop = new Button();
stop.setDisable(true);
stop.setId("stop-button");
stop.setTooltip(new Tooltip(Language.translate("stop")));
centerButtonPane = new HBox();
centerButtonPane.setId("center-button-pane");
centerButtonPane.getChildren().add(run);
centerButtonPane.getChildren().add(play);
centerButtonPane.getChildren().add(pause);
centerButtonPane.getChildren().add(stop);
}
CreateListeners method:
private void createListeners(){
screen.widthProperty().addListener((obs, oldVal, newVal) -> {
if(newVal != oldVal){
screen.minHeightProperty().bind(screen.widthProperty().multiply(0.565));
screen.maxHeightProperty().bind(screen.widthProperty().multiply(0.565));
System.out.println("NEW WIDTH OF SCREEN IS: "+newVal);
}
});
screen.heightProperty().addListener((obs, oldVal, newVal) -> {
if(newVal != oldVal){
screen.minHeightProperty().bind(screen.widthProperty().multiply(0.565));
screen.maxHeightProperty().bind(screen.widthProperty().multiply(0.565));
System.out.println("NEW HEIGHT OF SCREEN IS: "+newVal);
}
});
And below is what I want to achieve. Currently, I have to run the application and then drag the side of the stack pane for resizing it as it should be.
how it should be snapshot
I've tried all set min/max/pref height/width and still haven't manage to achieve my goal. I don't know what else to do.
Any help would be great.

Problem was I was binding height to width when it should be the other way around since width can be resized much larger without wasting screen space.
So I changed the binding to:
private void createListeners(){
screen.widthProperty().addListener((obs, oldVal, newVal) -> {
if(newVal != oldVal){
screen.minWidthProperty().bind(screen.heightProperty().multiply(1.77778));
screen.maxWidthProperty().bind(screen.heightProperty().multiply(1.77778));
System.out.println("NEW WIDTH OF SCREEN IS: "+newVal);
}
});
screen.heightProperty().addListener((obs, oldVal, newVal) -> {
if(newVal != oldVal){
screen.minWidthProperty().bind(screen.heightProperty().multiply(1.77778));
screen.maxWidthProperty().bind(screen.heightProperty().multiply(1.77778));
System.out.println("NEW HEIGHT OF SCREEN IS: "+newVal);
}
});
}

MigLayout and JLabel derivative show strange behaviour and don't follow layout

I'm using Java Swing and MigLayout (What a wonderful tool!) to create a project in java, and I got a problem.
To display every string as big as I could, I created a sub-class of JLabel, that changes the font according to the size of the component, I'll attach the code in the example I'll provide.
The project is really big and there are a lot of panels nested, I also change the content of the main window on the fly, validating everything after.
But, if I try to use the cell disposition of components within MigLayout, evrything is wrong.
If i use the same layout, with the same constraint, but instead of using my custom label, i use an ordinary JLabel, everything works like a charm.
Here the gist of the example:
https://gist.github.com/bracco23/c47975ede0d857ac3b134f197c4371a2
The code is in two files:
JAdaptiveLabel.java, the custom component that just recalculate the optimal font size whenever text is changed or on demand.
test.java, a mock example. Changing CUSTOM you can switch between my component and a plain JLabel and see the difference. The intended layout is the one with the plain JLabel.
Can anybody give me a clue of what's wrong and how could I fix it?

Ok, after trying hard I solved.
After the test, I came to the conclusion (obvious) that somethig was wrong with my JAdaptiveLabel. So I searched online for another version, to see if it was my implementation or the adaptivity itself the problem.
I came to this answer: #Warren K
I used his class as it was and it worked, so my implementation was bugged.
I started from his version and changed the resizing algorithm, since his was iterative (change size till you find the perfect one) and mine was mathematical (just get the involved measures and calculate the perfect size).
It worked. Now the layout get disposed properly and the label changes font size if I resize the window.
Here the code modified:
package it.bracco23.util;
import javax.swing.*;
import java.awt.*;
import java.awt.event.ComponentAdapter;
import java.awt.event.ComponentEvent;
// Improved version of http://java-sl.com/tip_adapt_label_font_size.html
public class JAdaptiveLabel extends JLabel {
private Graphics g;
private boolean init = false;
public JAdaptiveLabel(String text, Icon icon, int horizontalAlignment) {
super(text, icon, horizontalAlignment);
init();
}
public JAdaptiveLabel(String text, int horizontalAlignment) {
super(text, horizontalAlignment);
init();
}
public JAdaptiveLabel(String text) {
super(text);
init();
}
public JAdaptiveLabel(Icon image, int horizontalAlignment) {
super(image, horizontalAlignment);
init();
}
public JAdaptiveLabel(Icon image) {
super(image);
init();
}
public JAdaptiveLabel() {
init();
}
protected void init() {
addComponentListener(new ComponentAdapter() {
public void componentResized(ComponentEvent e) {
adaptLabelFont(JAdaptiveLabel.this);
}
});
init = true;
}
protected void adaptLabelFont(JLabel l) {
if (g==null) {
return;
}
Rectangle r = l.getBounds();
Insets ins = l.getInsets();
r.x = 0;
r.y = 0;
Font f = l.getFont();
Dimension dim = getTextSize(l, f);
//0.9f is a scale factor to don't let the text take too much space
//without it will work, but the text may appear to close to the border
float xFactor = ((r.width - ins.left - ins.right) * 0.9f) / dim.width;
float yFactor = ((r.height - ins.top - ins.bottom) * 0.9f) / dim.height;
/*the next lines assure the scaling factors are not zero (can happen)
and are different enough from 1. Without this last check, it might happen
that the font starts to cycle between two sizes. */
xFactor = (xFactor != 0 && Math.abs(xFactor - 1)>0.1) ? xFactor : 1;
yFactor = (yFactor != 0 && Math.abs(xFactor - 1)>0.1) ? yFactor : 1;
float fontSize = f.getSize() * Math.min(xFactor, yFactor);
setFont(f.deriveFont(f.getStyle(), fontSize));
repaint();
}
private Dimension getTextSize(JLabel l, Font f) {
Dimension size = new Dimension();
FontMetrics fm = g.getFontMetrics(f);
size.width = fm.stringWidth(l.getText());
size.height = fm.getHeight();
return size;
}
protected void paintComponent(Graphics g) {
super.paintComponent(g);
this.g=g;
}
#Override
public void setText(String text) {
super.setText(text);
if(init){
adaptLabelFont(this);
}
}
}
If you use this version of the class inside the example I gave, everything works fine!
P.S. I also added a call to the resizing method in setText, since you must change the size when the label resize or change its content.

Creating custom JButton from images containing transparent pixels

Read edit 2 for what I'm actually missing to make it work
I'm currently trying to create some custom JButtons using images created in photoshop that have an alpha parameter.
So far, overriding the paint() method to draw the image has worked in the sense that the button is drawn showing the correct image. I'd like to improve it, though, by making its shape (clickable area) the same as the visible pixels on the image (right now if I draw the button's border, it's a square).
Is there an easy way to do that or do I have to parse the image and find the alpha pixels to make a custom border?
Which methods would I have to override to make it work the way I want?
Also, another question I'm going to have later: would it be better to use some kind of algorithm to change the images' colors to make it seem like it is being clicked when people click on it or am I better off creating a second image and drawing that one while the button is active?
Edit: I just read on some other question that I should redefine paintComponent() instead of paint(), I'd like to know why since redefining paint() works fine?
Edit 2: I changed everything to make sure my JButtons are created using the default constructor with an icon. What I'm trying to do is get the X and Y position of where the click was registered and grab the icon's pixel at that position and check its alpha channel to see if it is 0 (if it is, do nothing, else do the action it is supposed to do).
The thing is, the alpha channel always returns 255 (and blue, red and green are at 238 on transparent pixels). On other pixels, everything returns the value it should be returning.
Here's an example (try it with another image if you want) that recreates my problem:
public class TestAlphaPixels extends JFrame
{
private final File FILECLOSEBUTTON = new File("img\\boutonrondX.png"); //My round button with transparent corners
private JButton closeButton = new JButton(); //Creating it empty to be able to place it and resize the image after the button size is known
public TestAlphaPixels() throws IOException
{
setLayout(null);
setSize(150, 150);
closeButton.setSize(100, 100);
closeButton.setContentAreaFilled(false);
closeButton.setBorderPainted(false);
add(closeButton);
closeButton.addMouseListener(new MouseListener()
{
public void mouseClicked(MouseEvent e)
{
}
public void mousePressed(MouseEvent e)
{
}
public void mouseReleased(MouseEvent e)
{
System.out.println("Alpha value of pixel (" + e.getX() + ", " + e.getY() + ") is: " + clickAlphaValue(closeButton.getIcon(), e.getX(), e.getY()));
}
public void mouseEntered(MouseEvent e)
{
}
public void mouseExited(MouseEvent e)
{
}
});
Image imgCloseButton = ImageIO.read(FILECLOSEBUTTON);
//Resize the image to fit the button
Image newImg = imgCloseButton.getScaledInstance((int)closeButton.getSize().getWidth(), (int)closeButton.getSize().getHeight(), java.awt.Image.SCALE_SMOOTH);
closeButton.setIcon(new ImageIcon(newImg));
}
private int clickAlphaValue(Icon icon, int posX, int posY)
{
int width = icon.getIconWidth();
int height = icon.getIconHeight();
BufferedImage tempImage = (BufferedImage)createImage(width, height);
Graphics2D g = tempImage.createGraphics();
icon.paintIcon(null, g, 0, 0);
g.dispose();
int alpha = (tempImage.getRGB(posX, posY) >> 24) & 0x000000FF;
return alpha;
}
public static void main(String[] args)
{
try
{
TestAlphaPixels testAlphaPixels = new TestAlphaPixels();
testAlphaPixels.setVisible(true);
testAlphaPixels.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
catch(IOException ioe)
{
ioe.printStackTrace();
}
}
}
This is just a wild guess, but is it possible that when my image gets cast to an Icon, it loses its Alpha property and thus doesn't return the correct value? Anyway, I'd really appreciate it if someone could actually help me out and tell me what I should be changing to get the correct value.
I'm guessing that because when I try it with the original image, the alpha channel's value is fine, but I can't actually use that BufferedImage because I resize it, so I actually get the channel values of the image with the original size...

I think you are on the wrong way. You do not have to override neither paint() nor paintComponent() methods. JButton already "knows" to be shown with image only:
ImageIcon cup = new ImageIcon("images/cup.gif");
JButton button2 = new JButton(cup);
See the following tutorial for example: http://www.apl.jhu.edu/~hall/java/Swing-Tutorial/Swing-Tutorial-JButton.html
Moreover swing is fully customized. You can control opacity, border, color etc. You probably should override some mentioned methods to change functionality. But in most cases there is better and simpler solution.

Since there were good elements in multiple answers, but none of the answers were complete on their own, I'll answer my own question so other people that have the same problem can try something similar.
I created my buttons using a new class which extends JButton, with a new constructor that takes a BufferedImage as parameter instead of an icon. The reason for that is that when I did something like myButton.getIcon(), it would return an Icon, then I'd have to make various manipulations on it to make it a BufferedImage of the right size, and it ended up not working anyway because it seems like the first cast to Icon made it lose the alpha data in the pixels, so I couldn't check to see if the user was clicking on transparent pixels or not.
So I did something like this for the constructor:
public class MyButton extends JButton
{
private BufferedImage bufImg;
public MyButton(BufferedImage bufImg)
{
super(new ImageIcon(bufImg));
this.bufImg = bufImg;
}
}
Then I created an accessor for my bufImg that resized the image to fit the JButton using the getSize() method and then returned an image resized at the right size. I do the transformations in the getBufImg() accessor because the image size might change when the window gets resized. When you call the getBufImg(), it's usually because you clicked on the button and thus you're not currently resizing the window.
Something a little bit like this will return the image at the right size:
public BufferedImage getBufImg()
{
BufferedImage newImg = new BufferedImage(getSize().getWidth(), getSize().getHeight(), BufferedImage.TYPE_INT_ARGB); //Create a new buffered image the right size
Graphics2D g2d = newImg.createGraphics();
g2d.setRenderingHint(RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BILINEAR);
g2d.drawImage(bufImg, 0, 0, getSize().getWidth(), getSize().getHeight(), null);
g2d.dispose();
return newImg;
}
With that buffered image, you can then code a method like this:
private int clickAlphaValue(BufferedImage bufImg, int posX, int posY)
{
int alpha;
alpha = (bufImg.getRGB(posX, posY) >>24) & 0x000000FF; //Gets the bit that contains alpha information
return alpha;
}
That you call on the button that implements a MouseListener, like this:
myButton.addMouseListener(new MouseListener()
{
public void mouseClicked(MouseEvent e)
{
}
public void mousePressed(MouseEvent e)
{
}
public void mouseReleased(MouseEvent e)
{
if(clickAlphaValue(((myButton)e.getSource()).getBufImg(), e.getX(), e.getY()) != 0) //If alpha is not set to 0
System.exit(0); //Or other things you want your button to do
}
public void mouseEntered(MouseEvent e)
{
}
public void mouseExited(MouseEvent e)
{
}
});
And voila! The button will only do the action if you clicked on non-transparent pixels.
Thanks for the help everyone, I couldn't have come up with this solutions on my own.

If you want to have shape-specific click points, you're better off using Shape and their contains method. If you want, you can create a shape when creating your custom button class as part of it, and implement a contains method by wrapping around the shape's contains method.
As for the custom JButton, create a class that extends JButton, like this:
import java.awt.*;
import javax.swing.*;
public class CustomButton extends JButton{
/** Filename of the image to be used as the button's icon. */
private String fileName;
/** The width of the button */
private int width;
/** The height of the button. */
private int height;
public CustomButton(String fileName, int width, int height){
this.fileName = fileName;
this.width = width;
this.height = height;
createButton();
}
/**
* Creates the button according to the fields set by the constructor.
*/
private void createButton(){
this.setIcon(getImageIcon(filename));
this.setPreferredSize(new Dimension(width, height));
this.setMaximumSize(new Dimension(width, height));
this.setFocusPainted(false);
this.setRolloverEnabled(false);
this.setOpaque(false);
this.setContentAreaFilled(false);
this.setBorderPainted(false);
this.setBorder(BorderFactory.createEmptyBorder(0,0,0,0));
}
}
Here's how you can load the ImageIcon, if you want to do it like this.
public ImageIcon getImageIcon(String fileName){
String imageDirectory = "images/"; //relative to classpath
URL imgURL = getClass().getResource(imageDirectory + fileName);
return new ImageIcon(imgURL);
}
This will give you a button that will at least look like your image.
I asked a similar question regarding Image-based events on click, and Shapes helped wonders.
I guess it comes down to how complex your button images are.
Here's reference anyway:
How can you detect a mouse-click event on an Image object in Java?
PS: Maybe look into generating shapes from images, that go around all the pixels that aren't transparent. No idea if this is possible, but it would mean that a button would only be "pressed" if the user clicks on the image part of it. Just a thought.

If you want your button layout to be that of the non-transparent pixels in your image, then you should redefine the paintComponent() method. It is the most correct way of doing it (overriding paint() worked in old times but is now discouraged).
However I think it is not exactly what you want: you want a click on the button to be detected only if it is on a non-transparent pixel, right? In that case you have to parse your image and when clicked compare mouse coordinates to the pixel alpha channel of your image as JButton does not have such a feature.

If you have a round button, this is exactly what you need:
public class RoundButton extends JButton {
public RoundButton() {
this(null, null);
}
public RoundButton(Icon icon) {
this(null, icon);
}
public RoundButton(String text) {
this(text, null);
}
public RoundButton(Action a) {
this();
setAction(a);
}
public RoundButton(String text, Icon icon) {
setModel(new DefaultButtonModel());
init(text, icon);
if(icon==null) return;
setBorder(BorderFactory.createEmptyBorder(0,0,0,0));
setContentAreaFilled(false);
setFocusPainted(false);
initShape();
}
protected Shape shape, base;
protected void initShape() {
if(!getBounds().equals(base)) {
Dimension s = getPreferredSize();
base = getBounds();
shape = new Ellipse2D.Float(0, 0, s.width, s.height);
}
}
#Override public Dimension getPreferredSize() {
Icon icon = getIcon();
Insets i = getInsets();
int iw = Math.max(icon.getIconWidth(), icon.getIconHeight());
return new Dimension(iw+i.right+i.left, iw+i.top+i.bottom);
}
#Override public boolean contains(int x, int y) {
initShape();
return shape.contains(x, y);
//or return super.contains(x, y) && ((image.getRGB(x, y) >> 24) & 0xff) > 0;
}
}
JButton has a contains() method. Override it and call it on mouseReleased();

paintComponent() instead of paint() depends if you paint() inside XxxButtonUI or just override paintComponent(), but there exists the option JButton#setIcon.

Display a GWT Image in a centered PopupPanel onLoad

Using GWT I am displaying an image thumbnail with a ClickHandler that then shows the full image (can be several MB) in a centered PopupPanel. In order to have it centered the image must be loaded before the popup is shown, otherwise the top-left corner of the image is placed in the middle of the screen (the image thinks it is 1px large). This is the code I am using to do this:
private void showImagePopup() {
final PopupPanel popupImage = new PopupPanel();
popupImage.setAutoHideEnabled(true);
popupImage.setStyleName("popupImage"); /* Make image fill 90% of screen */
final Image image = new Image();
image.addLoadHandler(new LoadHandler() {
#Override
public void onLoad(LoadEvent event) {
popupImage.add(image);
popupImage.center();
}
});
image.setUrl(attachmentUrl + CFeedPostAttachment.ATTACHMENT_FILE);
Image.prefetch(attachmentUrl + CFeedPostAttachment.ATTACHMENT_FILE);
}
However, the LoadEvent event is never fired, and thus the image is never shown. How can I overcome this? I want to avoid using http://code.google.com/p/gwt-image-loader/ because I do not want to add extra libraries if I can avoid it at all. Thanks.

The onLoad() method will only fire once the image has been loaded into the DOM. Here is a quick workaround:
...
final Image image = new Image(attachmentUrl + CFeedPostAttachment.ATTACHMENT_FILE);
image.addLoadHandler(new LoadHandler() {
#Override
public void onLoad(LoadEvent event) {
// since the image has been loaded, the dimensions are known
popupImage.center();
// only now show the image
popupImage.setVisible(true);
}
});
popupImage.add(image);
// hide the image until it has been fetched
popupImage.setVisible(false);
// this causes the image to be loaded into the DOM
popupImage.show();
...
Hope that helps.