makes various uis more compatible with high dpi monitors, adds a preference for smaller windows (#90418)

## About The Pull Request
various uis (tgui-say, vv, player panel, anything using
`/datum/browser`) would not correct for dpi. they now do

we also have a preference to allow you to have smaller windows that are
zoomed out, instead of larger windows that are not zoomed

#### of note, this does require a small change to the usage of css
viewport units, like `vh` and `vw`. they need to be fed through the
`vp(100vw)` function first. there was only one such unit in the codebase

on 4k monitor with 200% scaling:

fixed (pref on default)

![BiygmRan0QqxOMqL@2x](https://github.com/user-attachments/assets/1bdbc93c-1cd4-4a17-bf18-6cca7a5df032)

pref disabled

![DUWSVJNXt3xuQJEy@2x](https://github.com/user-attachments/assets/1b87ed9e-0498-44c4-ab1b-2c0321e70ce0)


## Why It's Good For The Game
516 fucked with uis again and this unfucks them a bit

## Changelog
🆑
qol: there's a new UI preference called UI scale which allows people
that use windows scaling to have their UIs original size with the
contents zoomed out, instead of the default, which is the UIs being
larger with the contents "normal" size
fix: various UIs did not respect windows scaling, they now do
/🆑

---------

Co-authored-by: harryob <55142896+harryob@users.noreply.github.com>
This commit is contained in:
harry
2025-04-29 17:41:07 -06:00
committed by Shadow-Quill
co-authored by harryob
parent 5785fc15d1
commit 9aefd83689
17 changed files with 136 additions and 36 deletions
+9 -1
View File
@@ -4,10 +4,14 @@
log_admin("[key_name(usr)] checked the player panel.")
var/dat = "<html><head><meta http-equiv='X-UA-Compatible' content='IE=edge' charset='UTF-8'/><title>Player Panel</title></head>"
var/ui_scale = owner.prefs.read_preference(/datum/preference/toggle/ui_scale)
//javascript, the part that does most of the work~
dat += {"
<head>
[!ui_scale && owner.window_scaling ? "<style>body {zoom: [100 / owner.window_scaling]%;}</style>" : ""]
<script type='text/javascript'>
var locked_tabs = new Array();
@@ -328,4 +332,8 @@
</body></html>
"}
usr << browse(dat, "window=players;size=600x480")
var/window_size = "size=600x480"
if(owner.window_scaling && ui_scale)
window_size = "size=[600 * owner.window_scaling]x[400 * owner.window_scaling]"
usr << browse(dat, "window=players;[window_size]")
@@ -114,6 +114,8 @@ ADMIN_VERB_AND_CONTEXT_MENU(debug_variables, R_NONE, "View Variables", "View the
sleep(1 TICKS)
var/ui_scale = prefs?.read_preference(/datum/preference/toggle/ui_scale)
var/list/variable_html = list()
if(islist)
var/list/list_value = thing
@@ -135,6 +137,7 @@ ADMIN_VERB_AND_CONTEXT_MENU(debug_variables, R_NONE, "View Variables", "View the
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>[title]</title>
<link rel="stylesheet" type="text/css" href="[SSassets.transport.get_asset_url("view_variables.css")]">
[!ui_scale && window_scaling ? "<style>body {zoom: [100 / window_scaling]%;}</style>" : ""]
</head>
<body onload='selectTextField()' onkeydown='return handle_keydown()' onkeyup='handle_keyup()'>
<script type="text/javascript">
@@ -303,7 +306,11 @@ datumrefresh=[refid];[HrefToken()]'>Refresh</a>
</body>
</html>
"}
src << browse(html, "window=variables[refid];size=475x650")
var/size_string = "size=475x650";
if(ui_scale && window_scaling)
size_string = "size=[475 * window_scaling]x[650 * window_scaling]"
src << browse(html, "window=variables[refid];[size_string]")
/client/proc/vv_update_display(datum/thing, span, content)
src << output("[span]:[content]", "variables[REF(thing)].browser:replace_span")