ocornut/imgui

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

ocornut opened this issue ยท 73 comments

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

Thanks for a second part, that was to much for my browser to handle.

This might be a bit underwhelming, but I used ImGui to make a transparent overlay for my Julia Fractal Renderer on Android.
screenshot_2016-02-28-14-45-45

[Here's the application itself](https://play.google.
com/store/apps/details?id=org.innerproduct.lgl_sceneviewer)

The OpenGL code is borrowed from the OpenGL SuperBible's Julia fractal example. I think I may add some buttons as well.

I use dear imgui in a video mapping software, Splash.

screenshot from 2016-03-05 10 18 09

As I'm not much of a GUI person, the usage is pretty basic. Although when I see some examples in this thread I wish I had more time to put in it!

Mini example in wiki of a helper to store values so you can plot them over time in 1 line.
https://github.com/ocornut/imgui/wiki/plot_var_example

ImGui::PlotVar("Speed", current_speed);
capture

Some pictures from Tearaway that I grabbed a while ago (late 2014)
This is early in the PS4 port. Got the authorisation to release them.

tearaway-001

tearaway-002

tearaway-003

tearaway-004

tearaway-005

tearaway-006

Hi!

We are building a realtime 360 video stitcher for VR and using dear imgui for our gui :D

oden

@JoNil Nice. Would you mind posting your colors in #184 for reference? Are you handling clipping of the left-aligned labels? I have a local stash to allow switch from widget-label to label-widget but the earlier has so many benefits for layout. (Laying out multiple widget on a same line, etc.)

Some more stuff from another game.

Showing some gauges, Render Targets, Profiler (seen before)
20160308-0025-crop

Memory Usage, Loaded resources, Assert configuration
20160308-0026-crop

A material editor
imgui_eg2

Particle stuff (seen before)
imgui_eg1

Quad-tree
imgui_eg0

cacu
this is our tool, a vfx editor.still working in progress.
thanks for your job @ocornut

image

I'm creating some sort of primitive infopanel/track timeline in ImGui. If anybody wants the code, here it is: http://pastebin.com/N1E5XR20

nem0 commented

Updated my profiler
profiler

@citruslee it might be useful for me, thank you

@brucelane please do, but I think you need to alter it a bit. I might upload a more recent fixed version of it :)

We've integrated @nem0's docking implementation. Makes life easier, thanks @nem0!

lumote-2016_03_22-11_27_35

nem0 commented

@kylawl I am glad it's useful. Is your screenshot from some open source project?

@nem0 We're using ImGui and the docking for our game Lumote so It's unlikely the source for the game will be made open. We would like to open source some of the underlying tech but right now our focus is the game.

@kylawl this looks seriously cool

I am the editor programmer for Chrono-Drive, a student game at DigiPen that uses a custom engine. We use ImGui + ImWindow for our editor.
editor

video link here. https://youtu.be/gFbh4wxZ6DE?t=2m3s
www.chrono-drive.com

nem0 commented

@jnboard007 nice, are you using some library for rendering or is it build from scratch too?

@nem0 we are using DirectX11 for rendering. Everything is from scratch except ImGui + ImWindow for the editor, CEGUI for in-game menu rendering and logic, luabridge lua bindings, and Havok Physics for rigidbody simulation.

@ocornut https://youtu.be/cHJGQf-6XCE

i did that kept for the algorithms on dsp.

It was written to use glut but i changed it to use SDL2 and your imgui

vd3d commented

We have used ImGui to write our GPU Rendering & animation environment.

screenshot - interior design

https://www.youtube.com/watch?v=211NzYhNSFQ

While this doesn't look like much I was feeling pretty accomplished and wanted to drop this here. I'm in the process of porting ImGUI to .NET and finally have something rendering to the screen. Currently using MonoGame as the rendering front end.

image

Fixed most the rendering issues, I'm still fighting with the look of fonts since I'm using FreeType2 instead of STB, I had to make some considerable changes there, everything else is pretty much a 1 to 1 port tho as of now. I may create a new issue if you don't mind to show the progress and then when its ready put a link to the GitHub repo.

image

@vd3d krys: looking very nice!
On the bottom right the labels are displayed a little too high compared to the widgets on the right. There's a weirdly named function AlignFirstTextHeightToWidgets() you can use to fix that.
Good luck with the kickstarter!

