Hello Button¶
The simplest possible mGui program: one 240 × 240 screen with a single button.
When the button is pressed the click handler fires and you can respond to the event.
Screenshot¶
Full Example¶
#include "gui/inc/mgui_hal.h"
#include "gui/inc/mgui_interface.h"
#define SCREEN_WIDTH 240
#define SCREEN_HEIGHT 240
/* ── Event handler ──────────────────────────────────────────────── */
void button1_click(mgui_widget_t* obj, mgui_event_t event)
{
(void)obj;
if (event == MGUI_EVENT_CLICKED) {
/* Single tap – do something here */
}
}
/* ── Application entry point ────────────────────────────────────── */
int main(void)
{
/* 1. Initialise the library (width, height, buffer size, target FPS) */
mgui_init(SCREEN_WIDTH, SCREEN_HEIGHT, MGUI_BUFFER_SIZE_KB, 30);
/* 2. Create the screen (root widget, no parent) */
mgui_widget_t* screen1 = mgui_allocate_widget(
NULL,
MGUI_WIDGET_BOX,
(mgui_area_t){0, 0, SCREEN_WIDTH, SCREEN_HEIGHT},
MGUI_COLOR_DARK_GRAY
);
/* 3. Add a button on the screen */
mgui_widget_t* button1 = mgui_allocate_widget(
screen1,
MGUI_WIDGET_BUTTON,
(mgui_area_t){70, 100, 100, 40}, /* x, y, width, height */
MGUI_COLOR_DEFAULT
);
mgui_widget_button_text(button1, "Press Me");
mgui_widget_click_handler(button1, button1_click);
/* 4. Main loop */
while (1) {
mgui_task_execute();
delay_ms(33); /* ~30 fps */
}
return 0;
}
How It Works¶
| Step | What happens |
|---|---|
mgui_init() |
Allocates internal buffers, sets display dimensions and frame rate |
mgui_allocate_widget(NULL, …) |
NULL as parent creates a screen (root of the widget tree) |
mgui_allocate_widget(screen1, …) |
Attaches the button as a child of the screen |
mgui_widget_click_handler() |
Registers the callback fired on touch events |
mgui_task_execute() |
Processes pending input, runs dirty-region redraws, and flushes to the display |
Customising the Button¶
/* Change background colour */
mgui_widget_color_change(button1, MGUI_COLOR_ELEM_CYAN_BLUE);
/* Add a border */
mgui_widget_border_property(button1, MGUI_COLOR_WHITE, 2);
/* Round corners (radius, fill = false means border-only round) */
mgui_widget_radius_property(button1, 10, true);
/* Change text colour */
mgui_widget_button_text_color(button1, MGUI_COLOR_WHITE);