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.

Hello world label

Set the screen background color and place a centered label.

Sets the active screen's background color, creates a label with the text Hello world, sets the screen's text color to white, and centers the label on the screen.

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.

Styles from scratch for buttons

Build reusable button styles and apply them with a pressed-state override.

Three lv_style_t objects are initialized: a base grey gradient style with rounded corners and a thin border, a pressed style that applies a darken color filter at LV_OPA_20, and a red style that overrides only the background colors. Two buttons strip their theme styles with lv_obj_remove_style_all, adopt the base style for the default state and the pressed style for LV_STATE_PRESSED; the second also stacks the red style and sets a local LV_RADIUS_CIRCLE radius.

Slider with live value label

Mirror a slider's value into a label anchored above it.

A 200 px wide slider is centered on the active screen with a label placed 15 px above it via lv_obj_align_to and LV_ALIGN_OUT_TOP_MID. An LV_EVENT_VALUE_CHANGED callback reads lv_slider_get_value and rewrites the label text, re-aligning it after each update.