Add GUI scale option to ImGui examples (#2280)

Author: jslee02

dart/gui/ImGuiHandler.cpp

@@ -48,6 +48,8 @@
 
 #include <algorithm>
 
+#include <cmath>
+
 namespace dart {
 namespace gui {
 
@@ -201,6 +203,29 @@ ConvertedKey convertFromOSGKey(int key)
   }
 }
 
+//==============================================================================
+void applyImGuiScale(float scale)
+{
+  if (!std::isfinite(scale) || scale <= 0.f)
+    return;
+
+  static ImGuiStyle baseStyle
+      = ImGui::GetStyle(); // capture styled defaults (dark palette)
+  auto& style = ImGui::GetStyle();
+  ImGuiIO& io = ImGui::GetIO();
+
+  // Reset to the captured base style before applying the requested scale so
+  // repeated calls are idempotent and preserve the configured palette.
+  style = baseStyle;
+  io.FontGlobalScale = 1.f;
+
+  if (std::abs(scale - 1.f) < 1e-6f)
+    return;
+
+  style.ScaleAllSizes(scale);
+  io.FontGlobalScale = scale;
+}
+
 //==============================================================================
 struct ImGuiNewFrameCallback : public ::osg::Camera::DrawCallback
 {
@@ -237,7 +262,10 @@ struct ImGuiDrawCallback : public ::osg::Camera::DrawCallback
 
 //==============================================================================
 ImGuiHandler::ImGuiHandler()
-  : mTime{0.0}, mMousePressed{false, false, false}, mMouseWheel{0.0f}
+  : mTime{0.0},
+    mMousePressed{false, false, false},
+    mMouseWheel{0.0f},
+    mFramebufferScale{1.0f, 1.0f}
 {
   ImGui::CreateContext();
 
@@ -344,6 +372,18 @@ bool ImGuiHandler::handle(
   const bool wantCaptureMouse = io.WantCaptureMouse;
   const bool wantCaptureKeyboard = io.WantCaptureKeyboard;
 
+  const float invScaleX
+      = mFramebufferScale[0] > 0.0f ? 1.0f / mFramebufferScale[0] : 1.0f;
+  const float invScaleY
+      = mFramebufferScale[1] > 0.0f ? 1.0f / mFramebufferScale[1] : 1.0f;
+
+  const auto getScaledMousePosition
+      = [&](const osgGA::GUIEventAdapter& adapter) {
+          const float scaledX = static_cast<float>(adapter.getX()) * invScaleX;
+          const float scaledY = static_cast<float>(adapter.getY()) * invScaleY;
+          return ImVec2(scaledX, io.DisplaySize.y - scaledY);
+        };
+
   switch (eventAdapter.getEventType()) {
     case osgGA::GUIEventAdapter::KEYDOWN: {
       const int key = eventAdapter.getUnmodifiedKey();
@@ -417,8 +457,7 @@ bool ImGuiHandler::handle(
       return wantCaptureKeyboard;
     }
     case osgGA::GUIEventAdapter::PUSH: {
-      io.MousePos
-          = ImVec2(eventAdapter.getX(), io.DisplaySize.y - eventAdapter.getY());
+      io.MousePos = getScaledMousePosition(eventAdapter);
 
       if (eventAdapter.getButtonMask()
           == osgGA::GUIEventAdapter::LEFT_MOUSE_BUTTON) {
@@ -440,8 +479,7 @@ bool ImGuiHandler::handle(
     }
     case osgGA::GUIEventAdapter::DRAG:
     case osgGA::GUIEventAdapter::MOVE: {
-      io.MousePos
-          = ImVec2(eventAdapter.getX(), io.DisplaySize.y - eventAdapter.getY());
+      io.MousePos = getScaledMousePosition(eventAdapter);
 
       return wantCaptureMouse;
     }
@@ -489,9 +527,39 @@ void ImGuiHandler::newFrame(::osg::RenderInfo& renderInfo)
   ImGui_ImplOpenGL2_NewFrame();
 
   auto& io = ImGui::GetIO();
-  auto* viewport = renderInfo.getCurrentCamera()->getViewport();
+  auto* camera = renderInfo.getCurrentCamera();
+  auto* viewport = camera ? camera->getViewport() : nullptr;
+
+  ImVec2 displaySize(1.0f, 1.0f);
+  ImVec2 framebufferScale(1.0f, 1.0f);
+
+  if (viewport) {
+    // Use framebuffer-to-window ratio to honor OS display scaling.
+    displaySize = ImVec2(viewport->width(), viewport->height());
+
+    auto* graphicsContext = camera->getGraphicsContext();
+    const auto* traits
+        = graphicsContext ? graphicsContext->getTraits() : nullptr;
+    if (traits && traits->width > 0 && traits->height > 0) {
+      framebufferScale.x = static_cast<float>(viewport->width())
+                           / static_cast<float>(traits->width);
+      framebufferScale.y = static_cast<float>(viewport->height())
+                           / static_cast<float>(traits->height);
+
+      framebufferScale.x
+          = framebufferScale.x > 0.0f ? framebufferScale.x : 1.0f;
+      framebufferScale.y
+          = framebufferScale.y > 0.0f ? framebufferScale.y : 1.0f;
+
+      displaySize = ImVec2(
+          static_cast<float>(traits->width),
+          static_cast<float>(traits->height));
+    }
+  }
 
-  io.DisplaySize = ImVec2(viewport->width(), viewport->height());
+  io.DisplaySize = displaySize;
+  io.DisplayFramebufferScale = framebufferScale;
+  mFramebufferScale = {framebufferScale.x, framebufferScale.y};
 
   const auto currentTime
       = renderInfo.getView()->getFrameStamp()->getSimulationTime();

dart/gui/ImGuiHandler.hpp

@@ -55,6 +55,8 @@ namespace gui {
 
 class ImGuiWidget;
 
+DART_GUI_API void applyImGuiScale(float scale);
+
 class DART_GUI_API ImGuiHandler : public osgGA::GUIEventHandler
 {
 public:
@@ -104,6 +106,8 @@ class DART_GUI_API ImGuiHandler : public osgGA::GUIEventHandler
 
   float mMouseWheel;
 
+  std::array<float, 2> mFramebufferScale;
+
   std::vector<std::shared_ptr<ImGuiWidget>> mWidgets;
 };
 

dart/gui/ImGuiViewer.cpp

@@ -68,6 +68,12 @@ const ImGuiHandler* ImGuiViewer::getImGuiHandler() const
   return mImGuiHandler.get();
 }
 
+//==============================================================================
+void ImGuiViewer::setImGuiScale(float scale)
+{
+  applyImGuiScale(scale);
+}
+
 //==============================================================================
 void ImGuiViewer::showAbout()
 {

dart/gui/ImGuiViewer.hpp

@@ -62,6 +62,9 @@ class DART_GUI_API ImGuiViewer : public Viewer
   /// Get cosnt ImGui handler.
   const ImGuiHandler* getImGuiHandler() const;
 
+  /// Set the ImGui global scale factor (fonts + widget sizes).
+  void setImGuiScale(float scale);
+
   /// Show About widget.
   void showAbout();
 

examples/atlas_simbicon/AtlasSimbiconWidget.cpp

@@ -39,6 +39,7 @@
 #include "AtlasSimbiconWidget.hpp"
 
 #include "AtlasSimbiconWorldNode.hpp"
+#include "dart/gui/IncludeImGui.hpp"
 
 //==============================================================================
 AtlasSimbiconWidget::AtlasSimbiconWidget(
@@ -54,11 +55,28 @@ AtlasSimbiconWidget::AtlasSimbiconWidget(
   // Do nothing
 }
 
+//==============================================================================
+std::pair<ImVec2, ImVec2> AtlasSimbiconWidget::computeWindowPlacement(
+    float fontSize)
+{
+  constexpr ImVec2 kBasePos(10.0f, 20.0f);
+  constexpr ImVec2 kBaseSize(360.0f, 400.0f);
+  constexpr float kDefaultFontSize = 13.0f; // ImGui's default font size
+
+  const float fontScale = fontSize / kDefaultFontSize;
+  const ImVec2 pos(kBasePos.x * fontScale, kBasePos.y * fontScale);
+  const ImVec2 size(kBaseSize.x * fontScale, kBaseSize.y * fontScale);
+  return {pos, size};
+}
+
 //==============================================================================
 void AtlasSimbiconWidget::render()
 {
-  ImGui::SetNextWindowPos(ImVec2(10, 20));
-  ImGui::SetNextWindowSize(ImVec2(360, 400));
+  const auto [windowPos, windowSize]
+      = computeWindowPlacement(ImGui::GetFontSize());
+
+  ImGui::SetNextWindowPos(windowPos);
+  ImGui::SetNextWindowSize(windowSize);
   ImGui::SetNextWindowBgAlpha(0.5f);
   if (!ImGui::Begin(
           "Atlas Control",

examples/atlas_simbicon/AtlasSimbiconWidget.hpp

@@ -42,6 +42,10 @@
 #include "dart/gui/ImGuiViewer.hpp"
 #include "dart/gui/ImGuiWidget.hpp"
 
+#include <dart/gui/IncludeImGui.hpp>
+
+#include <utility>
+
 class AtlasSimbiconWorldNode;
 
 class AtlasSimbiconWidget : public dart::gui::ImGuiWidget
@@ -54,6 +58,9 @@ class AtlasSimbiconWidget : public dart::gui::ImGuiWidget
   // Documentation inherited
   void render() override;
 
+  /// Compute window position/size scaled to the provided font size.
+  static std::pair<ImVec2, ImVec2> computeWindowPlacement(float fontSize);
+
 protected:
   void setGravity(float gravity);
 

examples/atlas_simbicon/CMakeLists.txt

@@ -13,7 +13,8 @@ if(DART_IN_SOURCE_BUILD)
 endif()
 
 find_package(DART 6.16.0 REQUIRED COMPONENTS ${required_components} CONFIG)
+find_package(CLI11 2.4 CONFIG REQUIRED)
 
 file(GLOB srcs "*.cpp" "*.hpp")
 add_executable(${example_name} ${srcs})
-target_link_libraries(${example_name} PUBLIC ${required_libraries})
+target_link_libraries(${example_name} PUBLIC ${required_libraries} CLI11::CLI11)

examples/atlas_simbicon/main.cpp

@@ -35,14 +35,23 @@
 #include "AtlasSimbiconWorldNode.hpp"
 
 #include <dart/gui/All.hpp>
+#include <dart/gui/IncludeImGui.hpp>
 
 #include <dart/utils/All.hpp>
 #include <dart/utils/urdf/All.hpp>
 
 #include <dart/All.hpp>
 
-int main()
+#include <CLI/CLI.hpp>
+
+int main(int argc, char* argv[])
 {
+  CLI::App app("Atlas Simbicon example");
+  double guiScale = 1.0;
+  app.add_option("--gui-scale", guiScale, "Scale factor for ImGui widgets")
+      ->check(CLI::PositiveNumber);
+  CLI11_PARSE(app, argc, argv);
+
   // Create a world
   dart::simulation::WorldPtr world(new dart::simulation::World);
 
@@ -66,6 +75,8 @@ int main()
 
   // Create a Viewer and set it up with the WorldNode
   osg::ref_ptr<dart::gui::ImGuiViewer> viewer = new dart::gui::ImGuiViewer();
+
+  viewer->setImGuiScale(static_cast<float>(guiScale));
   viewer->addWorldNode(node);
 
   // Enable shadow

examples/box_stacking/CMakeLists.txt

@@ -13,7 +13,8 @@ if(DART_IN_SOURCE_BUILD)
 endif()
 
 find_package(DART 6.16.0 REQUIRED COMPONENTS ${required_components} CONFIG)
+find_package(CLI11 2.4 CONFIG REQUIRED)
 
 file(GLOB srcs "*.cpp" "*.hpp")
 add_executable(${example_name} ${srcs})
-target_link_libraries(${example_name} PUBLIC ${required_libraries})
+target_link_libraries(${example_name} PUBLIC ${required_libraries} CLI11::CLI11)

examples/box_stacking/main.cpp

@@ -36,6 +36,8 @@
 
 #include <dart/All.hpp>
 
+#include <CLI/CLI.hpp>
+
 #include <iostream>
 
 using namespace dart;
@@ -372,8 +374,14 @@ class TestWidget : public dart::gui::ImGuiWidget
 };
 
 //==============================================================================
-int main()
+int main(int argc, char* argv[])
 {
+  CLI::App app("Box stacking example");
+  double guiScale = 1.0;
+  app.add_option("--gui-scale", guiScale, "Scale factor for ImGui widgets")
+      ->check(CLI::PositiveNumber);
+  CLI11_PARSE(app, argc, argv);
+
   simulation::WorldPtr world = simulation::World::create();
   world->addSkeleton(createFloor());
 
@@ -386,6 +394,7 @@ int main()
 
   // Create a Viewer and set it up with the WorldNode
   osg::ref_ptr<dart::gui::ImGuiViewer> viewer = new dart::gui::ImGuiViewer();
+  viewer->setImGuiScale(static_cast<float>(guiScale));
   viewer->addWorldNode(node);
 
   // Add control widget for atlas