Gallery: Post your screenshots / code here (PART 1)

[ocornut]

This is Part 1, I am splitting issues to reduce loading times and avoid github collapsing messages.

Browse all threads and find latest one to post to using the gallery label.

Also see: Software using dear imgui (you can help complete the list!)

You can post your screenshots here!

---

Open thread for posting examples of the way you are using ImGui. e.g. those are some of the example mini applet implemented at the bottom of ImGui::ShowTestWindow() Except we're looking for real world usage! (I have a few things that are unfortunately under NDA at the moment, so user contributions are welcome)

[unpacklo]

Here's our basic usage, nothing too glamorous:

We have a main, top level panel called "Debug" which has some of the most commonly used options available as checkboxes and whatnot. Long before ImGui, I wrote up a simple text console which we had to enable everything with by typing in commands and values.

Our method for going into more specific debugging functionality consists of separate windows which are toggled on/off through buttons on the top level panel. This is already starting to get unwieldy since we're starting to get quite a few different windows and sometimes there is legitimate need for having quick/easy access to multiple windows, but you don't always want to see all of them at the same time. Haven't had a chance to spend that much time on how to solve that problem yet.

Pretty simple stuff though. Most of our initial use when I discovered ImGui was basically making a GUI version of text console variables, such as the rendering control panel. Before, we literally had to type in various settings as text like: r_lightingorientation 123 72 or r_lightingcolor 169 102 0 148. That sucked; ImGui is much better!

Some of the more useful usage we have is for inspecting the live game state. "Mech debug" is for selecting a mech and seeing some of its most important internal state and coercing AI states for the state machine so we can debug behaviors more easily. There are also some parameters that we can change live on the mech so we can see the effects of different values, like how much health they have or how much damage the guns on the mech do.

Something I would like to really expand on with ImGui usage in our game is to move as much of our game entity editing in-engine as possible. Our current workflow for editing the entity data is really slow and painful: find the corresponding resource file describing the entity (a .json file) and hand edit the file in a text editor. Once changes are made, you need to reload the game so it refreshes all the data. With ImGui, I'm hopeful that I can move this process into the game and remove a lot of tedious steps like finding the right resource file and having to save/restart.

[ocornut]

Dale,

Thanks for posting those info. On the last project I've worked on at Media Molecule what I did is that I mapped a "main menu" window to the right-click. This menu would show all available tools and clicking on an option to toggle it would make the new window appear, and also make the main menu window disappear. So the flow was: right-click (anywhere), left-click on an option, and you would have the new tool. It worked reasonably well.

The addition of actual "menus" in ImGui would probably help for this kind of base selection to be always available and not taking much screen real-estate. The usage of collapsing headers can get a little unwieldy, I'll try to experiment more with tabs (which you can simulate with buttons or radio).

Attached two screenshots courtesy of Pastagames. They are accessing the draw list to add primitives directly.

Richg42 also has a profiler showing here that he quickly made for LZHAM http://richg42.blogspot.co.uk/2015/02/a-telemetry-style-visualization-of.html

[ocornut]

This guy appears to have implemented a custom widget to edit transfer function for a fluid simulation: https://twitter.com/hb3p8/status/557431407350665218/photo/1

This blog shows something (nothing special in term of imgui usage, but the blog itself is interesting) https://placeholderart.wordpress.com/2014/11/21/implementing-a-physically-based-camera-manual-exposure/

Also custom plot here https://github.com/ocornut/imgui/issues/28

[ocornut]

Shot courtesy of Alejandro Hitti " I've been using ImGui for my current game project at DigiPen, and it's been great so far. It is actually very popular this year among game teams here, where at least 4 game teams are using it as their GUI to create editors. Here's a screenshot of what I'm currently doing on my game with the tool with different themes I made: "

[jarikomppa]

(youtube video)

I ported a procedural tree generator from javascript to c++, and wanted to do an editor for it. I started with AntTweakBar, which was fine up to a point, but I wanted to add some features which would have required me to basically roll my own UI library. ImGui was pretty easy to drop in, and I got the texture previews etc. in the GUI.

Project can be found at https://github.com/jarikomppa/proctree

[ocornut]

Not sure what is happening in this video :) cinder stuff by Bruce Lane https://www.youtube.com/watch?v=gtYlUo9Wq6I&feature=youtu.be

