ocornut / imgui

Dear ImGui: Bloat-free Graphical User interface for C++ with minimal dependencies
MIT License
61.34k stars 10.33k forks source link

Gallery: Post your screenshots / code here (PART 15) #5243

Open ocornut opened 2 years ago

ocornut commented 2 years ago

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

gboisse commented 2 years ago

Some particle effects using ImGui-based nodes ✨

imgui_shot1

Andrej123456789 commented 2 years ago

image Termi, WIP terminal, loading executables and better console interface are still not here.

TYSON-Alii commented 2 years ago

v0 1 3

my small game engine. link

ItsBranK commented 2 years ago

A fancy multicolored terminal I've been working on for a game (with autocompletes), and no it's not a cheat menu ocornut. Source can be found here.

mborgerson commented 2 years ago

Dear ImGui is used for the UI in xemu, an original Xbox emulator. A few improvements have been made since the last time I mentioned it here. It took a bit of work to get things to look and behave how I wanted, but I'm really happy with the result and Dear ImGui made it relatively straightforward to implement, so a big thanks to Dear ImGui contributors!

A popup menu system was added for quick actions and configuration with a controller/mouse. These popups are animated to ease in and out and feel like a menu system you'd find on a console or handheld. popup mp4

For the main menu interface, a couple of custom widgets were added for toggles/sliders: widgets mp4

And some custom GL rendering for gamepad and logo are mixed in pretty seamlessly: gl mp4 logo mp4

Along the way I developed a configuration system that allows you to easily define your config options and load/store from a .toml file into a simple struct, which plays nicely with Dear ImGui's control conventions and might be useful to others.

moebiussurfing commented 2 years ago

looks super cool @mborgerson , what should we look into to get use of the animated menus and theme? do you think could be easy or it's dependant of much of your classes/manager?

gan74 commented 2 years ago

The UE5 inspired UI in my engine editor thing, Yave. Nothing too fancy, but I like it clean and simple.

Yave

Color setup here

A cool tidbit: the gizmos are entirely drawn using ImGui, in 2D, on top of the viewport.

travishaynes commented 2 years ago

I'm using ImGui to create a PDF viewer designed for doing quantity takeoff from scaled construction drawings. Normally reviewing plans is a pain. Each page is 30 to 48 inches wide when printed out full size. They're packed full of details and literal walls of text. There's references for wall types, details, sections, elevations, etc. This screenshot is from one document with several views open. Two of the windows are from the same page just zoomed in on the stuff I wanted to look at, and the bottom view is a different page focused on the wall types. Normally I'd be switching from page to page, zooming in on details and stuff. I'm already using this at work full time now, and I've just barely started on it.

Screenshot from 2022-05-21 16-55-19

DickyQi commented 2 years ago

MIDI Play and keyboard test base on Timidity and ImGui

截屏2022-05-22 22 40 35 截屏2022-06-06 13 34 53 截屏2022-05-22 22 40 53

GitHub project: Tanlu libmidi https://github.com/tanluteam/libmidi.git

aloneguid commented 2 years ago

@DickyQi greao demo, how do you do spectrum visualisation with ImGui?

DickyQi commented 2 years ago

@aloneguid, first I need calculate audio data to FFT data and compose to db value, then I create a buffer to maintain every buffered window(in my case, it is 1024 samples). When I draw spectrum data, I also need changed data to HSV color. Actually I made a whole new class to handle audio scope data.

ghost commented 2 years ago

Cramped programming on Android 😄 Powered by Dear ImGui and its excellent Android backend! https://www.youtube.com/watch?v=PR3WeI5LaHw

tksuoran commented 2 years ago

Working on drag and drop support in erhe:

Dragged items can be dropped in the bottom third of target to move items after target in the node tree: drag_and_drop_after

Dragged items can be dropped in the middle third of target to move items as child of target node: drag_and_drop_as_child

ImGui::BeginDragDropTargetCustom() makes implementing custom previews like this easy to do. Those who are interested, you can check for example Node_tree_window::drag_and_drop_target()

immortalx74 commented 2 years ago

I'm using the ReaImGui bindings to create a guitar/bass MIDI editor for Reaper. https://github.com/immortalx74/Reaffer rec_reaffer9

aiekick commented 2 years ago

My new soft "Lumo" thanks to @thedmd for his cool node graph (especially the zooming feature) Full video Lumo_Windows_x64_X6S8DxZy1F

Hoek67 commented 2 years ago

Rewriting a MCU resource editor that was written in VC/C .net to pure C/C++ using ImGui and Goblin 2D/3D Engine that I've been working on for ages.

Got the main (hardest) bit working well. This is the navigator and the edit zoom. Love how a single texture is used for all 3 previews... just sized in the hardware.

The pixel editing is VERY responsive.

The ImGui fonts are so good they basically totally replace the inbuilt fonts I use to use. (This saves a LOT of time).

I started using icons for buttons but it was a pain to setup. I ended up writing a small function that adds icons to the default font by looking for PNG files in a certain directory. The icons are something like u5001.png so I know what u8 code to assign each on to.

While loading the icons I also create a grayscale one and add 0x1000 to the code.

imgui1

Other thing I found GREAT about ImGui was the ability to write a debug screen for my engine to enable me to visually see what was going on. The included textures and their status, models, sounds, scene rendering and more. It also enables changing of key variables in the engine in real time to test stuff and has been (excuse the pun) a real game changer.

aiekick commented 2 years ago

@Hoek67 if you need a flexible and simple icon system for your buttons , you can jsut load in imgui a font icon like fontawesome or others. Then use the font codepoint in your labels. See IconFontCppHeaders or my soft ImguiFontStuudio if you need just some icons and not the whole font

ocornut commented 2 years ago

Tooll 3 - A realtime animation toolkit https://github.com/still-scene/t3/ tooll-screenshot

thedemons commented 2 years ago

Here's a fancy animated UI that's built with an animation library I've been working on. Although it looks complex and hard to implement, the library handles most of the work. The code is very messy for now, but I think I'm gonna publish it soon. Edit: Sorry for the non-English text

https://user-images.githubusercontent.com/17585270/173690093-5c10dae5-279c-439a-81ab-09f7cf4fe576.mp4

FanisDeligiannis commented 2 years ago

Hello! I'm developping an IDE, Assembler and Emulator for the CPU Intel 8085. This is mainly to be used by my university, but it's an open source project. This is my first "major" project and I'm working on it 100% alone.

One of the biggest challenges I'm facing, is keeping my code lightweight, cross platform, as well as supporting old systems.

I tried other options, and ImGui was by far the easiest to use, while keeping everything lightweight and working on all platforms. On top of all this, ImGui gives users 100% freedom to "choose" their own UI. Wether they want to change the layout, or use 2 screens at the same time. All that with literally 0 effort on my part!

Another plus that keeps me using ImGui is the amount of open source plugins. ImGui code is (usually) easy to understand, and thus easy to modify to my needs.

Thank you for everything!

https://github.com/FanisDeligiannis/8085_emulator

image

tksuoran commented 2 years ago

Update to erhe - 64 directional shadow-mapped lights: 2022_06_17

benanil commented 2 years ago

https://github.com/benanil/Castle-Engine twitter @anilcanglk12 Castle Engine terrain with grass

dalerank commented 2 years ago

175765251-8394f488-f126-4422-9c71-e8b69420b173

immortalx74 commented 2 years ago

WIP Windows tabbed file explorer replacement. Uses the voidtools Everything SDK for searching and navigating. imexplorer

vasilenkoalexey commented 2 years ago

My very simple Texas Holdem equity calculator h2

keycccc commented 2 years ago

008

keszegh commented 2 years ago

Fragmenter - animated loop machine, a real-time animation app, using ImGui via the Gideros ImGui plugin:

Screenshot 2022-07-01 10 27 45

(can be added to the software list too)

moebiussurfing commented 2 years ago

008

looks cute. what's the font that you used?

keycccc commented 2 years ago

jetbrains mono

On Fri, Jul 1, 2022 at 10:53 AM moebiusSurfing @.***> wrote:

[image: 008] https://user-images.githubusercontent.com/41506501/176412750-0cc2dd1a-00e0-422a-b5f0-471366e03e07.png

looks cute. what's the font that you used?

— Reply to this email directly, view it on GitHub https://github.com/ocornut/imgui/issues/5243#issuecomment-1172106685, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJ4VNRNH4Y3VA2MOUW7NG23VR2WZVANCNFSM5UJTHI4Q . You are receiving this because you commented.Message ID: @.***>

