docs(examples): introduce summary and description to examples (#9968)

Co-authored-by: Gabor Kiss-Vamosi <kisvegabor@gmail.com>

examples/about.md

@@ -0,0 +1,6 @@
+---
+title: "Examples"
+description: "Working LVGL examples. Compile, adapt, learn."
+---
+
+This section collects runnable LVGL examples organized by topic. Each page shows a focused snippet you can copy into a project, compile, and modify. Use the sidebar to jump between categories, starting with Getting Started if you are new to the library.

examples/anim/about.md

@@ -0,0 +1,7 @@
+---
+title: "Animations"
+description: "Animate widget properties over time with lv_anim."
+order: 40
+---
+
+An `lv_anim_t` describes a value interpolated between a start and end over a duration, with an optional easing path and completion callback. Animations tick on display refresh, so their smoothness tracks the refresh rate. You can chain animations, run them in parallel, and reuse a single `lv_anim_t` descriptor to drive any numeric property through a setter.

examples/anim/lv_example_anim_2.c

@@ -12,7 +12,15 @@ static void anim_size_cb(void * var, int32_t v)
 }
 
 /**
- * Create a playback animation
+ * @title Infinite playback animation
+ * @brief Grow a red circle while sliding it right, then reverse and repeat.
+ *
+ * A red circular object sits on the left edge of the active screen. One
+ * `lv_anim_t` drives `lv_obj_set_size` from 10 to 50 over 1000 ms; the same
+ * configured animation is then reused with `lv_obj_set_x` running from 10
+ * to 240. Both run with `lv_anim_path_ease_in_out`, a 300 ms reverse stage
+ * after a 100 ms reverse delay, a 500 ms gap between cycles, and
+ * `LV_ANIM_REPEAT_INFINITE`.
  */
 void lv_example_anim_2(void)
 {

examples/anim/lv_example_anim_3.c

@@ -1,13 +1,6 @@
 #include "../lv_examples.h"
 #if LV_BUILD_EXAMPLES && LV_USE_SLIDER && LV_USE_CHART && LV_USE_BUTTON && LV_USE_GRID
 
-/**
- * the example show the use of cubic-bezier3 in animation.
- * the control point P1,P2 of cubic-bezier3 can be adjusted by slider.
- * and the chart shows the cubic-bezier3 in real time. you can click
- * run button see animation in current point of cubic-bezier3.
- */
-
 #define CHART_POINTS_NUM 256
 
 struct {
@@ -32,7 +25,17 @@ static void page_obj_init(lv_obj_t * par);
 static void anim_x_cb(void * var, int32_t v);
 
 /**
- * create an animation
+ * @title Cubic-bezier animation editor
+ * @brief Edit a cubic-bezier path with two sliders while a chart plots it live.
+ *
+ * A 320x240 grid container holds an animated red square, two sliders that
+ * set the p1 and p2 control points of `lv_bezier3` (both ranged 0 to 1024),
+ * value labels, a play button with `LV_SYMBOL_PLAY`, and a scatter
+ * `lv_chart_t` that plots the current curve across 256 points. Slider
+ * `LV_EVENT_VALUE_CHANGED` callbacks update the stored control points and
+ * refresh the chart; clicking the play button calls `lv_anim_start` to run
+ * the square across the container using the custom bezier path callback
+ * over 2000 ms.
  */
 void lv_example_anim_3(void)
 {

examples/anim/lv_example_anim_4.c

@@ -43,7 +43,15 @@ static void sw_event_cb(lv_event_t * e)
 }
 
 /**
- * Start animation on an event
+ * @title Pause a running animation
+ * @brief Pause a label slide for one second shortly after it starts.
+ *
+ * A label and a pre-checked switch are placed on the active screen. When
+ * the switch's `LV_EVENT_VALUE_CHANGED` fires, an `lv_anim_t` slides the
+ * label to x=100 with `lv_anim_path_overshoot` on check or to `-width`
+ * with `lv_anim_path_ease_in` on uncheck, each 500 ms long. After starting
+ * the animation a 200 ms `lv_timer_t` calls `lv_anim_pause_for` to hold
+ * it for 1000 ms before it resumes.
  */
 void lv_example_anim_4(void)
 {

examples/anim/lv_example_anim_timeline_1.c

@@ -44,7 +44,18 @@ static void slider_prg_event_handler(lv_event_t * e)
 }
 
 /**
- * Create an animation timeline
+ * @title Animation timeline with transport controls
+ * @brief Drive staggered grow animations through a timeline the user can pause or scrub.
+ *
+ * Three 90x70 objects are laid out in a flex row with a checkable Start
+ * button, a Pause button, and a progress slider ranged to
+ * `LV_ANIM_TIMELINE_PROGRESS_MAX`. An `lv_anim_timeline_t` schedules width
+ * and height animations for each object (`lv_anim_path_overshoot` for width
+ * and `lv_anim_path_ease_out` for height, each 300 ms) starting at offsets
+ * 0, 200, and 400 ms, plus a linear 700 ms animation that sweeps the
+ * slider. The Start button toggles forward and reverse playback via
+ * `lv_anim_timeline_set_reverse`, Pause calls `lv_anim_timeline_pause`, and
+ * dragging the slider calls `lv_anim_timeline_set_progress`.
  */
 void lv_example_anim_timeline_1(void)
 {

examples/event/about.md

@@ -0,0 +1,7 @@
+---
+title: "Events"
+description: "Widget events and user input handling."
+order: 50
+---
+
+Widgets emit events such as `LV_EVENT_CLICKED`, `LV_EVENT_VALUE_CHANGED`, `LV_EVENT_DRAW_MAIN`, and `LV_EVENT_KEY`. You register a callback with `lv_obj_add_event_cb()` and receive an `lv_event_t` pointer from which you read the code, target, and user data. The examples cover basic wiring, bubbling, custom event codes, and reading input device state inside a handler.

examples/event/lv_example_event_bubble.c

@@ -17,7 +17,14 @@ static void event_cb(lv_event_t * e)
 }
 
 /**
- * Demonstrate event bubbling
+ * @title Event bubbling to a parent
+ * @brief Handle clicks on child buttons from a single container callback.
+ *
+ * A 290x200 container uses `LV_FLEX_FLOW_ROW_WRAP` and holds 30 small
+ * buttons, each flagged with `LV_OBJ_FLAG_EVENT_BUBBLE`. One
+ * `LV_EVENT_CLICKED` callback on the container reads
+ * `lv_event_get_target_obj` to identify which button was clicked and paints
+ * its background red; clicks on the container itself are ignored.
  */
 void lv_example_event_bubble(void)
 {

examples/event/lv_example_event_button.c

@@ -25,7 +25,14 @@ static void event_cb(lv_event_t * e)
 }
 
 /**
- * Handle multiple events
+ * @title Handle multiple button events
+ * @brief Report the most recent button event on a second label.
+ *
+ * A centered button with a `Click me!` label is paired with an info label
+ * on the active screen. A single callback subscribed with `LV_EVENT_ALL`
+ * switches on `lv_event_get_code` and writes the name of the latest event
+ * (`LV_EVENT_PRESSED`, `LV_EVENT_CLICKED`, `LV_EVENT_LONG_PRESSED`,
+ * `LV_EVENT_LONG_PRESSED_REPEAT`) into the info label.
  */
 void lv_example_event_button(void)
 {

examples/event/lv_example_event_draw.c

@@ -45,7 +45,15 @@ static void event_cb(lv_event_t * e)
 }
 
 /**
- * Demonstrate the usage of draw event
+ * @title Custom drawing on draw task events
+ * @brief Draw a pulsing red circle on top of a container with a draw task callback.
+ *
+ * A 200x200 container is centered and flagged with
+ * `LV_OBJ_FLAG_SEND_DRAW_TASK_EVENTS`. An `LV_EVENT_DRAW_TASK_ADDED`
+ * callback inspects the draw task and, when `base_dsc->part` is
+ * `LV_PART_MAIN`, calls `lv_draw_rect` to paint a pink circle with a red
+ * border and outline. A 30 ms `lv_timer_t` bounces a `size` counter between
+ * 0 and 50 and invalidates the container each tick to animate the circle.
  */
 void lv_example_event_draw(void)
 {

examples/event/lv_example_event_streak.c

@@ -27,8 +27,6 @@ static void streak_event_cb(lv_event_t * e)
  * reads `lv_indev_get_short_click_streak()` and writes the count to a
  * separate label; `LV_EVENT_SINGLE_CLICKED`, `LV_EVENT_DOUBLE_CLICKED`, and
  * `LV_EVENT_TRIPLE_CLICKED` each set the button's label to a matching string.
- *
- * @hide_in_docs
  */
 void lv_example_event_streak(void)
 {

examples/event/lv_example_event_trickle.c

@@ -2,7 +2,15 @@
 #if LV_BUILD_EXAMPLES && LV_USE_FLEX
 
 /**
- * Demonstrate event trickle
+ * @title Event trickle to children
+ * @brief Forward pressed state from a flex container down to its children.
+ *
+ * A 290x200 container with `LV_FLEX_FLOW_ROW_WRAP` holds nine small
+ * sub-containers, each with a numbered label. The container is flagged with
+ * `LV_OBJ_FLAG_EVENT_TRICKLE` so its input events reach the children; a
+ * single white-on-black style is added to the container for
+ * `LV_STATE_PRESSED` and to each sub-container for `LV_STATE_FOCUSED`, so
+ * pressing the container flips the whole group to the dark style.
  */
 void lv_example_event_trickle(void)
 {

examples/get_started/about.md

@@ -0,0 +1,7 @@
+---
+title: "Getting Started"
+description: "Your first LVGL programs."
+order: 10
+---
+
+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.

examples/get_started/lv_example_get_started_2.c

@@ -16,7 +16,13 @@ static void btn_event_cb(lv_event_t * e)
 }
 
 /**
- * Create a button with a label and react on click event.
+ * @title Button with click counter
+ * @brief 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.
  */
 void lv_example_get_started_2(void)
 {

examples/get_started/lv_example_get_started_3.c

@@ -42,7 +42,16 @@ static void style_init(void)
 }
 
 /**
- * Create styles from scratch for buttons.
+ * @title Styles from scratch for buttons
+ * @brief 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.
  */
 void lv_example_get_started_3(void)
 {

examples/get_started/lv_example_get_started_4.c

@@ -13,7 +13,13 @@ static void slider_event_cb(lv_event_t * e)
 }
 
 /**
- * Create a slider and write its value on a label.
+ * @title Slider with live value label
+ * @brief 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.
  */
 void lv_example_get_started_4(void)
 {

examples/grad/about.md

@@ -0,0 +1,7 @@
+---
+title: "Gradients"
+description: "Linear, radial, and conic gradient fills."
+order: 30
+---
+
+LVGL supports linear, radial, and conic gradients as background fills. Each type accepts color stops and geometric parameters (direction, center, radius) and can be applied through the style system wherever a background color is valid. The examples here show each gradient flavor on typical widgets.

examples/grad/lv_example_grad_1.c

@@ -60,8 +60,17 @@ static void frac_2_event_cb(lv_event_t * e)
 }
 
 /**
- * Play with a simple horizontal gradient.
- * Adjust the stop positions of the gradient.
+ * @title Horizontal gradient with draggable stops
+ * @brief Drag two bullets to move the stop fractions of a red-to-green horizontal gradient.
+ *
+ * A centered 80% by 80% object carries a two-stop horizontal gradient
+ * (red at 20%, transparent green at 80%) built with `lv_grad_init_stops`
+ * and `lv_grad_horizontal_init` and applied through
+ * `lv_style_set_bg_grad`. Two small buttons sitting on top act as handles;
+ * their `LV_EVENT_PRESSING` callbacks read the pointer with
+ * `lv_indev_get_point`, reposition the handle, and write the resulting
+ * x fraction into `dsc->stops[0].frac` or `dsc->stops[1].frac` before
+ * invalidating the parent.
  */
 void lv_example_grad_1(void)
 {

examples/grad/lv_example_grad_2.c

@@ -54,8 +54,19 @@ static void end_event_cb(lv_event_t * e)
 }
 
 /**
- * Play with the linear gradient.
- * Adjust the 2 point in between the a linear gradient can be drawn (can be skew as well)
+ * @title Linear gradient with draggable endpoints
+ * @brief Drag two bullets to reposition the start and end points of a skewable linear gradient.
+ *
+ * A centered 80% by 80% object carries a two-stop linear gradient
+ * (red at the start, transparent green at the end) built with
+ * `lv_grad_init_stops` and `lv_grad_linear_init` from (100, 100) to
+ * (200, 150) using `LV_GRAD_EXTEND_PAD`. Two small buttons mark the
+ * endpoints; their `LV_EVENT_PRESSING` callbacks read the pointer with
+ * `lv_indev_get_point`, reposition the handle, and write
+ * `dsc->params.linear.start` or `dsc->params.linear.end` before
+ * invalidating the parent. When `LV_USE_DRAW_SW_COMPLEX_GRADIENTS` is
+ * disabled, the example instead shows a single label noting the
+ * dependency.
  */
 void lv_example_grad_2(void)
 {

examples/grad/lv_example_grad_3.c

@@ -59,9 +59,19 @@ static void end_event_cb(lv_event_t * e)
 }
 
 /**
- * Play with the radial gradient
- * Adjust the end circle and focal point position.
- * The radius of the end circle and an focal point are hardcoded in the example.
+ * @title Radial gradient with draggable centers
+ * @brief Drag two bullets to move the focal point and the end circle of a radial gradient.
+ *
+ * A centered 80% by 80% object carries a two-stop radial gradient built
+ * with `lv_grad_init_stops`, `lv_grad_radial_init` (end circle centered at
+ * 100, 100 with edge at 200, 100), and `lv_grad_radial_set_focal` at
+ * (50, 50). Two small buttons mark the focal point and the end circle
+ * center; their `LV_EVENT_PRESSING` callbacks read the pointer and write
+ * `dsc->params.radial.focal` (with `focal_extent` offset by 10) or
+ * `dsc->params.radial.end` (with `end_extent` offset by 100) before
+ * invalidating the parent. When `LV_USE_DRAW_SW_COMPLEX_GRADIENTS` is
+ * disabled, the example instead shows a single label noting the
+ * dependency.
  */
 void lv_example_grad_3(void)
 {

examples/grad/lv_example_grad_4.c

@@ -58,7 +58,18 @@ static void end_event_cb(lv_event_t * e)
 }
 
 /**
- * Play with the conical gradient
+ * @title Conical gradient with draggable angles
+ * @brief Drag two bullets to set the start and end angles of a conical gradient.
+ *
+ * A centered 80% by 80% object carries a two-stop conical gradient built
+ * with `lv_grad_init_stops` and `lv_grad_conical_init` centered at 50% by
+ * 50% sweeping from 0 to 180 degrees with `LV_GRAD_EXTEND_PAD`. Two small
+ * buttons act as angle handles; their `LV_EVENT_PRESSING` callbacks read
+ * the pointer, reposition the handle, and recompute
+ * `dsc->params.conical.start_angle` or `dsc->params.conical.end_angle`
+ * with `lv_atan2` relative to the parent center before invalidating it.
+ * When `LV_USE_DRAW_SW_COMPLEX_GRADIENTS` is disabled, the example
+ * instead shows a single label noting the dependency.
  */
 void lv_example_grad_4(void)
 {

examples/layouts/about.md

@@ -0,0 +1,7 @@
+---
+title: "Layouts"
+description: "Automatic positioning with Flex and Grid."
+order: 60
+---
+
+LVGL ships two automatic layout engines. Flex arranges children along a single axis (row or column), similar to CSS Flexbox, and is the fastest way to stack or space items. Grid places children into rows and columns of configurable size, comparable to CSS Grid, and suits dashboards or form-like screens where content aligns in both dimensions. Reach for Flex when one axis is enough; switch to Grid when cells need to line up across rows and columns.

examples/layouts/flex/about.md

@@ -0,0 +1,6 @@
+---
+title: "Flex"
+order: 5
+---
+
+A 1D layout that arranges children in a row or column, analogous to CSS Flexbox. Useful for toolbars, lists, and any stack where one axis drives placement.

examples/layouts/flex/lv_example_flex_2.c

@@ -2,7 +2,14 @@
 #if LV_USE_FLEX && LV_BUILD_EXAMPLES
 
 /**
- * Arrange items in rows with wrap and place the items to get even space around them.
+ * @title Row wrap with even spacing
+ * @brief A 300x220 container lays out eight checkable tiles in wrapping rows with even spacing.
+ *
+ * A reusable `lv_style_t` sets `LV_LAYOUT_FLEX`, `LV_FLEX_FLOW_ROW_WRAP`, and
+ * `LV_FLEX_ALIGN_SPACE_EVENLY` on the main axis. The style is applied to a
+ * centered container holding eight 70 px-wide tiles with `LV_SIZE_CONTENT`
+ * height. Each tile carries `LV_OBJ_FLAG_CHECKABLE` so it toggles between
+ * default and `LV_STATE_CHECKED` when clicked.
  */
 void lv_example_flex_2(void)
 {

examples/layouts/flex/lv_example_flex_3.c

@@ -2,7 +2,14 @@
 #if LV_USE_FLEX && LV_BUILD_EXAMPLES
 
 /**
- * Demonstrate flex grow.
+ * @title Flex grow between fixed items
+ * @brief Distribute leftover row space between two grow items bracketed by fixed-size items.
+ *
+ * A 300x220 row container holds four children. The first and last are fixed
+ * 40x40 squares. The two middle children have a fixed height of 40 and take
+ * `lv_obj_set_flex_grow` weights of 1 and 2, splitting the remaining
+ * horizontal space in that proportion while the trailing fixed item is pushed
+ * against the right edge.
  */
 void lv_example_flex_3(void)
 {

examples/layouts/flex/lv_example_flex_4.c

@@ -2,7 +2,13 @@
 #if LV_USE_FLEX && LV_BUILD_EXAMPLES
 
 /**
- * Reverse the order of flex items
+ * @title Reversed column flex order
+ * @brief Stack six items bottom-up inside a centered container.
+ *
+ * A 300x220 container uses `LV_FLEX_FLOW_COLUMN_REVERSE`, so items added later
+ * in the loop appear higher on screen. Six 100x50 children numbered 0 through
+ * 5 are added in ascending order but rendered in reverse, with "Item: 0"
+ * sitting at the bottom of the container.
  */
 void lv_example_flex_4(void)
 {

examples/layouts/flex/lv_example_flex_5.c

@@ -12,7 +12,14 @@ static void column_gap_anim(void * obj, int32_t v)
 }
 
 /**
- * Demonstrate the effect of column and row gap style properties
+ * @title Animated row and column gaps
+ * @brief Drive row and column padding of a wrap container with two looping animations.
+ *
+ * A 300x220 container uses `LV_FLEX_FLOW_ROW_WRAP` to arrange nine 70 px
+ * tiles. Two `lv_anim_t` instances animate `pad_row` and `pad_column`
+ * between 0 and 10 with `LV_ANIM_REPEAT_INFINITE`: the row gap cycles every
+ * 500 ms in each direction while the column gap cycles every 3000 ms, so the
+ * tile spacing shifts on two independent time scales.
  */
 void lv_example_flex_5(void)
 {

examples/layouts/flex/lv_example_flex_6.c

@@ -2,8 +2,14 @@
 #if LV_USE_FLEX && LV_BUILD_EXAMPLES
 
 /**
- * RTL base direction changes order of the items.
- * Also demonstrate how horizontal scrolling works with RTL.
+ * @title RTL flex wrap and scrolling
+ * @brief Lay out twenty tiles in a right-to-left wrapping flex container.
+ *
+ * A 300x220 container has `LV_BASE_DIR_RTL` set on its main part, then
+ * switches to `LV_FLEX_FLOW_ROW_WRAP`. Twenty 70 px tiles are placed in
+ * ascending order; the RTL base direction flips the main axis so item 0 sits
+ * at the top-right and rows fill leftward, and horizontal scrolling follows
+ * the same reversed direction.
  */
 void lv_example_flex_6(void)
 {

examples/layouts/grid/about.md

@@ -0,0 +1,6 @@
+---
+title: "Grid"
+order: 10
+---
+
+A 2D cell-based layout that places children into explicit rows and columns, analogous to CSS Grid. Use it when content must align across both axes, such as dashboards or forms.

examples/layouts/grid/lv_example_grid_1.c

@@ -2,7 +2,14 @@
 #if LV_USE_GRID && LV_BUILD_EXAMPLES
 
 /**
- * A simple grid
+ * @title Fixed-pixel 3x3 grid
+ * @brief Fill a 3x3 grid of fixed-size cells with stretched buttons.
+ *
+ * A 300x220 container is given three 70 px columns and three 50 px rows via
+ * `lv_obj_set_style_grid_column_dsc_array` and
+ * `lv_obj_set_style_grid_row_dsc_array`, then switched to `LV_LAYOUT_GRID`.
+ * Nine buttons are placed one per cell with `LV_GRID_ALIGN_STRETCH` on both
+ * axes so each button fills its cell and carries a `cX, rY` label.
  */
 void lv_example_grid_1(void)
 {

examples/layouts/grid/lv_example_grid_2.c

@@ -2,7 +2,14 @@
 #if LV_USE_GRID && LV_BUILD_EXAMPLES
 
 /**
- * Demonstrate cell placement and span
+ * @title Cell alignment and spans
+ * @brief Mix per-cell alignments with two-cell spans inside a 3x3 grid.
+ *
+ * A 300x220 container uses three 70 px columns and three 50 px rows. Five
+ * `LV_SIZE_CONTENT` children are placed via `lv_obj_set_grid_cell`: the top
+ * row mixes `LV_GRID_ALIGN_START`, `LV_GRID_ALIGN_CENTER`, and
+ * `LV_GRID_ALIGN_END` alignments, a child at column 1 spans two columns with
+ * `LV_GRID_ALIGN_STRETCH`, and a child at row 1 spans two rows the same way.
  */
 void lv_example_grid_2(void)
 {

examples/layouts/grid/lv_example_grid_4.c

@@ -2,7 +2,14 @@
 #if LV_USE_GRID && LV_BUILD_EXAMPLES
 
 /**
- * Demonstrate track placement
+ * @title Track placement in extra space
+ * @brief Place nine grid cells with space-between columns and bottom-aligned rows.
+ *
+ * A 300x220 container defines three 60 px columns and three 45 px rows that
+ * do not fill the full size. `lv_obj_set_grid_align` is called with
+ * `LV_GRID_ALIGN_SPACE_BETWEEN` for columns and `LV_GRID_ALIGN_END` for rows,
+ * so leftover horizontal space is distributed between the three columns and
+ * the rows collapse against the bottom of the container.
  */
 void lv_example_grid_4(void)
 {

examples/layouts/grid/lv_example_grid_5.c

@@ -12,7 +12,14 @@ static void column_gap_anim(void * obj, int32_t v)
 }
 
 /**
- * Demonstrate column and row gap
+ * @title Animated grid row and column gaps
+ * @brief Animate `pad_row` and `pad_column` of a 3x3 grid on two timescales.
+ *
+ * A 300x220 container uses three 60 px columns and three 45 px rows, with
+ * nine stretched children labeled by cell coordinates. Two `lv_anim_t`
+ * instances loop `pad_row` and `pad_column` between 0 and 10 with
+ * `LV_ANIM_REPEAT_INFINITE`: row gap takes 500 ms per direction while column
+ * gap takes 3000 ms, so the grid breathes on two independent cycles.
  */
 void lv_example_grid_5(void)
 {

examples/layouts/grid/lv_example_grid_6.c

@@ -2,7 +2,14 @@
 #if LV_USE_GRID && LV_BUILD_EXAMPLES
 
 /**
- * Demonstrate RTL direction on grid
+ * @title RTL grid column order
+ * @brief Populate a 3x3 grid under right-to-left base direction.
+ *
+ * A 300x220 container has `LV_BASE_DIR_RTL` applied before its column and
+ * row descriptors (three 60 px and three 45 px tracks). Nine stretched
+ * children are placed into columns 0, 1, 2 in loop order, but the RTL base
+ * direction maps column 0 to the rightmost track, so the cells read
+ * right-to-left.
  */
 void lv_example_grid_6(void)
 {

examples/libs/about.md

@@ -0,0 +1,7 @@
+---
+title: "3rd-Party Libraries"
+description: "Integrations with image, font, video, and graphics libraries."
+order: 90
+---
+
+LVGL decodes a range of image, font, and video formats when the matching library is enabled in `lv_conf.h` (for example PNG, JPG, GIF, BMP, FreeType, and FFmpeg). Each integration has its own page covering how to enable it, expected dependencies, and a usage example. Pick the libraries you need and leave the rest disabled to keep the build small.

examples/libs/barcode/about.md

@@ -0,0 +1,6 @@
+---
+title: "Barcode"
+order: 80
+---
+
+Generates 1D barcodes as LVGL canvas images using code128. Enable with `LV_USE_BARCODE` in `lv_conf.h`.

examples/libs/barcode/lv_example_barcode_1.c

@@ -2,7 +2,14 @@
 #if LV_USE_BARCODE && LV_BUILD_EXAMPLES
 
 /**
- * Create a Barcode
+ * @title Barcode with palette colors
+ * @brief Render a barcode encoding an LVGL URL with custom dark and light colors.
+ *
+ * A barcode widget is centered on the active screen with its height set to 50 px.
+ * `lv_barcode_set_dark_color` and `lv_barcode_set_light_color` use darkened and
+ * lightened entries from `LV_PALETTE_BLUE` and `LV_PALETTE_LIGHT_BLUE` for the
+ * bars and background, a matching border color is applied, and
+ * `lv_barcode_update` encodes `https://lvgl.io`.
  */
 void lv_example_barcode_1(void)
 {

examples/libs/bmp/about.md

@@ -0,0 +1,6 @@
+---
+title: "BMP"
+order: 25
+---
+
+BMP image decoder integration. Enable with `LV_USE_BMP` in `lv_conf.h`.

examples/libs/bmp/lv_example_bmp_1.c

@@ -2,7 +2,13 @@
 #if LV_USE_BMP && LV_BUILD_EXAMPLES
 
 /**
- * Open a BMP file from a file
+ * @title Decode BMP from filesystem
+ * @brief Load a 32-bit BMP file through the LVGL filesystem and center it on the screen.
+ *
+ * An image widget is created on the active screen and its source is set to
+ * `A:lvgl/examples/libs/bmp/example_32bit.bmp` so the BMP decoder reads the
+ * file through an attached filesystem driver registered under drive letter
+ * `A`, such as `LV_USE_FS_STDIO`.
  */
 void lv_example_bmp_1(void)
 {

examples/libs/ffmpeg/about.md

@@ -0,0 +1,6 @@
+---
+title: "FFmpeg"
+order: 60
+---
+
+Decodes video streams and a wide range of image formats via FFmpeg. Enable with `LV_USE_FFMPEG` in `lv_conf.h`.

examples/libs/ffmpeg/lv_example_ffmpeg_1.c

@@ -3,7 +3,14 @@
 #if LV_USE_FFMPEG && LV_FFMPEG_PLAYER_USE_LV_FS
 
 /**
- * Open an image from a file
+ * @title Decode image with FFmpeg
+ * @brief Open a PNG through the FFmpeg integration and center it on the screen.
+ *
+ * An image widget is created on the active screen and its source is set to
+ * `A:lvgl/examples/libs/ffmpeg/ffmpeg.png`. The FFmpeg image path always
+ * routes through the LVGL filesystem abstraction regardless of
+ * `LV_FFMPEG_PLAYER_USE_LV_FS`, so the file is read via the driver registered
+ * under drive letter `A`.
  */
 void lv_example_ffmpeg_1(void)
 {

examples/libs/ffmpeg/lv_example_ffmpeg_2.c

@@ -9,7 +9,14 @@
 #endif
 
 /**
- * Open a video from a file
+ * @title Play MP4 video with FFmpeg
+ * @brief Play an MP4 clip on loop through the FFmpeg player widget.
+ *
+ * An `lv_ffmpeg_player` is centered on the active screen and pointed at
+ * `birds.mp4`. The decoder is requested as `h264_v4l2m2m` (with software
+ * fallback when V4L2 is unavailable), auto-restart is enabled, and
+ * `LV_FFMPEG_PLAYER_CMD_START` begins playback. The source path uses an
+ * `A:` prefix when `LV_FFMPEG_PLAYER_USE_LV_FS` is set, otherwise `./`.
  */
 void lv_example_ffmpeg_2(void)
 {

examples/libs/freetype/about.md

@@ -0,0 +1,6 @@
+---
+title: "FreeType"
+order: 30
+---
+
+Rasterizes TrueType and OpenType fonts at runtime for LVGL text rendering. Enable with `LV_USE_FREETYPE` in `lv_conf.h`.

examples/libs/freetype/lv_example_freetype_1.c

@@ -9,7 +9,15 @@
 #endif
 
 /**
- * Load a font with FreeType
+ * @title FreeType bitmap font
+ * @brief Render a label with a 24 px bitmap TTF loaded via FreeType.
+ *
+ * `lv_freetype_font_create` loads `Lato-Regular.ttf` in
+ * `LV_FREETYPE_FONT_RENDER_MODE_BITMAP` at 24 px with
+ * `LV_FREETYPE_FONT_STYLE_NORMAL`. A style binds the font and centers text,
+ * then a label carrying a two-line greeting is placed at the center of the
+ * active screen. The path prefix resolves to `A:` when
+ * `LV_FREETYPE_USE_LVGL_PORT` is enabled and `./` otherwise.
  */
 void lv_example_freetype_1(void)
 {

examples/libs/freetype/lv_example_freetype_2.c

@@ -50,7 +50,14 @@ void lv_example_freetype_2_vector_font(uint32_t font_size, uint32_t border_width
 }
 
 /**
- * Load a font with FreeType
+ * @title FreeType emoji fallback font
+ * @brief Render a large label whose primary font falls back to a color emoji font.
+ *
+ * A 400 px bitmap `Lato-Regular.ttf` is loaded as the primary font and a
+ * 200 px subset of `NotoColorEmoji-32.subset.ttf` is loaded as
+ * `font->fallback`. A style applies the combined font and centers the text,
+ * and a label placed at the center of the active screen shows a greeting
+ * ending in an emoji so the fallback glyph is exercised.
  */
 void lv_example_freetype_2(void)
 {

examples/libs/freetype/lv_example_freetype_3.c

@@ -31,7 +31,15 @@ static void create_label(lv_font_kerning_t kerning, int32_t y_ofs, const char *
 }
 
 /**
- * FreeType kerning example
+ * @title FreeType kerning comparison
+ * @brief Compare a FreeType-loaded font rendered with and without kerning.
+ *
+ * A static helper builds a 32 px `Lato-Regular.ttf` font via
+ * `lv_freetype_font_create_with_info`, applies it to a label with
+ * `lv_obj_set_style_text_font`, and centers the label at a given y offset.
+ * The public function calls the helper twice, once with
+ * `LV_FONT_KERNING_NONE` above center and once with `LV_FONT_KERNING_NORMAL`
+ * below, both showing the pair test string `AVAWAY,ToTaTe`.
  */
 void lv_example_freetype_3(void)
 {

examples/libs/gif/about.md

@@ -0,0 +1,6 @@
+---
+title: "GIF"
+order: 75
+---
+
+Animated GIF decoder for playing GIFs inside LVGL image widgets. Enable with `LV_USE_GIF` in `lv_conf.h`.

examples/libs/gif/lv_example_gif_1.c

@@ -2,7 +2,14 @@
 #if LV_USE_GIF && LV_BUILD_EXAMPLES
 
 /**
- * Open a GIF image from a file and a variable
+ * @title Animated GIF from array and file
+ * @brief Show the same bulb GIF decoded from a C array and from a file path.
+ *
+ * Two `lv_gif` widgets are created on the active screen with
+ * `LV_COLOR_FORMAT_ARGB8888`. The left one binds to the embedded
+ * `img_bulb_gif` descriptor via `lv_gif_set_src`; the right one reads
+ * `A:lvgl/examples/libs/gif/bulb.gif` through the filesystem driver
+ * registered under drive letter `A`.
  */
 void lv_example_gif_1(void)
 {

examples/libs/gltf/about.md

@@ -0,0 +1,6 @@
+---
+title: "glTF"
+order: 20
+---
+
+Loads and renders 3D models in glTF format within LVGL. Enable with `LV_USE_GLTF` in `lv_conf.h`.

examples/libs/gltf/lv_example_gltf_1.c

@@ -19,7 +19,15 @@ static void spin_timer_cb(lv_timer_t * timer)
 }
 
 /**
- * Open a GLTF from a file and make it spin forever like a platter
+ * @title Spin a glTF model on a platter
+ * @brief Load a glTF scene and spin it around the yaw axis with a timer.
+ *
+ * `lv_gltf_create` attaches the viewer to the active screen and
+ * `lv_obj_set_size` sizes it to fill the screen. `lv_gltf_load_model_from_file`
+ * loads `webp_diffuse_transmission_plant.glb` from drive letter `A`. The first
+ * embedded animation plays, the viewer is pitched down by 45 degrees, and a
+ * timer running at `LV_DEF_REFR_PERIOD` advances yaw by one degree per tick,
+ * wrapping at 360.
  */
 void lv_example_gltf_1(void)
 {