Introduction

In this blog post, we’ll walk through the development of a library designed to simplify the startup of new desktop application projects. It is built using SDL (Simple DirectMedia Layer) for window creation and context handling, and ImGui for creating modern, interactive graphical user interfaces. This library serves as a foundation, helping to quickly prototype and develop applications without worrying about initial setup. The library is hosted on GitHub, so it's readily available for anyone to clone, fork, and contribute.

Utility of the Application

1. An invisible window and OpenGL context: Through the use of SDL.

2. A modern, interactive GUI: Through the use of ImGui which serves as the main application window.

3. An event handling system: Customizable through the EventHandler class.

4. Cross-platform application.

Code Structure

1. EsdApp: The core application layer for managing the application.

2. Window: Encapsulates the SDL_Window and associated SDL_GLContext for OpenGL rendering.

3. ImGuiLayer: Handles ImGui rendering.

4. EventHandler: Responsible for processing system events.

Step 1: Initializing

void EsdCppApp::EsdApp::StartLayer(const char* title, const float width, const float height)
{
    appWindow = new Window();
    imguiLayer = new ImGuiLayer(title, width, height, appWindow->GetSDLWindow(), appWindow->GetGLContext());
}

Step 2: Window Creation

EsdWindow::EsdWindow() {
    // ... Initialization code ...
}

EsdWindow::~EsdWindow() {
    SDL_GL_DeleteContext(m_GLContext);
    SDL_DestroyWindow(m_Window);
    SDL_Quit();
}

Step 3: Handling ImGui

EsdImGuiLayer::EsdImGuiLayer(const char* title, const float w, const float h, 
															SDL_Window* window, SDL_GLContext glContext) {
    // ... ImGui setup code ...
}

void EsdImGuiLayer::RunFrame(void(*userAppUI)(), bool& isActive) {
    // ... Code for ImGui frame rendering ...
}

Step 4: Handling Events

void EventHandler::HandleEvent(bool& isActive) {
    SDL_Event event;
    while (SDL_PollEvent(&event)) {
        ImGui_ImplSDL2_ProcessEvent(&event);
        if (event.type == SDL_QUIT)
            isActive = false;
    }
}

Step 5: Cleanup

void EsdCppApp::EsdApp::EndLayer() {
    delete imguiLayer;
    delete appWindow;
}

Getting Started

#define WIDTH 1280
#define HEIGHT 720
#define TITLE "Esd.CppApp"

StartLayer()

EsdCppApp::EsdApp::StartLayer(TITLE, WIDTH, HEIGHT);

Crafting the Main Loop

bool running = true;
auto myApp = []()
{
    ImGui::ShowDemoWindow();
};

// Run the application layer, which handles events, updates the application state, and renders the application.
EsdCppApp::EsdApp::RunLayer(myApp, running);

• running is a boolean flag that keeps our application running until an event (like a user closing the window) sets it to false.

• myApp is a lambda function that is designed to contain your application's ImGui user interface. In this example, it simply displays ImGui’s built-in demo window.

• RunLayer takes care of handling events and running the app.
• GetEventHandler()->HandleEvent(running) polls and handles system events, like user inputs. It will set running to false when a quit event is detected, gracefully ending the main loop.
• GetImGuiLayer()->RunFrame(myApp, running) runs a single frame of our ImGui user interface by calling our myApp function.

EndLayer()

EsdCppApp::EsdApp::EndLayer();

Usage

#include "../EsdCppApp.h"  // Include the header file for the EsdApp class and related functionality.

#define WIDTH 1280          // Define the width of the application window.
#define HEIGHT 720          // Define the height of the application window.
#define TITLE "Esd.CppApp"  // Define the title of the application window.

// Entry point for the application.
int main(int, char**)
{
    // Define a lambda function that contains the user interface elements for the application.
    // In this case, it simply displays ImGui's built-in demo window.
    auto myApp = []()
    {
        ImGui::ShowDemoWindow();  // Show the ImGui demo window to demonstrate ImGui's functionalities.
    };

    // Declare a boolean flag to indicate whether the application is running or not.
    bool running = true;

    // Initialize the application with a title, width, and height.
    EsdCppApp::EsdApp::StartLayer(TITLE, WIDTH, HEIGHT);

    // Run the application layer, which handles events, updates the application state, and renders the application.
    EsdCppApp::EsdApp::RunLayer(myApp, running);

    // Perform cleanup operations for the application layer, such as deleting allocated resources.
    EsdCppApp::EsdApp::EndLayer();

    // Return 0 to indicate successful termination of the application.
    return 0;
}

Demo

Another Demo App:

Conclusion

View this on GitHub

You can access the complete code and contribute to this project on GitHub.