Usage - Type-32/OverseerUI GitHub Wiki

Overseer UI Documentation

A lightweight UI utility library for ImGui-java that provides web-like components and styling capabilities.

Table of Contents

Basic Containers

Create styled containers with a fluent API:

UI.container("my-container", new ContainerStyle()
    .rounded(8)
    .bg(ImColors.rgba(51, 51, 51, 0.8f))
    .withBorder()
    .size(200, 100), () -> {
    ImGui.text("Container content");
});

Container style options:

  • rounded(float) - Set corner rounding
  • bg(ImVec4) - Set background color
  • withBorder() - Add border
  • size(float, float) - Set width and height (0 for auto)

Flex Layout

Create flexible layouts similar to CSS flexbox:

// Row layout (horizontal)
UI.flex("row", () -> {
    ImGui.button("Button 1");
    UI.mx(8);  // margin between buttons
    ImGui.button("Button 2");
});

// Column layout (vertical)
UI.flex("column", () -> {
    ImGui.text("Line 1");
    UI.py(4);  // vertical spacing
    ImGui.text("Line 2");
});

Grid System

Create grid layouts with automatic column management:

UI.grid(3, () -> {  // 3 columns
    UI.gridCell(() -> {
        ImGui.text("Cell 1");
    });
    UI.gridCell(() -> {
        ImGui.text("Cell 2");
    });
    UI.gridCell(() -> {
        ImGui.text("Cell 3");
    });
});

Lists and Iteration

Iterate through collections with automatic ID management:

List<String> items = Arrays.asList("Item 1", "Item 2", "Item 3");

UI.each(items, (item, index) -> {
    ImGui.text(item);
    UI.mx(4);
    if (ImGui.button("Delete##" + index)) {
        items.remove(index);
    }
});

Spacing Utilities

TailwindCSS-inspired spacing utilities:

UI.px(10);  // horizontal padding
UI.py(10);  // vertical padding
UI.p(10);   // padding in both directions
UI.mx(10);  // horizontal margin (using sameLine)

Conditional Rendering

Conditionally render content:

boolean isLoading = true;

UI.when(isLoading, () -> {
    ImGui.text("Loading...");
});

State Management

Simple state management system:

// Set state
UI.setState("dialogOpen", true);
UI.setState("username", "John");

// Use state
UI.when(UI.<Boolean>getState("dialogOpen"), () -> {
    ImGui.text("Dialog content");
    if (ImGui.button("Close")) {
        UI.setState("dialogOpen", false);
    }
});

Styling

Color utilities for consistent styling:

public class ImColors {
    public static final ImVec4 WHITE = new ImVec4(1.0f, 1.0f, 1.0f, 1.0f);
    public static final ImVec4 BLACK = new ImVec4(0.0f, 0.0f, 0.0f, 1.0f);
    
    // Create color from RGB values (0-255)
    public static ImVec4 rgb(float r, float g, float b) {
        return rgba(r, g, b, 1.0f);
    }
    
    // Create color with alpha
    public static ImVec4 rgba(float r, float g, float b, float a) {
        return new ImVec4(r/255f, g/255f, b/255f, a);
    }
}

Complete Examples

Notification System

public class NotificationHUD extends OverseerHUD.HUDElement {
    private List<Notification> notifications = new CopyOnWriteArrayList<>(); // use CopyOnWriteArrayList for concurrent list operations
    
    @Override
    protected void renderContent() {
        UI.container("notifications", new ContainerStyle()
            .rounded(4)
            .bg(ImColors.rgba(0, 0, 0, 0.7f)), () -> {
            
            UI.flex("column", () -> {
                UI.each(notifications, (notif, i) -> {
                    UI.flex("row", () -> {
                        ImGui.text(notif.getMessage());
                        UI.mx(8);
                        if (ImGui.button("Accept")) {
                            notif.accept();
                            notifications.remove(i);
                        }
                        UI.mx(4);
                        if (ImGui.button("Deny")) {
                            notif.deny();
                            notifications.remove(i);
                        }
                    });
                    UI.py(4);
                });
            });
        });
    }
}

Settings Menu

public class SettingsScreen extends OverseerScreen {
    @Override
    protected List<ImGuiWindow> initImGui() {
        return List.of(
            window("Settings")
                .theme(new ImGuiDarkTheme())
                .build(() -> {
                    UI.container("settings", new ContainerStyle()
                        .rounded(8)
                        .bg(ImColors.rgba(51, 51, 51, 0.9f)), () -> {
                        
                        UI.flex("column", () -> {
                            // Graphics settings
                            ImGui.text("Graphics");
                            UI.py(4);
                            UI.grid(2, () -> {
                                UI.gridCell(() -> ImGui.text("Resolution"));
                                UI.gridCell(() -> {
                                    if (ImGui.button("1920x1080")) {
                                        // Change resolution
                                    }
                                });
                            });
                            
                            UI.py(8);
                            
                            // Audio settings
                            ImGui.text("Audio");
                            UI.py(4);
                            UI.flex("row", () -> {
                                ImGui.text("Volume");
                                UI.mx(8);
                                // Volume slider
                                float[] volume = {UI.<Float>getState("volume", 1.0f)};
                                if (ImGui.sliderFloat("##volume", volume, 0, 1)) {
                                    UI.setState("volume", volume[0]);
                                }
                            });
                        });
                    });
                })
        );
    }
}

Best Practices

  1. Use meaningful container IDs
  2. Clean up resources when components are disposed
  3. Keep layouts simple and nested reasonably
  4. Use spacing utilities consistently
  5. Consider performance with large lists
  6. Use state management for shared data
  7. Group related UI elements in containers

Common Issues

Buttons Not Working

Make sure you're using unique IDs for buttons in loops. The UI.each() utility handles this automatically.

Layout Issues

  • Check that flex containers are properly closed
  • Verify padding and margin values
  • Ensure container sizes are appropriate

Performance

  • Avoid deep nesting of containers
  • Use UI.when() to conditionally render expensive content
  • Keep state updates minimal
⚠️ **GitHub.com Fallback** ⚠️