feat(docs) improvements to examples

* examples are now loaded only when they are visible on your screen
* stylistic improvements
* support for a description

.gitignore

@@ -8,6 +8,7 @@ scripts/cppcheck_res.txt
 scripts/built_in_font/lv_font_*
 docs/doxygen_html
 docs/xml
+docs/examples.md
 docs/out_latex
 docs/_static/built_lv_examples
 docs/LVGL.pdf

docs/_ext/lv_example.py

@@ -16,7 +16,8 @@ class LvExample(Directive):
     required_arguments = 1
     option_spec = {
         'excluded_languages': excluded_list,
-        'language': directives.unchanged
+        'language': directives.unchanged,
+        'description': directives.unchanged
     }
     def get_example_code_path(self, example_path, language):
         return os.path.abspath("../examples/" + example_path + "." + language)
@@ -27,8 +28,10 @@ class LvExample(Directive):
             return 'C'
         else:
             return language
-    def embed_code(self, example_file, example_path, language):
+    def github_path(self, example_path, language):
         env = self.state.document.settings.env
+        return f"https://github.com/lvgl/lvgl/blob/{env.config.repo_commit_hash}/examples/{example_path}.{language}"
+    def embed_code(self, example_file, example_path, language, buttons={}):
         toggle = nodes.container('', literal_block=False, classes=['toggle'])
         header = nodes.container('', literal_block=False, classes=['header'])
         toggle.append(header)
@@ -40,7 +43,10 @@ class LvExample(Directive):
         literal_list = nodes.literal_block(contents, contents)
         literal_list['language'] = language
         toggle.append(literal_list)
-        header.append(nodes.raw(text=f"<p>{self.human_language_name(language)} code &nbsp; <a onclick=\"event.stopPropagation();\" class='fa fa-github' href='https://github.com/lvgl/lvgl/blob/{env.config.repo_commit_hash}/examples/{example_path}.{language}'>&nbsp; view on GitHub</a></p>", format='html'))
+        paragraph_node = nodes.raw(text=f"<p>{self.human_language_name(language)} code &nbsp;</p>", format='html')
+        for text, url in buttons.items():
+            paragraph_node.append(nodes.raw(text=f"<a class='lv-example-link-button' onclick=\"event.stopPropagation();\" href='{url}'>{text}</a>", format='html'))
+        header.append(paragraph_node)
         return toggle
     def run(self):
         example_path = self.arguments[0]
@@ -50,20 +56,27 @@ class LvExample(Directive):
 
         env = self.state.document.settings.env
 
-        iframe_node = nodes.raw(text=f"<iframe loading='lazy' class='lv-example' src='/{env.config.version}/_static/built_lv_examples?example={example_name}&w=320&h=240'></iframe>", format='html')
+        iframe_html = ""
-        micropython_node = nodes.raw(text=f"<a style='display: inline-block; margin-bottom: 1rem;' target='_blank' href='https://sim.lvgl.io/v{env.config.version}/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/{env.config.repo_commit_hash}/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/{env.config.repo_commit_hash}/examples/{example_path}.py'>Click to try in the MicroPython simulator!</a>", format='html')
         
         c_path = self.get_example_code_path(example_path, 'c')
         py_path = self.get_example_code_path(example_path, 'py')
 
-        c_code = self.embed_code(c_path, example_path, 'c')
+        c_code = self.embed_code(c_path, example_path, 'c', buttons={
-        py_code = self.embed_code(py_path, example_path, 'py')
+            '<i class="fa fa-github"></i>&nbsp;GitHub': self.github_path(example_path, 'c')
+        })
+        py_code = self.embed_code(py_path, example_path, 'py', buttons={
+            '<i class="fa fa-github"></i>&nbsp;GitHub': self.github_path(example_path, 'py'),
+            '<i class="fa fa-play"></i>&nbsp;Simulator': f"https://sim.lvgl.io/v{env.config.version}/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/{env.config.repo_commit_hash}/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/{env.config.repo_commit_hash}/examples/{example_path}.py"
+        })
 
         if not 'c' in excluded_languages:   
             if env.app.tags.has('html'):
-                node_list.append(iframe_node)
+                iframe_html = f"<div class='lv-example' data-real-src='/{env.config.version}/_static/built_lv_examples?example={example_name}&w=320&h=240'></div>"
-        if not 'py' in excluded_languages:
+
-            node_list.append(micropython_node)
+        description_html = f"<div class='lv-example-description'>{self.options.get('description', '')}</div>"
+        layout_node = nodes.raw(text=f"<div class='lv-example-container'>{iframe_html}{description_html}</div>", format='html')
+
+        node_list.append(layout_node)
         if not 'c' in excluded_languages:
             node_list.append(c_code)
         if not 'py' in excluded_languages:

docs/_static/css/custom.css

@@ -19,7 +19,7 @@ span.pre:first-child
 
 code.sig-name
 {
-  //margin-left:8px;
+  /*margin-left:8px;*/
 }
 
 .toggle .header {
@@ -64,11 +64,42 @@ code.sig-name
   transform: translate(0, -10px);
 }
 
-.lv-example {
+.lv-example, .lv-example > iframe {
   border: none;
   outline: none;
   padding: none;
   display: block;
   width: 320px;
   height: 240px;
+  flex: none;
+  position: relative;
+}
+.lv-example > iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.lv-example-container {
+    display: flex;
+}
+.lv-example-description {
+    flex: 1 1 auto;
+}
+
+.lv-example-link-button {
+    display: inline-block;
+    padding: 4px 8px;
+    border-radius: 4px;
+    background-color: #2980b9;
+    color: white;
+    margin: 0 4px;
+}
+.lv-example-link-button:hover {
+    color: white;
+    filter: brightness(120%);
+}
+
+.lv-example-link-button:visited {
+    color: white;
 }

docs/_templates/page.html

@@ -51,5 +51,32 @@ document.addEventListener('DOMContentLoaded', (event) => {
     });
     
 })
+document.addEventListener('DOMContentLoaded', (event) => {
+    function onIntersection(entries) {
+        entries.forEach(entry => {
+            let currentlyLoaded = entry.target.getAttribute("data-is-loaded") == "true";
+            let shouldBeLoaded = entry.intersectionRatio > 0;
+            if(currentlyLoaded != shouldBeLoaded) {
+                entry.target.setAttribute("data-is-loaded", shouldBeLoaded);
+                if(shouldBeLoaded) {
+                    let iframe = document.createElement("iframe");
+                    iframe.src = entry.target.getAttribute("data-real-src");
+                    entry.target.appendChild(iframe);
+                } else {
+                    let iframe = entry.target.querySelector("iframe");
+                    iframe.parentNode.removeChild(iframe);
+                }
+            }
+        });
+    }
+    const config = {
+        rootMargin: '50px 0px',
+        threshold: 0.01
+    };
+    let observer = new IntersectionObserver(onIntersection, config);
+    document.querySelectorAll(".lv-example").forEach(iframe => {
+        observer.observe(iframe);
+    });
+});
 </script>
 {% endblock %}

docs/example_list.py

@@ -1,5 +1,7 @@
+#!/usr/bin/env python3
 import os
 
+
 def process_index_rst(path):
 #  print(path)
   with open(path) as fp:
