Skip to content

UIElement

Base class for all user interface elements.

Description

UIElement is the base class for all UI components (buttons, labels, panels, etc.). It inherits from Entity to integrate with the scene graph and automatically sets the entity type to UI_ELEMENT and render layer to 2 (UI layer).

Namespace

namespace pixelroot32::graphics::ui {
    enum class UIElementType {
        GENERIC,
        BUTTON,
        LABEL,
        CHECKBOX,
        LAYOUT
    };

    class UIElement : public pixelroot32::core::Entity {
        // ...
    };
}

Inheritance

  • Inherits from: pixelroot32::core::Entity
  • Inherited by: UIButton, UICheckBox, UILabel, UIPanel, and all UI layouts

Constructors

UIElement(float x, float y, float w, float h, UIElementType type = UIElementType::GENERIC)

Constructs a new UIElement.

Parameters: - x (float): X position - y (float): Y position - w (float): Width - h (float): Height - type (UIElementType): The type of the element (default: GENERIC)

Notes: - Entity type is automatically set to UI_ELEMENT - Render layer is automatically set to 2 (UI layer) - Position and size can be modified after construction

Example: 

class MyUIElement : public pixelroot32::graphics::ui::UIElement {
public:
    MyUIElement(float x, float y) 
        : UIElement(x, y, 100.0f, 50.0f) {}

    void update(unsigned long deltaTime) override {
        // UI logic
    }

    void draw(pixelroot32::graphics::Renderer& renderer) override {
        // UI rendering
    }
};

Public Methods

UIElementType getType() const

Returns the type of the UI element.

Returns: - UIElementType: The type enum value (GENERIC, BUTTON, LABEL, CHECKBOX, or LAYOUT)

virtual bool isFocusable() const

Checks if the element is focusable/selectable. Useful for navigation logic.

Returns: - bool: true if focusable, false otherwise (default: false)

void setPosition(float newX, float newY)

Sets the position of the element.

Parameters: - newX (float): New X coordinate - newY (float): New Y coordinate

Returns: - void

Notes: - Updates element position immediately - Use for manual positioning or animations

Example: 

uiElement->setPosition(100.0f, 50.0f);

virtual void getPreferredSize(float& preferredWidth, float& preferredHeight) const

Gets the preferred size of the element. Used by layouts to determine how much space the element needs.

Parameters: - preferredWidth (float&): Output parameter for preferred width (or -1 if flexible) - preferredHeight (float&): Output parameter for preferred height (or -1 if flexible)

Returns: - void

Notes: - Default implementation returns current width/height - Override in derived classes for custom sizing logic - Layouts use this to arrange elements

Example: 

void getPreferredSize(float& w, float& h) const override {
    // Custom sizing logic
    w = static_cast<float>(width);
    h = static_cast<float>(height);
}

Inherited from Entity

UIElement inherits all properties and methods from Entity:

  • float x, y: Position
  • int width, height: Dimensions
  • bool isVisible: Visibility state
  • bool isEnabled: Enabled state
  • unsigned char renderLayer: Render layer (automatically set to 2)
  • void setVisible(bool v): Set visibility
  • void setEnabled(bool e): Set enabled state
  • virtual void update(unsigned long deltaTime): Update logic
  • virtual void draw(Renderer& renderer): Drawing logic

TextAlignment Enum

Text alignment options for UI elements.

Values: - TextAlignment::LEFT: Left-aligned text - TextAlignment::CENTER: Center-aligned text - TextAlignment::RIGHT: Right-aligned text

Usage Example

#include "graphics/ui/UIElement.h"

class CustomUIElement : public pixelroot32::graphics::ui::UIElement {
private:
    pixelroot32::graphics::Color bgColor;

public:
    CustomUIElement(float x, float y, float w, float h) 
        : UIElement(x, y, w, h),
          bgColor(pixelroot32::graphics::Color::Blue) {}

    void update(unsigned long deltaTime) override {
        // Update logic (if needed)
    }

    void draw(pixelroot32::graphics::Renderer& renderer) override {
        if (isVisible) {
            // Draw background
            renderer.drawFilledRectangle(
                static_cast<int>(x),
                static_cast<int>(y),
                width,
                height,
                bgColor
            );

            // Draw border
            renderer.drawRectangle(
                static_cast<int>(x),
                static_cast<int>(y),
                width,
                height,
                pixelroot32::graphics::Color::White
            );
        }
    }

    void getPreferredSize(float& w, float& h) const override {
        w = static_cast<float>(width);
        h = static_cast<float>(height);
    }
};

Performance Considerations

  • Render layer: UI elements are on layer 2, drawn after gameplay
  • Visibility: Use isVisible = false to hide elements efficiently
  • Layout integration: Layouts automatically manage element positioning

ESP32 Considerations

  • Memory: Each UI element consumes memory (stay within MAX_ENTITIES)
  • Object pooling: Reuse UI elements when possible
  • Update frequency: Disable UI elements that don't need to update

See Also