Skip to content

Latest commit

 

History

History
652 lines (461 loc) · 23.2 KB

README_jp.rst

File metadata and controls

652 lines (461 loc) · 23.2 KB
Raw

English| 中文| Português do Brasil | 日本語

Light and Versatile Graphics Library

Website | Docs | Forum 🇬🇧 | Demos | Services | SquareLine Studio 🇬🇧

ledger:

Overview

実績 LVGL は、フリー＆オープンソースの組み込み用グラフィックスライブラリです。 あらゆるMCU、MPU、ディスプレイタイプに対応しており、美しいUI(User Interface)を実現できます。 ARM, STM32, NXP, Espressif, Nuvoton, Arduino, RT-Thread, Zephyr, NuttX, Adafruitなど、業界をリードするベンダーやプロジェクトによりサポートされています。

機能豊富モダンで美しいGUIを作成するための機能をすべて備えています。 30以上の組み込みウィジェット、強力なスタイルシステム、WEB由来のレイアウトマネージャ、多くの言語をサポートする文字グラフィックシステムなどです。 LVGL のシステム要件は、RAM 32KB、Flash 128KB、Cコンパイラ、フレームバッファ、1/10スクリーンサイズのレンダリング用バッファです。

UIエディタ SquareLine Studio は、LVGL用のプロフェッショナル＆リーズナブルなドラッグ＆ドロップ型のUIエディターです。 Windows、Linux、MacOS で動作し、ウェブサイトへの登録なしで試すことができます。

サービス LVGL LLC では、グラフィックデザイン、UI実装、コンサルティングサービスに対する技術サポートが可能です。GUIプロジェクトの開発において何らかのサポートが必要な場合には、お気軽にお問い合わせください。

rocket:

特徴

フリー & 移植可能 - 外部依存関係がなく、完全に移植可能な Cライブラリ。(C++互換) - 任意の(RT)OS、任意のMCU・MPU用にコンパイル可能。 - 電子ペーパー、OLEDディスプレイ、TFTディスプレイ、白黒ディスプレイ、モニターに対応。 Porting Guide - MITライセンスにより商用利用可能。 - システム要件：RAM 32KB、Flash 128KB、フレームバッファ、レンダリング用に1/10以上のスクリーンサイズのバッファ。 - OS、外部メモリ、GPUもサポート。

ウィジェット、スタイル、レイアウトなど - 30以上の組み込み ウィジェット: ボタン、ラベル、スライダー、グラフ、キーボード、メーター、円弧、表など。 - ウィジェットの任意の部分を任意の状態にカスタマイズ可能な豊富なスタイルプロパティを備えた柔軟な スタイルシステム。 - Flexbox および グリッド 風のレイアウトエンジンにより、ウィジェットのサイズと位置を自動的に設定。 - テキスト表示(UTF-8対応)は、中国語、日本語、韓国語、タイ語、ヒンディー語、アラビア語、ペルシア語をサポート。 - ワードラッピング、カーニング、テキストスクロール、サブピクセルレンダリング、ピンイン-IME中国語入力、テキスト中の絵文字に対応。 - アニメーション、アンチエイリアシング、不透明度、スムーズスクロール、シャドウ、画像変換などをサポートするレンダリングエンジン。 - マウス、タッチパッド、キーパッド、キーボード、外部ボタン、エンコーダ等の 入力デバイス をサポート。 - マルチディスプレイ 対応。

Binding と Build をサポート - Micropython Binding が LVGL API を公開。 - カスタムビルドシステムは使用せず、プロジェクトの他のファイルをビルドするときに、LVGLをビルド可能。 - Make と CMake が含まれており、すぐ使えるようにサポート。 - PCのシミュレータで開発したUIコード は、そのまま組込み用ハードウェアでも使用可能。 - Emscripten port 🇬🇧 によりC言語のUIコードをHTMLファイルに変換。

ドキュメント, ツール, 技術サービス - ドキュメントは100以上の簡単なサンプルプログラム 🇬🇧 入り 。 - SquareLine Studio 🇬🇧 - UI開発をスピードアップおよび簡素化するためのプロフェッショナルで使いやすいUIエディターソフトウェア。 - UI開発をよりシンプルかつ迅速にするための、ユーザーインターフェイスの設計、実装、コンサルティングなどの 技術サービス。

package:

パッケージ

LVGL は以下で利用可能です。 - Arduino library - PlatformIO package 🇬🇧 - Zephyr library - ESP32 component - NXP MCUXpresso component - NuttX library - RT-Thread RTOS - NXP MCUXpresso library - CMSIS-Pack

robot:

サンプルプログラム