@@ -73,10 +75,11 @@ layouts = {
 def print_item(path, lvl, d, fout):
   for k in d:
     v = d[k]
-    b = os.path.basename(k)
     if k.startswith(path + "/lv_example_"):
      fout.write("#"*lvl + " " + v + "\n")
-     fout.write('<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=' + b +'&amp;w=320&amp;h=240"></iframe>\n')
+     fout.write('```eval_rst\n')
+     fout.write(f".. lv_example:: {k}\n")
+     fout.write('```\n')
      fout.write("\n")
 
 def exec():

docs/examples.md

@@ -1,364 +0,0 @@
-```eval_rst
-.. include:: /header.rst
-:github_url: |github_link_base|/examples.md
-```
-
-# Examples
-## Get started
-### A button with a label and react on click event
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_get_started_1&amp;w=320&amp;h=240"></iframe>
-
-### Create styles from scratch for buttons
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_get_started_2&amp;w=320&amp;h=240"></iframe>
-
-### Create a slider and write its value on a label
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_get_started_3&amp;w=320&amp;h=240"></iframe>
-
-## Styles
-### Size styles
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_1&amp;w=320&amp;h=240"></iframe>
-
-### Background styles
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_2&amp;w=320&amp;h=240"></iframe>
-
-### Border styles
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_3&amp;w=320&amp;h=240"></iframe>
-
-### Outline styles
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_4&amp;w=320&amp;h=240"></iframe>
-
-### Shadow styles
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_5&amp;w=320&amp;h=240"></iframe>
-
-### Image styles
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_6&amp;w=320&amp;h=240"></iframe>
-
-### Text styles
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_8&amp;w=320&amp;h=240"></iframe>
-
-### Line styles
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_9&amp;w=320&amp;h=240"></iframe>
-
-### Transition
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_10&amp;w=320&amp;h=240"></iframe>
-
-### Using multiple styles
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_11&amp;w=320&amp;h=240"></iframe>
-
-### Local styles
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_12&amp;w=320&amp;h=240"></iframe>
-
-### Add styles to parts and states
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_13&amp;w=320&amp;h=240"></iframe>
-
-### Extending the current theme
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_14&amp;w=320&amp;h=240"></iframe>
-
-## Animations
-### Start animation on an event
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_anim_1&amp;w=320&amp;h=240"></iframe>
-
-### Playback animation
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_anim_2&amp;w=320&amp;h=240"></iframe>
-
-## Events
-### Button click event
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_event_1&amp;w=320&amp;h=240"></iframe>
-
-### Handle multiple events
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_event_2&amp;w=320&amp;h=240"></iframe>
-
-### Event bubbling
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_event_3&amp;w=320&amp;h=240"></iframe>
-
-## Layouts
-### Flex
-#### A simple row and a column layout with flexbox
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_1&amp;w=320&amp;h=240"></iframe>
-
-#### Arrange items in rows with wrap and even spacing
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_2&amp;w=320&amp;h=240"></iframe>
-
-#### Demonstrate flex grow
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_3&amp;w=320&amp;h=240"></iframe>
-
-#### Demonstrate flex grow.
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_4&amp;w=320&amp;h=240"></iframe>
-
-#### Demonstrate column and row gap style properties
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_5&amp;w=320&amp;h=240"></iframe>
-
-#### RTL base direction changes order of the items
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_6&amp;w=320&amp;h=240"></iframe>
-
-### Grid
-#### A simple grid
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_1&amp;w=320&amp;h=240"></iframe>
-
-#### Demonstrate cell placement and span
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_2&amp;w=320&amp;h=240"></iframe>
-
-#### Demonstrate grid's "free unit"
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_3&amp;w=320&amp;h=240"></iframe>
-
-#### Demonstrate track placement
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_4&amp;w=320&amp;h=240"></iframe>
-
-#### Demonstrate column and row gap
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_5&amp;w=320&amp;h=240"></iframe>
-
-#### Demonstrate RTL direction on grid
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_6&amp;w=320&amp;h=240"></iframe>
-
-## Scrolling
-### Nested scrolling
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_1&amp;w=320&amp;h=240"></iframe>
-
-### Snapping
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_2&amp;w=320&amp;h=240"></iframe>
-
-### Floating button
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_3&amp;w=320&amp;h=240"></iframe>
-
-### Styling the scrollbars
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_4&amp;w=320&amp;h=240"></iframe>
-
-### Right to left scrolling
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_5&amp;w=320&amp;h=240"></iframe>
-
-### Translate on scroll
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_6&amp;w=320&amp;h=240"></iframe>
-
-## Widgets
-### Base object
-#### Base objects with custom styles
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_obj_1&amp;w=320&amp;h=240"></iframe>
-
-#### Make an object draggable
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_obj_2&amp;w=320&amp;h=240"></iframe>
-
-### Arc
-#### Simple Arc
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_arc_1&amp;w=320&amp;h=240"></iframe>
-
-#### Loader with Arc
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_arc_2&amp;w=320&amp;h=240"></iframe>
-
-### Bar
-#### Simple Bar
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_1&amp;w=320&amp;h=240"></iframe>
-
-#### Styling a bar
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_2&amp;w=320&amp;h=240"></iframe>
-
-#### Temperature meter
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_3&amp;w=320&amp;h=240"></iframe>
-
-#### Stripe pattern and range value
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_4&amp;w=320&amp;h=240"></iframe>
-
-#### Bar with RTL and RTL base direction
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_5&amp;w=320&amp;h=240"></iframe>
-
-#### Custom drawr to show the current value
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_6&amp;w=320&amp;h=240"></iframe>
-
-### Button
-#### Simple Buttons
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btn_1&amp;w=320&amp;h=240"></iframe>
-
-#### Styling buttons
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btn_2&amp;w=320&amp;h=240"></iframe>
-
-#### Gummy button
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btn_3&amp;w=320&amp;h=240"></iframe>
-
-### Button matrix
-#### Simple Button matrix
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btnmatrix_1&amp;w=320&amp;h=240"></iframe>
-
-#### Custom buttons
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btnmatrix_2&amp;w=320&amp;h=240"></iframe>
-
-#### Pagination
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btnmatrix_3&amp;w=320&amp;h=240"></iframe>
-
-### Calendar
-#### Calendar with header
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_calendar_1&amp;w=320&amp;h=240"></iframe>
-
-### Canvas
-#### Drawing on the Canvas and rotate
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_canvas_1&amp;w=320&amp;h=240"></iframe>
-
-#### Transparent Canvas with chroma keying
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_canvas_2&amp;w=320&amp;h=240"></iframe>
-
-### Chart
-#### Line Chart
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_1&amp;w=320&amp;h=240"></iframe>
-
-#### Faded area line chart with custom division lines
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_2&amp;w=320&amp;h=240"></iframe>
-
-#### Axis ticks and labels with scrolling
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_3&amp;w=320&amp;h=240"></iframe>
-
-#### Show the value of the pressed points
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_4&amp;w=320&amp;h=240"></iframe>
-
-#### Display 1000 data points with zooming and scrolling
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_5&amp;w=320&amp;h=240"></iframe>
-
-#### Show cursor on the clicked point
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_6&amp;w=320&amp;h=240"></iframe>
-
-#### Scatter chart
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_7&amp;w=320&amp;h=240"></iframe>
-
-### Checkbox
-#### Simple Checkboxes
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_checkbox_1&amp;w=320&amp;h=240"></iframe>
-
-### Colorwheel
-#### Simple Colorwheel
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_colorwheel_1&amp;w=320&amp;h=240"></iframe>
-
-### Dropdown
-#### Simple Drop down list
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_dropdown_1&amp;w=320&amp;h=240"></iframe>
-
-#### Drop down in four directions
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_dropdown_2&amp;w=320&amp;h=240"></iframe>
-
-#### Menu
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_dropdown_3&amp;w=320&amp;h=240"></iframe>
-
-### Image
-#### Image from variable and symbol
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_img_1&amp;w=320&amp;h=240"></iframe>
-
-#### Image recoloring
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_img_2&amp;w=320&amp;h=240"></iframe>
-
-#### Rotate and zoom
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_img_3&amp;w=320&amp;h=240"></iframe>
-
-#### Image offset and styling
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_img_4&amp;w=320&amp;h=240"></iframe>
-
-### Image button
-#### Simple Image button
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_imgbtn_1&amp;w=320&amp;h=240"></iframe>
-
-### Keyboard
-#### Keyboard with text area
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_keyboard_1&amp;w=320&amp;h=240"></iframe>
-
-### Label
-#### Line wrap, recoloring and scrolling
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_label_1&amp;w=320&amp;h=240"></iframe>
-
-#### Text shadow
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_label_2&amp;w=320&amp;h=240"></iframe>
-
-#### Show LTR, RTL and Chinese texts
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_label_3&amp;w=320&amp;h=240"></iframe>
-
-### LED
-#### LED with custom style
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_led_1&amp;w=320&amp;h=240"></iframe>
-
-### Line
-#### Simple Line
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_line_1&amp;w=320&amp;h=240"></iframe>
-
-### List
-#### Simple List
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_list_1&amp;w=320&amp;h=240"></iframe>
-
-### Meter
-#### Simple meter
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_1&amp;w=320&amp;h=240"></iframe>
-
-#### A meter with multiple arcs
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_2&amp;w=320&amp;h=240"></iframe>
-
-#### A clock from a meter
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_3&amp;w=320&amp;h=240"></iframe>
-
-#### Pie chart
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_4&amp;w=320&amp;h=240"></iframe>
-
-### Message box
-#### Simple Message box
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_msgbox_1&amp;w=320&amp;h=240"></iframe>
-
-### Roller
-#### Simple Roller
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_roller_1&amp;w=320&amp;h=240"></iframe>
-
-#### Styling the roller
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_roller_2&amp;w=320&amp;h=240"></iframe>
-
-#### add fade mask to roller
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_roller_3&amp;w=320&amp;h=240"></iframe>
-
-### Slider
-#### Simple Slider
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_slider_1&amp;w=320&amp;h=240"></iframe>
-
-#### Slider with custom style
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_slider_2&amp;w=320&amp;h=240"></iframe>
-
-#### Slider with extended drawer
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_slider_3&amp;w=320&amp;h=240"></iframe>
-
-### Span
-#### Span with custom styles
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_span_1&amp;w=320&amp;h=240"></iframe>
-
-### Spinbox
-#### Simple Spinbox
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_spinbox_1&amp;w=320&amp;h=240"></iframe>
-
-### Spinner
-#### Simple spinner
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_spinner_1&amp;w=320&amp;h=240"></iframe>
-
-### Switch
-#### Simple Switch
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_switch_1&amp;w=320&amp;h=240"></iframe>
-
-### Table
-#### Simple table
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_table_1&amp;w=320&amp;h=240"></iframe>
-
-#### Lightweighted list from table
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_table_2&amp;w=320&amp;h=240"></iframe>
-
-### Tabview
-#### Simple Tabview
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_tabview_1&amp;w=320&amp;h=240"></iframe>
-
-#### Tabs on the left, styling and no scrolling
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_tabview_2&amp;w=320&amp;h=240"></iframe>
-
-### Textarea
-#### Simple Text area
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_textarea_1&amp;w=320&amp;h=240"></iframe>
-
-#### Text area with password field
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_textarea_2&amp;w=320&amp;h=240"></iframe>
-
-#### Text auto-formatting
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_textarea_3&amp;w=320&amp;h=240"></iframe>
-
-### Tabview
-#### Tileview with content
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_tileview_1&amp;w=320&amp;h=240"></iframe>
-
-### Window
-#### Simple window
-<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_win_1&amp;w=320&amp;h=240"></iframe>
-

examples/widgets/arc/index.rst

@@ -4,6 +4,7 @@ Simple Arc
 
 .. lv_example:: widgets/arc/lv_example_arc_1
   :language: c
+  :description: A simple example to demonstrate the use of an arc.
 
 Loader with Arc 
 """"""""""""""""