Vertex Docs

UI Widget System

Description: The UI Widget system provides a flexible and extensible framework for building graphical user interfaces inside games and applications. It includes base components, styling support, interaction handling, and layout-friendly design.

---

Style

Description: Defines visual styling for widgets including colors, fonts, borders, and padding.

Example: Usage

style = Style(
    bg_color=(40,40,40),
    hover_color=(60,60,60),
    pressed_color=(20,20,20)
)

Common Parameters

• bg_color (tuple): Background color
• hover_color (tuple): Color when hovered
• pressed_color (tuple): Color when pressed
• border_color (tuple): Border color
• text_color (tuple): Text color
• border_width (int): Border thickness
• padding (int): Inner spacing
• font_size (int): Font size

Returns

A style configuration object used by widgets for rendering.

---

Widget

Description: Base class for all UI elements providing positioning, visibility, and interaction state.

Example: Usage

class CustomWidget(Widget):
    def draw(self, surface):
        pygame.draw.rect(surface, (255,0,0), self.rect)

Responsibilities

• Stores widget position and size
• Tracks hover and active states
• Handles visibility and enabled state
• Provides base event handling

Common Parameters

• x (int): X position
• y (int): Y position
• width (int): Width
• height (int): Height
• style (Style): Visual styling
• visible (bool): Visibility flag
• enabled (bool): Interaction flag

Returns

A base widget object ready to be extended.

---

Button

Description: Interactive clickable widget supporting hover, press, toggle state, and callbacks.

Example: Usage

def on_click():
    print("Clicked!")

btn = Button("Play", 300, 200, on_click=on_click)

Responsibilities

• Handles mouse hover detection
• Triggers callback on click
• Supports toggle mode
• Renders styled button with text

Common Parameters

• text (str): Button label
• x, y (int): Position
• width, height (int): Size
• on_click (callable): Function called on click
• style (Style): Visual style

Returns

A fully interactive button widget.

Notes

• Supports toggle state tracking
• Automatically handles hover and press states
• Can be disabled via enabled=False

---

Slider

Description: Horizontal slider widget allowing users to select a numeric value within a range.

Example: Usage

def on_change(val):
    print(val)

slider = Slider(250, 300, min_val=0, max_val=100, on_change=on_change)

Responsibilities

• Handles dragging input
• Updates value dynamically
• Triggers change callback
• Displays draggable knob

Common Parameters

• x, y (int): Position
• width (int): Slider width
• min_val (float): Minimum value
• max_val (float): Maximum value
• start_val (float): Initial value
• style (Style): Visual style
• on_change (callable): Change callback

Returns

A slider widget with draggable control.

---

Card

Description:It's a drawable card widget that houses other widgets

from VertexEngine import GameEngine, Scene
from VertexEngine.VertexWidgets.PygameVWidgets import *
from VertexEngine.Vertex import App

class Main(Scene):
    def __init__(self, engine):
        super().__init__(engine)
        self.ui = UIManager()
        self.styleBase = Style(bg_color=(255, 0, 0), pressed_color=(125,0,0))
        self.button = Button(100, 75, 200, 50, "Example", lambda: self.respond(), self.styleBase)

        # TIP: val is the DATA collected from the position of the slider handle based on how far it is to the right.
        # You don't need to define val, you can name it anything, but val is reccomended
        self.slider = Slider(200, 50, 400, 20, 0, 100, 50, lambda val: self.printIt(val))
        self.card = Card(200, 200, 400, 300)
        self.card.add_child(self.button)
        self.ui.add(self.card)
        self.ui.add(self.slider)

    def printIt(self, val):
        # print an INTEGER format of value
        print(int(val))

    def respond(self):
        print("respond")

    def draw(self, surface):
        self.ui.draw(surface)

    def update(self):
        self.ui.update()

    def handle_event(self, event):
        self.ui.handle_event(event)

if __name__ == "__main__":
    app = App()
    engine = GameEngine(color=(0,0,0))
    engine.setWindowTitle("Example")
    engine.show()

    engine.scene_manager.set_scene(Main(engine))
    app.run()

UIManager

Description: Central manager responsible for updating, drawing, and dispatching events to all widgets.

Example: Usage

self.ui = UIManager()
self.ui.add(self.button)
self.ui.add(self.slider)

Responsibilities

• Stores widget collection
• Dispatches events to widgets
• Updates widget logic
• Handles rendering order

Common Methods

• add(widget): Add widget
• remove(widget): Remove widget
• handle_event(event): Send input events
• update(): Update widgets
• draw(surface): Render widgets

Returns

A manager instance controlling all UI components.

---