🖥️Adding UI

Adding UI

Now that you know the basics, let’s extend our script by allowing the user to toggle the text. We can do this by adding a control to the menu.

Creating a control

Let’s start by creating a simple checkbox:

local cb = gui.Checkbox('my_checkbox');

Each control has a unique ID, which the UI framework uses to distinguish controls within containers. It’s very important that your control’s ID doesn’t conflict with others, as that could result in a broken state or worse.

To create the ID, call gui.ControlID and pass the desired ID, or just pass a simple string instead.

Then, create the checkbox by calling gui.Checkbox and passing the ID you've chosen.

Constructing the row

By default, controls are typically placed in rows - layouts that stack elements in a specific manner. We provide a simple helper function - gui.MakeControl.

local row = gui.MakeControl('My checkbox', cb);

You may also create both the control and the checkbox, or any other menu element, at the same time using gui.MakeControlEasy !

local cb, row = gui.MakeControlEasy('my_checkbox', 'My checkbox', 'checkbox')

Adding the row to a group

With the control and row ready, let’s add them to a group.

To view group and control IDs, you can enable Debug mode in the SCRIPTS tab.

In this example, we'll use the lua>elements a group. First, locate that group in the global context:

local group = gui.ctx:Find('lua>elements a');

Then call its Add method to include your row:

group:Add(row);

That's it!

It is very important to call Reset() method if you add multiple controls, so the layout will stack everything correctly.

Using the value

Next, let’s modify our previous script so the text only appears if the checkbox is checked. Wrap your drawing code in an if statement before rendering the text:

if cb:GetValue():Get() then

and close it after.

The final script should look something like this:

local cb, row = gui.MakeControlEasy('my_checkbox', 'Checkbox', 'checkbox');
local group = gui.ctx:Find('lua>elements a');
group:Add(row);

local function onPresentQueue()
    if cb:GetValue():Get() then
        local d = draw.surface;
        d.font = draw.fonts['gui_main'];
        d:AddText(draw.Vec2(50, 50),
            'Hello drawing! My first script speaking.',
            draw.color.White()
        );
    end
end

events.presentQueue:Add(onPresentQueue);

And here's the result: