Fix DPI scaling with TGUI, TGUI Say, and Tooltips (#20734)

Got tired of the issues here when working on something else. Ported several PRs from /tg/station to fix DPI scaling issues. This was not a problem before 516, however 516 now respects Window's DPI setting, causing misalignment in several of our UI elements. This PR implements these ~~four~~ ~~five~~ six PRs: https://github.com/tgstation/tgstation/pull/65686 https://github.com/tgstation/tgstation/pull/89994 https://github.com/tgstation/tgstation/pull/90416 https://github.com/tgstation/tgstation/pull/90418 https://github.com/tgstation/tgstation/pull/90796 https://github.com/cmss13-devs/cmss13/pull/8734 ~~Does not include fixes with TGUI-Say. /tg/station refactored TGUI-Say after their port to React before they fixed DPI scaling, and this would be pain to deconstruct to port over to Inferno. Since porting to React is "inevitable", I considered it not worth my time to fix this.~~ Thanks to the assistance of harry, TGUI-Say fixes now included.
2026-08-22 20:43:10 +01:00 · 2025-05-14 12:39:41 +00:00
parent 5b54dd2557
commit 45139cea5c
43 changed files with 1248 additions and 498 deletions
@@ -78,6 +78,8 @@

 	///Hide top bars
 	var/fullscreen = FALSE
+	///Hide status bar (bottom left)
+	var/show_status_bar = TRUE

 	/// our current tab
 	var/stat_tab
@@ -95,3 +97,6 @@
 	var/drag_start = 0
 	///The params we were passed at the start of the drag, in list form
 	var/list/drag_details
+
+	/// The DPI scale of the client. 1 is equivalent to 100% window scaling, 2 will be 200% window scaling
+	var/window_scaling
@@ -405,6 +405,8 @@ GLOBAL_LIST_INIT(localhost_addresses, list(
 	)
 	addtimer(CALLBACK(src, PROC_REF(check_panel_loaded)), 30 SECONDS)

+	INVOKE_ASYNC(src, PROC_REF(acquire_dpi))
+
 	// Initialize tgui panel
 	tgui_panel.initialize()

@@ -701,6 +703,17 @@ GLOBAL_LIST_INIT(localhost_addresses, list(
 	winset(src, "mainwindow", "menu=[fullscreen ? "" : "menu"];is-fullscreen=[fullscreen ? "true" : "false"];titlebar=[fullscreen ? "false" : "true"]")
 	attempt_auto_fit_viewport()

+/client/verb/toggle_status_bar()
+	set name = "Toggle Status Bar"
+	set category = "Preferences.Menu"
+
+	show_status_bar = !show_status_bar
+
+	if (show_status_bar)
+		winset(src, "mapwindow.status_bar", "is-visible=true")
+	else
+		winset(src, "mapwindow.status_bar", "is-visible=false")
+
 /client/verb/toggle_menu()
 	set name = "Toggle Menu"
 	set category = "Preferences.Menu"
@@ -1002,3 +1015,7 @@ GLOBAL_LIST_INIT(localhost_addresses, list(
 	if(stat_panel.is_ready())
 		return
 	to_chat(src, SPAN_DANGER("Statpanel failed to load, click <a href='byond://?src=[REF(src)];reload_statbrowser=1'>here</a> to reload the panel "))
+
+/// This grabs the DPI of the user per their skin
+/client/proc/acquire_dpi()
+	window_scaling = text2num(winget(src, null, "dpi"))
@@ -14,6 +14,8 @@
 	S["tgui_inputs"]			>> pref.tgui_inputs
 	S["tgui_buttons_large"]		>> pref.tgui_buttons_large
 	S["tgui_inputs_swapped"]	>> pref.tgui_inputs_swapped
+	S["tgui_say_light_mode"]	>> pref.tgui_say_light_mode
+	S["ui_scale"]				>> pref.ui_scale

 /datum/category_item/player_setup_item/player_global/ui/save_preferences(var/savefile/S)
 	S["UI_style"]				<< pref.UI_style
@@ -27,6 +29,8 @@
 	S["tgui_inputs"]			<< pref.tgui_inputs
 	S["tgui_buttons_large"]		<< pref.tgui_buttons_large
 	S["tgui_inputs_swapped"]	<< pref.tgui_inputs_swapped
+	S["tgui_say_light_mode"]	<< pref.tgui_say_light_mode
+	S["ui_scale"]				<< pref.ui_scale

 /datum/category_item/player_setup_item/player_global/ui/gather_load_query()
 	return list(
@@ -42,7 +46,9 @@
 				"tooltip_style",
 				"tgui_inputs",
 				"tgui_buttons_large",
-				"tgui_inputs_swapped"
+				"tgui_inputs_swapped",
+				"tgui_say_light_mode",
+				"ui_scale",
 			),
 			"args" = list("ckey")
 		)
@@ -65,6 +71,7 @@
 			"tgui_inputs",
 			"tgui_buttons_large",
 			"tgui_inputs_swapped",
+			"ui_scale",
 			"ckey" = 1
 		)
 	)
@@ -82,7 +89,8 @@
 		"tooltip_style" = pref.tooltip_style,
 		"tgui_inputs" = pref.tgui_inputs,
 		"tgui_buttons_large" = pref.tgui_buttons_large,
-		"tgui_inputs_swapped" = pref.tgui_inputs_swapped
+		"tgui_inputs_swapped" = pref.tgui_inputs_swapped,
+		"ui_scale" = pref.ui_scale
 	)

 /datum/category_item/player_setup_item/player_global/ui/sanitize_preferences()
@@ -110,6 +118,8 @@
 	dat += "<b>TGUI Inputs:</b> <a href='byond://?src=[REF(src)];tgui_inputs=1'><b>[pref.tgui_inputs ? "ON" : "OFF"]</b></a><br>"
 	dat += "<b>TGUI Input Large Buttons:</b> <a href='byond://?src=[REF(src)];tgui_inputs_large=1'><b>[pref.tgui_buttons_large ? "ON" : "OFF"]</b></a><br>"
 	dat += "<b>TGUI Input Swapped Buttons:</b> <a href='byond://?src=[REF(src)];tgui_inputs_swapped=1'><b>[pref.tgui_inputs_swapped ? "ON" : "OFF"]</b></a><br>"
+	dat += "<b>TGUI Say Light Mode:</b> <a href='byond://?src=[REF(src)];tgui_say_light_mode=1'><b>[pref.tgui_say_light_mode ? "ON" : "OFF"]</b></a><br>"
+	dat += "<b>UI Scaling:</b> <a href='byond://?src=[REF(src)];ui_scale=1'><b>[pref.ui_scale ? "ON" : "OFF"]</b></a><br>"
 	dat += "<b>FPS:</b> <a href='byond://?src=[REF(src)];select_fps=1'><b>[pref.clientfps]</b></a> - <a href='byond://?src=[REF(src)];reset=fps'>reset</a><br>"
 	if(can_select_ooc_color(user))
 		dat += "<b>OOC Color:</b> "
@@ -159,6 +169,16 @@
 		pref.tgui_inputs_swapped = !pref.tgui_inputs_swapped
 		return TOPIC_REFRESH

+	else if(href_list["tgui_say_light_mode"])
+		pref.tgui_say_light_mode = !pref.tgui_say_light_mode
+		user.client.tgui_say?.load()
+		return TOPIC_REFRESH
+
+	else if(href_list["ui_scale"])
+		pref.ui_scale = !pref.ui_scale
+		user.client.tgui_say?.load()
+		return TOPIC_REFRESH
+
 	else if(href_list["select_ooc_color"])
 		var/new_ooccolor = input(user, "Choose OOC color:", "Global Preference") as color|null
 		if(new_ooccolor && can_select_ooc_color(user) && CanUseTopic(user))
@@ -31,6 +31,8 @@ GLOBAL_LIST_EMPTY_TYPED(preferences_datums, /datum/preferences)
 	var/tgui_inputs = TRUE
 	var/tgui_buttons_large = FALSE
 	var/tgui_inputs_swapped = FALSE
+	var/tgui_say_light_mode = FALSE
+	var/ui_scale = TRUE
 	//Style for popup tooltips
 	var/tooltip_style = "Midnight"