「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
| 英文 | 自動翻訳 | Link | |
|---|---|---|---|
| 001 | A button with a label and react on click event | ラベルが付いたボタン
クリックイベントに反応します |
|
| 002 | Create styles from scratch for buttons | ボタンのスタイルを最初から作成する | 
|
| 003 | Create a slider and write its value on a label | 
|
Styles
| 英文 | 自動翻訳 | Link | |
|---|---|---|---|
| 004 | Size styles | 
| |
| 005 | Background styles | 
| |
| 006 | Border styles | 
| |
| 007 | Outline styles | 
| |
| 008 | Shadow styles | 
| |
| 009 | Image styles | 
| |
| 010 | Text styles | 
| |
| 011 | Line styles | 
| |
| 012 | Transition | 
| |
| 013 | Using multiple styles | 
| |
| 014 | Local styles | 
| |
| 016 | Add styles to parts and states | 
| |
| 017 | Extending the current theme | 
|
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
| 英文 | 自動翻訳 | Link | |
|---|---|---|---|
| 024 | Flex | 
| |
| 025 | Arrange items in rows with wrap and even spacing | 
| |
| 026 | Demonstrate flex grow | 
| |
| 027 | Demonstrate flex grow. | 
| |
| 028 | Demonstrate column and row gap style properties | 
| |
| 029 | RTL base direction changes order of the items | 
|
Grid
| 英文 | 自動翻訳 | Link | |
|---|---|---|---|
| 030 | A simple grid | 
| |
| 031 | Demonstrate cell placement and span | 
| |
| 032 | Demonstrate grid's "free unit" | 
| |
| 033 | Demonstrate track placement | 
| |
| 034 | Demonstrate column and row gap | 
| |
| 035 | Demonstrate RTL direction on 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]
|