ウィジェット・レイアウト・スタイルのサンプルプログラムを用意しました。 C と MicroPython のコードを選べます。 オンラインの MicroPythonエディタ へのリンクにより、サンプルプログラムの動作確認・編集もできます。

その他のサンプルプログラムは Examples フォルダ 🇬🇧 を確認してください。

Button with Click Event

ラベル付きボタンのLVGLサンプルプログラム

ラベル付きボタンのLVGLサンプルプログラム

C code

lv_obj_t * btn = lv_btn_create(lv_scr_act());                   /*Add a button to the current screen*/
lv_obj_center(btn);                                             /*Set its position*/
lv_obj_set_size(btn, 100, 50);                                  /*Set its size*/
lv_obj_add_event(btn, btn_event_cb, LV_EVENT_CLICKED, NULL); /*Assign a callback to the button*/

lv_obj_t * label = lv_label_create(btn);                        /*Add a label to the button*/
lv_label_set_text(label, "Button");                             /*Set the labels text*/
lv_obj_center(label);                                           /*Align the label to the center*/
...

void btn_event_cb(lv_event_t * e)
{
  printf("Clicked\n");
}

MicroPython code | Online Simulator 🇬🇧

def btn_event_cb(e):
  print("Clicked")

# Create a Button and a Label
btn = lv.btn(lv.scr_act())
btn.center()
btn.set_size(100, 50)
btn.add_event(btn_event_cb, lv.EVENT.CLICKED, None)

label = lv.label(btn)
label.set_text("Button")
label.center()

Checkboxes with Layout

Checkboxes with layout in LVGL

Checkboxes with layout in LVGL

C code

lv_obj_set_flex_flow(lv_scr_act(), LV_FLEX_FLOW_COLUMN);
lv_obj_set_flex_align(lv_scr_act(), LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER);

lv_obj_t * cb;
cb = lv_checkbox_create(lv_scr_act());
lv_checkbox_set_text(cb, "Apple");
lv_obj_add_event(cb, event_handler, LV_EVENT_ALL, NULL);

cb = lv_checkbox_create(lv_scr_act());
lv_checkbox_set_text(cb, "Banana");
lv_obj_add_state(cb, LV_STATE_CHECKED);
lv_obj_add_event(cb, event_handler, LV_EVENT_ALL, NULL);

cb = lv_checkbox_create(lv_scr_act());
lv_checkbox_set_text(cb, "Lemon");
lv_obj_add_state(cb, LV_STATE_DISABLED);
lv_obj_add_event(cb, event_handler, LV_EVENT_ALL, NULL);

cb = lv_checkbox_create(lv_scr_act());
lv_obj_add_state(cb, LV_STATE_CHECKED | LV_STATE_DISABLED);
lv_checkbox_set_text(cb, "Melon\nand a new line");
lv_obj_add_event(cb, event_handler, LV_EVENT_ALL, NULL);

MicroPython code | Online Simulator 🇬🇧

def event_handler(e):
    code = e.get_code()
    obj = e.get_target_obj()
    if code == lv.EVENT.VALUE_CHANGED:
        txt = obj.get_text()
        if obj.get_state() & lv.STATE.CHECKED:
            state = "Checked"
        else:
            state = "Unchecked"
        print(txt + ":" + state)


lv.scr_act().set_flex_flow(lv.FLEX_FLOW.COLUMN)
lv.scr_act().set_flex_align(lv.FLEX_ALIGN.CENTER, lv.FLEX_ALIGN.START, lv.FLEX_ALIGN.CENTER)

cb = lv.checkbox(lv.scr_act())
cb.set_text("Apple")
cb.add_event(event_handler, lv.EVENT.ALL, None)

cb = lv.checkbox(lv.scr_act())
cb.set_text("Banana")
cb.add_state(lv.STATE.CHECKED)
cb.add_event(event_handler, lv.EVENT.ALL, None)

cb = lv.checkbox(lv.scr_act())
cb.set_text("Lemon")
cb.add_state(lv.STATE.DISABLED)
cb.add_event(event_handler, lv.EVENT.ALL, None)

cb = lv.checkbox(lv.scr_act())
cb.add_state(lv.STATE.CHECKED | lv.STATE.DISABLED)
cb.set_text("Melon")
cb.add_event(event_handler, lv.EVENT.ALL, None)

Styling a Slider

Styling a slider with LVGL

Styling a slider with LVGL

C code

lv_obj_t * slider = lv_slider_create(lv_scr_act());
lv_slider_set_value(slider, 70, LV_ANIM_OFF);
lv_obj_set_size(slider, 300, 20);
lv_obj_center(slider);

