Creating a Basic GUI

Creating the display

In order to create widgets you must create a display. You can create a display by adding the following code

Blocking:

CUI::Display display = display(&Brain);

Non-Blocking:

CUI::Display display = display(&Brain, CUIDisplayFlags_NON_BLOCKING);

The first argument of the display is a pointer to your brain. The second argument is optional you can use it to set flags for the display. The display defaults to blocking unless you give it a non-blocking display flag. Make sure that the program does not exit while using a non-blocking display otherwise you can get corrupted memory

The display class is mainly used to add widgets and takes care of rendering

Adding a button

Initialize a button object

CUI::Button b = CUI::Button("Click Me", CUI::ButtonStyle{}, CUI::Rect(0, 0, 75, 75),[](){
    printf("Hi\n);
});

If you run the following code it will not work. After creating a widget you must add it to the display by adding the following code

display.addWidget(&b);

Make sure to initialize your display after adding the widget

display.init();

Run the program and you should see a button show up on the screen in the left corner

Adding Style to your button

If you want your button to be a different color than blue, a different thickness, or a different border color, ect... You will need to create a widget style as following and change the variables that you want. The ones you don't change will set to the default. Previously the button was initialized with the styles default constructor in the new code you will be able to change the style how you please

CUI::ButtonStyle redButtonStyle;
redButtonStyle.borderColor = red;

Now update the previous code and change the CUI::ButtonStyle{} to redButtonStyle

CUI::Button b = CUI::Button("Click Me", redButtonStyle, CUI::Rect(0, 0, 75, 75),[](){
    printf("Hi\n);
});

Run the program and you will have a button with a red border

Adding Text

Adding text is very simple to do all you need to do is create a textbox and add it to the display

CUI::TextBox helloWorld = CUI::TextBox("Hello World",CUI::Vec2(100,100));
display.addWidget(&helloWorld);

Run this and the text should appear on the screen at 100, 100

Making the text appear in the center of the screen

You could do this by dividing the brain width and height by 2 but Custom UI has a function to make it easier

CUI::normalCoords(0, 0);

This function returns normalized coordinates as a vec2 -1,-1 is the top left of the screen 0,0 is the middle and 1,1 is the bottom right. Update the textbox creation to the following

CUI::TextBox helloWorld = CUI::TextBox("Hello World",CUI::normalCoords(0,0));
display.addWidget(&helloWorld);

The textBox will show up in the middle of the screen