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

[ocornut]

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

[AidanSun05]

Network Socket Terminal (NST) is an application for Internet and Bluetooth communication on Windows and Linux computers. Thanks to Dear ImGui's unique windowing system, the app can handle multiple connections at once!

Here's NST communicating with an ESP32 via WiFi (click for full size):

Development is in progress (alpha), it's currently sitting in a private GitHub repo. I plan to make it fully public and open-source when it's ready.

EDIT: I've made the repo public for anyone who's interested: https://github.com/NSTerminal/terminal

[xhighway999]

LuaPad - An awesome online Lua sandbox )

[mnesarco]

Marz Designer is a parametric guitar designer (CAD software). WIP...

[vtushevskiy]

GLSL exlorer (standalone shadertoy "on steroids")

https://vimeo.com/605113516 https://vimeo.com/595099323 https://vimeo.com/593638722 https://vimeo.com/589236073 https://vimeo.com/588068234 https://vimeo.com/587673956 https://vimeo.com/584456788

[mnesarco]

Hi Friends, I don't know where to put this, so If this is the wrong place please tell me.

I have been working on something to automate the creation of icon fonts and plain atlases from sets of svg files:

The idea is that you write a simple config file, put your svg files in a folder and that's it. No interactive work. You define a set of rules and your icon font is generated and your atlas is generated in case you don't want to use the icons as a font. And all the c++ sources are generated so you can use it directly in your code as images (sprites) or as text (font). Then if you change any svg file or add more, you run the script and everything is regenerated.

Atlases are optimized with rectpack, also you can add some rules to transform your svg files on the fly.

This is the first version (it can have bugs), I am using it in a Cmake project with add_custom_command(...) and everything is done by the build system, so my icons are just svg files in the source tree and they are directly usable in my code.

Example:

#include "atlas_cells.hpp"

// ....

auto bawr = your_own_texture_loader(icons::data::DATA, icons::data::SIZE);

// ...

        if (bawr)
        {
            if (ImGui::Begin("BAWR Icons")) 
            {
                ImVec2 sz32{32,32};
                ImGui::Image(*bawr, sz32, icons::sz32::fileExport.uv0, icons::sz32::fileExport.uv1);
                ImGui::Image(*bawr, sz32, icons::sz32::eye.uv0, icons::sz32::eye.uv1);
                ImGui::Image(*bawr, sz32, icons::sz32::layers.uv0, icons::sz32::layers.uv1);

                ImVec2 sz16{16,16};
                ImGui::Image(*bawr, sz16, icons::sz16::fileExport.uv0, icons::sz16::fileExport.uv1);
                ImGui::Image(*bawr, sz16, icons::sz16::eye.uv0, icons::sz16::eye.uv1);
                ImGui::Image(*bawr, sz16, icons::sz16::layers.uv0, icons::sz16::layers.uv1);
            }
            ImGui::End();        
        }

// Or using the generate icon font

#include "my-icons_codes.hpp"
#include "my-icons_loader.hpp"

// ...
        // Load your text fonts
        // .....

        // Load the icon font:
        ImFontConfig cfg;
        cfg.MergeMode = true;
        cfg.PixelSnapH = true;
        icons::Font::Load(ImGui::GetIO(), 32, &cfg);

// ...

        if (ImGui::Begin("BAWR Icon Font")) 
        {
            ImGui::Text("This is text with an icon %s ...", my_icons::folderOpen);
        }
        ImGui::End();        

And the best: it is free, I hope it can be useful for you.

https://github.com/mnesarco/bawr

Cheers, Frank.

[Jaysmito101]

Procedural Terrain Generation And Shading Tool With Node Editor, Shader Editor, Skybox, Lua Scripting, ,...

GITHUB LINK : https://github.com/Jaysmito101/TerraGen3D

Edit: This is pretty old and screenshots are broken latest version here: https://github.com/ocornut/imgui/issues/4451#issuecomment-1085988174

[duddel]

I made a prototype "Skybox Composing Tool": https://didaduddel.itch.io/skytool Not the fanciest GUI, yet. But Dear ImGui enabled me to kick-start this project with low GUI-effort!

Example assets made by Kenney.

[gargakshit]

I made a Chip-8 interpreter that has a built in machine state inspector and debugger.

Repo: https://github.com/gargakshit/chip-8

[SadKwitty]

Not mine but uses custom skinned ImGui

[796F]

Not mine but uses custom skinned ImGui

any sauce available? would love to use sliders like that.

[Jaysmito101]

Not mine but uses custom skinned ImGui

any sauce available? would love to use sliders like that.

I guess no as this is a paid software https://neverlose.cc/product?type=csgo

[martinpetkovski]

NST is a nonlinear narrative editor completely done with the stock ImGui docking branch / community widgets. Here's the official website and the Steam page.

[ocornut]

