Improvements to `OptionsMenu.wnd` #2567

DevGeniusCode · 2024-12-13T09:18:30Z

Pull Request: Improvements to `OptionsMenu.wnd`

Summary

This PR introduces initial improvements to the OptionsMenu.wnd file, focusing on symmetry and visual organization of UI elements. The goal is to enhance the layout and readability. Future work may include improving the color scheme for better aesthetics.

Questions and Considerations

1. Reorganizing the File Structure

I noticed that some controls are not aligned with their expected hierarchy in the file (e.g., not grouped under their logical containers).

Is it acceptable to reorganize the structure for clarity, or is there a preference to maintain the original order for legacy reasons?

2. Unused or Hidden Controls

There are controls in the file that do not seem to be visible in the UI or linked to any current functionality. Examples include:
(Edit: A separate issue has now been opened for this topic #2569 )

NAME = "OptionsMenu.wnd:RadioMedium";
TEXT = "GUI:MouseType";
NAME = "OptionsMenu.wnd:ComboBoxAntiAliasing";
NAME = "OptionsMenu.wnd:CheckLanguageFilter";
NAME = "OptionsMenu.wnd:ButtonKeyboardOptions";
NAME = "OptionsMenu.wnd:CheckBoxSaveCamera";
NAME = "OptionsMenu.wnd:CheckBoxUseCamera";
NAME = "OptionsMenu.wnd:CheckBoxDrawAnchor";
NAME = "OptionsMenu.wnd:CheckBoxMoveAnchor";

Are these controls remnants of removed features, or do they serve a purpose that is not immediately apparent?
Should they be documented, removed, or commented out to clarify their status?

3. Documentation

Would it be acceptable to add comments or documentation within the file for better maintainability? This could help future contributors understand the purpose and functionality of each control.

Before and After (getting updated)

Main Options win

Before:

After:

DevGeniusCode · 2024-12-13T09:31:09Z

I have adjusted the positions of all controls to use consistent and logical values based on the 800x600 resolution. This ensures a more structured and organized layout, making the interface easier to maintain and visually cohesive.

For example, vertical spacing between controls in sub-windows is now consistent (e.g. to a fixed value of 5 units across all controls), and alignment has been improved for better symmetry.

Below is a preview showcasing the updated layout:

…s window

DevGeniusCode · 2024-12-13T12:27:00Z

Update

Fixed the layout of the Advanced Display Settings window as part of improving the overall symmetry and organization.
This update addresses issue Graphics menu UI #2566, specifically resolving the second part of the issue.

Also, I noticed the following control:
NAME = "OptionsMenu.wnd:CheckUnlockFPS";
Can anyone clarify the purpose of this element and whether it should be included in the UI?

Advanced Display Settings win

Before:

After:

xezon · 2024-12-13T19:36:22Z

Nice effort. Correcting the positioning is very nice.

This pull is still marked as draft, but here are some notes:

Options menu:

The thin line under "OPTIONS" does not touch the edges.
The sliders for AUDIO OPTIONS are shorter than before, and there is some empty space now.
There is empty space in the DISPLAY OPTIONS, as per original. Maybe something can be done?
CONTROL OPTIONS and NETWORK OPTIONS headers have varying background layout sizes.
"Online IP:" text might be tight for French and Russian (*1). Consider giving it more space.
Space to edges in Network Options is a bit tight maybe.
Maybe it makes sense to swap the boxes and labels in the NETWORK OPTIONS for cleaner visual? Would require to remove the colons in the texts.
Centering the OPTIONS header text is maybe nice, but I recommend to hold off with that for now and only center the header texts for all Windows in one go, because ideally it is applied consistently.

(*1)

GUI:OnlineIPAddresses
US: "Online IP:"
DE: "Online-IP:"
FR: "IP distante :"
ES: "IP Online:"
IT: "IP online:"
KO: "온라인 IP:"
ZH: "線上IP："
BP: "IP Online:"
PL: "Adres IP:"
RU: "IP Интернета:"
AR: "Online IP:"
UK: "Online IP:"
END

Advanced Options menu:

Thin lines under headers do not touch the edges.
TEXTURE RESOLUTION and PARTICLE CAP texts do not have consistent background layout sizes or position.
The sliders are shorter than originally. Is there a reason for that?
The intention of centering Slider texts is good, but it still looks strange in a way. I do not have better ideas.
Same as No 8 in Options menu.

Consideration

To create Control Bar Pro, we used mockup images to draft the layouts. This helped a lot to create consistent visuals across window elements.

3-4 years ago I did draft a few Menu mockups, but never continued that effort. Perhaps it would be worthwhile to draft mockups for all game screens. It can help to achieve truly consistent layouts and styles. But it needs to be catered to specific aspect ratio. Control Bar Pro catered to 16:9 (1920x1080). Original game caters to 800x600, which obviously is severely outdated, but we need to support this to preserve original capabilities.

I can upload these mockups if you are interested.

It does not need to go into this direction, but it possibly can - if it is good.

xezon · 2024-12-13T19:49:30Z

Please prefer uploading JPG over PNG for complex images like this. PNG is good for images with simple shapes. JPG is better for complex images.

Answers to questions:

Reorganizing the File Structure
I noticed that some controls are not aligned with their expected hierarchy in the file (e.g., not grouped under their logical containers). Is it acceptable to reorganize the structure for clarity, or is there a preference to maintain the original order for legacy reasons?

I do not understand. Can you give examples?

Unused or Hidden Controls
There are controls in the file that do not seem to be visible in the UI or linked to any current functionality. Are these controls remnants of removed features, or do they serve a purpose that is not immediately apparent? Should they be documented, removed, or commented out to clarify their status?

I suggest to test if they do anything. If they do nothing, leave them hidden. If they do something useful, can show them.

Documentation
Would it be acceptable to add comments or documentation within the file for better maintainability? This could help future contributors understand the purpose and functionality of each control.

As far as I know it is not possible to add comments to WND. It is a generated format that has strict syntax and no comments. We can however add comments if we strip them out before build with Mod Builder. We currently do not do this, but it should be possible. It would require a change in ModBundleCoreItems.json, adding a "deleteComments": ";" or similar to the "CoreWindow" bundle. Comments are then stripped out on build before the game loads the WND.

DevGeniusCode · 2024-12-13T21:06:22Z

Thank you for the valuable feedback! I really appreciate the suggestions, and it’s precisely why I marked this pull request as a draft—to get input and better understand the community’s direction before submitting a finalized proposal.

Feedback Notes and My Responses:

The thin line under "OPTIONS" does not touch the edges.

This was a design choice for the headers, but I will revert it for consistency.

The sliders for AUDIO OPTIONS are shorter than before, and there is some empty space now.

Fixed.

There is empty space in the DISPLAY OPTIONS, as per original. Maybe something can be done?

I propose moving the ComboBox to the right of the labels, similar to how "Online IP:" is structured. This could improve the layout.

CONTROL OPTIONS and NETWORK OPTIONS headers have varying background layout sizes.

*"Online IP:" text might be tight for French and Russian (1). Consider giving it more space.
Adjusted to provide more space.

Space to edges in Network Options is a bit tight maybe.

Maybe it makes sense to swap the boxes and labels in the NETWORK OPTIONS for cleaner visual? Would require to remove the colons in the texts.

Done and fixed.

Centering the OPTIONS header text is maybe nice, but I recommend holding off with that for now and only centering the header texts for all Windows in one go, because ideally it is applied consistently.

I'd appreciate guidance on how to implement this consistently. Currently, there is a STATICTEXTDATA = CENTERED: 1; definition for the headers. If we establish a universal rule for centering header texts, it seems this individual setting might override it (if it is set to 0). How should this be approached technically to ensure consistent behavior?

Advanced Options menu:

Thin lines under headers do not touch the edges.

TEXTURE RESOLUTION and PARTICLE CAP texts do not have consistent background layout sizes or position.

Fixed.

The sliders are shorter than originally. Is there a reason for that?

The intention of centering Slider texts is good, but it still looks strange in a way. I do not have better ideas.

The shorter sliders are intentional. Following point 4, I divided the display into two sections, ensuring the sliders start and end in the center of their section. The text is also centered within its respective section.

Same as No 8 in Options menu.

Same :).

