ImageView with Lemur

Hi! Still learning Lemur. Can i have some fresh help? Don’t understand how to show nice fitted image container. I read about component layout and IconComponent and still have no idea what should i do, i mean am i need to implement new component like ImageView or i need to use IconComponent.
The problem is lemur using layer based approach that do not looks simillar nor Swing nor JavaFX, so i can’t use my experience to guess what to do.
This is what i need to have:

If picture size is less then center container(i used BorderLayout for base container) it must expands but with saving proportions(like in JavaFX ImageView). If it is larger then center container it should fit inside it with saving proportions. Sorry for my poor english. W8 responces

Really, the only tricky part is maintaining proportions. Else any component with a QuadBackgroundComponent as its background would work for the middle.

The problem with IconComponent is that it will not automatically shrink or grow… but if you already know what size your panel will be top-to-bottom then you can simply set it’s scale to something that works.

so, outer container with a spring grid layout.

First row with a label.

Second row with a label with no text but an IconComponent for its icon, set to the scale that gives you the height you want.

And finally a panel in the third row with whatever you want in it.

Or is the issue that you want this to take up the full screen?

@pspeed Yea, looks like i didn’t understood yet how scaling works in Lemur. There is no issue with full screen, it is all about fit picture without loosing proportions inside some component. As i guess i can use Label with IconComponent inside it? What scale exactly should i set to fit image?
Let me try, then i return with results and questions

Unfortuanly didn’t work as expected. If i set localScale at 0.5f for example component shrinks and shifts to the top… Pretty weird. Maybe it happened cause of in normal scale factor = 1 picture real goes to the top.
What scale should i use to control image size? And if I need to change image at runtime should i recalculate picture component size somehow? Preffered size and size properties are created not for this use case?
Ofc component need to cover all space between top and bottom panels.
Sry for so many questions, it is really hard for me to understand lemur layout managment after swing and javafx :slight_smile:

EDIT: I managed to find that i need to create IconComponent and set it to Label, then use IconComponent.setIconScale() to control picture’s size. Is it right method?

Yep.

The layouts basically ignore Spatial local scale… so if you want to scale the components then you have to use the scale that they provide.

1 Like

Thank u very much. Maybe i need to just extend Label and or watch ur code to implement ImageView component for my needs. Still hope u will find time to complete Lemur docs and append more examples in future to make us happy.:slight_smile:

Till it didn’t happend, some code would help ppl with same problem:

    IconComponent icon = new IconComponent(path_to_ur_image);
    icon.setHAlignment(HAlignment.Center);
    icon.setVAlignment(VAlignment.Center);

    imageLabel.setIcon(icon);
    // take width and height of image
    int w = icon.getImageTexture().getImage().getWidth();
    int h = icon.getImageTexture().getImage().getHeight();
    // to know what axis scale factor is lees
    float scalex = imageLabel.getSize().getX() / w;
    float scaley = imageLabel.getSize().getY() / h;

    // if x factor is less use it, else use x factor
    icon.setIconScale(scalex < scaley ? scalex : scaley);

You shouldn’t need to extend label.

I’m still trying to understand the use-case. Some direction has to decide how big that image is going to be and I don’t understand how you know that size. You say before that it’s not dynamically determined… so I’m confused.

Let me try to explain my use case.
I need functionality that we can call like javafx’s ImageView. It means to have no resizable middle component and pictures inside it. Pictures r dynamically changing and need to be fit inside middle component.
Just smth like image view.

Easiest/safest would be to write your own image component that’s like IconComponent but scales its image dynamically during reshape().

You could also probably hack a component sort of like the DynamicInsetsComponent that made sure to adjust insets in such a way that aspect ratio is maintained for the next layers. If you go that route then you’d just set the image as the background (instead of the icon component)… and set your new AspectMaintainingInsetsComponent as the insetsComponent.

It might even be possible to apply simple patches to IconComponent that allow it to scale up sensibly while still working in all other cases. In which case, I can merge them right to core.

Thats why i asked this question. My fist try was about plays with InsentsComponent, but it didn’t work cause i still far from understand all lemur concepts.
I will try all some cases to find best way. Thank u.