App:Library:LVGL:docs:Examples

提供: robot-jp wiki
ナビゲーションに移動検索に移動

https://docs.lvgl.io/8.2/examples.html


Get started

Link (Source code : C , MicroPython) 英文 自動翻訳
001 LVGL docs example 001.png A button with a label and react on click event ラベルが付いたボタン

クリックイベントに反応します

002 LVGL docs example 002.png Create styles from scratch for buttons ボタンのスタイルを最初から作成する
003 LVGL docs example 003.png Create a slider and write its value on a label スライダーを作成し、その値をラベルに書き込みます
戻る : Previous

Styles

Link 英文 自動翻訳
004 LVGL docs example 004.png Size styles サイズ
005 LVGL docs example 005.png Background styles 背景
006 LVGL docs example 006.png Border styles ボーダー
007 LVGL docs example 007.png Outline styles アウトライン
008 LVGL docs example 008.png Shadow styles
009 LVGL docs example 009.png Image styles 画像
010 LVGL docs example 010.png Text styles 文字
011 LVGL docs example 011.png Line styles
012 LVGL docs example 012.png Transition 遷移
013 LVGL docs example 013.png Using multiple styles 複数のスタイルを使用
014 LVGL docs example 014.png Local styles ローカルスタイル
016 LVGL docs example 016.png Add styles to parts and states パーツと状態にスタイルを追加
017 LVGL docs example 017.png Extending the current theme 現在のテーマを拡張
戻る : Previous

Animations

Link 英文 自動翻訳
018 LVGL docs example 018.png

Start animation on an event

イベントでアニメーションを開始
019 LVGL docs example 019.png Playback animation 再生アニメーション
020 LVGL docs example 020.png Animation timeline アニメーションのタイムライン
戻る : Previous

Events

Link 英文 自動翻訳
021 LVGL docs example 021.png Button click event ボタンクリックイベント
022 LVGL docs example 022.png Handle multiple events 複数のイベントを処理
023 LVGL docs example 023.png Event bubbling イベントバブリング
戻る : Previous

Layouts

Flex

Link 英文 自動翻訳
024 LVGL docs example 024.png A simple row and a column layout with flexbox フレックスボックスを使用した単純な行と列のレイアウト
025 LVGL docs example 025.png Arrange items in rows with wrap and even spacing アイテムを折り返し、均等な間隔で行に配置
026 LVGL docs example 026.png Demonstrate flex grow フレックスグロー(デモ)
027 LVGL docs example 027.png Demonstrate flex grow. フレックスの成長(デモ)
028 LVGL docs example 028.png Demonstrate column and row gap style properties 列と行のギャップスタイルのプロパティ(デモ)
029 LVGL docs example 029.png RTL base direction changes order of the items RTLベース方向はアイテムの順序を変更
戻る : Previous

Grid

Link 英文 自動翻訳
030 LVGL docs example 030.png A simple grid シンプルなグリッド
031 LVGL docs example 031.png Demonstrate cell placement and span セルの配置とスパン
032 LVGL docs example 032.png Demonstrate grid's "free unit" グリッドの「フリーユニット」(デモ)
033 LVGL docs example 033.png Demonstrate track placement トラックの配置(デモ)
034 LVGL docs example 034.png Demonstrate column and row gap 列と行のギャップ(デモ)
035 LVGL docs example 035.png Demonstrate RTL direction on grid グリッド上でRTLの方向(デモ)
戻る : Previous

Scrolling

Link 英文 自動翻訳
036 LVGL docs example 036.png Nested scrolling ネスト(入れ子)されたスクロール
037 LVGL docs example 037.png Snapping スナップ
038 LVGL docs example 038.png Floating button フローティングボタン
039 LVGL docs example 039.png Styling the scrollbars スクロールバーのスタイリング
040 LVGL docs example 040.png Right to left scrolling 右から左へのスクロール
041 LVGL docs example 041.png Translate on scroll 説明のスクロール
戻る : Previous

Widgets

Base object

Link 英文 自動翻訳
042 LVGL docs example 042.png Base objects with custom styles カスタムスタイルのベースオブジェクト
043 LVGL docs example 043.png Make an object draggable オブジェクトをドラッグ可能にする
戻る : Previous

