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

[ocornut]

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

[vdweller84]

Code editor in an ImGui-powered engine. It has a few more features than ImGuiColorTextEdit and uses Google's RE2 for fast regex tokenization/search. Unlimited Undo/Redo, copy/paste, comment/string blocks, obvious basic functions. Also undo/redo groups words instead of adding/removing single characters.

Keyboard navigation (note correct nav around large UTF-8 character) https://user-images.githubusercontent.com/96083791/230888543-c6a3975d-852f-4918-aa8d-91d9772f1bf1.mp4

Text dragging or whatever this is called https://user-images.githubusercontent.com/96083791/230888611-48a2262a-18eb-4121-b2d8-c201ba79cacf.mp4

Search/Replace (normal/regex) https://user-images.githubusercontent.com/96083791/230888678-749695a9-911e-4489-9a78-67175384f69a.mp4

Function info / matching braces https://user-images.githubusercontent.com/96083791/230888766-c276a1cb-63b8-4dd4-9cfc-3c53d18acba3.mp4

Let's work with a 100K+ lines file https://user-images.githubusercontent.com/96083791/230889143-f7c0f2f0-4e2f-48b9-b934-1c97b72f0ee9.mp4

[slajerek]

Code editor in an ImGui-powered engine. It has a few more features than ImGuiColorTextEdit.

@vdweller84 Nice. I integrated ImGuiColorTextEdit sometime ago to my project, but frankly speaking number of bugs there makes it unusable. Is your upgrade open source and available somewhere? Thanks.

[vdweller84]

Code editor in an ImGui-powered engine. It has a few more features than ImGuiColorTextEdit.

@vdweller84 Nice. I integrated ImGuiColorTextEdit sometime ago to my project, but frankly speaking number of bugs there makes it unusable. Is your upgrade open source and available somewhere? Thanks.

I am just going to reply for this once here, since this thread is for screenshots.

I too was frustrated with the state of ImGuiColorTextEdit. I really have no issue with making the code public (it will help with bug hunting too), after all ImGui itself is open source, but there are a few hindrances.

The major issue here is dependencies. As it is right now, there are 3 big ones: Google's RE2 and libclipboard. I use the former for all things regex and the latter to get/set clipboard text and set up a potential for cross/platform usage. Regex libraries can't usually be replaced in a drop-in way and this may cause complications. Also, for whatever reason, I haven't managed to make ImGui's clipboard functions work properly yet. This may require taking a look inside these functions but this is a time investment I'm not very able to afford. Dependencies means lots of people dropping by just to ask me to remove them. Lastly, I use utf8-cpp for processing utf-8 code points. It's a great and simple library, but yet another dependency.

I also use SDL just to get the status of the NumLock key but that's probably just something silly of me (I also use SDL for the "Main" project of which this text editor is a part of).

Also, the text editor uses image icons (the usual ImTextureID way) that users will have to supply for the Search/Replace icons. This further complicates things as baking icons into the editor will be a huge round trip for me right now.

Another (probably minor) issue is people requesting more features which, in theory, will require me to actively keep developing this, something I cannot afford to do right now as this is a part of a much larger project.

A last issue is that I am not a very good programmer and I am still learning things. While I'm pretty happy with what 3000 lines of code accomplished for this text editor (ImGuiColorTextEdit is about 2500 lines discounting language definitions and still has a lot of issues and less features), I don't want other people having an aneurysm.

Anyway, once I set up all core features, I might make a repository for this. Just a heads up about the general state of this editor.

[inobelar]

C++ web app (yep - emscripten, wasm, webgl), ImGui-based interactive Yoga Playground.

It similar to official (but kinda outdated web playground). The main goal of it - to be able to test latest changes in Yoga library, without dealing with web stuff (js, npm, packets, etc bloatware), also for API education & studying, and easy hacking of course :)

• Web Demo (sources)

[kem0x]

VPN Client

[aloneguid]

Browser profile proxy/redirector:

[XorJS]

git-whale is a Windows tool to synchronize git and github repositories (done in C++ and ImGui).

[XorJS]

Ma'am Popcorn is a tiny game about actors and movies where the goal is to pick a specific actor who plays in a specific movie or vice versa. (ImGui / Wasm / C++)

Play

[Aarkham]

I have adapted nodesoup from Olivier Birot to dear imgui. I just made the changes to allow for an interactive frame rate. All credit goes to him.

Original code https://github.com/olvb/nodesoup My adaptation https://github.com/Aarkham/ImNodeSoup

[ocornut]

Spotted in this GDC Talk for God of War: Ragnarok: https://www.gdcvault.com/play/1028846/Rendering-God-of-War-Ragnark

[DickyQi]

MediaEditor Community(MEC) is a highly integrated and easy to learn application software that can be used to create, edit, and produce high-quality videos.

• Support complete timeline editing functions, including move, crop, cut, thumbnail preview, scale and delete.
• Support more flexible and easily blueprint system. Blueprint💫 is represented in the form of nodes, which can handle complex functions through nodes and flows.

• Support about 30+ built-in media filters and 60+ built-in media fusions

• Support about 10 video and audio analysis tools

• Support audio mixing, including mixer, pan, equalizer, gate, limiter and compressor.

• And many cool features https://github.com/opencodewin/MediaEditor

MEC v0.9.7 release

[movecx]

I was researching an easy way to make a blur effect in imgui (windows only though most pixel shader implementations are platform specific unless you use open gl or similar) and I came across this source code by Rex-08 https://github.com/Rex-08/ImGui-desktop-design-base

it contains this function here