Additionally, I'd like to mention that determining positions and reducing empty spaces is challenging because the text length in different languages must be taken into account.

I can upload these mockups if you are interested.

I’d love to see the mockups; they might inspire further improvements.

I do not understand. Can you give examples?

For instance, sliders like FX and Music are located outside the container for AUDIO.

Also, I’ve been using WNDEdit to make editing these files more efficient and precise.

One question: Is there a community-agreed palette of colors and their corresponding codes? I’d like to apply a consistent palette across menus if possible.

Thank you again for the guidance and support! 🙏

…minor fix

DevGeniusCode · 2024-12-14T00:13:00Z

Update to the Main Options Window

Made corrections and improvements to the layout and functionality of the main options window.
Added documentation using ;, and it appears that this does not interfere with compilation.

DevGeniusCode · 2024-12-14T00:41:35Z

Update to the Advanced Options Window

Fixed various visual.
Did not revert the layout of TEXTURE RESOLUTION and PARTICLE CAP due to the lack of a better alternative.

DevGeniusCode · 2024-12-14T03:05:00Z

Issue: ComboBox Menu Exceeds Main Container Bounds is Not Working

Description: The ComboBox for selecting the LAN IP in the Network Options menu has a dropdown menu that extends beyond the bounds of the main container.
Problem: Items outside the main container cannot be selected. Clicking on these items triggers buttons located beneath the dropdown, outside the main container.

