How Add Images in a Panel Using Lemur

User Code & Projects lemur
1

Hello,

i’m using lemur to generate a popup message when i touch some specialy object. This popup is executed in Android’s devices and it worked perfectly on android. The popup message is generated using the next code:

[java]
package mygame;

import com.jme3.app.FlyCamAppState;
import com.jme3.app.SimpleApplication;
import com.jme3.material.RenderState.BlendMode;
import com.jme3.material.Material;
import com.jme3.math.ColorRGBA;
import com.jme3.math.Vector3f;
import com.jme3.renderer.RenderManager;
import com.jme3.scene.Geometry;
import com.jme3.scene.shape.Box;
import com.simsilica.lemur.Container;
import com.simsilica.lemur.GuiGlobals;
import com.simsilica.lemur.Label;
import com.simsilica.lemur.LayerComparator;
import com.simsilica.lemur.Panel;
import com.simsilica.lemur.component.QuadBackgroundComponent;
import com.simsilica.lemur.core.VersionedReference;
import com.simsilica.lemur.style.ElementId;

public class Main extends SimpleApplication {
// Define some model references we will use in
// update.
private VersionedReference<Double> redRef;
private VersionedReference<Double> greenRef;
private VersionedReference<Double> blueRef;
private VersionedReference<Double> alphaRef;
private VersionedReference<Boolean> showStatsRef;
private VersionedReference<Boolean> showFpsRef;

private ColorRGBA boxColor = ColorRGBA.Blue.clone();

public static void main(String[] args) {
    Main app = new Main();
    app.start();
}

@Override
public void simpleInitApp() {
    // Initialize the globals access so that the defualt
    // components can find what they need.
    GuiGlobals.initialize(this);
    // Remove the flycam because we don't want it in this
    // demo
    stateManager.detach( stateManager.getState(FlyCamAppState.class) );
    Container ventana = new Container("glass");
    ventana.setLocalTranslation(50,250,0);
    guiNode.attachChild(ventana);
    Container panelVentana = new Container("glass");
    ventana.addChild(panelVentana);
    panelVentana.setBackground(new QuadBackgroundComponent(new ColorRGBA(0,0.5f,0.5f,0.5f),15,5,0.02f,false));
    panelVentana.addChild(new Label("Ventana Emergente", new ElementId("Titulo"),"glass"));
    panelVentana.addChild(new Panel(2, 2, ColorRGBA.Cyan, "glass")).setUserData( LayerComparator.LAYER, 2 );
    Container mensaje = new Container("glass");
    ventana.addChild(mensaje); 
    mensaje.setBackground(new QuadBackgroundComponent(new ColorRGBA(0,0.5f,0.5f,0.5f),15,5,0.02f,false));
    mensaje.addChild(new Label("********-----------------------"
           + "\n----------------*******"));

    Box box = new Box( Vector3f.ZERO, 1, 1, 1 );
    Geometry geom = new Geometry( "Box", box );
    Material mat = new Material( assetManager, "Common/MatDefs/Misc/Unshaded.j3md");
    mat.setColor( "Color", boxColor );
    mat.getAdditionalRenderState().setBlendMode( BlendMode.Alpha );
    geom.setMaterial(mat);
    rootNode.attachChild( geom );

}[/java]

So, this popup message must have an icon in left side of title and i don’t know how can i add image in this panel?

1 Like
2

A few notes as I read this…

I notice you are passing “glass” as the style to all of your components but don’t actually define a glass style. You can leave this out if you want as it’s just using the default styling anyway. If you are not styling then the element ID is unnecessary also. Styling is just a nice way of getting consistent looks for components by using a style name. ElementIds are just another way of identifying bits of style to use.

The easiest way to get an image might be to create a Panel with an icon background. It’s probably the easiest to understand. (Also, I don’t know how big your image is or what your panel will look like so it’s also the way that is the most flexible.)

Something like:
[java]
Panel myImage = new Panel();
myImage.setBackground(new IconComponent(“Some/Path/To/ImageAssset.extension”));
[/java]

Then add that to your panel where you want it.

I can’t tell for sure, but it looks like you want this maybe as a small icon next to a label on the same line? In that case, layout might be easier if you added the icon background right to the label.

[java]
IconComponent icon = new IconComponent(“Some/Path/To/ImageAssset.extension”);
label.setBackground(icon);
[/java]

Or something like that. I may have forgotten some step so if that doesn’t look right then please post back.

3

Did you want the icon in mensaje or in panelVentana?

I can show you how to get my first approach to layout properly if you want it to the left of the message and don’t want to use the label icon approach.

4

yes, i want the image as small icon next to a label on the same line, something that looks like what’s in the pic.

I want to do a message window with an icon in the title line at left side, and some text in other panel inside the same window.

thank for your help

5

So, you had:
[java]
panelVentana.addChild(new Label(“Ventana Emergente”, new ElementId(“Titulo”),”glass”));
[/java]

I think it will work if you change it to:
[java]
Label title = panelVentana.addChild(new Label(“Ventana Emergente”, new ElementId(“Titulo”),”glass”));
title.setBackground(new IconComponent(“asset path to your image”));
[/java]

…if it doesn’t or looks funny then let me know.

6

yes, it looks funny, thanks for your help. It’s looks like that i need.
Another question, can i hide this window?. I want to show this windows when touch a special object, and later i want to hide or close this window when i touch another object. can i hide or close the window?
thanks for youb help.

7
@CristianGaitanG said: yes, it looks funny, thanks for your help. It's looks like that i need. Another question, can i hide this window?. I want to show this windows when touch a special object, and later i want to hide or close this window when i touch another object. can i hide or close the window? thanks for youb help.

You can do that just like any other JME Spatial. Either remove it and attach it or set its cull hint. Probably better to remove it and attach it as needed.

8
@CristianGaitanG said: yes, it looks funny, thanks for your help. It's looks like that i need.

If it ‘looks funny’ then you can paste a picture + code in here and maybe I can help make it look less strange.

9

sorry, but it was that i needed. I needed to set an icon in the title and i got it thanks.
Now, i need to close this window when i touch another object but i need do that in android. i can do it in Windows OS, but I’m generating the apk and execute it in android i can generate the popup but i can not close this popup. Can you help with that?

In windows OS i am using this code line and works perfectly, but i do the same for android and this dont work.

Thanks.

[java]
ventana.detachAllChildren();

[/java]

10
@CristianGaitanG said: sorry, but it was that i needed. I needed to set an icon in the title and i got it thanks. Now, i need to close this window when i touch another object but i need do that in android. i can do it in Windows OS, but I'm generating the apk and execute it in android i can generate the popup but i can not close this popup. Can you help with that?

In windows OS i am using this code line and works perfectly, but i do the same for android and this dont work.

Thanks.

[java]
ventana.detachAllChildren();

[/java]

Then something else is wrong because it should work the same. Are you sure the screen is updating?

note: that just detaches all of the children of “ventana”… if you instead want to remove “ventana” then ventana.removeFromParent() is what you want.

11

hello, i tried the code line that you say me and doesn’t work. I am creating the popup in this way. In other method I want to close the popup, so that i made “vetana” as global. i dont understand why it doesn’t work in android, in windows it works well.

[java]
private void select(){
ventana = new Container(“glass”);
ventana.setLocalTranslation(50, 250, 0);
guiNode.attachChild(ventana);
Container panelVentana = new Container(“glass”);
ventana.addChild(panelVentana);
panelVentana.setBackground(new QuadBackgroundComponent(new ColorRGBA(0, 0.5f, 0.5f, 0.5f), 15, 5, 0.02f, false));
Label title = panelVentana.addChild(new Label(“Ventana Emergente”, new ElementId(“Titulo”),“glass”));
title.setBackground(new IconComponent(“Interface/CuboAzul.png”));
panelVentana.addChild(new Panel(2, 2, ColorRGBA.Cyan, “glass”)).setUserData(LayerComparator.LAYER, 2);
Container mensaje = new Container(“glass”);
ventana.addChild(mensaje);
mensaje.setBackground(new QuadBackgroundComponent(new ColorRGBA(0, 0.5f, 0.5f, 0.5f), 15, 5, 0.02f, false));
if(“carro-geom-0”.equals(objectselect.getName())){
mensaje.addChild(new Label(“Este es un objeto interactivo que”
+ " \ntiene la forma de un carro."));
}
if(“pantalla-geom-0”.equals(objectselect.getName())){
mensaje.addChild(new Label(“Este es un objeto interactivo que”
+ " \ntiene la forma de pantalla."));
}
}
public void cerrarVentana (){
ventana.removeFromParent();
}
[/java]

12

Are you sure that method is even running on Android? If you change something else visual in that method (turn on/off stats, add a bitmap text to the screen, etc.) does that update?

I don’t know anything about android but if if that line is being run and is not removing the visuals then the display is not getting updated, ie: the JME update loop has stopped running or something.

Edit: and just to be clear, this is not a Lemur-specific problem (though it’s fine to discuss here) as these are just standard JME spatials at this point. I just wanted to make sure we understand that this is a more general issue for you.

13

Yes i’m sure that this method is being run, because when i want to close the window I too turn off the FPS stats and this did it.

14
@CristianGaitanG said: Yes i'm sure that this method is being run, because when i want to close the window I too turn off the FPS stats and this did it.

So this is not the real method then?
[java]
public void cerrarVentana (){
ventana.removeFromParent();
}
[/java]

Can I see the real method?

When you setup the Lemur panel, also add a test Quad to the guiNode. In your method where you remove the panel, remove the quad.

There is literally no difference between removing a quad and removing the panel. They are both just JME Spatials and all is managed in the regular scene graph way. I’m kind of skeptical that turning off stats also works at the same time you try to remove the panel. There is something I’m not seeing.

15

yes, here is the method

[java]
private void seleccionarObjet(){
if (OsDetector.getInstance().isAndroid()){
if(touch){
touch=false;
objectselect = touchobject();
if (objectselect != null){
Material m = (objectselect.getMaterial());
m.setColor(“Color”,ColorRGBA.Red);
ventana = new Container(“glass”);
ventana.setLocalTranslation(50, 250, 0);
guiNode.attachChild(ventana);
Container panelVentana = new Container(“glass”);
ventana.addChild(panelVentana);
panelVentana.setBackground(new QuadBackgroundComponent(new ColorRGBA(0, 0.5f, 0.5f, 0.5f), 15, 5, 0.02f, false));
Label title = panelVentana.addChild(new Label(“Ventana Emergente”, new ElementId(“Titulo”),“glass”));
title.setBackground(new IconComponent(“Interface/CuboAzul.png”));
panelVentana.addChild(new Panel(2, 2, ColorRGBA.Cyan, “glass”)).setUserData(LayerComparator.LAYER, 2);
Container mensaje = new Container(“glass”);
ventana.addChild(mensaje);
mensaje.setBackground(new QuadBackgroundComponent(new ColorRGBA(0, 0.5f, 0.5f, 0.5f), 15, 5, 0.02f, false));
if(“carro-geom-0”.equals(objectselect.getName())){
mensaje.addChild(new Label(“Este es un objeto interactivo que”
+ " \ntiene la forma de un carro."));
}
if(“pantalla-geom-0”.equals(objectselect.getName())){
mensaje.addChild(new Label(“Este es un objeto interactivo que”
+ " \ntiene la forma de pantalla."));
}
}
}else{
//ventana.detachAllChildren();
cerrarVentana();
}
}
}

public void cerrarVentana (){
if (OsDetector.getInstance().isAndroid()){
ventana.removeFromParent();
}
}[/java]

16

You said you were sure this method is being called:
[java]
public void cerrarVentana (){
if (OsDetector.getInstance().isAndroid()){
ventana.removeFromParent();
}
}
[/java]

…I don’t know how you can know that for sure. It seems to be called conditionally, anyway.

Add this to your code…

as a field:
BitmapText testText;

in the code that creates and adds the panel:
testText = new BitmapText(guiFont);
testText.setText(“This is a test.”);
testText.setLocalTranslation(50, 50, 0);
guiNode.attachChild(testText);

Then in the same place you remove the panel:
testText.removeFromParent();

If you do that properly and the text gets removed and the panel doesn’t then I’ll eat a bug.

17

Hello thanks for you help and this was the error. My method don’t execute the close window, thanks and i solve it with your help, thanks

but now, i have two questions:
how can i add images in a buttons?
and, how can i add images in a slider?
because i have two buttons and one slider but i want to generate using styles with images.

thanks.

18
@CristianGaitanG said: Hello thanks for you help and this was the error. My method don't execute the close window, thanks and i solve it with your help, thanks

but now, i have two questions:
how can i add images in a buttons?
and, how can i add images in a slider?
because i have two buttons and one slider but i want to generate using styles with images.

thanks.

You can set a background on any GUI element as I showed already.

I have not added a default way to set a button icon directly… though with a little trickery you can still do it. Before I go into that, can you explain or show me an idea of the result your are looking for?

19

ok, i want to show a window, this window has a message and two buttons, one button is “Yes” and the another button is “No”; but i have implemented in lemur but i want to add volume to the buttons and a graphic style.

20
@CristianGaitanG said: ok, i want to show a window, this window has a message and two buttons, one button is "Yes" and the another button is "No"; but i have implemented in lemur but i want to add volume to the buttons and a graphic style.

Can you explain what you mean by “volume”? Do you have a sample picture of what you are trying to accomplish?