Window help (ignore previous thread)

[Arjay]

I've been trying for hours. What displays for one screen size correctly displays incorrectly for another screen size. I respect everyone's patience but I just need one final bit of help, otherwise I still have the same issue I came in here with. Thanks so far.

You need to set your values based on a percentage of the screen size rather than hardcoded values.

So rather than a button starting from x pixels from the left you need to start the button x percentage of the width from the left (this will give you the correct ratio for a given resolution).

[windowsxyz]

You need to set your values based on a percentage of the screen size rather than hardcoded values.

So rather than a button starting from x pixels from the left you need to start the button x percentage of the width from the left (this will give you the correct ratio for a given resolution).

Yes sounds as if it would work, but how? I have screen size width and height in variables W and H. But how do I calculate this? Thanks.

[Igor Vartanov]

BITMAP bm = {0};

. . 

    HBITMAP hbm = (HBITMAP) LoadImageW(0, L"picture.bmp",IMAGE_BITMAP, 0, 0, LR_CREATEDIBSECTION|LR_LOADFROMFILE);
    GetObject((HGDIOBJ)hbm, sizeof(bm), &bm);

    // bm.bmWidth
    // bm.bmHeight

You have your original bitmap's Width and Height. You have your desktop W and H. Now you can determine stretch ratios per axis.

[windowsxyz]

BITMAP bm = {0};

. . 

    HBITMAP hbm = (HBITMAP) LoadImageW(0, L"picture.bmp",IMAGE_BITMAP, 0, 0, LR_CREATEDIBSECTION|LR_LOADFROMFILE);
    GetObject((HGDIOBJ)hbm, sizeof(bm), &bm);

    // bm.bmWidth
    // bm.bmHeight

You have your original bitmap's Width and Height. You have your desktop W and H. Now you can determine stretch ratios per axis.

Width = 900
Height = 500

The above is for the original window size (before being made full screen) and the bitmap.

How do I use what you posted sorry?

[Igor Vartanov]

The picture from your archive:

General
Complete name                            : J:\Temp\50\picture.bmp
Format                                   : Bitmap
File size                                : 384 KiB

Image
Format                                   : RGB
Width                                    : 1 024 pixels
Height                                   : 768 pixels
Color space                              : RGB
Bit depth                                : 8 bits

And what I posted is the programmatic way how to find the values.

[windowsxyz]

The picture from your archive:

General
Complete name                            : J:\Temp\50\picture.bmp
Format                                   : Bitmap
File size                                : 384 KiB

Image
Format                                   : RGB
Width                                    : 1 024 pixels
Height                                   : 768 pixels
Color space                              : RGB
Bit depth                                : 8 bits

And what I posted is the programmatic way how to find the values.

// bm.bmWidth
// bm.bmHeight

^ Use the above to get W and H in pixels. Next make window full screen and get the W and H in pixels again? How would I then calculate where everything needs to move to? How would I move everything if it's done in pixels not coordinates?

I hate asking for code as it's being spoonfed but for my level this it too advanced and I do not believe I'll be able to resolve this myself yet, sorry.

[2kaud]

In your code in post #24 you create your initial window of size 900x500. Lets call these initw and inith. You then create an OK button at (855, 219) with a size 30x21. Lets call these okx, oky and okw, okh.

When the main window is resized let the size of the new main window be neww and newh. Let the new position of the OK button be newokx, newoky and the new size of the OK button be newokw, newokh.

What you need to do is to define newokx, newoky, newokw and newokh in terms of initw, inith, neww, newh, okx, oky, okw, okh (ie define equations for newokx etc) - which is pure mathematics. Once you have these equations, the programming is easy.

[windowsxyz]

In your code in post #24 you create your initial window of size 900x500. Lets call these initw and inith. You then create an OK button at (855, 219) with a size 30x21. Lets call these okx, oky and okw, okh.

When the main window is resized let the size of the new main window be neww and newh. Let the new position of the OK button be newokx, newoky and the new size of the OK button be newokw, newokh.

What you need to do is to define newokx, newoky, newokw and newokh in terms of initw, inith, neww, newh, okx, oky, okw, okh (ie define equations for newokx etc) - which is pure mathematics. Once you have these equations, the programming is easy.

