Gallery: Post your screenshots / code here (PART 11)
ocornut opened this issue · 66 comments
This is Part 11, 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!
We're using ImGui in Particubes, though it may not be easy to recognize it. 🙂
It will be available on iOS, Android, macOS & Windows devices. The project is not open source, but we will open source parts of it. Including the layer we added on top of Dear ImGui to implement that kind of GUI.
In Particubes, you can script games, and that includes GUI of course. We worked on an auto layout system users will be able to use in Lua to display their own buttons, labels, etc. For games to look good on all screen factors and be enjoyable with mouse & keyboard or touch events.
I work at Spotify, and on my hackdays I've been making a Spotify client using Dear Imgui. I'm using the docking branch, and the new table API. It uses the same C++ library as our mobile and desktop clients use, and the UI is roughly 6000 lines of code.
Update: worked a bit on better styling:
@parbo That is amazing! Am I safe to assume there is only a very slim chance of this being released? Not quite familiar with Spotify licensing or if they would prohibit the release of something like this (while directly using the Spotify C++ lib)
Converted my previous project from NanoGUI to Dear-ImGui, didn't know about dear imgui back then :) The project is basically an educational raytracer/pathtracer on the gpu. For more information you can check the project's github . Nothing fancy here, just a few basic widgets.
Due to the nature of data i deal with, i was kinda in need of a callback-based plotting widget that also handles doubles.
I let myself be inspired by both PlotLines() and https://github.com/soulthreads/imgui-plot - and endet up with something that, for now, looks like this:
My current todo for this is
- Marking single points in the graph
- Detecting clicks
- Better grids
I work on this over here: https://github.com/mkalte666/imguiplot
Due to the nature of data i deal with, i was kinda in need of a callback-based plotting widget that also handles doubles.
Nice work!
Maybe plotting widgets lately, also see #3067 by @epezent. Copying their picture/gif here as they haven't been posted here:
Zooming/Panning
Misc. Controls
Set Labels and Show/Hide Elements
Real Time Plotting
Adapts to Current Theme
Thousands of Points!
In Practice
NVIDIA Texture Tools Exporter uses Dear ImGui:
https://developer.nvidia.com/nvidia-texture-tools-exporter
We're slowly entering an era where it'll become harder to spot Dear ImGui in some applications when they are using custom widgets (in the case of this, it's clearer when using the app, and the licence information explicitly mention dear imgui)
Not my screenshot, but I just noticed that Heatblur Simulations is using Dear ImGui as debugging UI in the F-14 module for DCS World :)
Link to video: https://www.youtube.com/watch?v=dpPXxz70odo
Edit: and a different screenshot with Dear ImGui found here: https://forums.eagle.ru/showthread.php?t=268159
Little script in https://github.com/sonoro1234/anima for making 3D models from photos.
ImGuiFontStudio :
Repo and twit/video
A cross platform tool for subset a font or generate a source file (based on IconFontCppHeaders)
With him you can also merge many font in one (wip)
The goal is to simplify the process for have icons font file for use with Dear ImGui in embedded mode or not.
Some pictures :
Model Viewer/Hardpointer for Librelancer, 2 years later from thread 6.
This Final Fantasy VII Remake demo shows dear imgui briefly as part of an audio thing:
https://www.youtube.com/watch?time_continue=675&v=DliMpiemUy8&feature=emb_title
Main menu bar appears to be same font so probably dear imgui, shows a bunch of menu items: Renderer, DataBase, DataTable, Field, Party, Battle, Cinema, Effect, ???, Sound, Scene, Tale, NavMesh, Animation, Physics, Command, System, MiniGame, Example, QA.
From upcoming game "Teardown" via one of their twitch
http://teardowngame.com/
From #3114, Tracy Profiler adding markers/decorations over scrollbars is a nice idea I haven't really seen done in a dear imgui app before:
Misc shots of Tracy Profiler:
RemedyBG (C++ Debugger for Windows) also uses dear imgui (https://remedybg.handmade.network/)
Desktop+, a desktop mirroring overlay application for SteamVR, is using Dear ImGui for its user interface.
This involved adapting ImGui to take inputs from the OpenVR API, which turned out to be fairly simple. Thank you for this wonderful library!
In terms of ImGui showcase the UI isn't anything fancy, but gets the job done. It being in VR has some novelty at least, I hope.
Edit:
Version 2.1 is out and looks a bit better than this. I don't want to spam another post, so for the off-chance it this is considered interesting enough for a release post or just as a fellow up, the current screenshot is here
VX2 by Spectrals (won 1st place PC Demo at Revision 2020)
http://www.pouet.net/prod.php?which=85304
https://twitter.com/Speedoog/status/1249776515316944897
"Here's some screenshots of our edition tool with lots of dear imgui windows :)
You can see the sequencer, keyframable property editor, curves, math expressions, effect tester, debug etc ... Sequencer is based on a fork of ImSequencer by @skaven_ Thanks to you too "
Thank you for this library. I'm working on a platform independent x86 Windows emulator and previously I was using wxWidgets, but I had problems with it looking good across platforms.
Might not be super easy to spot, but I’m using Dear ImGui for my VR app BIMXplorer. It works great, I simply love it!!
https://www.youtube.com/watch?v=mIK-aeI1VLQ
https://www.youtube.com/watch?v=54TJJp57rlM
A new version of tooll.io written in ImGui / ImGui.net.
Thanks a lot! ImGui is phenomenal and so much fun to work with.
This is a chiptune player I do for the nintendo switch using ImGui branches table. I love ImGui. (https://github.com/notnotme/osp)
Improved my online map viewer
Can be seen live here https://www.youtube.com/watch?v=scVTdj2vop0
I made a UI library on top of ImGui in Python, geared towards scientific visualization & image processing. I have been using it at our company for quick, even throw-away GUIs, but also for more complex applications lately.
Repo: https://github.com/potocpav/python-concur
Homepage with code samples: https://potocpav.github.io/python-concur-docs/homepage.html
The library uses Python generators for principled event & state handling, and includes some extra widgets (pan & zoom image with overlay) and extra drawing functions (scatter plot, ...). Other than that, it is a thin wrapper on top of ImGui. Here are some examples of the tools I made.
Annotation tool in 60 LOC:
Manual multi-camera calibration:
Multi-camera object detection, visualization & parameter tuning:
Stereo camera object detection:
Single-camera calibration. This is the most polished application to date, including line & spline editing with control points, 3 edit modes, undo/redo, multiple export formats, 600 LOC.
Model/Animation browser & material editor.
Pure ImGui (over in-engine DX11-renderer).
Unfortunately Github doesn't support WEBM or I'd post a demo here, (gif comes out at 168mb vs 1.3mb webm),
but here's some code that you might consider putting into the DearImgui Demo somewhere.
Basically I was trying to figure out exactly what all the "GetPostition" and "GetSize" calls actualy... got. so I wrote this.
excuse the C#
https://gist.github.com/se5a/6cb1383b10cf2b4c4cf9abdffd642337
Edit:
I stuck it up on youtube for shits and giggles.
https://youtu.be/d1NpjHFSnb4
Kubata pointed out I'm missing (Textline|Frame)Height[WithSpacing] I'll add those soon. maybetomorow.
Unfortunately Github doesn't support WEBM or I'd post a demo here, (gif comes out at 168mb vs 1.3mb webm),
but here's some code that you might consider putting into the DearImgui Demo somewhere.
Basically I was trying to figure out exactly what all the "GetPostition" and "GetSize" calls actualy... got. so I wrote this.
excuse the C#https://gist.github.com/se5a/6cb1383b10cf2b4c4cf9abdffd642337
Edit:
I stuck it up on youtube for shits and giggles.
https://youtu.be/d1NpjHFSnb4Kubata pointed out I'm missing (Textline|Frame)Height[WithSpacing] I'll add those soon. maybetomorow.
@se5a This is precisely what I believe should be in the documentation. It's a clear visual as to what each function does and leaves no room for misinterpretation.
Yeah, I'll try get around to tweaking it a bit more, some of the things there are guesses. I'll have to dig around in the cpp code to try find out exactly what they're getting sizes of.
I'm using ImGui for my nes emulator
Batch of small update - high profile stuff but very few visible tools, so this is more of a "hey this is somehow using dear imgui" than example of fancy uses :)
League of Legends from a RIOT designer tweet
Clash of Clans from a Bloomberg video (https://www.bloomberg.com/news/videos/2019-12-04/how-the-iphone-tormented-the-world-s-happiest-nation-video from 8m29s, thanks Mikko!)
Some control ui for a cool robot by Boston Dynamics being put to bad use https://www.youtube.com/watch?v=2DJmIjKtVkA
And an update of Avoyd (https://www.avoyd.com) always looking good:
Early version of particle/effect editor.
Pure ImGui over in-engine DX11 renderer.
Wrapper around ImGui::ImDrawList::Draw...() calls which provides a stateful canvas for drawing primitives. I'm unsure if others will find this useful, but I'm putting it out there...
Simple input debugging overlay with some custom rendering for input axes.
Release of NetImgui
NetImgui is a library to remotely display and control Dear ImGui menus with an associated netImgui server application. Designed to painlessly integrate into existing codebase with few changes required to the existing logic.
Initially created to assist game developers in debugging their game from a PC while it runs on console. However, its use can easily be extended to other fields.
https://github.com/sammyfreg/netImgui
Helps with inputs
Help to declutter the screen
A little unusual but still wanted to share. I needed to achieve a specific style of an ImGui window to not clutter the whole screen so I modified the docking branch a little bit. Created windows are docked instantly into a floating window and cannot be reordered or undocked. They all share the same p_open value, automatically resize the floating window to fit their content and the selected tab index is kept alive through creation/destruction.
With all my local edits, the window in the gif is created with this code:
if (ImGui::Begin(CONSTANT_szUITitleMain)) {
Menu::DrawLogo();
ImGui::FullWidthButton("Start Chaos");
}
ImGui::End();
if (ImGui::Begin(CONSTANT_szUITitleConfig)) {
Menu::DrawConfig();
}
ImGui::End();
if (ImGui::Begin(CONSTANT_szUITitleAbout)) {
Menu::DrawAbout();
}
ImGui::End();
ImGui::Together<3>(&details::ui_visible, CONSTANT_szUITitleMain, CONSTANT_szUITitleConfig, CONSTANT_szUITitleAbout);@berkayylmao May be wrong but I feel you could achieve the same result with a regular window with no title bar, starting with a tab bar, and using the AlwaysAutoResize flag? You would just need to be able to add a Close button somewhere.
@ocornut Yeah, probably. I know the floating host window in the docking branch does exactly what you said. Hijacking it felt a little easier though, since the other way around I'd basically need to write code for another floating host window. AlwaysAutoResize fails to scale down at times since I am using GetRegionAvail() for the buttons and simple columns. It's just a quick hack I put together while testing the docking branch. edit: This also has the additional benefit of having full-on windows as well, SetNextWindow*() functions etc. work automatically without me having to write code for them per tab idx. I think it's why I went this way, I honestly can't remember.
I'm using ImGui for my emulator frontend, it's a great tool to make a fast gui you can use during development.
I maybe move to the docking branch soon so I can have several core windows become tabs within a single window seamlessly.
That said I'm still uncertain of how to achieve a gui like parsec's, I want the final program to have a 10-foot style gui.
Hello, Dear ImGui is a library which is a kind of "starter pack" for ImGui that enables to write multiplatform Gui apps for Windows, Mac, Linux, iOS, Emscripten, and hopefuly soon Android; with the simplicity of a "Hello World" app.
Online Emscripten/Wasm demos
| Hello, World | Advanced Docking | Classic ImGui Demo |
|---|---|---|
 |
 |
 |
| Code | Code | Code |
Features:
- Docking with an easy way to setup/restore the window layout
- Easy assets embedding on mobile platforms + emscripten (simply add an assets/ folder)
- Mobile apps specific callbacks (OnPause, OnResume, etc) and customization (icon, etc)
Backends : SDL2 + OpenGL 3 or OpenGLES3, Glfw3 + OpenGL 3, Qt
Adding backends should be easy : they are implemented by deriving an abstract class whose methods follow closely the steps found in the ImGui backend examples.
Hello, World
With HelloImGui, the equivalent of the "Hello, World!" can be written with 8 C++ lines + 2 CMake lines, and it will run with no additional modifications (including the cmake code) on all platforms.
main.cpp:
#include "hello_imgui/hello_imgui.h"
int main(int, char **)
{
HelloImGui::Run(
[]{ ImGui::Text("Hello, world!"); }, // Gui code
{ 200.f, 50.f }, // Window Size
"Hello!" ); // Window title
return 0;
}CMakeLists.txt:
include(hello_imgui_add_app)
helloimgui_add_app(hello_world main.cpp)It's still a work in progress but here's an online pixel art editor I made using ImGui. There's also a desktop version but the online one is the only one being deployed right now.
The source code is at: https://github.com/tay10r/libpx
And the website is at: https://tay10r.github.io/libpx_site/editor/pxedit_browser.html
Working on a map viewer / modding tool for Red Faction Guerrilla. Right now it's rendering the bounding box of each zone object. Working on loading some of it's mesh formats next.
I'm glad to introduce Mockingbird, a tool designed to simplify software testing and development, helping with data inspection and manipulation. With a minimalist user interface, you can easily navigate through data, mock any HTTP(s)' system, and get insights.
https://github.com/Farfetch/mockingbird
Thank you @ocornut for the amazing work on imgui. :)
ImGui Manual is an attempt to make an enjoyable and efficient manual for ImGui.
The idea is to use the reference code in imgui_demo.cpp in order to make an interactive manual.
Below is a screenshot:
But the best way to discover it is I to use it, since it is online:
The video below gives a quick (2 minutes) introduction:
This is a first implementation, and I am opened to suggestions and modifications if this manual is seen as interesting for the community.
Wow @pthom, this is wonderful and very exciting. There are so many things we could do along those lines that I’d love to see explored. I’ll look at this further and will reach for comments.
Wow @pthom, this is wonderful and very exciting. There are so many things we could do along those lines that I’d love to see explored. I’ll look at this further and will reach for comments.
Happy that you like it! Ping me when you want!
@ocornut : I created a specific issue for this subject, in order to reduce the noise in this thread :-)
I forked ImGui to make it look like windows98. Mainly for a bit of fun, learning the codebase and potentially make an app that looked like this style
https://github.com/JakeCoxon/imgui-win98
Swapped my own GUI implementation for Dear ImGui in my 3D editor / engine. The paradigm of Dear ImGui matches very nicely with the underlying Entity-Component-System architecture. It cut down the GUI code drastically and no longer gives me an headache having to update the GUI code ;). Amazing job!
Youtube: https://www.youtube.com/bramridder
Website: http://bramridder.com/conc8/index.php/hobby-projects/projects/dreaded-portal-engine
Yoga Studio is an IDE for robotics, with tools for exploring the space of control parameters. Open source at https://gitlab.com/umbrellaresearch/yoga2/
I've moved recently from Ubuntu to Arch and felt disappointed with the lack of image viewers provided by the community </joke> so I found my pretext to play with Dear ImGui and write my own OpenGL based image viewer.
Repo: https://github.com/gmagno/igl
Sandbox is a falling sand game like The Power Toy or Sandspiel.
I used imgui-rs, imgui-winit-support, and imgui-wgpu for the UI. Code is here https://github.com/JMS55/sandbox/blob/master/src/ui.rs.
Receiver 2 (https://store.steampowered.com/app/1129310/Receiver_2/) has a dear imgui debug menu (and other tools), used over Unity with Wolfire custom binding
Bizzarrus: "Some data track widgets I made a while ago for my company's internal tool"
Uniday Engine
https://www.youtube.com/watch?v=EAH-07n5gm8&feature=youtu.be
X_WhatsTheGeek_Xx: "Software Defined Radio software I'm working on. Uses default imgui widgets for the sidebar and a custom waterfall/fft widget"
Niad: "Using the tables branch for this server select menu, tables seem nice"
Veronica Park: "This not my current project, but it is an "inventory simulator" I guess..."
moneyl: "A game / destruction sim thing I've been working on (never actually got to gameplay as usual lol). Going to adapt this code to make a 2d game instead to hopefully make things simpler. Using imgui for tools and may use it for game UI as well. Using this theme: #707 (comment) The icons are FontAwesome + this library https://github.com/juliettef/IconFontCppHeaders/"
IronicallySerious: "Using ImGui in our own engine editor that we are making in college and hope to release our game with it soon!"
I use ImGui a lot in my curriculum at Breda University of Applied Sciences. Here are two screenshots from student projects, posted with permission.
BitBuster, a voxel based co-op shooter. Credits here
RTX real-time ray tracer by Viktor Zoutman
This blog post for World of Warcraft 8th extension shows a screenshot using dear imgui for game ui mockup of their "Adventures" feature:
https://worldofwarcraft.com/en-us/news/23507730/engineers-workshop-developing-for-mobile-and-pc
Microsoft Flight Simulator 2020 shows Dear ImGui in developer mode (screens from a video by LGR )
Here's simple little date/time picker I put together for ImPlot's new time-formatted axes. Since it may be useful to others, the code can be found here and here. There a few light wrappers around time_t, localtime, mktime, etc, but otherwise it should be simple to strip out. Hope someone finds it useful!
VVERSimulator is a VVER-440 Pressurized Water Reactor Simulator. It simulates the primary circuit of Unit 3 of the Paks Nuclear Power Plant in Hungary.
It also uses the Plot widgets to show real time charts:
Glitter Studio is a WIP particle editor for Sonic Generations. Currently closed source, but I plan to make it open once it is ready for public use.
Vulkan rewrite of NoodlesPlate with ImGui Docking branch and ImGuiColorTextEdit widget
My game engine's little WIP editor OverEngine
The welcome screen in my level editor
Glitter Studio is a WIP particle editor for Sonic Generations. Currently closed source, but I plan to make it open once it is ready for public use.
Looks amazing!
How did you manage to layout your Properties window, with names on the left and values on the right?
NVIDIA Texture Tools Exporter uses Dear ImGui:
https://developer.nvidia.com/nvidia-texture-tools-exporterWe're slowly entering an era where it'll become harder to spot Dear ImGui in some applications when they are using custom widgets (in the case of this, it's clearer when using the app, and the licence information explicitly mention dear imgui)
In wxWidgets, there's a hot-key combination when used on a generated executable that reveals useful information: Ctrl+Alt+<mouse-middle-key>.
I guess it's a hidden feature.
Maybe something like it could be added in Dear imGui?
Glitter Studio is a WIP particle editor for Sonic Generations. Currently closed source, but I plan to make it open once it is ready for public use.
Looks amazing!
How did you manage to layout your Properties window, with names on the left and values on the right?
I was also interested in this and after looking a bit through the source code, which seems to be public now, I found that many widgets are implemented in UiHelper.h.