docs/README_jp.md
<a href="https://github.com/sponsors/lvgl" target="_blank"></a>
<p align="right"><a href="../README.md">English</a> | <a href="./README_zh.md">中文</a> | <a href="./README_pt_BR.md">Português do Brasil</a> | <b>日本語</b> | <a href="./README_he.md">עברית</a> </p> <p align="center"> </p><h1 align="center">Light and Versatile Graphics Library</h1>
<div align="center"></div> <p align="center"> <a href="https://lvgl.io" title="LVGL ホームページ">ウェブサイト</a> | <a href="https://pro.lvgl.io" title="LVGL Pro XML ベースの UI エディター">LVGL Pro エディター</a> | <a href="https://docs.lvgl.io/" title="100 以上のサンプル付き詳細ドキュメント">ドキュメント</a> | <a href="https://forum.lvgl.io" title="質問・回答コミュニティ">フォーラム</a> | <a href="https://lvgl.io/demos" title="ブラウザで実行できるデモ">デモ</a> | <a href="https://lvgl.io/services" title="グラフィックデザイン、UI 実装、コンサルティング">サービス</a> </p>
LVGL は、あらゆるメーカーやプラットフォームの MCU および MPU に対応した、無料でオープンソースの UI ライブラリです。
要件:LVGL は外部依存がないため、最新のあらゆるターゲットに簡単にコンパイルできます。小型 MCU から 3D 対応のマルチコア Linux MPU まで対応。シンプルな UI の場合、約 100kB の RAM、200~300kB のフラッシュ、および画面の 1/10 サイズのバッファで十分です。
はじめに:VSCode、Eclipse などのプロジェクトを選び、PC 上で LVGL を試してみましょう。LVGL の UI コードは完全にプラットフォーム非依存なので、そのまま組込みターゲットでも使用できます。
LVGL Pro は、UI をより迅速に構築・テスト・共有・出荷できる完全なツールキットです。XML エディターを備え、再利用可能なコンポーネントの作成・テスト、C コードのエクスポート、XML の実行時読み込みが可能です。詳細は公式サイトをご覧ください。
無料でポータブル
ウィジェット・スタイル・レイアウトなど
LVGL は外部依存がなく、さまざまなデバイスで簡単にビルドでき、主要なパッケージマネージャや RTOS にも統合されています:
LVGL Pro は、組込み UI を効率的に構築・テスト・共有・出荷するための完全なツール群です。
以下の 4 つのツールで構成されています:
これらのツールを組み合わせることで、開発者は効率的に UI を構築し、信頼性の高いテストとチームコラボレーションを実現できます。
詳細は https://pro.lvgl.io へ。
LVGL LLC は、UI 開発を支援するさまざまな商用サービスを提供しています。ユーザーインターフェースとグラフィック分野で 15 年以上の経験を活かし、あなたの製品 UI を次のレベルへ導きます。
参考として デモ をご覧ください。詳細は サービスページ を参照ください。
お問い合わせ からご連絡ください。
LVGL の統合は非常に簡単です。プロジェクトに追加して他のファイルと同様にコンパイルするだけです。
設定するには、lv_conf_template.h を lv_conf.h としてコピーし、最初の #if 0 を有効化して必要に応じて設定を調整します。
(通常はデフォルト設定で十分です。)Kconfig にも対応しています。
プロジェクト内で LVGL を初期化し、ディスプレイと入力デバイスを作成する例:
#include "lvgl/lvgl.h" /*LV_LVGL_H_INCLUDE_SIMPLE を定義すると "lvgl.h" としてインクルード可能*/
#define TFT_HOR_RES 320
#define TFT_VER_RES 240
static uint32_t my_tick_cb(void)
{
return my_get_millisec();
}
static void my_flush_cb(lv_display_t * disp, const lv_area_t * area, uint8_t * px_map)
{
/*px_map をフレームバッファまたは外部ディスプレイコントローラに書き込む*/
}
static void my_touch_read_cb(lv_indev_t * indev, lv_indev_data_t * data)
{
if(my_touch_is_pressed()) {
data->point.x = touchpad_x;
data->point.y = touchpad_y;
data->state = LV_INDEV_STATE_PRESSED;
} else {
data->state = LV_INDEV_STATE_RELEASED;
}
}
void main(void)
{
my_hardware_init();
/*LVGL を初期化*/
lv_init();
/*ミリ秒単位のタイマーコールバックを設定*/
lv_tick_set_cb(my_tick_cb);
/*ディスプレイを作成*/
lv_display_t * display = lv_display_create(TFT_HOR_RES, TFT_VER_RES);
/*描画バッファを追加(16bit RGB565 の場合)*/
static uint8_t buf[TFT_HOR_RES * TFT_VER_RES / 10 * 2];
lv_display_set_buffers(display, buf, NULL, sizeof(buf), LV_DISPLAY_RENDER_MODE_PARTIAL);
/*描画内容をフラッシュするコールバックを設定*/
lv_display_set_flush_cb(display, my_flush_cb);
/*入力デバイスを作成(タッチ用)*/
lv_indev_t * indev = lv_indev_create();
lv_indev_set_type(indev, LV_INDEV_TYPE_POINTER);
lv_indev_set_read_cb(indev, my_touch_read_cb);
/*UI を作成*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "Hello world");
lv_obj_center(label);
/*メインループで LVGL を実行*/
while(1) {
lv_timer_handler();
my_sleep_ms(5);
}
}
100 以上のサンプルが https://docs.lvgl.io/master/examples.html にあります。
オンラインビューア https://viewer.lvgl.io/ でも XML のチュートリアルを学べます。
static void button_clicked_cb(lv_event_t * e)
{
printf("Clicked\n");
}
[...]
lv_obj_t * button = lv_button_create(lv_screen_active());
lv_obj_center(button);
lv_obj_add_event_cb(button, button_clicked_cb, LV_EVENT_CLICKED, NULL);
lv_obj_t * label = lv_label_create(button);
lv_label_set_text(label, "Hello from LVGL!");
<screen>
<view>
<lv_button align="center">
<event_cb callback="button_clicked_cb" />
<lv_label text="Hello from LVGL!" />
</lv_button>
</view>
</screen>
static void my_observer_cb(lv_observer_t * observer, lv_subject_t * subject)
{
printf("Slider value: %d\n", lv_subject_get_int(subject));
}
[...]
static lv_subject_t subject_value;
lv_subject_init_int(&subject_value, 35);
lv_subject_add_observer(&subject_value, my_observer_cb, NULL);
lv_style_t style_base;
lv_style_init(&style_base);
lv_style_set_bg_color(&style_base, lv_color_hex(0xff8800));
lv_style_set_bg_opa(&style_base, 255);
lv_style_set_radius(&style_base, 4);
lv_obj_t * slider = lv_slider_create(lv_screen_active());
lv_obj_center(slider);
lv_obj_set_size(slider, lv_pct(80), 16);
lv_obj_add_style(slider, &style_base, LV_PART_INDICATOR);
lv_obj_add_style(slider, &style_base, LV_PART_KNOB);
lv_obj_add_style(slider, &style_base, 0);
lv_obj_set_style_bg_opa(slider, LV_OPA_50, 0);
lv_obj_set_style_border_width(slider, 3, LV_PART_KNOB);
lv_obj_set_style_border_color(slider, lv_color_hex3(0xfff), LV_PART_KNOB);
lv_slider_bind_value(slider, &subject_value);
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_obj_align(label, LV_ALIGN_CENTER, 0, -30);
lv_label_bind_text(label, &subject_value, "Temperature: %d °C");
<screen>
<styles>
<style name="style_base" bg_opa="100%" bg_color="0xff8800" radius="4" />
<style name="style_border" border_color="0xfff" border_width="3" />
</styles>
<view>
<lv_label bind_text="value" bind_text-fmt="Temperature: %d °C" align="center" y="-30" />
<lv_slider align="center" bind_value="value" style_bg_opa="30%">
<style name="style_base" />
<style name="style_base" selector="knob" />
<style name="style_base" selector="indicator" />
<style name="style_border" selector="knob" />
</lv_slider>
</view>
</screen>
/* 新しい画面を作成してロード */
lv_obj_t * scr = lv_obj_create(NULL);
lv_screen_load(scr);
/* 縦方向のレイアウトを設定 */
lv_obj_set_flex_flow(scr, LV_FLEX_FLOW_COLUMN);
lv_obj_set_flex_align(scr, LV_FLEX_ALIGN_SPACE_EVENLY,
LV_FLEX_ALIGN_START,
LV_FLEX_ALIGN_CENTER);
/* チェックボックスを 5 個作成 */
const char * texts[5] = {"Input 1", "Input 2", "Input 3", "Output 1", "Output 2"};
for(int i = 0; i < 5; i++) {
lv_obj_t * cb = lv_checkbox_create(scr);
lv_checkbox_set_text(cb, texts[i]);
}
/* 状態変更 */
lv_obj_add_state(lv_obj_get_child(scr, 1), LV_STATE_CHECKED);
lv_obj_add_state(lv_obj_get_child(scr, 3), LV_STATE_DISABLED);
<screen