EDIT: The issue was fixed by limiting the dropdown to only 2 items, keeping it within the bounds of the main container, using a scroll bar.

… to 2 items

xezon · 2024-12-15T10:40:29Z

There is empty space in the DISPLAY OPTIONS, as per original. Maybe something can be done?
I propose moving the ComboBox to the right of the labels, similar to how "Online IP:" is structured. This could improve the layout.

To me it looked better before, because the items aligned with the audio items.

I'd appreciate guidance on how to implement this consistently. Currently, there is a STATICTEXTDATA = CENTERED: 1; definition for the headers. If we establish a universal rule for centering header texts, it seems this individual setting might override it (if it is set to 0). How should this be approached technically to ensure consistent behavior?

We cannot change the capabilities before Thyme is ready. My suggestion simply is to not enable the CENTERED titles yet, because it would require to center all titles for consistent look. But this change only caters to Options Menu. So my suggestion is to hold off with CENTERED:1 until it can be done on all windows if we so desire. (Having it in a single change also makes it easier to revert in git)

The shorter sliders are intentional. Following point 4, I divided the display into two sections, ensuring the sliders start and end in the center of their section. The text is also centered within its respective section.

Yes, but is this necessary? To me it looks like there is total freedom in length.

Additionally, I'd like to mention that determining positions and reducing empty spaces is challenging because the text length in different languages must be taken into account.

Yes. Empty space is ok, I just thought I mention it for consideration.

I’d love to see the mockups; they might inspire further improvements.

Menu mockup samples here:
https://github.com/TheSuperHackers/GeneralsMenusRemastered/tree/main/MenusRemasteredZH/Design/Mockup

Full Control Bar Pro mockups here:
https://github.com/TheSuperHackers/GeneralsControlBar/tree/main/ControlBarProZH/Design/Mockup

For instance, sliders like FX and Music are located outside the container for AUDIO.

The sliders are in AUDIO OPTIONS.

Also, I’ve been using WNDEdit to make editing these files more efficient and precise.

Personally I have not been using WNDEdit for any WND edits, because it does not work with some of the files and seems impossible for the ControlBar.wnd.

One question: Is there a community-agreed palette of colors and their corresponding codes? I’d like to apply a consistent palette across menus if possible.

I briefly looked at menu colors with #686 (comment) but have not driven it to any results.

What we have done for Control Bar Pro faction colors is creating color palettes with the existing reference material like outlined in this tutorial:
https://www.youtube.com/watch?v=ZUp4g-iDq_k

The color palettes were then added to:
https://github.com/TheSuperHackers/GeneralsControlBar/tree/main/ControlBarProZH/Design/Colors

And this is what we mostly used.

For history on Control Bar redesign effort you can look at this topic:
https://www.gamereplays.org/community/index.php?showtopic=1048029