@xposure out of curiosity, why aren't you calling the c++ code from c# instead of "porting" it? confused by the idea of using freetype or porting any code tbh.

@xposure, FYI, a dual freetype2/stb effort w/ SDF can be located here https://github.com/tangrams/fontstash-es

@ocornut my own personal reason is to tear apart this code and see how the inner workings of a ImGui work, but there are a lot of people that wouldn't even take a 2nd look at c++/imgui because they can't easily change it. I'd probably just use ImGui bindings if it had everything I was looking for, but there are a lot of things I want to add myself in a language I enjoy programming in.

As for free type, I couldn't find a suitable stb true type binding for .net and already had experience using free type.

@r-lyeh I'll check it out, thanks.

Here is a little input-mapping proof of concept. Imgui made it so easy and fast to mock up.

imgui-test

And a little fun with progress bars showing input scaling
imgui-test-2

My KC85 emulator (1980's East German home computer), Dear Imgui is used for the overlay debugger UI, all windows update in realtime, which is pretty impressive to watch :) Live demo of the emscripten compiled version is here: http://floooh.github.io/virtualkc/

screen shot 2016-04-01 at 19 12 56

Nice - good to see Z80 code after all these years :)

On Fri, 1 Apr 2016 at 13:17 Andre Weissflog notifications@github.com
wrote:

My KC85 emulator (1980's East German home computer), Dear Imgui is used
for the overlay debugger UI, all windows update in realtime, which is
pretty impressive to watch :) Live demo of the emscripten compiled version
is here: http://floooh.github.io/virtualkc/

[image: screen shot 2016-04-01 at 19 12 56]
https://cloud.githubusercontent.com/assets/1699414/14214569/09295672-f83e-11e5-9134-81cf742ce99e.png

โ€”
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub
#539 (comment)

@enemymouse could I get your color theme please? :)

I'm using dear imgui in Avoyd for both the editor, and for game UI.

2016-3-9_16-51-48_avoyd_0

WIP of MAME internal debugger by @mahlemiut

imgui_test_8

@mmicko @mahlemiut very cool, would be an nice to be useful to MAME. I actually used the debugger a few weeks ago (helped a friend adding a few new dumps and minor emulation fixes they will submit) and felt the UI was a little awkward to use. One good thing with ImGui is that it is really approachable, so more team members are likely to keep improving the debugger as time goes by. You may want a shortcut to scale down game render size or scale down native window size to leave more room to the windows. If you have any question don't hesitate to post to issues.

@dougbinks really beautiful, mind sharing the style ?

@JuJuBoSc Thanks! Sure, I've put the utility header I use on this gist.

I've removed a few includes to do with Runtime Compiled C++, but hopefully this should still compile fine. Note that this uses the C++11 version of @juliettef's IconFontCppHeader but there are plain C versions available.

I'm hoping that over the summer I may get time to look at some further additional helpers for styling and create a repo for utility functions. For example the log uses an auto scroll approach which also allows user scrolling (i.e. it 'sticks' to the end when new content is added, but can still be manually scrolled).

For example the log uses an auto scroll approach which also allows user scrolling (i.e. it 'sticks' to the end when new content is added, but can still be manually scrolled).

The ExampleAppConsole and ExampleAppLog in imgui_demo.cpp are doing this as well? Though it could possibly be improved.

About your menus: in my app I've been experimenting with helper to stick widgets within the space normally used by the shortcuts.

sliders in menus

It's a bit hacky as most of this code isn't documented (imgui_internal.h stuff) and bound to break, but I may make it an available or default layout when I'm done with #395 (for which I have an unfinished stash).

I didn't realise the demo examples did this, excellent!

I forgot to mention I use the Roboto Regular font at size 18 with Font Awesome icons at size 12.

vsm
Im using ImGui in my study project, thanks for your great work.

I'm using ImGui to develop a libretro front-end targetted for people wanting to contribute achievements to retro games via RetroAchievements.

I'm writing some widgets as I go and making them available for others my ImGuiAl repository. There's only a logger widget for now.

Now for the mandatory screenshot :)

ccfinder

nem0 commented

Toolbar editor done in 5 minutes - possible only with imgui ๐Ÿ‘
toolbar_editor

