and UI Design

The and UI design in OGLR is based on the principle of separating concerns: the UI code, the rendering code, and the game logic are kept distinct to enable maintainability and flexibility. The oglr::gui::Ui struct plays a central role in this design.

oglr::gui::Ui

The oglr::gui::Ui struct encapsulates all UI functionality. It serves as the primary interface for working with the UI, handling user input, and managing UI elements. The oglr::gui::Ui class is defined in the oglr/gui/ui.hpp file.

• Initialization and Update: The oglr::gui::Ui instance is initialized within the main loop. The update function is called on each frame to process user input, render elements, and update the UI state.
• Layout: The UI is organized hierarchically. The oglr::gui::Ui class provides methods for adding, removing, and manipulating UI elements.
• Rendering: The oglr::gui::Ui class uses OpenGL to render UI elements. It employs a custom shader to provide efficient rendering of text and basic geometric shapes.

UI Elements

OGLR defines a set of basic UI elements that can be used to construct complex user interfaces:

• Label: Displays text.
• Button: Triggers actions when clicked.
• Checkbox: Allows toggling on/off states.
• Slider: Allows for continuous value adjustment.
• Texture: Displays an image.
• Panel: Provides a container for other UI elements.

These elements are implemented as subclasses of the oglr::gui::UiElement class, defined in the oglr/gui/uielement.hpp file. Each element defines properties and methods for handling events, updating their state, and rendering themselves.

Example: Button

#include <oglr/gui/ui.hpp>
          
          // Create a button and add it to the UI
          oglr::gui::Button button = ui.createButton("Button");
          
          // Set the button's position
          button.setPosition(glm::vec2(100.0f, 100.0f));
          
          // Set the button's size
          button.setSize(glm::vec2(100.0f, 50.0f));
          
          // Set the button's text
          button.setText("Click me");
          
          // Add a callback for when the button is clicked
          button.setCallback([&](const oglr::gui::Event& event) {
              // Handle button click event
          });
          

Code Files:

• oglr/gui/ui.hpp: Defines the oglr::gui::Ui class and related functions.
• oglr/gui/uielement.hpp: Defines the base class for all UI elements.
• oglr/gui/label.hpp: Defines the oglr::gui::Label class.
• oglr/gui/button.hpp: Defines the oglr::gui::Button class.
• oglr/gui/checkbox.hpp: Defines the oglr::gui::Checkbox class.
• oglr/gui/slider.hpp: Defines the oglr::gui::Slider class.
• oglr/gui/texture.hpp: Defines the oglr::gui::Texture class.
• oglr/gui/panel.hpp: Defines the oglr::gui::Panel class.

Additional Notes:

The and UI design is designed to be flexible and extensible. Developers can easily add new UI elements and customize the appearance of existing elements.