Gallery: Post your screenshots / code here (PART 1)
ocornut opened this issue ยท 88 comments
This is Part 1, I am splitting issues to reduce loading times and avoid github collapsing messages.
Browse all threads using the gallery label.
Also see: Software using dear imgui (you can help complete the list!)
Screenshots Part 1 #123
Screenshots Part 2 #539
Screenshots Part 3 #772
Screenshots Part 4 #973
Screenshots Part 5 #1269
Screenshots Part 6 #1607
Screenshots Part 7 #1902
Screenshots Part 8 #2265
Screenshots Part 9 #2529
Screenshots Part 10 #2847
Screenshots Part 11 #3075
Screenshots Part 12 #3488
Screenshots Part 13 #3793
Screenshots Part 14 #4451
Screenshots Part 15 #5243
Screenshots Part 16 #5886
Screenshots Part 17 #6478
Screenshots Part 18 #6897
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 usaget! (I have a few things that are unfortunately under NDA at the moment, so user contributions are welcome)
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.
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
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
#28
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: "
(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
Not sure what is happening in this video :) cinder stuff by Bruce Lane
https://www.youtube.com/watch?v=gtYlUo9Wq6I&feature=youtu.be
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:
this is awesome (just found this) - this should be a wiki page IMHO!!
thank you Omar, I agree this page should be better seen, like @extrawurst says ;-)
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 :)
@extrawurst C-->D wrappers put to good use
http://extrawurst.github.io/dlang/metaprogramming/imgui/2015/05/28/dlang-annotations.html
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
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 :)
Selection of stuff gathered
Techcompliant
Retrocommander (merely a test)
ExSciVis
From thevaber
MemoryEditor ( https://gist.github.com/ocornut/0673e37e54aff644298b )
Trillek
(old)
Just a very simple screenshot of using ImGui in my 3D physics engine.
Simple timeline looking thing
Trillek (again, and WIP)
spdlog sinking log information to an ImGUI window
I am porting LumixEngine from Qt to ImGui, I have not decided yet whether I will stick with Qt or switch
@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.
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.
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 #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 #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 :)
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
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.
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 ๐
Do you know what's so slow about it? I've been a few profilers and none of them took noticeable amount of time.
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.
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).
@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
@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++;
}In the end I will probably end up merging events and only expand them when you zoom as you suggest.
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).
So I did what you suggested, saved ~1.2 ms in release so more than half.
Cheers
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
From Simon Geilfus using Cinder and his cinder block for imgui ( https://github.com/simongeilfus/Cinder-ImGui )
Desktop/offline data building tool
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
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
Curve editor:
WIP source code https://github.com/nem0/LumixEngine/blob/curve_editor/src/studio/imgui_user.inl
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
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)
Someone sent me this video of a animation/curve editor they made
https://www.youtube.com/watch?v=hBTLeM_ujSI
Cool, do you know whether there is a source code for that curve editor?
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.
A toy for playing with shaders - like shadertoy but no internet required and more flexible.
uCreator - a 3d scene editor for AR / VR, heavily inspired by Unity3D editor.
How are you doing the tabs? I'm doing something similar but using the Win32 API to implement the tabs so each window is an actual OS window that renders OpenGL.
@Cthutu I am using the awesome https://github.com/thennequin/ImWindow from @thennequin
Thanks!
On Tue, 29 Dec 2015 at 20:59 Vinjn Zhang notifications@github.com wrote:
@Cthutu https://github.com/Cthutu I am using the awesome
https://github.com/thennequin/ImWindow from @thennequin
https://github.com/thennequinโ
Reply to this email directly or view it on GitHub
#123 (comment).
So assume the screenshot on his site aren't up to date and he made fancy tabs. It'd be nice if the tabs were merged designed and merged back into core lib.
I was thinking the same thing. I think I will stick to my hybrid approach
of Win32 handling docking and tabs that contain OpenGL contexts for ImGUI.
That way you can drag a window outside the confines of the original docking
window.
On Wed, 30 Dec 2015 at 03:39 omar notifications@github.com wrote:
So assume the screenshot on his site aren't up to date and he made fancy
tabs. It'd be nice if the tabs were merged designed and merged back into
core lib.โ
Reply to this email directly or view it on GitHub
#123 (comment).
That way you can drag a window outside the confines of the original docking window.
This is exactly what the ImWindow code linked above is doing afaik.
Really? It looked like it was doing it in one OpenGL context using ImGUI
to do everything. I will look at the source code closer.
On Wed, 30 Dec 2015 at 09:33 omar notifications@github.com wrote:
That way you can drag a window outside the confines of the original
docking window.This is exactly what the ImWindow code linked above is doing afaik.
โ
Reply to this email directly or view it on GitHub
#123 (comment).
I checked the source code and it only uses a separate window if you break
away. The individual tabbed windows under one frame still operate on one
Win32 handle.
On Wed, 30 Dec 2015 at 10:29 Matt Davies mattie.davies@gmail.com wrote:
Really? It looked like it was doing it in one OpenGL context using ImGUI
to do everything. I will look at the source code closer.On Wed, 30 Dec 2015 at 09:33 omar notifications@github.com wrote:
That way you can drag a window outside the confines of the original
docking window.This is exactly what the ImWindow code linked above is doing afaik.
โ
Reply to this email directly or view it on GitHub
#123 (comment).
Vertex Engine 8, new high-performance hobby project OpenGL 4 engine.
Thank you for imgui!
Docking in https://github.com/nem0/lumixengine
simple API
IMGUI_API bool BeginDock(const char* label, bool* opened = nullptr);
IMGUI_API void EndDock();
Animation timeline in my sprite editor for current game. (dear ImGui called from Squirrel script)
Extra from JohanWendin, who is writing a tracker
Something from some paper (forgot exact source)
That tracker looks sweet! :)
Thanks Daniel :)
It was planned as an internal tool for chip music creation. (with some more focus on programable waveforms for the instrument creation than f.e. FT2 provides - think Famitracker rather than Renoise). If I ever get it working for my needs I guess I could throw in XM loading/saving too - or at least XI export :)
A vast majority of people are much better off with f.e. Renoise or OpenMPT instead ^^ (or good old FT2).
@johanwendin I see. Something similar to AHX/HivelyTracker then?
@emoon honest, I hadn't heard of them before. hides but looking into Hively now :)
(just added custom effect handling to my XM player so "worst" case I can just use that :) )
@johanwendin Ah. Yeah it's "based" of on AHX from Amiga (example here https://www.youtube.com/watch?v=Wxy03dRbApQ) which is also a chiptracker.
Is any of the profilers free-to-use / source available? :)
@nem0 that docking looks sweet! :) care to share the code?
woohoo ๐
Greetings!
First of all: thank you so much @ocornut for this incredible piece of software!
I'm currently working on a DirectX hooking library similar to Valves Steam In-game Overlay which sadly is closed-source.
Some working examples:
Half-Life 2 (DX9, 32-Bit)
Castlevania: Lords of Shadow โ Ultimate Edition (DX9Ex, 32-Bit, Output gets distorted when ImGui is rendered)
Left 4 Dead (DX9, 32-Bit)
Bioshock 2 (DX10, 32-Bit)
Borderlands (DX9, 32-Bit)
Borderlands 2 (DX9, 32-Bit)
snip
Hopefully I'll get those pesky DX10/11 games to cooperate too :)
Nice @nefarius
The coloring issues in Valve game is due to gamma correction. Depending on where the imgui polygons are rendered I imagine some later pass is applying a gamma curve. You can either move the imgui render in a different pass of the game engine, or counteract the effect of gamma by powering colors by 1/2.2.
Not sure the high amount of screenshots here is really necessary especially since they are big files and some don't even show any of ImGui. Don't hesitate to post details in a separate thread if you figure out how to get those games to render and the answer is related to the demo imgui_impl_xxx code. Most probably the issues are related to where/how you inject the additional render.
@ocornut Right, sorry for going overboard a bit :) I removed the "empty" ones.
Since my knowledge of DirectX higher than version 9 is hitting its limits I'd really appreciate every hint on how I could get it to work.
I'm injecting the rendering into
IDirect3DDevice9::PresentIDirect3DDevice9Ex::PresentExIDXGISwapChain::Present
depending on the DX version.
Made yet another crappy curve editor kinda thingy. Rather trivial implementation, not horribly user friendly, but seems to do the trick.
Source (and "documentation") at https://github.com/jarikomppa/img2spec/blob/master/src/imgui/imgui_user.inl
Could possibly be a base for a "proper" curve editor, who knows. Consider it public domain. If someone turns that into a better one, I'd naturally be interested in it. =)
@jarikomppa Cool! Also that sort of code is very useful to me to work on improving the private API. May I suggest including imgui_internal.h so your code doesn't have to be in imgui_user.inl, and easier to share/distribute perhaps.
@haikarainen Thanks, here's hoping you become a millionaire then ;) Colors wise, seen this problem many times, I keep forgetting the exact solution but read two posts above, probably apply a 1/2.2 power curve. If you can confirm what fixes it correctly for you, I should probably add a FAQ for it.
EDIT Another picture from LumixEngine https://github.com/nem0/LumixEngine
@ocornut I actually solved it yesterday just after I posted it.
The problem
Since I have an sRGB backbuffer, anything I render directly to the window is expected to be in sRGB colorspace, however the reference implementations of renderDrawListsFn (found under examples) render in linear space.
The solution
EDIT: Previous solution redacted as misleading, caused by my own confusion with regards to sRGB (sorry!)
I fixed it by simply disabling GL_FRAMEBUFFER_SRGB before rendering ImGui, and then enabling it again directly afterwards.
Also that Lumix UI looks incredible, is that still ImGui core functionality?
@haikarainen Lumix Engine has custom docking, curve editor, node editor, color picker and small change in histogram, everything else is dear imgui. The skin is from #511
@nem0 Thanks man! That skin is amazing, much cleaner for tools development imo. I vote for making it the standard skin in ImGui, if some of you agree I'll create an issue out of it.
EDIT: Are the docking/color picking parts opensource? :)
There's many things to consider when choosing a skin. That skin rely on changes discussed in #511 and curves + borders are rather expensive in term of polygon count. Also I'm not sure that one works well with transparent windows which are useful in many sort of applications. It can't be default at least probably until bake curved borders into the texture atlas (I would take a serious PR for that). And generally skinning has lots of implications, I want to improve it but it takes time.
The docking is in #351 and the color picker is in #346. The works provided in those thread has been super helpful. (I took over the color picker recently to finish it and fully integrate it within the main distribution but been unbearably busy those past few weeks, will get back on it probably after 22)
Merging color picker is a rather small task. Docking would be a great step but more work to take it from "functional piece of code you can grab" to "api and stored data stable enough, useful for the majority of people". Tho nem0 has done a lot of good work on that already. For now I'd suggest grabbing the piece that nem0 cleaned up.
@ocornut I see, thanks a ton for your hard work ๐
Success! Re-creating the render target view before calling ImGui_ImplDX11_NewFrame in IDXGISwapChain::Present did the trick:
@ocornut thanks again for your amazing project!
Hi!
We are building a realtime 360 video stitcher for VR and using dear imgui for our gui :D
This is Part 1. I am splitting issues to reduce loading times and locked the old ones.
Also see: Software using dear imgui (you can help complete the list!)
ไป @Pagghiu
nice