Gallery: Post your screenshots / code here (PART 16)
ocornut opened this issue · comments
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!
I posted the work of ImGui v1.88 in Google play, made on pure NDK without Java.
I was wondering if Google would only skip the NDK, and it worked!
The application is aimed at arm64-v8a architecture processors, but it also works fine on armeabi-v7a!
I think I'll share the code and instructions at some time.
https://play.google.com/store/apps/details?id=com.imgui.app
I posted the work of ImGui v1.88 in Google play, made on pure NDK without Java. I was wondering if Google would only skip the NDK, and it worked! The application is aimed at arm64-v8a architecture processors, but it also works fine on armeabi-v7a! I think I'll share the code and instructions at some time. https://play.google.com/store/apps/details?id=com.imgui.app
Oh man, it would be awesome if you could share the code, because google has done everything to make it difficult to adapt the code to android.
I know this is not much but this really helped me a lot so it might as well help someone here ^^
Published it here.
UPDATE: I exposed some components to Lua and now you can actually use it in scripts
managed to get ImGui running inside of Sonic Robo Blast 2 and used it to display some performance stats. So now we have ImGui running on the Doom Engine in some form.
that's pretty much it right now but I plan to use this setup heavily for all sorts of things. Will probably post some more screenshots when I have more things setup but I thought I'd share it anyways as it's pretty neat.
WIP open source layer-based compositor with a focus on bitmap editing for 2D motion design work, basically a combination of After Effects and Photoshop. ImGui's paradigm has been invaluable to my learning journey-- gotta thank Omar and all the contributors.
oh also I don't think I've shared this here before but I'm also helping out with the development of Chira Engine which also uses ImGui! (apologies for posting so soon after my last one I wanted to share this one too before I forgot)
NAP Framework by https://nap-labs.tech/
https://www.napframework.com
Not mine, but I just found that superb audio GUI.
Sorry if not, but I think that it is ImGui, I am not 100% sure... there are many parts/apps:
https://sol-hsa.itch.io/sassy#download
https://kx.studio/News.php?page
Leave it to me to feature creep the heck out of what should be a simple thing!
I've added a whole heap of customization options to imgui_toggle
, A quick preview:
As usual, source is here: cmdwtf/imgui_toggle (0BSD licensed)
Found in the wild, Portal with RTX features a familiar face:
Not mine, but I just found that superb audio GUI. Sorry if not, but I think that it is ImGui, I am not 100% sure... there are many parts/apps: https://sol-hsa.itch.io/sassy#download https://kx.studio/News.php?page
Aether (The reverb plugin shown in the screenshot) doesn't use ImGui for its GUI, but the DISTRHO Ildaeil mini-plugin host uses it for controls.
ImGui File Dialogs - CLI and Client Library by Samuel Venable.
Based on ImFileDialog by dfranx, with many bugs/crashes fixed and overall improvements. The 'Quick Access' sidebar actually remembers what favorites were previously saved to it from previous runs of your application now, by saving the settings to a text file in a hidden configuration subfolder of your home folder. Allows for full localization among many other good things you'll find useful. Most of the dialog is customizable via environment variables. Uses system icon theme.
This tool makes gathering sprite images from 3D models significantly easier, allowing you to get your vision into GameMaker faster. This is the first version of the tool and the start of our new foray into the third dimension.
Last time I posted a picture of Termi (#5243) Termi didn't have commands in .DLL or .so file NOR GUI models. GUI models today in third stable version are mostly just JSON entry but commands are fully finished with support of loading any command built by anyone using any programming language that can be compiled to .DLL file or .so file and can call functions in .DLL or .so files
Merry Christmas btw to entire Dear ImGui team and everyone else
RE Edit, a free and open source WYSIWYG editor for the UI of a Rack Extension
Dark Style
Light Style
Application for controlling a custom GoTo-AltAz-Mount for my telescope
Here is a preview of what the user interface of my application looks like. It uses an OpenGL backend, and C++. Don't get distracted by the weird descriptions on the individual targets, I am still parsing them wrong.
Each target is selectable, and the following modal is displayed when a target is selected:
And yes, there is also a dark mode:
The recently release tool SpriteMancer by CodeManu makes use of our favorite library, complete with an @ocornut shoutout!
At job, I needed a tool for display Numerical Signal based logs to graph curve, for easy analyze.
The tool is called LogToGraph
So generic, since the parsing of a log file is done by a lua script. so easy modifable by a user.
In more than Dear ImGui, Thanks to ImPlot for his incredible graph possibilites
Quick demo : (here with a profiler log of my soft NoodlesPlate of a MandelBulb shader)
My practical part of my thesis called "Demonstration of Signal digitization". It uses dear ImGui and ImPlot. It has a Web assembly version that is hosted on GitHub Pages
https://github.com/Jacckii/SignalDigitization
(First of all, sorry for unintentionally flooding the gallery with links when I first informed third party libraries authors, as you can see on top of this message)
I'd like to introduce Dear ImGui Bundle, which is a bundle for Dear ImGui, including many libraries from its ecosystem. It enables to easily create ImGui applications in C++ and Python, under Windows, macOS, Linux, and emscripten (and also iOS) It is aimed at application developers, researchers, and beginner developers who want to quickly get started.
Included libraries:
ImGui, ImPlot, Hello ImGui, ImGuizmo, ImGuiColorTextEdit, imgui-node-editor, imgui-knobs, ImFileDialog, portable-file-dialogs, imgui_md, imspinner, imgui_toggle, ImmVision, imgui_tex_inspect, imgui-command-palette
Announcements:
Some highlights with screenshots below:
This list of screenshots is very partial, and there are lots of other features provided by the included libraries. Thanks to their authors!
MaterialX graph editor is using imgui
https://twitter.com/SheriffStone/status/1619095627287396357?t=tenVRtU4cM4DNpk1FeLj2g&s=19
preview: https://imgur.com/InEs1WV
No-code UI creating software for ImGui. Create an interface for your application with the convenience of Figma and the functionality of Photoshop.
Blurry effect example for imgui..
I wanted to share one as it's not really a clear example, thanks.
https://github.com/RuiVarela/Senos
Senos is sound exploration tool from a developer point of view.
It is very lightweight, can be used as a toy or a minimal song composer.
Play Setup | Instruments | Sequencer | Chainer |
---|---|---|---|
https://github.com/qiutang98/flower
I love imgui, just need to write some simple code then i can get a beautiful professional ui layout.
With imgui‘s help, i can start to write my custom engine what i want to do a long time ago.
I came across this which appears to be some well customised imgui :
I guess the timeline is something made with openFrameworks.
https://vimeo.com/426350419 // https://localprojects.com/work/corporate-experience/patterns-of-life/
A color-gradient widget for Dear ImGui
It is an essential part of the generative-art software I am currently writing!
Spotted on the web
Rat GUI
The most convenient simulation tool for magnet engineers
https://rat-gui.ch/index.html
(also in licences for Final Fantasy X/X-2 HD remake (but no screen) https://finalfantasyxhd.square-enix-games.com/de-de/license)
erhe VR test (on Youtube)
I work with their amazing tools and the interface framework looks familiar ;)
https://aaronia.com/software/rtsa-suite/
Structural Mechanics software ObjectiveFrame (https://github.com/jonaslindemann/objectiveframe):
Gardenscapes also uses ImGui, like Homescapes!
Shown here is a screenshot of, I think, an animation manager?
Video link: https://youtu.be/qgGaXvZLPYw?t=11
OpenSim Creator
https://github.com/ComputationalBiomechanicsLab/opensim-creator
Fun thing, Quake 3 re-release using a Dear ImGui underlying logic for in-game menus:
Having worked on a reasonably big ImGui application over the last two years, one of my biggest gripes has always been popups.
While I generally love how quick and easy it is to display a popup, I often had the issue that I am somewhat deep in the call stack and want to show a popup. Usually just a quick message box to let the user confirm an action.
While waiting for the confirmation I have to somehow retain some temporary data over several frames so I can continue my work, once the user closes the message box.
One could argue that I should not open a popup from somewhere deep inside the callstack anyways but... well theory and practice and in practice it often is just a big nuisance and overcomplicates the code by a lot.
Additionally the BeginPopup and OpenPopup functions must be called in the same ID Stack "Layer" which makes things even harder.
Long story short, I needed blocking popups. So blocking popups I implemented.
Unfortunately the software I'm working on is proprietary so I can not show any code or get into too much detail. I mainly want to show that if you REALLY want/need blocking popups, like I did, then this could confirm to you that it is absolutely possible. Even if not that easily.
First of all let's see what it looks like.
A simple message box:
A little more 'complex' popup:
Usage in code looks something like this:
Popup::BlockingPopup popup("My Popup", nullptr /*Parent window*/, true /*Resizable*/);
popup.Show(1000, 700);
while (popup.Begin()) {
//My content
Popup::Buttons disable = Popup::Buttons::NONE;
switch (Popup::DrawButtons(Popup::Buttons::OK | Popup::Buttons::CANCEL, Popup::ButtonAlign::RIGHT, disable))
{
case Popup::Buttons::OK:
{
// Stuff
popup.Close();
break;
}
case Popup::Buttons::CANCEL:
{
popup.Close();
break;
}
default:
break;
}
if (ImGui::IsKeyPressed(ImGuiKey_Escape))
popup.Close();
popup.End();
}
By writing a wrapper function, classic message boxes can be shown like so:
Popup::BlockingMessageBox("Title", "Content", Popup::Buttons::YES | Popup::Buttons::NO, nullptr /*Parent window*/) == Popup::Buttons::YES
The way this all works is as follows:
First of all we wrote a custom ImGui Backend... I know this is kind of a heavy hitter. Most people do not do this since the example backends provided are usually good enough. However for our application we are using a custom platform layer and renderer and our ImGui backend had to work with those either way (long before the Popup requirement even came up).
Why is a custom backend important? Because when showing a popup we create a whole new platform window as well as a whole new ImGui instance. That means ImGuiContext AND Backend. Unfortunately the example backends are not really made to be instanced multiple times in one application. Our backend being a class makes this relatively easy. Although there is some global state in our application so we can reuse parts of the existing backend instance (e.g. already loaded fonts or our renderer) without having to pass them around everywhere we might need a message box.
After creating a new instance, we open the window and enter a new loop. So a loop inside the application's actual main loop. That's how we achieve the 'blocking' part. Inside this loop we can then call ImGui functions as usual.
This method sure has it's limitations and it has quite the overhead, considering that we have to create a new window, ImGuiContext and backend every time. I'm also not that big of a fan of the global state we are using. Then again, the ImGuiContext is also 'just' global state. A little more sophisticated implementation would maybe pool windows/backends for reuse. Currently we don't do that and it saddens me that creating a new window under Windows is a lot slower than the lightning fast ImGui popups but maybe that's just nitpicking.
We also can't do the 'greyed out' background for modal popups since that would require tinting the main applications window. That change would only show up in the next frame however and the whole idea here is that we do NOT want to figure out how to keep our state until the next frame.
It might not be the easiest thing to implement but maybe the knowledge alone that it is indeed possible and works pretty well motivates some folks to try the same and maybe even find a way to get similar functionality into 'vanilla' ImGui. Without a big example backend rework I currently do not really see a way.
There’s a lot to unpack in your message but I have no idea why you are posting this in a Gallery thread instead of opening a new thread. It seems completely off-topic. Would be good if you moved it elsewhere and deleted message here (then i’ll delete mine). Also make sure you know about multi-viewports and modal windows.
Apologies for the tone of my previous post: to clarify it seemed unclear if your message was to show/share your work (which is the purpose of this thread) or to open a discussion about various issues (which are valid but best posted elsewhere). I do realize that even thought it opens up a few questions it was aimed to be the earlier. My bad. The point if we cannot have those Gallery threads include lengthy back and fort replies.
Additionally the BeginPopup and OpenPopup functions must be called in the same ID Stack "Layer" which makes things even harder.
Indeed it's been a common issue that we aim to solve with using id paths (that are currently used in test engine but NOT in imgui functions yet: see the doc on test engine side to grasp the idea). Note that using GetID()
you can compute a unique popup id then use BeginPopupEx(id, ...
and your setup will work regardless of ID stack location.
I needed blocking popups. So blocking popups I implemented.
This was ambiguous on first read but I understand you want blocking in the sense of "parent-app-blocking".
I am glad you got this working, thought I can't help but think that reworking your main application code and flow to facilitate storing popup-transient data would be nicer and simpler down the line.
That means ImGuiContext AND Backend. Unfortunately the example backends are not really made to be instanced multiple times in one application.
We did rework the backend following #2004 to allow them to work with multiple contexts. I think there are known issues if running in parallel but it doesn't seem the case here? (and was already the use case of #2004). Can you clarify what you think are preventing backends to do that?
Found one in the wild
https://mastodon.gamedev.place/@maxim/109978196009122743
Looks like valve is using it for the steam deck Dev kit.
https://mastodon.social/@rustym
"Dear ImGui has been just instrumental to creating Astro Duel 2. We’ve built debug menus, inspectors, editors and production tools all atop this incredible open source framework. What an industry gem!"
"Upcoming Slitterhead from Bokeh Game Studio (new studio by Keiichiro Toyama, creator of Silent Hill) also seems to use it, https://youtu.be/zM3M3jTEAZM?t=136 2:16 in the video"
It looks like Counter-Strike 2 (announced at the time of commenting) is using imgui!
Video here.
Thank you @CosminPerRam. I took the liberty to amend your post (it shows as edited) with a slightly different frame taken from the video where more of the text is in focus.
I wanted to try out Dear ImGui, so I wrote a thermal image processing software around it. I really loved every minute, thanks!
the repository is here: https://github.com/rodan/thpp
the rendering loop is event-driven (without poking ImGui's code) - based on great work done in #2749
Usage in Halo Infinite
From slides "Thinking Like Players: How 'Halo Infinite's' Multiplayer Bots Make Decisions" at GDC 2022
https://www.gdcvault.com/play/1027689/Thinking-Like-Players-How-Halo
In-house AI system, with editor and debugger. Architectured on combination of behaviour trees and hierarhical state machines.
Uses node editor by thedmd, written in java using imgui-java by Spair
A little 2d sandbox to play with genetic AI training with several fancy features (dynamic light, pseudo 3d materials, game engine-like editor) -- code here
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
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.
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.
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 :)
git-whale is a Windows tool to synchronize git and github repositories (done in C++ and ImGui).
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++)
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
Spotted in this GDC Talk for God of War: Ragnarok:
https://www.gdcvault.com/play/1028846/Rendering-God-of-War-Ragnark
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 audio mixing, including mixer, pan, equalizer, gate, limiter and compressor.
-
And many cool features
https://github.com/opencodewin/MediaEditor
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.
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.
Some GUI's made using ImGUI (as part of the Engine Overhaul Project for Medieval II: Total War)
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
Bit Animation Editor
A pixelart composition tool for game developers
https://store.steampowered.com/app/1370650/Bit__Animation_Editor/
GameMaker Studio 2 is now using ImGui for a debug overlay as of the newest Beta.
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). :)
@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 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
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
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.