How Add Images in a Panel Using Lemur

Sorry for answer late. I want to design a window like looks in the picture. I have implemented this code but it doesn’t work, i am generating one Container (that it’s the principal), another Container which have one panel with a Label, and i want to put three buttons (i can generate one of them, but i organize this panel and looks bad), and i need a panel that have input text (can i do this with lemur?) and finaly one panel where i can visualize the text. This windows works like a chat window.

this is the implemented code for this window

[java]
Agregar.detachAllChildren();

    testPanel = new Container("glass");
    guiNode.attachChild(testPanel);
    testPanel.setLocalTranslation( 400, 150, 0 );  
    testPanel.setBackground(new QuadBackgroundComponent(new ColorRGBA(0,0.5f,0.5f,0.5f),5,5, 0.02f, false));
    CursorEventControl.addListenersToSpatial(testPanel, new DragHandler());
    
    BorderLayout layout = new BorderLayout();
    Container panel1 = new Container(layout);
    testPanel.addChild(panel1);
    //Panel titulo
    SpringGridLayout leftLayout = new SpringGridLayout(Axis.Y, Axis.X, FillMode.Even, FillMode.Even);
    Container left = new Container(leftLayout);
    panel1.addChild(left,BorderLayout.Position.West);
    left.setBackground(new QuadBackgroundComponent(new ColorRGBA(0.14f,0.38f,0.57f,0.5f),5,5, 0.02f, false));
    left.addChild(new Label("Dr. Henry Wu",new ElementId("titulo"),"glass"));
    left.addChild(new Panel(2,2,ColorRGBA.Cyan,"glass")).setUserData(LayerComparator.LAYER,2);
    //Panel Botones   
    SpringGridLayout rightLayout = new SpringGridLayout(Axis.Y, Axis.X, FillMode.Even, FillMode.Even);
    Container right = new Container(rightLayout);
    panel1.addChild(right,BorderLayout.Position.East);
    
    SpringGridLayout rrLayout =  new SpringGridLayout(Axis.Y, Axis.X, FillMode.Even, FillMode.Even);
    Container rClose = new Container(rrLayout);
    right.addChild(rClose,BorderLayout.Position.West);
    
    SpringGridLayout rlLayout = new SpringGridLayout(Axis.Y,Axis.X,FillMode.Even,FillMode.Even);
    Container rMin = new Container(rlLayout);
    right.addChild(rMin,BorderLayout.Position.East);
    right.setBackground(new QuadBackgroundComponent(new ColorRGBA(0.14f,0.38f,0.57f,0.5f),5,5, 0.02f, false));
    //Cargar Iconos
    IconComponent icon =  new IconComponent("Interface/X.png");
    icon.setOverlay(false);
    icon.setHAlignment(HAlignment.Center);
    icon.setVAlignment(VAlignment.Center);
    float moveRightWidth = (float)(settings.getWidth()) / 10f;
    float moveRightHeight = moveRightWidth;
    // calculate icon scale to fit within desired button size
    Image iconImage = icon.getImageTexture().getImage();
    float scaleX = moveRightWidth / iconImage.getWidth();
    float scaleY = moveRightHeight / iconImage.getHeight();
    logger.log(Level.INFO, "button size x: {0}, y: {1}",
            new Object[]{moveRightWidth, moveRightHeight});
    logger.log(Level.INFO, "icon size x: {0}, y: {1}",
            new Object[]{iconImage.getWidth(), iconImage.getHeight()});
    logger.log(Level.INFO, "icon scale x: {0}, y: {1}",
            new Object[]{scaleX, scaleY});
    
    IconComponent iconmin = new IconComponent("Interface/minimizar.png");
    iconmin.setOverlay(true);
    iconmin.setHAlignment(HAlignment.Left);
    iconmin.setVAlignment(VAlignment.Center);
    Image iconImagemin = iconmin.getImageTexture().getImage();
    float scaleXmin = moveRightWidth / iconImagemin.getWidth();
    float scaleYmi = moveRightHeight / iconImagemin.getHeight();
    logger.log(Level.INFO, "button size x: {0}, y: {1}",
            new Object[]{moveRightWidth, moveRightHeight});
    logger.log(Level.INFO, "icon size x: {0}, y: {1}",
            new Object[]{iconImagemin.getWidth(), iconImagemin.getHeight()});
    logger.log(Level.INFO, "icon scale x: {0}, y: {1}",
            new Object[]{scaleXmin, scaleYmi});
    
   //Crear Botones
    Button cerrar = right.addChild(new Button(""));
    cerrar.setBackground(icon);     