Is there a place where i can find different ImGui color styles (ready for copy-paste)?

Not yet, they are scattered in those issue threads. If you grep for one of the enum value you'll find some.

I intend to start including themes with 1.50 soon so you may also wait for that.

Direct3D8 Example

ImGui working in Direct3D8 (for an old project of mine).
(Thanks to a friend of mine for helping with the clipping in d3d8.)

Low framerate due to being on my laptop.

@atom0s do you have some tutorials on directx 8 and below? I'd like to try programming in that :)

@citruslee It's exactly the same as D3D9 but without the Programming pipeline stuff. D3D8 header could be found in D3D SDK Jun 2010..

However this is the place of disscussion like that...

@citruslee Direct3D8 is very similar with Direct3D9 with some features missing. The main one that makes this a little rough being clipping / scissor rects. That has to be manually done via the projection matrix and view port.

The last SDK to include the Direct3D8 content was June 2010. The original Direct3D8 SDK file names are: dx80_sdk.exe DX81SDK_FULL.exe if you are looking for those via Google. (These have all the examples that are done in Direct3D8 etc.)

voxel_editor

working on a voxel editor.

v71 commented

Using imgui as a editing gui for my engine

screenhunter_16 jun 16 23 25

Ported most of the ImGui API to Lua for a project of mine, an injected hook with plugins and addons. (Plugins are C/C++ DLLs, addons are Lua based)

A starting port of the ImGui demo application to Lua in my addon system:
https://gist.github.com/atom0s/188283e6ff097f37fa31400f22ec8762

addon

Project is an injected hook into Final Fantasy XI (MMORPG) using Direct3D 8.

Edit:

7.01.2016 : Updated the above gist with newer .lua file. About 80% of the demo app is ported to Lua now.

I am making a 2d top view shooter game with Cocos2d-x. And this program can create game data such as position, type, tiling data, triggers. so it can help to make various game modes(like starcraft usemap editor).

Thanks to the convenience of ImGui, I was writing only a few algorithms(auto tiling, generate collision lines).

2016-07-07 9 14 57

it is ported on Cocos2d-x game engine, so it can live test likes Unity3D. (I developed game on cocos2d-x so i tried.)

Good Luck!

This nice series of article where Ben Garney goes on writing a video chat system has been going around lately. His tech demo uses imgui:
https://bengarney.com/2016/06/25/video-conference-part-1-these-things-suck/
overallapp

I'm working on building prototypes for research into aesthetics of dynamic lighting controls. The nodes are bluetooth based and are coordinated by an openFrameworks app. The default ofGui is hard to prettify, so ofxImgui by @jvcleave to the rescue. I wrote a few utility functions to integrate into the openFrameworks ofParameter class and it's all good.

openframeworks with imgui

WIP and messy project is here:
https://github.com/olekristensen/ledSynthMaster

v71 commented

Your theme is very nice, do you mind sharing ? what kind of font did you use ?

@v71 the formidable OpenSans

ImGuiIO& io = ImGui::GetIO();

io.Fonts->Clear();
io.Fonts->AddFontFromFileTTF(ofToDataPath("fonts/OpenSans-Light.ttf", true).c_str(), 16);
io.Fonts->AddFontFromFileTTF(ofToDataPath("fonts/OpenSans-Regular.ttf", true).c_str(), 16);
io.Fonts->AddFontFromFileTTF(ofToDataPath("fonts/OpenSans-Light.ttf", true).c_str(), 32);
io.Fonts->AddFontFromFileTTF(ofToDataPath("fonts/OpenSans-Regular.ttf", true).c_str(), 11);
io.Fonts->AddFontFromFileTTF(ofToDataPath("fonts/OpenSans-Bold.ttf", true).c_str(), 11);
io.Fonts->Build();

ImGuiStyle * style = &ImGui::GetStyle();

style->WindowPadding            = ImVec2(15, 15);
style->WindowRounding           = 5.0f;
style->FramePadding             = ImVec2(5, 5);
style->FrameRounding            = 4.0f;
style->ItemSpacing              = ImVec2(12, 8);
style->ItemInnerSpacing         = ImVec2(8, 6);
style->IndentSpacing            = 25.0f;
style->ScrollbarSize            = 15.0f;
style->ScrollbarRounding        = 9.0f;
style->GrabMinSize              = 5.0f;
style->GrabRounding             = 3.0f;

