Resizing a dynamically resizable widget with a fixed aspect ratio?

Question

I've been trying to figure this out for hours. It is a bit tricky to explain but I'll try to explain it.

I'm making a game where I have a Window with 3 panels in it. The 3 panels must always be squares (width same as height). I can figure out the height of the frame to satisfy this constraint given the width.

The tricky part is, I have a table in the game. The table is in the center of the screen. The table's size is proportional to the height of the OS Game Window. This means when the game is resized on the width, the table does not get any smaller and thus the amount of room available to the Window decreases. The window will appear at the bottom left corner.

The Window needs to be as big as possible without touching the table. The distance from the top left of the window to the edge of the Game Window must be the same as the distance from the Top Right of the Window to the edge of the table and is the same distance as the bottom of the OS Game Window to the bottom of the Window.

Here is an example:

In this example, you can see the edge of the table to the right. You can also see the Window with 3 frames and how the distances between the corners are the same (or as close as I could get it).

Given that I know the size of the table and its location, and the width and height of the OS Window how could I get it to do this? I do not necessarily need code or anything, but I'm more likely looking for the main idea on how I could do this mathematically. As you can see in the image, about 15% of the space is padding, I need to be able to have padding so that it does not consume the maximum area.

Thanks

Answer 1

As far as I can tell from your question, you want your window to have same distance from all sides of screen, that means it's always in the center. to be more clear, center of window and center of the screen should both have same coordinates.

window has 3 panels, and all panels are squares with same size, so we can guess window.width is 3 times larger than window.height. you also want some padding, so there is some raw value for both width and height of window. let's say these raw values are equal to 85% of screen width and height respectively. using window.width = 3*window.height we can compute a new value for both width and height of window. the last step is to use minimum value from these generated values for width or height. here is a pseudo code:

 w1 = screen.width * 85%
 h1 = screen.height * 85%
 w2 = h1 * 3
 h2 = w1 / 3

 window.width = min(w1,w2)
 window.height = min(h1,h2)

 alpha = 0.35
 beta  = 0.7

 window.topleft = (screen.width / 2 - window.width * (1-alpha), screen.height / 2 - window.height *(1-beta))
 window.bottomright = (scree.width / 2 + window.width * alpha , screen.height / 2+ window.height *beta)

you need to find some good values for alpha and beta(both are between 0..1), alpha value higher than 0.5 will move window to right, while lower alpha values will result in window to be padded to left. also beta value will determine how much window goes near bottom of screen.