// Button minimizar = rMin.addChild(new Button(""));
// minimizar.setBackground(iconmin);

    cerrar.addCommands(Button.ButtonAction.Down, new Command() {
        public void execute(Object source) {
            testPanel.detachAllChildren();
        }
    });
    Container mensaje1 = new Container("glass");
    testPanel.addChild(mensaje1);
    mensaje1.setBackground(new QuadBackgroundComponent(new ColorRGBA(0, 0.5f, 0.5f, 0.8f), 15, 5, 0.02f, false));
    mensaje1.addChild(new Label("Avatar1"+ "Hola,ingresas a menudo? "));
    
    Container mensaje2 = new Container("glass");
    testPanel.addChild(mensaje2);
    mensaje1.setBackground(new QuadBackgroundComponent(new ColorRGBA(0, 0.5f, 0.5f, 0.8f), 15, 5, 0.02f, false));
    mensaje1.addChild(new Label("Avatar2"+ "Hola,es la primera \n que ingreso "));

}
[/java]

Thanks.

Finally, can i embed and show a pdf file or web site in a container, or panel using lemur?, because i dont know if using lemur i can show a pdf file.

Thanks a lot

@CristianGaitanG said: Finally, can i embed and show a pdf file or web site in a container, or panel using lemur?, because i dont know if using lemur i can show a pdf file.

Thanks a lot

I seriously doubt it. This situation is what’s known as “specialist”. Your best bet is to render the PDF to an image and display that instead.

@CristianGaitanG said: Finally, can i embed and show a pdf file or web site in a container, or panel using lemur?, because i dont know if using lemur i can show a pdf file.

Thanks a lot

Jayfella is right… PDF support is kind of out of scope for a GUI library.

@CristianGaitanG said: Sorry for answer late. I want to design a window like looks in the picture. I have implemented this code but it doesn't work, i am generating one Container (that it's the principal), another Container which have one panel with a Label, and i want to put three buttons (i can generate one of them, but i organize this panel and looks bad), and i need a panel that have input text (can i do this with lemur?) and finaly one panel where i can visualize the text. This windows works like a chat window.

this is the implemented code for this window

