docs(examples): add back show c code button in widget pages (#9354)

docs/example_list.py

@@ -64,7 +64,7 @@ Examples Directory Requirements
 .. code:: text
 
     lvgl/examples/
-        index.rst        (directory-order directive since sub-dirs
+        index.rst        (.. dir_order: pseudo-directive since sub-dirs
                          are not presented in alphabetical order)
         anim/
             index.rst    (see below for expected contents)
@@ -111,25 +111,32 @@ the example C code.
 
     Example 1 Title  <-- required for each example
     ---------------  <-- required for each example
-                                        <-- blank lines are ignored
-    .. lv_example:: lv_example_anim_1   <-- relative path to stem of C filename
+                                             <-- blank lines are ignored
+    .. lv_example:: anim/lv_example_anim_1   <-- path relative to the `lvgl/examples/` dir
         :language: c
 
 Repeat the above pattern for each example in the current directory.  That number
 may be zero (0) for directories like `libs/` in which all examples are in directories
 below that level.  See directory structure above.
 
-Provide relative paths to each example outside the current directory, e.g. some
-examples use 2 Widgets, so the example would be local to one `index.rst`, and provide
-a relative path from the other.  Example from `lvgl/examples/widgets/scale/index.rst`:
+For paths outside the current directory, simply provide the path to the code example
+relative to the `lvgl/examples/` directory.  Example from
+`lvgl/examples/widgets/scale/index.rst`:
 
 .. code::
 
     ...
 
+    A round scale style simulating a compass
+    ----------------------------------------
+
+    .. lv_example:: widgets/scale/lv_example_scale_12
+      :language: c
+
     Axis ticks and labels with scrolling on a chart
     -----------------------------------------------
-    .. lv_example:: ../chart/lv_example_chart_2
+
+    .. lv_example:: widgets/chart/lv_example_chart_2     <-- path is outside scale/ dir
       :language: c
 
 .. note::
@@ -143,20 +150,19 @@ Custom Section Headings
 -----------------------
 If a section heading needs to be spelled differently than the capitalized name of the
 parent directory, then an `index.rst` file in that directory may contain the desired
-section-heading name underscored with asterisks (*).  Example from
+section-heading name in an ``.. example_heading`` pseudo-directive.  Example from
 `lvgl/examples/libs/index.rst`:
 
 .. code::
 
-    3rd-Party Libraries
-    *******************
+    .. example_heading: 3rd-Party Libraries
 
 
 Directory Reordering
 --------------------
 There are cases where it is not appropriate to present the contents of a
 set of subdirectories in alphabetical order.  When this is the case, a
-directive in the `index.rst` file in the parent directory can be specified
+pseudo-directive in the `index.rst` file in the parent directory can be specified
 to govern the sequence its subdirectories are processed.  The example below
 is from `lvgl/examples/widgets/index.rst`.  It is provided in order to
 cause the "Base Widget" (obj) directory to be processed first (and thus
@@ -164,7 +170,7 @@ included in the output first).
 
 .. code::
 
-    .. dir_order::
+    .. dir_order:
 
         obj
         animimg
@@ -244,7 +250,8 @@ header_defs = [
 ]
 
 LV_EXAMPLE_DIRECTIVE = '.. lv_example::'
-DIR_ORDER_DIRECTIVE = '.. dir_order::'
+EXAMPLE_HEADING_DIRECTIVE = '.. example_heading:'
+DIR_ORDER_DIRECTIVE = '.. dir_order:'
 DIR_SEP = os.sep
 INDEX_FILENAME = 'index.rst'
 MAKE_WARNINGS_INTO_ERRORS = False
@@ -313,7 +320,7 @@ def _in_avoid_dirs_list(dir_bep: str) -> bool:
 
 
 def _validate_sub_dirs(sub_dirs: list[str], index_rst_path: str) -> bool:
-    """ Validate sub-dirs that come from an `index.rst` `.. dir_order::` directive.
+    """ Validate sub-dirs that come from an `index.rst` `.. dir_order:` directive.
 
     1.  Check that that each one is an existing directory.
     2.  Check that there are none missing except those in `avoid_dirs`.
@@ -421,16 +428,14 @@ def _generate_output_from_dir(level: int,
             announce(__file__, f'Processing file [{file_or_dir}]...')
             # We are processing an index.rst file.
             with open(file_or_dir, 'r', encoding='utf-8') as fidx:
+                # It is important that this is NOT fidx.readlines() because
+                # it leaves blank lines containing '\n' instead of ''.
                 lines = fidx.read().split('\n')
 
             example_title = ''
             prev_line = ''
             dir_path = os.path.dirname(file_or_dir)
-            relative_dir = dir_path[root_len:]
             in_dir_order_directive = False
-            # Final path to example in example directive requires forward slashes.
-            if DIR_SEP != '/' and DIR_SEP in relative_dir:
-                relative_dir = relative_dir.replace(DIR_SEP, '/')
 
             # Accumulate data from `index.rst`.  This needs to be done
             # first in case it overrides the default section heading.
@@ -452,16 +457,17 @@ def _generate_output_from_dir(level: int,
 
                 if not stripped_line:
                     continue         # Skip blank line.
-                elif stripped_line.startswith('***'):
-                    announce(__file__, f'Default section heading [{section_heading}] replaced with [{prev_line}]...')
-                    section_heading = prev_line
+                elif stripped_line.startswith(EXAMPLE_HEADING_DIRECTIVE):
+                    new_heading = stripped_line.replace(EXAMPLE_HEADING_DIRECTIVE, '').strip()
+                    announce(__file__, f'Default section heading [{section_heading}] replaced with [{new_heading}]...')
+                    section_heading = new_heading
                 elif stripped_line.startswith('---'):
                     example_title = prev_line
                     announce(__file__, f'Found example   [{example_title}]...')
                 elif stripped_line.startswith(LV_EXAMPLE_DIRECTIVE):
-                    rel_path_from_index_rst = stripped_line.replace(LV_EXAMPLE_DIRECTIVE, '').strip()
-                    announce(__file__, f'                [{rel_path_from_index_rst}]')
-                    example_tuples.append( (example_title, rel_path_from_index_rst) )
+                    rel_path_from_examples_dir = stripped_line.replace(LV_EXAMPLE_DIRECTIVE, '').strip()
+                    announce(__file__, f'                [{rel_path_from_examples_dir}]')
+                    example_tuples.append( (example_title, rel_path_from_examples_dir) )
                 elif not in_dir_order_directive and stripped_line.startswith(DIR_ORDER_DIRECTIVE):
                     in_dir_order_directive = True
                     announce(__file__, f'Found DIR-ORDER directive.')
@@ -476,11 +482,11 @@ def _generate_output_from_dir(level: int,
         # with example sub-dirs below it.
         for example_tuple in example_tuples:
             example_title = example_tuple[0]
-            rel_path_from_index_rst = example_tuple[1]
+            rel_path_from_examples_dir = example_tuple[1]
             example_hdg_underline = header_defs[level + 1] * len(example_title)
-            announce(__file__, f'Writing example [{rel_path_from_index_rst}]...')
+            announce(__file__, f'Writing example [{rel_path_from_examples_dir}]...')
             _emit_heading(level + 1, example_title, f)
-            f.write(LV_EXAMPLE_DIRECTIVE + ' ' + relative_dir + '/' + rel_path_from_index_rst)
+            f.write(LV_EXAMPLE_DIRECTIVE + ' ' + rel_path_from_examples_dir)
             f.write('\n\n')
 
     if dir_order_override:

examples/README.md

@@ -40,21 +40,28 @@ lvgl/examples/
 ```
 Example 1 Title  <-- required for each example
 ---------------  <-- required for each example
-                                    <-- blank lines are ignored
-.. lv_example:: lv_example_anim_1   <-- relative path to stem of C filename
+                                         <-- blank lines are ignored
+.. lv_example:: anim/lv_example_anim_1   <-- path relative to the `lvgl/examples/` dir
     :language: c
 ```
 
 Repeat the above pattern for each example in current directory.  That number may be zero (0) for directories like `libs/` in which all examples are in directories below that level.  See directory structure above.
 
-Provide relative paths to each example outside of the current directory, e.g. some examples use 2 Widgets, so the example would be local to one `index.rst`, and provide a relative path from the other.  Example from `lvgl/examples/widgets/scale/index.rst`:
+For paths outside the current directory, simply provide the path to the code example relative to the `lvgl/examples/` directory.  Example from `lvgl/examples/widgets/scale/index.rst`:
 
 ```
 ...
 
+A round scale style simulating a compass
+----------------------------------------
+
+.. lv_example:: widgets/scale/lv_example_scale_12
+  :language: c
+
 Axis ticks and labels with scrolling on a chart
 -----------------------------------------------
-.. lv_example:: ../chart/lv_example_chart_2
+
+.. lv_example:: widgets/chart/lv_example_chart_2     <-- path is outside scale/ dir
   :language: c
 ```
 
@@ -65,20 +72,19 @@ Starting the example code filename with `lv_example_` is not a requirement of th
 
 ### Custom Section Headings
 
-If a section heading needs to be spelled differently than the capitalized name of the parent directory, then an `index.rst` file in that directory may contain the desired section-heading name underscored with asterisks (\*).  Example from `lvgl/examples/libs/index.rst`:
+If a section heading needs to be spelled differently than the capitalized name of the parent directory, then an `index.rst` file in that directory may contain the desired section-heading name in an `.. example_heading:` pseudo-directive.  Example from `lvgl/examples/libs/index.rst`:
 
 ```
-3rd-Party Libraries
-*******************
+.. example_heading: 3rd-Party Libraries
 ```
 
 
 ### Optional Directory Reordering
 
-There are cases where it is not appropriate to present the contents of a directory in alphabetical order.  When this is the case, a directive in the `index.rst` file in the parent directory can be specified to govern the sequence its subdirectories are processed.  The example below is from `lvgl/examples/widgets/index.rst`.  It is provided in order to cause the "Base Widget" (obj) directory to be processed first.
+There are cases where it is not appropriate to present the contents of a set of subdirectories in alphabetical order.  When this is the case, a pseudo-directive in the `index.rst` file in the parent directory can be specified to govern the sequence its subdirectories are processed.  The example below is from `lvgl/examples/widgets/index.rst`.  It is provided in order to cause the "Base Widget" (obj) directory to be processed first (and thus included in the output first).
 
 ```rst
-.. dir_order::
+.. dir_order:
 
     obj
     animimg

examples/anim/index.rst

@@ -1,29 +1,29 @@
-Animations
-**********
+.. example_heading:  Animations
+
 
 Start animation on an event
 ---------------------------
 
-.. lv_example:: lv_example_anim_1
+.. lv_example:: anim/lv_example_anim_1
   :language: c
 
 Playback animation
 ------------------
-.. lv_example:: lv_example_anim_2
+.. lv_example:: anim/lv_example_anim_2
   :language: c
 
 Cubic Bezier animation
 ----------------------
-.. lv_example:: lv_example_anim_3
+.. lv_example:: anim/lv_example_anim_3
   :language: c
 
 Pause animation
 ----------------------
-.. lv_example:: lv_example_anim_4
+.. lv_example:: anim/lv_example_anim_4
   :language: c
 
 Animation timeline
 ------------------
-.. lv_example:: lv_example_anim_timeline_1
+.. lv_example:: anim/lv_example_anim_timeline_1
   :language: c
 

examples/event/index.rst

@@ -1,37 +1,37 @@
-Events
-******
+.. example_heading: Events
+
 
 Button click event
 ------------------
 
-.. lv_example:: lv_example_event_click
+.. lv_example:: event/lv_example_event_click
   :language: c
 
 Click streaks
 -------------
 
-.. lv_example:: lv_example_event_streak
+.. lv_example:: event/lv_example_event_streak
   :language: c
 
 Handle multiple events
 ----------------------
-.. lv_example:: lv_example_event_button
+.. lv_example:: event/lv_example_event_button
   :language: c
 
 
 Event bubbling
 --------------
-.. lv_example:: lv_example_event_bubble
+.. lv_example:: event/lv_example_event_bubble
   :language: c
 
 Event trickle-down
 ------------------
-.. lv_example:: lv_example_event_trickle
+.. lv_example:: event/lv_example_event_trickle
   :language: c
 
 Draw event
 ----------
-.. lv_example:: lv_example_event_draw
+.. lv_example:: event/lv_example_event_draw
   :language: c
 
 

examples/get_started/index.rst

@@ -1,27 +1,26 @@
-Getting Started
-***************
+.. example_heading: Getting Started
 
 
 A very simple *hello world* label
 ---------------------------------
 
-.. lv_example:: lv_example_get_started_1
+.. lv_example:: get_started/lv_example_get_started_1
   :language: c
 
 A button with a label and react on click event
 ----------------------------------------------
 
-.. lv_example:: lv_example_get_started_2
+.. lv_example:: get_started/lv_example_get_started_2
   :language: c
 
 Create styles from scratch for buttons
 --------------------------------------
-.. lv_example:: lv_example_get_started_3
+.. lv_example:: get_started/lv_example_get_started_3
   :language: c
 
 Create a slider and write its value on a label
 ----------------------------------------------
-.. lv_example:: lv_example_get_started_4
+.. lv_example:: get_started/lv_example_get_started_4
   :language: c
 
 

examples/grad/index.rst

@@ -1,27 +1,26 @@
-Gradients
-*********
+.. example_heading: Gradients
 
 
 Simple Horizontal Gradient
 --------------------------
 
-.. lv_example:: lv_example_grad_1
+.. lv_example:: grad/lv_example_grad_1
   :language: c
 
 Linear (Skew) Gradient
 ----------------------
 
-.. lv_example:: lv_example_grad_2
+.. lv_example:: grad/lv_example_grad_2
   :language: c
 
 Radial Gradient
 ---------------
 
-.. lv_example:: lv_example_grad_3
+.. lv_example:: grad/lv_example_grad_3
   :language: c
 
 Conical Gradient
 ----------------
 
-.. lv_example:: lv_example_grad_4
+.. lv_example:: grad/lv_example_grad_4
   :language: c

examples/index.rst

@@ -1,4 +1,4 @@
-.. dir_order::
+.. dir_order:
 
     get_started
     styles

examples/layouts/flex/index.rst

@@ -1,37 +1,37 @@
 A simple row and a column layout with flexbox
 ---------------------------------------------
 
-.. lv_example:: lv_example_flex_1
+.. lv_example:: layouts/flex/lv_example_flex_1
   :language: c
 
 Arrange items in rows with wrap and even spacing
 ------------------------------------------------
 
-.. lv_example:: lv_example_flex_2
+.. lv_example:: layouts/flex/lv_example_flex_2
   :language: c
 
 Demonstrate flex grow
 ---------------------
 
-.. lv_example:: lv_example_flex_3
+.. lv_example:: layouts/flex/lv_example_flex_3
   :language: c
 
 Demonstrate flex grow
 ---------------------
 
-.. lv_example:: lv_example_flex_4
+.. lv_example:: layouts/flex/lv_example_flex_4
   :language: c
 
 Demonstrate column and row gap style properties
 -----------------------------------------------
 
-.. lv_example:: lv_example_flex_5
+.. lv_example:: layouts/flex/lv_example_flex_5
   :language: c
 
 RTL base direction changes order of the items
 ---------------------------------------------
 
-.. lv_example:: lv_example_flex_6
+.. lv_example:: layouts/flex/lv_example_flex_6
   :language: c
 
 

examples/layouts/grid/index.rst

@@ -1,37 +1,37 @@
 A simple grid
 -------------
 
-.. lv_example:: lv_example_grid_1
+.. lv_example:: layouts/grid/lv_example_grid_1
   :language: c
 
 Demonstrate cell placement and span
 -----------------------------------
 
-.. lv_example:: lv_example_grid_2
+.. lv_example:: layouts/grid/lv_example_grid_2
   :language: c
 
 Demonstrate grid's -free unit-
 ------------------------------
 
-.. lv_example:: lv_example_grid_3
+.. lv_example:: layouts/grid/lv_example_grid_3
   :language: c
 
 Demonstrate track placement
 ---------------------------
 
-.. lv_example:: lv_example_grid_4
+.. lv_example:: layouts/grid/lv_example_grid_4
   :language: c
 
 Demonstrate column and row gap
 ------------------------------
 
-.. lv_example:: lv_example_grid_5
+.. lv_example:: layouts/grid/lv_example_grid_5
   :language: c
 
 Demonstrate RTL direction on grid
 ---------------------------------
 
-.. lv_example:: lv_example_grid_6
+.. lv_example:: layouts/grid/lv_example_grid_6
   :language: c
 
 

examples/libs/barcode/index.rst

@@ -1,6 +1,6 @@
 Create a Barcode
 ----------------
 
-.. lv_example:: lv_example_barcode_1
+.. lv_example:: libs/barcode/lv_example_barcode_1
   :language: c
 

examples/libs/bmp/index.rst

@@ -1,10 +1,9 @@
-BMP
-***
+.. example_heading: BMP
 
 
 Open a BMP image from file
 --------------------------
 
-.. lv_example:: lv_example_bmp_1
+.. lv_example:: libs/bmp/lv_example_bmp_1
   :language: c
 

examples/libs/ffmpeg/index.rst

@@ -1,16 +1,15 @@
-FFmpeg
-******
+.. example_heading: FFmpeg
 
 
 Decode image
 ------------
 
-.. lv_example:: lv_example_ffmpeg_1
+.. lv_example:: libs/ffmpeg/lv_example_ffmpeg_1
   :language: c
 
 Decode video
 ------------
 
-.. lv_example:: lv_example_ffmpeg_2
+.. lv_example:: libs/ffmpeg/lv_example_ffmpeg_2
   :language: c
 

examples/libs/freetype/index.rst

@@ -1,21 +1,20 @@
-FreeType
-********
+.. example_heading: FreeType
 
 
 Create a font with FreeType
 ---------------------------
 
-.. lv_example:: lv_example_freetype_1
+.. lv_example:: libs/freetype/lv_example_freetype_1
   :language: c
 
 Use a bitmap font to draw Emojis using FreeType
 -----------------------------------------------
 
-.. lv_example:: lv_example_freetype_2
+.. lv_example:: libs/freetype/lv_example_freetype_2
   :language: c
 
 Freetype font kerning
 ---------------------
 
-.. lv_example:: lv_example_freetype_3
+.. lv_example:: libs/freetype/lv_example_freetype_3
   :language: c

examples/libs/gif/index.rst

@@ -1,10 +1,9 @@
-GIF
-***
+.. example_heading: GIF
 
 
 Open a GIF image from file and variable
 ---------------------------------------
 
-.. lv_example:: lv_example_gif_1
+.. lv_example:: libs/gif/lv_example_gif_1
   :language: c
 

examples/libs/gltf/index.rst

@@ -1,18 +1,17 @@
-glTF
-****
+.. example_heading: glTF
 
 
 Open a glTF from a file and make it spin forever like a platter
 ---------------------------------------------------------------
 
-.. lv_example:: lv_example_gltf_1
+.. lv_example:: libs/gltf/lv_example_gltf_1
   :language: c
 
 
 Open a glTF from a file and iterate through each camera
 -------------------------------------------------------
 
-.. lv_example:: lv_example_gltf_2
+.. lv_example:: libs/gltf/lv_example_gltf_2
   :language: c
 
 Load multiple models in a single glTF object and modify their position, rotation and scale at runtime

examples/libs/gstreamer/index.rst

@@ -1,9 +1,8 @@
-GStreamer
-*********
+.. example_heading: GStreamer
 
 
 Loads a video from the internet using the gstreamer widget
 ----------------------------------------------------------
 
-.. lv_example:: lv_example_gstreamer_1
+.. lv_example:: libs/gstreamer/lv_example_gstreamer_1
   :language: c

examples/libs/index.rst

@@ -1,2 +1 @@
-3rd-Party Libraries
-*******************
+.. example_heading: 3rd-Party Libraries

examples/libs/libjpeg_turbo/index.rst

@@ -1,10 +1,9 @@
-libjpeg-turbo
-*************
+.. example_heading: libjpeg-turbo
 
 
 Load a JPG image
 -----------------
 
-.. lv_example:: lv_example_libjpeg_turbo_1
+.. lv_example:: libs/libjpeg_turbo/lv_example_libjpeg_turbo_1
   :language: c
 

examples/libs/libpng/index.rst

@@ -1,10 +1,9 @@
-libpng
-******
+.. example_heading: libpng
 
 
 Open a PNG image from file and variable
 ---------------------------------------
 
-.. lv_example:: lv_example_libpng_1
+.. lv_example:: libs/libpng/lv_example_libpng_1
   :language: c
 

examples/libs/libwebp/index.rst

@@ -1,10 +1,9 @@
-LibWebP
-*******
+.. example_heading: LibWebP
 
 
 Open a WEBP image from file and variable
 ----------------------------------------
 
-.. lv_example:: lv_example_libwebp_1
+.. lv_example:: libs/libwebp/lv_example_libwebp_1
   :language: c
 

examples/libs/lodepng/index.rst

@@ -1,10 +1,9 @@
-LodePNG
-*******
+.. example_heading: LodePNG
 
 
 Open a PNG image from file and variable
 ---------------------------------------
 
-.. lv_example:: lv_example_lodepng_1
+.. lv_example:: libs/lodepng/lv_example_lodepng_1
   :language: c
 

examples/libs/qrcode/index.rst

@@ -1,10 +1,9 @@
-QR-Code Generator
-*****************
+.. example_heading: QR-Code Generator
 
 
 Create a QR Code
 ----------------
 
-.. lv_example:: lv_example_qrcode_1
+.. lv_example:: libs/qrcode/lv_example_qrcode_1
   :language: c
 

examples/libs/rlottie/index.rst

@@ -1,16 +1,15 @@
-rlottie
-*******
+.. example_heading: rlottie
 
 
 Load a Lottie animation from raw data
 -------------------------------------
 
-.. lv_example:: lv_example_rlottie_1
+.. lv_example:: libs/rlottie/lv_example_rlottie_1
   :language: c
 
 Load a Lottie animation from a file
 -----------------------------------
 
-.. lv_example:: lv_example_rlottie_2
+.. lv_example:: libs/rlottie/lv_example_rlottie_2
   :language: c
 

examples/libs/svg/index.rst

@@ -1,21 +1,20 @@
-SVG
-***
+.. example_heading: SVG
 
 
 Load and render SVG data
 ------------------------
 
-.. lv_example:: lv_example_svg_1
+.. lv_example:: libs/svg/lv_example_svg_1
   :language: c
 
 Load and render SVG data from a file
 ------------------------------------
 
-.. lv_example:: lv_example_svg_2
+.. lv_example:: libs/svg/lv_example_svg_2
   :language: c
 
 Load and render SVG data in a draw event
 ----------------------------------------
 
-.. lv_example:: lv_example_svg_3
+.. lv_example:: libs/svg/lv_example_svg_3
   :language: c

examples/libs/tiny_ttf/index.rst

@@ -1,22 +1,21 @@
-Tiny TTF
-********
+.. example_heading: Tiny TTF
 
 
 Open a font with Tiny TTF from data array
 ------------------------------------------
 
-.. lv_example:: lv_example_tiny_ttf_1
+.. lv_example:: libs/tiny_ttf/lv_example_tiny_ttf_1
   :language: c
 
 
 Load a font with Tiny_TTF from file
 -----------------------------------
 
-.. lv_example:: lv_example_tiny_ttf_2
+.. lv_example:: libs/tiny_ttf/lv_example_tiny_ttf_2
   :language: c
 
 Change font size with Tiny_TTF
 ------------------------------
 
-.. lv_example:: lv_example_tiny_ttf_3
+.. lv_example:: libs/tiny_ttf/lv_example_tiny_ttf_3
   :language: c

examples/libs/tjpgd/index.rst

@@ -1,10 +1,9 @@
-Tiny JPEG Decompressor (TJpgDec)
-********************************
+.. example_heading: Tiny JPEG Decompressor (TJpgDec)
 
 
 Load a JPG image
 ------------------
 
-.. lv_example:: lv_example_tjpgd_1
+.. lv_example:: libs/tjpgd/lv_example_tjpgd_1
   :language: c
 

examples/others/file_explorer/index.rst

@@ -2,17 +2,17 @@
 Simple File Explorer
 --------------------
 
-.. lv_example:: lv_example_file_explorer_1
+.. lv_example:: others/file_explorer/lv_example_file_explorer_1
   :language: c
 
 Control File Explorer
 ---------------------
 
-.. lv_example:: lv_example_file_explorer_2
+.. lv_example:: others/file_explorer/lv_example_file_explorer_2
   :language: c
 
 Custom sort
 -----------
 
-.. lv_example:: lv_example_file_explorer_3
+.. lv_example:: others/file_explorer/lv_example_file_explorer_3
   :language: c

examples/others/font_manager/index.rst

@@ -2,17 +2,17 @@
 Create FreeType Font
 --------------------
 
-.. lv_example:: lv_example_font_manager_1
+.. lv_example:: others/font_manager/lv_example_font_manager_1
   :language: c
 
 Create Font Family
 ------------------
 
-.. lv_example:: lv_example_font_manager_2
+.. lv_example:: others/font_manager/lv_example_font_manager_2
   :language: c
 
 Create Custom Image Font
 ------------------------
 
-.. lv_example:: lv_example_font_manager_3
+.. lv_example:: others/font_manager/lv_example_font_manager_3
   :language: c

examples/others/fragment/index.rst

@@ -1,15 +1,14 @@
-Fragment Manager
-****************
+.. example_heading: Fragment Manager
 
 
 Basic fragment usage
 --------------------
 
-.. lv_example:: lv_example_fragment_1
+.. lv_example:: others/fragment/lv_example_fragment_1
   :language: c
 
 Stack navigation example
 ------------------------
 
-.. lv_example:: lv_example_fragment_2
+.. lv_example:: others/fragment/lv_example_fragment_2
   :language: c

examples/others/gridnav/index.rst

@@ -1,33 +1,32 @@
-Grid Navigation
-***************
+.. example_heading: Grid Navigation
 
 
 Basic grid navigation
 ---------------------
 
-.. lv_example:: lv_example_gridnav_1
+.. lv_example:: others/gridnav/lv_example_gridnav_1
   :language: c
 
 Grid navigation on a list
 -------------------------
 
-.. lv_example:: lv_example_gridnav_2
+.. lv_example:: others/gridnav/lv_example_gridnav_2
   :language: c
 
 Nested grid navigations
 -----------------------
 
-.. lv_example:: lv_example_gridnav_3
+.. lv_example:: others/gridnav/lv_example_gridnav_3
   :language: c
 
 Simple navigation on a list widget
 ----------------------------------
 
-.. lv_example:: lv_example_gridnav_4
+.. lv_example:: others/gridnav/lv_example_gridnav_4
   :language: c
 
 Grid navigation for only one axis
 ---------------------------------
 
-.. lv_example:: lv_example_gridnav_5
+.. lv_example:: others/gridnav/lv_example_gridnav_5
   :language: c

examples/others/ime/index.rst

@@ -1,15 +1,14 @@
-Pinyin IME
-**********
+.. example_heading: Pinyin IME
 
 
 Pinyin IME 26 key input
 -----------------------
 
-.. lv_example:: lv_example_ime_pinyin_1
+.. lv_example:: others/ime/lv_example_ime_pinyin_1
   :language: c
 
 Pinyin IME 9 key input
 ----------------------
 
-.. lv_example:: lv_example_ime_pinyin_2
+.. lv_example:: others/ime/lv_example_ime_pinyin_2
   :language: c

examples/others/imgfont/index.rst

@@ -1,10 +1,9 @@
-Image Font
-**********
+.. example_heading: Image Font
 
 
 Use emojis in a text.
 ---------------------
 
-.. lv_example:: lv_example_imgfont_1
+.. lv_example:: others/imgfont/lv_example_imgfont_1
   :language: c
 

examples/others/monkey/index.rst

@@ -2,17 +2,17 @@
 Touchpad monkey example
 -----------------------
 
-.. lv_example:: lv_example_monkey_1
+.. lv_example:: others/monkey/lv_example_monkey_1
   :language: c
 
 Encoder monkey example
 ----------------------
 
-.. lv_example:: lv_example_monkey_2
+.. lv_example:: others/monkey/lv_example_monkey_2
   :language: c
 
 Button monkey example
 ---------------------
 
-.. lv_example:: lv_example_monkey_3
+.. lv_example:: others/monkey/lv_example_monkey_3
   :language: c

examples/others/observer/index.rst

@@ -2,37 +2,37 @@
 Bind a slider's value to a label
 --------------------------------
 
-.. lv_example:: lv_example_observer_1
+.. lv_example:: others/observer/lv_example_observer_1
   :language: c
 
 Handling login and its states
 -----------------------------
 
-.. lv_example:: lv_example_observer_2
+.. lv_example:: others/observer/lv_example_observer_2
   :language: c
 
 Set time with 12/24 mode and AM/PM
 ----------------------------------
 
-.. lv_example:: lv_example_observer_3
+.. lv_example:: others/observer/lv_example_observer_3
   :language: c
 
 Custom tab view with state management
 -------------------------------------
 
-.. lv_example:: lv_example_observer_4
+.. lv_example:: others/observer/lv_example_observer_4
   :language: c
 
 Firmware update process
 -----------------------
 
-.. lv_example:: lv_example_observer_5
+.. lv_example:: others/observer/lv_example_observer_5
   :language: c
 
 Modular style update on theme change
 ------------------------------------
 
-.. lv_example:: lv_example_observer_6
+.. lv_example:: others/observer/lv_example_observer_6
   :language: c
 
 

examples/others/snapshot/index.rst

@@ -1,7 +1,7 @@
 Simple snapshot example
 -----------------------
 
-.. lv_example:: lv_example_snapshot_1
+.. lv_example:: others/snapshot/lv_example_snapshot_1
   :language: c
 
 

examples/others/translation/index.rst

@@ -1,13 +1,13 @@
 Simple translation example
 ---------------------------
 
-.. lv_example:: lv_example_translation_1
+.. lv_example:: others/translation/lv_example_translation_1
   :language: c
 
 Dynamic language selection
 --------------------------
 
-.. lv_example:: lv_example_translation_2
+.. lv_example:: others/translation/lv_example_translation_2
   :language: c
 
 

examples/others/xml/index.rst

@@ -1,12 +1,11 @@
-XML Components
-**************
+.. example_heading: XML Components
 
 
 Load components at runtime
 --------------------------
 
-.. lv_example:: lv_example_xml_1
+.. lv_example:: others/xml/lv_example_xml_1
   :language: c
 
-.. lv_example:: lv_example_xml_2
+.. lv_example:: others/xml/lv_example_xml_2
   :language: c

examples/porting/osal/index.rst

@@ -1,10 +1,9 @@
-OS Abstraction Layer (OSAL)
-***************************
+.. example_heading: OS Abstraction Layer (OSAL)
 
 
 Basic Example
 -------------
 
-.. lv_example:: lv_example_osal
+.. lv_example:: porting/osal/lv_example_osal
   :language: c
 

examples/scroll/index.rst

@@ -1,50 +1,49 @@
-Scrolling
-*********
+.. example_heading: Scrolling
 
 Nested scrolling
 ----------------
 
-.. lv_example:: lv_example_scroll_1
+.. lv_example:: scroll/lv_example_scroll_1
   :language: c
 
 Snapping
 --------
-.. lv_example:: lv_example_scroll_2
+.. lv_example:: scroll/lv_example_scroll_2
   :language: c
 
 Floating button
 ----------------
-.. lv_example:: lv_example_scroll_3
+.. lv_example:: scroll/lv_example_scroll_3
   :language: c
 
 Styling the scrollbars
 ----------------------
-.. lv_example:: lv_example_scroll_4
+.. lv_example:: scroll/lv_example_scroll_4
   :language: c
 
 Right to left scrolling
 -----------------------
-.. lv_example:: lv_example_scroll_5
+.. lv_example:: scroll/lv_example_scroll_5
   :language: c
 
 Translate on scroll
 -------------------
-.. lv_example:: lv_example_scroll_6
+.. lv_example:: scroll/lv_example_scroll_6
   :language: c
 
 Infinite scrolling
 ------------------
-.. lv_example:: lv_example_scroll_7
+.. lv_example:: scroll/lv_example_scroll_7
   :language: c
   
 Circular scrolling
 ------------------
-.. lv_example:: lv_example_scroll_8
+.. lv_example:: scroll/lv_example_scroll_8
   :language: c
 
 Scrolling Properties
 --------------------
-.. lv_example:: lv_example_scroll_9
+.. lv_example:: scroll/lv_example_scroll_9
   :language: c
 
 

examples/styles/index.rst

@@ -2,120 +2,120 @@
 Size styles
 -----------
 
-.. lv_example:: lv_example_style_1
+.. lv_example:: styles/lv_example_style_1
   :language: c
 
 Background styles
 -----------------
 
-.. lv_example:: lv_example_style_2
+.. lv_example:: styles/lv_example_style_2
   :language: c
 
 Border styles
 -------------
 
-.. lv_example:: lv_example_style_3
+.. lv_example:: styles/lv_example_style_3
   :language: c
 
 Outline styles
 --------------
 
-.. lv_example:: lv_example_style_4
+.. lv_example:: styles/lv_example_style_4
   :language: c
 
 Shadow styles
 -------------
 
-.. lv_example:: lv_example_style_5
+.. lv_example:: styles/lv_example_style_5
   :language: c
 
 Image styles
 ------------
 
-.. lv_example:: lv_example_style_6
+.. lv_example:: styles/lv_example_style_6
   :language: c
 
 Arc styles
 ----------
 
-.. lv_example:: lv_example_style_7
+.. lv_example:: styles/lv_example_style_7
   :language: c
 
 Text styles
 -----------
 
-.. lv_example:: lv_example_style_8
+.. lv_example:: styles/lv_example_style_8
   :language: c
 
 Line styles
 -----------
 
-.. lv_example:: lv_example_style_9
+.. lv_example:: styles/lv_example_style_9
   :language: c
 
 Transition
 ----------
 
-.. lv_example:: lv_example_style_10
+.. lv_example:: styles/lv_example_style_10
   :language: c
 
 Using multiple styles
 ---------------------
 
-.. lv_example:: lv_example_style_11
+.. lv_example:: styles/lv_example_style_11
   :language: c
 
 Local styles
 ------------
 
-.. lv_example:: lv_example_style_12
+.. lv_example:: styles/lv_example_style_12
   :language: c
 
 Add styles to parts and states
 ------------------------------
 
-.. lv_example:: lv_example_style_13
+.. lv_example:: styles/lv_example_style_13
   :language: c
 
 Extending the current theme
 ---------------------------
 
-.. lv_example:: lv_example_style_14
+.. lv_example:: styles/lv_example_style_14
   :language: c
 
 Opacity and Transformations
 ---------------------------
 
-.. lv_example:: lv_example_style_15
+.. lv_example:: styles/lv_example_style_15
   :language: c
 
 Metallic knob with conic gradient
 ---------------------------------
 
-.. lv_example:: lv_example_style_16
+.. lv_example:: styles/lv_example_style_16
   :language: c
 
 Radial gradient as background
 -----------------------------
 
-.. lv_example:: lv_example_style_17
+.. lv_example:: styles/lv_example_style_17
   :language: c
 
 Gradients for button background
 -------------------------------
 
-.. lv_example:: lv_example_style_18
+.. lv_example:: styles/lv_example_style_18
   :language: c
 
 Test between recolor style or full background modal
 ---------------------------------------------------
 
-.. lv_example:: lv_example_style_19
+.. lv_example:: styles/lv_example_style_19
   :language: c
 
 
 Transform style
 ---------------
 
-.. lv_example:: lv_example_style_20
+.. lv_example:: styles/lv_example_style_20
   :language: c

examples/widgets/animimg/index.rst

@@ -1,10 +1,9 @@
-Animation Image
-***************
+.. example_heading: Animation Image
 
 
 Simple Animation Image
 ----------------------
 
-.. lv_example:: lv_example_animimg_1
+.. lv_example:: widgets/animimg/lv_example_animimg_1
   :language: c
   :description: A simple example to demonstrate the use of an animation image.

examples/widgets/arc/index.rst

@@ -1,19 +1,18 @@
-
 Simple Arc
 ----------
 
-.. lv_example:: lv_example_arc_1
+.. lv_example:: widgets/arc/lv_example_arc_1
   :language: c
   :description: A simple example to demonstrate the use of an arc.
 
 Loader with Arc
 ---------------
 
-.. lv_example:: lv_example_arc_2
+.. lv_example:: widgets/arc/lv_example_arc_2
   :language: c
 
 Pie Chart with clickable slices using Arcs
 ------------------------------------------
 
-.. lv_example:: lv_example_arc_3
+.. lv_example:: widgets/arc/lv_example_arc_3
   :language: c

examples/widgets/arclabel/index.rst

@@ -1,10 +1,9 @@
-Arc Label
-*********
+.. example_heading: Arc Label
 
 
 Simple Arc Label
 ----------------
 
-.. lv_example:: lv_example_arclabel_1
+.. lv_example:: widgets/arclabel/lv_example_arclabel_1
     :language: c
     :description: A simple example to demonstrate the use of an arc label.

examples/widgets/bar/index.rst

@@ -1,42 +1,42 @@
 Simple Bar
 ----------
 
-.. lv_example:: lv_example_bar_1
+.. lv_example:: widgets/bar/lv_example_bar_1
   :language: c
 
 Styling a bar
 -------------
 
-.. lv_example:: lv_example_bar_2
+.. lv_example:: widgets/bar/lv_example_bar_2
   :language: c
 
 Temperature meter
 -----------------
 
-.. lv_example:: lv_example_bar_3
+.. lv_example:: widgets/bar/lv_example_bar_3
   :language: c
 
 Stripe pattern and range value
 ------------------------------
 
-.. lv_example:: lv_example_bar_4
+.. lv_example:: widgets/bar/lv_example_bar_4
   :language: c
 
 Bar with LTR and RTL base direction
 -----------------------------------
 
-.. lv_example:: lv_example_bar_5
+.. lv_example:: widgets/bar/lv_example_bar_5
   :language: c
 
 Custom drawer to show the current value
 ---------------------------------------
 
-.. lv_example:: lv_example_bar_6
+.. lv_example:: widgets/bar/lv_example_bar_6
   :language: c
 
 Bar with opposite direction
 ---------------------------
 
-.. lv_example:: lv_example_bar_7
+.. lv_example:: widgets/bar/lv_example_bar_7
   :language: c
 

examples/widgets/button/index.rst

@@ -2,19 +2,19 @@
 Simple Buttons
 --------------
 
-.. lv_example:: lv_example_button_1
+.. lv_example:: widgets/button/lv_example_button_1
   :language: c
 
 
 Styling buttons
 ---------------
 
-.. lv_example:: lv_example_button_2
+.. lv_example:: widgets/button/lv_example_button_2
   :language: c
 
 Gummy button
 ------------
 
-.. lv_example:: lv_example_button_3
+.. lv_example:: widgets/button/lv_example_button_3
   :language: c
 

examples/widgets/buttonmatrix/index.rst

@@ -1,25 +1,24 @@
-Button Matrix
-*************
+.. example_heading: Button Matrix
 
 
 Simple Button matrix
 --------------------
 
-.. lv_example:: lv_example_buttonmatrix_1
+.. lv_example:: widgets/buttonmatrix/lv_example_buttonmatrix_1
   :language: c
 
 
 Custom buttons
 --------------
 
-.. lv_example:: lv_example_buttonmatrix_2
+.. lv_example:: widgets/buttonmatrix/lv_example_buttonmatrix_2
   :language: c
 
 
 Pagination
 ----------
 
-.. lv_example:: lv_example_buttonmatrix_3
+.. lv_example:: widgets/buttonmatrix/lv_example_buttonmatrix_3
   :language: c
 
 

examples/widgets/calendar/index.rst

@@ -2,11 +2,11 @@
 Calendar with header
 --------------------
 
-.. lv_example:: lv_example_calendar_1
+.. lv_example:: widgets/calendar/lv_example_calendar_1
   :language: c
 
 Chinese calendar
 -------------------------------------
 
-.. lv_example:: lv_example_calendar_2
+.. lv_example:: widgets/calendar/lv_example_calendar_2
   :language: c

examples/widgets/canvas/index.rst

@@ -1,78 +1,78 @@
 Drawing on the Canvas and rotate
 --------------------------------
 
-.. lv_example:: lv_example_canvas_1
+.. lv_example:: widgets/canvas/lv_example_canvas_1
   :language: c
 
 Transparent Canvas with chroma keying
 -------------------------------------
 
-.. lv_example:: lv_example_canvas_2
+.. lv_example:: widgets/canvas/lv_example_canvas_2
   :language: c
 
 
 Draw a rectangle to the canvas
 ------------------------------
 
-.. lv_example:: lv_example_canvas_3
+.. lv_example:: widgets/canvas/lv_example_canvas_3
   :language: c
 
 
 Draw a label to the canvas
 --------------------------
 
-.. lv_example:: lv_example_canvas_4
+.. lv_example:: widgets/canvas/lv_example_canvas_4
   :language: c
 
 
 Draw an arc to the canvas
 -------------------------
 
-.. lv_example:: lv_example_canvas_5
+.. lv_example:: widgets/canvas/lv_example_canvas_5
   :language: c
 
 
 Draw an image to the canvas
 ---------------------------
 
-.. lv_example:: lv_example_canvas_6
+.. lv_example:: widgets/canvas/lv_example_canvas_6
   :language: c
 
 
 Draw a line to the canvas
 -------------------------
 
-.. lv_example:: lv_example_canvas_7
+.. lv_example:: widgets/canvas/lv_example_canvas_7
   :language: c
 
 Draw a vector graphic to the canvas
 -----------------------------------
 
-.. lv_example:: lv_example_canvas_8
+.. lv_example:: widgets/canvas/lv_example_canvas_8
   :language: c
 
 Draw a triangle to the canvas
 -----------------------------
 
-.. lv_example:: lv_example_canvas_9
+.. lv_example:: widgets/canvas/lv_example_canvas_9
   :language: c
 
 Blur an area on the canvas
 -----------------------------
 
-.. lv_example:: lv_example_canvas_10
+.. lv_example:: widgets/canvas/lv_example_canvas_10
   :language: c
 
 
 Draw Fancy Letter Effects
 -------------------------
 
-.. lv_example:: lv_example_canvas_11
+.. lv_example:: widgets/canvas/lv_example_canvas_11
   :language: c
 
 
 Draw Fancy Letter Effects 2
 ---------------------------
-.. lv_example:: lv_example_canvas_12
+.. lv_example:: widgets/canvas/lv_example_canvas_12
   :language: c
 

examples/widgets/chart/index.rst

@@ -2,48 +2,48 @@
 Line Chart
 ----------
 
-.. lv_example:: lv_example_chart_1
+.. lv_example:: widgets/chart/lv_example_chart_1
   :language: c
 
 
 Axis ticks and labels with scrolling
 ------------------------------------------------
 
-.. lv_example:: lv_example_chart_2
+.. lv_example:: widgets/chart/lv_example_chart_2
   :language: c
 
 Show the value of the pressed points
 ------------------------------------
 
-.. lv_example:: lv_example_chart_3
+.. lv_example:: widgets/chart/lv_example_chart_3
   :language: c
 
 Recolor bars based on their value
 ------------------------------------
 
-.. lv_example:: lv_example_chart_4
+.. lv_example:: widgets/chart/lv_example_chart_4
   :language: c
 
 Faded area line chart with custom division lines
 ---------------------------------------------------
 
-.. lv_example:: lv_example_chart_5
+.. lv_example:: widgets/chart/lv_example_chart_5
   :language: c
 
 Show cursor on the clicked point
 --------------------------------
 
-.. lv_example:: lv_example_chart_6
+.. lv_example:: widgets/chart/lv_example_chart_6
   :language: c
 
 Scatter chart
 -------------
 
-.. lv_example:: lv_example_chart_7
+.. lv_example:: widgets/chart/lv_example_chart_7
   :language: c
 
 Circular line chart with gap
 ----------------------------
 
-.. lv_example:: lv_example_chart_8
+.. lv_example:: widgets/chart/lv_example_chart_8
   :language: c

examples/widgets/checkbox/index.rst

@@ -2,11 +2,11 @@
 Simple Checkboxes
 -----------------
 
-.. lv_example:: lv_example_checkbox_1
+.. lv_example:: widgets/checkbox/lv_example_checkbox_1
   :language: c
 
 Checkboxes as radio buttons
 ---------------------------
-.. lv_example:: lv_example_checkbox_2
+.. lv_example:: widgets/checkbox/lv_example_checkbox_2
   :language: c
 

examples/widgets/dropdown/index.rst

@@ -2,19 +2,19 @@
 Simple Drop down list
 ---------------------
 
-.. lv_example:: lv_example_dropdown_1
+.. lv_example:: widgets/dropdown/lv_example_dropdown_1
   :language: c
 
 Drop down in four directions
 ----------------------------
 
-.. lv_example:: lv_example_dropdown_2
+.. lv_example:: widgets/dropdown/lv_example_dropdown_2
   :language: c
 
 
 Menu
 ----
 
-.. lv_example:: lv_example_dropdown_3
+.. lv_example:: widgets/dropdown/lv_example_dropdown_3
   :language: c
 

examples/widgets/image/index.rst

@@ -2,27 +2,27 @@
 Image from variable and symbol
 ------------------------------
 
-.. lv_example:: lv_example_image_1
+.. lv_example:: widgets/image/lv_example_image_1
   :language: c
 
 
 Image recoloring
 ----------------
 
-.. lv_example:: lv_example_image_2
+.. lv_example:: widgets/image/lv_example_image_2
   :language: c
 
 
 Rotate and zoom
 ---------------
 
-.. lv_example:: lv_example_image_3
+.. lv_example:: widgets/image/lv_example_image_3
   :language: c
 
 Image offset and styling
 ------------------------
 
-.. lv_example:: lv_example_image_4
+.. lv_example:: widgets/image/lv_example_image_4
   :language: c
 
 

examples/widgets/imagebutton/index.rst

@@ -1,10 +1,9 @@
-Image Button
-************
+.. example_heading: Image Button
 
 
 Simple Image button
 -------------------
 
-.. lv_example:: lv_example_imagebutton_1
+.. lv_example:: widgets/imagebutton/lv_example_imagebutton_1
   :language: c
 

examples/widgets/index.rst

@@ -1,4 +1,4 @@
-.. dir_order::
+.. dir_order:
 
     obj
     animimg

examples/widgets/keyboard/index.rst

@@ -2,20 +2,20 @@
 Keyboard with text area
 -----------------------
 
-.. lv_example:: lv_example_keyboard_1
+.. lv_example:: widgets/keyboard/lv_example_keyboard_1
   :language: c
 
 
 Keyboard with custom map
 ------------------------
 
-.. lv_example:: lv_example_keyboard_2
+.. lv_example:: widgets/keyboard/lv_example_keyboard_2
   :language: c
 
 
 Keyboard with drawing
 ---------------------
 
-.. lv_example:: lv_example_keyboard_3
+.. lv_example:: widgets/keyboard/lv_example_keyboard_3
   :language: c
 

examples/widgets/label/index.rst

@@ -2,42 +2,42 @@
 Line wrap, recoloring and scrolling
 -----------------------------------
 
-.. lv_example:: lv_example_label_1
+.. lv_example:: widgets/label/lv_example_label_1
   :language: c
 
 Text shadow
 ------------
 
-.. lv_example:: lv_example_label_2
+.. lv_example:: widgets/label/lv_example_label_2
   :language: c
 
 Show LTR, RTL and Chinese texts
 -------------------------------
 
-.. lv_example:: lv_example_label_3
+.. lv_example:: widgets/label/lv_example_label_3
   :language: c
 
 Draw label with gradient color
 ------------------------------
 
-.. lv_example:: lv_example_label_4
+.. lv_example:: widgets/label/lv_example_label_4
   :language: c
 
 Customize circular scrolling animation
 --------------------------------------
 
-.. lv_example:: lv_example_label_5
+.. lv_example:: widgets/label/lv_example_label_5
   :language: c
 
 Monospace font
 --------------
 
-.. lv_example:: lv_example_label_6
+.. lv_example:: widgets/label/lv_example_label_6
   :language: c
 
 Assign a translation tag to a label
 -----------------------------------
 
-.. lv_example:: lv_example_label_7
+.. lv_example:: widgets/label/lv_example_label_7
   :language: c
 

examples/widgets/led/index.rst

@@ -1,10 +1,9 @@
-LED
-***
+.. example_heading: LED
 
 
 LED with custom style
 ---------------------
 
-.. lv_example:: lv_example_led_1
+.. lv_example:: widgets/led/lv_example_led_1
   :language: c
 

examples/widgets/line/index.rst

@@ -2,6 +2,6 @@
 Simple Line
 -----------
 
-.. lv_example:: lv_example_line_1
+.. lv_example:: widgets/line/lv_example_line_1
   :language: c
 

examples/widgets/list/index.rst

@@ -2,12 +2,12 @@
 Simple List
 -----------
 
-.. lv_example:: lv_example_list_1
+.. lv_example:: widgets/list/lv_example_list_1
   :language: c
 
 
 Sorting a List using up and down buttons
 ----------------------------------------
 
-.. lv_example:: lv_example_list_2
+.. lv_example:: widgets/list/lv_example_list_2
   :language: c

examples/widgets/lottie/index.rst

@@ -1,11 +1,11 @@
 Load a Lottie animation from an array
 -------------------------------------
 
-.. lv_example:: lv_example_lottie_1
+.. lv_example:: widgets/lottie/lv_example_lottie_1
   :language: c
 
 Load a Lottie animation from file
 ---------------------------------
 
-.. lv_example:: lv_example_lottie_2
+.. lv_example:: widgets/lottie/lv_example_lottie_2
   :language: c

examples/widgets/menu/index.rst

@@ -2,30 +2,30 @@
 Simple Menu
 -----------
 
-.. lv_example:: lv_example_menu_1
+.. lv_example:: widgets/menu/lv_example_menu_1
   :language: c
 
 Simple Menu with root btn
 -------------------------
 
-.. lv_example:: lv_example_menu_2
+.. lv_example:: widgets/menu/lv_example_menu_2
   :language: c
 
 Simple Menu with custom header
 ------------------------------
 
-.. lv_example:: lv_example_menu_3
+.. lv_example:: widgets/menu/lv_example_menu_3
   :language: c
 
 Simple Menu with floating btn to add new menu page
 --------------------------------------------------
 
-.. lv_example:: lv_example_menu_4
+.. lv_example:: widgets/menu/lv_example_menu_4
   :language: c
 
 Complex Menu
 ------------
 
-.. lv_example:: lv_example_menu_5
+.. lv_example:: widgets/menu/lv_example_menu_5
   :language: c
 

examples/widgets/msgbox/index.rst

@@ -1,17 +1,16 @@
-Message Box
-***********
+.. example_heading: Message Box
 
 
 Simple Message box
 ------------------
 
-.. lv_example:: lv_example_msgbox_1
+.. lv_example:: widgets/msgbox/lv_example_msgbox_1
   :language: c
 
 Scrolling and styled Message box
 --------------------------------
 
-.. lv_example:: lv_example_msgbox_2
+.. lv_example:: widgets/msgbox/lv_example_msgbox_2
   :language: c
 
 Message box with blurred background

examples/widgets/obj/index.rst

@@ -1,21 +1,20 @@
-Base Widget
-***********
+.. example_heading: Base Widget
 
 
 Base objects with custom styles
 -------------------------------
 
-.. lv_example:: lv_example_obj_1
+.. lv_example:: widgets/obj/lv_example_obj_1
   :language: c
 
 Make an object draggable
 ------------------------
 
-.. lv_example:: lv_example_obj_2
+.. lv_example:: widgets/obj/lv_example_obj_2
   :language: c
 
 Transform object using a 3x3 matrix
 -----------------------------------
 
-.. lv_example:: lv_example_obj_3
+.. lv_example:: widgets/obj/lv_example_obj_3
   :language: c

examples/widgets/roller/index.rst

@@ -2,18 +2,18 @@
 Simple Roller
 -------------
 
-.. lv_example:: lv_example_roller_1
+.. lv_example:: widgets/roller/lv_example_roller_1
   :language: c
 
 Styling the roller
 ------------------
 
-.. lv_example:: lv_example_roller_2
+.. lv_example:: widgets/roller/lv_example_roller_2
   :language: c
 
 add fade mask to roller
 -----------------------
 
-.. lv_example:: lv_example_roller_3
+.. lv_example:: widgets/roller/lv_example_roller_3
   :language: c
 

examples/widgets/scale/index.rst

@@ -1,76 +1,77 @@
 A simple horizontal scale
 -------------------------
 
-.. lv_example:: lv_example_scale_1
+.. lv_example:: widgets/scale/lv_example_scale_1
   :language: c
 
 An vertical scale with section and custom styling
 -------------------------------------------------
 
-.. lv_example:: lv_example_scale_2
+.. lv_example:: widgets/scale/lv_example_scale_2
   :language: c
 
 A simple round scale
 --------------------
 
-.. lv_example:: lv_example_scale_3
+.. lv_example:: widgets/scale/lv_example_scale_3
   :language: c
 
 A round scale with section and custom styling
 ---------------------------------------------
 
-.. lv_example:: lv_example_scale_4
+.. lv_example:: widgets/scale/lv_example_scale_4
   :language: c
 
 A scale with section and custom styling
 ---------------------------------------
 
-.. lv_example:: lv_example_scale_5
+.. lv_example:: widgets/scale/lv_example_scale_5
   :language: c
 
 A round scale with multiple needles, resembling a clock
 -------------------------------------------------------
 
-.. lv_example:: lv_example_scale_6
+.. lv_example:: widgets/scale/lv_example_scale_6
   :language: c
 
 Customizing scale major tick label color with `LV_EVENT_DRAW_TASK_ADDED` event
 ------------------------------------------------------------------------------
 
-.. lv_example:: lv_example_scale_7
+.. lv_example:: widgets/scale/lv_example_scale_7
   :language: c
 
 A round scale with labels rotated and translated
 ------------------------------------------------
 
-.. lv_example:: lv_example_scale_8
+.. lv_example:: widgets/scale/lv_example_scale_8
   :language: c
 
 A horizontal scale with labels rotated and translated
 -----------------------------------------------------
 
-.. lv_example:: lv_example_scale_9
+.. lv_example:: widgets/scale/lv_example_scale_9
   :language: c
 
 A round scale style simulating a Heart Rate monitor
 ---------------------------------------------------
 
-.. lv_example:: lv_example_scale_10
+.. lv_example:: widgets/scale/lv_example_scale_10
   :language: c
 
 A round scale style simulating a sunset/sunrise widget
 ------------------------------------------------------
 
-.. lv_example:: lv_example_scale_11
+.. lv_example:: widgets/scale/lv_example_scale_11
   :language: c
 
 A round scale style simulating a compass
 ----------------------------------------
 
-.. lv_example:: lv_example_scale_12
+.. lv_example:: widgets/scale/lv_example_scale_12
   :language: c
 
 Axis ticks and labels with scrolling on a chart
 -----------------------------------------------
-.. lv_example:: ../chart/lv_example_chart_2
+
+.. lv_example:: widgets/chart/lv_example_chart_2
   :language: c

examples/widgets/slider/index.rst

@@ -2,23 +2,23 @@
 Simple Slider
 -------------
 
-.. lv_example:: lv_example_slider_1
+.. lv_example:: widgets/slider/lv_example_slider_1
   :language: c
 
 Slider with custom style
 ------------------------
 
-.. lv_example:: lv_example_slider_2
+.. lv_example:: widgets/slider/lv_example_slider_2
   :language: c
 
 Slider with extended drawer
 ---------------------------
 
-.. lv_example:: lv_example_slider_3
+.. lv_example:: widgets/slider/lv_example_slider_3
   :language: c
 
 Slider with opposite direction
 ------------------------------
 
-.. lv_example:: lv_example_slider_4
+.. lv_example:: widgets/slider/lv_example_slider_4
   :language: c

examples/widgets/span/index.rst

@@ -2,6 +2,6 @@
 Span with custom styles
 -----------------------
 
-.. lv_example:: lv_example_span_1
+.. lv_example:: widgets/span/lv_example_span_1
   :language: c
 

examples/widgets/spinbox/index.rst

@@ -2,6 +2,6 @@
 Simple Spinbox
 --------------
 
-.. lv_example:: lv_example_spinbox_1
+.. lv_example:: widgets/spinbox/lv_example_spinbox_1
   :language: c
 

examples/widgets/spinner/index.rst

@@ -2,6 +2,6 @@
 Simple spinner
 --------------
 
-.. lv_example:: lv_example_spinner_1
+.. lv_example:: widgets/spinner/lv_example_spinner_1
   :language: c
 

examples/widgets/switch/index.rst

@@ -2,13 +2,13 @@
 Simple Switch
 -------------
 
-.. lv_example:: lv_example_switch_1
+.. lv_example:: widgets/switch/lv_example_switch_1
   :language: c
 
 
 Switch Orientation
 -------------------
 
-.. lv_example:: lv_example_switch_2
+.. lv_example:: widgets/switch/lv_example_switch_2
   :language: c
 

examples/widgets/table/index.rst

@@ -3,12 +3,12 @@
 Simple table
 ------------
 
-.. lv_example:: lv_example_table_1
+.. lv_example:: widgets/table/lv_example_table_1
   :language: c
 
 Lightweighted list from table
 -----------------------------
 
-.. lv_example:: lv_example_table_2
+.. lv_example:: widgets/table/lv_example_table_2
   :language: c
 

examples/widgets/tabview/index.rst

@@ -2,13 +2,13 @@
 Simple Tabview
 --------------
 
-.. lv_example:: lv_example_tabview_1
+.. lv_example:: widgets/tabview/lv_example_tabview_1
   :language: c
 
 Tabs on the left, styling and no scrolling
 -------------------------------------------
 
-.. lv_example:: lv_example_tabview_2
+.. lv_example:: widgets/tabview/lv_example_tabview_2
   :language: c
 
 

examples/widgets/textarea/index.rst

@@ -2,24 +2,24 @@
 Simple Text area
 ----------------
 
-.. lv_example:: lv_example_textarea_1
+.. lv_example:: widgets/textarea/lv_example_textarea_1
   :language: c
 
 
 Text area with password field
 -----------------------------
 
-.. lv_example:: lv_example_textarea_2
+.. lv_example:: widgets/textarea/lv_example_textarea_2
   :language: c
 
 Text auto-formatting
 --------------------
 
-.. lv_example:: lv_example_textarea_3
+.. lv_example:: widgets/textarea/lv_example_textarea_3
   :language: c
 
 Text area cursor styling
 ------------------------
 
-.. lv_example:: lv_example_textarea_4
+.. lv_example:: widgets/textarea/lv_example_textarea_4
   :language: c

examples/widgets/tileview/index.rst

@@ -2,6 +2,6 @@
 Tileview with content
 ---------------------
 
-.. lv_example:: lv_example_tileview_1
+.. lv_example:: widgets/tileview/lv_example_tileview_1
   :language: c
 

examples/widgets/win/index.rst

@@ -1,10 +1,9 @@
-Window
-******
+.. example_heading: Window
 
 
 Simple window
 -------------
 
-.. lv_example:: lv_example_win_1
+.. lv_example:: widgets/win/lv_example_win_1
   :language: c