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

[ocornut]

This is Part 7, 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!

[aiekick]

Another Soft for Create/Edit Shaders called NoodlesPlate. manipulate framebuffer/vertex/geometry/fragment in one file over glsl. Can import from Shadertoy, GlslSandbox, VertexShaderArt.

i have implemented many special widgets for uniforms, like checkbox, combobox, sliders all implmented over glsl :

example :

uniform float(maxpoints) uCountVertex; 
uniform mat4(camera:mvp:0.0,0.0:1.0:0.0,0.0,0.0) uCamera;
uniform vec2(buffer:0) uScreenSize;
uniform float(3.0:6.0:3.0) uSlider;
uniform float(0.0:360.0:57.6) uSlider1;
uniform float(0.0:360.0:0.0) uSlider2;
uniform float(time) uTime;
uniform sampler2D(radeau.jpg:true:true:clamp) pattern; // texture to ink
uniform float(checkbox) uCheck;
uniform int(combobox:shape1,shape2,shape3:0) uCombo;

give :

first with Torus Buld Shader by me : https://www.vertexshaderart.com/art/b2AspWSvDsXib8Kkc

Second with Rock-Paper-Scissor-4D from Flexi : https://www.shadertoy.com/view/4sK3RD

Third with Megawave 5 by me : https://www.shadertoy.com/view/Xl3SzH

Last with Sub Earth Tunnel by me : https://www.shadertoy.com/view/lsyBR3

another with a developed menu item :

[sonoro1234]

a filebrowser

with this script https://github.com/sonoro1234/LuaJIT-ImGui/blob/master_auto_implementations/examples/filebrowser_sample.lua

Not nice but useful and without extra imgui code!!

A plotter

code https://github.com/sonoro1234/LuaJIT-ImGui/blob/master_auto_implementations/examples/plotter_sample.lua

[ocornut]

Timelapse View for HG (Mercurial) https://github.com/jschmidt42/timelapse

Show all file revisions in a time-browsable view (designed for Unity mercurial repos) Base all file revision on a common ancestor and sort them out intelligibly. etc.

[e3dos]

A 3d modelling tool that uses physics with opengl

[DrJedikiah]

A cheat menu that I made for Counter Strike Global Offensive. Thanks for creating dear ImGui, it's easy to work edit and design uinterfaces. I made it like slide from right with timing and window pos, I wish there was an animation support.

edit: 5 dislike, csgo players :(

edit2: changed the color and added slider

[abdes]

Template C++ cmake starter project for portable (linux, Windows, Mac) desktop app GUI featuring:

• The amazing ImGui of course, with GLFW/OpenGL3
• Log viewer with persistent config, backend is spdlog
• Setting panel for graphics, with load/save to yaml file
• Load/save of ImGui style and color settings

Updated (29/11/2018) with latest docking branch https://github.com/abdes/asap_app_imgui Still WIP, more enhancements to come...

[eetorres]

I am porting my old atomic structure visualizer to ImGUI. So far it is looking promising, I hope I am doing things fine :) Thanks Ocornut and folks!

I forgot the link (LOL):

https://gitlab.com/eetorres/xmol

[ghost]

Inspired by @abdes, I made a minimal imgui-glfw template app. Just glfw and imgui with OpenGL3. This is for the ultra impatient developer (like myself :smile:)

https://github.com/urddru/imgui-glfw

[crackedmind]

Qt 3d Studio using imgui in runtime

http://code.qt.io/cgit/qt3dstudio/qt3d-runtime.git/tree/src/3rdparty/imgui

[CallumDev]

Model editor over at Librelancer

[brandonpelfrey]

Built a number of tools with a friend on a Dreamcast emulator.

In-app disassembler, debugger, with breakpoints, stepping, register displays. There are also shortcut keys to immediately add a breakpoint, jump the CPU to a particular line of assembly, etc.

Custom logging with modules/levels which can be easily turned off/on. The log has an enormous scrollback, so we calculate the number of lines visible and draw only those relevant from the log.

Can view and dump textures which reside in VRAM, and also see the low-level details of some hardware registers. Not pictured: hovering over hardware registers shows a popup which shows an interpretation of each bit field (most HW registers pack multiple bits of info making it hard to interpret on their own, so the popup helps.)

