Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gallery: Post your screenshots / code here (PART 13) #3793

Open
ocornut opened this issue Feb 5, 2021 · 53 comments
Open

Gallery: Post your screenshots / code here (PART 13) #3793

ocornut opened this issue Feb 5, 2021 · 53 comments
Labels

Comments

@ocornut
Copy link
Owner

ocornut commented Feb 5, 2021

This is Part 13, 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
Copy link
Owner Author

ocornut commented Feb 5, 2021

Starting the topic with some impressive stuff gathered around:

@felixfaire: "Hey all, I used imgui to make this app with Cinder. (with a bit of styling)"
MW_RR_PentagramBlog_images_new2

@IronicallySerious: "Did some massive UI refactors (aka pickup up other designs online and tweaked the values a bit :p) in our engine"
Rootex Editor

Alyx: "model viewer and live texture editing tool using imgui"
Alyx's model viewer

Spotify client (using internal Spotiy API)
Video: https://twitter.com/rogueops/status/1348956562254139392
Pär Bohrarper - Hackdays + Dear ImGui + FFmpeg

Photon 3D LUT Editor by @PirminStraub and team
#3792
https://www.color.io/photon
Overview_Operate_Spindel
Snapshot Mixer

@jamesthomasgriffin
Copy link

jamesthomasgriffin commented Feb 5, 2021

This isn't as pretty as other projects, but might be useful for some, it's available here.

This is a side project, which I'm calling ImControl. One pushes transformations to a stack and then places control points which can then be dragged. The key point is that the transformations depend on parameters (passed as pointers) and dragging the control points feeds back to these parameters. One doesn't have to worry about how to do this, all the vector calculus / linear algebra happens in the background.

Fractal tree editor
arm_example

The API is still in flux, but here is the code for the arm example for anyone interested (edit: best to check out the repo, linked above):

static float base_rotation = 0.0f;
static float base_angle = 0.1f;
static float elbow_angle = 0.2f;

// Begin the viewport, filling available space
ImControl::BeginControlPointView("arm", { -1, -1 }, { 1, 1, 1, 1 });

// Push projection and camera matrices
ImControl::PushPerspectiveMatrix(45.0f / 180.0f * 3.14159f, ImControl::GetControlPointViewAspectRatio(), 0.01f, 10.0f);
ImControl::PushLookAtMatrix({ 0.0f, 0.9f, -1.5f, 1.0f }, { 0, 0.5, 0, 1 }, { 0, -1, 0, 0 });

ImControl::PushRotationAboutY(&base_rotation);  // Rotate arm

ImControlPointFlags flags = ImControlPointFlags_DrawControlPointMarkers | ImControlPointFlags_DrawParamDerivatives;

ImControl::ControlPoint({ 0.2f, 0, 0, 1.0f }, &base_rotation, flags, 0, 0.0375f, { 1, 0, 1, 1 });  // Controls Rotation
ImControl::StaticControlPoint({ 0.0f, 0, 0, 1.0f }, flags, 0, 0.025f, { 1, 1, 1, 1 });  // Demarks base of arm

ImControl::PushRotationAboutZ(&base_angle);  // Rotate arm up and down
ImControl::PushStaticTranslationAlongY(0.5f);  // Move up to next joint

ImControl::ControlPoint({ 0.0f, -0.1f, 0.0f, 1.0f }, &base_angle, flags, 0, 0.025f, { 1, 1, 1, 1 });  // Control points along arm
ImControl::ControlPoint({ 0.0f, -0.2f, 0.0f, 1.0f }, &base_angle, flags, 0, 0.025f, { 1, 1, 1, 1 });
ImControl::ControlPoint({ 0.0f, -0.3f, 0.0f, 1.0f }, &base_angle, flags, 0, 0.025f, { 1, 1, 1, 1 });
ImControl::ControlPoint({ 0.0f, -0.4f, 0.0f, 1.0f }, &base_angle, flags, 0, 0.025f, { 1, 1, 1, 1 });
ImControl::ControlPoint({ 0.0f, -0.0f, 0.0f, 1.0f }, &base_angle, flags, 0, 0.0375f, { 1, 1, 1, 1 });  // Control point at joint

