Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow loading screens to set loading box colour #2451

Closed
DarthTealc opened this issue Aug 23, 2024 · 5 comments
Closed

Allow loading screens to set loading box colour #2451

DarthTealc opened this issue Aug 23, 2024 · 5 comments

Comments

@DarthTealc
Copy link

DarthTealc commented Aug 23, 2024

What

Allow loading screens to set the loading box colour

How - for developers

Developers would set a theme-color meta tag on their loading screen eg <meta name="theme-color" content="#FF00FF" />
Developers may choose to use a different colour or image for the loading screen background, it does not have to align with the theme-color.
Developers may additionally use HTML elements behind the expected loading box location to make it look even more integrated, such as a border or drop shadow.

How - for the game

Gmod would look at the page and extract the theme-color. If a valid #RRGGBB colour, Gmod would set the loading box to that colour, and would set the buttons/borders/text to 2 contrasting colours. These contrasting colours are handled by the game to ensure they are readable and that loading pages can't use them to make the box invisible.
If no theme-color or an invalid theme-color is specified, Gmod sticks with the default loading box colours.

Example

(theme-color is indicated for demonstration)
image

Alternative Method

Instead of using a single theme-color metatag with Gmod automatically calculating the 2nd and 3rd colours, developers could instead use gmod-color-a, gmod-color-b, gmod-color-c meta tags. This would allow developers to have more control over the colours.
Example of where the gmod-colors apply

<meta name="gmod-color-a" content="#FF0000" />
<meta name="gmod-color-b" content="#0000FF" />
<meta name="gmod-color-c" content="#00FF00" />

image
Gmod would check to make sure they pass a basic contrast calculation to ensure the status/progress and cancel buttons aren't hidden. If the check fails, Gmod would use the default loading box colours instead.

Accessibility

The basic contrast check would not be accessible for high-contrast users. If a user has high-contrast set in their OS, Gmod would ignore the custom colours and apply hardcoded ones.

@DarthTealc
Copy link
Author

Here's an actual in-game example

I defined these manually, the game would do it at runtime and calculate colours B and C.

"LoadColA" "177 59 249 255" // as if the game had extracted a #b13bf9 theme-color meta tag
"LoadColB" "232 203 255 255" // calculated by game based on A, usually lighter. 
"LoadColC" "28 4 44 255" // calculated by game based on A, usually darker.

After extracting and defining the colours, Gmod would modify Resource/LoadingDialog.res at runtime (done manually for this example by editing Resource/LoadingDialogNoBanner.res)
and would add the following properties for the following fields

LoadingDialog
   "infocus_bgcolor_override" "LoadColA"
InfoLabel
   "fgcolor_override" "LoadColB"
progress
   "fgcolor_override" "LoadColB"
   "bgcolor_override" "LoadColC"
CancelButton
   "defaultFgColor_override" "LoadColC"
   "defaultBgColor_override" "LoadColB"
   "armedFgColor_override" "LoadColB"
   "armedBgColor_override" "LoadColC"

The result looks like this in-game
image

@DarthTealc
Copy link
Author

I've updated the original comment with an alternative method. Instead of only allowing developers to specify a single theme-color, developers could specify all three colours. Gmod would run a very basic contrast check to make sure the status/button is visible to people with standard vision. High-contrast users would get the default colours. See the original comment "Alternative Method" section for more detail.

(don't use these colours)
image

@DarthTealc
Copy link
Author

Here's a few examples of loading screens. Demos thanks to physgun and gmod-lsm.

image
image
image
image
image

@DarthTealc
Copy link
Author

I've replaced this suggestion with one that might be easier to implement, easier for servers to use, and less able to be abused. Please see #2557.

@DarthTealc DarthTealc closed this as not planned Won't fix, can't repro, duplicate, stale Dec 11, 2024
@EvanPole
Copy link

@robotboy655

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants