「App:Library:LVGL:docs:Examples」の版間の差分
提供: robot-jp wiki
ナビゲーションに移動検索に移動| 14行目: | 14行目: | ||
クリックイベントに反応します | クリックイベントに反応します | ||
| − | |[[file:LVGL docs example 001.png]] | + | |[[file:LVGL docs example 001.png|link=https://docs.lvgl.io/8.2/examples.html#a-button-with-a-label-and-react-on-click-event]] |
|- | |- | ||
|002 | |002 | ||
|Create styles from scratch for buttons | |Create styles from scratch for buttons | ||
|ボタンのスタイルを最初から作成する | |ボタンのスタイルを最初から作成する | ||
| − | |[[file:LVGL docs example 002.png]] | + | |[[file:LVGL docs example 002.png|link=https://docs.lvgl.io/8.2/examples.html#create-styles-from-scratch-for-buttons]] |
|- | |- | ||
|003 | |003 | ||
|Create a slider and write its value on a label | |Create a slider and write its value on a label | ||
| | | | ||
| − | |[[file:LVGL docs example 003.png]] | + | |[[file:LVGL docs example 003.png|link=https://docs.lvgl.io/8.2/examples.html#create-a-slider-and-write-its-value-on-a-label]] |
|} | |} | ||
=== Styles === | === Styles === | ||
| 36行目: | 36行目: | ||
|Size styles | |Size styles | ||
| | | | ||
| − | |[[file:LVGL docs example 004.png]] | + | |[[file:LVGL docs example 004.png|link=https://docs.lvgl.io/8.2/examples.html#size-styles]] |
|- | |- | ||
|005 | |005 | ||
|Background styles | |Background styles | ||
| | | | ||
| − | |[[file:LVGL docs example 005.png]] | + | |[[file:LVGL docs example 005.png|link=https://docs.lvgl.io/8.2/examples.html#background-styles]] |
|- | |- | ||
|006 | |006 | ||
|Border styles | |Border styles | ||
| | | | ||
| − | |[[file:LVGL docs example 006.png]] | + | |[[file:LVGL docs example 006.png|link=https://docs.lvgl.io/8.2/examples.html#border-styles]] |
|- | |- | ||
|007 | |007 | ||
|Outline styles | |Outline styles | ||
| | | | ||
| − | |[[file:LVGL docs example 007.png]] | + | |[[file:LVGL docs example 007.png|link=https://docs.lvgl.io/8.2/examples.html#outline-styles]] |
|- | |- | ||
|008 | |008 | ||
|Shadow styles | |Shadow styles | ||
| | | | ||
| − | |[[file:LVGL docs example 008.png]] | + | |[[file:LVGL docs example 008.png|link=https://docs.lvgl.io/8.2/examples.html#shadow-styles]] |
|- | |- | ||
|009 | |009 | ||
|Image styles | |Image styles | ||
| | | | ||
| − | |[[file:LVGL docs example 009.png]] | + | |[[file:LVGL docs example 009.png|link=https://docs.lvgl.io/8.2/examples.html#image-styles]] |
|- | |- | ||
|010 | |010 | ||
|Text styles | |Text styles | ||
| | | | ||
| − | |[[file:LVGL docs example 010.png]] | + | |[[file:LVGL docs example 010.png|link=https://docs.lvgl.io/8.2/examples.html#text-styles]] |
|- | |- | ||
|011 | |011 | ||
|Line styles | |Line styles | ||
| | | | ||
| − | |[[file:LVGL docs example 011.png]] | + | |[[file:LVGL docs example 011.png|link=https://docs.lvgl.io/8.2/examples.html#line-styles]] |
|- | |- | ||
|012 | |012 | ||
|Transition | |Transition | ||
| | | | ||
| − | |[[file:LVGL docs example 012.png]] | + | |[[file:LVGL docs example 012.png|link=https://docs.lvgl.io/8.2/examples.html#transition]] |
|- | |- | ||
|013 | |013 | ||
|Using multiple styles | |Using multiple styles | ||
| | | | ||
| − | |[[file:LVGL docs example 013.png]] | + | |[[file:LVGL docs example 013.png|link=https://docs.lvgl.io/8.2/examples.html#using-multiple-styles]] |
|- | |- | ||
|014 | |014 | ||
|Local styles | |Local styles | ||
| | | | ||
| − | |[[file:LVGL docs example 014.png]] | + | |[[file:LVGL docs example 014.png|link=https://docs.lvgl.io/8.2/examples.html#local-styles]] |
|- | |- | ||
|016 | |016 | ||
|Add styles to parts and states | |Add styles to parts and states | ||
| | | | ||
| − | |[[file:LVGL docs example 016.png]] | + | |[[file:LVGL docs example 016.png|link=https://docs.lvgl.io/8.2/examples.html#add-styles-to-parts-and-states]] |
|- | |- | ||
|017 | |017 | ||
|Extending the current theme | |Extending the current theme | ||
| | | | ||
| − | |[[file:LVGL docs example 017.png]] | + | |[[file:LVGL docs example 017.png|link=https://docs.lvgl.io/8.2/examples.html#extending-the-current-theme]] |
|} | |} | ||
=== Animations === | === Animations === | ||
| 109行目: | 109行目: | ||
Start animation on an event | Start animation on an event | ||
| | | | ||
| − | |[[file:LVGL docs example 018.png]] | + | |[[file:LVGL docs example 018.png|link=https://docs.lvgl.io/8.2/examples.html#start-animation-on-an-event]] |
|- | |- | ||
|019 | |019 | ||
|Playback animation | |Playback animation | ||
| | | | ||
| − | |[[file:LVGL docs example 019.png]] | + | |[[file:LVGL docs example 019.png|link=https://docs.lvgl.io/8.2/examples.html#playback-animation]] |
|- | |- | ||
|020 | |020 | ||
|Animation timeline | |Animation timeline | ||
| | | | ||
| − | |[[file:LVGL docs example 020.png]] | + | |[[file:LVGL docs example 020.png|link=https://docs.lvgl.io/8.2/examples.html#animation-timeline]] |
|} | |} | ||
=== Events === | === Events === | ||
| 131行目: | 131行目: | ||
|Button click event | |Button click event | ||
| | | | ||
| − | |[[file:LVGL docs example 021.png]] | + | |[[file:LVGL docs example 021.png|link=https://docs.lvgl.io/8.2/examples.html#button-click-event]] |
|- | |- | ||
|022 | |022 | ||
|Handle multiple events | |Handle multiple events | ||
| | | | ||
| − | |[[file:LVGL docs example 022.png]] | + | |[[file:LVGL docs example 022.png|link=https://docs.lvgl.io/8.2/examples.html#handle-multiple-events]] |
|- | |- | ||
|023 | |023 | ||
|Event bubbling | |Event bubbling | ||
| | | | ||
| − | |[[file:LVGL docs example 023.png]] | + | |[[file:LVGL docs example 023.png|link=https://docs.lvgl.io/8.2/examples.html#event-bubbling]] |
|} | |} | ||
=== Layouts === | === Layouts === | ||
| 153行目: | 153行目: | ||
|Flex | |Flex | ||
| | | | ||
| − | |[[file:LVGL docs example 024.png]] | + | |[[file:LVGL docs example 024.png|link=https://docs.lvgl.io/8.2/examples.html#a-simple-row-and-a-column-layout-with-flexbox]] |
|- | |- | ||
|025 | |025 | ||
|Arrange items in rows with wrap and even spacing | |Arrange items in rows with wrap and even spacing | ||
| | | | ||
| − | |[[file:LVGL docs example 025.png]] | + | |[[file:LVGL docs example 025.png|link=https://docs.lvgl.io/8.2/examples.html#arrange-items-in-rows-with-wrap-and-even-spacing]] |
|- | |- | ||
|026 | |026 | ||
|Demonstrate flex grow | |Demonstrate flex grow | ||
| | | | ||
| − | |[[file:LVGL docs example 026.png]] | + | |[[file:LVGL docs example 026.png|link=https://docs.lvgl.io/8.2/examples.html#demonstrate-flex-grow]] |
|- | |- | ||
|027 | |027 | ||
|Demonstrate flex grow. | |Demonstrate flex grow. | ||
| | | | ||
| − | |[[file:LVGL docs example 027.png]] | + | |[[file:LVGL docs example 027.png|link=https://docs.lvgl.io/8.2/examples.html#id1]] |
|- | |- | ||
|028 | |028 | ||
|Demonstrate column and row gap style properties | |Demonstrate column and row gap style properties | ||
| | | | ||
| − | |[[file:LVGL docs example 028.png]] | + | |[[file:LVGL docs example 028.png|link=https://docs.lvgl.io/8.2/examples.html#demonstrate-column-and-row-gap-style-properties]] |
|- | |- | ||
|029 | |029 | ||
|RTL base direction changes order of the items | |RTL base direction changes order of the items | ||
| | | | ||
| − | |[[file:LVGL docs example 029.png]] | + | |[[file:LVGL docs example 029.png|link=https://docs.lvgl.io/8.2/examples.html#rtl-base-direction-changes-order-of-the-items]] |
|} | |} | ||
=== Grid === | === Grid === | ||
| 190行目: | 190行目: | ||
|A simple grid | |A simple grid | ||
| | | | ||
| − | |[[file:LVGL docs example 030.png]] | + | |[[file:LVGL docs example 030.png|link=https://docs.lvgl.io/8.2/examples.html#a-simple-grid]] |
|- | |- | ||
|031 | |031 | ||
|Demonstrate cell placement and span | |Demonstrate cell placement and span | ||
| | | | ||
| − | |[[file:LVGL docs example 031.png]] | + | |[[file:LVGL docs example 031.png|link=https://docs.lvgl.io/8.2/examples.html#demonstrate-cell-placement-and-span]] |
|- | |- | ||
|032 | |032 | ||
|Demonstrate grid's "free unit" | |Demonstrate grid's "free unit" | ||
| | | | ||
| − | |[[file:LVGL docs example 032.png]] | + | |[[file:LVGL docs example 032.png|link=https://docs.lvgl.io/8.2/examples.html#demonstrate-grid-s-free-unit]] |
|- | |- | ||
|033 | |033 | ||
|Demonstrate track placement | |Demonstrate track placement | ||
| | | | ||
| − | |[[file:LVGL docs example 033.png]] | + | |[[file:LVGL docs example 033.png|link=https://docs.lvgl.io/8.2/examples.html#demonstrate-track-placement]] |
|- | |- | ||
|034 | |034 | ||
|Demonstrate column and row gap | |Demonstrate column and row gap | ||
| | | | ||
| − | |[[file:LVGL docs example 034.png]] | + | |[[file:LVGL docs example 034.png|link=https://docs.lvgl.io/8.2/examples.html#demonstrate-column-and-row-gap]] |
|- | |- | ||
|035 | |035 | ||
|Demonstrate RTL direction on grid | |Demonstrate RTL direction on grid | ||
| | | | ||
| − | |[[file:LVGL docs example 035.png]] | + | |[[file:LVGL docs example 035.png|link=https://docs.lvgl.io/8.2/examples.html#demonstrate-rtl-direction-on-grid]] |
|} | |} | ||
=== Scrolling === | === Scrolling === | ||
| 227行目: | 227行目: | ||
|Nested scrolling | |Nested scrolling | ||
| | | | ||
| − | |[[file:LVGL docs example 036.png]] | + | |[[file:LVGL docs example 036.png|link=https://docs.lvgl.io/8.2/examples.html#nested-scrolling]] |
|- | |- | ||
|037 | |037 | ||
|Snapping | |Snapping | ||
| | | | ||
| − | |[[file:LVGL docs example 037.png]] | + | |[[file:LVGL docs example 037.png|link=https://docs.lvgl.io/8.2/examples.html#snapping]] |
|- | |- | ||
|038 | |038 | ||
|Floating button | |Floating button | ||
| | | | ||
| − | |[[file:LVGL docs example 038.png]] | + | |[[file:LVGL docs example 038.png|link=https://docs.lvgl.io/8.2/examples.html#floating-button]] |
|- | |- | ||
|039 | |039 | ||
|Styling the scrollbars | |Styling the scrollbars | ||
| | | | ||
| − | |[[file:LVGL docs example 039.png]] | + | |[[file:LVGL docs example 039.png|link=https://docs.lvgl.io/8.2/examples.html#styling-the-scrollbars]] |
|- | |- | ||
|040 | |040 | ||
|Right to left scrolling | |Right to left scrolling | ||
| | | | ||
| − | |[[file:LVGL docs example 040.png]] | + | |[[file:LVGL docs example 040.png|link=https://docs.lvgl.io/8.2/examples.html#right-to-left-scrolling]] |
|- | |- | ||
|041 | |041 | ||
|Translate on scroll | |Translate on scroll | ||
| | | | ||
| − | |[[file:LVGL docs example 041.png]] | + | |[[file:LVGL docs example 041.png|link=https://docs.lvgl.io/8.2/examples.html#translate-on-scroll]] |
|- | |- | ||
|042 | |042 | ||
| 263行目: | 263行目: | ||
==== Base objects with custom styles ==== | ==== Base objects with custom styles ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 042.png]] | + | |[[file:LVGL docs example 042.png|link=https://docs.lvgl.io/8.2/examples.html#base-objects-with-custom-styles]] |
|- | |- | ||
|043 | |043 | ||
|Make an object draggable | |Make an object draggable | ||
| | | | ||
| − | |[[file:LVGL docs example 043.png]] | + | |[[file:LVGL docs example 043.png|link=https://docs.lvgl.io/8.2/examples.html#make-an-object-draggable]] |
|- | |- | ||
|044 | |044 | ||
| 277行目: | 277行目: | ||
==== Simple Arc ==== | ==== Simple Arc ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 044.png]] | + | |[[file:LVGL docs example 044.png|link=https://docs.lvgl.io/8.2/examples.html#simple-arc]] |
|- | |- | ||
|045 | |045 | ||
|Loader with Arc | |Loader with Arc | ||
| | | | ||
| − | |[[file:LVGL docs example 045.png]] | + | |[[file:LVGL docs example 045.png|link=https://docs.lvgl.io/8.2/examples.html#loader-with-arc]] |
|- | |- | ||
|046 | |046 | ||
| 291行目: | 291行目: | ||
==== Simple Bar ==== | ==== Simple Bar ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 046.png]] | + | |[[file:LVGL docs example 046.png|link=https://docs.lvgl.io/8.2/examples.html#simple-bar]] |
|- | |- | ||
|047 | |047 | ||
|Styling a bar | |Styling a bar | ||
| | | | ||
| − | |[[file:LVGL docs example 047.png]] | + | |[[file:LVGL docs example 047.png|link=https://docs.lvgl.io/8.2/examples.html#styling-a-bar]] |
|- | |- | ||
|048 | |048 | ||
|Temperature meter | |Temperature meter | ||
| | | | ||
| − | |[[file:LVGL docs example 048.png]] | + | |[[file:LVGL docs example 048.png|link=https://docs.lvgl.io/8.2/examples.html#temperature-meter]] |
|- | |- | ||
|049 | |049 | ||
|Stripe pattern and range value | |Stripe pattern and range value | ||
| | | | ||
| − | |[[file:LVGL docs example 049.png]] | + | |[[file:LVGL docs example 049.png|link=https://docs.lvgl.io/8.2/examples.html#stripe-pattern-and-range-value]] |
|- | |- | ||
|050 | |050 | ||
|Bar with LTR and RTL base direction | |Bar with LTR and RTL base direction | ||
| | | | ||
| − | |[[file:LVGL docs example 050.png]] | + | |[[file:LVGL docs example 050.png|link=https://docs.lvgl.io/8.2/examples.html#bar-with-ltr-and-rtl-base-direction]] |
|- | |- | ||
|051 | |051 | ||
|Custom drawer to show the current value | |Custom drawer to show the current value | ||
| | | | ||
| − | |[[file:LVGL docs example 051.png]] | + | |[[file:LVGL docs example 051.png|link=https://docs.lvgl.io/8.2/examples.html#custom-drawer-to-show-the-current-value]] |
|- | |- | ||
|052 | |052 | ||
| 325行目: | 325行目: | ||
==== Simple Buttons ==== | ==== Simple Buttons ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 052.png]] | + | |[[file:LVGL docs example 052.png|link=https://docs.lvgl.io/8.2/examples.html#simple-buttons]] |
|- | |- | ||
|053 | |053 | ||
|Styling buttons | |Styling buttons | ||
| | | | ||
| − | |[[file:LVGL docs example 053.png]] | + | |[[file:LVGL docs example 053.png|link=https://docs.lvgl.io/8.2/examples.html#styling-buttons]] |
|- | |- | ||
|054 | |054 | ||
|Gummy button | |Gummy button | ||
| | | | ||
| − | |[[file:LVGL docs example 054.png]] | + | |[[file:LVGL docs example 054.png|link=https://docs.lvgl.io/8.2/examples.html#gummy-button]] |
|- | |- | ||
|055 | |055 | ||
| 344行目: | 344行目: | ||
==== Simple Button matrix ==== | ==== Simple Button matrix ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 055.png]] | + | |[[file:LVGL docs example 055.png|link=https://docs.lvgl.io/8.2/examples.html#simple-button-matrix]] |
|- | |- | ||
|056 | |056 | ||
|Custom buttons | |Custom buttons | ||
| | | | ||
| − | |[[file:LVGL docs example 056.png]] | + | |[[file:LVGL docs example 056.png|link=https://docs.lvgl.io/8.2/examples.html#custom-buttons]] |
|- | |- | ||
|057 | |057 | ||
|Pagination | |Pagination | ||
| | | | ||
| − | |[[file:LVGL docs example 057.png]] | + | |[[file:LVGL docs example 057.png|link=https://docs.lvgl.io/8.2/examples.html#pagination]] |
|- | |- | ||
|058 | |058 | ||
| 363行目: | 363行目: | ||
==== Calendar with header ==== | ==== Calendar with header ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 058.png]] | + | |[[file:LVGL docs example 058.png|link=https://docs.lvgl.io/8.2/examples.html#calendar-with-header]] |
|- | |- | ||
|059 | |059 | ||
| 372行目: | 372行目: | ||
==== Drawing on the Canvas and rotate ==== | ==== Drawing on the Canvas and rotate ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 059.png]] | + | |[[file:LVGL docs example 059.png|link=https://docs.lvgl.io/8.2/examples.html#drawing-on-the-canvas-and-rotate]] |
|- | |- | ||
|060 | |060 | ||
|Transparent Canvas with chroma keying | |Transparent Canvas with chroma keying | ||
| | | | ||
| − | |[[file:LVGL docs example 060.png]] | + | |[[file:LVGL docs example 060.png|link=https://docs.lvgl.io/8.2/examples.html#transparent-canvas-with-chroma-keying]] |
|- | |- | ||
|061 | |061 | ||
| 386行目: | 386行目: | ||
==== Line Chart ==== | ==== Line Chart ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 061.png]] | + | |[[file:LVGL docs example 061.png|link=https://docs.lvgl.io/8.2/examples.html#line-chart]] |
|- | |- | ||
|062 | |062 | ||
|Faded area line chart with custom division lines | |Faded area line chart with custom division lines | ||
| | | | ||
| − | |[[file:LVGL docs example 062.png]] | + | |[[file:LVGL docs example 062.png|link=https://docs.lvgl.io/8.2/examples.html#faded-area-line-chart-with-custom-division-lines]] |
|- | |- | ||
|063 | |063 | ||
|Axis ticks and labels with scrolling | |Axis ticks and labels with scrolling | ||
| | | | ||
| − | |[[file:LVGL docs example 063.png]] | + | |[[file:LVGL docs example 063.png|link=https://docs.lvgl.io/8.2/examples.html#axis-ticks-and-labels-with-scrolling]] |
|- | |- | ||
|064 | |064 | ||
|Show the value of the pressed points | |Show the value of the pressed points | ||
| | | | ||
| − | |[[file:LVGL docs example 064.png]] | + | |[[file:LVGL docs example 064.png|link=https://docs.lvgl.io/8.2/examples.html#show-the-value-of-the-pressed-points]] |
|- | |- | ||
|065 | |065 | ||
|Display 1000 data points with zooming and scrolling | |Display 1000 data points with zooming and scrolling | ||
| | | | ||
| − | |[[file:LVGL docs example 065.png]] | + | |[[file:LVGL docs example 065.png|link=https://docs.lvgl.io/8.2/examples.html#display-1000-data-points-with-zooming-and-scrolling]] |
|- | |- | ||
|066 | |066 | ||
|Show cursor on the clicked point | |Show cursor on the clicked point | ||
| | | | ||
| − | |[[file:LVGL docs example 066.png]] | + | |[[file:LVGL docs example 066.png|link=https://docs.lvgl.io/8.2/examples.html#show-cursor-on-the-clicked-point]] |
|- | |- | ||
|067 | |067 | ||
|Scatter chart | |Scatter chart | ||
| | | | ||
| − | |[[file:LVGL docs example 067.png]] | + | |[[file:LVGL docs example 067.png|link=https://docs.lvgl.io/8.2/examples.html#scatter-chart]] |
|- | |- | ||
|068 | |068 | ||
|Stacked area chart | |Stacked area chart | ||
| | | | ||
| − | |[[file:LVGL docs example 068.png]] | + | |[[file:LVGL docs example 068.png|link=https://docs.lvgl.io/8.2/examples.html#stacked-area-chart]] |
|- | |- | ||
|069 | |069 | ||
| 430行目: | 430行目: | ||
==== Simple Checkboxes ==== | ==== Simple Checkboxes ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 069.png]] | + | |[[file:LVGL docs example 069.png|link=https://docs.lvgl.io/8.2/examples.html#simple-checkboxes]] |
|- | |- | ||
|070 | |070 | ||
|Checkboxes as radio buttons | |Checkboxes as radio buttons | ||
| | | | ||
| − | |[[file:LVGL docs example 070.png]] | + | |[[file:LVGL docs example 070.png|link=https://docs.lvgl.io/8.2/examples.html#checkboxes-as-radio-buttons]] |
|- | |- | ||
|071 | |071 | ||
| 443行目: | 443行目: | ||
==== Simple Colorwheel ==== | ==== Simple Colorwheel ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 071.png]] | + | |[[file:LVGL docs example 071.png|link=https://docs.lvgl.io/8.2/examples.html#simple-colorwheel]] |
|- | |- | ||
|072 | |072 | ||
| 452行目: | 452行目: | ||
==== Simple Drop down list ==== | ==== Simple Drop down list ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 072.png]] | + | |[[file:LVGL docs example 072.png|link=https://docs.lvgl.io/8.2/examples.html#simple-drop-down-list]] |
|- | |- | ||
|073 | |073 | ||
|Drop down in four directions | |Drop down in four directions | ||
| | | | ||
| − | |[[file:LVGL docs example 073.png]] | + | |[[file:LVGL docs example 073.png|link=https://docs.lvgl.io/8.2/examples.html#drop-down-in-four-directions]] |
|- | |- | ||
|074 | |074 | ||
|Menu | |Menu | ||
| | | | ||
| − | |[[file:LVGL docs example 074.png]] | + | |[[file:LVGL docs example 074.png|link=https://docs.lvgl.io/8.2/examples.html#menu]] |
|- | |- | ||
|075 | |075 | ||
|Image | |Image | ||
| | | | ||
| − | |[[file:LVGL docs example 075.png]] | + | |[[file:LVGL docs example 075.png|link=https://docs.lvgl.io/8.2/examples.html#image-from-variable-and-symbol]] |
|- | |- | ||
|076 | |076 | ||
|Image recoloring | |Image recoloring | ||
| | | | ||
| − | |[[file:LVGL docs example 076.png]] | + | |[[file:LVGL docs example 076.png|link=https://docs.lvgl.io/8.2/examples.html#image-recoloring]] |
|- | |- | ||
|077 | |077 | ||
|Rotate and zoom | |Rotate and zoom | ||
| | | | ||
| − | |[[file:LVGL docs example 077.png]] | + | |[[file:LVGL docs example 077.png|link=https://docs.lvgl.io/8.2/examples.html#rotate-and-zoom]] |
|- | |- | ||
|078 | |078 | ||
|Image offset and styling | |Image offset and styling | ||
| | | | ||
| − | |[[file:LVGL docs example 078.png]] | + | |[[file:LVGL docs example 078.png|link=https://docs.lvgl.io/8.2/examples.html#image-offset-and-styling]] |
|- | |- | ||
|079 | |079 | ||
| 491行目: | 491行目: | ||
==== Simple Image button ==== | ==== Simple Image button ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 079.png]] | + | |[[file:LVGL docs example 079.png|link=https://docs.lvgl.io/8.2/examples.html#simple-image-button]] |
|- | |- | ||
|080 | |080 | ||
| 500行目: | 500行目: | ||
==== Keyboard with text area ==== | ==== Keyboard with text area ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 080.png]] | + | |[[file:LVGL docs example 080.png|link=https://docs.lvgl.io/8.2/examples.html#keyboard-with-text-area]] |
|- | |- | ||
|081 | |081 | ||
| 509行目: | 509行目: | ||
==== Line wrap, recoloring and scrolling ==== | ==== Line wrap, recoloring and scrolling ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 081.png]] | + | |[[file:LVGL docs example 081.png|link=https://docs.lvgl.io/8.2/examples.html#line-wrap-recoloring-and-scrolling]] |
|- | |- | ||
|082 | |082 | ||
|Text shadow | |Text shadow | ||
| | | | ||
| − | |[[file:LVGL docs example 082.png]] | + | |[[file:LVGL docs example 082.png|link=https://docs.lvgl.io/8.2/examples.html#text-shadow]] |
|- | |- | ||
|083 | |083 | ||
|Show LTR, RTL and Chinese texts | |Show LTR, RTL and Chinese texts | ||
| | | | ||
| − | |[[file:LVGL docs example 083.png]] | + | |[[file:LVGL docs example 083.png|link=https://docs.lvgl.io/8.2/examples.html#show-ltr-rtl-and-chinese-texts]] |
|- | |- | ||
|084 | |084 | ||
|Draw label with gradient color | |Draw label with gradient color | ||
| | | | ||
| − | |[[file:LVGL docs example 084.png]] | + | |[[file:LVGL docs example 084.png|link=https://docs.lvgl.io/8.2/examples.html#draw-label-with-gradient-color]] |
|- | |- | ||
|085 | |085 | ||
| 533行目: | 533行目: | ||
==== LED with custom style ==== | ==== LED with custom style ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 085.png]] | + | |[[file:LVGL docs example 085.png|link=https://docs.lvgl.io/8.2/examples.html#led-with-custom-style]] |
|- | |- | ||
|086 | |086 | ||
| 542行目: | 542行目: | ||
==== Simple Line ==== | ==== Simple Line ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 086.png]] | + | |[[file:LVGL docs example 086.png|link=https://docs.lvgl.io/8.2/examples.html#simple-line]] |
|- | |- | ||
|087 | |087 | ||
| 551行目: | 551行目: | ||
==== Simple List ==== | ==== Simple List ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 087.png]] | + | |[[file:LVGL docs example 087.png|link=https://docs.lvgl.io/8.2/examples.html#simple-list]] |
|- | |- | ||
|088 | |088 | ||
|Sorting a List using up and down buttons | |Sorting a List using up and down buttons | ||
| | | | ||
| − | |[[file:LVGL docs example 088.png]] | + | |[[file:LVGL docs example 088.png|link=https://docs.lvgl.io/8.2/examples.html#sorting-a-list-using-up-and-down-buttons]] |
|- | |- | ||
|089 | |089 | ||
| 565行目: | 565行目: | ||
==== Simple Menu ==== | ==== Simple Menu ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 089.png]] | + | |[[file:LVGL docs example 089.png|link=https://docs.lvgl.io/8.2/examples.html#simple-menu]] |
|- | |- | ||
|090 | |090 | ||
|Simple Menu with root btn | |Simple Menu with root btn | ||
| | | | ||
| − | |[[file:LVGL docs example 090.png]] | + | |[[file:LVGL docs example 090.png|link=https://docs.lvgl.io/8.2/examples.html#simple-menu-with-root-btn]] |
|- | |- | ||
|091 | |091 | ||
|Simple Menu with custom header | |Simple Menu with custom header | ||
| | | | ||
| − | |[[file:LVGL docs example 091.png]] | + | |[[file:LVGL docs example 091.png|link=https://docs.lvgl.io/8.2/examples.html#simple-menu-with-custom-header]] |
|- | |- | ||
|092 | |092 | ||
|Simple Menu with floating btn to add new menu page | |Simple Menu with floating btn to add new menu page | ||
| | | | ||
| − | |[[file:LVGL docs example 092.png]] | + | |[[file:LVGL docs example 092.png|link=https://docs.lvgl.io/8.2/examples.html#simple-menu-with-floating-btn-to-add-new-menu-page]] |
|- | |- | ||
|093 | |093 | ||
|Complex Menu | |Complex Menu | ||
| | | | ||
| − | |[[file:LVGL docs example 093.png]] | + | |[[file:LVGL docs example 093.png|link=https://docs.lvgl.io/8.2/examples.html#complex-menu]] |
|- | |- | ||
|094 | |094 | ||
|Simple meter | |Simple meter | ||
| | | | ||
| − | |[[file:LVGL docs example 094.png]] | + | |[[file:LVGL docs example 094.png|link=https://docs.lvgl.io/8.2/examples.html#simple-meter]] |
|- | |- | ||
|095 | |095 | ||
|A meter with multiple arcs | |A meter with multiple arcs | ||
| | | | ||
| − | |[[file:LVGL docs example 095.png]] | + | |[[file:LVGL docs example 095.png|link=https://docs.lvgl.io/8.2/examples.html#a-meter-with-multiple-arcs]] |
|- | |- | ||
|096 | |096 | ||
|A clock from a meter | |A clock from a meter | ||
| | | | ||
| − | |[[file:LVGL docs example 096.png]] | + | |[[file:LVGL docs example 096.png|link=https://docs.lvgl.io/8.2/examples.html#a-clock-from-a-meter]] |
|- | |- | ||
|097 | |097 | ||
|Pie chart | |Pie chart | ||
| | | | ||
| − | |[[file:LVGL docs example 097.png]] | + | |[[file:LVGL docs example 097.png|link=https://docs.lvgl.io/8.2/examples.html#pie-chart]] |
|- | |- | ||
|098 | |098 | ||
| 614行目: | 614行目: | ||
==== Simple Message box ==== | ==== Simple Message box ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 098.png]] | + | |[[file:LVGL docs example 098.png|link=https://docs.lvgl.io/8.2/examples.html#simple-message-box]] |
|- | |- | ||
|099 | |099 | ||
| 623行目: | 623行目: | ||
==== Simple Roller ==== | ==== Simple Roller ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 099.png]] | + | |[[file:LVGL docs example 099.png|link=https://docs.lvgl.io/8.2/examples.html#simple-roller]] |
|- | |- | ||
|100 | |100 | ||
|Styling the roller | |Styling the roller | ||
| | | | ||
| − | |[[file:LVGL docs example 100.png]] | + | |[[file:LVGL docs example 100.png|link=https://docs.lvgl.io/8.2/examples.html#styling-the-roller]] |
|- | |- | ||
|101 | |101 | ||
|add fade mask to roller | |add fade mask to roller | ||
| | | | ||
| − | |[[file:LVGL docs example 101.png]] | + | |[[file:LVGL docs example 101.png|link=https://docs.lvgl.io/8.2/examples.html#add-fade-mask-to-roller]] |
|- | |- | ||
|102 | |102 | ||
| 641行目: | 641行目: | ||
==== Simple Slider ==== | ==== Simple Slider ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 102.png]] | + | |[[file:LVGL docs example 102.png|link=https://docs.lvgl.io/8.2/examples.html#simple-slider]] |
|- | |- | ||
|103 | |103 | ||
|Slider with custom style | |Slider with custom style | ||
| | | | ||
| − | |[[file:LVGL docs example 103.png]] | + | |[[file:LVGL docs example 103.png|link=https://docs.lvgl.io/8.2/examples.html#slider-with-custom-style]] |
|- | |- | ||
|104 | |104 | ||
|Slider with extended drawer | |Slider with extended drawer | ||
| | | | ||
| − | |[[file:LVGL docs example 104.png]] | + | |[[file:LVGL docs example 104.png|link=https://docs.lvgl.io/8.2/examples.html#slider-with-extended-drawer]] |
|- | |- | ||
|105 | |105 | ||
| 660行目: | 660行目: | ||
==== Span with custom styles ==== | ==== Span with custom styles ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 105.png]] | + | |[[file:LVGL docs example 105.png|link=https://docs.lvgl.io/8.2/examples.html#span-with-custom-styles]] |
|- | |- | ||
|106 | |106 | ||
| 669行目: | 669行目: | ||
==== Simple Spinbox ==== | ==== Simple Spinbox ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 106.png]] | + | |[[file:LVGL docs example 106.png|link=https://docs.lvgl.io/8.2/examples.html#simple-spinbox]] |
|- | |- | ||
|107 | |107 | ||
| 678行目: | 678行目: | ||
==== Simple spinner ==== | ==== Simple spinner ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 107.png]] | + | |[[file:LVGL docs example 107.png|link=https://docs.lvgl.io/8.2/examples.html#simple-spinner]] |
|- | |- | ||
|108 | |108 | ||
| 687行目: | 687行目: | ||
==== Simple Switch ==== | ==== Simple Switch ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 108.png]] | + | |[[file:LVGL docs example 108.png|link=https://docs.lvgl.io/8.2/examples.html#simple-switch]] |
|- | |- | ||
|109 | |109 | ||
| 696行目: | 696行目: | ||
==== Simple table ==== | ==== Simple table ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 109.png]] | + | |[[file:LVGL docs example 109.png|link=https://docs.lvgl.io/8.2/examples.html#simple-table]] |
|- | |- | ||
|110 | |110 | ||
|Lightweighted list from table | |Lightweighted list from table | ||
| | | | ||
| − | |[[file:LVGL docs example 110.png]] | + | |[[file:LVGL docs example 110.png|link=https://docs.lvgl.io/8.2/examples.html#lightweighted-list-from-table]] |
|- | |- | ||
|111 | |111 | ||
| 710行目: | 710行目: | ||
==== Simple Tabview ==== | ==== Simple Tabview ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 111.png]] | + | |[[file:LVGL docs example 111.png|link=https://docs.lvgl.io/8.2/examples.html#simple-tabview]] |
|- | |- | ||
|112 | |112 | ||
|Tabs on the left, styling and no scrolling | |Tabs on the left, styling and no scrolling | ||
| | | | ||
| − | |[[file:LVGL docs example 112.png]] | + | |[[file:LVGL docs example 112.png|link=https://docs.lvgl.io/8.2/examples.html#tabs-on-the-left-styling-and-no-scrolling]] |
|- | |- | ||
|113 | |113 | ||
|Simple Text area | |Simple Text area | ||
| | | | ||
| − | |[[file:LVGL docs example 113.png]] | + | |[[file:LVGL docs example 113.png|link=https://docs.lvgl.io/8.2/examples.html#simple-text-area]] |
|- | |- | ||
|114 | |114 | ||
|Text area with password field | |Text area with password field | ||
| | | | ||
| − | |[[file:LVGL docs example 114.png]] | + | |[[file:LVGL docs example 114.png|link=https://docs.lvgl.io/8.2/examples.html#text-area-with-password-field]] |
|- | |- | ||
|115 | |115 | ||
|Text auto-formatting | |Text auto-formatting | ||
| | | | ||
| − | |[[file:LVGL docs example 115.png]] | + | |[[file:LVGL docs example 115.png|link=https://docs.lvgl.io/8.2/examples.html#text-auto-formatting]] |
|- | |- | ||
|116 | |116 | ||
| 739行目: | 739行目: | ||
==== Tileview with content ==== | ==== Tileview with content ==== | ||
| | | | ||
| − | |[[file:LVGL docs example 116.png]] | + | |[[file:LVGL docs example 116.png|link=https://docs.lvgl.io/8.2/examples.html#tileview-with-content]] |
|- | |- | ||
|117 | |117 | ||
2022年6月16日 (木) 13:21時点における版
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 |
|