ImControl::PushRotationAboutZ(&elbow_angle);  // Bend the elbow
ImControl::PushStaticTranslationAlongY(0.4f);  // Move to end of arm

ImControl::ControlPoint({ 0.0f, -0.1f, 0.0f, 1.0f }, &elbow_angle, flags, 0, 0.025f, { 1, 1, 0, 1 });  // Control points along forearm
ImControl::ControlPoint({ 0.0f, -0.2f, 0.0f, 1.0f }, &elbow_angle, flags, 0, 0.025f, { 1, 1, 0, 1 });
ImControl::ControlPoint({ 0.0f, -0.3f, 0.0f, 1.0f }, &elbow_angle, flags, 0, 0.025f, { 1, 1, 0, 1 });
ImControl::ControlPoint({ 0.0f, -0.0f, 0.0f, 1.0f }, &elbow_angle, &base_angle, flags, 0, 0.0375f, { 1, 0, 0, 1 });  // Hand controls two angles

ImControl::ClearTransformations();
ImControl::EndControlPointView();  // Parameter changes are made here

elbow_angle = clamp(elbow_angle, 0.3f, 2.8f);  // Clamp angles after view ends
base_angle = clamp(base_angle, 0.1f, 1.4f);

@shiity
Copy link

shiity commented Feb 6, 2021

ezgif com-gif-maker

A quick layout I made, Working on some new widgets now!

@dfranx
Copy link

dfranx commented Feb 7, 2021

ImFileDialog is a file dialog library for Dear ImGui

FileDialog

@aiekick
Copy link
Contributor

aiekick commented Feb 11, 2021

Some Screenshots of my live shader editor NoodlesPlate
Im working on a UI Refactor and adding many new cool feature.
Using the Docking Branch 1.81, ImGuiFreetype with Roboto font and custom icon fonts generated with ImGuiFontStudio

NoodlesPlate_Msvc_x64_LajKk48zfT
devenv_hdPqSAjMYJ

@xhighway999
Copy link

xhighway999 commented Feb 11, 2021

I made a small Klickbot using my framework xhfr and styled it a bit. It also renders Dear Imgui into another buffer in order to apply glow effects using glsl. You can find my other projects here.
ezgif com-video-to-gif

@gboisse
Copy link

gboisse commented Feb 12, 2021

Oh never realised ImGui had a color wheel option, great stuff! 🙂

rogueengine

@EisernSchild
Copy link

Here's a first look at my scripted thread/hlsl-shaders engine :)

scap_01

@ocornut
Copy link
Owner Author

ocornut commented Mar 5, 2021

Duckstation
https://github.com/stenzek/duckstation
duckstation
157884104_774294969893966_2463941389825730222_n

@soufianekhiat

I'm trying to build a collection of controls & draws which can help for my image processing/dataviz hack/prototypes.

Ycx9HI8aBP

@eliasdaler
Copy link
Contributor

@ocornut do you think that it'll be good to open next threads like this in "Discussions" section from now on? I think they'll fit better there.

@ocornut
Copy link
Owner Author

ocornut commented Mar 10, 2021

Presently I think "Discussions" have missing features (no labeling) and biased design (no way to mark as resolved without stupid scoring/gamification) so at this mind I am not even sure I want Discussions, I'm just hoping Github will at least add the labeling otherwise they are not worth using ihmo.

@soufianekhiat
Copy link

soufianekhiat commented Mar 14, 2021

I decided to make it public:
https://github.com/soufianekhiat/DearWidgets

Collection of Draws (from ImDrawList) and Widgets:

Some examples here:

ShaderToy (From C++ Lambda):
resccaled3

