Gallery: Post your screenshots / code here (PART 5)
ocornut opened this issue ยท 86 comments
This is Part 5. I am splitting issues to reduce loading times and locked the old ones.
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
[...] see gallery label link above for newer pages.
You can post your screenshots here!
Screenshot of my custom OpenGL Engine using imgui. Features a small file explorer for changing textures in real time, postprocess compositor editing, colorpicker for lighning colors, Unity like hierarchy tree with inspector, draggable and dockable windows and a console log for info/warnings/errors. ๐ ๐
Nothing too special, playing with the image picker for some mesh painting:
Browser with preview
Some tooling pictures from the game "TT Isle of Man Ride of the Edge" visible in their dev diary
https://www.youtube.com/watch?v=xfRMo4vKWeA
At 00:31, 3:49, 4:28
WIP simple image editor using ImGui, STB and ImWindow with DX11 backend.
What is 'STB' @thennequin?
What is 'STB' @thennequin?
Small 3D software engine, rendered with ImGui drawlines. Meant to be used on top of IMGUI windows for 2D/3D debugdraw and overlay purposes.
This simple/hackable text editor has been my code & coffee project for a while. Poor-man's Vim mode (shown in the gif), and regular mode. Syntax highlighting, undo/redo, etc. I'll open source it when it is done.
@berkay2578 Can we get your color theme please?
@ongamex Sure, here you go:
ImGuiStyle* style = &ImGui::GetStyle(); // you probably shouldn't do this, it's just a habit of mine
style->WindowPadding = ImVec2(10.0f, 10.0f);
style->WindowRounding = 5.0f;
style->ChildWindowRounding = 5.0f;
style->FramePadding = ImVec2(5.0f, 4.0f);
style->FrameRounding = 5.0f;
style->ItemSpacing = ImVec2(5.0f, 5.0f);
style->ItemInnerSpacing = ImVec2(10.0f, 10.0f);
style->IndentSpacing = 15.0f;
style->ScrollbarSize = 16.0f;
style->ScrollbarRounding = 5.0f;
style->GrabMinSize = 7.0f;
style->GrabRounding = 2.0f;
style->Colors[ImGuiCol_Text] = ImVec4(0.00f, 0.00f, 0.00f, 1.00f);
style->Colors[ImGuiCol_TextDisabled] = ImVec4(0.59f, 0.59f, 0.59f, 1.00f);
style->Colors[ImGuiCol_WindowBg] = ImVec4(1.00f, 1.00f, 1.00f, 1.00f);
style->Colors[ImGuiCol_ChildWindowBg] = ImVec4(0.92f, 0.92f, 0.92f, 1.00f);
style->Colors[ImGuiCol_PopupBg] = ImVec4(0.05f, 0.05f, 0.10f, 1.00f);
style->Colors[ImGuiCol_Border] = ImVec4(0.00f, 0.00f, 0.00f, 0.80f);
style->Colors[ImGuiCol_BorderShadow] = ImVec4(0.00f, 0.00f, 0.00f, 0.00f);
style->Colors[ImGuiCol_FrameBg] = ImVec4(0.71f, 0.71f, 0.71f, 0.39f);
style->Colors[ImGuiCol_FrameBgHovered] = ImVec4(0.00f, 0.59f, 0.80f, 0.43f);
style->Colors[ImGuiCol_FrameBgActive] = ImVec4(0.00f, 0.47f, 0.71f, 0.67f);
style->Colors[ImGuiCol_TitleBg] = ImVec4(1.00f, 1.00f, 1.00f, 0.80f);
style->Colors[ImGuiCol_TitleBgCollapsed] = ImVec4(0.78f, 0.78f, 0.78f, 0.39f);
style->Colors[ImGuiCol_TitleBgActive] = ImVec4(1.00f, 1.00f, 1.00f, 1.00f);
style->Colors[ImGuiCol_MenuBarBg] = ImVec4(0.90f, 0.90f, 0.90f, 1.00f);
style->Colors[ImGuiCol_ScrollbarBg] = ImVec4(0.20f, 0.25f, 0.30f, 0.60f);
style->Colors[ImGuiCol_ScrollbarGrab] = ImVec4(0.00f, 0.00f, 0.00f, 0.39f);
style->Colors[ImGuiCol_ScrollbarGrabHovered] = ImVec4(0.00f, 0.00f, 0.00f, 0.59f);
style->Colors[ImGuiCol_ScrollbarGrabActive] = ImVec4(0.00f, 0.00f, 0.00f, 0.78f);
style->Colors[ImGuiCol_ComboBg] = ImVec4(0.78f, 0.78f, 0.78f, 0.98f);
style->Colors[ImGuiCol_CheckMark] = ImVec4(0.27f, 0.59f, 0.75f, 1.00f);
style->Colors[ImGuiCol_SliderGrab] = ImVec4(0.00f, 0.00f, 0.00f, 0.35f);
style->Colors[ImGuiCol_SliderGrabActive] = ImVec4(0.00f, 0.00f, 0.00f, 0.59f);
style->Colors[ImGuiCol_Button] = ImVec4(0.00f, 0.00f, 0.00f, 0.27f);
style->Colors[ImGuiCol_ButtonHovered] = ImVec4(0.00f, 0.59f, 0.80f, 0.43f);
style->Colors[ImGuiCol_ButtonActive] = ImVec4(0.00f, 0.47f, 0.71f, 0.67f);
style->Colors[ImGuiCol_Header] = ImVec4(0.71f, 0.71f, 0.71f, 0.39f);
style->Colors[ImGuiCol_HeaderHovered] = ImVec4(0.20f, 0.51f, 0.67f, 1.00f);
style->Colors[ImGuiCol_HeaderActive] = ImVec4(0.08f, 0.39f, 0.55f, 1.00f);
style->Colors[ImGuiCol_Separator] = ImVec4(0.00f, 0.00f, 0.00f, 1.00f);
style->Colors[ImGuiCol_SeparatorHovered] = ImVec4(0.27f, 0.59f, 0.75f, 1.00f);
style->Colors[ImGuiCol_SeparatorActive] = ImVec4(0.08f, 0.39f, 0.55f, 1.00f);
style->Colors[ImGuiCol_ResizeGrip] = ImVec4(0.00f, 0.00f, 0.00f, 0.78f);
style->Colors[ImGuiCol_ResizeGripHovered] = ImVec4(0.27f, 0.59f, 0.75f, 0.78f);
style->Colors[ImGuiCol_ResizeGripActive] = ImVec4(0.08f, 0.39f, 0.55f, 0.78f);
style->Colors[ImGuiCol_CloseButton] = ImVec4(0.00f, 0.00f, 0.00f, 0.50f);
style->Colors[ImGuiCol_CloseButtonHovered] = ImVec4(0.71f, 0.71f, 0.71f, 0.60f);
style->Colors[ImGuiCol_CloseButtonActive] = ImVec4(0.59f, 0.59f, 0.59f, 1.00f);
style->Colors[ImGuiCol_PlotLines] = ImVec4(1.00f, 1.00f, 1.00f, 1.00f);
style->Colors[ImGuiCol_PlotLinesHovered] = ImVec4(0.90f, 0.70f, 0.00f, 1.00f);
style->Colors[ImGuiCol_PlotHistogram] = ImVec4(0.90f, 0.70f, 0.00f, 1.00f);
style->Colors[ImGuiCol_PlotHistogramHovered] = ImVec4(1.00f, 0.60f, 0.00f, 1.00f);
style->Colors[ImGuiCol_TextSelectedBg] = ImVec4(0.27f, 0.59f, 0.75f, 1.00f);
style->Colors[ImGuiCol_ModalWindowDarkening] = ImVec4(0.00f, 0.00f, 0.00f, 0.35f);
@berkay2578 - I don't think this is much different to imgui standard. If you mean the syntax colours, I copied them from VC's dark theme (ish). I'll put it all up with the code when I finish this up...
I mean... I... ugh... Did I miss some edits? I don't know why you have mentioned me. @cmaughan
Sorry @berkay2578, too much coffee ;-)
From Mount & Blade II: Bannerlord blog post:
https://www.taleworlds.com/en/Games/Bannerlord/Blog/25
The engine that I made for myself(and I'm still working on) and the game that I start to work on.
https://twitter.com/ongamex92
I'm currently working with Unity, and here's one of the first thing I made, sorry... :)
I'm currently working with Unity, and here's one of the first thing I made, sorry... :)
Nice! Are you going to publish the code for that? I think a few people would be interested. (@sronsse was trying to do it at some point too).
Nice! Are you going to publish the code for that? I think a few people would be interested. (@sronsse was trying to do it at some point too).
I'll try but It's part of some client work for now, I'll need to discuss with him about it (but it's a big structure with a lot of security concerns, I can't guarantee anything...).
But basically I've taken the ImGuiNET port and build it with UNITY, it was quite straightforward (I just had to move things like System.Numerics vectors to UNITY vectors for instance). And for the rendering part, it's super simple, I'm just using the GL commands provided by the engine with a custom shader to handle the clipping rects, I'll probably move it to a more optimized method later but for now it's doing the job.
Gui for What the Loop, which should be released soon for iOS. Made with OpenFrameworks.
The debug/reverse engineering UI of my SDL2+OpenGL ES 2 port of the 1984 Atari ST game SunDog:
Having used a lot of GUI toolkits in the past, I was pleasantly surprised on how easy and effortless imgui is to use and integrate, It's like the printf() of GUIs :-)
fully functional resolve-liked widget.
Exact usage unknown, but Nintendo' SNES Mini lists dear imgui in its legal blurb:
(spotted by /mkosler on twitter)
fully functional resolve-liked widget.
Is the code available somewhere? I think a few people would be interested.
Some shots I found:
karmaMapper
https://github.com/Karma-Kusala/karmaMapper
SpiritCalc
https://github.com/ShrewdSpirit/SpiritCalc
@BalazsJako also wrote a text editor with coloring:
https://github.com/BalazsJako/ImGuiColorTextEdit
fully functional resolve-liked widget.
Is the code available somewhere? I think a few people would be interested.
regarding the wheel and shadow, I extended the ImDrawList struct to push shaderID by item like textureID so that I can easily rebind per-item custom shader if required. anything else is just layout.
@edin-purkovic I noticed your comissions to the old galleries with your Thorium editor - I was curious how you made the windows and window controls. Are there any tools in ImGui for that or is that a third party library?
This is the menu I'm working on currently.
Is that even dear imgui?
Yes, it is.
Wow, I can't believe it. How much code did you have to change to make it look like that? Is the code available?
As a dev I'm pretty impressed, as a player I'm kinda put off by the purpose of that software.
I didn't change anything about imgui. I made my own functions for combo boxes, toggle buttons, sliders and other things like categories. I figured it would be easier that way since otherwise updating would be a pain in the ass. And no, the code isn't available, sorry
Just finished WaveEdit for Synthesis Technology. I was really pushing imgui to its limits with this one, but I decided to keep hacking it to completion.
https://github.com/AndrewBelt/WaveEdit
I'm surprised for an audio app that you didn't go and use custom widgets such as Knobs (quickly hacked example here #942 (comment)).
The abundance of large sliders in many imgui apps is quite a troubling problem that we ought to fix in the future!
They fit easily into a text line I guess.
Yes I understand the reason they happen but it is such a waste of screen real-estate.
I like how you are taking advantage of the format string to display your description, this is working well.
Out of curiosity any reason you aren't using DRAG types of widgets more?
Well, they don't give a visual indication of the value, do they? They seem to have just a subset of the functionality of Slider* widgets.
The visual indication makes sense if you have well-defined / obvious bounds, but it's not always the case. The DragFloat() widget can fit in a very small space, which SliderFloat() can't meaningfully do if you are editing floating point value. Holding SHIFT or ALT with a DragFloat() adjust the edition speed.
Nothing very exciting compared to some here, I'm afraid, but I've been using dear imgui to do the UI for b2, my BBC Micro emulator, and I'm pretty pleased with how it's turned out.
Docking UI comes from Flix01's fork plus a few tweaks that I'll be turning into PRs once I get a moment.
Runs on Windows, OS X and Linux, using SDL. I'm using my SDL fork with RenderGeometry patch, so SDL does the dear imgui rendering too.
Bad gif here, but I just wanted to show that I made a styled animated check box, inspired by the pic posted by @Devyre.
Source code is in my fork, or at the bottom of https://github.com/Flix01/imgui/blob/2015-10-Addons/addons/imguivariouscontrols/imguivariouscontrols.cpp (search: CheckboxStyled).
[Edit:] Source code updated with optional custom colors/size/rounding support (used in the second check box). Replaced the bad gif with a better looking one.
Hello,
Please find some screenshots of a small 3d editor written with ImGui, allowing to develop iOS / macOS apps with the same source-code.
Here is the editor view and the rendering view (showing some classic shaders). I use a customised TextEditor control (given by Omar https://github.com/BalazsJako/ImGuiColorTextEdit ) close to work well.
In this view, I intensively use ImGui::Columns, and it's really fast in comparison with native Cocoa controls. Everything was migrated from Cocoa to ImGui 1 year ago. It works like a charm.
In this other view, I use ImGui::TreeNode and ImGui::Columns together, allowing to easily customise each row depending on the type of the node. And there is a property panel on the right, which is completely customised depending on the type of node too. In this case, this is just a Sprite with 4 textures.
And obviously, the main benefit of ImGui immediate API is to debug :)
It allows to draw and verify, step-by-step, everything which is drawn on the rendering screen. I use a simple list of items exposing all the rendering parameters. It took 10 minutes to have the first debug window, and then 2 hours to add fancy contrasted colors allowing to distinguish quickly if the items were correctly sorted.
[EDIT] I forgot to say that ImGui is used in the target application too (not only in the editor).
In this case, it is used to benchmark and configure the app :
This project is not open-source unfortunately, but I can share some ImGui tricks if people ask.
That looks really nice @itamago!
What did you do to get highlighting working across an entire row when you select it?
I haven't tried anything so full featured, so I'm also just kinda curious which element was the most challenging to make work in imgui.
What did you do to get highlighting working across an entire row when you select it?
@michaelbartnett You can use Selectable() with the ImGuiSelectableFlags_SpanAllColumns flag. There are perhaps a few other tricks to get the interaction right, I haven't been using columns enough yet to tell.
@michaelbartnett as Omar said, a Selectable() at the beginning of the row does the trick with ImGuiSelectableFlags_SpanAllColumns enabled.
This is the same trick used when drawing rows in the tree-control.
Saw this screenshot in an article and immediately recognized the awesome Dear Imgui.
I used imgui in my attempt at a game boy emulator:
Game Boy Emulator
dear imgui has been my butter and bread in whatever I was programming recently, so here's a few things
A simple debug window for controller input, shows axis values for connected xinput devices, what buttons are pressed, allows to set vibration etc.
Modified and adapted the example node graph editor to actually allow for dynamic connections between nodes (drag and drop) and also, not visible in this screenshot obviously, nodes are actually using a custom type system in the background that implements the basics of Cs object model and comes with reflection and attributes for data fields to allow for dynamic and data driven definition of node types. Creates an output that could be used to generate code from.
And finally, me being too lazy to setup constant buffers and shaders so I made billboards in full 3D with z-testing using dear imguis low level drawing API. Not very spectacular but shows how great this library is for prototyping.
Oh and also in the last screenshot you see a glimpse of this:
Very simple visualization tool to catch hickups in the frame rate.
Merlin3D by @BalazsJako:
Using it in my own engine as a shader editor/inspector within my frame capture facility:
Tooltips for identifiers are provided by using reflection service of DX11.
From Oculus Medium blog (which are good reads)
https://developer.oculus.com/blog/medium-under-the-hood-part-3-move-tool-and-asynchronous-operations-/
Dear imgui & node editor window with zoom and pan
Looking nice @Brianfog! Perhaps post a higher resolution GIF if you have one. How are you handling the font zooming? Regular bilinear filtering of a same oversampled font?
Here is a short video. The filtering didn't turn out as good as I wanted so I went with the second solution. Dear Imgui made it pretty easy to implement ๐
https://procedural.itch.io/lib0-engine
A live coding environment using Dear Imgui
(Not by me)
Here's the picture from lib0 engine (by @procedural)
Another thing from twitter by @tseeker
And a talk by @Pagghiu at Italian C++ conference::
https://pagghiu.github.io/dev/Immediate-Mode-Graphical-User-Interfaces-in-C++-italiancpp2017-en/
I've been using imgui in my 3D fractal path tracer:
Curve editor with timeline
saw this project using imgui https://github.com/glimpse-project/glimpse
Link to higher quality twitter gif
Just recently got my haxe bindings to a usable state and decided to convert one of my tools to use them.
The tool allows you to create track files for a top down racing game I'm working on.
You import SVG bezier paths made in something like gimp or inkscape and the track skeleton is created allowing you to stretch the offsets of each track point. The final stage is painting tiles onto the track to create the design.
sky color editor
A SDF Font generator. wip
Graphite: an experimental 3D modeler.
This image: fluid simulation on a sphere.
Using ImGui 1.53 with the new ''Light' style, the LUA bindings, and a custom object model.
Properties editors and command dialogs are generated on the fly, by consulting the object model.
this is a Radio Button Labeled. the label is inside the radio :) for space saving in some case :)
This is for our real time vector field generator, VectorayGen!
And you can see videos of the software here: https://jangafx.com/vectoraygen-starter-tutorial-series/
@CedricGuillemet released a little timeline/sequencer widget (part of the ImGuizmo repo)
https://github.com/CedricGuillemet/ImGuizmo
"A WIP little sequencer used to edit frame start/end for different events in a timeline. "
I made a game engine with Leon Brands and used ImGUI completely for the editor. Working great so far! The project is open-source here: https://github.com/HyperionDH/Tristeon
However I wouldn't recommend anybody to use it right now because the master is a mess because of the lack of branch usage.
a File Dialog with Dirent.h (https://github.com/tronkko/dirent) for the FileSystems Requests :)
Source code here : https://github.com/aiekick/ImGuiFileDialog
I've upgraded my curve editor
Readers, note that @nem0 also posted the code for this widget here:
#786 (comment)
Greatful to use dear, imgui for open-source, cross-platform UI inside the Intelยฎ RealSenseโข SDK
Here's a couple screenshots of Openplanet, which is a third-party extension project for ManiaPlanet (Trackmania, Shootmania, etc.)
And a bit of an older screenshot, but with more action:
Here's a metrics graph from Intel's GameTechDev. (not mine, but maybe someone else will find it useful too)
I can't make BASIC8 (https://paladin-t.github.io/b8/) so easy to use without ImGui. Saved me lots of time on the work of GUI.
GPUTop, a system wide GPU analysis tool for Intel GPU on Linux : https://github.com/rib/gputop/
UI is also deployed to emscripten/webgl at http://www.gputop.com/
Been gutting the daylights out of @thedmd 's node editor and @BalazsJako 's text editor this weekend getting shader-graphs setup and generating code in both GLSL and HLSL (that actually works, mostly).
Most of the shader generation was stupid trivial ... except for the whole vertex-data / linkage bit that I've rewritten 5 or 6 times now.
@JSandusky Any source code will be published?
@ArnCarveris the shader specific stuff will be. I'm spinning it off into an Urho3D shader editor over the course of this week and I'll be OSS'ing that at the end of the week (doubt it'll take more than 1 or 2 more days really).
The final stuff probably won't be since I want to take it off into a direction similar to TFX in Bungie's Destiny and a much larger swathe than just shading in the pipeline.
I posted earlier in this thread about a little editor I had been working on. It has moved along a little bit - and can now be used with Qt or ImGui, and source is available for those interested. It supports a notepad-like editing mode, and a Vim mode. Still a work in progress, but it is probably stable enough to use :)
There are build badges which take you to Mac/Linux & PC CI, and unit tests, in particular for the Vim mode.
It is on my page here: https://github.com/cmaughan/zep
I managed to get this running almost flawlessly on an ESP32 with a TFT screen, just need to work out how to get the fonts to display correctly and get a pixel buffer going with the limited RAM
Code so far: https://pastebin.com/qCvDQ49v
https://i.imgur.com/lbYkYem.gifv
Edit: reading the vert buffer correctly
This is Part 5. Locking this now. Moving to Part 6.
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!)