[java]
Agregar.detachAllChildren();

    testPanel = new Container("glass");
    guiNode.attachChild(testPanel);
    testPanel.setLocalTranslation( 400, 150, 0 );  
    testPanel.setBackground(new QuadBackgroundComponent(new ColorRGBA(0,0.5f,0.5f,0.5f),5,5, 0.02f, false));
    CursorEventControl.addListenersToSpatial(testPanel, new DragHandler());
    
    BorderLayout layout = new BorderLayout();
    Container panel1 = new Container(layout);
    testPanel.addChild(panel1);
    //Panel titulo
    SpringGridLayout leftLayout = new SpringGridLayout(Axis.Y, Axis.X, FillMode.Even, FillMode.Even);
    Container left = new Container(leftLayout);
    panel1.addChild(left,BorderLayout.Position.West);
    left.setBackground(new QuadBackgroundComponent(new ColorRGBA(0.14f,0.38f,0.57f,0.5f),5,5, 0.02f, false));
    left.addChild(new Label("Dr. Henry Wu",new ElementId("titulo"),"glass"));
    left.addChild(new Panel(2,2,ColorRGBA.Cyan,"glass")).setUserData(LayerComparator.LAYER,2);
    //Panel Botones   
    SpringGridLayout rightLayout = new SpringGridLayout(Axis.Y, Axis.X, FillMode.Even, FillMode.Even);
    Container right = new Container(rightLayout);
    panel1.addChild(right,BorderLayout.Position.East);
    
    SpringGridLayout rrLayout =  new SpringGridLayout(Axis.Y, Axis.X, FillMode.Even, FillMode.Even);
    Container rClose = new Container(rrLayout);
    right.addChild(rClose,BorderLayout.Position.West);
    
    SpringGridLayout rlLayout = new SpringGridLayout(Axis.Y,Axis.X,FillMode.Even,FillMode.Even);
    Container rMin = new Container(rlLayout);
    right.addChild(rMin,BorderLayout.Position.East);
    right.setBackground(new QuadBackgroundComponent(new ColorRGBA(0.14f,0.38f,0.57f,0.5f),5,5, 0.02f, false));
    //Cargar Iconos
    IconComponent icon =  new IconComponent("Interface/X.png");
    icon.setOverlay(false);
    icon.setHAlignment(HAlignment.Center);
    icon.setVAlignment(VAlignment.Center);
    float moveRightWidth = (float)(settings.getWidth()) / 10f;
    float moveRightHeight = moveRightWidth;
    // calculate icon scale to fit within desired button size
    Image iconImage = icon.getImageTexture().getImage();
    float scaleX = moveRightWidth / iconImage.getWidth();
    float scaleY = moveRightHeight / iconImage.getHeight();
    logger.log(Level.INFO, "button size x: {0}, y: {1}",
            new Object[]{moveRightWidth, moveRightHeight});
    logger.log(Level.INFO, "icon size x: {0}, y: {1}",
            new Object[]{iconImage.getWidth(), iconImage.getHeight()});
    logger.log(Level.INFO, "icon scale x: {0}, y: {1}",
            new Object[]{scaleX, scaleY});
    
    IconComponent iconmin = new IconComponent("Interface/minimizar.png");
    iconmin.setOverlay(true);
    iconmin.setHAlignment(HAlignment.Left);
    iconmin.setVAlignment(VAlignment.Center);
    Image iconImagemin = iconmin.getImageTexture().getImage();
    float scaleXmin = moveRightWidth / iconImagemin.getWidth();
    float scaleYmi = moveRightHeight / iconImagemin.getHeight();
    logger.log(Level.INFO, "button size x: {0}, y: {1}",
            new Object[]{moveRightWidth, moveRightHeight});
    logger.log(Level.INFO, "icon size x: {0}, y: {1}",
            new Object[]{iconImagemin.getWidth(), iconImagemin.getHeight()});
    logger.log(Level.INFO, "icon scale x: {0}, y: {1}",
            new Object[]{scaleXmin, scaleYmi});
    
   //Crear Botones
    Button cerrar = right.addChild(new Button(""));
    cerrar.setBackground(icon);     