Hue Selector:
W0Q9VXNeGK

Ring Color:
GQLfC3C7Jk

Custom Ring Color:
Kt4ye6FDWq

Convex Mask:
kYA3Dw6TmH

Range Select 2D:
EnvhshMO1B

@jarikomppa
Copy link

ss1
ss2
ss3

Audio spreadsheet, or in other words, virtual modular synthesizer using spreadsheet as the user interface.
I wonder if this is the first spreadsheet with ImGui?
Sassy can be aquired from: https://sol-hsa.itch.io/sassy

@vertver
Copy link

vertver commented Apr 1, 2021

ImGui - perfect library with great perfomance and excelent API, and that's why we are using this in our plugin.

Plugin is free, and it's can be downloaded from https://suirless.com/

Thank's for this library

dynation

@wtf-keaton
Copy link

Easy and cute cheat menu
fT26KYLbie

@Matheus-Garbelini
Copy link

Matheus-Garbelini commented Apr 3, 2021

Easy and cute cheat menu

Some guys really like to test @ocornut patience haha.

@flamendless
Copy link

flamendless commented May 28, 2021

CodeNect is a visual programming software for beginners!
Download link

Thanks to @rokups' ImNodes for the nodes ui lib

sc_sample_branch
sc_assessments_run
sc_debug
sc_simulation

@slajerek
Copy link

https://fb.watch/5N84HLLJFW/

Testing very early alpha version of the Retro Debugger by the SID master LukHash :)

@ocornut
Copy link
Owner Author

ocornut commented Jun 8, 2021

https://codeperfect95.com
Codeperfect 95: A Blazing Fast IDE for Go
"A toolkit that understands Go as a first language.
CodePerfect 95's intellisense is hand-written, extensively tested, and designed for speed and reliability.
No more language server madness. No more sending a JSON packet over a socket every keystroke. No more restarting your IDE because gopls crashed."

image

@ocornut
Copy link
Owner Author

ocornut commented Jun 9, 2021

This blog post about Overwatch 2 shows some tooling:
https://playoverwatch.com/en-us/news/23674944/

overwatch2

@0x416c69
Copy link

The biggest set back for me (and couple of others) which prevent us to use ImGui in production for our players is how limited its text rendering is and the lack of support for complex text layout (shaping, bi-di, etc). This is because the majority of my players write in Persian (which is basically the Arabic script)

So I've searched on google and from #1228 I knew I had to implement this myself.

So I went ahead and did.

example_win32_directx9_2021-06-14_17-25-41

I had to heavily modify ImGui's freetype integration, in fact glyph range and merge mode no longer work because when you do text shaping, you have to load all the glyphs, some of the glyphs are not mapped to any codepoint since they are ligatures.
Then I had to rewrite almost every part of the text rendering functionality resulting in triple the amount of the current code written for text rendering.
There are many caching and tricks in place to prevent shaping and other stuff in each frame.

2021-06-14_05-27-23-PM.mp4

Word wrapping was not easy to get right... Since I fully support bi-di texts, word wrapping is quite complicated and there wasn't much resource about this online.

And if that wasn't enough

2021-06-14_05-31-29-PM.mp4

stb_textedit is not meant to do RTL or at least I haven't seen anyone use stb_textedit for RTL input widget. So I spent a good amount of time making stb_textedit work alongside RTL and bi-di text.
The blinking cursor was also very complicated to do and selections are no longer just one rectangle for each line and as you can see in the video, although there's still a single Stb.select_start and Stb.select_end, multiple portions of text are being selected and it's because of bi-di. I've also added right align to input widget.

Honestly this wasn't an easy task and since ImGui's codebase was not ready for this I had to heavily edit ImGui itself.
I've also separated the atlas for each font and the font texture get built in another thread (async load) so it will no longer block the rendering thread. (This wasn't required but I did it to speed up the loading)

Open source libraries used: HarfBuzz (for shaping), SheenBidi (for bi-di text), FreeType