I love ImGui :+1:

[ice1000]

[Otse6olectric]

Started using Intels RealSense camera this week and came across their c++ implementation of Viewer app (it uses ImGui). Intel RealSense, github link, Youtube example

[dertseha]

HackEd, a graphical editor for the old game System Shock (1994 and compatible) uses Dear ImGui! The editor is written in Go and I've written a dedicated wrapper for ImGui, since the "official" one uses the older API and appears broken/abandoned.

Here's a 4K screenshot with unscaled UI (there's an option to do that as well) to fit all the current windows:

License info is in the About box - thank you very much for this library! I wouldn't have had a proper UI option in Go without it.

edit, adding color style (Go code copied verbatim):

    color := func(r, g, b byte, alpha float32) imgui.Vec4 {
        return imgui.Vec4{X: float32(r) / 255.0, Y: float32(g) / 255.0, Z: float32(b) / 255.0, W: alpha}
    }
    colorDoubleFull := func(alpha float32) imgui.Vec4 { return color(0xC4, 0x38, 0x9F, alpha) }
    colorDoubleDark := func(alpha float32) imgui.Vec4 { return color(0x31, 0x01, 0x38, alpha) }

    colorTripleFull := func(alpha float32) imgui.Vec4 { return color(0x21, 0xFF, 0x43, alpha) }
    colorTripleDark := func(alpha float32) imgui.Vec4 { return color(0x06, 0xCC, 0x94, alpha) }
    colorTripleLight := func(alpha float32) imgui.Vec4 { return color(0x51, 0x99, 0x58, alpha) }

    style := imgui.CurrentStyle()
    style.SetColor(imgui.StyleColorText, colorTripleFull(1.0))
    style.SetColor(imgui.StyleColorTextDisabled, colorTripleDark(1.0))

    style.SetColor(imgui.StyleColorWindowBg, colorDoubleDark(0.80))
    style.SetColor(imgui.StyleColorPopupBg, colorDoubleDark(0.75))

    style.SetColor(imgui.StyleColorTitleBgActive, colorTripleLight(1.0))
    style.SetColor(imgui.StyleColorFrameBg, colorTripleLight(0.54))

    style.SetColor(imgui.StyleColorFrameBgHovered, colorTripleDark(0.4))
    style.SetColor(imgui.StyleColorFrameBgActive, colorTripleDark(0.67))
    style.SetColor(imgui.StyleColorCheckMark, colorTripleDark(1.0))
    style.SetColor(imgui.StyleColorSliderGrabActive, colorTripleDark(1.0))
    style.SetColor(imgui.StyleColorButton, colorTripleDark(0.4))
    style.SetColor(imgui.StyleColorButtonHovered, colorTripleDark(1.0))
    style.SetColor(imgui.StyleColorHeader, colorTripleLight(0.70))
    style.SetColor(imgui.StyleColorHeaderHovered, colorTripleDark(0.8))
    style.SetColor(imgui.StyleColorHeaderActive, colorTripleDark(1.0))
    style.SetColor(imgui.StyleColorResizeGrip, colorTripleDark(0.25))
    style.SetColor(imgui.StyleColorResizeGripHovered, colorTripleDark(0.67))
    style.SetColor(imgui.StyleColorResizeGripActive, colorTripleDark(0.95))
    style.SetColor(imgui.StyleColorTextSelectedBg, colorTripleDark(0.35))

    style.SetColor(imgui.StyleColorSliderGrab, colorDoubleFull(1.0))
    style.SetColor(imgui.StyleColorButtonActive, colorDoubleFull(1.0))
    style.SetColor(imgui.StyleColorSeparatorHovered, colorDoubleFull(0.78))
    style.SetColor(imgui.StyleColorSeparatorActive, colorTripleLight(1.0))

[BrunoLevy]

Graphite 3, upcoming version 1.6.7 with ImGui 1.62 and FontAwesome icons.

[oxysoft]