--

Oded Kadshai // Mobile +972-512-301-311

peter1745 commented 2 years ago

Hazelnut Hazelnut, the editor for the Hazel engine. Of course this is the private version and not the public one listed on the "Software using dear imgui" page but I thought I'd share it either way

ocornut commented 2 years ago

Editor for Earthblade (upcoming game by the makers of Celeste and Towerfall) Earthblade Editor

Harfang 3D Engine https://github.com/harfang3d/harfang3d harfang-studio-cyber-city

A Dear Imgui sample in Wicked Engine https://github.com/plemsoft Wicked Engine

milkru commented 2 years ago

Foton Shader Editor for GLSL and HLSL shaders written in Vulkan: https://github.com/milkru/foton universe

SummersEdge23 commented 2 years ago

Wirely: Wiring Harness Tool link: www.androidcircuitsolver.com/wirely

Wirely_2022_07_22

tksuoran commented 2 years ago

ImGui Inception in erhe: image

hugeproblem commented 2 years ago

I made a DSL to define ImGui panel: (OK, to be fair, it's just Lua)

parmset 'Hello'

label 'A Little Test:'
toggle 'x' {label='Enable Group Foo', default=true}
text 'name' {label='Name', default='Foo\nBar\n!@#$%^&*()_+""', multiline=true}
group 'foo' {label='Foo', disablewhen='{x}==false'}
  label 'A Int Value:' {joinnext=true}
  int 'a' {max=1024, min=1}
  float 'b' {default=1024, ui='drag', speed=1}
  color 'color1' {hdr=true, default={1,0,0}}
  color 'color2' {alpha=false, hsv=true, wheel=true, default={0.3,0.1,0.4,0.5}}
  int 'c'
  struct 'X'
    float 'a'
    float 'b'
    double 'c'
  endstruct 'X'
endgroup 'foo'
spacer ''
spacer ''
separator ''
toggle 'y'
group 'bar' {closed=true, label='BarBarBar'}
  float2 'pos' {disablewhen='{Points}.empty()'}
  menu 'mode' {
    class='Mode', label='Mode',
    items={'a','b','c'}, default='b',
    itemlabels={'Apple','Banana','Coffe'},
    itemvalues={4,8,16} }
  color 'color3' {default={0.8,0.2,0.2,1.0}, disablewhen='{mode}!={class:mode}::a'}
endgroup 'bar'
list 'Points' {class='Point'}
  float3 "pos" {label="Position"}
  float3 "N" {label="Normal", default={0,1,0}}
endlist 'Points'

It looks like this:

screenshot

The DSL can be compiled to clean C++ data structure and inspector:

struct Hello {
  bool x = true; // ui=toggle, default=..., label=Enable Group Foo
  std::string name = "Foo\nBar\n!@#$%^&*()_+\"\""; // ui=text, label=Name, multiline=true, default=...
  int a; // min=1, max=1024
  float b = 1024; // default=..., ui=drag, speed=1
  float color1[4] = {1.0f, 0.0f, 0.0f, 1.0f}; // default={...}, hdr=true
  float color2[4] = {0.3f, 0.1f, 0.4f, 0.5f}; // default={...}, alpha=false, hsv=true, wheel=true
  int c;
  struct struct_X { // struct
    float a;
    float b;
    double c;
  };
  struct_X X; // label=X
  bool y; // ui=toggle
  float pos[2]; // disablewhen={Points}.empty()
  enum class Mode {
    a=4, // label=Apple
    b=8, // label=Banana
    c=16, // label=Coffe
  };
  Mode mode = Mode::b; // ui=menu, itemlabels={...}, default=..., items={...}, class=Mode, itemvalues={...}, label=Mode
  float color3[4] = {0.8f, 0.2f, 0.2f, 1.0f}; // disablewhen={mode}!={class:mode}::a, default={...}
  struct Point { // list
    float pos[3]; // label=Position
    float N[3] = {0.0f, 1.0f, 0.0f}; // default={...}, label=Normal
  };
  std::vector<Point> Points; // class=Point
};
bool ImGuiInspect(Hello &parms, std::unordered_set<std::string>& modified) {
  modified.clear();
  ImGui::TextUnformatted("A Little Test:");
  if(ImGui::Checkbox("Enable Group Foo##x", &(parms.x))) modified.insert("x");
  if(ImGui::InputTextMultiline("Name##name", &(parms.name)))
    modified.insert("name");
  ImGui::BeginDisabled(parms.x==false);
  if(ImGui::CollapsingHeader("Foo##foo", ImGuiTreeNodeFlags_DefaultOpen)) {
    ImGui::TextUnformatted("A Int Value:");
    ImGui::SameLine();
    if(ImGui::SliderInt("A##a", (&(parms.a)), 1, 1024))
      modified.insert("a");
    if(ImGui::DragFloat("B##b", (&(parms.b)), 1.000000f))
      modified.insert("b");
    if(ImGui::ColorEdit4("Color1##color1", (parms.color1), ImGuiColorEditFlags_AlphaBar | ImGuiColorEditFlags_AlphaPreview | ImGuiColorEditFlags_AlphaPreviewHalf | ImGuiColorEditFlags_HDR | ImGuiColorEditFlags_DisplayRGB | ImGuiColorEditFlags_Float))
      modified.insert("color1");
    if(ImGui::ColorEdit3("Color2##color2", (parms.color2), ImGuiColorEditFlags_NoAlpha | ImGuiColorEditFlags_DisplayHSV | ImGuiColorEditFlags_Uint8 | ImGuiColorEditFlags_PickerHueWheel))
      modified.insert("color2");
    if(ImGui::DragInt("C##c", (&(parms.c)), 1.000000f))
      modified.insert("c");
    if(ImGui::TreeNodeEx("X##X", ImGuiTreeNodeFlags_Framed)) {
      if(ImGui::DragFloat("A##a", (&(parms.X.a)), 1.000000f))
        modified.insert("X/a");
      if(ImGui::DragFloat("B##b", (&(parms.X.b)), 1.000000f))
        modified.insert("X/b");
      if(ImGui::InputDouble("C##c", &(parms.X.c)))
        modified.insert("X/c");
      ImGui::TreePop();
    }
  }
  ImGui::EndDisabled();
  ImGui::Spacing();
  ImGui::Spacing();
  ImGui::Separator();
  if(ImGui::Checkbox("Y##y", &(parms.y))) modified.insert("y");
  if(ImGui::CollapsingHeader("BarBarBar##bar", 0)) {
    ImGui::BeginDisabled(parms.Points.empty());
    if(ImGui::DragFloat2("Pos##pos", (parms.pos), 1.000000f))
      modified.insert("pos");
    ImGui::EndDisabled();
    static const char* mode_labels[]={"Apple", "Banana", "Coffe"};
    static const Hello::Mode mode_values[]={Hello::Mode::a, Hello::Mode::b, Hello::Mode::c};
    int current_item_mode = 0;
    for(; current_item_mode < 3; ++current_item_mode)
      if (mode_values[current_item_mode]==(parms.mode)) break;
    if (ImGui::Combo("Mode##mode", &current_item_mode, mode_labels, 3)) {
      parms.mode = mode_values[current_item_mode];
      modified.insert("mode");
    }
    ImGui::BeginDisabled(parms.mode!=Hello::Mode::a);
    if(ImGui::ColorEdit4("Color3##color3", (parms.color3), ImGuiColorEditFlags_AlphaBar | ImGuiColorEditFlags_AlphaPreview | ImGuiColorEditFlags_AlphaPreviewHalf | ImGuiColorEditFlags_DisplayRGB | ImGuiColorEditFlags_Uint8))
      modified.insert("color3");
    ImGui::EndDisabled();
  }
  int listPoints_cnt=static_cast<int>((parms.Points).size());
  if (ImGui::InputInt("# " "Points##Points", &listPoints_cnt)) {
    parms.Points.resize(listPoints_cnt);
    modified.insert("Points");
  }
  for(int listPoints_idx=0; listPoints_idx<listPoints_cnt; ++listPoints_idx) {
    std::string label_with_id_pos = "Position""["+std::to_string(listPoints_idx)+"]##pos";
    if(ImGui::DragFloat3(label_with_id_pos.c_str(), (parms.Points[listPoints_idx].pos), 1.000000f))
      modified.insert("Points/pos");
    std::string label_with_id_N = "Normal""["+std::to_string(listPoints_idx)+"]##N";
    if(ImGui::DragFloat3(label_with_id_N.c_str(), (parms.Points[listPoints_idx].N), 1.000000f))
      modified.insert("Points/N");
    if (listPoints_idx+1<listPoints_cnt) ImGui::Separator();
  }
  return !modified.empty();
}

It's also designed to be interpret-able, so that you can use it to build dynamic customizable UI, but that part is not done yet.

for more details: https://github.com/hugeproblem/parmscript

EDIT: It can be interpreted at run time now.

krupkat commented 2 years ago

I made a tool for stitching photos:

Main Xpano gui

Check out the demo on YouTube. For details see: https://github.com/krupkat/xpano

ImGui is such an amazing library, thanks for your work!

arash28134 commented 2 years ago

OPaint is a simple drawing app written in C++ using OpenGL, GLFW, GLEW, GLM, Dear ImGui and ImGuiFileDialog libraries for Linux. It focuses on providing a lightweight and simple UI for quickly taking notes and saving them as .PNG files

preview

berkayylmao commented 2 years ago

B.A.M. is a mod/live editor for older Need for Speed games. It uses Dear ImGui with a simple beautifier layer.


https://user-images.githubusercontent.com/46968988/185060837-f3c9e6fa-94f3-4b80-8cf4-3eda52985fd5.mp4

GloriousPtr commented 2 years ago

Screenshot 2022-08-28 171052

Arc Game Engine I've been working on this since Nov 2020. Here's the source if anyone wanna take a look at it.

m516 commented 2 years ago

Just spotted Imgui in the wild:

screenshot

This is the System Identification Tool from WPI, used to tune controls for First Robotics Competition robots.

moebiussurfing commented 2 years ago

Just spotted Imgui in the wild:

screenshot

Non-Image content-type returned

everaldojunior98 commented 2 years ago

INO3D is a 3D environment for circuits simulation. image

tksuoran commented 2 years ago

Early version of minimally functional ImGui rendertarget viewports with OpenXR hand tracking

https://user-images.githubusercontent.com/994606/188322711-8d18dfac-82cd-4cb0-9b50-38c17bf827f0.mp4

setimets commented 2 years ago

Hello friends. Our team who is making a game engine in Com2us uses and loves ImGui. It's really helpful to use ImGui to implement various tools as shown in gallery threads of the other engines. we are really appreciated ImGui. thanks!

unnamed unnamed

Nor-s commented 2 years ago

I made my own animation tool using imgui.

test7_move

It also mimics the motion capture of Deepmotion or Plask. (only mixamorig character)

test8_move

Demo Video:

Video Label

HPW-dev commented 2 years ago

Animation editor for shmup game (v0.1)))))