@ocornut
Copy link
Owner Author

ocornut commented Jun 14, 2021

@0x416c69 This looks amazing!
It's a big thing and instead of discussing it here, I would suggest that you post all of this in a new Issue + ideally post a link to the sources/fork/mods so we can get an idea of whether this would be possible to get some of it main line (even partially). I understand you went through caching the shaping and other stuff, it's going to be good to have that as a refernece.

(PS: We've been working on a rework of InputText() which among other things should simplify the selection rendering code (current one is tricky because it is interleaved with two other things, for the sole purpose of not having to iterate the buffer multiple times, new version maintain a line index meaning none of the slow seeking at required anymore meaning that code is simplified)

@0x416c69
Copy link

0x416c69 commented Jun 14, 2021

@ocornut Thank you.

I'll have to refactor the code first since it's pretty messy right now. I'll put the link to the repo in the newly created issue: #4227

@LunaTheFoxgirl
Copy link

I'm working on a library & rigging tool for 2D puppets, mainly aimed at VTubing but also for games (like visual novels)

Rigging tool uses ImGui and our binding bindbc-imgui, which in turn uses cimgui
billede

@dfeneyrou
Copy link

dfeneyrou commented Jun 20, 2021

Palanteer, a new visual profiler for C++ and Python (for the moment), lean and with high performance.
https://github.com/dfeneyrou/palanteer
It uses Dear Imgui from the docking branch and implements many kinds of views, all interacting with each other when hovering or clicking.

Example of view layout:
views

Example of lock contention:
lock_contention

Nanosecond precision:
nanosecond_precision

All displayed elements are built with Dear ImGui primitives.

@hoffstadt
Copy link
Contributor

hoffstadt commented Jun 28, 2021

Dataflow simulator created by Jeffrey Spaan using DPG( built with Dear ImGui). Repo is here.

image

@stephenfewer
Copy link

Hi, I developed a commercial Windows allocation profiler called WonderLeak using the ImGui docking branch for the interface.

shot

@0lru
Copy link

0lru commented Jul 2, 2021

C++& Python layer for ImGui & ImPlot. The library itself is written in C++ and already usable in Python via Pybind11.
For the layout, I'm trying to implement a subset of the
CSS-Flexbox-idea (https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
It aims at fast prototyping small applications where performance does also matter.

Project:
https://github.com/0lru/p3ui

widgets
plots

Flexible Example:

    from p3ui import *

    ...

    widgets = ScrollArea(content=Flexible(
        width=(100 | percent, 0, 0),
        direction=Direction.Vertical,
        align_items=Alignment.Stretch,
        justify_content=Justification.Start))


    ...

    widgets.content.add(ScrollArea(
        width=(200 | px, 1, 0),
        height=(200 | px, 1, 0),
        content=Image(texture=Texture((imread(test_png_path.as_posix()) * 255).astype(np.uint8)))
    ))

@WerWolv
Copy link

WerWolv commented Jul 11, 2021

Been working on a custom PCB emulator the past few days. Here's a button, an LED and an UART pin header connected to an emulated RISC-V controller. Didn't do much fancy yet with ImGui but it was once again super helpful to quickly build a nice interface for the whole thing :)

Code currently running on the RISC-V Core:

#include <types.hpp>

void print(const char* string) {
    char *UARTA_TX = reinterpret_cast<char*>(0x5000'0004);

    for (const char* s = string; *s != 0x00; s++)
        *UARTA_TX = *s;
}

int main() {
    print("Hello RISC-V!\n");

    volatile u8 *GPIOA_CR = reinterpret_cast<volatile u8*>(0x6000'0000);
    volatile u8 *GPIOA_IN = reinterpret_cast<volatile u8*>(0x6000'0004);
    volatile u8 *GPIOA_OUT = reinterpret_cast<volatile u8*>(0x6000'0008);

    *GPIOA_CR = 0b10;
    while (true) {
        if (*GPIOA_IN == 0b01)
            *GPIOA_OUT = 0b10;
        else
            *GPIOA_OUT = 0b00;
    }
}

[[gnu::section(".crt0")]]
[[gnu::naked]]
extern "C" void _start() {
    asm("lui sp, 0x10020");
    asm("tail main");
} 

Code can be found here: https://github.com/WerWolv/PCBEmulator

@MartinBspheroid
Copy link

Prototype of music thingy.
And yes, it's running on phone.

IMG_20210719_074714
IMG_20210719_074937
IMG_20210719_075107

Loads of custom widgets, still miles to go, but darn, i though I would never be able to make anything like this.

Thanks Omar!

@iUltimateLP
Copy link

This is ImGui together with the Unreal Engine 4 (using this backend) in my adventure puzzle game. The output log window hooks into Unreal's logging system and displays a real time log of the game in the same way the UE4 log does it. I <3 ImGui!

image

@KatPurpy
Copy link

So hello, people! It is rare nowadays to see DearImgui being used as actual game interface. So I went ahead and used it for MonogameJam3 jam. The topic was "low budget". So I used the library not only for making tools but for making GUI itself!

Game link: https://kat-purpy.itch.io/super-monkey-bathtub-racing
Gameplay stream (3:21:11): https://youtu.be/ggTfxHrL9Vg?t=12070

Video where DearImgui is being used as dev tool (that involves drawing gizmos): https://cdn.discordapp.com/attachments/380799075538305025/852517735450935336/monkeyracing.webm

S C R E E N S H O T S

gameplay
gameplay
main menu
main menu

@drhelius
Copy link

These are my Game Boy and Master System / Game Gear emulators:
https://github.com/drhelius/Gearboy
https://github.com/drhelius/Gearsystem

I migrated from Qt to ImGui and it was the best decision ever!

8E68B0C5-9ED1-4001-BDC8-2256398228F9
FA1879A9-2490-468D-B572-A97B9A7374A1

@noizebox
Copy link

noizebox commented Jul 31, 2021

I've seen a few audio processing plugins (VST) posted here, so here is another one :) I wrote it for KVRs semi-annual Developers Challenge. It's loosely based on an old guitar pedal that was given to me by my dad. It's both a fuzzbox and a compressor that can pump like crazy with the right settings. Try it on drums and other dynamic material with the amount up all the way and tweak the speed and gain knobs for some grainy pumping ;) You can find some audio examples and download the binary (windows and linux) here https://www.kvraudio.com/product/nb01---distortion-sustainer-by-noizebox-industries

The UI is all Dear ImGui with custom widgets for the knobs and level meters, and a modified GLFW as platform backend. It uses thread-local ImGui contexts and one drawing thread per instance to provide multiple, separate editor instances.

Peek 2021-07-31 19-29

@vulptex
Copy link

vulptex commented Aug 3, 2021

Found that on youtube while looking for audio-dsp people :-), fell in love!

IMAGE ALT TEXT HERE

@blueskythlikesclouds
Copy link

HedgeGI is a tool that bakes global illumination and light field data for Sonic games that utilize Hedgehog Engine.
image

@kuravih
Copy link

kuravih commented Aug 13, 2021

Here is another canvas addon for dear imgui. I cobbled this together for an imaging project I'm working on.
imgui_canvas

imgui_canvas demonstration 1

imgui_canvas demonstration 2

@Leandro4002
Copy link

I made a small particles editor using MonoGame and ImGui .NET Wrapper.
ImGui workflow is a bit weird to use but I like it.

https://gitlab.com/Leandro4002/particleseditor

@ocornut
Copy link
Owner Author

ocornut commented Mar 4, 2023

Anyone can provide a simple way to render a triangle inside imgui window not glfw? please as simple as possible?

You can use the ImDrawList api.
This is documented in Demo>Examples>Custom Rendering.
Please don’t ask further questions in this thread.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests