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 14) #4451

Open
ocornut opened this issue Aug 20, 2021 · 73 comments
Open

Gallery: Post your screenshots / code here (PART 14) #4451

ocornut opened this issue Aug 20, 2021 · 73 comments
Labels

Comments

@ocornut
Copy link
Owner

ocornut commented Aug 20, 2021

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

@AidanSun05
Copy link

AidanSun05 commented Aug 22, 2021

Network Socket Terminal (NST) is an application for Internet and Bluetooth communication on Windows and Linux computers.
Thanks to Dear ImGui's unique windowing system, the app can handle multiple connections at once!

image

Here's NST communicating with an ESP32 via WiFi (click for full size):

Animation

Development is in progress (alpha), it's currently sitting in a private GitHub repo. I plan to make it fully public and open-source when it's ready.

EDIT: I've made the repo public for anyone who's interested: https://github.com/NSTerminal/terminal

@xhighway999
Copy link

LuaPad - An awesome online Lua sandbox
screenshot
)

@mnesarco
Copy link

Marz Designer is a parametric guitar designer (CAD software). WIP...

Screenshot from 2021-09-12 09-47-49

@vtushevskiy
Copy link

GLSL exlorer (standalone shadertoy "on steroids")

https://vimeo.com/605113516
https://vimeo.com/595099323
https://vimeo.com/593638722
https://vimeo.com/589236073
https://vimeo.com/588068234
https://vimeo.com/587673956
https://vimeo.com/584456788

Screen Shot 2021-09-14 at 15 48 09
Screen Shot 2021-09-14 at 15 45 00

@mnesarco
Copy link

mnesarco commented Sep 24, 2021

Hi Friends, I don't know where to put this, so If this is the wrong place please tell me.

I have been working on something to automate the creation of icon fonts and plain atlases from sets of svg files:

screenshot_20

The idea is that you write a simple config file, put your svg files in a folder and that's it. No interactive work. You define a set of rules and your icon font is generated and your atlas is generated in case you don't want to use the icons as a font. And all the c++ sources are generated so you can use it directly in your code as images (sprites) or as text (font). Then if you change any svg file or add more, you run the script and everything is regenerated.

Atlases are optimized with rectpack, also you can add some rules to transform your svg files on the fly.

This is the first version (it can have bugs), I am using it in a Cmake project with add_custom_command(...) and everything is done by the build system, so my icons are just svg files in the source tree and they are directly usable in my code.

Example:

#include "atlas_cells.hpp"

// ....

auto bawr = your_own_texture_loader(icons::data::DATA, icons::data::SIZE);

// ...

        if (bawr)
        {
            if (ImGui::Begin("BAWR Icons")) 
            {
                ImVec2 sz32{32,32};
                ImGui::Image(*bawr, sz32, icons::sz32::fileExport.uv0, icons::sz32::fileExport.uv1);
                ImGui::Image(*bawr, sz32, icons::sz32::eye.uv0, icons::sz32::eye.uv1);
                ImGui::Image(*bawr, sz32, icons::sz32::layers.uv0, icons::sz32::layers.uv1);

                ImVec2 sz16{16,16};
                ImGui::Image(*bawr, sz16, icons::sz16::fileExport.uv0, icons::sz16::fileExport.uv1);
                ImGui::Image(*bawr, sz16, icons::sz16::eye.uv0, icons::sz16::eye.uv1);
                ImGui::Image(*bawr, sz16, icons::sz16::layers.uv0, icons::sz16::layers.uv1);
            }
            ImGui::End();        
        }

screenshot_21

// Or using the generate icon font

#include "my-icons_codes.hpp"
#include "my-icons_loader.hpp"

// ...
        // Load your text fonts
        // .....

        // Load the icon font:
        ImFontConfig cfg;
        cfg.MergeMode = true;
        cfg.PixelSnapH = true;
        icons::Font::Load(ImGui::GetIO(), 32, &cfg);

// ...

        if (ImGui::Begin("BAWR Icon Font")) 
        {
            ImGui::Text("This is text with an icon %s ...", my_icons::folderOpen);
        }
        ImGui::End();        

And the best: it is free, I hope it can be useful for you.

https://github.com/mnesarco/bawr

Cheers,
Frank.

@Jaysmito101
Copy link

Jaysmito101 commented Sep 30, 2021

Procedural Terrain Generation And Shading Tool With Node Editor, Shader Editor, Skybox, Lua Scripting, ,...

GITHUB LINK : https://github.com/Jaysmito101/TerraGen3D

Screenshot (0)

Screenshot (1)

Screenshot (2)

Edit: This is pretty old and screenshots are broken latest version here: #4451 (comment)

@duddel
Copy link
Contributor

duddel commented Oct 14, 2021

I made a prototype "Skybox Composing Tool": https://didaduddel.itch.io/skytool
Not the fanciest GUI, yet. But Dear ImGui enabled me to kick-start this project with low GUI-effort!

Example assets made by Kenney.

G9YTgT

@gargakshit
Copy link

I made a Chip-8 interpreter that has a built in machine state inspector and debugger.

Repo: https://github.com/gargakshit/chip-8

Screenshot of the chip-8 interpreter

@SadKwitty
Copy link

image

Not mine but uses custom skinned ImGui

@796F
Copy link

796F commented Oct 20, 2021

image

Not mine but uses custom skinned ImGui

any sauce available? would love to use sliders like that.

@Jaysmito101
Copy link

image
Not mine but uses custom skinned ImGui

any sauce available? would love to use sliders like that.

I guess no as this is a paid software https://neverlose.cc/product?type=csgo

@martinpetkovski
Copy link

image

NST is a nonlinear narrative editor completely done with the stock ImGui docking branch / community widgets. Here's the official website and the Steam page.

@ocornut
Copy link
Owner Author

ocornut commented Oct 30, 2021

Wow this is amazing looking!
I had a wip branch with gradients which I never got around to finish, namely standardizing a new system for specifying colors, this is highly motivating to get back on finishing that work.

What’s interesting is that most (not all) of whats visible in that screenshot is down to creating one helper to draw a custom button (using eg the shading function). I wonder if we should promote that use case early on before it is formalized in the style system.

@aiekick
Copy link
Contributor

aiekick commented Feb 8, 2022

ImGui in Monogame is broken :( Unsure if ImGui itself, ImGui.NET, or MonoGame.Imgui:

post an issue if you have an issue, but dont do that on this thread please

@hoffstadt
Copy link
Contributor

Cool little music player made with Dear ImGui (using Python and Dear PyGui).

152874349-23779e31-eecb-4cc3-9db8-086160399f0c.mp4

@ZotyDev
Copy link

ZotyDev commented Feb 16, 2022

Added a custom BeginDragDropTarget() and AcceptDragDropPayload() to implement this nice in-between line.
image

@ocornut
Copy link
Owner Author

ocornut commented Feb 24, 2022

"FightNJokes is a semi-humorous retro style 2D fighting game made for players with humor"
https://twitter.com/fightnjokes

Fightnjokes-01
Fightnjokes-02

@gboisse
Copy link

gboisse commented Mar 3, 2022

Tweaking the scene lighting with ImGui :)

IMG_9704.MP4

@gboisse
Copy link

gboisse commented Mar 3, 2022

Procedural geometry with ImGui-based nodes:

764CB4C8-5502-4477-9416-5A0AFEEE5A2A

@Jacckii
Copy link

Jacckii commented Mar 5, 2022

School assigment done using dear ImGui + ImPlot
Simplex solver

@sgiurgiu
Copy link
Contributor