[ocornut]

More on the above. Bruce Lane at Sophia Digital Art ( http://www.sophiadigitalart.net/ ) this week-end used ImGui for a live cinder-based performance.

Here looking totally night-time-live-performance legit:

[extrawurst]

this is awesome (just found this) - this should be a wiki page IMHO!!

[brucelane]

thank you Omar, I agree this page should be better seen, like @Extrawurst says ;-)

[emoon]

Post of ProDBG which is a debugger I'm working on that is using ImGui https://github.com/emoon/ProDBG

This screenshot shows the C64 (Connected to the VICE emulator) backend in action. Notice that the tool isn't at all ready for use yet but making progress more and more :)

[ocornut]

@Extrawurst C-->D wrappers put to good use http://extrawurst.github.io/dlang/metaprogramming/imgui/2015/05/28/dlang-annotations.html

[ocornut]

[ocornut]

From @paultech who is making an amazing game, see more at https://twitter.com/techcompliant

Also Media Molecule's project Dreams was announced recently. It is the last project I've worked on there and it is the project that led to releasing ImGui. I ported the initial version of the library from Tearaway to Dreams and then back to Tearaway (the two games are not sharing any code) and doing that made the library much more portable and it eventually got released shortly after that. Dreams used a fair amount of ImGui for debugging and prototyping.

video https://www.youtube.com/watch?v=1Pxl-0PwQ50 sreenshots http://i.imgur.com/i9FmLf8.jpg http://i.imgur.com/rhkl3Ef.jpg http://i.imgur.com/7qNB9WW.jpg

[ocornut]

From @Pagghiu

[Pagghiu]