We are using Unity for our JRPG, but the battles were tough to debug and understand, so we wrote a debugger using IMGUICS (IMGUI for C# with SDL) which the game connects to.

I can hover on messages to reveal which dispatcher it was sent from. I was impressed by the ease at which I could simply render shapes (lines, boxes, circles, etc.) and setup configuration for my elements. The whole tool was made in 1 day!

I will definitely reuse IMGUI in the future, very fast development tool. BTW imguics is quite a bit behind so I don't know if that exists in the latest C++ version, but it would be nice if we could draw without a window. I had to do a hack for this and have one window maximized at all time, talking up the full space. I draw everything with the draw list, except for the config panel.

[ice1000]

@dertseha Could you please share your color style?

[dertseha]

@ice1000 code added to my post. I've selected the colors with the help of the Adobe Color Wheel (Compund mode).

[ice1000]

@dertseha Thank you that really helps 😄

Rewritten in C++ (used a code generator written in Go):

style->Colors[Text] = {0.13f, 1.00f, 0.26f, 1.00f}
style->Colors[TextDisabled] = {0.02f, 0.80f, 0.58f, 1.00f}
style->Colors[WindowBg] = {0.19f, 0.00f, 0.22f, 0.80f}
style->Colors[PopupBg] = {0.19f, 0.00f, 0.22f, 0.75f}
style->Colors[TitleBgActive] = {0.32f, 0.60f, 0.35f, 1.00f}
style->Colors[FrameBg] = {0.32f, 0.60f, 0.35f, 0.54f}
style->Colors[FrameBgHovered] = {0.02f, 0.80f, 0.58f, 0.40f}
style->Colors[FrameBgActive] = {0.02f, 0.80f, 0.58f, 0.67f}
style->Colors[CheckMark] = {0.02f, 0.80f, 0.58f, 1.00f}
style->Colors[SliderGrabActive] = {0.02f, 0.80f, 0.58f, 1.00f}
style->Colors[Button] = {0.02f, 0.80f, 0.58f, 0.40f}
style->Colors[ButtonHovered] = {0.02f, 0.80f, 0.58f, 1.00f}
style->Colors[Header] = {0.32f, 0.60f, 0.35f, 0.70f}
style->Colors[HeaderHovered] = {0.02f, 0.80f, 0.58f, 0.80f}
style->Colors[HeaderActive] = {0.02f, 0.80f, 0.58f, 1.00f}
style->Colors[ResizeGrip] = {0.02f, 0.80f, 0.58f, 0.25f}
style->Colors[ResizeGripHovered] = {0.02f, 0.80f, 0.58f, 0.67f}
style->Colors[ResizeGripActive] = {0.02f, 0.80f, 0.58f, 0.95f}
style->Colors[TextSelectedBg] = {0.02f, 0.80f, 0.58f, 0.35f}
style->Colors[SliderGrab] = {0.77f, 0.22f, 0.62f, 1.00f}
style->Colors[ButtonActive] = {0.77f, 0.22f, 0.62f, 1.00f}
style->Colors[SeparatorHovered] = {0.77f, 0.22f, 0.62f, 0.78f}
style->Colors[SeparatorActive] = {0.32f, 0.60f, 0.35f, 1.00f}

For old C++ standards

colors[Text] = ImVec4(0.13f, 1.00f, 0.26f, 1.00f)
colors[TextDisabled] = ImVec4(0.02f, 0.80f, 0.58f, 1.00f)
colors[WindowBg] = ImVec4(0.19f, 0.00f, 0.22f, 0.80f)
colors[PopupBg] = ImVec4(0.19f, 0.00f, 0.22f, 0.75f)
colors[TitleBgActive] = ImVec4(0.32f, 0.60f, 0.35f, 1.00f)
colors[FrameBg] = ImVec4(0.32f, 0.60f, 0.35f, 0.54f)
colors[FrameBgHovered] = ImVec4(0.02f, 0.80f, 0.58f, 0.40f)
colors[FrameBgActive] = ImVec4(0.02f, 0.80f, 0.58f, 0.67f)
colors[CheckMark] = ImVec4(0.02f, 0.80f, 0.58f, 1.00f)
colors[SliderGrabActive] = ImVec4(0.02f, 0.80f, 0.58f, 1.00f)
colors[Button] = ImVec4(0.02f, 0.80f, 0.58f, 0.40f)
colors[ButtonHovered] = ImVec4(0.02f, 0.80f, 0.58f, 1.00f)
colors[Header] = ImVec4(0.32f, 0.60f, 0.35f, 0.70f)
colors[HeaderHovered] = ImVec4(0.02f, 0.80f, 0.58f, 0.80f)
colors[HeaderActive] = ImVec4(0.02f, 0.80f, 0.58f, 1.00f)
colors[ResizeGrip] = ImVec4(0.02f, 0.80f, 0.58f, 0.25f)
colors[ResizeGripHovered] = ImVec4(0.02f, 0.80f, 0.58f, 0.67f)
colors[ResizeGripActive] = ImVec4(0.02f, 0.80f, 0.58f, 0.95f)
colors[TextSelectedBg] = ImVec4(0.02f, 0.80f, 0.58f, 0.35f)
colors[SliderGrab] = ImVec4(0.77f, 0.22f, 0.62f, 1.00f)
colors[ButtonActive] = ImVec4(0.77f, 0.22f, 0.62f, 1.00f)
colors[SeparatorHovered] = ImVec4(0.77f, 0.22f, 0.62f, 0.78f)
colors[SeparatorActive] = ImVec4(0.32f, 0.60f, 0.35f, 1.00f)

[ocornut]

From 22 Racing Series (by GOATi) http://22series.com/

From Onrush (by Codemasters) http://www.codemasters.com/game/onrush/

[JSandusky]

Fairly extensive multi-document editor:

Custom widgets for the bitmasks, counter popup-button at the top-left (which indicates number of open documents and is red if any are dirty), colored vector editors (variation of DragFloatN to include colors and allow vertical placement and offset the embedded editor so the color doesn't overlap), Photoshop style FB/BG brush swatches for paint mode, photoshop style brush-stroke render, thumbnails come from OS interface, and always expanded section headers (no chevron drawn).

Because color is used so extensively I tweaked text drawing to include Quake3 style escape codes for the colors of interest. History and Log in particular use so much color that push/pop styling was becoming a time-sink for both, history uses color to denote an addition (green), edit (yellow), and removal (red) - while logging uses 8 colors (magenta, red, orange, white and dimmed versions) for 4 log-levels (info, warning, error, debug) because messages can be optionally snuffed to reduce their visual impact in the log.

Popups and modals are everywhere, for that I run a task at the end of the main GUI that runs a bunch of lambdas based on what's stored and the general nature of those (is it modal? is it a non-modal tool? etc). Doing that alleviates the pain in dealing with ImGui popups.

Only real regrets have been using Nem's docking and ImGuizmo. ImGuizmo was stripped out but I still haven't gotten around to ditching Nem's docking - specific issues are that nem's dock doesn't deal with ephemeral docks very well, tweaks to Nem's dock include caching sizes so that double-clicking a sash can collapse/restore in a fashion that favors the main no-tabs allowed view and making ephemeral docks a bit less of a problem (they still gut everything).

---

I've written pretty much the same program in QT and MFC, the ImGui version is massively slower but also massively easier to try things out in and work with in general. The MFC version is development hell but lightning fast, while the QT version just plain sucks - it's fast in release but so stupid slow in debug that it's unusable ... waiting 5 minutes to see the results of a button click.

[ocornut]

Thanks for your screenshots and detailed feedback @JSandusky.

History and Log in particular use so much color that push/pop styling was becoming a time-sink for both,

Do you mean a programming-time sink or runtime time-sink?

Popups and modals are everywhere, for that I run a task at the end of the main GUI that runs a bunch of lambdas based on what's stored and the general nature of those (is it modal? is it a non-modal tool? etc). Doing that alleviates the pain in dealing with ImGui popups.

Could you elaborate this? (feel free to open a new topic to discuss this).

That double-clicking a sash can collapse/restore in a fashion that favors the main no-tabs allowed view and making ephemeral docks a bit less of a problem

Your feedback on the Docking V2 will be useful. I'm adding a note to allow collapsing a docked tab-bar, that'll be a useful thing.

I've written pretty much the same program in QT and MFC, the ImGui version is massively slower but also massively easier to try things out in and work with in general. The MFC version is development hell but lightning fast, while the QT version just plain sucks - it's fast in release but so stupid slow in debug that it's unusable ... waiting 5 minutes to see the results of a button click.

Could you elaborate on performance? (Also don't hesitate open a new thread if you have a detailed report).

• Currently the rounded shapes + borders/shadows are extremely costly, you should get a boost by setting FrameRounding=0.0. There's a PR in the work that will optimize this by a factor of 5+ CPU wise.
• Are you performing coarse clipping on large lists (such as the "Log" and "Asset Browser" of your first screenshot), to avoid processing the non-visible item at all?
• Is your tabbing system and app correctly not processing not visible tabs?
• Is your application and imgui calls performed from native C++?
• Where else does the time go and do you have some metrics to share?

I think we should aim for <1 ms at all time. aside from the rounded shapes optimization there are a couple of important optimizations to be made such as variable frequency refresh rate on a per-window basis (e.g. windows that are not hovered can lower their refresh rate and we can load balance among them), and removing all the unnecessary Float4>ImU32 conversions.

[armadillu]

Very custom hybrid particle system / Timeline desktop software for an undisclosed client (while working for Local Projects). All running on top of OpenFrameworks. I'm combining ImGui with our custom scenegraph (the timeline part is written using our scenegraph). Very happy I chose ImGui!

Edit: You can now read more about it here https://uri.cat/projects/patterns-of-life-metlife/

[JSandusky]

Sorry, it's a crazy season over here in the land of slaughter.

Do you mean a programming-time sink or runtime time-sink?

Programming time, I was rushing as I spat that out so a lot of it came as I really didn't actually want it to. Things got convoluted fast with color switching between items. I used fonts for icons, but they just didn't cut it. The logic conditional cases just became far too insane to cope with.

REGARDING POPUPS: Could you elaborate this? (feel free to open a new topic to discuss this).

You're overthinking it. Just a struct with a few std::function and some extra definitions. The point of it is to fully manage popup behaviour so that all flyouts vanish when a modal appears, dealing with them at the tail via a push methodology is about rectifying purpose.

Externalizing popups also makes my life a lot easier with keybindings.

---

I'll raise a perf-thread independently, but in the case of the screenshots it's the tree and log eating performance. By Massively I mean between twice and thrice - nothing as insane as an order of magnitude.

So much of that hit is just the reality of touching that much data every single frame. The log alone takes 3 milliseconds in a release build.

If you demanded a pin right now, I'd say that I'm burning too much data every frame.

[ocornut]

@JSandusky

I'll raise a perf-thread independently, but in the case of the screenshots it's the tree and log eating performance. By Massively I mean between twice and thrice - nothing as insane as an order of magnitude. So much of that hit is just the reality of touching that much data every single frame. The log alone takes 3 milliseconds in a release build.

Clipping primitives should be used to avoid touching the data at all. And probably that sort of clipping pattern should be improved and simplified, but 3 ms is absolutely not acceptable for a log window, so this would be an interesting use case to look at and discuss!

[BrunoLevy]

Experimental Android binding, works with fingers, stylus, bluetooth mouse, virtual keyboard and bluetooth keyboard. ImGui1.62. Now porting to ImGui1.63 (will be even easier with new OpenGL3 binding).

Download sources (full functioning Android app): https://members.loria.fr/blevy/files/ImguiAndroid.tar.gz Compiled Android app: https://members.loria.fr/blevy/files/ImguiDemo.apk

[ocornut]

A crowded shot from the game Barbearian ("fast-paced hack'n'slash") homepage / steam / ios

[djdeath]

Aubinator viewer, a tool to debug Intel GPU instruction dumps (available in Mesa ) :

[CedricGuillemet]

Imogen, a GPU (glsl) procedural texture editor/generator with PBR preview. WIP.

open source project hosted here : https://github.com/CedricGuillemet/Imogen

[slomp]

An embeddable, visual debugging tool for Halide: https://github.com/halide/visual_debugger

[JWki]

A simple editor for brush-based level geometry. The new docking has been a godsend for this. Uses a few simple auto-layouts on top of the main API, such as dynamic grids and rows (toolbox and top row of foo controls). Not fully realized yet so wrapping is a bit too conservative at times.

[ocornut]

Another use of the Docking Branch by @rokups:

[samhocevar]

Here’s the new docking system in action in my personal project (a PICO-8 emulator and IDE):

[ocornut]

@samhocevar

Here’s the new docking system in action in my personal project (a PICO-8 emulator and IDE):

Wow, very unexpected and cool usage!

( It's not officially supported/documented, but for some border size you can use >1 sizes (will standardize that better with styling v2. right now there will probably be some overlapping/transparency issues which may or not affect you). You could also render everything to an actual low-resolution framebuffer if you wanted one-chunky-pixel separators.

Down the line I would like to bake common font-sized shapes (cross button, collapse button etc.) into the texture atlas so we could image a way to override them manually and render own custom pixilated version of those. )

[samhocevar]

It's not officially supported/documented, but for some border size you can use >1 sizes (will standardize that better with styling v2. right now there will probably be some overlapping/transparency issues which may or not affect you). You could also render everything to an actual low-resolution framebuffer if you wanted one-chunky-pixel separators.

Yeah, I think I’m already overriding every border size I can. My problem is that I want the best of both worlds: a chunky font but pixel-perfect element positioning :-) I will probably maintain a personal fork if I can’t get exactly that…

[ibachar]

The new docking branch being used in my hobby game engine (currently working on a shmup)

[ggerganov]

A small tool for sending/receiving data over sound. The GUI is used to display the real-time captured audio spectrum and configure the transmission parameters:

Code: https://github.com/ggerganov/wave-gui

[nem0]

Profiler UI

[ocornut]

@codz01 For style best to post them here #707 will try to gather them there for reference before the style system gets reworked.

Two shots:

@r-lyeh

I was giving imgui some stress test (sorry! :) with most of widgets in the Wiki

(this is actually a shot from a bug report, will look into it! but it's nice! also interested in stress test as I will be trying to use automation to create performance tests and tackle and worst offenders)

Imogen 0.4 (GPU Texture Generator) https://github.com/CedricGuillemet/Imogen This is from an upcoming version that will use docking

[codz01]

didn't see #707 befor ;)

[ghost]

I just stumbled on a talk where a guy has implemented a C++ REPL and is using imgui for the editors and debugging: https://www.youtube.com/watch?v=UEuA0yuw_O0

On a slightly different topic: I am currently using Unity for a game, however I am not coding in C# since my game is written in C++. For this to work I have written a bridge which allows C# and C++ code (especially with regards to the Unity API) to call each other. Right now I am experiment with hooking the renderer which is exposed in Unity for customization and I might be able to inject imgui in Unity itself which will be really useful. If I happen to be successful I will report with some screenshots.

[lmariscal]

I just stumbled on a talk where a guy has implemented a C++ REPL and is using imgui for the editors and debugging: youtube.com/watch?v=UEuA0yuw_O0

On a slightly different topic: I am currently using Unity for a game, however I am not coding in C# since my game is written in C++. For this to work I have written a bridge which allows C# and C++ code (especially with regards to the Unity API) to call each other. Right now I am experiment with hooking the renderer which is exposed in Unity for customization and I might be able to inject imgui in Unity itself which will be really useful. If I happen to be successful I will report with some screenshots.

Wanted to add that it has a repo: onqtam/rcrl

[ocornut]

Super Crush KO (http://www.vertexpop.com/supercrushko/) by Vertex Pop

[ocornut]

glSChAoP (?) by @BrutPitt

TimeLord

Gridlock in-game editor by @david20321 https://david20321.itch.io/gridlock

Sword of Calengal

[Alzathar]

From a video on Twitter by @SebHillaire. I especially like the GPU performance window. EDIT: founded on GitHub in the project Dx11Base!

[abdes]

My cmake c++ starter project for ImGui updated with the latest docking branch. Amazing job done by @ocornut to make it so easy to migrate to the new docking system. Looking forward to the release.

All source code and documentation for using the starter project at https://github.com/abdes/asap_app_imgui

[PcChip]

fun little hobby project I'm working on

OpenGL with GLFW, Bullet Physics, Assimp, Soloud, Dear Imgui

[flamendless]

Hi, this is my first time making something with C/C++, using Dear ImGui is really awesome! Here's my Geo::Math software

[floooh]

8-bit emulator debugging UI running in browser via WebAssembly for various 80's home computer systems, everything updated at 60fps :)

https://floooh.github.io/tiny8bit/

[JettMonstersGoBoom]

Had a little fun making a C64 theme for ImGui.

Font from this set

Gist