style->Colors[ImGuiCol_Text]                  = ImVec4(0.40f, 0.39f, 0.38f, 1.00f);
style->Colors[ImGuiCol_TextDisabled]          = ImVec4(0.40f, 0.39f, 0.38f, 0.77f);
style->Colors[ImGuiCol_WindowBg]              = ImVec4(0.92f, 0.91f, 0.88f, 0.70f);
style->Colors[ImGuiCol_ChildWindowBg]         = ImVec4(1.00f, 0.98f, 0.95f, 0.58f);
style->Colors[ImGuiCol_PopupBg]               = ImVec4(0.92f, 0.91f, 0.88f, 0.92f);
style->Colors[ImGuiCol_Border]                = ImVec4(0.84f, 0.83f, 0.80f, 0.65f);
style->Colors[ImGuiCol_BorderShadow]          = ImVec4(0.92f, 0.91f, 0.88f, 0.00f);
style->Colors[ImGuiCol_FrameBg]               = ImVec4(1.00f, 0.98f, 0.95f, 1.00f);
style->Colors[ImGuiCol_FrameBgHovered]        = ImVec4(0.99f, 1.00f, 0.40f, 0.78f);
style->Colors[ImGuiCol_FrameBgActive]         = ImVec4(0.26f, 1.00f, 0.00f, 1.00f);
style->Colors[ImGuiCol_TitleBg]               = ImVec4(1.00f, 0.98f, 0.95f, 1.00f);
style->Colors[ImGuiCol_TitleBgCollapsed]      = ImVec4(1.00f, 0.98f, 0.95f, 0.75f);
style->Colors[ImGuiCol_TitleBgActive]         = ImVec4(0.25f, 1.00f, 0.00f, 1.00f);
style->Colors[ImGuiCol_MenuBarBg]             = ImVec4(1.00f, 0.98f, 0.95f, 0.47f);
style->Colors[ImGuiCol_ScrollbarBg]           = ImVec4(1.00f, 0.98f, 0.95f, 1.00f);
style->Colors[ImGuiCol_ScrollbarGrab]         = ImVec4(0.00f, 0.00f, 0.00f, 0.21f);
style->Colors[ImGuiCol_ScrollbarGrabHovered]  = ImVec4(0.90f, 0.91f, 0.00f, 0.78f);
style->Colors[ImGuiCol_ScrollbarGrabActive]   = ImVec4(0.25f, 1.00f, 0.00f, 1.00f);
style->Colors[ImGuiCol_ComboBg]               = ImVec4(1.00f, 0.98f, 0.95f, 1.00f);
style->Colors[ImGuiCol_CheckMark]             = ImVec4(0.25f, 1.00f, 0.00f, 0.80f);
style->Colors[ImGuiCol_SliderGrab]            = ImVec4(0.00f, 0.00f, 0.00f, 0.14f);
style->Colors[ImGuiCol_SliderGrabActive]      = ImVec4(0.25f, 1.00f, 0.00f, 1.00f);
style->Colors[ImGuiCol_Button]                = ImVec4(0.00f, 0.00f, 0.00f, 0.14f);
style->Colors[ImGuiCol_ButtonHovered]         = ImVec4(0.99f, 1.00f, 0.22f, 0.86f);
style->Colors[ImGuiCol_ButtonActive]          = ImVec4(0.25f, 1.00f, 0.00f, 1.00f);
style->Colors[ImGuiCol_Header]                = ImVec4(0.25f, 1.00f, 0.00f, 0.76f);
style->Colors[ImGuiCol_HeaderHovered]         = ImVec4(0.25f, 1.00f, 0.00f, 0.86f);
style->Colors[ImGuiCol_HeaderActive]          = ImVec4(0.25f, 1.00f, 0.00f, 1.00f);
style->Colors[ImGuiCol_Column]                = ImVec4(0.00f, 0.00f, 0.00f, 0.32f);
style->Colors[ImGuiCol_ColumnHovered]         = ImVec4(0.25f, 1.00f, 0.00f, 0.78f);
style->Colors[ImGuiCol_ColumnActive]          = ImVec4(0.25f, 1.00f, 0.00f, 1.00f);
style->Colors[ImGuiCol_ResizeGrip]            = ImVec4(0.00f, 0.00f, 0.00f, 0.04f);
style->Colors[ImGuiCol_ResizeGripHovered]     = ImVec4(0.25f, 1.00f, 0.00f, 0.78f);
style->Colors[ImGuiCol_ResizeGripActive]      = ImVec4(0.25f, 1.00f, 0.00f, 1.00f);
style->Colors[ImGuiCol_CloseButton]           = ImVec4(0.40f, 0.39f, 0.38f, 0.16f);
style->Colors[ImGuiCol_CloseButtonHovered]    = ImVec4(0.40f, 0.39f, 0.38f, 0.39f);
style->Colors[ImGuiCol_CloseButtonActive]     = ImVec4(0.40f, 0.39f, 0.38f, 1.00f);
style->Colors[ImGuiCol_PlotLines]             = ImVec4(0.40f, 0.39f, 0.38f, 0.63f);
style->Colors[ImGuiCol_PlotLinesHovered]      = ImVec4(0.25f, 1.00f, 0.00f, 1.00f);
style->Colors[ImGuiCol_PlotHistogram]         = ImVec4(0.40f, 0.39f, 0.38f, 0.63f);
style->Colors[ImGuiCol_PlotHistogramHovered]  = ImVec4(0.25f, 1.00f, 0.00f, 1.00f);
style->Colors[ImGuiCol_TextSelectedBg]        = ImVec4(0.25f, 1.00f, 0.00f, 0.43f);
style->Colors[ImGuiCol_ModalWindowDarkening]  = ImVec4(1.00f, 0.98f, 0.95f, 0.73f);

From the tools of Boundless ( http://playboundless.com/ )
boundless

Untitled game by @gimblll
cobqmxmw8aenyn9 jpg orig

More Lumix Engine
cotcsupwgaeflus jpg orig

OpenBoardViewer https://github.com/OpenBoardView/OpenBoardView
5dc7745c-4abe-11e6-9e7f-0215bd9eaef3

WalrusRPG
imgui

A mine-game for Dear ImGui:
imguiminegame

Vulkan static pipeline layout editor
vk_pipeline_layout

Vulkan spirv binary decompiler & viewer
vk_spirv_viewer

Screenshot
This is a very primitive offline clone of Shadertoy. It parses the uniforms from a fragment shader and lets you edit them in realtime (by dragging).
Link: https://github.com/fabioarnold/TwoTriangles

@fabioarnold Nice, very good idea! Posting some thoughts on your Github :)

Really simple dot graph thingy.

gif animation

#include "imgui.h"
#define IMGUI_DEFINE_MATH_OPERATORS
#include "imgui_internal.h"

namespace ImGui
{
    int PlotDots(const char *label, const ImVec2& size, int maxpoints, ImVec2 *points)
    {
        int i;
        if (maxpoints < 1)
            return 0;

        ImGuiWindow* window = GetCurrentWindow();

        ImGuiContext& g = *GImGui;
        const ImGuiStyle& style = g.Style;
        const ImGuiID id = window->GetID(label);
        if (window->SkipItems)
            return 0;

        ImRect bb(window->DC.CursorPos, window->DC.CursorPos + size);
        ItemSize(bb);
        if (!ItemAdd(bb, NULL))
            return 0;

        RenderFrame(bb.Min, bb.Max, GetColorU32(ImGuiCol_FrameBg), true, style.FrameRounding);

        float ht = bb.Max.y - bb.Min.y;
        float wd = bb.Max.x - bb.Min.x;

        // dots
        for (i = 0; i < maxpoints; i++)
        {
            ImVec2 a = points[i];
            if (a.x >= 0 && a.x <= 1 && a.y >= 0&& a.y <= 1)
            {
                a = a * (bb.Max - bb.Min) + bb.Min;
                ImVec2 b = a + ImVec2(1.5, 1.5);

                window->DrawList->AddRectFilled(a, b, GetColorU32(ImGuiCol_PlotLines));
            }
        }

        RenderTextClipped(ImVec2(bb.Min.x, bb.Min.y + style.FramePadding.y), bb.Max, label, NULL, NULL, ImGuiAlign_Center);
        return 0;
    }
};

This is Part 2. 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!)