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 11) #3075

Open
ocornut opened this issue Mar 24, 2020 · 66 comments
Open

Gallery: Post your screenshots / code here (PART 11) #3075

ocornut opened this issue Mar 24, 2020 · 66 comments
Labels

Comments

@ocornut
Copy link
Owner

ocornut commented Mar 24, 2020

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

@aduermael
Copy link

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.

Screen Shot 2020-03-26 at 9 43 06 AM

Screen Shot 2020-03-26 at 9 42 19 AM

Screen Shot 2020-03-26 at 9 42 42 AM

Screen Shot 2020-03-26 at 9 43 31 AM

Screen Shot 2020-03-26 at 9 44 27 AM

@parbo
Copy link

parbo commented Mar 26, 2020

image
spim-tour

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:

image (5)

@Ristovski
Copy link

@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)

@gallickgunner
Copy link

gallickgunner commented Mar 28, 2020

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

@mkalte666
Copy link

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:

2020-03-29_16-52
2020-03-29_16-55

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

@ocornut
Copy link
Owner Author

ocornut commented Mar 29, 2020

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
1

Misc. Controls
2

Set Labels and Show/Hide Elements
3

Real Time Plotting
4

Adapts to Current Theme
6

Thousands of Points!
5

In Practice
Screenshot 2020-03-21 21 44 55

7

8

@ocornut
Copy link
Owner Author

ocornut commented Mar 31, 2020

NVIDIA Texture Tools Exporter uses Dear ImGui:
https://developer.nvidia.com/nvidia-texture-tools-exporter

nvdds-picture-crop

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)

@floooh
Copy link
Contributor

floooh commented Mar 31, 2020

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

f14-dearimgui

@sonoro1234
Copy link

Little script in https://github.com/sonoro1234/anima for making 3D models from photos.

casaGIF

@aiekick
Copy link
Contributor

aiekick commented Apr 6, 2020

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 :

ImGuiFontStudio_Msvc_Win32_UnKOShXcuw
ImGuiFontStudio_Msvc_Win32_hmihsJPgvk
ImGuiFontStudio_Msvc_Win32_D6h1sAEByc

@CallumDev
Copy link

Model Viewer/Hardpointer for Librelancer, 2 years later from thread 6.

Screenshot_20200408_035753

@ocornut
Copy link
Owner Author

ocornut commented Apr 9, 2020

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

Inside FINAL FANTASY VII REMAKE – Episode 4 Music and Sound Effects (Closed Captions) 1 mp4_snapshot_11 18_ 2020 04 09_12 07 38

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.

@ocornut
Copy link
Owner Author

ocornut commented Apr 10, 2020

From upcoming game "Teardown" via one of their twitch
http://teardowngame.com/
teardown

@ocornut
Copy link
Owner Author

ocornut commented Apr 10, 2020

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:
79002651-30d42b80-7b51-11ea-92cc-362b5cd58fc0

Misc shots of Tracy Profiler:

profiler

profiler2

@jurgen-kluft
Copy link

jurgen-kluft commented Apr 11, 2020