/*Add local styles to MAIN part (background rectangle)*/
lv_obj_set_style_bg_color(slider, lv_color_hex(0x0F1215), LV_PART_MAIN);
lv_obj_set_style_bg_opa(slider, 255, LV_PART_MAIN);
lv_obj_set_style_border_color(slider, lv_color_hex(0x333943), LV_PART_MAIN);
lv_obj_set_style_border_width(slider, 5, LV_PART_MAIN);
lv_obj_set_style_pad_all(slider, 5, LV_PART_MAIN);

/*Create a reusable style sheet for the INDICATOR part*/
static lv_style_t style_indicator;
lv_style_init(&style_indicator);
lv_style_set_bg_color(&style_indicator, lv_color_hex(0x37B9F5));
lv_style_set_bg_grad_color(&style_indicator, lv_color_hex(0x1464F0));
lv_style_set_bg_grad_dir(&style_indicator, LV_GRAD_DIR_HOR);
lv_style_set_shadow_color(&style_indicator, lv_color_hex(0x37B9F5));
lv_style_set_shadow_width(&style_indicator, 15);
lv_style_set_shadow_spread(&style_indicator, 5);

/*Add the style sheet to the slider's INDICATOR part*/
lv_obj_add_style(slider, &style_indicator, LV_PART_INDICATOR);

/*Add the same style to the KNOB part too and locally overwrite some properties*/
lv_obj_add_style(slider, &style_indicator, LV_PART_KNOB);

lv_obj_set_style_outline_color(slider, lv_color_hex(0x0096FF), LV_PART_KNOB);
lv_obj_set_style_outline_width(slider, 3, LV_PART_KNOB);
lv_obj_set_style_outline_pad(slider, -5, LV_PART_KNOB);
lv_obj_set_style_shadow_spread(slider, 2, LV_PART_KNOB);

MicroPython code | Online Simulator 🇬🇧

# Create a slider and add the style
slider = lv.slider(lv.scr_act())
slider.set_value(70, lv.ANIM.OFF)
slider.set_size(300, 20)
slider.center()

# Add local styles to MAIN part (background rectangle)
slider.set_style_bg_color(lv.color_hex(0x0F1215), lv.PART.MAIN)
slider.set_style_bg_opa(255, lv.PART.MAIN)
slider.set_style_border_color(lv.color_hex(0x333943), lv.PART.MAIN)
slider.set_style_border_width(5, lv.PART.MAIN)
slider.set_style_pad_all(5, lv.PART.MAIN)

# Create a reusable style sheet for the INDICATOR part
style_indicator = lv.style_t()
style_indicator.init()
style_indicator.set_bg_color(lv.color_hex(0x37B9F5))
style_indicator.set_bg_grad_color(lv.color_hex(0x1464F0))
style_indicator.set_bg_grad_dir(lv.GRAD_DIR.HOR)
style_indicator.set_shadow_color(lv.color_hex(0x37B9F5))
style_indicator.set_shadow_width(15)
style_indicator.set_shadow_spread(5)

# Add the style sheet to the slider's INDICATOR part
slider.add_style(style_indicator, lv.PART.INDICATOR)
slider.add_style(style_indicator, lv.PART.KNOB)

# Add the same style to the KNOB part too and locally overwrite some properties
slider.set_style_outline_color(lv.color_hex(0x0096FF), lv.PART.KNOB)
slider.set_style_outline_width(3, lv.PART.KNOB)
slider.set_style_outline_pad(-5, lv.PART.KNOB)
slider.set_style_shadow_spread(2, lv.PART.KNOB)

English, Hebrew (mixed LRT-RTL) and Chinese texts

English, Hebrew and Chinese texts with LVGL

English, Hebrew and Chinese texts with LVGL

C code

lv_obj_t * ltr_label = lv_label_create(lv_scr_act());
lv_label_set_text(ltr_label, "In modern terminology, a microcontroller is similar to a system on a chip (SoC).");
lv_obj_set_style_text_font(ltr_label, &lv_font_montserrat_16, 0);
lv_obj_set_width(ltr_label, 310);
lv_obj_align(ltr_label, LV_ALIGN_TOP_LEFT, 5, 5);

lv_obj_t * rtl_label = lv_label_create(lv_scr_act());
lv_label_set_text(rtl_label,"מעבד, או בשמו המלא יחידת עיבוד מרכזית (באנגלית: CPU - Central Processing Unit).");
lv_obj_set_style_base_dir(rtl_label, LV_BASE_DIR_RTL, 0);
lv_obj_set_style_text_font(rtl_label, &lv_font_dejavu_16_persian_hebrew, 0);
lv_obj_set_width(rtl_label, 310);
lv_obj_align(rtl_label, LV_ALIGN_LEFT_MID, 5, 0);

lv_obj_t * cz_label = lv_label_create(lv_scr_act());
lv_label_set_text(cz_label,
                  "嵌入式系统（Embedded System），\n是一种嵌入机械或电气系统内部、具有专一功能和实时计算性能的计算机系统。");
