Lemur: Adding lables and buttons to TabbedPane

User Code & Projects lemur
1

Hello, So how would I go about adding buttons, labels ect to a TabbedPane?

This is what I’m using to create the tabs:

      TabbedPanel tabbedPanel = new TabbedPanel();
      Panel graphicsPanel = new Panel();
      tabbedPanel.addTab("Graphics", graphicsPanel);
      Panel audioPanel = new Panel();
      tabbedPanel.addTab("Audio", audioPanel);
      Panel inputPanel = new Panel();
      tabbedPanel.addTab("Input", inputPanel);
      window.addChild(tabbedPanel);

but how do I go about adding things to the panels.
Thanks

2

It will be easier if you add Containers instead of Panels… since Containers have convenience methods for adding children to a layout.

TabbedPanel tabs = new TabbedPanel();
Container panel1 = tabs.addTab("Panel 1", new Container());
panel1.addChild(new Label("Hello, world."));

Container panel2 = tabs.addTab("Panel 2", new Container());
panel2.addChild(new Label("Hello, again, the world!"));

window.addChild(tabs);

Or something like that. Note: if you want to see a really advanced example you can look at the source code to the SimArboreal Editor. GitHub - Simsilica/SimArboreal-Editor: Editor using the SimArboreal library to generate exportable tree models.

It might be a little overwhelming, though. Hopefully my example helps your learning curve.

1 Like
3

I’m not new with Java it’s just that I’ve never really used a library or anything like that. Everything I’ve done is pure Java. Again Thanks for the help! The JME3 community is honestly fantastic!

1 Like
4

Yeah, by “learning curve” I meant “Lemur learning curve”. And the SimArboreal Editor is an example of using Lemur. That’s what I meant by pointing to that reference.

I use Lemur in all of my own apps so any of my public apps will have some example of it… but SimArboreal is so far the most advanced one.

5

Hey, I have another question and I didn’t want to start another thread. Is there any Image implementation in Lemur or do I just use the typical JME3 Picture class?

Picture hudthingo = new Picture("Cool Hud Thing!");
hudthingo.setImage(assetManager, "Textures/blahhblahh.png", true);
hudthingo.setPosition((x, y);
guiNode.attachChild(hudthingo);
6

Any Lemur GUI element can have a picture as a background. Or if you want a slightly more friendly version then you can use the IconComponent in the icon layer of a Label. Just depends on if you want it to stretch and be a background or if you want the picture to be the ‘thing’.

Icon in a label:

Label myLabel = new Label();
myLabel.setIcon(new IconComponent("Textures/blahhblahh.png"));

In the above case you can also have text and the icon can either overlay or be the left, right, top, bottom, whatever of the text and so on. The label itself will be sized to fit the icon. See the javadoc for IconComponent to figure out how to change the image size, etc…

Texture as a background:

Label myLabel = new Label("Some text");
Texture tex = assetManager.loadTexture("Textures/blahhblahh.png");
myLabel.setBackground(new QuadBackgroundComponent(tex));

In the above case, the texture will always be the background and will stretch to fit the label. So the label should have size to be visible, really. The background can have a margin and so on. TbtQuadBackgroundComponent can be used to make backgrounds that stretch more intelligently. Better docs on that here:

I suspect the icon option is what you were looking for but wanted to include both.

1 Like
7

Thanks for the help. Also one final question is it possible to render a 3D object infront of the guinode?

8

Yes, but you’d have to create another viewport in front of it.

Edit: note there are other options depending on what exactly the goal is.

9

The goal is to make it so that when you attack an entity its preview and stats render in the top corner.

10

You can put 3D objects in the GUI node also but sometimes they render funny and you’d obviously have to scale them up.

Another option is to render the object off screen and just put the image in the GUI.

Possibly the easiest code-wise, is to create an additional Viewport with its own camera, etc. and put the 3D object there. It could take some trial and error to position it like you want it.

A final option is to create your own GUI viewport that is actually a 3D viewport. With some math, it’s possible to scale your GUI and move the camera far enough that it’s still 1:1 pixel to unit ratio. Some care has to be taken to set the viewport’s root node to transparent. The benefit here is that you get something like a GUI node but that can have real 3D objects in it. The downside is that it’s a lot of unexplored territory if you’ve never done it before.

The extra viewport option (my original suggestion) is probably the best one for what you are trying to do. Especially if you are actually rendering an object from your scene in the state that it is in the scene (ie: same animation pose, etc.). A spatial can only belong to one parent node but any number of viewports can be used to render the same spatial. So this viewport could be using the actual model as its root and it would still have all of the same state.

11

Is there any tutorial that I can view to learn how to create another viewport.

12

I’m not sure. Sorry. There might be an example in the test suite also.

13

Alright thanks for all the help. I’ll look into it.