mirror of
https://github.com/lvgl/lvgl.git
synced 2024-11-23 09:43:41 +08:00
feat(docs) improvements to examples
* examples are now loaded only when they are visible on your screen * stylistic improvements * support for a description
This commit is contained in:
Themba Dube
parent
7c1eb00645
commit
4b8c73a577
1
.gitignore
vendored
1
.gitignore
vendored
@ -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
|
||||
|
||||
@ -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 <a onclick=\"event.stopPropagation();\" class='fa fa-github' href='https://github.com/lvgl/lvgl/blob/{env.config.repo_commit_hash}/examples/{example_path}.{language}'> view on GitHub</a></p>", format='html'))
|
||||
paragraph_node = nodes.raw(text=f"<p>{self.human_language_name(language)} code </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')
|
||||
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')
|
||||
|
||||
iframe_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')
|
||||
py_code = self.embed_code(py_path, example_path, 'py')
|
||||
c_code = self.embed_code(c_path, example_path, 'c', buttons={
|
||||
'<i class="fa fa-github"></i> GitHub': self.github_path(example_path, 'c')
|
||||
})
|
||||
py_code = self.embed_code(py_path, example_path, 'py', buttons={
|
||||
'<i class="fa fa-github"></i> GitHub': self.github_path(example_path, 'py'),
|
||||
'<i class="fa fa-play"></i> 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)
|
||||
if not 'py' in excluded_languages:
|
||||
node_list.append(micropython_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>"
|
||||
|
||||
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:
|
||||
|
||||
35
docs/_static/css/custom.css
vendored
35
docs/_static/css/custom.css
vendored
@ -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;
|
||||
}
|
||||
27
docs/_templates/page.html
vendored
27
docs/_templates/page.html
vendored
@ -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 %}
|
||||
|
||||
@ -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 +'&w=320&h=240"></iframe>\n')
|
||||
fout.write('```eval_rst\n')
|
||||
fout.write(f".. lv_example:: {k}\n")
|
||||
fout.write('```\n')
|
||||
fout.write("\n")
|
||||
|
||||
def exec():
|
||||
|
||||
364
docs/examples.md
364
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&w=320&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&w=320&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&w=320&h=240"></iframe>
|
||||
|
||||
## Styles
|
||||
### Size styles
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_1&w=320&h=240"></iframe>
|
||||
|
||||
### Background styles
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_2&w=320&h=240"></iframe>
|
||||
|
||||
### Border styles
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_3&w=320&h=240"></iframe>
|
||||
|
||||
### Outline styles
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_4&w=320&h=240"></iframe>
|
||||
|
||||
### Shadow styles
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_5&w=320&h=240"></iframe>
|
||||
|
||||
### Image styles
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_6&w=320&h=240"></iframe>
|
||||
|
||||
### Text styles
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_8&w=320&h=240"></iframe>
|
||||
|
||||
### Line styles
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_9&w=320&h=240"></iframe>
|
||||
|
||||
### Transition
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_10&w=320&h=240"></iframe>
|
||||
|
||||
### Using multiple styles
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_11&w=320&h=240"></iframe>
|
||||
|
||||
### Local styles
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_12&w=320&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&w=320&h=240"></iframe>
|
||||
|
||||
### Extending the current theme
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_14&w=320&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&w=320&h=240"></iframe>
|
||||
|
||||
### Playback animation
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_anim_2&w=320&h=240"></iframe>
|
||||
|
||||
## Events
|
||||
### Button click event
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_event_1&w=320&h=240"></iframe>
|
||||
|
||||
### Handle multiple events
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_event_2&w=320&h=240"></iframe>
|
||||
|
||||
### Event bubbling
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_event_3&w=320&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&w=320&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&w=320&h=240"></iframe>
|
||||
|
||||
#### Demonstrate flex grow
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_3&w=320&h=240"></iframe>
|
||||
|
||||
#### Demonstrate flex grow.
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_4&w=320&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&w=320&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&w=320&h=240"></iframe>
|
||||
|
||||
### Grid
|
||||
#### A simple grid
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_1&w=320&h=240"></iframe>
|
||||
|
||||
#### Demonstrate cell placement and span
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_2&w=320&h=240"></iframe>
|
||||
|
||||
#### Demonstrate grid's "free unit"
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_3&w=320&h=240"></iframe>
|
||||
|
||||
#### Demonstrate track placement
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_4&w=320&h=240"></iframe>
|
||||
|
||||
#### Demonstrate column and row gap
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_5&w=320&h=240"></iframe>
|
||||
|
||||
#### Demonstrate RTL direction on grid
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_6&w=320&h=240"></iframe>
|
||||
|
||||
## Scrolling
|
||||
### Nested scrolling
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_1&w=320&h=240"></iframe>
|
||||
|
||||
### Snapping
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_2&w=320&h=240"></iframe>
|
||||
|
||||
### Floating button
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_3&w=320&h=240"></iframe>
|
||||
|
||||
### Styling the scrollbars
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_4&w=320&h=240"></iframe>
|
||||
|
||||
### Right to left scrolling
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_5&w=320&h=240"></iframe>
|
||||
|
||||
### Translate on scroll
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_6&w=320&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&w=320&h=240"></iframe>
|
||||
|
||||
#### Make an object draggable
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_obj_2&w=320&h=240"></iframe>
|
||||
|
||||
### Arc
|
||||
#### Simple Arc
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_arc_1&w=320&h=240"></iframe>
|
||||
|
||||
#### Loader with Arc
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_arc_2&w=320&h=240"></iframe>
|
||||
|
||||
### Bar
|
||||
#### Simple Bar
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_1&w=320&h=240"></iframe>
|
||||
|
||||
#### Styling a bar
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_2&w=320&h=240"></iframe>
|
||||
|
||||
#### Temperature meter
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_3&w=320&h=240"></iframe>
|
||||
|
||||
#### Stripe pattern and range value
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_4&w=320&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&w=320&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&w=320&h=240"></iframe>
|
||||
|
||||
### Button
|
||||
#### Simple Buttons
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btn_1&w=320&h=240"></iframe>
|
||||
|
||||
#### Styling buttons
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btn_2&w=320&h=240"></iframe>
|
||||
|
||||
#### Gummy button
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btn_3&w=320&h=240"></iframe>
|
||||
|
||||
### Button matrix
|
||||
#### Simple Button matrix
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btnmatrix_1&w=320&h=240"></iframe>
|
||||
|
||||
#### Custom buttons
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btnmatrix_2&w=320&h=240"></iframe>
|
||||
|
||||
#### Pagination
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btnmatrix_3&w=320&h=240"></iframe>
|
||||
|
||||
### Calendar
|
||||
#### Calendar with header
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_calendar_1&w=320&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&w=320&h=240"></iframe>
|
||||
|
||||
#### Transparent Canvas with chroma keying
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_canvas_2&w=320&h=240"></iframe>
|
||||
|
||||
### Chart
|
||||
#### Line Chart
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_1&w=320&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&w=320&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&w=320&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&w=320&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&w=320&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&w=320&h=240"></iframe>
|
||||
|
||||
#### Scatter chart
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_7&w=320&h=240"></iframe>
|
||||
|
||||
### Checkbox
|
||||
#### Simple Checkboxes
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_checkbox_1&w=320&h=240"></iframe>
|
||||
|
||||
### Colorwheel
|
||||
#### Simple Colorwheel
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_colorwheel_1&w=320&h=240"></iframe>
|
||||
|
||||
### Dropdown
|
||||
#### Simple Drop down list
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_dropdown_1&w=320&h=240"></iframe>
|
||||
|
||||
#### Drop down in four directions
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_dropdown_2&w=320&h=240"></iframe>
|
||||
|
||||
#### Menu
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_dropdown_3&w=320&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&w=320&h=240"></iframe>
|
||||
|
||||
#### Image recoloring
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_img_2&w=320&h=240"></iframe>
|
||||
|
||||
#### Rotate and zoom
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_img_3&w=320&h=240"></iframe>
|
||||
|
||||
#### Image offset and styling
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_img_4&w=320&h=240"></iframe>
|
||||
|
||||
### Image button
|
||||
#### Simple Image button
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_imgbtn_1&w=320&h=240"></iframe>
|
||||
|
||||
### Keyboard
|
||||
#### Keyboard with text area
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_keyboard_1&w=320&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&w=320&h=240"></iframe>
|
||||
|
||||
#### Text shadow
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_label_2&w=320&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&w=320&h=240"></iframe>
|
||||
|
||||
### LED
|
||||
#### LED with custom style
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_led_1&w=320&h=240"></iframe>
|
||||
|
||||
### Line
|
||||
#### Simple Line
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_line_1&w=320&h=240"></iframe>
|
||||
|
||||
### List
|
||||
#### Simple List
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_list_1&w=320&h=240"></iframe>
|
||||
|
||||
### Meter
|
||||
#### Simple meter
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_1&w=320&h=240"></iframe>
|
||||
|
||||
#### A meter with multiple arcs
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_2&w=320&h=240"></iframe>
|
||||
|
||||
#### A clock from a meter
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_3&w=320&h=240"></iframe>
|
||||
|
||||
#### Pie chart
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_4&w=320&h=240"></iframe>
|
||||
|
||||
### Message box
|
||||
#### Simple Message box
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_msgbox_1&w=320&h=240"></iframe>
|
||||
|
||||
### Roller
|
||||
#### Simple Roller
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_roller_1&w=320&h=240"></iframe>
|
||||
|
||||
#### Styling the roller
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_roller_2&w=320&h=240"></iframe>
|
||||
|
||||
#### add fade mask to roller
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_roller_3&w=320&h=240"></iframe>
|
||||
|
||||
### Slider
|
||||
#### Simple Slider
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_slider_1&w=320&h=240"></iframe>
|
||||
|
||||
#### Slider with custom style
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_slider_2&w=320&h=240"></iframe>
|
||||
|
||||
#### Slider with extended drawer
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_slider_3&w=320&h=240"></iframe>
|
||||
|
||||
### Span
|
||||
#### Span with custom styles
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_span_1&w=320&h=240"></iframe>
|
||||
|
||||
### Spinbox
|
||||
#### Simple Spinbox
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_spinbox_1&w=320&h=240"></iframe>
|
||||
|
||||
### Spinner
|
||||
#### Simple spinner
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_spinner_1&w=320&h=240"></iframe>
|
||||
|
||||
### Switch
|
||||
#### Simple Switch
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_switch_1&w=320&h=240"></iframe>
|
||||
|
||||
### Table
|
||||
#### Simple table
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_table_1&w=320&h=240"></iframe>
|
||||
|
||||
#### Lightweighted list from table
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_table_2&w=320&h=240"></iframe>
|
||||
|
||||
### Tabview
|
||||
#### Simple Tabview
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_tabview_1&w=320&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&w=320&h=240"></iframe>
|
||||
|
||||
### Textarea
|
||||
#### Simple Text area
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_textarea_1&w=320&h=240"></iframe>
|
||||
|
||||
#### Text area with password field
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_textarea_2&w=320&h=240"></iframe>
|
||||
|
||||
#### Text auto-formatting
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_textarea_3&w=320&h=240"></iframe>
|
||||
|
||||
### Tabview
|
||||
#### Tileview with content
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_tileview_1&w=320&h=240"></iframe>
|
||||
|
||||
### Window
|
||||
#### Simple window
|
||||
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_win_1&w=320&h=240"></iframe>
|
||||
|
||||
@ -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
|
||||
""""""""""""""""
|
||||
|
||||
Loading…
Reference in New Issue
Block a user