Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ocornut opened this issue Feb 7, 2015 · 88 comments
Open

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

ocornut opened this issue Feb 7, 2015 · 88 comments
Labels

Comments

@ocornut
Copy link
Owner

@ocornut ocornut commented Feb 7, 2015

This is Part 1. I am splitting issues to reduce loading times and locked the old ones.
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
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 usaget! (I have a few things that are unfortunately under NDA at the moment, so user contributions are welcome)

new5

@ocornut ocornut added the help wanted label Feb 7, 2015
@unpacklo
Copy link

@unpacklo unpacklo commented Feb 13, 2015

Here's our basic usage, nothing too glamorous:

screenshot-brigador e0cadf2d7520be1b81181761cd0551138d50ad0a 16 51 33 feb 12 2015 release-assertions -3

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
Copy link
Owner Author

@ocornut ocornut commented Feb 26, 2015

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.

debug quadtree

debug profiler

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
lzham_timeline_vis11

@ocornut
Copy link
Owner Author

@ocornut ocornut commented Feb 26, 2015

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
b7xk6r7ccaaayx_ jpg large

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
9f68e53a-8062-11e4-9404-422eabb87588

@ocornut
Copy link
Owner Author

@ocornut ocornut commented Feb 27, 2015

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: "

ar66ytr

@jarikomppa
Copy link

@jarikomppa jarikomppa commented Feb 27, 2015

Quick walkthrough of 20150123 version (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
Copy link
Owner Author

@ocornut ocornut commented Mar 12, 2015

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

@ocornut
Copy link
Owner Author

@ocornut ocornut commented Apr 7, 2015

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.

dsc_9758-s

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

dsc_9816-s

@extrawurst
Copy link
Contributor

@extrawurst extrawurst commented Apr 17, 2015

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

@brucelane
Copy link

@brucelane brucelane commented Apr 17, 2015

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

@emoon
Copy link
Contributor

@emoon emoon commented Apr 17, 2015

vice_prodbg

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
Copy link
Owner Author

@ocornut ocornut commented May 29, 2015

@ocornut
Copy link
Owner Author

@ocornut ocornut commented May 31, 2015

drawdb

@ocornut
Copy link
Owner Author

@ocornut ocornut commented Jun 17, 2015

From @paultech who is making an amazing game, see more at https://twitter.com/techcompliant
38a89052-147d-11e5-808c-0747fc8c3ff2

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
Copy link
Owner Author

@ocornut ocornut commented Jun 23, 2015

From @Pagghiu
03ddb9dc-19a1-11e5-94b6-e60e5299398e

@Pagghiu
Copy link
Contributor

@Pagghiu Pagghiu commented Jun 24, 2015

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 :)

cortexrecognitionpreview1
cortexrecognitionpreview2
cortexrecognitionpreview3

@ocornut
Copy link
Owner Author

@ocornut ocornut commented Aug 2, 2015

Selection of stuff gathered

Techcompliant
oobiifn-opt

Retrocommander (merely a test)
commander

ExSciVis
unnamed-opt

From thevaber
7352c0c2-29c4-11e5-91d0-759fe12d8704

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

@adam4813
Copy link

@adam4813 adam4813 commented Aug 3, 2015

Trillek
tec-entity-tree (old)

@DarrenSweeney
Copy link

@DarrenSweeney DarrenSweeney commented Aug 8, 2015

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

imguiphy

@ocornut
Copy link
Owner Author

@ocornut ocornut commented Aug 25, 2015

From #306
node graph

@ocornut
Copy link
Owner Author

@ocornut ocornut commented Aug 29, 2015

Simple timeline looking thing
time

@Zardoz89
Copy link

@Zardoz89 Zardoz89 commented Sep 15, 2015

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

@nem0
Copy link
Contributor

@nem0 nem0 commented Sep 22, 2015

lumix_imgui

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

@ocornut
Copy link
Owner Author

@ocornut ocornut commented Sep 23, 2015

@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
Copy link
Contributor

@nem0 nem0 commented Sep 23, 2015

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
Copy link
Owner Author

@ocornut ocornut commented Sep 23, 2015

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 :)

@nem0
Copy link
Contributor

@nem0 nem0 commented Sep 23, 2015

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
Copy link
Contributor

@guillaumechereau guillaumechereau commented Oct 5, 2015

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

screenshot0

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.

@ocornut
Copy link
Owner Author

@ocornut ocornut commented Feb 15, 2016

@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
3fcf130e-cece-11e5-878b-c9fe24c1b11a

lumix-cropped

@haikarainen
Copy link

@haikarainen haikarainen commented Feb 15, 2016

@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?

@nem0
Copy link
Contributor

@nem0 nem0 commented Feb 15, 2016

@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

@haikarainen
Copy link

@haikarainen haikarainen commented Feb 15, 2016

@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? :)

@ocornut
Copy link
Owner Author

@ocornut ocornut commented Feb 15, 2016

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.

@haikarainen
Copy link

@haikarainen haikarainen commented Feb 15, 2016

@ocornut I see, thanks a ton for your hard work 👍

@nefarius
Copy link

@nefarius nefarius commented Feb 17, 2016

Success! Re-creating the render target view before calling ImGui_ImplDX11_NewFrame in IDXGISwapChain::Present did the trick:

image

@ocornut thanks again for your amazing project!

@JoNil
Copy link

@JoNil JoNil commented Feb 22, 2016

Hi!

We are building a realtime 360 video stitcher for VR and using dear imgui for our gui :D

oden

@ocornut ocornut changed the title Post your screenshots / code here Post your screenshots / code here (PART 1) Feb 28, 2016
@ocornut
Copy link
Owner Author

@ocornut ocornut commented Feb 28, 2016

This is Part 1. I am splitting issues to reduce loading times and locked the old ones.
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
Also see: Software using dear imgui (you can help complete the list!)

Repository owner locked and limited conversation to collaborators Feb 28, 2016
@ocornut ocornut removed the help wanted label Jan 10, 2017
@ocornut ocornut changed the title Post your screenshots / code here (PART 1) Gallery: Post your screenshots / code here (PART 1) Jun 2, 2017
@ocornut ocornut added the gallery label Aug 6, 2017
Repository owner unlocked this conversation Mar 10, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.