Resize image while keeping aspect ratio

Troubleshooting gui
1

Hello all,



How do I do to resize an image and keep the aspect ratio?



Inset property doesn’t keep the aspect ratio and imageMode only cuts some parts of the image that aren’t affected by the resize.



I have tried to calculate this by myself but when it comes to resizing on a panel that isn’t a square. Any help or links?

2

I couldn’t find a way to do this either. If you are creating the dimensions from java code then its pretty simple:



imageRatio = ((float)imageHeight) / imageWidth;



newWidth = newHeight * imageRatio;



or



newHeight = newWidth / imageRatio;




  • and / might be the wrong way around, cba to check them right now.
3

I’m trying to do it in the xml, with percentages, inside a rectangle (not a square).



I’ll post a question on stack overflow. It’s a math problem after all.

4

You need to include the screen aspect ratio into your calculation as well then.



You won’t be able to do it with percentages though

  1. You don’t have enough accuracy that way (at 1600*1200 each % point is 16 or 12 pixels)
  2. There is no way to do it directly in the XML. You could provide a method in the screen controller to do the calculation for you though and then use that from your XML.
5

XML file can use Java methods?



I thought it could only load the xml and then make changes to the elements.

6

Read the nifty manual :wink:



You can do callbacks to the screen controller.

7

That’s what I’ve been doing, but it seems I still have a long way ahead of me.



Oh well, just have to start fresh again tomorrow but thanks for the help.

8

Page 18.

9

Thank you so much. The information was there of course.



In case anyone needs this, I’ll leave the solution here.

Since it’s such a common problem maybe it could be in the docs? Tell me where if anyone thinks I should add.



XML:

[xml]<image id=“wasdImage” filename=“Interface/image.png” width="${CALL.getWidthPx()}" height="${CALL.getHeightPx()}"/>[/xml]



Screen controller:

[java] public String getWidthPx() {

float imageRatio = IMAGE_WIDTH / IMAGE_HEIGTH;

// calc desired pixels

float availableHeight = (float) (screenHeight * IMAGE_HEIGHT_SPACE_PROPORTION); // % of screen height space for this panel

int newWidth = (int) (availableHeight * imageRatio);

System.out.println(“new width:”+newWidth);

return newWidth+“px”;

}



public String getHeightPx() {

// calc desired pixels

int availableHeight = (int) (screenHeight * IMAGE_HEIGHT_SPACE_PROPORTION);

System.out.println(“new height:”+availableHeight);

return availableHeight+“px”;

}[/java]

1 Like