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 4) #973

Open
ocornut opened this issue Jan 10, 2017 · 65 comments

Comments

Projects
None yet
@ocornut
Copy link
Owner

commented Jan 10, 2017

This is Part 4. I am splitting issues to reduce loading times and locked the old ones.
Screenshots Part 1 #123
Screenshots Part 2 #539
Screenshots Part 3 #772
Screenshots Part 4 #973
Screenshots Part 5 #1269
Screenshots Part 6 #1607
Screenshots Part 7 #1902
Screenshots Part 8 #2265
Screenshots Part 9 #2529
Also see: Software using dear imgui (you can help complete the list!)

You can post your screenshots here!

@mellinoe

This comment has been minimized.

Copy link

commented Jan 21, 2017

image

Nothing complicated or particularly fancy; just a functional editor UI for a game engine I'm building with .NET Core.

@ExtasyHosting

This comment has been minimized.

Copy link

commented Jan 23, 2017

Working on a client/launcher UI retro design.
7f290426ab79805b3b8c7f0e1cbdca10
d9eaf3f5d94059a93c70ef399c219343
08fe52211b577b2a990ec56787c25e19
3535be97b5d857eace0aadb4eaa85efb

@itamago

This comment has been minimized.

Copy link

commented Jan 25, 2017

@ExtasyHosting Very nice design. The mix between pixel and smooth fonts is great.
Would you mind sharing the ImGui style you are using ? I would like to implement the opposite one (white-on-black instead of black-on-one). Good job :)

@davidfooks

This comment has been minimized.

Copy link

commented Jan 30, 2017

ImGUI graph for plotting the time (x) vs position (y) of a player in Boundless as they walk through a portal. Everything left of the green line is the source world on the right is the destination world. You can see the server position and client position (which is predictive so a few frames ahead to reduce latency). The aim of the graph is to show that the transition is completely smooth.

image

This helped us visualize the problems with transitioning from one server to another seamlessly which were:

  • src and dst server update ticks are out of sync
  • latency between src and dst server can be different

Which we can now adjust for these (by moving the destination world position by the players velocity multiplied by the time they are out) and see that the transition is smooth.

@volcoma

This comment has been minimized.

Copy link

commented Jan 30, 2017

c++ Game engine and editor. https://github.com/volcoma/EtherealEngine
preview0

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Jan 31, 2017

Electric Eye testing tool made and used at NetFlix
electriceye

@David20321

This comment has been minimized.

Copy link

commented Feb 2, 2017

Here are some screenshots of how we're using dear imgui in Overgrowth:

overgrowth_dialogue
overgrowth_perf
overgrowth_spawner
overgrowth_scenegraph
overgrowth_settings

@Pagghiu

This comment has been minimized.

Copy link
Contributor

commented Feb 12, 2017

Simplified excel-like spreadsheet using imgui!
sheet

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Feb 12, 2017

Simplified excel-like spreadsheet using imgui!

This is very cool slash weird slash amazing slash worrying - but why? :)

@Pagghiu

This comment has been minimized.

Copy link
Contributor

commented Feb 13, 2017

Ahah, well first of all bridging unrelated technologies is one of my best ability ! :P

Seriously, on one of our software that powers a laser measurement device, we have the need for a way to "combine" multiple results from different measurements using some formulas only known at runtime.

The first obvious solution was integrating a scripting language but this still requires end users to do some sort of "programming", that scares most of our user base.

So I said "I just need a simple expression parser", I have tried to look for existing libraries in stb / imgui style and I have found tinyexpr on github.

When doing some tests with the library the indecent idea came into my mind "can I really be doing a kind of excel using this thing?".
Everyone knows excel, so everyone will be able to use our result combine module!

After two hours of hacking I got the first proof of concept, and then I simply added a few fancier features in the following days (dependency tracking, range variables etc ).

The imgui code is incredibly short ( for now). I am just using columns with buttons displaying the formatted output of the formula and when a cell is active, i draw an inputtext instead of the button.

I will send maybe a shot when this Frankenstein gets integrated in the main software ;)

