Skip to content

UI Overview

There are multiple ways to use a user interface (UI) with ERS:

  • Using the ERS Debugger.
  • Building a custom application using the built-in ImGui version.
  • Embedding the ERS visualization into a third-party UI framework.
  • Using a third-party framework to create a fully custom UI and visualization with ERS serving as the simulation back-end.

The ERS Debugger

The ERS Debugger is a pre-built application that can be opened to inspect an ERS model and "debug" any issues. For more information, see the ERS Debugger page.

Built-in ImGui

Dear ImGui (often referred to as simply "ImGui") is a graphical user interface (GUI) library that is often used in the computer graphics world. It is designed to "enable fast iterations and to empower programmers to create content creation tools and visualization / debug tools" and it "favors simplicity and productivity toward this goal". ImGui uses the immediate mode design pattern. This means that calls to the functions of ImGui cause direct rendering and data used in these functions is directly read and shown in the interface. In other words: a user interface in ImGui is built by calling ImGui functions as part of the code of your program.

For example, the code below creates a ModelContainer and shows the number of simulators inside the model container in the UI. The ImGui functions directly use the data (the model container) and show it as part of the user interface.

Ers::ModelContainer modelContainer = Ers::ModelContainer::Create();
for (int i = 0; i < 51; i++)
{
    const std::string name = std::format("Sim {}", i + 1);
    modelContainer.AddSimulator(name.c_str(), Ers::SimulatorType::DiscreteEvent);
}

// Create a window in the UI with title "ModelContainer info"
ImGui::Begin("ModelContainer info");
// Show the number fo simulators
ImGui::Text("The model container has %zu simulators", modelContainer.GetSimulators().size());
// Finish the "ModelContainer info" window in the UI
ImGui::End();
ModelContainer modelContainer = ModelContainer.Create();
for (int i = 0; i < 51; i++)
{
    modelContainer.AddSimulator($"Sim {i + 1}", SimulatorType.DiscreteEvent);
}

// Create a window in the UI with title "ModelContainer info"
ImGui.Begin("ModelContainer info");
// Show the number of simulators
ImGui.Text($"The model container has {modelContainer.GetSimulators().Length} simulators");
// Finish the "ModelContainer info" window in the UI
ImGui.End();

Immediate mode explanation code output

The "ModelContainer info" window as part of the user interface.

UI elements like the "ModelContainer info" window are called "widgets" in ImGui. ERS provides a number of pre-built ImGui widgets that can be used as building blocks to swiftly and easily build an application on top of ERS.

Tip

If you're not familiar with ImGui or ImPlot, we recommend checking out the Dear ImGui Explorer. It contains live examples with source code of all features of ImGui and ImPlot.

Third-party front-end

It's possible to completely ignore the UI and visualization features that ERS provides and use a different framework or engine to create the UI / visualization. In this case ERS is only used to perform the simulation.

For example, when a high-performance 2D and/or 3D visualization is required, ERS might be used to in combination with Unreal Engine or Unity. ERS will be used as a software library and runs a simulation while Unreal or Unity are the user interface / visualization. This could be done by using custom data components to provide visualization data while using views to iterate over all entities that need to be visualization using Unreal or Unity's functionality.

It may also be preferred to use a web interface instead of a high-performance visualization. In that case, ERS may be used in the back-end (for example in combination with ASP.NET). API calls to the back-end may be used to load, configure or run simulation models in ERS, and the results may be sent back to the front-end to be displayed in the web interface.

When to use ImGui vs a third-party front-end

Choose ImGui when:

  • You want a high-performance user interface that is tightly integrated with the simulation model.
  • You want to add domain specific elements to the ERS debugger.
  • You need quick prototyping of debug visualizations.
  • You want seamless integration with existing ERS debugger features.

Choose a third-party front-end when:

  • You need a completely standalone application.
  • You have specific UI framework requirements (corporate standards, existing codebase).
  • You're building web-based or cloud-hosted simulation tools.
Was this page helpful?