Getting Started

Your first LVGL programs.

These examples introduce the core workflow: creating a label, attaching a click callback to a button, applying styles, and reading a slider value through an event. Begin here if you have not written an LVGL program before. Once the patterns feel familiar, move on to Styles and Events for deeper coverage.

Button with click counter

Increment a label on a button each time it is clicked.

A button sized 120x50 is placed at position (10, 10) on the active screen with a centered label reading Button. The button subscribes to LV_EVENT_ALL and on LV_EVENT_CLICKED the callback updates its child label with lv_label_set_text_fmt to show an incrementing counter.

Hello world label

Paint the screen background and center a label on it.

The view sets its own style_bg_color to a dark teal and style_text_color to white. The label sets no color of its own — it inherits white from the view — and align="center" places it in the middle of the display.

Slider with live value

Mirror a slider's value into a label through a shared subject.

The slider writes its position to subject_value with bind_value, and the label reads the same subject with bind_text + bind_text-fmt="%d". Because both refer to one subject, dragging the slider updates the label with no event callback — the binding keeps the two in sync.

Styles from scratch for buttons

Build named button styles, then add a pressed state and an accent variant.

style_button is the shared base: a rounded vertical grey gradient with a thin translucent border. The first button adds style_button_pressed on the pressed selector so its gradient darkens while held. The second stacks style_button_red to repaint only the gradient and sets a local circular radius, showing how a small style plus one local property re-skins a button without redefining the base.