Open mikamyara opened 3 months ago
I was having a similar problem and solved it by following these steps:
Create two js functions that return the width and height of the window:
get_web_window_width: function(){
return window.screen.width;
},
get_web_window_height: function(){
return window.screen.height;
},
Call them from my project ( using https://emscripten.org/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html#implement-a-c-api-in-javascript) to construct the GLFW window:
window_width = get_web_window_width();
window_height = get_web_window_height();
GLFWwindow* glfw_window = glfwCreateWindow(window_width, window_height, "Gaps", nullptr, nullptr);
Set my window size to those values:
ImGui::SetNextWindowSize({static_cast<float>(window_width), static_cast<float>(window_height)});
Calculate a scaling factor based on the browser's window width and a reference width I used for determining where I place objects on a standard 1080p diplay:
int original_width = 1920;
float scale_factor = (float)window_width / original_width;
I then multiply all my font sizes and widget locations by this factor:
ImFontConfig small_font_config;
small_font_config.SizePixels = (22 * scale_factor);
ImGui::SetCursorPos( {55*scale_factor, 30*scale_factor});
ImGui::TextColored({0,0,0,1}, "%s", "gate");
- Removing `image-rendering: pixelated;` from the shell_minimal.html file fixed the bluriness when using windows DPI settings above 100%.
- I think you could use another js function that gets the actual DPI settings, with `window.devicePixelRatio` if you wanted to scale your widgets accordingly. With the steps I wrote here I get the same look and sizes at 100% and 125% DPI's. But they don't look blurry.
Version/Branch of Dear ImGui:
Version 1.90.5
Back-ends:
imgui_impl_glfw.cpp + imgui_impl_opengl3.cpp
Compiler, OS:
emscripten 3.1.57
Full config/build information:
No response
Details:
I searched a lot but I did not find something satisfactory to work with HiDPI in the contexte of ImGUI/emscripten/GLFW. I rewrote a part of my code to insert a scaling factor, for example by 2, then create a glfw window twice the size, as well as for the viewport. I rescaled fonts as well as the addRect/addline/addEverything I used in custom widgets. Then I display all and I get a really better quality. Unfortunately : the mouse now does not work, I guess it behaves as if the image was not downscaled by a factor 2. What should be the good practice in this context ? Best Regards, Mike
Screenshots/Video:
No response
Minimal, Complete and Verifiable Example code:
No response