CortexRecognition is a software for Robotic 3D Guidance using single camera created by Recognition Robotics Inc. (http://www.recognitionrobotics.com) The new release will use imgui :)

[ocornut]

Selection of stuff gathered

Techcompliant

Retrocommander (merely a test)

ExSciVis

From thevaber

MemoryEditor ( https://gist.github.com/ocornut/0673e37e54aff644298b )

[adam4813]

Trillek (old)

[DarrenSweeney]

Just a very simple screenshot of using ImGui in my 3D physics engine.

[ocornut]

From https://github.com/ocornut/imgui/issues/306

[ocornut]

Simple timeline looking thing

[Zardoz89]

Trillek (again, and WIP) spdlog sinking log information to an ImGUI window

[nem0]

I am porting LumixEngine from Qt to ImGui, I have not decided yet whether I will stick with Qt or switch

[ocornut]

@nem0 Nice. Would be interesting to hear about your feedback on how this transition is going, what you feel are the pros and cons and what could be improved in ImGui.

[nem0]

Cons:

• I am still afraid I will not be able to do some things with ImGui I can do with retain mode GUI. However I have not found anything impossible yet.
• Less options for skinning compared to Qt. I am not even sure whether this is a disadvantage, since I am satisfied with default skin, but maybe some users will want it.
• The biggest issue for me is that some basic gui elements are missing, e.g. some equivalent to Qt ListView with several columns (I had to do it in a quite complicated way), progress bar, advanced color picker, ... Maybe these can be plugins to keep the core ImGui slim.
• No docking - second biggest issue
• Multiple monitor support - this is questionable
• Not possible to select values from histogram, or at least render one of the items in a different way so I can select it with a slider

Pros:

• Pleasure to use, when I go to sleep I can't wait to wake up to work with ImGui :)
• Faster to do things than with Qt. Literally 100x faster.
• App in ImGui tends to end up much more polished, because it's easier and faster.
• Most of the missing features are very easy to add. This is extremely hard in Qt and I would never try that.
• Basic widgets (drag float, ...) work in fact better in ImGui than in Qt, e.g. in Qt, if I have a float value e.g. 1.23 in an input limited to 2 decimal places and I want to change it to 1.24, I can not just enter 1.243, I have to delete 3 to get 1.2 and than I can enter 4 to get 1.24. This is extremely annoying in Qt.
• ImGui is a GREAT way to do property grids. In Qt I had to connect milions of signals/slots and I always miss some. In ImGui, this just works.
• There is 20MB dll just for UTF in Qt :(, It can take several seconds to start Qt app. ImGui is extremely small and ImGui app starts immediately.

Finally, I think ImGui is more suitable for some apps (i.e. in my case an editor) than Qt.

[ocornut]

Some answers,

The biggest issue for me is that some basic gui elements are missing, e.g. some equivalent to Qt ListView with several columns (I had to do it in a quite complicated way),

This would depend exactly on what behaviour/feature you need. A list-view is essentially a child window (so it has its own independent scrolling) in which you can draw columned content, and use Selectable() in the first one perhaps with the ImGuiSelectableFlags_SpanAllColumns flags. So it should work.

If you want to get headers, sorting, re-ordering columns it is possible but more awkward and not first-class citizen at the moment. Maybe https://github.com/ocornut/imgui/issues/125 has some tips. I would definitively want to improve columns to make better headers/sorting/scrolling feature easier to setup.

progress bar

That's essentially drawing a few custom quads which you can use using the ImDrawList api. I'll probably add something by default.

Advanced color picker

Agreed. We can work on it, as discussed in your thread https://github.com/ocornut/imgui/issues/346

No docking - second biggest issue

That's a rather open-ended feature so I wouldn't know where to start right now, need to spend time thinking about it. I would suggest to anyone to wants docking to start implementing something on user's side. I will add a micro example just to do how to can best do it but the details would need to be end-user. It'll probably need to use imgui_internal.h at the moment. EDIT See #351

Multiple monitor support - this is questionable

You can do it with either a window spanning both monitors, or two window in which you'd render two halves of a larger io.DisplaySize. May be a bit awkward but should work.

Not possible to select values from histogram, or at least render one of the items in a different way so I can select it with a slider

I'd suggest to try creating custom widgets. Just grab the PlotHistogram() code, if you strip it of the generic stuff it'll end being very little code and you'll have complete control over it (e.g. use it to edit curves, etc.). I'm open to any new feature for the Plot api that would make sense but I have an intuition we'd have revamp the API.

Thanks for the feedback :)

[nem0]

Thanks for the answers, in fact most of yout suggested solutions is exactly what I planned to do.

I meant the treeview with columns, not list view. But I manage to solve that too (fake it a little, but it works), it can be seen here (there is still some unnecessary old code left) if anyone wants to do something similar

[guillaumechereau]

I used imgui for an open source voxel editor I just released: https://github.com/guillaumechereau/goxel.

It was the first time I used imgui and I am very happy with it, thanks Omar.

For goxel I made a basic color picker (GoxColorEdit in https://github.com/guillaumechereau/goxel/blob/master/src/imgui_user.inl), that should be easy to adapt to other projects.

[kylawl]

This is the profiler I've been work on for our engine. Hilariously, we can also see that it's taken up the most time this frame :disappointed:

[ocornut]

Do you know what's so slow about it? I've been a few profilers and none of them took noticeable amount of time.

[kylawl]

It's probably something I'm doing, I'll dig a little deeper.

Update As it turns out, it's just death by a thousand cuts. There are so many super tiny events being tracked that just running through the events is soaking up a tonne of time. 3.3 ms total, 0.001ms to render each event.

The snapshot could probably store the events in a more cache friendly way, right now it's potentially hopping all over memory. It's probably easier to just remove all the probes for the tiny fixed time operations.

[ocornut]

Perhaps if you have heavy processing per displayed item and you have no way to batch/lod the smaller one, there might be too many of those displayed.

Here's another profiler. You can scroll/zoom and by default blocks under a certain number of pixels are displayed in a same block (until you zoom in on them).

[ocornut]

@kylawl do you mean the perf are going on imgui's side of on your side? I'd be curious to look at your code and how you are displaying your typical item as well. Not all functions are created equals, things like BeginChild/Begin for example are much more expensive that calling Button which is more expensive than just calling AddRectFilled+AddText on a DrawList

[kylawl]

@ocornut It's really just building the params for each event that is the slowest part, but again 0.001ms per event. It's just there is 3300 events which is still only 3.3ms.

It's really fine, I just found it funny that in the shot I posted it was taking the most time.

At any rate this is what it looks like.

    int32       inc_id          = 0;

    for( const rProfileEvent* timing_event : stack_level )
    {
        float       local_ms        = timing_event->GetTotalDuration();

        if( inc_id > 0 )
        {
            ImGui::SameLine();
        }

        rProfileStart( "Read Event" ); // 0.001ms from here

        float       percentage      = local_ms / frame_total_ms;
        float       width           = rMax(max_width * percentage, 2.0f);

        float       start_percent   = rGetTickTimeMs(frame_start_ticks, timing_event->mData0) / frame_total_ms;
        float       start_x         = max_width * start_percent;

        float       hue             = rNameUtils::GetHueFromString(timing_event->mName, timing_event->mEventID);
        ImColor     button_color    = ImColor::HSV(hue, 0.8f, 0.8f, 0.6f);

        ImVec2      text_size       = ImGui::GetWindowFont()->CalcTextSizeA(ImGui::GetWindowFontSize(), rFloatMax, rFloatMax, timing_event->mName);
        const char* text            = width > (text_size.x * 0.25f) ? timing_event->mName : "";

        rProfileStop();  // 0.001ms to here

        ImGui::PushStyleColor(ImGuiCol_Button, button_color);
        ImGui::PushStyleColor(ImGuiCol_ButtonHovered, ImColor::HSV(hue, 0.8f, 0.8f));
        ImGui::PushStyleColor(ImGuiCol_ButtonActive, ImColor::HSV(hue, 0.6f, 0.6f));
        ImGui::PushStyleVar(ImGuiStyleVar_FramePadding, ImVec2(0, 0));

        ImGui::SetCursorPosX(start_x);
        ButtonEx(text, ImVec2(width, ImGui::GetTextLineHeight() * 2), 0)

        ImGui::PopStyleVar(1);
        ImGui::PopStyleColor(3);

        if( ImGui::IsItemHovered() )
        {
            EventToolTip(timing_event, frame_total_ms, frame_start_ticks);
        }

        inc_id++;
    }

[kylawl]

In the end I will probably end up merging events and only expand them when you zoom as you suggest.

[ocornut]

ImColor::HSV isn't that cheap, better off not calling it 3 times per marker if you can pre-compute that out and you have thousands of markers. Also I am guessing you'd want to avoid calling rNameUtils::GetHueFromString as well. Those two things probably add up. Looks like to can also move PushStyleVar/PopStyleVar outside of the loop and save a little bit here (but that one is rather cheap).

[kylawl]

So I did what you suggested, saved ~1.2 ms in release so more than half.

Cheers

[ocornut]

Thanks @guillaumechereau and @nem0, I included your pictures (with links) in the release note for 1.46. Keep posting pictures :)

edit from skaven_ on twitter

[ocornut]

From Simon Geilfus using Cinder and his cinder block for imgui ( https://github.com/simongeilfus/Cinder-ImGui )

[dougbinks]

In progress conversion from libRocket to ImGui for Avoyd editor menu.

[ocornut]

Desktop/offline data building tool

[ocornut]

Not really any fancy use visible, but spotted in Oculus Medium talk https://www.youtube.com/watch?v=gqrftCjQ4Q8

And Media Molecule's Dreams which I mentioned before https://www.youtube.com/watch?v=FD8y-8Rcctk

[jarikomppa]

Working on a (non-trivial) image to zx spectrum converter. Working with ImGui has made the UI work really simple. Features include a modifier stack, with each modifier having its own custom set of UI to tweak.

The project is at https://github.com/jarikomppa/img2spec

[nem0]

Curve editor:

WIP source code https://github.com/nem0/LumixEngine/blob/curve_editor/src/studio/imgui_user.inl

[ocornut]

Some stuff I gathered:

LuxCode GUI for LuxRender ( http://www.luxrender.net/ ) Looks like the bulk of LuxRender is e.g. inside Blender, but this is their developer and standalone app.

Using ImGui for injecting overlay into executables

[ocornut]

Really ought to do something about this default theme, namely the red buttons. If someone want to submit a great looking tweak of the default theme I'd appreciate that (while waiting for bigger theme reoverhaull)

[ocornut]

Someone sent me this video of a animation/curve editor they made https://www.youtube.com/watch?v=hBTLeM_ujSI

[nem0]

Cool, do you know whether there is a source code for that curve editor?

[ocornut]

It's not available unfortunately. I'm pretty sure the guy got inspired by your link above which I sent him when he asked about the possibility of a curve editor, then he built that.

[warmist]

A toy for playing with shaders - like shadertoy but no internet required and more flexible.

[vinjn]

uCreator - a 3d scene editor for AR / VR, heavily inspired by Unity3D editor.