@ratchetfreak

This comment has been minimized.

Copy link

commented Feb 13, 2017

one bit of extra functionality as expressions get longer, put the intputtext with the formula at the top (just like excel). Then if you press F2 you set focus on the input text.

@allender

This comment has been minimized.

Copy link

commented Feb 15, 2017

Using ImGUI for interface for apple ][ emulator. Used for windows for 6502 debugger. Still a work in progress ,but it's coming along:

https://github.com/allender/apple2emu

image

@itamago

This comment has been minimized.

Copy link

commented Feb 16, 2017

I'm dying to not being able to post pictures of the use of ImGui at work :(

@Admicos

This comment has been minimized.

Copy link

commented Feb 20, 2017

I'm porting a tool i made from C# WinForms to C++. The tool is pretty close to completion right now and I'm using ImGui because it's the easiest lightweight UI library i found.

image

@itszero

This comment has been minimized.

Copy link

commented Feb 21, 2017

i'm using imgui to build a home automation dashboard with raspberry pi. Using SDL to draw on fb makes this starts up very quickly (compare to Xorg). It also makes development very easy: the same code can run in Windowed mode on PC and native FB fullscreen mode on RPi.

homepi

@Alia5

This comment has been minimized.

Copy link

commented Feb 23, 2017

Currently building a 2D framework / GameEngine (as a little Sunday project) and am currently implementing some debug- / editor tools
2017-02-23_1433

Using a mixture of ImGui (obv.) and RTTR and have the little beasty on the right implemented (so far...) with just a few lines of code in next to no time!

@itamago

This comment has been minimized.

Copy link

commented Feb 26, 2017

@r-lyeh, last year you posted an UI mockup for an asset library/manager, and I was wondering which font you were using for text ?
Link here : link
Thanks !

@r-lyeh-archived

This comment has been minimized.

Copy link

commented Feb 26, 2017

@itamago, very likely DejaVuSans/16.f (or DroidSans/18.f :)

@colesnicov

This comment has been minimized.

Copy link

commented Feb 26, 2017

@ExtasyHosting How did you do such a nice a title in windows?

@yushroom

This comment has been minimized.

Copy link

commented Feb 27, 2017

my unity-like game engine editor
https://github.com/yushroom/FishEngine

@Bhagawan69

This comment has been minimized.

Copy link

commented Feb 28, 2017

My Guild Wars 2 overlay (named BGDM) with DPS meter, compass and more.
Notable are the implementation of column sorting, a hackable plain-text-version-compass and using the slider control as an on/off button.

bgdm_screenshot_2017-02-28 13 26 19

@Flix01

This comment has been minimized.

Copy link

commented Mar 1, 2017

I've made a (very basic) image editor for Dear ImGui, with no dependencies (based on stb_image.h, stb_image_write.h, stb_image_resize.h and some other optional plugins to load/save other image formats).

imguiimageeditor

@colesnicov

This comment has been minimized.

Copy link

commented Mar 6, 2017

I created a component for file selection, folder selection and save the file:

Imgur

@codz01

This comment has been minimized.

Copy link

commented Mar 6, 2017

very nice , better than native os dialog system :)

@colesnicov

This comment has been minimized.

Copy link

commented Mar 6, 2017

@codz01
Yeah, it looks pretty. But it has a few details:

  • Only linux (I use my own implementation for working with file systems)
  • Can not yet make a new folder (It is easy to implement)
  • You can not show hidden files (da easy to implement)
  • The code is still a bit "dirty"
@hb3p8

This comment has been minimized.

Copy link

commented Mar 10, 2017

In case you were wondering how does Dear ImGui based app feels like, you have one more example!
We have just released the CADRays application: https://www.opencascade.com/content/cadrays

cz0kddrxcaaejmm jpg large

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Apr 16, 2017

Cool. Here's the one I am using (I didn't write it, someone at Pastagames did):

capture

PS: In your OpenGL Info window You can use SmallButton() at the end of text lines.

@ThisDrunkDane

This comment has been minimized.

Copy link

commented Apr 16, 2017

Ahh nice! I have another system that's seperate from OpenGL that takes care of all the extra info you have there. It also handles shaders, and will soon handle opengl programs (parsing meta information and generate the program), sound and more. Basically all assets. I want to use the filter thing too but waiting for cimgui to update with it.
catalog-scr

@johanwendin

This comment has been minimized.

Copy link

commented Apr 18, 2017

Small clip (at 5fps due to GIF constraints) of my sprite editor.
pixli_opt

And a full-size screenshot with some onion skins visible too:
pixli_editor

@Kaldaien

This comment has been minimized.

Copy link

commented Apr 19, 2017

Special K Modding System (NieR: Automata plug-in)
20170419024613_1

I do a lot of graphics engine mods for games, usually requiring the end-user to make edits to complicated INI files. Having an in-game UI to configure this stuff is a lifesaver and my users love it 😄

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Apr 26, 2017

Few pictures from Graceful Explosion Machine (now available on Switch https://www.youtube.com/watch?v=Zu9QyThTpXo)

With quote from Mobeen:

The “graceful editor machine” is actually less of an editor and more of a viewer app. The levels are designed and decorated in Tiled, and we use this tool to view them in-game and ensure that everything was setup correctly.
00 - This is the first tutorial level loaded. Under “File”, the file select dropdown is automatically populated from the in-game level database.
01 - Another level
02 - In the game, the level geometry can morph between phases. In Tiled we draw these level sections into separate layers. In the viewer, under “Layers”, we can quickly toggle between layers or show the animated transition.
03 - Finally, the “Preview Layer” shows the collision mask. Since we draw the geometry independently from the “decoration” (the tile art) we wanted a quick way to confirm that they line up correctly!
On the whole this is actually a pretty basic use of imgui, but I almost think that’s the best way to show it off. Of course, imgui can make these elaborate and powerful GUIs, but I think its real strength is its ability to make quick/simple GUIs effortlessly to solve small but important problems in your workflow.

imgui_00_first_level
imgui_01_another_level
imgui_02_change_layer
imgui_03_collision_layer

@seece

This comment has been minimized.

Copy link

commented Apr 29, 2017

We used dear imgui in our 64 KB intro to edit parameters on the fly:

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented May 6, 2017

@bryanmcconkey

This comment has been minimized.

Copy link

commented May 12, 2017

Some screens of imgui use in development of Below (http://www.whatliesbelow.com/)

Object state editing and lua table viewing/editing
campfire

Foliage Editing / Debugging / Performance Tracking
foliage

Simple Debug Map For Generated World
map

In Game CPU Profiler
profiler

Level Editing / Object Placement
Also using: https://github.com/CedricGuillemet/ImGuizmo
spawning

Wind Configuration
wind

We used it for countless other things, but that is probably enough screens for now :)
Thanks for the great library!

@jose-villegas

This comment has been minimized.

Copy link

commented May 16, 2017

Some old college project I redid recently just for fun and because I want to get some nice things in my portfolio, it's based around this paper https://www.cg.tuwien.ac.at/research/publications/2007/bruckner-2007-STF/

The style transfer function UI (this is 1D though) done with dear imgui.

alt tag
alt tag

I have more stuff using imgui on my profile.

@JSandusky

This comment has been minimized.

Copy link

commented May 18, 2017

I've been a nutter and nearly wrapped up a QT QPainter (vanilla, not GL) backend. Caused some minor mauling to ImDrawCmd, List, and ImFont - so that I could render with QPainter's routines for cleaner renders (drawing through triangles was aliased something fierce).

Dear ImGUI in QT

HDPI comes along for free (sort-of) with living in QT and embedding QWidgets into it is cake (minus the caching and state psychosis involved). Goodbye giant ball of signal-slots-worms.

Just need to deal with those pesky tooltips/popups and cursors.

@citruslee

This comment has been minimized.

Copy link

commented May 23, 2017

not sure if you @ocornut know about this, or if it was featured here, but the development team of Deus Ex: Mankind divided (Eidos) used ImGui too!

https://eidosmontreal.com/en/news/deferred-next-gen-culling-and-rendering-for-dawn-engine

@Pagghiu

This comment has been minimized.

Copy link
Contributor

commented May 24, 2017

Our remote-imgui interface running on an embedded sensor and shown on two of our "imgui-browser" remoting viewers, one running on a windows Panel PC (the big screen on top) and the second running on a Robot Teach pendant in lower right (linux with realtime kernel OS), all in sync of course.
I am sorry for the reflections on the screen, I will have some better photos anytime soon ;)

The software here is our robotic guidance product used to find the maze location in 6DOF and guide a pin through it with 0.1mm of error.
I have tried doing my best to compress the Gif file...

imgui at sps
imgui at sps2
imgui at sps3

@ocornut ocornut changed the title Post your screenshots / code here (PART 4) Gallery: Post your screenshots / code here (PART 4) Jun 2, 2017

@notlion

This comment has been minimized.

Copy link

commented Jun 13, 2017

Our debug/layout interface for Seaquence is pretty simple compared to the tools many of you are developing, but here's a screenshot:

screen shot 2017-06-13 at 4 24 52 pm

@nem0

This comment has been minimized.

Copy link
Contributor

commented Jun 15, 2017

Google Maps
maps

@JSandusky

This comment has been minimized.

Copy link

commented Jun 16, 2017

ImGui (via QPainter, software - not GL) inside of QT actually being used (right-most "Properties" window). Certainly lightened the inertia and tedium of UI heavy programming in QT's mess.

img

Popup in action extending outside of "airspace" of the IMGUI window:

img

Even ImGui popups mostly work. Was a fun project even though it has been canned for switching over to WPF.

@arnaud-jamin

This comment has been minimized.

Copy link

commented Jul 4, 2017

Hello Omar, it's been a while!
Enjoyed your games, and enjoy imgui even more :)

Well another profiler I guess:
imguiprofiler

Cheers!

@paulsapps

This comment has been minimized.

Copy link

commented Jul 6, 2017

2017-07-06

Debug helper/browser bits of my engine. All of the rendering is done using ImGui's ImDrawList - the subtitles use FontStash.

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Jul 17, 2017

@nem0

This comment has been minimized.

Copy link
Contributor

commented Jul 26, 2017

html + css rendering in imgui
image

@Pagghiu

This comment has been minimized.

Copy link
Contributor

commented Jul 26, 2017

@nem0 can this thing also show some pictures? This is beautiful

@nem0

This comment has been minimized.

Copy link
Contributor

commented Jul 26, 2017

@Pagghiu yes, the "Y" in the top left corner of the wepage is actually an image

@Pagghiu

This comment has been minimized.

Copy link
Contributor

commented Jul 26, 2017

@nem0 you are a wizard 👍
I assume that your work in progress on this item is at https://github.com/nem0/lumixengine_html
Very nice!

@nem0

This comment has been minimized.

Copy link
Contributor

commented Jul 26, 2017

@Pagghiu credit should go mostly to https://github.com/litehtml/litehtml, it handles the hard part.

@BalazsJako

This comment has been minimized.

Copy link

commented Aug 4, 2017

Started working on a simple colorizing text editor. While it is still in a very early stage, some functions are working now. Uses vanilla ImGui and STL.

texteditor6
texteditor

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Aug 6, 2017

@BalazsJako

Started working on a simple colorizing text editor

Very nice! Hope this can become a standalone widget/extension :)

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Aug 6, 2017

This is Part 4. I am splitting issues to reduce loading times and locked the old ones.

Screenshots Part 1 #123
Screenshots Part 2 #539
Screenshots Part 3 #772
Screenshots Part 4 #973
Screenshots Part 5 #1269
Screenshots Part 6 #1607
Screenshots Part 7 #1902
Screenshots Part 8 #2265
Screenshots Part 9 #2529
Also see: Software using dear imgui (you can help complete the list!)

Repository owner locked and limited conversation to collaborators Aug 6, 2017

@ocornut ocornut added the gallery label Aug 6, 2017

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.