imgui icon indicating copy to clipboard operation
imgui copied to clipboard

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

Open ocornut opened this issue 4 years ago • 73 comments

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!

ocornut avatar Aug 20 '21 16:08 ocornut

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!

image

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

Animation

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

AidanSun05 avatar Aug 22 '21 18:08 AidanSun05

LuaPad - An awesome online Lua sandbox screenshot )

xhighway999 avatar Sep 05 '21 14:09 xhighway999

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

Screenshot from 2021-09-12 09-47-49

mnesarco avatar Sep 12 '21 14:09 mnesarco

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

Screen Shot 2021-09-14 at 15 48 09 Screen Shot 2021-09-14 at 15 45 00

vtushevskiy avatar Sep 14 '21 22:09 vtushevskiy

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:

screenshot_20

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();        
        }

screenshot_21


// 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.

mnesarco avatar Sep 24 '21 00:09 mnesarco

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

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

Screenshot (0)

Screenshot (1)

Screenshot (2)

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

Jaysmito101 avatar Sep 30 '21 21:09 Jaysmito101

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.

G9YTgT

duddel avatar Oct 14 '21 17:10 duddel

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

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

Screenshot of the chip-8 interpreter

gargakshit avatar Oct 16 '21 14:10 gargakshit

image

Not mine but uses custom skinned ImGui

SadKwitty avatar Oct 18 '21 01:10 SadKwitty

image

Not mine but uses custom skinned ImGui

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

796F avatar Oct 20 '21 04:10 796F

image 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

Jaysmito101 avatar Oct 20 '21 05:10 Jaysmito101

image

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.

martinpetkovski avatar Oct 30 '21 12:10 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.

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.

ocornut avatar Oct 30 '21 12:10 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.

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?

martinpetkovski avatar Oct 30 '21 12:10 martinpetkovski

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

ocornut avatar Oct 30 '21 12:10 ocornut

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:

explorer

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.

ggerganov avatar Oct 31 '21 09:10 ggerganov

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?

1

2

Raais avatar Nov 03 '21 16:11 Raais

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

c67d7d70979b6153484d9033ba62c3d843f62130 f6abd759c74dc72140e280c463e948e2d6465768

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

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

ocornut avatar Nov 04 '21 10:11 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

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

athanggupte avatar Nov 10 '21 14:11 athanggupte

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

NoodlesPlate_Msvc_x64_N69aImL27C

NoodlesPlate_Msvc_x64_wPe36WwlZX

aiekick avatar Nov 15 '21 00:11 aiekick

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

imgui_gallery rgat imgui_example_gif

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

ncatlin avatar Nov 15 '21 10:11 ncatlin

Was this thread created?

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

PathogenDavid avatar Nov 15 '21 10:11 PathogenDavid

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

one

aloneguid avatar Nov 16 '21 17:11 aloneguid

alien is a CUDA-based artificial life simulation program.

Screenshot

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.

chrxh avatar Nov 26 '21 11:11 chrxh

Custom UI bits and pieces for a renderer/editor:

screen1 screen2 screen3

jkunstwald avatar Nov 26 '21 14:11 jkunstwald

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

img

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

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

0lru avatar Dec 01 '21 04:12 0lru

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.

WasserEsser avatar Dec 09 '21 12:12 WasserEsser

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

codecnotsupported avatar Dec 09 '21 12:12 codecnotsupported

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.. :-) screenshot3

phkehl avatar Dec 11 '21 18:12 phkehl

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

image

aiekick avatar Dec 15 '21 18:12 aiekick