Yes the problem is how do I calculate this? I'm horrible at maths. Please someone post a solution, this is harder then I was ever expecting GUI creation to be.

[Igor Vartanov]

Yes the problem is how do I calculate this? I'm horrible at maths.

Sorry, I don't think we could help you with this, as you need to be good at least to move on.

[2kaud]

In your example program change the initial main window size from 900x500 to say 600x300. Manually hard code the position & size of the controls so that they are correct. Then change the main window size to 1024x768 and again manually hard code the position & size of the controls so that they are in the right position. For the two sizes of the main window post the corresponding values you're used for the controls.

[windowsxyz]

900x500:

     textbox = CreateWindowA("EDIT", "", WS_VISIBLE | WS_CHILD | WS_BORDER, 694, 219, 159, 21, hwnd, NULL, NULL, NULL); 
     button = CreateWindowA("BUTTON", "OK", WS_CHILD | WS_VISIBLE | BS_TEXT | WS_TABSTOP | BS_NOTIFY | WS_CLIPCHILDREN, 855, 219, 30, 21, hwnd, (HMENU) 1, NULL, NULL);

600x300 (I had to make the textbox so small that it is no longer able to accept the correct amount of characters - unlikely a computer screen will be this size though):

     textbox = CreateWindowA("EDIT", "", WS_VISIBLE | WS_CHILD | WS_BORDER, 465, 132, 90, 18, hwnd, NULL, NULL, NULL); 
     button = CreateWindowA("BUTTON", "OK", WS_CHILD | WS_VISIBLE | BS_TEXT | WS_TABSTOP | BS_NOTIFY | WS_CLIPCHILDREN, 557, 132, 30, 18, hwnd, (HMENU) 1, NULL, NULL);

1024x768 (this window was so big it went too far down my screen, however I was able to position the button and edit in the place I wanted them):

     textbox = CreateWindowA("EDIT", "", WS_VISIBLE | WS_CHILD | WS_BORDER, 797, 333, 159, 21, hwnd, NULL, NULL, NULL); 
     button = CreateWindowA("BUTTON", "OK", WS_CHILD | WS_VISIBLE | BS_TEXT | WS_TABSTOP | BS_NOTIFY | WS_CLIPCHILDREN, 958, 333, 30, 21, hwnd, (HMENU) 1, NULL, NULL);

[Igor Vartanov]

900 / 694 = 1.296829971181556
600 / 465 = 1.290322580645161
1024 / 797 = 1.284818067754078

500 / 219 = 2.28310502283105
300 / 132 = 2.272727272727273
768 / 333 = 2.306306306306306


Still don't see anything common in that?

[2kaud]

As Ignor notes in post #42 there is currently no common ratio. So now adjust the size/positions of the controls so that the calculations shown by Ignor produce a similar result for both controls for both size and position. The controls may not now be exactly where you want them but they should be very near. This will then give the ratios that can be used in the calculations.

PS If the required ratios cannot be established, then a fall-back position would be simply to have a table that states the size/position of the controls for specified sizes of main window. When the main window is resized then the appropriate entry for the controls sizes and positions is found from the table.

[Arjay]

PS If the required ratios cannot be established, then a fall-back position would be simply to have a table that states the size/position of the controls for specified sizes of main window. When the main window is resized then the appropriate entry for the controls sizes and positions is found from the table.

The positions should end up close enough using ratios. Otherwise it would be a nightmare to maintain a table of possible resolutions.

To figure out the ratio, start by doing this for one button in one direction (i.e. the x-axis). Position the button 10 percent of the width starting from the left. If the screen width is 1024, the x starting position will be102 (102.4 truncated to an integer). If the screen width is 900, the starting position is 90. Look up in google for the formula for the code to take a percentage for a number if you don't know it. Once you get it working for one button in the x direction, test it width various resolutions, and when you are happy (perhaps 9.5% needs to be used to get the best look over all resolutions), then do the same for the y direction on the button. After that, do other buttons and controls.

[Arjay]

Btw, to help reduce the number of calculations, I would keep the widths and heights of the buttons constant. I would make constant variables for the button widths and heights and use the ratios calculations for the starting x,y position then add the button width,height constants to get the ending x,y positions.