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

[ocornut]

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!

[KyoKazehaya]

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. 😄 👍

[JWki]

Nothing too special, playing with the image picker for some mesh painting:

[nem0]

Browser with preview

[ocornut]

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

[thennequin]

WIP simple image editor using ImGui, STB and ImWindow with DX11 backend.

[codecnotsupported]

What is 'STB' @thennequin?

[ocornut]

What is 'STB' @thennequin?

https://github.com/nothings/stb/

[r-lyeh-archived]

Small 3D software engine, rendered with ImGui drawlines. Meant to be used on top of IMGUI windows for 2D/3D debugdraw and overlay purposes.

[berkay2578]

I'm using ImGui to customise the good old MW: 2005 to my liking, I'm even using it do draw my own HUD (well, technically only a speedometer, for now)!

(image does no justice, take a look at the gif below)

gif

another one:

gif 2

[cmaughan]

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.

[ongamex]

@berkay2578 Can we get your color theme please?

[berkay2578]

@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

[cmaughan]

Sorry @berkay2578, too much coffee ;-)

[ocornut]

Cheevos Explorer If I am not mistaken this is by @leiradel

gpuvis https://github.com/mikesart/gpuvis

[leiradel]

Here's a more up-to-date screen shot.

I've released the source code here.

[ocornut]

From Mount & Blade II: Bannerlord blog post: https://www.taleworlds.com/en/Games/Bannerlord/Blog/25

[ongamex]

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

[slages]

I'm currently working with Unity, and here's one of the first thing I made, sorry... :)

[ocornut]

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

[slages]

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.

[hamoid]

Gui for What the Loop, which should be released soon for iOS. Made with OpenFrameworks.

[laanwj]

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

[kingeric1992]

fully functional resolve-liked widget.

[ocornut]

Exact usage unknown, but Nintendo' SNES Mini lists dear imgui in its legal blurb: (spotted by /mkosler on twitter)

[ocornut]

@kingeric1992

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

[ocornut]

@BalazsJako also wrote a text editor with coloring: https://github.com/BalazsJako/ImGuiColorTextEdit

[kingeric1992]

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.

[ghost]

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

[Devyre]

This is the menu I'm working on currently.

[nem0]

Is that even dear imgui?

[Devyre]

Yes, it is.

[nem0]

Wow, I can't believe it. How much code did you have to change to make it look like that? Is the code available?

[JWki]

As a dev I'm pretty impressed, as a player I'm kinda put off by the purpose of that software.

[Devyre]

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

[AndrewBelt]

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

[ocornut]

I'm surprised for an audio app that you didn't go and use custom widgets such as Knobs (quickly hacked example here https://github.com/ocornut/imgui/issues/942#issuecomment-268369298). The abundance of large sliders in many imgui apps is quite a troubling problem that we ought to fix in the future!

[AndrewBelt]

They fit easily into a text line I guess.

[ocornut]

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?

[AndrewBelt]

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.

[ocornut]

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.

[tom-seddon]

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.

[Flix01]

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.

[nem0]

https://enhex.itch.io/hellbreaker

[itamago]

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.

[michaelbartnett]

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.

[ocornut]

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.

[itamago]

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

[drudru]

Saw this screenshot in an article and immediately recognized the awesome Dear Imgui.

Hackaday - ICESL IS A COOL SLICER

[zanders3]

I used imgui in my attempt at a game boy emulator: Game Boy Emulator

[JWki]

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.