Wow this is amazing looking! I had a wip branch with gradients which I never got around to finish, namely standardizing a new system for specifying colors, this is highly motivating to get back on finishing that work.

What’s interesting is that most (not all) of whats visible in that screenshot is down to creating one helper to draw a custom button (using eg the shading function). I wonder if we should promote that use case early on before it is formalized in the style system.

[martinpetkovski]

Wow this is amazing looking! I had a wip branch with gradients which I never got around to finish, namely standardizing a new system for specifying colors, this is highly motivating to get back on finishing that work.

Thanks!

What’s interesting is that most (not all) of whats visible in that screenshot is down to creating one helper to draw a custom button (using eg the shading function). I wonder if we should promote that use case early on before it is formalized in the style system.

Exactly! I copied a bunch of functions (not only the button ones), made them take two colors instead of one, and then I pass them onto the correct vertices when drawing. I also made wrapper functions that take a single color (from the theme) and just interpolate based on the button state (flipped gradient on pressed/released). The code is a mess atm, it doesn't integrate well with the rest of ImGui, but I can share my findings on how I made it usable for me. Is there a thread for this somewhere?

[ocornut]

I’ll create a thread on monday with some of the things I’ve got already and will pull you in.

The 2018 proof of concept was: https://user-images.githubusercontent.com/8225057/44239854-40c71c80-a170-11e8-82fd-f355ecaaf60d.PNG

[ggerganov]

Recently, I needed to make a web-page that allows to interactively explore a tree with a few thousand nodes. I tried various Javascript libraries for rendering hierarchy trees, but nothing was able render the entire tree smoothly enough.

Finally, I decided to make the page using Dear ImGui (OpenGL3 + SDL) and port it to WASM with Emscripten. This is the result:

With this stack, the same app runs both as an executable and also as a web-page. All browsers and devices that I have access to are able to render the page smoothly, without any issues. The source code is mostly in this file - very quick and dirty imlpementation.

[Raais]

I made this tool to design ImGui layouts and generate code in real-time. It's made mainly for beginners and people who just want to try out ImGui for fun, but also maybe for experienced devs to make their life easier?

[ocornut]

From "Hearts of Iron IV" dev blog https://devtrackers.gg/heartsofiron/p/67fbd64f-dev-diary-a-tech-lead-s-life

From a course on complex network (university of valencia) https://sites.google.com/site/introcomplexnetworks/

Voxel Editor https://github.com/mgerhardy/engine/releases

[athanggupte]

I’ll create a thread on monday with some of the things I’ve got already and will pull you in. The 2018 proof of concept was: https://user-images.githubusercontent.com/8225057/44239854-40c71c80-a170-11e8-82fd-f355ecaaf60d.PNG

Was this thread created? If yes, please share the link here. It would be incredibly helpful as I am looking for a way to implement this kind of UI style in my project. Thank you

[aiekick]

NoodlesPlate 0.5.89 is out.

Some big refactor and improvment of the UI (Using Dear Imgui 1.85 WIP Docking and Viewport) And Many more new Features => Quick Demo Twitter Video

[ncatlin]

rgat 0.6.1 is a software reverse engineering tool for generating and visualising instruction traces

It uses ImGui via ImGui.NET and I've really enjoyed how easy it makes it to create custom widgets

[PathogenDavid]

Was this thread created?

@xdevapps It wasn't but now it has been: https://github.com/ocornut/imgui/issues/4722

[aloneguid]

Browser Tamer is a Windows desktop utility to automate browser selection, ImGui and C++20.

[chrxh]

alien is a CUDA-based artificial life simulation program.

Demo video: https://www.youtube.com/watch?v=tuh7HAc08-I ImGui was such a help for me to build a better GUI in a short time.

[jkunstwald]

Custom UI bits and pieces for a renderer/editor:

[0lru]

This is a Skia-integration into an ImGui-based framework. Below is an example that displays a synthetic image with a size of 38800x3660 and an animated figure on top of it, plus some "native" buttons of course. I'm heavily using skia-python-bindings. It's more of a tech demo than eye candy, but I hope you get it.

"Demo" source "Widget" source

Currently trying a custom matplotlib-backend-in-python-skia-in-imgui with that:

Layered rendering (render to texture during the imgui-traversal, then add the color buffer via DC.AddImage):

[WasserEsser]

It's nothing new that Riot Games uses ImGui for their testing and debugging, but there is a screenshot in this article of them using ImGui in testing TFT: https://www.upcomer.com/the-three-innovators-how-the-tft-live-balance-team-built-patch-11-24/ It's the background image for the header of the article, not fully visible on mobile.

[codecnotsupported]

https://github.com/ocornut/imgui/issues/4451#issuecomment-989791709 For mobile users:

[phkehl]