// Button minimizar = rMin.addChild(new Button(“”));
// minimizar.setBackground(iconmin);

    cerrar.addCommands(Button.ButtonAction.Down, new Command() {
        public void execute(Object source) {
            testPanel.detachAllChildren();
        }
    });
    Container mensaje1 = new Container("glass");
    testPanel.addChild(mensaje1);
    mensaje1.setBackground(new QuadBackgroundComponent(new ColorRGBA(0, 0.5f, 0.5f, 0.8f), 15, 5, 0.02f, false));
    mensaje1.addChild(new Label("Avatar1"+ "Hola,ingresas a menudo? "));
    
    Container mensaje2 = new Container("glass");
    testPanel.addChild(mensaje2);
    mensaje1.setBackground(new QuadBackgroundComponent(new ColorRGBA(0, 0.5f, 0.5f, 0.8f), 15, 5, 0.02f, false));
    mensaje1.addChild(new Label("Avatar2"+ "Hola,es la primera 

que ingreso "));
}
[/java]

Thanks.

I will go through that code in more detail a little later as I’m pressed for time at the moment.

It might save me some time if you can provide a screen shot of what that code looks like.

A side note: probably a click command is what you want for buttons. (addClickCommands() instead of addCommands()).

can i change the size of letters? and how can i put in a panel four buttons?, like a text, close button, minimize button and configuration button

Thanks

@CristianGaitanG said: can i change the size of letters?

setFontSize()

@CristianGaitanG said: and how can i put in a panel four buttons?, like a text, close button, minimize button and configuration button

Thanks

You add them. I’m really trying hard to help but I need your help. Please be more specific in your questions and I can provide better answers.

Ohhhh sorry, i’ll be more specific in my questions, and sorry for answer late.
Yes, i want to generate a chat window.
This window must have:

  1. Title Panel: This panel has the avatar’s name. Next in the same panel, i have three buttons like configuration, minimize and close this chat window (Control Buttons).This panel must be something like the pic.
  2. Messages Panel: This panel contains all the messages sent.
  3. Text Panel: In this panel, i have two things, the first one is the TextField (i can write my message that i want to send), and the second one, a Send button (this button works like a Intro) is to send the message.

I have tried to do something but the send button and the TextField dont work, and i don’t know how to generate the Title panel with the configuration that i want.
I show again the code that i have implemented to do this window but it doesn’t work.

[java]
private void crearVentanaChat() {
Agregar.detachAllChildren();

    testPanel = new Container("glass");
    guiNode.attachChild(testPanel);
    testPanel.setLocalTranslation( 400, 150, 0 );  

// testPanel.setBackground(new QuadBackgroundComponent(new ColorRGBA(0,0.5f,0.5f,0.5f),5,5, 0.02f, false));
CursorEventControl.addListenersToSpatial(testPanel, new DragHandler());
IconComponent iconcon = new IconComponent(“Interface/FONDO-CHATBOX.png”);
iconcon.setOverlay(true);
iconcon.setHAlignment(HAlignment.Center);
iconcon.setVAlignment(VAlignment.Center);
float moveRightWidth = (float)(settings.getWidth()) / 10f;
float moveRightHeight = moveRightWidth;
Image iconImagemin = iconcon.getImageTexture().getImage();
float scaleXmin = moveRightWidth / iconImagemin.getWidth();
float scaleYmi = moveRightHeight / iconImagemin.getHeight();
logger.log(Level.INFO, “button size x: {0}, y: {1}”,
new Object[]{moveRightWidth, moveRightHeight});
logger.log(Level.INFO, “icon size x: {0}, y: {1}”,
new Object[]{iconImagemin.getWidth(), iconImagemin.getHeight()});
logger.log(Level.INFO, “icon scale x: {0}, y: {1}”,
new Object[]{scaleXmin, scaleYmi});
testPanel.setBackground(iconcon);

    Container panel1 = new Container(new BorderLayout());

// panel1.setBackground(new QuadBackgroundComponent(new ColorRGBA(0.14f,0.38f,0.57f,0.5f),5,5, 0.02f, false));
testPanel.addChild(panel1);
//Panel titulo
SpringGridLayout leftLayout = new SpringGridLayout(Axis.Y, Axis.X, FillMode.Even, FillMode.Even);
Container left = new Container(leftLayout);
panel1.addChild(left,BorderLayout.Position.West);
// left.setBackground(new QuadBackgroundComponent(new ColorRGBA(0.14f,0.38f,0.57f,0.5f),5,5, 0.02f, false));
left.addChild(new Label(“Dr. Henry Wu”,new ElementId(“titulo”),“glass”));
// left.addChild(new Panel(2,2,ColorRGBA.Cyan,“glass”)).setUserData(LayerComparator.LAYER,2);
//Panel Botones
SpringGridLayout rightLayout = new SpringGridLayout(Axis.Y, Axis.X, FillMode.Even, FillMode.Even);
Container right = new Container(rightLayout);
panel1.addChild(right,BorderLayout.Position.East);
//

    SpringGridLayout rrLayout =  new SpringGridLayout(Axis.Y, Axis.X, FillMode.Even, FillMode.Even);
    Container rClose = new Container(rrLayout);
    right.addChild(rClose,BorderLayout.Position.West);

//
SpringGridLayout rlLayout = new SpringGridLayout(Axis.Y,Axis.X,FillMode.Even,FillMode.Even);
Container rMin = new Container(rlLayout);
right.addChild(rMin,BorderLayout.Position.East);
right.setBackground(new QuadBackgroundComponent(new ColorRGBA(0.14f,0.38f,0.57f,0.5f),5,5, 0.02f, false));
//Cargar Iconos
IconComponent icon = new IconComponent(“Interface/X.png”);
icon.setOverlay(false);
icon.setHAlignment(HAlignment.Center);
icon.setVAlignment(VAlignment.Center);
// float moveRightWidth = (float)(settings.getWidth()) / 10f;
// float moveRightHeight = moveRightWidth;
// calculate icon scale to fit within desired button size
Image iconImage = icon.getImageTexture().getImage();
float scaleX = moveRightWidth / iconImage.getWidth();
float scaleY = moveRightHeight / iconImage.getHeight();
logger.log(Level.INFO, “button size x: {0}, y: {1}”,
new Object[]{moveRightWidth, moveRightHeight});
logger.log(Level.INFO, “icon size x: {0}, y: {1}”,
new Object[]{iconImage.getWidth(), iconImage.getHeight()});
logger.log(Level.INFO, “icon scale x: {0}, y: {1}”,
new Object[]{scaleX, scaleY});
panel1.addChild( new Panel( 10f, 10f, new ElementId(“spacer”), “glass” ) );
IconComponent iconmin = new IconComponent(“Interface/minimizar.png”);
iconmin.setOverlay(true);
iconmin.setHAlignment(HAlignment.Left);
iconmin.setVAlignment(VAlignment.Center);
Image iconImagemin = iconmin.getImageTexture().getImage();
float scaleXmin = moveRightWidth / iconImagemin.getWidth();
float scaleYmi = moveRightHeight / iconImagemin.getHeight();
logger.log(Level.INFO, “button size x: {0}, y: {1}”,
new Object[]{moveRightWidth, moveRightHeight});
logger.log(Level.INFO, “icon size x: {0}, y: {1}”,
new Object[]{iconImagemin.getWidth(), iconImagemin.getHeight()});
logger.log(Level.INFO, “icon scale x: {0}, y: {1}”,
new Object[]{scaleXmin, scaleYmi});

    //Crear Botones
    Button cerrar = right.addChild(new Button(""));
    cerrar.setBackground(icon);     

    Button minimizar = rMin.addChild(new Button(""));
    minimizar.setBackground(iconmin);

// right.addChild(new Panel(2,2,ColorRGBA.Cyan,“glass”)).setUserData(LayerComparator.LAYER,2);
cerrar.addCommands(Button.ButtonAction.Down, new Command() {
public void execute(Object source) {
testPanel.detachAllChildren();
}
});
Container mensaje1 = new Container(“glass”);
testPanel.addChild(mensaje1);
mensaje1.setBackground(new QuadBackgroundComponent(new ColorRGBA(0.14f,0.38f,0.57f,0.5f), 15, 5, 0.02f, false));
mensaje1.setPreferredSize(new Vector3f(175,190 ,0));
mensaje1.addChild(new Label(objectPicked.getName(),“glass”));
testPanel.addChild( new Panel( 10f, 10f, new ElementId(“spacer”), “glass” ) );

    Container texto =  new Container(new BorderLayout());
    testPanel.addChild(texto);
    
    SpringGridLayout leftL = new SpringGridLayout(Axis.Y, Axis.X, FillMode.Even, FillMode.Even);
    Container leftt = new Container(leftL);
    leftt.setBackground(new QuadBackgroundComponent(new ColorRGBA(0.14f,0.38f,0.57f,0.5f), 15, 5, 0.02f, false));
    texto.addChild(leftt,BorderLayout.Position.West);
    TextField Tesc = new TextField("");
    leftt.addChild(Tesc);
    
    SpringGridLayout rightL = new SpringGridLayout(Axis.Y, Axis.X, FillMode.Even, FillMode.Even);
    Container rightt = new Container(rightL);
    panel1.addChild(rightt,BorderLayout.Position.East);
    
    IconComponent iconsend =  new IconComponent("Interface/BOTON-CHAT.png");
    iconsend.setOverlay(false);
    iconsend.setHAlignment(HAlignment.Right);
    iconsend.setVAlignment(VAlignment.Bottom);
    Image iconIma = iconsend.getImageTexture().getImage();
    float scaleX1 = moveRightWidth / iconIma.getWidth();
    float scaleY1 = moveRightHeight / iconIma.getHeight();
    logger.log(Level.INFO, "button size x: {0}, y: {1}",
            new Object[]{moveRightWidth, moveRightHeight});
    logger.log(Level.INFO, "icon size x: {0}, y: {1}",
            new Object[]{iconIma.getWidth(), iconIma.getHeight()});
    logger.log(Level.INFO, "icon scale x: {0}, y: {1}",
            new Object[]{scaleX1, scaleY1});
    Button send = rightt.addChild(new Button(""));
    send.setBackground(iconsend);     
}

[/java]

Thanks.

Title Panel

Chat Window

Just a couple notes on a quick read. (Really sorry I don’t have time to examine and/or run your code in more detail.)

First, I think the reason your send button doesn’t do anything is because you haven’t added any listeners.

Second, all of the cases where you are adding ButtonAction.Down listeners, you probably really want to add click listeners.

A quick word on SpringGridLayout as it might help you since the documentation is kind of weak.

The spring grid works on a grid… where cells can be specified. There is some automatic determination of cells if you don’t specify and a lot of the sample code depends on this… but if in doubt, you can always specifically give children a grid cell location.

So, for example if you create a SpringGridLayout like this:
SpringGridLayout(Axis.Y, Axis.X, FillMode.Even, FillMode.Even);

(which is the default by the way for SpringGridLayout())

That indicates that cells will be specified in row, column order. (Y axis, X axis).

So if you have:
Container container = new Container(new SpringGridLayout(Axis.Y, Axis.X, FillMode.Even, FillMode.Even));

container.addChild(new Label(“Label 1”), 0, 0);

will put it at row 0, column 0.

container.addChild(new Label(“Label 2”), 1, 0);

will put it at row 1, column 0.

If you call addChild() without any cell information then it will just keep incrementing the first number (row in this case).

So the above ends up being the same as:
container.addChild(new Label(“Label 1”));
container.addChild(new Label(“Label 2”));

If you specify only one number then it assumes you are adding to the existing “row”.
container.addChild(new Label(“Label 1”));
container.addChild(new Label(“Label 2”), 1);

…would put Label 1 and Label 2 in the same row in this case… so it’s the same as:
container.addChild(new Label(“Label 1”), 0, 0);
container.addChild(new Label(“Label 2”), 0, 1);

When in doubt you can always specify the cells directly… and for complicated UIs that’s sometimes best if you are unsure about the automatic ways.

I hope that most of your issues are with placement. I haven’t seen a screen shot of what you actually ended up with and I can’t really run the code as is… so I must guess what might be wrong with the visuals.