Arc

Link 英文 自動翻訳
044 LVGL docs example 044.png Simple Arc シンプルアーク
045 LVGL docs example 045.png Loader with Arc アーク付きローダー
戻る : Previous

Bar

Link 英文 自動翻訳
046 LVGL docs example 046.png Simple Bar シンプルなバー
047 LVGL docs example 047.png Styling a bar バーのスタイリング
048 LVGL docs example 048.png Temperature meter 温度計
049 LVGL docs example 049.png Stripe pattern and range value 縞模様と範囲の値
050 LVGL docs example 050.png Bar with LTR and RTL base direction LTRおよびRTLベース方向のバー
051 LVGL docs example 051.png Custom drawer to show the current value 現在の値を表示するカスタムドロワー
戻る : Previous

Button

Link 英文 自動翻訳
052 LVGL docs example 052.png Simple Buttons シンプルなボタン
053 LVGL docs example 053.png Styling buttons スタイリングボタン
054 LVGL docs example 054.png Gummy button グミボタン
戻る : Previous

Button matrix

Link 英文 自動翻訳
055 LVGL docs example 055.png Simple Button matrix シンプルなボタンマトリックス
056 LVGL docs example 056.png Custom buttons カスタムボタン
057 LVGL docs example 057.png Pagination ページ付け
戻る : Previous

Calendar

Link 英文 自動翻訳
058 LVGL docs example 058.png Calendar with header ヘッダー付きカレンダー
戻る : Previous

Canvas

Link 英文 自動翻訳
059 LVGL docs example 059.png Drawing on the Canvas and rotate キャンバスに描画して回転
060 LVGL docs example 060.png Transparent Canvas with chroma keying クロマキー付きの透明なキャンバス
戻る : Previous

Chart

Link 英文 自動翻訳
061 LVGL docs example 061.png Line Chart 折れ線グラフ
062 LVGL docs example 062.png Faded area line chart with custom division lines カスタム分割線を使用した色あせたエリア折れ線グラフ
063 LVGL docs example 063.png Axis ticks and labels with scrolling 目盛りとスクロールするラベル付きの軸
064 LVGL docs example 064.png Show the value of the pressed points 押されたポイントの値を表示
065 LVGL docs example 065.png Display 1000 data points with zooming and scrolling ズームとスクロールで1000個のデータポイントを表示
066 LVGL docs example 066.png Show cursor on the clicked point クリックしたポイントにカーソルを表示
067 LVGL docs example 067.png Scatter chart 散布図
068 LVGL docs example 068.png Stacked area chart 積み上げ面グラフ
戻る : Previous

Checkbox

Link 英文 自動翻訳
069 LVGL docs example 069.png Simple Checkboxes シンプルなチェックボックス
070 LVGL docs example 070.png Checkboxes as radio buttons ラジオボタンとしてのチェックボックス
戻る : Previous

Colorwheel

Link 英文 自動翻訳
071 LVGL docs example 071.png Simple Colorwheel シンプルなカラーホイール
戻る : Previous

Dropdown

Link 英文 自動翻訳
072 LVGL docs example 072.png Simple Drop down list シンプルなドロップダウンリスト
073 LVGL docs example 073.png Drop down in four directions 4方向のドロップダウン
074 LVGL docs example 074.png Menu メニュー
075 LVGL docs example 075.png Image 画像
076 LVGL docs example 076.png Image recoloring 画像の色変更
077 LVGL docs example 077.png Rotate and zoom 回転およびズーム
078 LVGL docs example 078.png Image offset and styling 画像のオフセットとスタイリング
戻る : Previous

Image button

Link 英文 自動翻訳
079 LVGL docs example 079.png Simple Image button シンプルな画像ボタン
戻る : Previous

Keyboard

Link 英文 自動翻訳
080 LVGL docs example 080.png Keyboard with text area テキストエリア付きキーボード
戻る : Previous

Label