I've posted this (at a much earlier stage) before, but the code is now on https://github.com/phkehl/ubloxcfg/tree/master/cfggui This is u-blox generation 9 positioning (GNSS) receiver control and analysis tool. I will try to find a good example logfile that you can play in case you don't have a GNSS receiver available. It's Linux only (too many GCC and GNU libc things are used. And I don't have Windoze anyways.. :-)

[aiekick]

CADRays software of OpenCascade are using ImGui (Docking) and ImGuizmo video : https://www.youtube.com/watch?v=eu_dMMQAhd0

[hnOsmium0001]

https://github.com/hnOsmium0001/imgui-command-palette is a Sublime Text/VSCode style command palette library implemented using C++17 standard library and ImGui. (see the README for more information)

[mamoniem]

Mirage Engine (Vulkan/C++) with ImGuizmo extension and a modified version of the super pretty Cherry theme

[slajerek]

Retro Debugger has been released today! This is retro computers APIs host for debugging (but not only!), currently supporting Commodore 64 (Vice), Atari XL/XE (Atari800), and NES (NestopiaUE)

https://github.com/slajerek/RetroDebugger/

[dgregorius]

Custom UI bits and pieces for a renderer/editor:

This looks very nice! Which font are you using?

[tksuoran]

https://github.com/tksuoran/erhe work in progress. Using ImGui 1.86 with docking branch, custom rendering backend rendering all of ImGui with a single draw call.

[dgregorius]

Looks very nice! What font do you use? What is different in your font rendering backend wrt to the standard backend? My font rendering looks horrible at the moment. I don't know what changed...

[tksuoran]

Thanks 🙂

For good quality font rendering: You really need a good quality font, and treat font texture as linear. Possibly using freetype also helps.

• I recommend Source Sans Pro font (you can get it from Google fonts). It is licensed under SIL Open Font License.
• I do all shading in linear color space
• I use RGBA8 as font texture format. The scalar values for font textures typically are coverage (based), which is linear, so do not use sRGB for such textures.
• I prepare the font texture by premultiplying RGB with alpha as I use premultiplied alpha blending
• I create my GLFW window with glfwWindowHint(GLFW_SRGB_CAPABLE, GLFW_TRUE)
• I enable GL_FRAMEBUFFER_SRGB (writes from shader are converted from linear to sRGB for framebuffers with sRGB format)
• I convert ImGui vertex colors from sRGB to linear in vertex shader
• I use freetype so I define IMGUI_ENABLE_FREETYPE and use misc/freetype/imgui_freetype.cpp

My ImGui backend implementation is at https://github.com/tksuoran/erhe/blob/main/src/erhe/imgui/imgui_impl_erhe.cpp and I am happy to answer any questions.

[tksuoran]

Instead of having viewport in my ImGui window I put ImGui into my viewport:

This is very early version, backend needs to be implemented, but I think it should work fine.

[durswd]

A gradient editor which supports color, alpha and intensity.

https://github.com/effekseer/ImGradientHDR

[tksuoran]

I heard you liked ImGui so I put ImGui inside ImGui

[KatPurpy]

Hello, yes, this is me again with a new monkey game using DearImgui

Link: https://kat-purpy.itch.io/smpcd

[vasilenkoalexey]

The simplest speaker system (vented-box only right now) designer! ImGui + ImPlot.

Boxed

[ocornut]

This talk shows a few debug tools used by Call of Duty: Shadows of Cold War https://research.activision.com/publications/2021/10/shadows-of-cold-war--a-scalable-approach-to-shadowing

[foxnne]

I built a small pixel art editor for my own use, using Dear ImGui and written in Zig:

Pixi

[phkehl]

glmatrix from xscreensaver as animated background in the app.. because, why not.. :-)

Result of me learning some OpenGL... xscreensaver's glmatrix ported to OpenGL 3.3 core profile.

See https://github.com/phkehl/glmatrix-experiment Screenshot from https://github.com/phkehl/ubloxcfg/blob/master/cfggui/

[arabine]

Because the world needs another Wordle (in french, sorry), here is an ImGui version : Yes, you can make games in ImGui !

Depot : https://github.com/arabine/galaxie-de-mots

[ggerganov]

Because the world needs another Wordle (in french, sorry), here is an ImGui version : Yes, you can make games in ImGui !

Here is another one in Bulgarian, also using Dear ImGui: https://github.com/ggerganov/wordle-bg

[aiekick]

ImGui in Monogame is broken :( Unsure if ImGui itself, ImGui.NET, or MonoGame.Imgui:

post an issue if you have an issue, but dont do that on this thread please

[hoffstadt]

Cool little music player made with Dear ImGui (using Python and Dear PyGui).

https://user-images.githubusercontent.com/39973752/153445050-010257e0-7d4b-4c54-ad5b-18ae3c761f2a.mp4

[ZotyDev]

Added a custom BeginDragDropTarget() and AcceptDragDropPayload() to implement this nice in-between line.