mirrors/lvgl
0
0
Fork 0
mirror of https://github.com/lvgl/lvgl.git synced 2024-11-27 11:43:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs example list fixes

Browse Source
This commit is contained in:
Gabor Kiss-Vamosi 2021-06-15 10:47:09 +02:00
parent c49e830aad
commit cd600d1056
2 changed files with 113 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
docs/example_list.py
View File

@ -1,6 +1,4 @@
import os
path ="../examples/"
def process_index_rst(path):
# print(path)
@ -71,9 +69,8 @@ layouts = {
"grid":"Grid",
}
fout = open("examples.md", "w")
def print_item(path, lvl, d):
def print_item(path, lvl, d, fout):
for k in d:
v = d[k]
b = os.path.basename(k)
@ -83,8 +80,10 @@ def print_item(path, lvl, d):
fout.write("\n")
def exec():
path ="../examples/"
fout = open("examples.md", "w")
filelist = []
for root, dirs, files in os.walk(path):
for f in files:
#append the file name to the list
@ -111,13 +110,13 @@ def exec():
if h == "widgets":
for w in widgets:
fout.write("### " + widgets[w] + "\n")
print_item(h + "/" + w, 4, d_all)
print_item(h + "/" + w, 4, d_all, fout)
elif h == "layouts":
for l in layouts:
fout.write("### " + layouts[l] + "\n")
print_item(h + "/" + l, 4, d_all)
print_item(h + "/" + l, 4, d_all, fout)
else:
print_item(h, 3, d_all)
print_item(h, 3, d_all, fout)
fout.write("")

212
docs/examples.md
View File

@ -6,359 +6,359 @@
# Examples
## Get started
### A button with a label and react on click event
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_get_started_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_get_started_2&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_get_started_3&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_style_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_style_2&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_style_3&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_style_4&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_style_5&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_style_6&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_style_8&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_style_9&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_style_10&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_style_11&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_style_12&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_style_13&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_style_14&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_anim_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_anim_2&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_event_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_event_2&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_event_3&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_2&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_3&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_4&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_5&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_6&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_2&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_3&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_4&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_5&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_6&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_2&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_3&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_4&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_5&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_6&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_obj_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_obj_2&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_arc_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_arc_2&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_2&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_3&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_4&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_5&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_6&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_btn_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_btn_2&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_btn_3&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_btnmatrix_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_btnmatrix_2&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_btnmatrix_3&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_calendar_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_canvas_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_canvas_2&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_2&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_3&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_4&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_5&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_6&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_7&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_checkbox_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_colorwheel_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_dropdown_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_dropdown_2&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_dropdown_3&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_img_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_img_2&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_img_3&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_img_4&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_imgbtn_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_keyboard_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_label_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_label_2&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_label_3&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_led_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_line_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_list_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_2&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_3&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_4&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_msgbox_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_roller_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_roller_2&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_roller_3&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_slider_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_slider_2&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_slider_3&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_span_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_spinbox_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_spinner_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_switch_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_table_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_table_2&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_tabview_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_tabview_2&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_textarea_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_textarea_2&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_textarea_3&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_tileview_1&amp;w=320&amp;h=240"></iframe>
<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 class="lv-example" src="_static/built_lv_examples?example=lv_example_win_1&amp;w=320&amp;h=240"></iframe>
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_win_1&amp;w=320&amp;h=240"></iframe>