TabbedPanel, fitting a picture inside a tab

User Code & Projects lemur
1

Hey guys,

i got a question concerning the TabbedPanel. I understood the concept of the TabbedPanel. So far so good. Right now i am trying to add a picuture inside the Panel of the tab. Right now I am doing something like this.


    /**
     * Creates the option bar
     * @return the option bar
     */
    private TabbedPanel optionBar(){
        final TabbedPanel optionBar = new TabbedPanel("doom");
        optionBar.addTab("Sound", soundSettings());
        optionBar.addTab("Mouse",generalLabel());
        optionBar.addTab("Controls",controlSettings());
        

        return optionBar;
    }

This generates my TabbedPanel.
Here is the the controlSettings() function:

    /**
     * Creates a Container containing the keyboard layout
     * @return The container which holds the image
     */
    private Container controlSettings(){
        final Container controlContainer = new Container("doom");
        final Panel controlPanelImage = new Panel("doom");
        final IconComponent controlImage = new IconComponent("Interface/Options/tastenbelegung.png");

        controlImage.setIconSize(new Vector2f(585,329));
        controlPanelImage.setBackground(controlImage);
        controlContainer.addChild(controlPanelImage);
        controlContainer.setInsets(new Insets3f(1f, 5f, 1f,5f));
        return controlContainer;
    }

As you can see i add a panel to display the image inside the container.
Now the thing is resizing the controlImage as i do now is probably not the way to go.
I thought i could get the size of my TabbedPanel in order to fit properly. But the getting the size of the TabbedPanel with .getSize() only returns (0.0,0.0,0.0) which is kinda strange to me.
Is there a way to get the acutal size of the TabbedPanel and then use this information to scale my picture accordingly?
Right now it looks smth. like this:

image
image762×650 149 KB

2

A panel has no size until it has been placed in the scene or a layout. If it’s placed in a layout then the layout will control the size based the panel’s preferred size. If it’s placed directly into the scene (guiNode/whatever) then the size will be directly determined by its preferred size.

So if you want some thing to be a specific size then set it’s preferred size and that will prevent it from calculating such.

In your case, if you want the TabbedPanel to be a particular size then set its preferred size. (Perhaps calculated based on its current preferred size or whatever.)

At that point, you could use a regular QuadBackgroundComponent instead of an IconComponent… then it will stetch automatically (though would lose its aspect ratio).

Alternately, you could use the IconComponent with scaling of 1 as you start with. Then ask the TabbedPanel what it’s preferred size is, decide how much bigger you would like it to be, then set the icon scale: controlImage.setIconScale(thatScale);

Note: if you use a Label instead of a Panel for “controlPanelImage” then you can call setIcon() instead of setBackground().

…it’s not a huge deal but sometimes it’s nice to be able to still have a separate background and border.

Edit: note that IconComponent by default will set itself to the native size of the image. So unless you want weird stretching on purpose, then setIconScale() is generally the better bet. setImageSize() is useful when you want automatic/abnormal/non-uniform scaling to fit some specific UI need and don’t want to calculate it. For example, ensuring an icon is 64x64 regardless of the image size or aspect.