RemedyBG (C++ Debugger for Windows) also uses dear imgui (https://remedybg.handmade.network/)
p-remedybg-tt01

@elvissteinjr
Copy link

elvissteinjr commented Apr 14, 2020

Desktop+, a desktop mirroring overlay application for SteamVR, is using Dear ImGui for its user interface.

screenshot

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

@ocornut
Copy link
Owner Author

ocornut commented Apr 14, 2020

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 "

vx2-01

vx2-02

vx2-03

vx2-04

@wolfpld
Copy link
Contributor

wolfpld commented Apr 15, 2020

More Path of Exile.

obraz

https://www.youtube.com/watch?v=itZB1hriaSk
https://www.youtube.com/watch?v=whyJzrVEgVc

@JMS55
Copy link

JMS55 commented Aug 13, 2020

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.

image

@ocornut
Copy link
Owner Author

ocornut commented Aug 18, 2020

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

receiver2 - 02
receiver2 - 03

Bizzarrus: "Some data track widgets I made a while ago for my company's internal tool"

unknown

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"

sdr2

Niad: "Using the tables branch for this server select menu, tables seem nice"

server_select

Veronica Park: "This not my current project, but it is an "inventory simulator" I guess..."

4e91724b0cc0c20a414759d3e1134b17-png

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

HostApp_b8iGS6qdZS

IronicallySerious: "Using ImGui in our own engine editor that we are making in college and hope to release our game with it soon!"
editor

@enci
Copy link

enci commented Aug 26, 2020

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
h9FXSl

RTX real-time ray tracer by Viktor Zoutman
Demo_8nBDxUM0Qn

@ocornut
Copy link
Owner Author

ocornut commented Aug 26, 2020

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

DGOJ1M1MTPAP1598308582505

@Postrediori
Copy link

Microsoft Flight Simulator 2020 shows Dear ImGui in developer mode (screens from a video by LGR )
vlcsnap-2020-08-30-16h07m40s460
vlcsnap-2020-08-30-16h07m50s142

@dfranx
Copy link

dfranx commented Sep 2, 2020

SHADERed (a shader IDE) running in the browser:
image

THEMEed is a tool for writing themes with live preview:
image2

@epezent
Copy link

epezent commented Sep 10, 2020

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!

date

date-plot

@Vitorbnc
Copy link

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.

inicial_vver

It also uses the Plot widgets to show real time charts:
grafico_pressao_pressurizador

@crash5band
Copy link

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.

boost_2

3

@aiekick
Copy link
Contributor

aiekick commented Sep 14, 2020

Vulkan rewrite of NoodlesPlate with ImGui Docking branch and ImGuiColorTextEdit widget
vkNoodlesPlate_Msvc_Win32_0TRkeM6rhb

@OverShifted
Copy link

My game engine's little WIP editor OverEngine
OverEditorScreenShot

@ongamex
Copy link

ongamex commented Sep 22, 2020

The welcome screen in my level editor
image

@ongamex
Copy link

ongamex commented Sep 22, 2020

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.

boost_2

3

Looks amazing!

How did you manage to layout your Properties window, with names on the left and values on the right?

@ocornut
Copy link
Owner Author

ocornut commented Sep 23, 2020

Moved to: Screenshots Part 12 #3488

@stefanos82
Copy link

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)

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?

@janekb04
Copy link

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.

boost_2

3

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.

pthom added a commit to pthom/imgui that referenced this issue Oct 19, 2021
This commit provides the ability to pinpoint the exact location of
the code of all the demos in imgui_demo.cpp: when the "Code Lookup"
checkbox is ticked, the code location (file and line number)
of any demo currently hovered by the mouse will be shown in a tooltip.

Furthermore a basic code viewer is provided (which reads the code from
the imgui_demo.cpp file); as well as a "View on github" button.

Implementation notes:
- This feature is provided by the "DEMO_MARKER" macro.
  See example usage below
- Most of the code for this feature is grouped inside
  the namespace `DemoMarkerTools`.