void RenderBlur( HWND hwnd ) {
    struct ACCENTPOLICY {
        int na;
        int nf;
        int nc;
        int nA;
    };
    struct WINCOMPATTRDATA {
        int na;
        PVOID pd;
        ULONG ul;
    };

    const HINSTANCE hm = LoadLibrary( L"user32.dll" );
    if ( hm ) {
        typedef BOOL( WINAPI* pSetWindowCompositionAttribute )( HWND, WINCOMPATTRDATA* );

        const pSetWindowCompositionAttribute SetWindowCompositionAttribute = ( pSetWindowCompositionAttribute )GetProcAddress( hm, "SetWindowCompositionAttribute" );
        if ( SetWindowCompositionAttribute ) {
            ACCENTPOLICY policy = { 3, 0, 0, 0 };
            WINCOMPATTRDATA data = { 19, &policy,sizeof( ACCENTPOLICY ) };
            SetWindowCompositionAttribute( hwnd, &data );
        }
        FreeLibrary( hm );
    }
}

which when run will give you this nice glass effect on transparent parts of your window:

as a bonus it isn't DX version specific, though obviously it only works with desktop applications and won't work for something like an in game gui.

Hope this helps anyone looking to make a similar effect.

[alektron]

DXF Explorer is a web application that's supposed to help reading and understanding the DXF file format used by various CAD tools: https://alek-tron.com/DxfExplorer/

It is using the ImGui Emscripten backend.

Some of the (sub)tree views use a custom clipper similar to ImGuiListClipper after a certain number of items to allow for huge lists. However the approach has some drawbacks e.g. only a single node per layer can be open at the same time.

[psyq321]

DigiCortex v2 (artificial brain simulator) is using Dear ImGui:

This video shows how it looks 'in real life':

[EddieEldridge]

Some GUI's made using ImGUI (as part of the Engine Overhaul Project for Medieval II: Total War)

[Vasili-Sk]

Made configuration app for my CAN-bus devices, never been so easy! Main app on C#

[time-killer-games]

Open Minecraft Note Block Studio is a cross-platform music maker for desktops which can import an export a variety of sound formats, even ones that can be played within Minecraft. Created with GameMaker Studio 2, C++, SDL2, and of course, ImGui.

The new version which adds macOS and Linux support to the existing Windows support and has ImGui dialogs added is in a pull request of mine currently. It is pending review as we speak. https://github.com/time-killer-games/OpenNoteBlockStudio :D

[Hunternif]

I'm building a 3d editor for procedural generation of blocky buildings, a la Minecraft :)

[morgondag]

Bit Animation Editor

A pixelart composition tool for game developers https://store.steampowered.com/app/1370650/Bit__Animation_Editor/

So you can make thing like this

Export to Unreal5

[time-killer-games]

GameMaker Studio 2 is now using ImGui for a debug overlay as of the newest Beta.

https://gms.yoyogames.com/release-notes-runtime-NuBeta.html

[Froyok]

I have been working with Dear ImGui for a few years now, it's always my goto library to build UI nowamdays (I presume I'm not the only one). I love it and wanted to share my many and sincere thanks for it. It's such a pleasure to work with !

• I have been using Dear ImGui as the window management and behavior for the UI of a little RPG project. It uses custom drawing, but widget placement, sizing and state is driven by Dear ImGui underneath.
  • 
  • 
• I'm currently working on my own game engine called Ombre, the debug UI is also driven by Dear ImGui. The editor/in-game UI will likely be using it too.
  • 
  • 

I like to push as far as I can the customization of the look, without editing the original library (since I use wrappers,notably Python and LUA ones). :)

[alektron]

@Froyok Any chance you could share the style settings of the Ombre UI? There are obviously some custom elements that are not just purely style but I really like the overall colors/font of this nonetheless.

[Froyok]

@alektron

@Froyok Any chance you could share the style settings of the Ombre UI? There are obviously some custom elements that are not just purely style but I really like the overall colors/font of this nonetheless.

I won't post here the Imgui function calls, mostly because I do many push/pop in intermediate places. Here is the color scheme however:

Transparent = IMGUI.ImVec4_Float( 0.0, 0.0, 0.0, 0.0 ),
White = IMGUI.ImVec4_Float( 1.0, 1.0, 1.0, 1.0 ),
Black = IMGUI.ImVec4_Float( 0.0, 0.0, 0.0, 1.0 ),
Bright = IMGUI.ImVec4_Float( 1.0, 0.937, 0.831, 1.0 ),      -- #FFEED3
Medium = IMGUI.ImVec4_Float( 0.8, 0.718, 0.565, 1.0 ),      -- #CCB790
Low = IMGUI.ImVec4_Float( 0.48, 0.449, 0.392, 1.0 ),        -- #7A7263 
Dark = IMGUI.ImVec4_Float( 0.298, 0.329, 0.349, 1.0 ),      -- #4B5358
Darker = IMGUI.ImVec4_Float( 0.178, 0.191, 0.199, 1.0 ),    -- #2D3032 
Background = IMGUI.ImVec4_Float( 0.086, 0.086, 0.086, 1.0 ) -- #151515

[aiekick]

A technical demo who is using Dear ImGui (found on twitter ) Drag Your GAN: Interactive Point-based Manipulation on the Generative Image Manifold Project link github

[ocornut]

Yacht Club Games (Shovel Knight & co) posted about their tech for Mina The Hollower: https://twitter.com/YachtClubGames/status/1662139803541082112 Blog https://www.yachtclubgames.com/blog/engine-sneak-peek

They are full GIF on the Blog page, some stills:

etc.