Update examples and readme to talk about high DPI

README.md

@@ -73,3 +73,10 @@ The rlImGui.h API only uses features that are common to C and C++, so rlImGui ca
 
 # Low level API
 If you would like more controll over the ImGui Backend, you can use the low level API that is found in imgui_impl_raylib.h. This is API follows the patterns of other ImGui backends and does not do automatic context management. An example of it's use can be found in imgui_style_example.cpp 
+
+# Note for High DPI displays
+If your system does a display scale, like 125% or %150, you will write code to handle that.
+If you set the FLAG_WINDOW_HIGHDPI flag in raylib, that will create a frame buffer that is lower than your native screen resolution, and scale that up to fit your display. This makes it easy to define all your code in a 'normal' resolution, but has the disadvantage of making all text look blurry.
+The better option is to not use FLAG_WINDOW_HIGHDPI and let raylib run in the native resolution. You should then scale all your input values by GetWindowDPIScale.
+rlImGui supports this by automaticaly scaling the default font by the display scale when it detects a display scale and the DPI flag is not set.
+The examples show how to scale hardcoded values by the display scale to compensate and make your GUI look good in any scale.

examples/asset_browser/imgui_utils.h

@@ -12,8 +12,22 @@
 #pragma once
 
 #include <string>
+#include "raylib.h"
 
 namespace ImGuiUtils
 {
     void TextWithEllipsis(const char* string, float maxWidth, bool useWordBoundaries = false, float aSpacing = 0);
+
+
+    // DPI scaling functions
+    inline float ScaleToDPIF(float value)
+    {
+        return GetWindowScaleDPI().x * value;
+    }
+
+    inline int ScaleToDPII(int value)
+    {
+        return int(GetWindowScaleDPI().x * value);
+    }
+
 }

examples/asset_browser/main.cpp