Origin:
These modifications are the basis for a more complete interactive
imgui manual (https://pthom.github.io/imgui_manual_online/manual/imgui_manual.html).

This manual was first presented in the "Gallery/screenshots (part 11)"
discussion (ocornut#3075)

// Example usage of the DEMO_MARKER macro (with hierarchical demos):

     DEMO_MARKER("Widgets");                      // For clarity, calls to the DEMO_MARKER macro
     DEMO_MARKER("Widgets/Basic");                // should try to be hierarchical (via the use of "/" separators)
     ...

     DEMO_MARKER("Widgets/Basic/Checkbox");       // Here the call to DEMO_MARKER will start a new rectangular bounding
     static bool check = true;                    // around the next widget(s). Whenever the user clicks the "Help/Code Lookup"
     ImGui::Checkbox("checkbox", &check);         // button and then click this bounding, he will be shown the source code location,
                                                  // of this DEMO_MARKER call.

     DEMO_MARKER("Widgets/Basic/RadioButton");    // End of the previous bounding, start of a new one
     static int e = 0;
     ImGui::RadioButton("radio a", &e, 0); ImGui::SameLine();

----
pthom added a commit to pthom/imgui that referenced this issue Oct 19, 2021
This commit provides the ability to pinpoint the exact location of
the code of all the demos in imgui_demo.cpp: when the "Code Lookup"
checkbox is ticked, the code location (file and line number)
of any demo currently hovered by the mouse will be shown in a tooltip.

Furthermore a basic code viewer is provided (which reads the code from
the imgui_demo.cpp file); as well as a "View on github" button.

Implementation notes:
- This feature is provided by the "DEMO_MARKER" macro.
  See example usage below
- Most of the code for this feature is grouped inside
  the namespace `DemoMarkerTools`.

Origin:
These modifications are the basis for a more complete interactive
imgui manual (https://pthom.github.io/imgui_manual_online/manual/imgui_manual.html).

This manual was first presented in the "Gallery/screenshots (part 11)"
discussion (ocornut#3075)

// Example usage of the DEMO_MARKER macro (with hierarchical demos):

     DEMO_MARKER("Widgets");                      // For clarity, calls to the DEMO_MARKER macro
     DEMO_MARKER("Widgets/Basic");                // should try to be hierarchical (via the use of "/" separators)
     ...

     DEMO_MARKER("Widgets/Basic/Checkbox");       // Here the call to DEMO_MARKER will start a new rectangular bounding
     static bool check = true;                    // around the next widget(s). Whenever the user clicks the "Help/Code Lookup"
     ImGui::Checkbox("checkbox", &check);         // button and then click this bounding, he will be shown the source code location,
                                                  // of this DEMO_MARKER call.

     DEMO_MARKER("Widgets/Basic/RadioButton");    // End of the previous bounding, start of a new one
     static int e = 0;
     ImGui::RadioButton("radio a", &e, 0); ImGui::SameLine();

----
pthom added a commit to pthom/imgui that referenced this issue Oct 20, 2021
This commit provides the ability to pinpoint the exact location of
the code of all the demos in imgui_demo.cpp: when the "Code Lookup"
checkbox is ticked, the code location (file and line number)
of any demo currently hovered by the mouse will be shown in a tooltip.

Furthermore a basic code viewer is provided (which reads the code from
the imgui_demo.cpp file); as well as a "View on github" button.

Implementation notes:
- This feature is provided by the "DEMO_MARKER" macro.
  See example usage below
- Most of the code for this feature is grouped inside
  the namespace `DemoMarkerTools`.

Origin:
These modifications are the basis for a more complete interactive
imgui manual (https://pthom.github.io/imgui_manual_online/manual/imgui_manual.html).

This manual was first presented in the "Gallery/screenshots (part 11)"
discussion (ocornut#3075)

// Example usage of the DEMO_MARKER macro (with hierarchical demos):

     DEMO_MARKER("Widgets");                      // For clarity, calls to the DEMO_MARKER macro
     DEMO_MARKER("Widgets/Basic");                // should try to be hierarchical (via the use of "/" separators)
     ...

     DEMO_MARKER("Widgets/Basic/Checkbox");       // Here the call to DEMO_MARKER will start a new rectangular bounding
     static bool check = true;                    // around the next widget(s). Whenever the user clicks the "Help/Code Lookup"
     ImGui::Checkbox("checkbox", &check);         // button and then click this bounding, he will be shown the source code location,
                                                  // of this DEMO_MARKER call.

     DEMO_MARKER("Widgets/Basic/RadioButton");    // End of the previous bounding, start of a new one
     static int e = 0;
     ImGui::RadioButton("radio a", &e, 0); ImGui::SameLine();

----

# Conflicts:
#	imgui_demo.cpp
pthom added a commit to pthom/imgui that referenced this issue Oct 20, 2021
This commit provides the ability to pinpoint the exact location of
the code of all the demos in imgui_demo.cpp: when the "Code Lookup"
checkbox is ticked, the code location (file and line number)
of any demo currently hovered by the mouse will be shown in a tooltip.

Furthermore a basic code viewer is provided (which reads the code from
the imgui_demo.cpp file); as well as a "View on github" button.

Implementation notes:
- This feature is provided by the "DEMO_MARKER" macro.
  See example usage below
- Most of the code for this feature is grouped inside
  the namespace `DemoMarkerTools`.

Origin:
These modifications are the basis for a more complete interactive
imgui manual (https://pthom.github.io/imgui_manual_online/manual/imgui_manual.html).

This manual was first presented in the "Gallery/screenshots (part 11)"
discussion (ocornut#3075)

// Example usage of the DEMO_MARKER macro (with hierarchical demos):

     DEMO_MARKER("Widgets");                      // For clarity, calls to the DEMO_MARKER macro
     DEMO_MARKER("Widgets/Basic");                // should try to be hierarchical (via the use of "/" separators)
     ...

     DEMO_MARKER("Widgets/Basic/Checkbox");       // Here the call to DEMO_MARKER will start a new rectangular bounding
     static bool check = true;                    // around the next widget(s). Whenever the user clicks the "Help/Code Lookup"
     ImGui::Checkbox("checkbox", &check);         // button and then click this bounding, he will be shown the source code location,
                                                  // of this DEMO_MARKER call.

     DEMO_MARKER("Widgets/Basic/RadioButton");    // End of the previous bounding, start of a new one
     static int e = 0;
     ImGui::RadioButton("radio a", &e, 0); ImGui::SameLine();

----
pthom added a commit to pthom/imgui that referenced this issue Oct 20, 2021
This commit provides the ability to pinpoint the exact location of
the code of all the demos in imgui_demo.cpp: when the "Code Lookup"
checkbox is ticked, the code location (file and line number)
of any demo currently hovered by the mouse will be shown in a tooltip.

Furthermore a basic code viewer is provided (which reads the code from
the imgui_demo.cpp file); as well as a "View on github" button.

Implementation notes:
- This feature is provided by the "DEMO_MARKER" macro.
  See example usage below
- Most of the code for this feature is grouped inside
  the namespace `DemoMarkerTools`.

Origin:
These modifications are the basis for a more complete interactive
imgui manual (https://pthom.github.io/imgui_manual_online/manual/imgui_manual.html).

This manual was first presented in the "Gallery/screenshots (part 11)"
discussion (ocornut#3075)

// Example usage of the DEMO_MARKER macro (with hierarchical demos):

     DEMO_MARKER("Widgets");                      // For clarity, calls to the DEMO_MARKER macro
     DEMO_MARKER("Widgets/Basic");                // should try to be hierarchical (via the use of "/" separators)
     ...

     DEMO_MARKER("Widgets/Basic/Checkbox");       // Here the call to DEMO_MARKER will start a new rectangular bounding
     static bool check = true;                    // around the next widget(s). Whenever the user clicks the "Help/Code Lookup"
     ImGui::Checkbox("checkbox", &check);         // button and then click this bounding, he will be shown the source code location,
                                                  // of this DEMO_MARKER call.

     DEMO_MARKER("Widgets/Basic/RadioButton");    // End of the previous bounding, start of a new one
     static int e = 0;
     ImGui::RadioButton("radio a", &e, 0); ImGui::SameLine();

----
pthom added a commit to pthom/imgui that referenced this issue Oct 20, 2021
This commit provides the ability to pinpoint the exact location of
the code of all the demos in imgui_demo.cpp: when the "Code Lookup"
checkbox is ticked, the code location (file and line number)
of any demo currently hovered by the mouse will be shown in a tooltip.

Furthermore a basic code viewer is provided (which reads the code from
the imgui_demo.cpp file); as well as a "View on github" button.

Implementation notes:
- This feature is provided by the "DEMO_MARKER" macro.
  See example usage below
- Most of the code for this feature is grouped inside
  the namespace `DemoMarkerTools`.

Origin:
These modifications are the basis for a more complete interactive
imgui manual (https://pthom.github.io/imgui_manual_online/manual/imgui_manual.html).

This manual was first presented in the "Gallery/screenshots (part 11)"
discussion (ocornut#3075)

// Example usage of the DEMO_MARKER macro (with hierarchical demos):

     DEMO_MARKER("Widgets");                      // For clarity, calls to the DEMO_MARKER macro
     DEMO_MARKER("Widgets/Basic");                // should try to be hierarchical (via the use of "/" separators)
     ...

     DEMO_MARKER("Widgets/Basic/Checkbox");       // Here the call to DEMO_MARKER will start a new rectangular bounding
     static bool check = true;                    // around the next widget(s). Whenever the user clicks the "Help/Code Lookup"
     ImGui::Checkbox("checkbox", &check);         // button and then click this bounding, he will be shown the source code location,
                                                  // of this DEMO_MARKER call.

     DEMO_MARKER("Widgets/Basic/RadioButton");    // End of the previous bounding, start of a new one
     static int e = 0;
     ImGui::RadioButton("radio a", &e, 0); ImGui::SameLine();

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