https://user-images.githubusercontent.com/93522936/190860546-9371df8e-eaad-46ef-919e-aa2600ff3090.mp4

ocornut commented 2 years ago

Curiously missed this: Syntacts by none other than Evan Pezen who is making the brilliant ImPlot https://www.syntacts.org/ syntacts_gui

Elliot_Tek posted this on twitter (shoot-em-up called Orbital20) https://twitter.com/Elliot_Tek/status/1571978229795135488 Orbital20

I also noticed that newly released Return To Monkey Island (https://store.steampowered.com/app/2060130/Return_to_Monkey_Island) used Dear ImGui (1.79) as its data/strings are in the exe.

And the elephant in the room is of course there was a GTA6 leak, which showed various uses of Dear ImGui. Not posting the screenshots both out of courtesy and because publisher are striking them down, but of course I was curious and browsed the video and found a few things, including things more interesting/advanced that in the most-shared footage (a rather polished event editor thing, material and textile editors, a camera work timeline editor etc.).

aloneguid commented 2 years ago

Browser Tamer (free browser selector for Windows) is using ImGui extensively for configuration and popups. one.

dextercd commented 2 years ago

image

Noita mod that extends the modding API, allowing other mods to use Dear ImGui to create interfaces. In this screenshot Component Explorer mod is making use of this extension.

thedemons commented 2 years ago

NVIDIA uses ImGui to develop their new RTX Remix, shown in their article image