@@ -29,8 +29,8 @@ int main(int argc, char* argv[])
 {
 	// Initialization
 	//--------------------------------------------------------------------------------------
-	int screenWidth = 1900;
-	int screenHeight = 900;
+	int screenWidth = 1280;
+	int screenHeight = 800;
 
 	SetConfigFlags(FLAG_MSAA_4X_HINT | FLAG_VSYNC_HINT);
 	InitWindow(screenWidth, screenHeight, "raylib-Extras [ImGui] example - Asset browser");

examples/docking_example.cpp

@@ -16,6 +16,16 @@
 #include "imgui.h"
 #include "rlImGui.h"
 
+// DPI scaling functions
+float ScaleToDPIF(float value)
+{
+	return GetWindowScaleDPI().x * value;
+}
+
+int ScaleToDPII(int value)
+{
+    return int(GetWindowScaleDPI().x * value);
+}
 
 int main(int argc, char* argv[])
 {
@@ -24,7 +34,9 @@ int main(int argc, char* argv[])
 	int screenWidth = 1280;
 	int screenHeight = 800;
 
-	SetConfigFlags(FLAG_MSAA_4X_HINT | FLAG_VSYNC_HINT | FLAG_WINDOW_RESIZABLE | FLAG_WINDOW_HIGHDPI);
+	// do not set the FLAG_WINDOW_HIGHDPI flag, that scales a low res framebuffer up to the native resolution.
+	// use the native resolution and scale your geometry.
+	SetConfigFlags(FLAG_MSAA_4X_HINT | FLAG_VSYNC_HINT | FLAG_WINDOW_RESIZABLE);
 	InitWindow(screenWidth, screenHeight, "raylib-Extras [ImGui] example - Docking");
 	SetTargetFPS(144);
 	rlImGuiSetup(true);

examples/editor.cpp

@@ -21,6 +21,17 @@ bool Quit = false;
 
 bool ImGuiDemoOpen = false;
 
+// DPI scaling functions
+float ScaleToDPIF(float value)
+{
+    return GetWindowScaleDPI().x * value;
+}
+
+int ScaleToDPII(int value)
+{
+    return int(GetWindowScaleDPI().x * value);
+}
+
 class DocumentWindow
 {
 public:
@@ -60,7 +71,7 @@ public:
 	void Show() override
 	{
 		ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, ImVec2(0, 0));
-		ImGui::SetNextWindowSizeConstraints(ImVec2(400, 400), ImVec2((float)GetScreenWidth(), (float)GetScreenHeight()));
+		ImGui::SetNextWindowSizeConstraints(ImVec2(ScaleToDPII(400), ScaleToDPII(400)), ImVec2((float)GetScreenWidth(), (float)GetScreenHeight()));
 
 		Focused = false;
 
@@ -229,7 +240,7 @@ public:
 		Camera.position.y = 3;
 		Camera.position.z = -25;
 
-		Image img = GenImageChecked(256, 256, 32, 32, DARKGRAY, WHITE);
+		Image img = GenImageChecked(ScaleToDPII(256), ScaleToDPII(256), ScaleToDPII(32), ScaleToDPII(32), DARKGRAY, WHITE);
 		GridTexture = LoadTextureFromImage(img);
 		UnloadImage(img);
 		GenTextureMipmaps(&GridTexture);
@@ -246,7 +257,7 @@ public:
 	void Show() override
 	{
 		ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, ImVec2(0, 0));
-		ImGui::SetNextWindowSizeConstraints(ImVec2(400, 400), ImVec2((float)GetScreenWidth(), (float)GetScreenHeight()));
+		ImGui::SetNextWindowSizeConstraints(ImVec2(ScaleToDPII(400), ScaleToDPII(400)), ImVec2((float)GetScreenWidth(), (float)GetScreenHeight()));
 
 		if (ImGui::Begin("3D View", &Open, ImGuiWindowFlags_NoScrollbar))
 		{
@@ -340,8 +351,10 @@ int main(int argc, char* argv[])
 	int screenWidth = 1900;
 	int screenHeight = 900;
 
+    // do not set the FLAG_WINDOW_HIGHDPI flag, that scales a low res framebuffer up to the native resolution.
+	// use the native resolution and scale your geometry.
 	SetConfigFlags(FLAG_MSAA_4X_HINT | FLAG_VSYNC_HINT);
-	InitWindow(screenWidth, screenHeight, "raylib-Extras [ImGui] example - ImGui Demo");
+	InitWindow(screenWidth, screenHeight, "raylib-Extras [ImGui] example - Editor Example");
 	SetTargetFPS(144);
 	rlImGuiSetup(true);
 	ImGui::GetIO().ConfigWindowsMoveFromTitleBarOnly = true;

examples/imgui_style_example.cpp

@@ -11,11 +11,26 @@
 #include "imgui_impl_raylib.h"
 #include "raylib.h"
 
+// DPI scaling functions
+// Use these to scale any hardcoded values to the native display resolution
+float ScaleToDPIF(float value)
+{
+    return GetWindowScaleDPI().x * value;
+}
+
+int ScaleToDPII(int value)
+{
+    return int(GetWindowScaleDPI().x * value);
+}
+
 // Main code
 int main(int, char**)
 {
     // Setup raylib window
-    SetConfigFlags(FLAG_WINDOW_RESIZABLE | FLAG_WINDOW_HIGHDPI);
+    // do not set the FLAG_WINDOW_HIGHDPI flag, that scales a low res framebuffer up to the native resolution.
+    // use the native resolution and scale your geometry.
+
+    SetConfigFlags(FLAG_WINDOW_RESIZABLE);
     InitWindow(1280, 720, "Dear ImGui Raylib(OpenGL) example");
  
     // Setup Dear ImGui context
@@ -24,6 +39,13 @@ int main(int, char**)
     io.ConfigFlags |= ImGuiConfigFlags_NavEnableKeyboard;     // Enable Keyboard Controls
     io.ConfigFlags |= ImGuiConfigFlags_NavEnableGamepad;      // Enable Gamepad Controls
 
+    // tell ImGui the display scale
+    if (!IsWindowState(FLAG_WINDOW_HIGHDPI))
+    {
+        io.DisplayFramebufferScale.x = GetWindowScaleDPI().x;
+        io.DisplayFramebufferScale.y = GetWindowScaleDPI().y;
+    }
+
     // Setup Dear ImGui style
     ImGui::StyleColorsDark();
     //ImGui::StyleColorsLight();
@@ -39,12 +61,26 @@ int main(int, char**)
     // - Use '#define IMGUI_ENABLE_FREETYPE' in your imconfig file to use Freetype for higher quality font rendering.
     // - Read 'docs/FONTS.md' for more instructions and details.
     // - Remember that in C/C++ if you want to include a backslash \ in a string literal you need to write a double backslash \\ !
-    io.Fonts->AddFontDefault();
+
+    // to properly scale for high DPI displays, we need to cale the font size by the dpi sale
+    static constexpr int DefaultFonSize = 13;
+    ImFontConfig defaultConfig;
+    defaultConfig.SizePixels = DefaultFonSize;
+
+    if (!IsWindowState(FLAG_WINDOW_HIGHDPI))
+    {
+        defaultConfig.SizePixels = defaultConfig.SizePixels * GetWindowScaleDPI().y;
+        defaultConfig.RasterizerMultiply = GetWindowScaleDPI().y;
+    }
+
+    defaultConfig.PixelSnapH = true;
+    io.Fonts->AddFontDefault(&defaultConfig);
+
     //io.Fonts->AddFontFromFileTTF("c:\\Windows\\Fonts\\segoeui.ttf", 18.0f);
     //io.Fonts->AddFontFromFileTTF("../../misc/fonts/DroidSans.ttf", 16.0f);
     //io.Fonts->AddFontFromFileTTF("../../misc/fonts/Roboto-Medium.ttf", 16.0f);
     //io.Fonts->AddFontFromFileTTF("../../misc/fonts/Cousine-Regular.ttf", 15.0f);
-    ImFont* font = io.Fonts->AddFontFromFileTTF("resources/driusstraight.ttf", 18.0f, nullptr, io.Fonts->GetGlyphRangesJapanese());
+    ImFont* font = io.Fonts->AddFontFromFileTTF("resources/driusstraight.ttf", ScaleToDPIF(18.0f), nullptr, io.Fonts->GetGlyphRangesJapanese());
     IM_ASSERT(font != nullptr);
 
     // required to be called to cache the font texture with raylib
@@ -107,7 +143,6 @@ int main(int, char**)
             ImGui::End();
         }
 
-
         // Rendering
         ImGui::Render();
         BeginDrawing();

examples/simple.cpp

@@ -17,6 +17,20 @@
 #include "imgui.h"
 #include "rlImGui.h"
 
+
+// DPI scaling functions
+float ScaleToDPIF(float value)
+{
+    return GetWindowScaleDPI().x * value;
+}
+
+int ScaleToDPII(int value)
+{
+    return int(GetWindowScaleDPI().x * value);
+}
+
+
+
 int main(int argc, char* argv[])
 {
 	// Initialization
@@ -29,6 +43,8 @@ int main(int argc, char* argv[])
 	SetTargetFPS(144);
 	rlImGuiSetup(true);
 
+	Texture image = LoadTexture("resources/parrots.png");
+
 	// Main game loop
 	while (!WindowShouldClose())    // Detect window close button or ESC key
 	{
@@ -42,6 +58,15 @@ int main(int argc, char* argv[])
 		bool open = true;
 		ImGui::ShowDemoWindow(&open);
 
+		open = true;
+		if (ImGui::Begin("Test Window", &open))
+		{
+			ImGui::TextUnformatted(ICON_FA_JEDI);
+
+			rlImGuiImage(&image);
+		}
+		ImGui::End();
+
 		// end ImGui Content
 		rlImGuiEnd();
 
@@ -52,6 +77,8 @@ int main(int argc, char* argv[])
 
 	// De-Initialization
 	//--------------------------------------------------------------------------------------   
+    rlImGuiShutdown();
+	UnloadTexture(image);
 	CloseWindow();        // Close window and OpenGL context
 	//--------------------------------------------------------------------------------------