Link 英文 自動翻訳
081 LVGL docs example 081.png Line wrap, recoloring and scrolling 行の折り返し、色の変更、スクロール
082 LVGL docs example 082.png Text shadow テキストシャドウ
083 LVGL docs example 083.png Show LTR, RTL and Chinese texts LTR、RTL、中国語のテキストを表示
084 LVGL docs example 084.png Draw label with gradient color グラデーションカラーでラベルを描く
戻る : Previous

LED

Link 英文 自動翻訳
085 LVGL docs example 085.png LED with custom style カスタムスタイルのLED
戻る : Previous

Line

Link 英文 自動翻訳
086 LVGL docs example 086.png Simple Line シンプルなライン
戻る : Previous

List

Link 英文 自動翻訳
087 LVGL docs example 087.png Simple List 簡単なリスト
088 LVGL docs example 088.png Sorting a List using up and down buttons 上ボタンと下ボタンを使用してリストを並べ替える
戻る : Previous

Menu

Link 英文 自動翻訳
089 LVGL docs example 089.png Simple Menu シンプルメニュー
090 LVGL docs example 090.png Simple Menu with root btn ルートボタンのシンプルなメニュー
091 LVGL docs example 091.png Simple Menu with custom header カスタムヘッダー付きのシンプルなメニュー
092 LVGL docs example 092.png Simple Menu with floating btn to add new menu page 新しいメニューページを追加するためのフローティングボタンを備えたシンプルなメニュー
093 LVGL docs example 093.png Complex Menu 複雑なメニュー
094 LVGL docs example 094.png Simple meter シンプルなメーター
095 LVGL docs example 095.png A meter with multiple arcs 複数のアークを備えたメーター
096 LVGL docs example 096.png A clock from a meter メーターからの時計
097 LVGL docs example 097.png Pie chart 円グラフ
戻る : Previous

Messqage box

Link 英文 自動翻訳
098 LVGL docs example 098.png Simple Message box シンプルなメッセージボックス
戻る : Previous

Roller

Link 英文 自動翻訳
099 LVGL docs example 099.png Simple Roller シンプルローラー
100 LVGL docs example 100.png Styling the roller ローラーのスタイリング
101 LVGL docs example 101.png add fade mask to roller ローラーにフェードマスクを追加
戻る : Previous

Slider

Link 英文 自動翻訳
102 LVGL docs example 102.png Simple Slider シンプルなスライダー
103 LVGL docs example 103.png Slider with custom style カスタムスタイルのスライダー
104 LVGL docs example 104.png Slider with extended drawer 拡張引き出し付きスライダー
戻る : Previous

Span

Link 英文 自動翻訳
105 LVGL docs example 105.png Span with custom styles カスタムスタイル付きSPAN
戻る : Previous

Spinbox

Link 英文 自動翻訳
106 LVGL docs example 106.png Simple Spinbox シンプルなスピンボックス
戻る : Previous

Spinner

Link 英文 自動翻訳
107 LVGL docs example 107.png Simple spinner シンプルなスピナー
戻る : Previous

Switch

Link 英文 自動翻訳
108 LVGL docs example 108.png Simple Switch シンプルなスイッチ
戻る : Previous

Table

Link 英文 自動翻訳
109 LVGL docs example 109.png Simple table シンプルなテーブル
110 LVGL docs example 110.png Lightweighted list from table テーブルからの軽量化されたリスト
戻る : Previous

Tabview

Link 英文 自動翻訳
111 LVGL docs example 111.png Simple Tabview シンプルなタブビュー
112 LVGL docs example 112.png Tabs on the left, styling and no scrolling 左側のタブ(スタイリング入り、スクロールなし)
113 LVGL docs example 113.png Simple Text area シンプルなテキストエリア
114 LVGL docs example 114.png Text area with password field パスワードフィールドのあるテキスト領域
115 LVGL docs example 115.png Text auto-formatting テキストの自動フォーマット
戻る : Previous

Tabview

Link 英文 自動翻訳
116 LVGL docs example 116.png Tileview with content コンテンツ付きのタイルビュー
戻る : Previous

Window

Link 英文 自動翻訳
117 LVGL docs example 117.png Simple window シンプルなウィンドウ
戻る : Previous