Support high resolution icons

tooll3 / t3

Tooll 3 is an open source software to create realtime motion graphics.

MIT License

3.48k stars 192 forks source link

Support high resolution icons #302

Open teadrinker opened 1 year ago

teadrinker commented 1 year ago

(might be related to issue 203)

I have a high-DPI laptop at 200% windows scaling, although text scales as expected, a number of issues seem to be happening:

Many icons in the UI (for instance in the timeline header) don't seem to care about scaling and are hard to see
Texts are cut-off (such as enable/bypass, names of presets etc)
Dialogs are too small for their contents (for instance playback settings)

I can look into this at some point, however, would be good to know if there an idea of how/where in the code DPI is supposed to be managed? Is there an abstraction, or a global multiplier all UI implementations are supposed to use?

fbwIoba8ny T3Editor_23-10-09__13-43-41

pixtur commented 1 year ago

Thanks for reporting: I fixed the playback settings with e514348bc40c07d4c90b26c922a4b8fd3d642b73.

The main idea here is to scale fixed pixel sizes like so...

            ImGui.SetNextWindowSize(new Vector2(600, 500) * T3Ui.UiScaleFactor);

Scaling icons will be much more tricky. We have the icons as vector graphics. But they are carefully crafted for pixel alignment with 15px. So we would need to load highres version and scale down for other other scale factors. They are added as glyphs to the ImGui font-atlas, which would make the whole thing is a pain in the butt...

For the cut of UI-Elements, it would be ideal if you have a precise list or a long collection of the issue. Each one is probably 2-3 minutes of work.

teadrinker commented 1 year ago

They are added as glyphs to the ImGui font-atlas, which would make the whole thing is a pain in the butt...

Where is the atlas? or is it created from code? I found the png fonts-sheets in the dir Resources\fonts (what kind of format is that btw?), but don't seem to have the additional icons (but it's hard to see so might have missed!)

pixtur commented 1 year ago

Yes, it's all created on runtime:

in Editor/Gui/WindowsUiContentDrawer.cs

private unsafe void CreateFontsTexture() {  ... }

pixtur commented 1 year ago

I rethought about the icons integration: I good work around would be to export the icon-image in multiple hires version (e.g. @1.5, @2x etc) and switch between them on certain thresholds. that should pretty easy to implement.