lv_obj_set_style_text_font(cz_label, &lv_font_simsun_16_cjk, 0);
lv_obj_set_width(cz_label, 310);
lv_obj_align(cz_label, LV_ALIGN_BOTTOM_LEFT, 5, -5);

MicroPython code | Online Simulator 🇬🇧

ltr_label = lv.label(lv.scr_act())
ltr_label.set_text("In modern terminology, a microcontroller is similar to a system on a chip (SoC).")
ltr_label.set_style_text_font(lv.font_montserrat_16, 0);

ltr_label.set_width(310)
ltr_label.align(lv.ALIGN.TOP_LEFT, 5, 5)

rtl_label = lv.label(lv.scr_act())
rtl_label.set_text("מעבד, או בשמו המלא יחידת עיבוד מרכזית (באנגלית: CPU - Central Processing Unit).")
rtl_label.set_style_base_dir(lv.BASE_DIR.RTL, 0)
rtl_label.set_style_text_font(lv.font_dejavu_16_persian_hebrew, 0)
rtl_label.set_width(310)
rtl_label.align(lv.ALIGN.LEFT_MID, 5, 0)

font_simsun_16_cjk = lv.font_load("S:../../assets/font/lv_font_simsun_16_cjk.fnt")

cz_label = lv.label(lv.scr_act())
cz_label.set_style_text_font(font_simsun_16_cjk, 0)
cz_label.set_text("嵌入式系统（Embedded System），\n是一种嵌入机械或电气系统内部、具有专一功能和实时计算性能的计算机系统。")
cz_label.set_width(310)
cz_label.align(lv.ALIGN.BOTTOM_LEFT, 5, -5)
arrow_forward:

はじめに

LVGLを使い始める時は、以下の順に進める事をおすすめします。

LVGLに触れてみましょう

  1. LVGLの動きを オンラインデモ で確認しましょう。 (3分間)
  2. ドキュメントの Introduction を読みましょう。 (5分間)
  3. LVGLの基本に慣れるため Quick overview を読みましょう。 (15分間)

LVGLを使ってみましょう

  1. シミュレータ をセットアップしましょう。 (10 minutes)
  2. サンプルプログラム 🇬🇧 を動かしてみましょう。
  3. 移植ガイド を参考に、LVGLを開発ボードに移植してみましょう。すぐ使える形の プロジェクト 🇬🇧 も用意してあります。

より詳しく体験してみましょう

  1. ライブラリの理解を深めるため Overview を読みましょう。 (2～3時間)
  2. ウィジェットの機能や使い方の詳細は Widgets でご確認ください。

助け合いましょう

  1. 質問がある場合は Forum 🇬🇧 で質問して下さい。
  2. LVGLの改善への協力は大歓迎です。詳細は Contributing guide をご覧ください。 (15分間)

さらに理解を深めましょう

  1. SquareLine Studio 🇬🇧 をダウンロードして試用してみましょう。
  2. 技術的サポートが必要であれば、技術サービス 🇬🇧 に問い合わせて下さい。
handshake:

技術サービス

LVGL LLC は、LVGLライブラリの確かな背景を元に、UI開発のための様々な技術サービスを提供するために設立されました。 UIとグラフィックス業界における15年以上の実績を活かし、UIを次のレベルに引き上げるお手伝いを致します。

  • グラフィックデザイン 当社のグラフィックデザイナーは、製品とハードウェアのリソースに合わせて美しくモダンなデザインにするエキスパートです。
  • UI実装 お客様または弊社で作成したデザインを元に、UIを実装することも可能です。お客様のハードウェアとLVGLを最大限に活用することをお約束します。 LVGLにない機能やウィジェットは、私たちが実装しますのでご安心ください。
  • コンサルタント＆技術サポート UI開発において、価格と時間を要する作業でのリスクを減らすため、コンサルティングも含めてサポート致します。
  • Board certification development board または production ready kit を提供している企業に対しては、ボードがLVGLを実行できるようにするためのボード認定を行います。

サンプルは Demos をご覧ください。 詳しくは Services page をご覧ください。

お問い合わせは 問い合わせフォーム 🇬🇧 より送信して下さい。

star2:

協力

LVGLはオープンプロジェクトであり、協力は大歓迎です。 色々な方法で協力できます。 協力方法の例 - LVGLを使用した作品やプロジェクトの公表 - サンプルプログラムの作成 - ドキュメントの改善 - バグの修正

協力方法の詳細については、ドキュメントの Contributing section をご覧ください。

すでに 300人以上がLVGLに足跡を残しています。いっしょに活動しましょう! :slightly_smiling_face:

… and many other.