Fix scaling issues on HDPI monitors.

PiperOrigin-RevId: 857024487
Change-Id: I7d3db9ff754374053bcd33ba93c7466253afb58c

src/experimental/platform/gui.cc

@@ -30,12 +30,6 @@
 
 namespace mujoco::platform {
 
-static constexpr int kToolsBarHeight = 48;
-static constexpr int kStatusBarHeight = 32;
-static constexpr float kOptionsRelWidth = 0.22f;
-static constexpr float kInspectorRelWidth = 0.22f;
-static constexpr float kStatsRelHeight = 0.3f;
-
 static ImVec2 GetFlexElementSize(int num_cols) {
   const float width = (ImGui::GetContentRegionAvail().x / num_cols) -
                       ImGui::GetStyle().FramePadding.x * 2;
@@ -205,6 +199,13 @@ void SetupTheme(GuiTheme theme) {
 
 ImVec4 ConfigureDockingLayout() {
   ImGuiViewport* viewport = ImGui::GetMainViewport();
+  const float scale = ImGui::GetWindowDpiScale();
+
+  const float kOptionsRelWidth = 0.22f;
+  const float kInspectorRelWidth = 0.22f;
+  const float kStatsRelHeight = 0.3f;
+  const float kToolsBarHeight = 48.f * scale;
+  const float kStatusBarHeight = 32.f * scale;
 
   const ImVec2 dockspace_pos{
       viewport->WorkPos.x,

src/experimental/platform/window.cc

@@ -40,16 +40,23 @@ extern void* GetNativeWindowOsx(void* window);
 
 namespace mujoco::platform {
 
-static void InitImGui(SDL_Window* window, bool load_fonts, bool build_fonts) {
+static void InitImGui(SDL_Window* window, float content_scale, bool load_fonts,
+                      bool build_fonts) {
   ImGui::CreateContext();
 
   ImGuiIO& io = ImGui::GetIO();
   io.BackendFlags |= ImGuiBackendFlags_RendererHasTextures;
   io.ConfigFlags |= ImGuiConfigFlags_DockingEnable;
   io.IniFilename = nullptr;
+  io.ConfigDpiScaleFonts = true;
+  io.ConfigDpiScaleViewports = true;
   ImGui::StyleColorsDark();
   ImGui_ImplSDL2_InitForOther(window);
 
+  ImGuiStyle& style = ImGui::GetStyle();
+  style.ScaleAllSizes(content_scale);
+  style.FontScaleDpi = content_scale;
+
   if (load_fonts) {
     mjResource* font = nullptr;
     int size = 0;
@@ -113,14 +120,16 @@ Window::Window(std::string_view title, int width, int height, Config config)
     mju_error("Unsupported window config: %d", render_config);
   }
 
-  sdl_window_ =
-      SDL_CreateWindow(title.data(), SDL_WINDOWPOS_UNDEFINED,
-                       SDL_WINDOWPOS_UNDEFINED, width, height, window_flags);
+  const float content_scale = ImGui_ImplSDL2_GetContentScaleForDisplay(0);
+  sdl_window_ = SDL_CreateWindow(title.data(), SDL_WINDOWPOS_UNDEFINED,
+                                 SDL_WINDOWPOS_UNDEFINED, width * content_scale,
+                                 height * content_scale, window_flags);
   if (!sdl_window_) {
     mju_error("Error creating window: %s", SDL_GetError());
   }
 
-  InitImGui(sdl_window_, config.load_fonts, (render_config != kClassicOpenGL));
+  InitImGui(sdl_window_, content_scale, config.load_fonts,
+            (render_config != kClassicOpenGL));
 
   if (render_config == kFilamentWebGL || render_config == kClassicOpenGL) {
     SDL_GLContext gl_context = SDL_GL_CreateContext(sdl_window_);

src/experimental/studio/app.cc

@@ -1195,8 +1195,13 @@ void App::ToolBarGui() {
     const ImColor yellow(250, 230, 10, 255);
     const int combo_flags = ImGuiComboFlags_NoArrowButton;
 
+    const float scale = ImGui::GetWindowDpiScale();
+    const float right_width = 500.f * scale;
+    const ImVec2 button_size(48.f * scale, 32.f * scale);
+    const ImVec2 play_button_size(120.f * scale, 32.f * scale);
+
     ImGui::TableSetupColumn("", ImGuiTableColumnFlags_WidthStretch);
-    ImGui::TableSetupColumn("", ImGuiTableColumnFlags_WidthFixed, 520);
+    ImGui::TableSetupColumn("", ImGuiTableColumnFlags_WidthFixed, right_width);
 
     ImGui::TableNextColumn();
     ImGui::Text("%s", " ");
@@ -1204,7 +1209,7 @@ void App::ToolBarGui() {
     // Unload button.
     ImGui::SameLine();
     style.Color(ImGuiCol_ButtonHovered, red);
-    if (ImGui::Button(ICON_UNLOAD_MODEL, ImVec2(48, 32))) {
+    if (ImGui::Button(ICON_UNLOAD_MODEL, button_size)) {
       RequestModelLoad("");
     }
     ImGui::SetItemTooltip("%s", "Unload");
@@ -1212,14 +1217,14 @@ void App::ToolBarGui() {
 
     // Reload button.
     ImGui::SameLine();
-    if (ImGui::Button(ICON_RELOAD_MODEL, ImVec2(48, 32))) {
+    if (ImGui::Button(ICON_RELOAD_MODEL, button_size)) {
       RequestModelLoad(model_name_);
     }
     ImGui::SetItemTooltip("%s", "Reload");
 
     // Reset button.
     ImGui::SameLine();
-    if (ImGui::Button(ICON_RESET_MODEL, ImVec2(48, 32))) {
+    if (ImGui::Button(ICON_RESET_MODEL, button_size)) {
       ResetPhysics();
     }
     ImGui::SetItemTooltip("%s", "Reset");
@@ -1228,7 +1233,7 @@ void App::ToolBarGui() {
     ImGui::SameLine();
     const bool paused = step_control_.IsPaused();
     style.Color(ImGuiCol_Button, paused ? yellow : green);
-    if (ImGui::Button(paused ? ICON_PLAY : ICON_PAUSE, ImVec2(120, 32))) {
+    if (ImGui::Button(paused ? ICON_PLAY : ICON_PAUSE, play_button_size)) {
       step_control_.TogglePause();
     }
     ImGui::SetItemTooltip("%s", paused ? "Play" : "Pause");
@@ -1243,7 +1248,7 @@ void App::ToolBarGui() {
     ImGui::SetItemTooltip("%s", "Playback Speed");
 
     ImGui::SameLine();
-    ImGui::SetNextItemWidth(50);
+    ImGui::SetNextItemWidth(50.0f * scale);
     if (ImGui::BeginCombo("##Speed", kPercentRealTime[tmp_.speed_index],
                           combo_flags)) {
       for (int n = 0; n < kPercentRealTime.size(); n++) {