Significant effort was spend with mockups and designs to figure out where we want to go before actually committing to it.

DevGeniusCode · 2024-12-16T00:05:38Z

A proposal for a new layout of the options menu to include additional controls, such as camera controls #2569 (comment).

The window is shorter in length, so you can extend it and add more few controls if needed.

xezon · 2024-12-16T22:34:23Z

It is a decent direction. Perhaps elements are a little bit too cramped. I think it would be good to design the GUI with element spacings that are consistent across all windows.

Perhaps the 4 sub sections in the OPTIONS menu could be sized with identical dimensions - if they contain about the same amount of elements.

DevGeniusCode · 2024-12-17T07:25:03Z

Version 3 Update:

Here is the layout after adding the additional controls.

Issues:

In the 800x600 resolution, the sentence length in the "Use camera" control overflows.
There is a general issue with text indentation—every text appears to be indented by a single character. I haven't found a way to disable this indentation yet. So far, I've adjusted the position a few pixels backwards as a workaround, but this breaks in other resolutions. Without fixing the indentation, the layout looks good at 1920x1080 resolution.

Questions:

Should modify the font template so that text inside the subwindow is regular text instead of a title? (Similar to the Network options), (this also solves the problem of text length in Use camera).
Should remove the colons (:) from Online IP, similar to how it's done for Brightness and Detail?
Should "Detail" be replaced with "Graphics"?

800x600

1080x1920

DevGeniusCode · 2024-12-18T01:30:33Z

Reorganizing the File Structure
I noticed that some controls are not aligned with their expected hierarchy in the file (e.g., not grouped under their logical containers). Is it acceptable to reorganize the structure for clarity, or is there a preference to maintain the original order for legacy reasons?

I do not understand. Can you give examples?

For instance, sliders like FX and Music are located outside the container for AUDIO.

The sliders are in AUDIO OPTIONS.

Okay, I saw your YouTube video and realized I wasn't clear, I mean the wnd file itself

Here is an example of how the file should be organized for a window and controls in the window (children of the main window)

WINDOW
  WINDOWTYPE = USER;
	... rest of window options
  CHILD
  WINDOW ; child
    WINDOWTYPE = CHEAKBOX;
	... rest of window child options
  END
END
ENDALLCHILDREN

Here is an example of how it is in practice, you can see that a control that should be inside a window appears outside its block, and is now not a child of it but a sibling.

WINDOW
  WINDOWTYPE = USER;
  ... rest of window options
END
WINDOW ; child
   WINDOWTYPE = CHEAKBOX;
   ... rest of window 'child' options
END

In our case, the FX and Music sliders do not appear in their correct place in the code lines, but later in the file. They are not 'children' of the audio window, but of the main menu.

Is it possible to reorganize the lines of code?

Also, delete irrelevant lines, for example, there is duplicate code for the main menu background and two backgrounds are actually loaded, you can see an example below.

I also found that comments using ; are not problematic.

Here's how the hierarchy looks now and how it should be:
Use the colors of the rectangles to see the reorganization of the items.

DevGeniusCode added 5 commits December 13, 2024 10:58

Fix symmetry and reorganize controls in Network Options subwindow

739fa8e

Fix symmetry in control options subwindow

214ab64

Fix symmetry in Display Options subwindow

eac9e1d

Fix symmetry in Audio Options subwindow

da77349

Fix symmetry in main window and headers

d554d75

DevGeniusCode added 4 commits December 13, 2024 14:16

Fix symmetry in Advance Options window and headers

4818398

Fix symmetry in dvancedOptionsToggleOnOff subwindow in Advance Option…

246ab68

…s window

Fix symmetry in TEXTURE RESOLUTION subwindow in Advance Options window

9f102de

Fix symmetry in PARTICLE CAP subwindow in Advance Options window

bfe5e41

xezon added Minor Severity: Minor < Major < Critical < Blocker GUI For graphical user interface labels Dec 13, 2024

DevGeniusCode added 6 commits December 14, 2024 00:03

Documentation

253ad89

v2 Fix symmetry and reorganize controls in Network Options subwindow

19f8c68

v2 Fix symmetry and reorganize controls in Display Options subwindow

6cf0763

