Creating a simple UI

In this guide, you will create a simple button-like UI element, draw text on it, and detect clicks using DirectGPU input events.

Requirements

Before starting, make sure you have:

• CC:Tweaked (preferably newest!) installed
• DirectGPU (preferably newest!) installed
• A computer with a DirectGPU peripheral attached
• A display connected to your DirectGPU device

Finding the GPU

First, get the DirectGPU peripheral:

local gpu = peripheral.find("directgpu")

Create a display using autoDetectAndCreateDisplay:

local displayId = gpu.autoDetectAndCreateDisplay()

Now the display can be drawn to.

Drawing a button

DirectGPU uses a framebuffer system, meaning drawing functions modify the framebuffer first. You must call updateDisplay afterwards to send the result to the display.

First, clear the screen:

gpu.clear(displayId, 20, 20, 20)

Now create a simple button using drawRoundedRect:

gpu.drawRoundedRect(
    displayId,
    20,
    20,
    120,
    40,
    8,
    50,
    120,
    255,
    true
)

Then draw text on top of it using drawText:

gpu.drawText(
    displayId,
    "Click me!",
    45,
    32,
    255,
    255,
    255,
    "Arial",
    16,
    "bold"
)

Finally, update the display:

gpu.updateDisplay(displayId)

Your display should now show a button.

Detecting clicks

DirectGPU stores input events in a queue. You can check for events using hasEvents.

Example:

while true do
    if gpu.hasEvents(displayId) then
        local event = gpu.pollEvent(displayId)

        if event.type == "click" then
            print(
                "Clicked at:",
                event.x,
                event.y
            )
        end
    end

    sleep(0.05)
end

Checking if the button was clicked

Since the button exists between x = 20-140 and y = 20-60, you can check whether the click happened inside that area.

while true do
    if gpu.hasEvents(displayId) then
        local event = gpu.pollEvent(displayId)

        if event.type == "click" then
            if event.x >= 20
            and event.x <= 140
            and event.y >= 20
            and event.y <= 60 then

                print("Button clicked!")
            end
        end
    end

    sleep(0.05)
end

You now have a working DirectGPU UI element with rendering and input handling.