UI Shenanigans #2

Hello everyone!

I have implemented some UI elements into my application.

Before I delve into the features, I must first explain on how to run the code. All the code is available at https://github.com/lannisraurus/carbon-tools.

Compilation

First off, you will need to have installed g++, SDL2, SDL2_image and SDL2_ttf.

sudo apt install g++

sudo apt install libsdl2-dev

sudo apt install libsdl2-image-dev

sudo apt install libsdl2-ttf-dev

Then, you can either compile the program with the appropriate command, or use the makefile I provided:

Program Structure

The inner structure of the program looks like this as of now:

-> bin stores the application.

-> headers store the header files.

-> main stores the main.cpp.

-> src stores all the cpp files.

If we look inside bin:

-> The menus folder has all the menus (each menu is an application).

-> font.ttf (slkscr.ttf) is the font I'll be using for the program.

-> main.exe is the application (run ./main.exe inside the folder).

-> Makefile is used to compile (run make main.exe inside the folder).

-> settings.data stores base program settings (resolution, looks, etc...)

If we take a peek inside settings.data:

So far we have 2 settings - colours and screen dimensions.

Screen dimensions are self explanatory; colours, on the other hand, dictate how we highlight buttons and UI elements:

0: red

1: green

2: blue

3: magenta

4: yellow

5: cyan

6: rainbow (happy pride!)

Now let's take a look inside the menus folder:

This has a list of data files containing menu information. A menu is defined by an ID and a list of buttons (which will do stuff like travel between menus, be text input, etc).

Looking inside ui.data, the base menu that displays on start we see:

ID X defines the menu ID (negative numbers are reserved for utility, such as the settings menu).

So far I have implemented 3 types of buttons:

-> button: does nothing except glow upon mouse hover.

-> menu_button: warps between menus upon clicking.

-> text_display: glowy text with highlight colour.

All buttons are initialized like this:

buttonType WIDTH HEIGHT X Y TEXT_SIZE(0, 1 or 2) N_PARAMTERS <PARAMETERS> [NAME]

WIDTH, X -> [0,1] in relative screen width.

HEIGHT, Y -> [0,1] in relative screen height.

TEXT_SIZE -> how does the text fill the button.

N_PARAMETERS -> how many extra parameters will the button take (for utility buttons like menu buttons).

PARAMETERS -> list of parameters following (int).

[NAME] -> must be between [], the text displayed in the button.

Progress so far

Having said this, let's see how the application looks so far!

NOTE: compiling takes quite a while on the raspberry pi! Do not panic hehe.

I have decided to coin the name "Carbon Tools", because I thought the element 14 was Carbon (chemistry was a looong time ago...). It has now come to my attention that the element 14 is, indeed, Silicon (thank you genebren)! I am keeping the name carbon though :)

So far we have no application displaying on screen. Just 2 text displays and 1 menu button. clicking it warps us to menu -2, which will be used for the settings (the button on the top left changes, clicking it again goes back to the main menu):

Last message

That will be all for today! Cheers!