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 2) #539

Open
ocornut opened this issue Feb 28, 2016 · 73 comments

Comments

Projects
None yet
@ocornut
Copy link
Owner

commented Feb 28, 2016

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

You can post your screenshots here!

@MrSmith33

This comment has been minimized.

Copy link

commented Feb 28, 2016

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

@zmertens

This comment has been minimized.

Copy link

commented Feb 29, 2016

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.

@paperManu

This comment has been minimized.

Copy link
Contributor

commented Mar 5, 2016

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!

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Mar 6, 2016

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

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Mar 8, 2016

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

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Mar 8, 2016

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

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Mar 8, 2016

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

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Mar 8, 2016

A material editor
imgui_eg2

Particle stuff (seen before)
imgui_eg1

Quad-tree
imgui_eg0

@jelowang

This comment has been minimized.

Copy link

commented Mar 9, 2016

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

@citruslee

This comment has been minimized.

Copy link

commented Mar 11, 2016

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

This comment has been minimized.

Copy link
Contributor

commented Mar 15, 2016

Updated my profiler
profiler

@brucelane

This comment has been minimized.

Copy link

commented Mar 16, 2016

@citruslee it might be useful for me, thank you

@citruslee

This comment has been minimized.

Copy link

commented Mar 16, 2016

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

@kylawl

This comment has been minimized.

Copy link
Contributor

commented Mar 22, 2016

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

lumote-2016_03_22-11_27_35

@nem0

This comment has been minimized.

Copy link
Contributor

commented Mar 22, 2016

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

@kylawl

This comment has been minimized.

Copy link
Contributor

commented Mar 22, 2016

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

@citruslee

This comment has been minimized.

Copy link

commented Mar 22, 2016

@kylawl this looks seriously cool

@ghost

This comment has been minimized.

Copy link

commented Mar 25, 2016

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

This comment has been minimized.

Copy link
Contributor

commented Mar 25, 2016

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

@ghost

This comment has been minimized.

Copy link

commented Mar 25, 2016

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

@edselmalasig

This comment has been minimized.

Copy link

commented Mar 29, 2016

@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

This comment has been minimized.

Copy link

commented Mar 31, 2016

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

screenshot - interior design

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

@xposure

This comment has been minimized.

Copy link

commented Mar 31, 2016

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

@xposure

This comment has been minimized.

Copy link

commented Mar 31, 2016

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

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Mar 31, 2016

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

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Apr 1, 2016

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

@r-lyeh-archived

This comment has been minimized.

Copy link

commented Apr 1, 2016

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

@xposure

This comment has been minimized.

Copy link

commented Apr 1, 2016

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

@enemymouse

This comment has been minimized.

Copy link

commented Apr 1, 2016

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

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Jun 15, 2016

@ongamex

This comment has been minimized.

Copy link

commented Jun 15, 2016

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

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Jun 15, 2016

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.

@atom0s

This comment has been minimized.

Copy link

commented Jun 16, 2016

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.

@citruslee

This comment has been minimized.

Copy link

commented Jun 16, 2016

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

@ongamex

This comment has been minimized.

Copy link

commented Jun 16, 2016

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

@atom0s

This comment has been minimized.

Copy link

commented Jun 16, 2016

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

@freanux

This comment has been minimized.

Copy link

commented Jun 16, 2016

voxel_editor

working on a voxel editor.

@v71

This comment has been minimized.

Copy link

commented Jun 16, 2016

Using imgui as a editing gui for my engine

screenhunter_16 jun 16 23 25

@atom0s

This comment has been minimized.

Copy link

commented Jun 29, 2016

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.

@njh0602

This comment has been minimized.

Copy link

commented Jul 7, 2016

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!

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Jul 12, 2016

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

@olekristensen

This comment has been minimized.

Copy link

commented Jul 20, 2016

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

This comment has been minimized.

Copy link

commented Jul 20, 2016

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

@olekristensen

This comment has been minimized.

Copy link

commented Jul 20, 2016

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

This comment has been minimized.

Copy link
Owner Author

commented Jul 22, 2016

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

@wasamasa

This comment has been minimized.

@eliasdaler

This comment has been minimized.

Copy link
Contributor

commented Jul 22, 2016

Also the second part. :)

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Jul 29, 2016

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

@Flix01

This comment has been minimized.

Copy link

commented Jul 29, 2016

A mine-game for Dear ImGui:
imguiminegame

@hypernewbie

This comment has been minimized.

Copy link

commented Jul 29, 2016

Vulkan static pipeline layout editor
vk_pipeline_layout

Vulkan spirv binary decompiler & viewer
vk_spirv_viewer

@ocornut

This comment has been minimized.

@fabioarnold

This comment has been minimized.

Copy link

commented Aug 3, 2016

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

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Aug 3, 2016

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

@jarikomppa

This comment has been minimized.

Copy link

commented Aug 5, 2016

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

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Aug 7, 2016

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

Repository owner locked and limited conversation to collaborators Aug 7, 2016

@ocornut ocornut changed the title Post your screenshots / code here (PART 2) Gallery: Post your screenshots / code here (PART 2) Jun 2, 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.