[SOLVED] Lemur nested Panels with images issue

So I am having a problem with nesting Panels in Lemur. What I want to achieve it to have a background window with a small icon in the left upper corner. When I add icon Panel to the window Panel the child Panel is not visible at all. In my opinion it is not a Z order problem (images are semi transparent) nor a layout issue (I can replace Icon Panel with a Label and it is visible where it should be). I tried replacing QuadBackgroundComponent with IconComponent with the same result unfortunately.
Here’s the code

//window

Panel sockDataPanel = new Panel();
sockDataPanel.setPreferredSize(new Vector3f(  app.getCamera().getHeight()/2.7f ,app.getCamera().getHeight()/6f , 0));
 sockDataPanel.setLocalTranslation( app.getCamera().getWidth()-sockDataPanel.getPreferredSize().x,sockDataPanel.getPreferredSize().y, 0);
          sockDataPanel.setBackground(new QuadBackgroundComponent(assetManager.loadTexture("Textures/UI/outline_frame.png")));     
uiNode.attachChild(sockDataPanel); 
   
//icon

Panel sockIconPanel = new Panel();
sockIconPanel.setPreferredSize(new Vector3f(  iconSize ,  iconSize, 0));
sockIconPanel.setLocalTranslation(0,0,0);
sockIconPanel.setBackground(new QuadBackgroundComponent(assetManager.loadTexture("Textures/UI/icon_socket.png")));     
sockDataPanel.attachChild(sockIconPanel); 

if I add the icon Panel “next to” the window Panel everything is ok.

Panel sockIconPanel = new Panel();
sockIconPanel.setPreferredSize(new Vector3f(  iconSize ,  iconSize, 0));
 sockIconPanel.setLocalTranslation(sockDataPanel.getLocalTranslation());
sockIconPanel.setBackground(new QuadBackgroundComponent(assetManager.loadTexture("Textures/UI/icon_socket.png")));     
uiNode.attachChild(sockIconPanel); 

Thanks in advance for any help.

Well after testing on my end some, I can confirm that attaching a panel to another panel via Node.attachChild() does seem to not render the child panel. This is odd since attaching via the Node.attachChild() method should not engage any lemur stuff at all.

The 2 simplest solutions would be to have a Node that you attach both panels to, or use a container.

my code:

//test panels for test
        Panel test1 = new Panel();
        test1.setPreferredSize(new Vector3f(100,100,1));
        test1.setLocalTranslation(200, 300, 0);
        test1.setBackground(new QuadBackgroundComponent(ColorRGBA.Orange));
        test1.setAlpha(0.5f);
        Panel test2 = new Panel();
        test2.setPreferredSize(new Vector3f(50,50,1));
        test2.setLocalTranslation(0, 50, 1);
        test2.setBackground(new QuadBackgroundComponent(ColorRGBA.Blue));
        test1.attachChild(test2);
        menuNode.attachChild(test1);

Thx. Yeah it could solve my issue.

I had realized the Panel issuse once myself. I just rechecked before I wrote here.
But: Attaching a text/label to a panel worked in my testproject.

  Panel c = new Panel(400, 300);
  Label label1 = new Label("BLA", new ElementId("txt2"));
  label1.setFontSize(15);
  label1.setLocalTranslation(10, -15, 1); translation inside Panel
  c.attachChild(label1);
    

I think there was a specific element for graphic. You may attach this to your Panel the way I showed above. Or you can try to attach a Button to your Panel.

I think what is happening is that the size is never set.

When a Lemur-managed spatial is not the child of another Lemur-managed spatial then it will automatically set its size to its preferred size. This causes any layout-managed children to be positioned/sized/etc…

When a Lemur-managed spatial is the child of another Lemur-managed spatial then it doesn’t do this automatic sizing because it expects that it is being managed by a layout.

In the chat, you mentioned that Label works and Panel doesn’t… but I suspect that Label wasn’t really working. You may still have seen the BitmapText because it wouldn’t be clipped… but any background/border would still be 0,0,0.

So you may be able to fix it just by manually setting the size with setSize(getPreferredSize()).

Note: you can also achieve the same thing with layouts. For example, your “window” could use a border layout into which you put the icon into the top with dynamic insets to shift it all the way left or right or whatever. I’m guessing from your description that you aren’t putting other GUI elements into the window but if you were then they could go into the center part of the border layout.

Edit: P.S.: I edited your post to mark the code blocks.

Unfortunately using setSize has no effect. However QSDragon’s solution with parent node does the trick so I consider it solved.