「App:Library:LVGL:docs:Examples」の版間の差分
提供: robot-jp wiki
ナビゲーションに移動検索に移動438行目: | 438行目: | ||
|- | |- | ||
|071 | |071 | ||
− | | | + | | |
+ | === Colorwheel === | ||
+ | |||
+ | ==== Simple Colorwheel ==== | ||
| | | | ||
|[[file:LVGL docs example 071.png]] | |[[file:LVGL docs example 071.png]] | ||
445行目: | 448行目: | ||
| | | | ||
− | === | + | === Dropdown === |
− | ==== Simple | + | ==== Simple Drop down list ==== |
| | | | ||
|[[file:LVGL docs example 072.png]] | |[[file:LVGL docs example 072.png]] | ||
|- | |- | ||
|073 | |073 | ||
− | | | + | |Drop down in four directions |
− | |||
− | |||
− | |||
− | |||
| | | | ||
|[[file:LVGL docs example 073.png]] | |[[file:LVGL docs example 073.png]] | ||
|- | |- | ||
|074 | |074 | ||
− | | | + | |Menu |
| | | | ||
|[[file:LVGL docs example 074.png]] | |[[file:LVGL docs example 074.png]] | ||
|- | |- | ||
|075 | |075 | ||
− | | | + | |Image |
| | | | ||
|[[file:LVGL docs example 075.png]] | |[[file:LVGL docs example 075.png]] | ||
|- | |- | ||
|076 | |076 | ||
− | | | + | |Image recoloring |
| | | | ||
|[[file:LVGL docs example 076.png]] | |[[file:LVGL docs example 076.png]] | ||
|- | |- | ||
|077 | |077 | ||
− | | | + | |Rotate and zoom |
| | | | ||
|[[file:LVGL docs example 077.png]] | |[[file:LVGL docs example 077.png]] | ||
|- | |- | ||
|078 | |078 | ||
− | | | + | |Image offset and styling |
| | | | ||
|[[file:LVGL docs example 078.png]] | |[[file:LVGL docs example 078.png]] | ||
487行目: | 486行目: | ||
|079 | |079 | ||
| | | | ||
+ | |||
+ | === Image button === | ||
+ | |||
+ | ==== Simple Image button ==== | ||
| | | | ||
|[[file:LVGL docs example 079.png]] | |[[file:LVGL docs example 079.png]] | ||
492行目: | 495行目: | ||
|080 | |080 | ||
| | | | ||
+ | |||
+ | === Keyboard === | ||
+ | |||
+ | ==== Keyboard with text area ==== | ||
| | | | ||
|[[file:LVGL docs example 080.png]] | |[[file:LVGL docs example 080.png]] | ||
497行目: | 504行目: | ||
|081 | |081 | ||
| | | | ||
+ | |||
+ | === Label === | ||
+ | |||
+ | ==== Line wrap, recoloring and scrolling ==== | ||
| | | | ||
|[[file:LVGL docs example 081.png]] | |[[file:LVGL docs example 081.png]] | ||
|- | |- | ||
|082 | |082 | ||
− | | | + | |Text shadow |
| | | | ||
|[[file:LVGL docs example 082.png]] | |[[file:LVGL docs example 082.png]] | ||
|- | |- | ||
|083 | |083 | ||
− | | | + | |Show LTR, RTL and Chinese texts |
| | | | ||
|[[file:LVGL docs example 083.png]] | |[[file:LVGL docs example 083.png]] | ||
|- | |- | ||
|084 | |084 | ||
− | | | + | |Draw label with gradient color |
| | | | ||
|[[file:LVGL docs example 084.png]] | |[[file:LVGL docs example 084.png]] | ||
517行目: | 528行目: | ||
|085 | |085 | ||
| | | | ||
+ | |||
+ | === LED === | ||
+ | |||
+ | ==== LED with custom style ==== | ||
| | | | ||
|[[file:LVGL docs example 085.png]] | |[[file:LVGL docs example 085.png]] | ||
522行目: | 537行目: | ||
|086 | |086 | ||
| | | | ||
+ | |||
+ | === Line === | ||
+ | |||
+ | ==== Simple Line ==== | ||
| | | | ||
|[[file:LVGL docs example 086.png]] | |[[file:LVGL docs example 086.png]] | ||
527行目: | 546行目: | ||
|087 | |087 | ||
| | | | ||
+ | |||
+ | === List === | ||
+ | |||
+ | ==== Simple List ==== | ||
| | | | ||
|[[file:LVGL docs example 087.png]] | |[[file:LVGL docs example 087.png]] | ||
|- | |- | ||
|088 | |088 | ||
− | | | + | |Sorting a List using up and down buttons |
| | | | ||
|[[file:LVGL docs example 088.png]] | |[[file:LVGL docs example 088.png]] | ||
537行目: | 560行目: | ||
|089 | |089 | ||
| | | | ||
+ | |||
+ | === Menu === | ||
+ | |||
+ | ==== Simple Menu ==== | ||
| | | | ||
|[[file:LVGL docs example 089.png]] | |[[file:LVGL docs example 089.png]] | ||
|- | |- | ||
|090 | |090 | ||
− | | | + | |Simple Menu with root btn |
| | | | ||
|[[file:LVGL docs example 090.png]] | |[[file:LVGL docs example 090.png]] | ||
|- | |- | ||
|091 | |091 | ||
− | | | + | |Simple Menu with custom header |
| | | | ||
|[[file:LVGL docs example 091.png]] | |[[file:LVGL docs example 091.png]] | ||
|- | |- | ||
|092 | |092 | ||
− | | | + | |Simple Menu with floating btn to add new menu page |
| | | | ||
|[[file:LVGL docs example 092.png]] | |[[file:LVGL docs example 092.png]] | ||
|- | |- | ||
|093 | |093 | ||
− | | | + | |Complex Menu |
| | | | ||
|[[file:LVGL docs example 093.png]] | |[[file:LVGL docs example 093.png]] | ||
|- | |- | ||
|094 | |094 | ||
− | | | + | |Simple meter |
| | | | ||
|[[file:LVGL docs example 094.png]] | |[[file:LVGL docs example 094.png]] | ||
|- | |- | ||
|095 | |095 | ||
− | | | + | |A meter with multiple arcs |
| | | | ||
|[[file:LVGL docs example 095.png]] | |[[file:LVGL docs example 095.png]] | ||
|- | |- | ||
|096 | |096 | ||
− | | | + | |A clock from a meter |
| | | | ||
|[[file:LVGL docs example 096.png]] | |[[file:LVGL docs example 096.png]] | ||
|- | |- | ||
|097 | |097 | ||
− | | | + | |Pie chart |
| | | | ||
|[[file:LVGL docs example 097.png]] | |[[file:LVGL docs example 097.png]] | ||
582行目: | 609行目: | ||
|098 | |098 | ||
| | | | ||
+ | |||
+ | === Message box === | ||
+ | |||
+ | ==== Simple Message box ==== | ||
| | | | ||
|[[file:LVGL docs example 098.png]] | |[[file:LVGL docs example 098.png]] | ||
587行目: | 618行目: | ||
|099 | |099 | ||
| | | | ||
+ | |||
+ | === Roller === | ||
+ | |||
+ | ==== Simple Roller ==== | ||
| | | | ||
|[[file:LVGL docs example 099.png]] | |[[file:LVGL docs example 099.png]] | ||
|- | |- | ||
|100 | |100 | ||
− | | | + | |Styling the roller |
| | | | ||
|[[file:LVGL docs example 100.png]] | |[[file:LVGL docs example 100.png]] | ||
|- | |- | ||
|101 | |101 | ||
− | | | + | |add fade mask to roller |
| | | | ||
|[[file:LVGL docs example 101.png]] | |[[file:LVGL docs example 101.png]] | ||
602行目: | 637行目: | ||
|102 | |102 | ||
| | | | ||
+ | === Slider === | ||
+ | |||
+ | ==== Simple Slider ==== | ||
| | | | ||
|[[file:LVGL docs example 102.png]] | |[[file:LVGL docs example 102.png]] | ||
|- | |- | ||
|103 | |103 | ||
− | | | + | |Slider with custom style |
| | | | ||
|[[file:LVGL docs example 103.png]] | |[[file:LVGL docs example 103.png]] | ||
|- | |- | ||
|104 | |104 | ||
− | | | + | |Slider with extended drawer |
| | | | ||
|[[file:LVGL docs example 104.png]] | |[[file:LVGL docs example 104.png]] | ||
617行目: | 655行目: | ||
|105 | |105 | ||
| | | | ||
+ | |||
+ | === Span === | ||
+ | |||
+ | ==== Span with custom styles ==== | ||
| | | | ||
|[[file:LVGL docs example 105.png]] | |[[file:LVGL docs example 105.png]] | ||
622行目: | 664行目: | ||
|106 | |106 | ||
| | | | ||
+ | |||
+ | === Spinbox === | ||
+ | |||
+ | ==== Simple Spinbox ==== | ||
| | | | ||
|[[file:LVGL docs example 106.png]] | |[[file:LVGL docs example 106.png]] | ||
627行目: | 673行目: | ||
|107 | |107 | ||
| | | | ||
+ | |||
+ | === Spinner === | ||
+ | |||
+ | ==== Simple spinner ==== | ||
| | | | ||
|[[file:LVGL docs example 107.png]] | |[[file:LVGL docs example 107.png]] | ||
632行目: | 682行目: | ||
|108 | |108 | ||
| | | | ||
+ | |||
+ | === Switch === | ||
+ | |||
+ | ==== Simple Switch ==== | ||
| | | | ||
|[[file:LVGL docs example 108.png]] | |[[file:LVGL docs example 108.png]] | ||
637行目: | 691行目: | ||
|109 | |109 | ||
| | | | ||
+ | |||
+ | === Table === | ||
+ | |||
+ | ==== Simple table ==== | ||
| | | | ||
|[[file:LVGL docs example 109.png]] | |[[file:LVGL docs example 109.png]] | ||
|- | |- | ||
|110 | |110 | ||
− | | | + | |Lightweighted list from table |
| | | | ||
|[[file:LVGL docs example 110.png]] | |[[file:LVGL docs example 110.png]] | ||
647行目: | 705行目: | ||
|111 | |111 | ||
| | | | ||
+ | |||
+ | === Tabview === | ||
+ | |||
+ | ==== Simple Tabview ==== | ||
| | | | ||
|[[file:LVGL docs example 111.png]] | |[[file:LVGL docs example 111.png]] | ||
|- | |- | ||
|112 | |112 | ||
− | | | + | |Tabs on the left, styling and no scrolling |
| | | | ||
|[[file:LVGL docs example 112.png]] | |[[file:LVGL docs example 112.png]] | ||
|- | |- | ||
|113 | |113 | ||
− | | | + | |Simple Text area |
| | | | ||
|[[file:LVGL docs example 113.png]] | |[[file:LVGL docs example 113.png]] | ||
|- | |- | ||
|114 | |114 | ||
− | | | + | |Text area with password field |
| | | | ||
|[[file:LVGL docs example 114.png]] | |[[file:LVGL docs example 114.png]] | ||
|- | |- | ||
|115 | |115 | ||
− | | | + | |Text auto-formatting |
| | | | ||
|[[file:LVGL docs example 115.png]] | |[[file:LVGL docs example 115.png]] | ||
672行目: | 734行目: | ||
|116 | |116 | ||
| | | | ||
+ | |||
+ | === Tabview === | ||
+ | |||
+ | ==== Tileview with content ==== | ||
| | | | ||
|[[file:LVGL docs example 116.png]] | |[[file:LVGL docs example 116.png]] | ||
677行目: | 743行目: | ||
|117 | |117 | ||
| | | | ||
+ | |||
+ | === Window === | ||
+ | |||
+ | ==== Simple window ==== | ||
| | | | ||
− | |[[file:LVGL docs example 117.png]] | + | |[https://docs.lvgl.io/8.2/examples.html#simple-window][[file:LVGL docs example 117.png]] |
|} | |} |
2022年6月16日 (木) 13:00時点における版
https://docs.lvgl.io/8.2/examples.html
Get started
Styles
Animations
英文 | 自動翻訳 | Link | |
---|---|---|---|
018 |
Start animation on an event |
||
019 | Playback animation | ||
020 | Animation timeline |
Events
英文 | 自動翻訳 | Link | |
---|---|---|---|
021 | Button click event | ||
022 | Handle multiple events | ||
023 | Event bubbling |
Layouts
Grid
Scrolling
英文 | 自動翻訳 | Link | |
---|---|---|---|
036 | Nested scrolling | ||
037 | Snapping | ||
038 | Floating button | ||
039 | Styling the scrollbars | ||
040 | Right to left scrolling | ||
041 | Translate on scroll | ||
042 |
WidgetsBase objectBase objects with custom styles |
||
043 | Make an object draggable | ||
044 |
ArcSimple Arc |
||
045 | Loader with Arc | ||
046 |
BarSimple Bar |
||
047 | Styling a bar | ||
048 | Temperature meter | ||
049 | Stripe pattern and range value | ||
050 | Bar with LTR and RTL base direction | ||
051 | Custom drawer to show the current value | ||
052 |
ButtonSimple Buttons |
||
053 | Styling buttons | ||
054 | Gummy button | ||
055 |
Button matrixSimple Button matrix |
||
056 | Custom buttons | ||
057 | Pagination | ||
058 |
CalendarCalendar with header |
||
059 |
CanvasDrawing on the Canvas and rotate |
||
060 | Transparent Canvas with chroma keying | ||
061 |
ChartLine Chart |
||
062 | Faded area line chart with custom division lines | ||
063 | Axis ticks and labels with scrolling | ||
064 | Show the value of the pressed points | ||
065 | Display 1000 data points with zooming and scrolling | ||
066 | Show cursor on the clicked point | ||
067 | Scatter chart | ||
068 | Stacked area chart | ||
069 |
CheckboxSimple Checkboxes |
||
070 | Checkboxes as radio buttons | ||
071 |
ColorwheelSimple Colorwheel |
||
072 |
DropdownSimple Drop down list |
||
073 | Drop down in four directions | ||
074 | Menu | ||
075 | Image | ||
076 | Image recoloring | ||
077 | Rotate and zoom | ||
078 | Image offset and styling | ||
079 |
Image buttonSimple Image button |
||
080 |
KeyboardKeyboard with text area |
||
081 |
LabelLine wrap, recoloring and scrolling |
||
082 | Text shadow | ||
083 | Show LTR, RTL and Chinese texts | ||
084 | Draw label with gradient color | ||
085 |
LEDLED with custom style |
||
086 |
LineSimple Line |
||
087 |
ListSimple List |
||
088 | Sorting a List using up and down buttons | ||
089 |
MenuSimple Menu |
||
090 | Simple Menu with root btn | ||
091 | Simple Menu with custom header | ||
092 | Simple Menu with floating btn to add new menu page | ||
093 | Complex Menu | ||
094 | Simple meter | ||
095 | A meter with multiple arcs | ||
096 | A clock from a meter | ||
097 | Pie chart | ||
098 |
Message boxSimple Message box |
||
099 |
RollerSimple Roller |
||
100 | Styling the roller | ||
101 | add fade mask to roller | ||
102 |
SliderSimple Slider |
||
103 | Slider with custom style | ||
104 | Slider with extended drawer | ||
105 |
SpanSpan with custom styles |
||
106 |
SpinboxSimple Spinbox |
||
107 |
SpinnerSimple spinner |
||
108 |
SwitchSimple Switch |
||
109 |
TableSimple table |
||
110 | Lightweighted list from table | ||
111 |
TabviewSimple Tabview |
||
112 | Tabs on the left, styling and no scrolling | ||
113 | Simple Text area | ||
114 | Text area with password field | ||
115 | Text auto-formatting | ||
116 |
TabviewTileview with content |
||
117 |
WindowSimple window |
[1] |