Skip to content

UIPaddingContainer

Container that wraps a single UI element and applies padding.

Description

UIPaddingContainer adds padding/margin around a single child element without organizing multiple elements. Useful for adding spacing to individual elements or nesting layouts with custom padding.

This container is simpler than UIPanel (no background/border) and focuses only on spacing.

Namespace

namespace pixelroot32::graphics::ui {
    class UIPaddingContainer : public UIElement {
        // ...
    };
}

Inheritance

  • Inherits from: UIElement
  • Inherited by: Your custom padding containers (if needed)

Constructors

UIPaddingContainer(float x, float y, float w, float h)

Constructs a new UIPaddingContainer.

Parameters: - x (float): X position of the container - y (float): Y position of the container - w (float): Width of the container - h (float): Height of the container

Example: 

#include "graphics/ui/UIPaddingContainer.h"
#include <memory>

// In your Scene class:
// std::unique_ptr<pixelroot32::graphics::ui::UIPaddingContainer> padded;

// Initialize in init()
// Create padding container
padded = std::make_unique<pixelroot32::graphics::ui::UIPaddingContainer>(
    10.0f, 10.0f,
    108.0f, 108.0f
);
padded->setPadding(8.0f);  // 8px padding on all sides

// Add to scene
addEntity(padded.get());

Public Methods

void setChild(UIElement* element)

Sets the child element.

Parameters: - element (UIElement*): Pointer to the UI element to wrap

Returns: - void

Notes: - Child element is positioned with padding applied - Can wrap any UI element (button, label, layout, etc.)

Example: 

padded->setChild(button);

UIElement* getChild() const

Gets the child element.

Returns: - UIElement*: Pointer to the child element, or nullptr if none set

void setPadding(float p)

Sets uniform padding on all sides.

Parameters: - p (float): Padding value in pixels

Returns: - void

Notes: - Applies same padding to all sides - Child position is automatically updated

Example: 

padded->setPadding(10.0f);  // 10px padding all around

void setPadding(float left, float right, float top, float bottom)

Sets asymmetric padding.

Parameters: - left (float): Left padding in pixels - right (float): Right padding in pixels - top (float): Top padding in pixels - bottom (float): Bottom padding in pixels

Returns: - void

Example: 

padded->setPadding(10.0f, 5.0f, 8.0f, 12.0f);  // Different padding per side

float getPaddingLeft() const

Gets the left padding.

Returns: - float: Left padding in pixels

float getPaddingRight() const

Gets the right padding.

Returns: - float: Right padding in pixels

float getPaddingTop() const

Gets the top padding.

Returns: - float: Top padding in pixels

float getPaddingBottom() const

Gets the bottom padding.

Returns: - float: Bottom padding in pixels

void setPosition(float newX, float newY)

Sets the position of the container. Also updates the child element's position.

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

Returns: - void

Notes: - Child element position is updated automatically with padding applied

void update(unsigned long deltaTime) override

Updates the container and child element.

Parameters: - deltaTime (unsigned long): Time elapsed in milliseconds

Returns: - void

Notes: - Updates child element if set - Called automatically by Scene

void draw(Renderer& renderer) override

Draws the child element.

Parameters: - renderer (pixelroot32::graphics::Renderer&): Reference to the renderer

Returns: - void

Notes: - Only draws child element (no background/border) - Child is drawn at padded position

Usage Example

#include "graphics/ui/UIPaddingContainer.h"
#include <memory>

class MenuScene : public pixelroot32::core::Scene {
private:
    std::unique_ptr<pixelroot32::graphics::ui::UIPaddingContainer> paddedButton;
    std::unique_ptr<UIButton> button;

public:
    void init() override {
        // Create button
        button = std::make_unique<UIButton>("Start", 0, 0, 0, 100.0f, 30.0f, 
                                    [this]() { startGame(); });

        // Wrap button with padding
        paddedButton = std::make_unique<pixelroot32::graphics::ui::UIPaddingContainer>(
            64.0f, 50.0f,  // position
            120.0f, 50.0f  // size (button + padding)
        );
        paddedButton->setPadding(10.0f);  // 10px padding
        paddedButton->setChild(button.get());

        addEntity(paddedButton.get());
    }
};

Nesting with Layouts

#include <memory>

// In Scene:
// std::unique_ptr<UIVerticalLayout> layout;
// std::unique_ptr<UIPaddingContainer> paddedLayout;

// Create layout
layout = std::make_unique<UIVerticalLayout>(10, 10, 108, 108);

// Wrap layout with padding
paddedLayout = std::make_unique<UIPaddingContainer>(0, 0, 128, 128);
paddedLayout->setPadding(10.0f, 10.0f, 20.0f, 20.0f);  // Asymmetric
paddedLayout->setChild(layout.get());

Performance Considerations

  • Rendering: Very efficient (just draws child)
  • Position calculation: Fast (simple addition)
  • Memory: Minimal overhead

ESP32 Considerations

  • Memory: Very lightweight
  • Update frequency: Position only recalculates when padding/position changes

See Also