ImGui for a semi-pro audio app

Support / Discussions: Getting started
1

Hello community !

I’ve been developing audio apps for iOS/macOS for 10+ years now. I was using an internal widget library which is too cumbersome to maintain. To anticipate future developments, I am currently looking for an alternative, for a well maintained, clean and future proof UI widget library.

After researching quite a bit for something similar, I came across nanovg, nanogui, imgui, and nuklear. Imgui seems the most solid so far and from what I could see in the gallery, it seems it would pretty much suits the needs to write a full semi-pro audio app that targets multiple platforms, hence renderers.

I have two concerns and I hope to get genuine feedback directly from the community :

  • Immediate Mode GUI might not be the perfect choice for more complex app. The app(s) in question I wish to design are separated in different screens. Each view can be quite complex without it being too crowded either. What is your experience / feedback, pro’s & con’s about designing semi-complex apps with imgui ? From the gallery, I could see pretty complex UI’s with a wide range. I just want to avoid any overload as CPU should be favored for audio processing needs.

  • Are there any tools to design and draft / prototype UI’s, to instantiate, skin, place and dimension widgets easily that can be “plugged” to imgui ? Somewhat something like CSS or descriptive stylesheet / document based language.

I have other questions in mind but those two are the most decisive for me.

Hope they make sense, and happy to go forward with imgui if, hopefully, it fits the needs for my upcoming projects.

Thank you in advance,
M.

2

Hello Mathieu,
I think this would be best asked on github where there is a more active community.

Quick (biased) answer

  • Your first point is not a big issue but writing your widget you need to be mindful of performances.

  • Not at all. It would be possible but this isn’t really what dear imgui is good at. The design and paradigm strive to avoid all the issues usually associated to data bindings, so right now most of the effort have been put into working on gui as close as possible to your real data, which means in code. A descriptive language for data-driven layout would eventually be possible but not in the near-future roadmap.

Where dear imgui will be good in your context, but it’ll requires a learning curve, is that once you are acquainted to how the thing works, you will eventually find it easy to write totally custom widgets, and you may find that your second point is a non-issue as your iteration times will be better with code. There’s however quite a learning curve here, and if you need to start with sexy-looking widgets and layout in all the place you will probably experience lots of friction.

See https://github.com/ocornut/imgui/issues/942 as a dumb 30-lines version of a custom knob. From there the sky’s the limit in making this custom and pretty but still requires some work.

3

Hi Omar,

Thanks for all your feedback here and on Twitter as well.

I love to write custom widgets and I think I can reuse a bunch of the logic / drawing primitive & logic that I have on hand and “translate” then to imgui. From what I see it shouldn’t be too bad. This would also make all my widgets pretty much future-proof.

I have a huge collection of widgets for knobs, waveform renderers, sliders, ADSR’s, step modulator widgets, buttons, and various audio-related components.

Here’s a screenshot of the app I made :

Now what’s pretty mandatory is support of skinning, retina display, etc. From what I’ve seen imgui seems to support that out of the box.

I’ll check on the Github issues as you suggest.

EDIT : I was trying the bootstrap code here : https://github.com/abdes/asap_app_imgui ; tested the demo app and I think that I am sold… It’s super clean, multi-platform, ready to use, and as mentioned I’m not too concerned about rewriting widgets using imgui.

It would even make sense to open-source all these audio widgets for better maintenance, improvement and sharing. I am still considering nuklear though, but the lack of proper C++ right out the box is a huge let down for me.

Thanks for taking time to answer my questions !
All the best,
Mathieu.

4

[quote=“mathieu, post:3, topic:337”]
Now what’s pretty mandatory is support of skinning, retina display, etc. From what I’ve seen imgui seems to support that out of the box.[/quote]

For Hi-DPI etc what you’d generally do is to load font based on your desired scale + scale the ImGuiStyle structure (there’s a helper ScaleAllSizes).

For multi-viewports, multi-monitors, multi-dpi (docking branch with multi-viewports beta feature enabled), this is more tricky but faisable, your app need to maintain one set of atlas/fonts per possible DPI (if your monitor use different dpi) and you need to hotswap then on the PlatformOnViewportChanged() handler. It’s easy to implement as a workaround until dear imgui itself support this at a lower level.

Yes that would be amazing.
It would really move dear imgui forward if people shared solid sets of fancy-looking widgets.

I envision that in ~2 years imgui internals should have matured enough that most people will write their own widgets. In the meanwhile expect breakage sometimes when using the imgui_internal.h api but most of it should be easy to fix and you’ll have have the default widgets as reference.

1 Like
5

Hey @ocornut,

I don’t really need multi viewports / displays support so this should be fine.
Scaling with the global ratio is something most libraries do already so this looks pretty similar.

I am using JUCE right now but with the lack of Metal support and suboptimal rendering performances, I am looking for a more modular, bare bone rendering library like imgui.

I just started a very rough Xcode project yesterday by simply copying the apple_metal example. Everything works out of the box, and I will serve me as sort of a playground to try out imgui and port the knob code that I have in my collection.

Can you recommend some already made widgets, that would serve as some “best practice” examples for me to rely on ? I’d like to at least start off right :slight_smile:

Thanks again for taking time to address my concerns.

Have a great week-end,
Cheers,
Mathieu.

6

Not many people are sharing their widgets (primarily because writing C++ code that can be shared without too much dependencies requires extensive effort and few people seems to be wanting to put that effort).

You may look at the wiki:

Things like ImGuizmo, ImSequencer, ImHotKey, Markdown, Gradient color generator are more polished but also higher level stuff.

I think the unpolished stuff like that know are posted are decent starting points, most of the polish will be custom interactions and rendering.