A Reddit client (https://github.com/sgiurgiu/reddit_desktop):
image

@ergocortex
Copy link

Robot Web Demo: Andrew Davison, Imperial College London (https://www.youtube.com/watch?v=xQcYwONtMN0)

image

@kyle-sylvestre
Copy link

GDB frontend https://github.com/kyle-sylvestre/Tug

image

@VadimBoev
Copy link

GUI for YT-DLP (support EN / RU launguages)
image
https://github.com/Kronka/YT-DLP-GUI

@ocornut
Copy link
Owner Author

ocornut commented Apr 1, 2022

Pixel FX Designer 2
https://codemanu.itch.io/particle-fx-designer
https://store.steampowered.com/app/939360/Pixel_FX_Designer/
e51b4ff1235198b0175db75de8409bb1fa4b9628
https://twitter.com/CodeManuPro/status/1508497262862811150
https://store.steampowered.com/news/app/939360/view/3146325916575568976

@Jaysmito101
Copy link

TerraForge3D (https://github.com/Jaysmito101/TerraForge3D/)












@nebsar
Copy link

nebsar commented Apr 2, 2022

Custom 5th Generation Aircraft Large Area Display. OpenSceneGraph, osgEarth and ImGui. Real-time simulation data is retrieved from XPlane11.

https://www.youtube.com/watch?v=9Df3zYNgbn0

image

@Unit520
Copy link

Unit520 commented Apr 2, 2022

Dear ImGui in the browser!
Hexmap is an interactive WebGL/WASM based binary data exploration tool that can be launched here:
https://unit520.net/hexmap

hexmap

@plkno1-Tse
Copy link

plkno1-Tse commented Apr 3, 2022

New icons for ImGui :)
image

@plkno1-Tse
Copy link

plkno1-Tse commented Apr 4, 2022

datepicker
image imageimageimage

@jokteur
Copy link

jokteur commented Apr 9, 2022

A little demo for a widget search using ImGui.

Basically, my program is able to highlight any widget the user searched for, even widgets that have not yet been drawn by ImGui or widgets that are on other viewports:

2022-04-09.19-04-00.mp4

@VadimBoev
Copy link

I made this game a year ago. It was in my interest to use ImGUI on Android without Java.
If you need a framework for an android application on ImGui without Java, then you can use my repository: https://github.com/Kronka/miniapp
Link to the game: https://boev.dev/dl/bird_fighter.apk


@Rubo3
Copy link

Rubo3 commented Apr 20, 2022

A little demo for a widget search using ImGui.

Basically, my program is able to highlight any widget the user searched for, even widgets that have not yet been drawn by ImGui or widgets that are on other viewports:
2022-04-09.19-04-00.mp4

It's great! Would you release the source?

@jokteur
Copy link

jokteur commented Apr 21, 2022

A little demo for a widget search using ImGui.
Basically, my program is able to highlight any widget the user searched for, even widgets that have not yet been drawn by ImGui or widgets that are on other viewports:
2022-04-09.19-04-00.mp4

It's great! Would you release the source?

Okay, no problem. I will post below the proof of concept. Beware, my code is a bit janky, and I am terrible with naming, but I hope you get the idea. I will post stripped down versions of the code, to avoid to much text. You will find most of the code here.

First, you have to know which widgets have which parents. As widgets in ImGui are drawn on the fly, you have to declare this in advance. I will consider a class called Search::Universe, which is the class that takes care of registering/unregistering the widgets and highlighting specific widgets (as shown in the animation above).

Search class

namespace Search {
    class Universe {
    private:
        /* private variables ... */
    public:
        Universe();

        /**
         * @brief Returns if the object must be shown or not
         * @return std::optional<bool> empty if must not be shown
         * #return if bool, then true indicates that the node is the last node to be shown
         */
        std::optional<bool> getShow(const std::string& id);

        /**
         * @brief Registers a node in the search Tree
         */
        void Register(const std::string& id, const std::string& parent = "", const std::vector<std::string>& search_terms = {});

        /**
         * @brief Removes a node from the search Tree (and consequently all the children)
         */
        void Unregister(const std::string& id, int level = 0);

        /**
         * @brief Clear all search terms (mainly used to change language)
         */
        void Clear();

        /**
         * @brief Signals the specified ID that is must not be highlighted anymore
         * @param id
         */
        void StopHighlight(const std::string& id);

        void StopAllHighlights();

        /**
         * @brief Highlight a widget with its ID
         * @param id
         */
        void Highlight(const std::string& id);

        /**
         * @brief The widgets are shown one by one
         * Each frame, a widget is shown, indicating other widgets that they must wait their turn
         */
        void FreeFrame() { m_frame_taken = false; }

        /**
         * @brief Returns the weights of the search result, along with the search term and the widget id's
         */
        std::map<int, std::vector<Result>> getSearchResults(const std::string& query, double score_cutoff = 0.0);
}

A Node is a widget, which knows whose parent has and which children it has. It also knows the associated search terms.

namespace Search {
    struct Node {
        std::string parent;
        std::unordered_set<std::string> childrens;
        std::vector<std::string>  search_phrases;
        bool show;
        tp last_time;
    };
}

Registering the widgets

Let's say that you want to have the main menu bar searchable in main window. You would do something like this:

void RegisterWidgetsOfMainWindow() {
    // search is a Search::Universe object, here a global variable for the sake of presentation
    search.Register("MainWindow");
    // Second parameter is indicating the parent name
    search.Register("MenuBar_Files", "MainWindow");
    // Here we associated some search terms. You can have multiple search terms per widget
    search.Register("MenuBar_NewProject", "MenuBar_Files", { TXT("New project"), TXT("Create project") });
    search.Register("MenuBar_OpenProject", "MenuBar_Files", { TXT("Open project") });

    search.Register("MenuBar_Settings");
    search.Register("MenuBar_Language", "MenuBar_Settings", { TXT("Change language"), TXT("Set display language") });
}

Drawing the widgets

What is left to do, is to modify the ImGui widgets, such that you can show them at anytime. Here is an example:

namespace Widgets {
    bool Begin(Search::Universe& search, const std::string& id, const std::string& name, bool* p_open, ImGuiWindowFlags flags) {
        bool ret = ImGui::Begin(name.c_str(), p_open, flags);
        auto show = search.getShow(id);
        if (show.has_value()) {
            ImGui::SetWindowFocus();
            if (show.value()) {
                ImVec2 pos = ImGui::GetWindowPos();
                ImVec2 min = ImGui::GetWindowContentRegionMin();
                ImVec2 max = ImGui::GetWindowContentRegionMax();
                DrawRect(ImVec2(pos.x + min.x, pos.y + min.y), ImVec2(pos.x + max.x, pos.y + max.y));
            }
        }
        return ret;
    }
    void End() {
        ImGui::End();
    }

    bool BeginMenu(Search::Universe& search, const std::string& id, const std::string& label, bool enabled) {
        bool ret = ImGui::BeginMenu(label.c_str(), enabled);

        auto show = search.getShow(id);
        if (show.has_value()) {
            if (show.value()) {
                GetAndDrawRect();
            }
            else {
                auto im_id = ImGui::GetID(label.c_str());
                ImGui::OpenPopup(im_id, ImGuiPopupFlags_AnyPopup);
            }
        }
        return ret;
    }
    void EndMenu() {
        ImGui::EndMenu();
    }
    bool MenuItem(Search::Universe& search, const std::string& id, const std::string& label, const char* shortcut, bool selected, bool enabled) {
        bool ret = ImGui::MenuItem(label.c_str(), shortcut, selected, enabled);

        auto show = search.getShow(id);
        if (show.has_value() && show.value()) {
            GetAndDrawRect();
        }
        return ret;
    }
}

with

namespace Widgets {
    inline void DrawRect(ImVec2 min, ImVec2 max) {
        // Tempo is my ImGui framework. This is just to have a nice little animation
        float progress = Tempo::GetProgress("highlight_widget");

        const float SIZE = 5.f;
        min = ImVec2(min.x - SIZE * (float)std::sin(progress * 3.14), min.y - SIZE * (float)std::sin(progress * 3.14));
        max = ImVec2(max.x + SIZE * (float)std::sin(progress * 3.14), max.y + SIZE * (float)std::sin(progress * 3.14));
        ImGui::GetForegroundDrawList()->AddRect(min, max, IM_COL32(31, 135, 229, 229), 3.f, 0, 3.f);
    }

    inline void GetAndDrawRect() {
        ImGuiContext* g = ImGui::GetCurrentContext();
        ImRect bb = g->LastItemData.Rect;
        DrawRect(bb.Min, bb.Max);
    }
}

In my main drawing loop, I would just have:

    Widgets::Begin(search, "MainWindow");

    ImGui::BeginMenuBar();
    if (Widgets::BeginMenu(search, "MenuBar_Files", TXT("Files"))) {
        Widgets::MenuItem(search, "MenuBar_NewProject", TXT(ICON_MD_NOTE_ADD " New project"));
        Widgets::MenuItem(search, "MenuBar_OpenProject", TXT(ICON_MD_FOLDER_OPEN " Open project"));
        Widgets::EndMenu();
    }

    if (Widgets::BeginMenu(search, "MenuBar_Settings", TXT("Settings"))) {
        if (Widgets::BeginMenu(search, "MenuBar_Language", TXT(ICON_MD_LANGUAGE " Language"))) {
            /* ... */
            Widgets::EndMenu();
        }
        Widgets::EndMenu();
    }
    ImGui::EndMenuBar();

    Widgets::End();

How it works

When the user calls for e.g. search.Highlight("MenuBar_Language"), the search class will look up in the node tree and look for all the parents until the root. Then, the search class will progressively set internal variables to true such that search.getShow(id) returns true when it is the turn of the widget with id to be shown.

// search.Highlight("MenuBar_Language") will put the Node tree in this state:
MainWindow              -> show = true
..MenuBar_Files         -> show = false
....MenuBar_NewProject  -> show = false
....MenuBar_OpenProject -> show = false
..MenuBar_Settings      -> show = true
....MenuBar_Language    -> show = true     

Because of how ImGui works, it is not possible to show everything at the same time: e.g. if you call twice ImGui::OpenPopup(im_id, ImGuiPopupFlags_AnyPopup); in the same frame, it will only work on the last call as far as I know. This means you have to show widgets parent by parent until you arrived at the desired child. This is why we have search.FreeFrame() function. This function must be called every frame. When one widget is shown (by search.getShow(id)), then search.m_frame_taken is equal to true, and the search.getShow() is blocked until the next frame. This ensures that the widgets are shown one by one.

Here is how the loop will proceed:

MainWindow              (show = true )  <-- search.getShow("MainWindow") is called => search.m_frame_taken = true;
..MenuBar_Files         (show = false)
....MenuBar_NewProject  (show = false)
....MenuBar_OpenProject (show = false)
..MenuBar_Settings      (show = true )
....MenuBar_Language    (show = true ) 

Next frame (-> search.FreeFrame())

MainWindow              (show = false) 
..MenuBar_Files         (show = false)
....MenuBar_NewProject  (show = false)
....MenuBar_OpenProject (show = false)
..MenuBar_Settings      (show = true ) <-- search.getShow("MenuBar_Settings") is called => search.m_frame_taken = true;
....MenuBar_Language    (show = true )   

Next frame (-> search.FreeFrame())

MainWindow              (show = false) 
..MenuBar_Files         (show = false)
....MenuBar_NewProject  (show = false)
....MenuBar_OpenProject (show = false)
..MenuBar_Settings      (show = false)
....MenuBar_Language    (show = true )  <-- search.getShow("MenuBar_Language") is called => search.m_frame_taken = true;

MenuBar_Language is the highlighted widget, so search.getShow("MenuBar_Language") returns std::optional<bool>(true), which means that the Widget::MenuItem() must highlight the widget

If you want to stop the highlighting (the user clicked anywhere for e.g.), you just call search.StopAllHighlights().

Advantages and limitations

  • It works on any widget (popup, window, button, Selectable, ...), if you are willing to implement the specific lines of code to show and highlight the widgets
  • This method is agnostic on where the widget is. It can be in another viewport, we don't need to care
  • You can register / unregister widgets at any time. So you can have temporary searchable widgets
  • In most programs that have a search function (e.g. Word), they just execute the action you have searched for. This leads to never knowing where the actual button is. I never remember where the button is to put the document in Landscape mode, and thus I am always using the search. This is a nice additional functionnality, which allows the user to discover the interface.

Limitations:

  • As the widgets are shown one by one, it takes a few frames until arriving at the highlighted widget. If the user interacts in the meantime with the interface, it is possible that the showing and highlighting will fail (this is why there is a time limit in my implementation)
  • This method cannot show and highlight widgets that are shown only when certains conditions are met, e.g. a widget that is only shown when a certain checkbox is activated. You can certainly create a workaround, however this is tricky, because we don't want to activate for e.g. a checkbox if the user does not yet know what the checkbox is for. We should have a way to tell the user "hey, this functionnality you are searching for is hidden behind this checkbox, so make sure to activate it before continuing".

Of course, they are certainly limitations that I haven't considered yet, and there is probably a better way to implement this. But this a proof of concept, and at least it works in the way I intended.

@mudlord
Copy link

mudlord commented Apr 23, 2022

163493614-c992cfd3-78d5-4579-87aa-53b580f70305

A private-use libretro client for fun/debugging libretro cores. Styled after my previous Windows only client, only this time ported to SDL2/GL3.3/C++17 for Linux use also. So far seems mostly on feature parity with the WTL-based original. Hoping to expand it with more things I might find fun like post-process shaders and audio filtering.

@tksuoran
Copy link

Early work on resurrecting a small turn by turn strategy game I wrote in the early 90s on Amiga.
New in this rewrite is procedural map generation.
2022_04_23

@lukaasm
Copy link
Contributor

lukaasm commented Apr 24, 2022

Engine/Game tools:

ModelEditor:
image
image
image
image

MissionEditor:
image

GameEditor:
image
image
image

BenchmarkViewer:
image
image

@sam20908
Copy link

We use it to create menus for our cam program for streamers.

image

@ocornut
Copy link
Owner Author

ocornut commented Apr 26, 2022

Followup in #5243 (Please post in the new thread)

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