v2 Fix symmetry and reorganize controls in Control Options subwindow

639a1fc

v2 Fix symmetry and reorganize controls in Audio Options subwindow & …

ca6f23e

…minor fix

v2 Removed colons to match the new layout of controls in Network Options

417f043

v2 Fix symmetry in Advance Options window

ace2457

DevGeniusCode mentioned this pull request Dec 14, 2024

Hidden Controls in the Options Menu #2569

Open

Fix ComboBox dropdown overflow in Network Options menu by limiting it…

e7ea8ff

… to 2 items

DevGeniusCode added 3 commits December 17, 2024 09:21

v3 Option menu Layout update

e30956b

v3 Advanced Options window Layout update

62daff8

v3 Bringing back buttons that were hidden

b24a4e2

v3 fix Button height

b16a042

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improvements to `OptionsMenu.wnd` #2567

Improvements to `OptionsMenu.wnd` #2567

DevGeniusCode commented Dec 13, 2024 •

edited

Loading

DevGeniusCode commented Dec 13, 2024 •

edited

Loading

DevGeniusCode commented Dec 13, 2024 •

edited

Loading

xezon commented Dec 13, 2024 •

edited

Loading

xezon commented Dec 13, 2024

DevGeniusCode commented Dec 13, 2024 •

edited

Loading

DevGeniusCode commented Dec 14, 2024 •

edited

Loading

DevGeniusCode commented Dec 14, 2024

DevGeniusCode commented Dec 14, 2024 •

edited

Loading

xezon commented Dec 15, 2024

DevGeniusCode commented Dec 16, 2024 •

edited

Loading

xezon commented Dec 16, 2024

DevGeniusCode commented Dec 17, 2024 •

edited

Loading

DevGeniusCode commented Dec 18, 2024 •

edited

Loading

Improvements to OptionsMenu.wnd #2567

Are you sure you want to change the base?

Improvements to OptionsMenu.wnd #2567

Conversation

DevGeniusCode commented Dec 13, 2024 • edited Loading

Pull Request: Improvements to OptionsMenu.wnd

Summary

Questions and Considerations

1. Reorganizing the File Structure

2. Unused or Hidden Controls

3. Documentation

Before and After (getting updated)

Main Options win

Before:

After:

DevGeniusCode commented Dec 13, 2024 • edited Loading

DevGeniusCode commented Dec 13, 2024 • edited Loading

Update

Advanced Display Settings win

Before:

After:

xezon commented Dec 13, 2024 • edited Loading

Options menu:

Advanced Options menu:

Consideration

xezon commented Dec 13, 2024

DevGeniusCode commented Dec 13, 2024 • edited Loading

Feedback Notes and My Responses:

DevGeniusCode commented Dec 14, 2024 • edited Loading

Update to the Main Options Window

DevGeniusCode commented Dec 14, 2024

Update to the Advanced Options Window

DevGeniusCode commented Dec 14, 2024 • edited Loading

xezon commented Dec 15, 2024

DevGeniusCode commented Dec 16, 2024 • edited Loading

xezon commented Dec 16, 2024

DevGeniusCode commented Dec 17, 2024 • edited Loading

Version 3 Update:

Issues:

Questions:

800x600

1080x1920

DevGeniusCode commented Dec 18, 2024 • edited Loading

Improvements to `OptionsMenu.wnd` #2567

Improvements to `OptionsMenu.wnd` #2567

DevGeniusCode commented Dec 13, 2024 •

edited

Loading

Pull Request: Improvements to `OptionsMenu.wnd`

DevGeniusCode commented Dec 13, 2024 •

edited

Loading

DevGeniusCode commented Dec 13, 2024 •

edited

Loading

xezon commented Dec 13, 2024 •

edited

Loading

DevGeniusCode commented Dec 13, 2024 •

edited

Loading

DevGeniusCode commented Dec 14, 2024 •

edited

Loading

DevGeniusCode commented Dec 14, 2024 •

edited

Loading

DevGeniusCode commented Dec 16, 2024 •

edited

Loading

DevGeniusCode commented Dec 17, 2024 •

edited

Loading

DevGeniusCode commented Dec 18, 2024 •

edited

Loading