From fc3e2dd1ae47b6812234a0f4f7d44a6f5283725f Mon Sep 17 00:00:00 2001 From: Victor Wheeler Date: Tue, 25 Feb 2025 14:36:30 -0700 Subject: [PATCH] docs: convert 4 `.rst` files back to `.md` files since not part of doc-gen (#7839) --- README.md | 2 +- ...OF_CONDUCT.rst.back => CODE_OF_CONDUCT.md} | 61 +- docs/README_jp.md | 436 +++++++++++ docs/README_jp.rst | 641 ---------------- docs/README_pt_BR.md | 455 +++++++++++ docs/README_pt_BR.rst | 706 ------------------ docs/README_zh.md | 208 ++++++ docs/README_zh.rst | 604 --------------- 8 files changed, 1127 insertions(+), 1986 deletions(-) rename docs/{CODE_OF_CONDUCT.rst.back => CODE_OF_CONDUCT.md} (61%) create mode 100644 docs/README_jp.md delete mode 100644 docs/README_jp.rst create mode 100644 docs/README_pt_BR.md delete mode 100644 docs/README_pt_BR.rst create mode 100644 docs/README_zh.md delete mode 100644 docs/README_zh.rst diff --git a/README.md b/README.md index 5ce2f3be6..f01cbec5a 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@

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


diff --git a/docs/CODE_OF_CONDUCT.rst.back b/docs/CODE_OF_CONDUCT.md similarity index 61% rename from docs/CODE_OF_CONDUCT.rst.back rename to docs/CODE_OF_CONDUCT.md index 88637dd75..9fe5fd5ce 100644 --- a/docs/CODE_OF_CONDUCT.rst.back +++ b/docs/CODE_OF_CONDUCT.md @@ -1,8 +1,6 @@ -Contributor Covenant Code of Conduct -==================================== +# Contributor Covenant Code of Conduct -Our Pledge ----------- +## Our Pledge In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our @@ -11,32 +9,30 @@ regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. -Our Standards -------------- +## Our Standards Examples of behavior that contributes to creating a positive environment include: -- Using welcoming and inclusive language -- Being respectful of differing viewpoints and experiences -- Gracefully accepting constructive criticism -- Focusing on what is best for the community -- Showing empathy towards other community members +- Using welcoming and inclusive language +- Being respectful of differing viewpoints and experiences +- Gracefully accepting constructive criticism +- Focusing on what is best for the community +- Showing empathy towards other community members Examples of unacceptable behavior by participants include: -- The use of sexualized language or imagery and unwelcome sexual - attention or advances -- Trolling, insulting/derogatory comments, and personal or political - attacks -- Public or private harassment -- Publishing others' private information, such as a physical or - electronic address, without explicit permission -- Other conduct which could reasonably be considered inappropriate in a - professional setting +- The use of sexualized language or imagery and unwelcome sexual + attention or advances +- Trolling, insulting/derogatory comments, and personal or political + attacks +- Public or private harassment +- Publishing others\' private information, such as a physical or + electronic address, without explicit permission +- Other conduct which could reasonably be considered inappropriate in + a professional setting -Our Responsibilities --------------------- +## Our Responsibilities Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair @@ -48,8 +44,7 @@ contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. -Scope ------ +## Scope This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. @@ -59,12 +54,11 @@ account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. -Enforcement ------------ +## Enforcement Instances of abusive, harassing, or otherwise unacceptable behavior may -be reported by contacting the project team using the `contact -form `__. All complaints will be reviewed and +be reported by contacting the project team using the [contact +form](https://lvgl.io/about). All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. @@ -73,11 +67,10 @@ separately. Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined -by other members of the project's leadership. +by other members of the project\'s leadership. -Attribution ------------ +## Attribution -This Code of Conduct is adapted from the `Contributor -Covenant `__, version 1.4, available at -`http://contributor-covenant.org/version/1/4 `__ +This Code of Conduct is adapted from the [Contributor +Covenant](http://contributor-covenant.org), version 1.4, available at +[http://contributor-covenant.org/version/1/4](http://contributor-covenant.org/version/1/4/) diff --git a/docs/README_jp.md b/docs/README_jp.md new file mode 100644 index 000000000..2e8197d23 --- /dev/null +++ b/docs/README_jp.md @@ -0,0 +1,436 @@ + + + + +

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

+ +

+  +

+ + + 

Light and Versatile Graphics Library

+ 
+
+ +   +  +
+ +
+ +

+Website | +Docs | +Forum :gb: | +Demos | +Services +

+ +
+ +## :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](https://docs-lvgl-io.translate.goog/master/porting/project.html?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja) + - MITライセンスにより商用利用可能。 + - システム要件：RAM 32KB、Flash 128KB、フレームバッファ、レンダリング用に1/10以上のスクリーンサイズのバッファ。 + - OS、外部メモリ、GPUもサポート。 + +**ウィジェット、スタイル、レイアウトなど** + - 30以上の組み込み [ウィジェット](https://docs-lvgl-io.translate.goog/master/widgets/index.html?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja): ボタン、ラベル、スライダー、グラフ、キーボード、メーター、円弧、表など。 + - ウィジェットの任意の部分を任意の状態にカスタマイズ可能な豊富なスタイルプロパティを備えた柔軟な [スタイルシステム](https://docs-lvgl-io.translate.goog/master/overview/style.html?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja)。 + - [Flexbox](https://docs-lvgl-io.translate.goog/master/layouts/flex.html?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja) および [グリッド](https://docs-lvgl-io.translate.goog/master/layouts/grid.html?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja) 風のレイアウトエンジンにより、ウィジェットのサイズと位置を自動的に設定。 + - テキスト表示(UTF-8対応)は、中国語、日本語、韓国語、タイ語、ヒンディー語、アラビア語、ペルシア語をサポート。 + - ワードラッピング、カーニング、テキストスクロール、サブピクセルレンダリング、ピンイン-IME中国語入力、テキスト中の絵文字に対応。 + - アニメーション、アンチエイリアシング、不透明度、スムーズスクロール、シャドウ、画像変換などをサポートするレンダリングエンジン。 + - マウス、タッチパッド、キーパッド、キーボード、外部ボタン、エンコーダ等の [入力デバイス](https://docs-lvgl-io.translate.goog/master/porting/indev.html?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja) をサポート。 + - [マルチディスプレイ](https://docs-lvgl-io.translate.goog/master/overview/display.html?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja) 対応。 + +**Binding と Build をサポート** + - [MicroPython Binding](https://blog-lvgl-io.translate.goog/2019-02-20/micropython-bindings?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja) が LVGL API を公開。 + - カスタムビルドシステムは使用せず、プロジェクトの他のファイルをビルドするときに、LVGLをビルド可能。 + - Make と [CMake](https://docs-lvgl-io.translate.goog/master/get-started/platforms/cmake.html?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja) が含まれており、すぐ使えるようにサポート。 + - [PCのシミュレータで開発したUIコード](https://docs-lvgl-io.translate.goog/master/get-started/platforms/pc-simulator.html?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja) は、そのまま組込み用ハードウェアでも使用可能。 + - [Emscripten port](https://github.com/lvgl/lv_web_emscripten) :gb: によりC言語のUIコードをHTMLファイルに変換。 + +**ドキュメント, ツール, 技術サービス** + - [ドキュメント](https://docs-lvgl-io.translate.goog/master/index.html?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja)は[100以上の簡単なサンプルプログラム](https://github.com/lvgl/lvgl/tree/master/examples) :gb: 入り 。 + - [SquareLine Studio](https://squareline.io/) :gb: - UI開発をスピードアップおよび簡素化するためのプロフェッショナルで使いやすいUIエディターソフトウェア。 + - UI開発をよりシンプルかつ迅速にするための、ユーザーインターフェイスの設計、実装、コンサルティングなどの [技術サービス](https://lvgl-io.translate.goog/services?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja)。 + +## :package: パッケージ +LVGL は以下で利用可能です。 +- [Arduino library](https://docs-lvgl-io.translate.goog/master/get-started/platforms/arduino.html?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja) +- [PlatformIO package](https://registry.platformio.org/libraries/lvgl/lvgl) :gb: +- [Zephyr library](https://docs-zephyrproject-org.translate.goog/latest/index.html?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja) +- [ESP32 component](https://docs-lvgl-io.translate.goog/master/get-started/platforms/espressif.html?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja) +- [NXP MCUXpresso component](https://www-nxp-com.translate.goog/design/software/embedded-software/lvgl-open-source-graphics-library:LITTLEVGL-OPEN-SOURCE-GRAPHICS-LIBRARY?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja) +- [NuttX library](https://docs-lvgl-io.translate.goog/master/get-started/os/nuttx.html?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja) +- [RT-Thread RTOS](https://docs-lvgl-io.translate.goog/master/get-started/os/rt-thread.html?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja) +- NXP MCUXpresso library +- CMSIS-Pack + +## :robot: サンプルプログラム + +ウィジェット・レイアウト・スタイルのサンプルプログラムを用意しました。 +C と MicroPython のコードを選べます。 +オンラインの MicroPythonエディタ へのリンクにより、サンプルプログラムの動作確認・編集もできます。 + +その他のサンプルプログラムは [Examples フォルダ](https://github.com/lvgl/lvgl/tree/master/examples) :gb: を確認してください。 + +### Button with Click Event + +![ラベル付きボタンのLVGLサンプルプログラム](https://github.com/kisvegabor/test/raw/master/readme_example_2.gif) + +
+ C code + +```c +lv_obj_t * btn = lv_button_create(lv_screen_active());          /*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 :gb: + +```python +def btn_event_cb(e): +  print("Clicked") + +# Create a Button and a Label +btn = lv.btn(lv.screen_active()) +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](https://github.com/kisvegabor/test/raw/master/readme_example_3.gif) + +
+ C code + +```c + +lv_obj_set_flex_flow(lv_screen_active(), LV_FLEX_FLOW_COLUMN); +lv_obj_set_flex_align(lv_screen_active(), LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER); + +lv_obj_t * cb; +cb = lv_checkbox_create(lv_screen_active()); +lv_checkbox_set_text(cb, "Apple"); +lv_obj_add_event(cb, event_handler, LV_EVENT_ALL, NULL); + +cb = lv_checkbox_create(lv_screen_active()); +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_screen_active()); +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_screen_active()); +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 :gb: + +```python +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.screen_active()) +cb.set_text("Apple") +cb.add_event(event_handler, lv.EVENT.ALL, None) + +cb = lv.checkbox(lv.screen_active()) +cb.set_text("Banana") +cb.add_state(lv.STATE.CHECKED) +cb.add_event(event_handler, lv.EVENT.ALL, None) + +cb = lv.checkbox(lv.screen_active()) +cb.set_text("Lemon") +cb.add_state(lv.STATE.DISABLED) +cb.add_event(event_handler, lv.EVENT.ALL, None) + +cb = lv.checkbox(lv.screen_active()) +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](https://github.com/kisvegabor/test/raw/master/readme_example_4.gif) + + +
+ C code + +```c +lv_obj_t * slider = lv_slider_create(lv_screen_active()); +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 :gb: + + + +```python +# Create a slider and add the style +slider = lv.slider(lv.screen_active()) +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](https://github.com/kisvegabor/test/raw/master/readme_example_4.png) + +
+ C code + +```c +lv_obj_t * ltr_label = lv_label_create(lv_screen_active()); +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_screen_active()); +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_screen_active()); +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 :gb: + +```python +ltr_label = lv.label(lv.screen_active()) +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.screen_active()) +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.screen_active()) +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の動きを [オンラインデモ](https://lvgl-io.translate.goog/demos?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja) で確認しましょう。 (3分間) + 2. ドキュメントの [Introduction](https://docs-lvgl-io.translate.goog/master/intro/index.html?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja) を読みましょう。 (5分間) + 3. LVGLの基本に慣れるため [Quick overview](https://docs-lvgl-io.translate.goog/master/get-started/quick-overview.html?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja) を読みましょう。 (15分間) + +**LVGLを使ってみましょう** + + 4. [シミュレータ](https://docs-lvgl-io.translate.goog/master/get-started/platforms/pc-simulator.html?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja) をセットアップしましょう。 (10 minutes) + 5. [サンプルプログラム](https://github.com/lvgl/lvgl/tree/master/examples) :gb: を動かしてみましょう。 + 6. [移植ガイド](https://docs-lvgl-io.translate.goog/master/porting/index.html?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja) を参考に、LVGLを開発ボードに移植してみましょう。すぐ使える形の [プロジェクト](https://github.com/lvgl?q=lv_port_) :gb: も用意してあります。 + +**より詳しく体験してみましょう** + + 7. ライブラリの理解を深めるため [Overview](https://docs-lvgl-io.translate.goog/master/overview/index.html?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja) を読みましょう。 (2～3時間) + 8. ウィジェットの機能や使い方の詳細は [Widgets](https://docs-lvgl-io.translate.goog/master/widgets/index.html?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja) でご確認ください。 + +**助け合いましょう** + + 9. 質問がある場合は [Forum](http://forum.lvgl.io/) :gb: で質問して下さい。 + 10. LVGLの改善への協力は大歓迎です。詳細は [Contributing guide](https://docs-lvgl-io.translate.goog/master/CONTRIBUTING.html?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja) をご覧ください。 (15分間) + +**さらに理解を深めましょう** + + 11. [SquareLine Studio](https://squareline.io/) :gb: をダウンロードして試用してみましょう。 + 12. 技術的サポートが必要であれば、[技術サービス](https://lvgl.io/services) :gb: に問い合わせて下さい。 + + +## :handshake: 技術サービス +[LVGL LLC](https://www.digikey.com/en/design-services-providers/lvgl-kft) は、LVGLライブラリの確かな背景を元に、UI開発のための様々な技術サービスを提供するために設立されました。 UIとグラフィックス業界における15年以上の実績を活かし、UIを次のレベルに引き上げるお手伝いを致します。 + +- **グラフィックデザイン** 当社のグラフィックデザイナーは、製品とハードウェアのリソースに合わせて美しくモダンなデザインにするエキスパートです。 +- **UI実装** お客様または弊社で作成したデザインを元に、UIを実装することも可能です。お客様のハードウェアとLVGLを最大限に活用することをお約束します。 +LVGLにない機能やウィジェットは、私たちが実装しますのでご安心ください。 +- **コンサルタント＆技術サポート** UI開発において、価格と時間を要する作業でのリスクを減らすため、コンサルティングも含めてサポート致します。 +- **Board certification** development board または production ready kit を提供している企業に対しては、ボードがLVGLを実行できるようにするためのボード認定を行います。 + + +サンプルは [Demos](https://lvgl-io.translate.goog/demos?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja) をご覧ください。 +詳しくは [Services page](https://lvgl-io.translate.goog/services?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja) をご覧ください。 + +お問い合わせは [問い合わせフォーム](https://lvgl.io/#contact) :gb: より送信して下さい。 + + +## :star2: 協力 +LVGLはオープンプロジェクトであり、協力は大歓迎です。 +色々な方法で協力できます。 +協力方法の例 + - LVGLを使用した作品やプロジェクトの公表 + - サンプルプログラムの作成 + - ドキュメントの改善 + - バグの修正 + +協力方法の詳細については、ドキュメントの [Contributing section](https://docs-lvgl-io.translate.goog/master/CONTRIBUTING.html?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja) をご覧ください。 + +すでに 300人以上がLVGLに足跡を残しています。いっしょに活動しましょう! :slightly_smiling_face: + + + + + +... and many others. diff --git a/docs/README_jp.rst b/docs/README_jp.rst deleted file mode 100644 index f7483b053..000000000 --- a/docs/README_jp.rst +++ /dev/null @@ -1,641 +0,0 @@ -.. raw:: html - -

- -

- -

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

- -.. raw:: html - -

- -.. raw:: html - -

- -.. raw:: html - -

- -.. raw:: html - -

- -Light and Versatile Graphics Library - -.. raw:: html - -

- -.. raw:: html - -

- -Website \| Docs \| Forum :gb: \| Demos \| Services \| SquareLine Studio -:gb: - -.. raw:: html - -

- -: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 `__ :gb: -によりC言語のUIコードをHTMLファイルに変換。 - -**ドキュメント, ツール, 技術サービス** - -`ドキュメント `__\ は\ `100以上の簡単なサンプルプログラム `__ -:gb: 入り 。 - `SquareLine Studio `__ :gb: - -UI開発をスピードアップおよび簡素化するためのプロフェッショナルで使いやすいUIエディターソフトウェア。 -- -UI開発をよりシンプルかつ迅速にするための、ユーザーインターフェイスの設計、実装、コンサルティングなどの -`技術サービス `__\ 。 - -:package: -パッケージ --------------------- - -LVGL は以下で利用可能です。 - `Arduino -library `__ -- `PlatformIO -package `__ :gb: - -`Zephyr -library `__ -- `ESP32 -component `__ -- `NXP MCUXpresso -component `__ -- `NuttX -library `__ -- `RT-Thread -RTOS `__ -- NXP MCUXpresso library - CMSIS-Pack - -:robot: -サンプルプログラム --------------------------- - -ウィジェット・レイアウト・スタイルのサンプルプログラムを用意しました。 C -と MicroPython のコードを選べます。 オンラインの MicroPythonエディタ -へのリンクにより、サンプルプログラムの動作確認・編集もできます。 - -その他のサンプルプログラムは `Examples -フォルダ `__ :gb: -を確認してください。 - -Button with Click Event -~~~~~~~~~~~~~~~~~~~~~~~ - -.. figure:: https://github.com/kisvegabor/test/raw/master/readme_example_1.gif - :alt: ラベル付きボタンのLVGLサンプルプログラム - - ラベル付きボタンのLVGLサンプルプログラム - -.. raw:: html - -
- -.. raw:: html - - - -C code - -.. raw:: html - - - -.. code-block:: c - - lv_obj_t * btn = lv_button_create(lv_screen_active());                   /*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"); - } - -.. raw:: html - -
- -.. raw:: html - -
- -.. raw:: html - - - -MicroPython code \| Online Simulator :gb: - -.. raw:: html - - - -.. code-block:: python - - 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() - -.. raw:: html - -
- -Checkboxes with Layout -~~~~~~~~~~~~~~~~~~~~~~ - -.. figure:: https://github.com/kisvegabor/test/raw/master/readme_example_2.gif - :alt: Checkboxes with layout in LVGL - - Checkboxes with layout in LVGL - -.. raw:: html - -
- -.. raw:: html - - - -C code - -.. raw:: html - - - -.. code-block:: c - - - lv_obj_set_flex_flow(lv_screen_active(), LV_FLEX_FLOW_COLUMN); - lv_obj_set_flex_align(lv_screen_active(), LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER); - - lv_obj_t * cb; - cb = lv_checkbox_create(lv_screen_active()); - lv_checkbox_set_text(cb, "Apple"); - lv_obj_add_event(cb, event_handler, LV_EVENT_ALL, NULL); - - cb = lv_checkbox_create(lv_screen_active()); - 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_screen_active()); - 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_screen_active()); - 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); - -.. raw:: html - -
- -.. raw:: html - -
- -.. raw:: html - - - -MicroPython code \| Online Simulator :gb: - -.. raw:: html - - - -.. code-block:: python - - 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) - -.. raw:: html - -
- -Styling a Slider -~~~~~~~~~~~~~~~~ - -.. figure:: https://github.com/kisvegabor/test/raw/master/readme_example_3.gif - :alt: Styling a slider with LVGL - - Styling a slider with LVGL - -.. raw:: html - -
- -.. raw:: html - - - -C code - -.. raw:: html - - - -.. code-block:: c - - lv_obj_t * slider = lv_slider_create(lv_screen_active()); - 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 as well 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); - -.. raw:: html - -
- -.. raw:: html - -
- -.. raw:: html - - - -MicroPython code \| Online Simulator :gb: - -.. raw:: html - - - -.. code-block:: python - - # 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 as well 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) - -.. raw:: html - -
- -English, Hebrew (mixed LRT-RTL) and Chinese texts -~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - -.. figure:: https://github.com/kisvegabor/test/raw/master/readme_example_4.png - :alt: English, Hebrew and Chinese texts with LVGL - - English, Hebrew and Chinese texts with LVGL - -.. raw:: html - -
- -.. raw:: html - - - -C code - -.. raw:: html - - - -.. code-block:: c - - lv_obj_t * ltr_label = lv_label_create(lv_screen_active()); - 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_screen_active()); - 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_screen_active()); - 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); - -.. raw:: html - -
- -.. raw:: html - -
- -.. raw:: html - - - -MicroPython code \| Online Simulator :gb: - -.. raw:: html - - - -.. code-block:: python - - 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) - -.. raw:: html - -
- -:arrow_forward: -はじめに ------------------------- - -LVGLを使い始める時は、以下の順に進める事をおすすめします。 - -**LVGLに触れてみましょう** - -1. LVGLの動きを - `オンラインデモ `__ - で確認しましょう。 (3分間) -2. ドキュメントの - `Introduction `__ - を読みましょう。 (5分間) -3. LVGLの基本に慣れるため `Quick - overview `__ - を読みましょう。 (15分間) - -**LVGLを使ってみましょう** - -4. `シミュレータ `__ - をセットアップしましょう。 (10 minutes) -5. `サンプルプログラム `__ - :gb: を動かしてみましょう。 -6. `移植ガイド `__ - を参考に、LVGLを開発ボードに移植してみましょう。すぐ使える形の - `プロジェクト `__ :gb: - も用意してあります。 - -**より詳しく体験してみましょう** - -7. ライブラリの理解を深めるため - `Overview `__ - を読みましょう。 (2～3時間) -8. ウィジェットの機能や使い方の詳細は - `Widgets `__ - でご確認ください。 - -**助け合いましょう** - -9. 質問がある場合は `Forum `__ :gb: - で質問して下さい。 -10. LVGLの改善への協力は大歓迎です。詳細は `Contributing - guide `__ - をご覧ください。 (15分間) - -**さらに理解を深めましょう** - -11. `SquareLine Studio `__ :gb: - をダウンロードして試用してみましょう。 -12. 技術的サポートが必要であれば、\ `技術サービス `__ - :gb: に問い合わせて下さい。 - -:handshake: -技術サービス ------------------------- - -`LVGL -LLC `__ -は、LVGLライブラリの確かな背景を元に、UI開発のための様々な技術サービスを提供するために設立されました。 -UIとグラフィックス業界における15年以上の実績を活かし、UIを次のレベルに引き上げるお手伝いを致します。 - -- **グラフィックデザイン** - 当社のグラフィックデザイナーは、製品とハードウェアのリソースに合わせて美しくモダンなデザインにするエキスパートです。 -- **UI実装** - お客様または弊社で作成したデザインを元に、UIを実装することも可能です。お客様のハードウェアとLVGLを最大限に活用することをお約束します。 - LVGLにない機能やウィジェットは、私たちが実装しますのでご安心ください。 -- **コンサルタント＆技術サポート** - UI開発において、価格と時間を要する作業でのリスクを減らすため、コンサルティングも含めてサポート致します。 -- **Board certification** development board または production ready kit - を提供している企業に対しては、ボードがLVGLを実行できるようにするためのボード認定を行います。 - -サンプルは -`Demos `__ -をご覧ください。 詳しくは `Services -page `__ -をご覧ください。 - -お問い合わせは `問い合わせフォーム `__ :gb: -より送信して下さい。 - -:star2: -協力 ------------- - -LVGLはオープンプロジェクトであり、協力は大歓迎です。 -色々な方法で協力できます。 協力方法の例 - -LVGLを使用した作品やプロジェクトの公表 - サンプルプログラムの作成 - -ドキュメントの改善 - バグの修正 - -協力方法の詳細については、ドキュメントの `Contributing -section `__ -をご覧ください。 - -すでに 300人以上がLVGLに足跡を残しています。いっしょに活動しましょう! -:slightly_smiling_face: - -… and many other. diff --git a/docs/README_pt_BR.md b/docs/README_pt_BR.md new file mode 100644 index 000000000..227e13e48 --- /dev/null +++ b/docs/README_pt_BR.md @@ -0,0 +1,455 @@ +**NOTA IMPORTANTE** A próxima versão principal (v9.0.0) está sendo desenvolvida na branch master. +A última versão estável está disponível na branch [release/v8.3](https://github.com/lvgl/lvgl/tree/release/v8.3). + +--- + + + +

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

+

+  +

+ + + + + 

LVGL - Biblioteca gráfica leve e versátil

+ 
+
+ +   +  +
+ +
+ +

+  Site | +  Documentação | +  Fórum | +  Serviços | +  Demonstrações +

+ +
+ +## :monocle_face: Visão Geral + +**Maduro e popular** + +LVGL é a biblioteca gráfica incorporada gratuita e de código aberto mais popular para criar belas interfaces de usuário para qualquer display do tipo MCU, MPU. Ela é suportada por fornecedores e projetos líderes do setor, como ARM, STM32, NXP, Espressif, Nuvoton, Arduino, RT-Thread, Zephyr, NuttX, Adafruit e muitos outros. + +**Rico em recursos** + +Ela tem todos os recursos para a criação de GUIs modernas e bonitas: mais de 30 widgets integrados, um sistema de design poderoso, gerenciadores de layout inspirados na web e um sistema de tipografia com suporte para vários idiomas. Para integrar o LVGL em sua plataforma, tudo que você precisa é de pelo menos 32kB de RAM e 128kB de Flash, um compilador C, um frame buffer e pelo menos uma tela de tamanho 1/10 para renderização. + +**Editor UI profissional** + +SquareLine Studio é um editor de interface do usuário de (arrasta e solta) profissional para LVGL. Ele roda em Windows, Linux e MacOS também e você pode experimentá-lo sem se registrar no site. + +**Serviços** + +Nossa equipe está pronta para ajudá-lo com design gráfico, implementação de UI e serviços de consultoria. Entre em contato conosco se precisar de algum suporte durante o desenvolvimento de seu próximo projeto de GUI. + +## :rocket: Recursos + +**Gratuito e portátil** + + - Uma biblioteca C totalmente portátil (compatível com C++) sem dependências externas. + - Pode ser compilado para qualquer display MCU ou MPU, e qualquer sistema operacional de tempo real (RT-OS). + - Suporta monitores monocromáticos, ePaper, OLED ou TFT. [Guia de portabilidade](https://docs.lvgl.io/master/porting/project.html) + - Distribuído sob a licença do MIT, para que você também possa usá-lo facilmente em projetos comerciais. + - Precisa de apenas 32 kB de RAM e 128 kB de Flash, um frame buffer e pelo menos uma tela de tamanho 1/10 para renderização. + - Sistemas operacionais, memória externa e GPU são suportados, mas não obrigatórios. + +**Widgets, designs, layouts e muito mais** + + - Mais de 30 widgets integrados: botão, etiqueta (label), controle deslizante (slider), gráfico (chart), teclado, medidor (meter), tabelas e muito mais. + - Sistema de design flexível com pelo menos 100 propriedades de estilo para personalizar qualquer parte dos widgets. + - Mecanismos de layouts Flexbox e Grid para dimensionar e posicionar automaticamente os widgets de maneira responsiva. + - Os textos são renderizados com codificação UTF-8, suportando sistemas de escrita CJK (chinês, japonês e coreano), tailandês, hindi, árabe e persa. + - Quebra de palavras (word wrapping), espaçamento entre letras (kerning), rolagem de texto (scrolling), renderização subpixel, entrada em chinês Pinyin-IME e emojis. + - Mecanismo de renderização que suporta animações, anti-aliasing, opacidade, rolagem suave (smooth scroll), sombras, transformação de imagens, etc. + - Suporta mouse, touchpad, teclado, botões externos, dispositivos de entrada codificadores (encoders). + - Suporta vários monitores. + +**Suporte de vinculação (binding) e compilação de arquivos** + + - Exposição da API do LVGL com o [Micropython](https://blog.lvgl.io/2019-02-20/micropython-bindings) + - Nenhum sistema de compilação personalizado é usado. Você pode construir o LVGL enquanto constrói os outros arquivos do seu projeto. + - O suporte para Make e [CMake](https://docs.lvgl.io/master/get-started/platforms/cmake.html) já vem incluído. + - [Desenvolva no PC](https://docs.lvgl.io/master/get-started/platforms/pc-simulator.html) e use o mesmo código de interface do usuário em hardwares incorporados (embedded hardware). + - Converta o código C para um arquivo HTML com o [Emscripten port](https://github.com/lvgl/lv_web_emscripten). + +**Documentação, ferramentas e serviços** + + - Documentação detalhada com [+100 exemplos simples](https://docs.lvgl.io/master/index.html) + - [SquareLine Studio](https://squareline.io) - Um software editor UI profissional e fácil de usar, para acelerar e simplificar o desenvolvimento da interface do usuário. + - [Serviços](https://lvgl.io/services) como design de UI, implementação e consultoria para tornar o desenvolvimento de UI mais simples e rápido. + +## :heart: Patrocinador + +Se o LVGL economizou muito tempo e dinheiro ou você apenas se divertiu ao usá-lo, considere Apoiar o desenvolvimento. + +**Como e com o que utilizamos os recursos doados?** +Nosso objetivo é fornecer compensação financeira para as pessoas que mais fazem pelo LVGL. Isso significa que não apenas os mantenedores, mas qualquer pessoa que implemente um ótimo recurso deve receber um pagamento com o dinheiro acumulado. Usamos as doações para cobrir nossos custos operacionais, como servidores e serviços relacionados. + +**Como doar?** +Usamos o [Open Collective](https://opencollective.com/lvgl), onde você pode enviar facilmente doações únicas ou recorrentes. Você também pode ver todas as nossas despesas de forma transparente. + +**Como receber o pagamento de sua contribuição?** +Se alguém implementar ou corrigir um problema rotulado como [Patrocinado](https://github.com/lvgl/lvgl/labels/Sponsored), essa pessoa receberá um pagamento por esse trabalho. Estimamos o tempo necessário, a complexidade e a importância da questão e definimos um preço de acordo. Para entrar, apenas comente sobre um problema patrocinado dizendo "Olá, gostaria de lidar com isso. É assim que estou planejando corrigi-lo/implementá-lo...". Um trabalho é considerado pronto quando é aprovado e mesclado por um mantenedor. Depois disso, você pode enviar uma "despesa" (expense) pela plataforma [opencollective.com](https://opencollective.com/lvgl) e então receberá o pagamento em alguns dias. + +**Organizações que apoiam o projeto LVGL**
+[![Patrocinadores do LVGL](https://opencollective.com/lvgl/organizations.svg?width=600)](https://opencollective.com/lvgl) + +**Pessoas que apoiam o projeto LVGL**
+[![Backers of LVGL](https://opencollective.com/lvgl/individuals.svg?width=600)](https://opencollective.com/lvgl) + +## :package: Pacotes + +LVGL está disponível para: + +- [Arduino library](https://docs.lvgl.io/master/get-started/platforms/arduino.html) +- [PlatformIO package](https://registry.platformio.org/libraries/lvgl/lvgl) +- [Zephyr library](https://docs.zephyrproject.org/latest/kconfig.html#CONFIG_LVGL) +- [ESP32 component](https://docs.lvgl.io/master/get-started/platforms/espressif.html) +- [NXP MCUXpresso component](https://www.nxp.com/design/software/embedded-software/lvgl-open-source-graphics-library:LITTLEVGL-OPEN-SOURCE-GRAPHICS-LIBRARY) +- [NuttX library](https://docs.lvgl.io/master/get-started/os/nuttx.html) +- [RT-Thread RTOS](https://docs.lvgl.io/master/get-started/os/rt-thread.html) +- NXP MCUXpresso library +- CMSIS-Pack + +## :man_technologist: Exemplos + +Veja como criar um botão com um evento de clique em C e MicroPython. Para mais exemplos, veja a pasta [examples](https://github.com/lvgl/lvgl/tree/master/examples). + +![LVGL button with label example](https://github.com/lvgl/lvgl/raw/master/docs/misc/btn_example.png) + +### Botão com evento de clique + +![Botão LVGL com exemplo de rótulo (label)](https://github.com/kisvegabor/test/raw/master/readme_example_2.gif) + +
+ Código C + +```c +lv_obj_t * btn = lv_button_create(lv_screen_active());          /* Adiciona o botão a tela atual */ +lv_obj_center(btn);                                     /* Define a posição do botão */ +lv_obj_set_size(btn, 100, 50);                                  /* Define o tamanho do botão */ +lv_obj_add_event(btn, btn_event_cb, LV_EVENT_CLICKED, NULL); /* Atribui um retorno de chamada (callback) ao botão */ + +lv_obj_t * label = lv_label_create(btn);                        /* Adiciona um rótulo (label) */ +lv_label_set_text(label, "Botão");                             /* Define um texto para o rótulo (label) */ +lv_obj_center(label);                                           /* Alinha o texto no centro do botão */ +... + +void btn_event_cb(lv_event_t * e) +{ +  printf("Clicado\n"); +} +``` +
+ +
+ Código MicroPython | Simulador online + +```python +def btn_event_cb(e): +  print("Clicado") + +# Cria um botão e um rótulo (label) +btn = lv.btn(lv.screen_active()) +btn.center() +btn.set_size(100, 50) +btn.add_event(btn_event_cb, lv.EVENT.CLICKED, None) + +label = lv.label(btn) +label.set_text("Botão") +label.center() +``` +
+
+ +### Caixas de seleção (chackboxes) com layout +![Caixas de seleção (chackboxes) com layout no LVGL](https://github.com/kisvegabor/test/raw/master/readme_example_3.gif) + +
+ Código em C + +```c + +lv_obj_set_flex_flow(lv_screen_active(), LV_FLEX_FLOW_COLUMN); +lv_obj_set_flex_align(lv_screen_active(), LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER); + +lv_obj_t * cb; +cb = lv_checkbox_create(lv_screen_active()); +lv_checkbox_set_text(cb, "Maça"); +lv_obj_add_event(cb, event_handler, LV_EVENT_ALL, NULL); + +cb = lv_checkbox_create(lv_screen_active()); +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_screen_active()); +lv_checkbox_set_text(cb, "Limão"); +lv_obj_add_state(cb, LV_STATE_DISABLED); +lv_obj_add_event(cb, event_handler, LV_EVENT_ALL, NULL); + +cb = lv_checkbox_create(lv_screen_active()); +lv_obj_add_state(cb, LV_STATE_CHECKED | LV_STATE_DISABLED); +lv_checkbox_set_text(cb, "Melão\ne uma nova linha"); +lv_obj_add_event(cb, event_handler, LV_EVENT_ALL, NULL); +``` +
+ +
+ Código MicroPython | Online Simulator + +```python +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 = "Marcador" + else: + state = "Desmarcado" + 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.screen_active()) +cb.set_text("Maça") +cb.add_event(event_handler, lv.EVENT.ALL, None) + +cb = lv.checkbox(lv.screen_active()) +cb.set_text("Banana") +cb.add_state(lv.STATE.CHECKED) +cb.add_event(event_handler, lv.EVENT.ALL, None) + +cb = lv.checkbox(lv.screen_active()) +cb.set_text("Limão") +cb.add_state(lv.STATE.DISABLED) +cb.add_event(event_handler, lv.EVENT.ALL, None) + +cb = lv.checkbox(lv.screen_active()) +cb.add_state(lv.STATE.CHECKED | lv.STATE.DISABLED) +cb.set_text("Melão") +cb.add_event(event_handler, lv.EVENT.ALL, None) +``` + +
+
+ +### Estilizando um controle deslizante (slider) +![Estilizando um controle deslizante (slider) com LVGL](https://github.com/kisvegabor/test/raw/master/readme_example_4.gif) + + +
+ Código C + +```c +lv_obj_t * slider = lv_slider_create(lv_screen_active()); +lv_slider_set_value(slider, 70, LV_ANIM_OFF); +lv_obj_set_size(slider, 300, 20); +lv_obj_center(slider); + +/* Adiciona estilos locais à parte MAIN (retângulo de fundo) */ +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); + +/* Crie uma folha de estilo reutilizável para a parte do (INDICADOR) */ +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); + +/* Adicione a folha de estilo à parte do INDICATOR do controle deslizante (slider) */ +lv_obj_add_style(slider, &style_indicator, LV_PART_INDICATOR); + +/* Adicione o mesmo estilo à parte do KNOB e sobrescreva localmente algumas propriedades */ +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); +``` + +
+ +
+ Código MicroPython | +Simulador online + + + +```python +# Crie um controle deslizante (slider) e adicione o estilo +slider = lv.slider(lv.screen_active()) +slider.set_value(70, lv.ANIM.OFF) +slider.set_size(300, 20) +slider.center() + +# Adicione estilos locais à parte MAIN (retângulo de fundo) +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) + +# Crie uma folha de estilo reutilizável para a parte do INDICATOR +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) + +# Adicione a folha de estilo à parte do INDICATOR do controle deslizante (slider) +slider.add_style(style_indicator, lv.PART.INDICATOR) +slider.add_style(style_indicator, lv.PART.KNOB) + +# Adicione o mesmo estilo à parte do KNOB e sobrescreva localmente algumas propriedades +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) +``` + +
+
+ +### Textos em inglês, hebraico (LRT-RTL misto) e chinês + +![Textos em inglês, hebraico (LRT-RTL misto) e chinês com LVGL](https://github.com/kisvegabor/test/raw/master/readme_example_4.png) + +
+ Código C + +```c +lv_obj_t * ltr_label = lv_label_create(lv_screen_active()); +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_screen_active()); +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_screen_active()); +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); +``` + +
+ +
+ Código MicroPython | Simulador online + +```python +ltr_label = lv.label(lv.screen_active()) +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.screen_active()) +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.screen_active()) +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: Começando +Esta lista irá guiá-lo para começar com o LVGL passo a passo. + +**Familiarize-se com o LVGL** + + 1. Confira as [demos on-line](https://lvgl.io/demos) para ver o LVGL em ação (~3 minutos) + 2. Leia a página de [introdução](https://docs.lvgl.io/master/intro/index.html) da documentação (~5 minutos) + 3. Familiarize-se com o básico na página de [visão geral rápida](https://docs.lvgl.io/master/get-started/quick-overview.html) (~15 minutos) + +**Começando a usar o LVGL** + + 4. Configure um [simulador](https://docs.lvgl.io/master/get-started/platforms/pc-simulator.html) (~10 minutos) + 5. Experimente alguns [exemplos](https://github.com/lvgl/lvgl/tree/master/examples) + 6. Porte o LVGL para uma placa. Veja o guia [portando o LVGL](https://docs.lvgl.io/master/porting/index.html) ou veja um projeto pronto para usar em [projetos](https://github.com/lvgl?q=lv_port_) + +**Torne-se um profissional** + + 7. Leia a página [visão geral](https://docs.lvgl.io/master/overview/index.html) para entender melhor a biblioteca (~2-3 horas) + 8. Verifique a documentação dos [widgets](https://docs.lvgl.io/master/widgets/index.html) para ver seus recursos e usabilidade + +**Obtenha ajuda e ajude outras pessoas** + + 9. Se você tiver dúvidas, acesse o [Fórum](http://forum.lvgl.io) + 10. Leia o guia de [contribuição](https://docs.lvgl.io/master/CONTRIBUTING.html) para ver como você pode ajudar a melhorar o LVGL (~15 minutos) + +**E mais** + + 11. Baixe e experimente o editor [SquareLine Studio](https://squareline.io). + 12. Entre em contato conosco para [serviços e consultoria](https://lvgl.io/services). + +## :handshake: Serviços +A LVGL LLC foi criada para fornecer uma base sólida para a biblioteca LVGL e oferecer vários tipos de serviços para ajudá-lo no desenvolvimento da sua interface do usuário. Com mais de 15 anos de experiência na indústria gráfica e de interface do usuário, podemos ajudá-lo a levar sua interface do usuário para o próximo nível. + +- **Design gráfico**: Nossos designers gráficos internos são especialistas em criar belos designs modernos que se adaptam ao seu produto e aos recursos do seu hardware. +- **Implementação da interface do usuário**: Também podemos implementar sua interface do usuário com base no design que você ou nós criamos. Você pode ter certeza de que tiraremos o máximo proveito de seu hardware e do LVGL. Se um recurso ou widget estiver faltando no LVGL, não se preocupe, nós o implementaremos para você. +- **Consultoria e Suporte**: Também podemos apoiá-lo com consultoria para evitar erros que podem te custar caros durante o desenvolvimento da sua interface do usuário. +- **Certificação**: Para empresas que oferecem placas para desenvolvimento ou kits prontos para produção, fazemos certificação que mostram como uma placa pode executar o LVGL. + +Confira nossas [demonstrações](https://lvgl.io/demos) como referência. Para obter mais informações, consulte a [página de serviços](https://lvgl.io/services). + +[Fale conosco](https://lvgl.io/#contact) e conte como podemos ajudar. + +## :star2: Contribuindo +O LVGL é um projeto aberto e sua contribuição é muito bem-vinda. Há muitas maneiras de contribuir, desde simplesmente falando sobre seu projeto, escrevendo exemplos, melhorando a documentação, corrigindo bugs até hospedar seu próprio projeto sob a organização LVGL. + +Para obter uma descrição detalhada das oportunidades de contribuição, visite a página de [contribuição](https://docs.lvgl.io/master/CONTRIBUTING.html) da documentação. + +Mais de 300 pessoas já deixaram sua impressão digital no LVGL. Seja um deles! Veja o seu aqui! :slightly_smiling_face: + + + + + +... e muitos outros. diff --git a/docs/README_pt_BR.rst b/docs/README_pt_BR.rst deleted file mode 100644 index 35ffc5ed3..000000000 --- a/docs/README_pt_BR.rst +++ /dev/null @@ -1,706 +0,0 @@ -.. raw:: html - -

- -

- -

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

- -.. raw:: html - -

- -.. raw:: html - -

- - - -.. raw:: html - -

- - - -.. raw:: html - -

- -LVGL - Biblioteca gráfica leve e versátil - -.. raw:: html - -

- - - -.. raw:: html - -

- - Site \| Documentação \| Fórum \| Serviços \| Demonstrações \| Editor SquareLine Studio - -.. raw:: html - -

- -**Visão Geral** ---------------- - -**Maduro e popular** - -LVGL é a biblioteca gráfica incorporada gratuita e de código aberto mais -popular para criar belas interfaces de usuário para qualquer display do -tipo MCU, MPU. Ela é suportada por fornecedores e projetos líderes do -setor, como ARM, STM32, NXP, Espressif, Nuvoton, Arduino, RT-Thread, -Zephyr, NuttX, Adafruit e muitos outros. - -**Rico em recursos** - -Ela tem todos os recursos para a criação de GUIs modernas e bonitas: -mais de 30 widgets integrados, um sistema de design poderoso, -gerenciadores de layout inspirados na web e um sistema de tipografia com -suporte para vários idiomas. Para integrar o LVGL em sua plataforma, -tudo que você precisa é de pelo menos 32kB de RAM e 128kB de Flash, um -compilador C, um frame buffer e pelo menos uma tela de tamanho 1/10 para -renderização. - -**Editor UI profissional** - -SquareLine Studio é um editor de interface do usuário de (arrasta e -solta) profissional para LVGL. Ele roda em Windows, Linux e MacOS também -e você pode experimentá-lo sem se registrar no site. - -**Serviços** - -Nossa equipe está pronta para ajudá-lo com design gráfico, implementação -de UI e serviços de consultoria. Entre em contato conosco se precisar de -algum suporte durante o desenvolvimento de seu próximo projeto de GUI. - -**Recursos** ------------- - -**Gratuito e portátil** - -- Uma biblioteca C totalmente portátil (compatível com C++) sem - dependências externas. -- Pode ser compilado para qualquer display MCU ou MPU, e qualquer - sistema operacional de tempo real (RT-OS). -- Suporta monitores monocromáticos, ePaper, OLED ou TFT. `Guia de - portabilidade `__ -- Distribuído sob a licença do MIT, para que você também possa usá-lo - facilmente em projetos comerciais. -- Precisa de apenas 32 kB de RAM e 128 kB de Flash, um frame buffer e - pelo menos uma tela de tamanho 1/10 para renderização. -- Sistemas operacionais, memória externa e GPU são suportados, mas não - obrigatórios. - -**Widgets, designs, layouts e muito mais** - -- Mais de 30 widgets integrados: botão, etiqueta (label), controle - deslizante (slider), gráfico (chart), teclado, medidor (meter), - tabelas e muito mais. -- Sistema de design flexível com pelo menos 100 propriedades de estilo - para personalizar qualquer parte dos widgets. -- Mecanismos de layouts Flexbox e Grid para dimensionar e posicionar - automaticamente os widgets de maneira responsiva. -- Os textos são renderizados com codificação UTF-8, suportando sistemas - de escrita CJK (chinês, japonês e coreano), tailandês, hindi, árabe e - persa. -- Quebra de palavras (word wrapping), espaçamento entre letras - (kerning), rolagem de texto (scrolling), renderização subpixel, - entrada em chinês Pinyin-IME e emojis. -- Mecanismo de renderização que suporta animações, anti-aliasing, - opacidade, rolagem suave (smooth scroll), sombras, transformação de - imagens, etc. -- Suporta mouse, touchpad, teclado, botões externos, dispositivos de - entrada codificadores (encoders). -- Suporta vários monitores. - -**Suporte de vinculação (binding) e compilação de arquivos** - -- Exposição da API do LVGL com o - `Micropython `__ -- Nenhum sistema de compilação personalizado é usado. Você pode - construir o LVGL enquanto constrói os outros arquivos do seu projeto. -- O suporte para Make e - `CMake `__ - já vem incluído. -- `Desenvolva no - PC `__ - e use o mesmo código de interface do usuário em hardwares - incorporados (embedded hardware). -- Converta o código C para um arquivo HTML com o `Emscripten - port `__. - -**Documentação, ferramentas e serviços** - -- Documentação detalhada com `+100 exemplos - simples `__ -- `SquareLine Studio `__ - Um software editor UI - profissional e fácil de usar, para acelerar e simplificar o - desenvolvimento da interface do usuário. -- `Serviços `__ como design de UI, - implementação e consultoria para tornar o desenvolvimento de UI mais - simples e rápido. - -**Patrocinador** ----------------- - -Se o LVGL economizou muito tempo e dinheiro ou você apenas se divertiu -ao usá-lo, considere Apoiar o desenvolvimento. - -**Como e com o que utilizamos os recursos doados?** Nosso objetivo é -fornecer compensação financeira para as pessoas que mais fazem pelo -LVGL. Isso significa que não apenas os mantenedores, mas qualquer pessoa -que implemente um ótimo recurso deve receber um pagamento com o dinheiro -acumulado. Usamos as doações para cobrir nossos custos operacionais, -como servidores e serviços relacionados. - -**Como doar?** Usamos o `Open -Collective `__, onde você pode enviar -facilmente doações únicas ou recorrentes. Você também pode ver todas as -nossas despesas de forma transparente. - -**Como receber o pagamento de sua contribuição?** Se alguém implementar -ou corrigir um problema rotulado como -`Patrocinado `__, essa -pessoa receberá um pagamento por esse trabalho. Estimamos o tempo -necessário, a complexidade e a importância da questão e definimos um -preço de acordo. Para entrar, apenas comente sobre um problema -patrocinado dizendo "Olá, gostaria de lidar com isso. É assim que estou -planejando corrigi-lo/implementá-lo…". Um trabalho é considerado pronto -quando é aprovado e mesclado por um mantenedor. Depois disso, você pode -enviar uma "despesa" (expense) pela plataforma -`opencollective.com `__ e então -receberá o pagamento em alguns dias. - -**Organizações que apoiam o projeto LVGL**\ |Patrocinadores do LVGL| - -**Pessoas que apoiam o projeto LVGL**\ |Backers of LVGL| - -**Pacotes** ------------ - -LVGL está disponível para: - -- `Arduino - library `__ -- `PlatformIO - package `__ -- `Zephyr - library `__ -- `ESP32 - component `__ -- `NXP MCUXpresso - component `__ -- `NuttX - library `__ -- `RT-Thread - RTOS `__ -- NXP MCUXpresso library -- CMSIS-Pack - -**Exemplos** ------------- - -Veja como criar um botão com um evento de clique em C e MicroPython. -Para mais exemplos, veja a pasta -`examples `__. - -.. figure:: https://github.com/lvgl/lvgl/raw/master/docs/misc/btn_example.png - :alt: LVGL button with label example - - LVGL button with label example - -Botão com evento de clique -~~~~~~~~~~~~~~~~~~~~~~~~~~ - -.. figure:: https://github.com/kisvegabor/test/raw/master/readme_example_1.gif - :alt: Botão LVGL com exemplo de rótulo (label) - - Botão LVGL com exemplo de rótulo (label) - -.. raw:: html - -
- -.. raw:: html - - - -Código C - -.. raw:: html - - - -.. code-block:: c - - lv_obj_t * btn = lv_button_create(lv_screen_active()); /* Adiciona o botão a tela atual */ - lv_obj_center(btn); /* Define a posição do botão */ - lv_obj_set_size(btn, 100, 50); /* Define o tamanho do botão */ - lv_obj_add_event(btn, btn_event_cb, LV_EVENT_CLICKED, NULL); /* Atribui um retorno de chamada (callback) ao botão */ - - lv_obj_t * label = lv_label_create(btn); /* Adiciona um rótulo (label) */ - lv_label_set_text(label, "Botão"); /* Define um texto para o rótulo (label) */ - lv_obj_center(label); /* Alinha o texto no centro do botão */ - ... - - void btn_event_cb(lv_event_t * e) - { - printf("Clicado\n"); - } - -.. raw:: html - -
- -.. raw:: html - -
- -.. raw:: html - - - -Código MicroPython \| Simulador online - -.. raw:: html - - - -.. code-block:: python - - def btn_event_cb(e): - print("Clicado") - - # Cria um botão e um rótulo (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("Botão") - label.center() - -.. raw:: html - -
- -Caixas de seleção (chackboxes) com layout -~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - -.. figure:: https://github.com/kisvegabor/test/raw/master/readme_example_2.gif - :alt: Caixas de seleção (chackboxes) com layout no LVGL - - Caixas de seleção (chackboxes) com layout no LVGL - -.. raw:: html - -
- -.. raw:: html - - - -Código em C - -.. raw:: html - - - -.. code-block:: c - - - lv_obj_set_flex_flow(lv_screen_active(), LV_FLEX_FLOW_COLUMN); - lv_obj_set_flex_align(lv_screen_active(), LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER); - - lv_obj_t * cb; - cb = lv_checkbox_create(lv_screen_active()); - lv_checkbox_set_text(cb, "Maça"); - lv_obj_add_event(cb, event_handler, LV_EVENT_ALL, NULL); - - cb = lv_checkbox_create(lv_screen_active()); - 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_screen_active()); - lv_checkbox_set_text(cb, "Limão"); - lv_obj_add_state(cb, LV_STATE_DISABLED); - lv_obj_add_event(cb, event_handler, LV_EVENT_ALL, NULL); - - cb = lv_checkbox_create(lv_screen_active()); - lv_obj_add_state(cb, LV_STATE_CHECKED | LV_STATE_DISABLED); - lv_checkbox_set_text(cb, "Melão\ne uma nova linha"); - lv_obj_add_event(cb, event_handler, LV_EVENT_ALL, NULL); - -.. raw:: html - -
- -.. raw:: html - -
- -.. raw:: html - - - -Código MicroPython \| Online Simulator - -.. raw:: html - - - -.. code-block:: python - - 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 = "Marcador" - else: - state = "Desmarcado" - 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("Maça") - 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("Limão") - 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("Melão") - cb.add_event(event_handler, lv.EVENT.ALL, None) - -.. raw:: html - -
- -Estilizando um controle deslizante (slider) -~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - -.. figure:: https://github.com/kisvegabor/test/raw/master/readme_example_3.gif - :alt: Estilizando um controle deslizante (slider) com LVGL - - Estilizando um controle deslizante (slider) com LVGL - -.. raw:: html - -
- -.. raw:: html - - - -Código C - -.. raw:: html - - - -.. code-block:: c - - lv_obj_t * slider = lv_slider_create(lv_screen_active()); - lv_slider_set_value(slider, 70, LV_ANIM_OFF); - lv_obj_set_size(slider, 300, 20); - lv_obj_center(slider); - - /* Adiciona estilos locais à parte MAIN (retângulo de fundo) */ - 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); - - /* Crie uma folha de estilo reutilizável para a parte do (INDICADOR) */ - 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); - - /* Adicione a folha de estilo à parte do INDICATOR do controle deslizante (slider) */ - lv_obj_add_style(slider, &style_indicator, LV_PART_INDICATOR); - - /* Adicione o mesmo estilo à parte do KNOB e sobrescreva localmente algumas propriedades */ - 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); - -.. raw:: html - -
- -.. raw:: html - -
- -.. raw:: html - - - -Código MicroPython \| Simulador online - -.. raw:: html - - - -.. code-block:: python - - # Crie um controle deslizante (slider) e adicione o estilo - slider = lv.slider(lv.scr_act()) - slider.set_value(70, lv.ANIM.OFF) - slider.set_size(300, 20) - slider.center() - - # Adicione estilos locais à parte MAIN (retângulo de fundo) - 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) - - # Crie uma folha de estilo reutilizável para a parte do INDICATOR - 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) - - # Adicione a folha de estilo à parte do INDICATOR do controle deslizante (slider) - slider.add_style(style_indicator, lv.PART.INDICATOR) - slider.add_style(style_indicator, lv.PART.KNOB) - - # Adicione o mesmo estilo à parte do KNOB e sobrescreva localmente algumas propriedades - 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) - -.. raw:: html - -
- -Textos em inglês, hebraico (LRT-RTL misto) e chinês -~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - -.. figure:: https://github.com/kisvegabor/test/raw/master/readme_example_4.png - :alt: Textos em inglês, hebraico (LRT-RTL misto) e chinês com LVGL - - Textos em inglês, hebraico (LRT-RTL misto) e chinês com LVGL - -.. raw:: html - -
- -.. raw:: html - - - -Código C - -.. raw:: html - - - -.. code-block:: c - - lv_obj_t * ltr_label = lv_label_create(lv_screen_active()); - 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_screen_active()); - 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_screen_active()); - 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); - -.. raw:: html - -
- -.. raw:: html - -
- -.. raw:: html - - - -Código MicroPython \| Simulador online - -.. raw:: html - - - -.. code-block:: python - - 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) - -.. raw:: html - -
- -**Começando** -------------- - -Esta lista irá guiá-lo para começar com o LVGL passo a passo. - -**Familiarize-se com o LVGL** - -1. Confira as `demos on-line `__ para ver o LVGL - em ação (~3 minutos) -2. Leia a página de - `introdução `__ da - documentação (~5 minutos) -3. Familiarize-se com o básico na página de `visão geral - rápida `__ - (~15 minutos) - -**Começando a usar o LVGL** - -4. Configure um - `simulador `__ - (~10 minutos) -5. Experimente alguns - `exemplos `__ -6. Porte o LVGL para uma placa. Veja o guia `portando o - LVGL `__ ou veja um - projeto pronto para usar em - `projetos `__ - -**Torne-se um profissional** - -7. Leia a página `visão - geral `__ para - entender melhor a biblioteca (~2-3 horas) -8. Verifique a documentação dos - `widgets `__ para ver - seus recursos e usabilidade - -**Obtenha ajuda e ajude outras pessoas** - -9. Se você tiver dúvidas, acesse o `Fórum `__ -10. Leia o guia de - `contribuição `__ - para ver como você pode ajudar a melhorar o LVGL (~15 minutos) - -**E mais** - -11. Baixe e experimente o editor `SquareLine - Studio `__. -12. Entre em contato conosco para `serviços e - consultoria `__. - -**Serviços** ------------- - -A LVGL LLC foi criada para fornecer uma base sólida para a biblioteca -LVGL e oferecer vários tipos de serviços para ajudá-lo no -desenvolvimento da sua interface do usuário. Com mais de 15 anos de -experiência na indústria gráfica e de interface do usuário, podemos -ajudá-lo a levar sua interface do usuário para o próximo nível. - -- **Design gráfico**: Nossos designers gráficos internos são - especialistas em criar belos designs modernos que se adaptam ao seu - produto e aos recursos do seu hardware. -- **Implementação da interface do usuário**: Também podemos implementar - sua interface do usuário com base no design que você ou nós criamos. - Você pode ter certeza de que tiraremos o máximo proveito de seu - hardware e do LVGL. Se um recurso ou widget estiver faltando no LVGL, - não se preocupe, nós o implementaremos para você. -- **Consultoria e Suporte**: Também podemos apoiá-lo com consultoria - para evitar erros que podem te custar caros durante o desenvolvimento - da sua interface do usuário. -- **Certificação**: Para empresas que oferecem placas para - desenvolvimento ou kits prontos para produção, fazemos certificação - que mostram como uma placa pode executar o LVGL. - -Confira nossas `demonstrações `__ como -referência. Para obter mais informações, consulte a `página de -serviços `__. - -`Fale conosco `__ e conte como podemos ajudar. - -**Contribuindo** ----------------- - -O LVGL é um projeto aberto e sua contribuição é muito bem-vinda. Há -muitas maneiras de contribuir, desde simplesmente falando sobre seu -projeto, escrevendo exemplos, melhorando a documentação, corrigindo bugs -até hospedar seu próprio projeto sob a organização LVGL. - -Para obter uma descrição detalhada das oportunidades de contribuição, -visite a página de -`contribuição `__ da -documentação. - -Mais de 300 pessoas já deixaram sua impressão digital no LVGL. Seja um -deles! Veja o seu aqui! :slightly_smiling_face: - -… e muitos outros. - -.. |Patrocinadores do LVGL| image:: https://opencollective.com/lvgl/organizations.svg?width=600 - :target: https://opencollective.com/lvgl -.. |Backers of LVGL| image:: https://opencollective.com/lvgl/individuals.svg?width=600 - :target: https://opencollective.com/lvgl diff --git a/docs/README_zh.md b/docs/README_zh.md new file mode 100644 index 000000000..94345f5f7 --- /dev/null +++ b/docs/README_zh.md @@ -0,0 +1,208 @@ + + +

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

+
+ +

+  +

+ + + + + 

Light and Versatile Graphics Library

+

轻量级通用型图形库

+ 
+
+ +   +  +
+ +
+ +

+官网 | +文档 | +论坛 | +示例 | +服务 +

+ +
+ +[中文宣传单](./flyers/LVGL-Chinese-Flyer.pdf) + +#### 目录 +- [概况与总览](#概况与总览) + - [特性](#特性) + - [硬件要求](#硬件要求) + - [已经支持的平台](#已经支持的平台) +- [如何入门](#如何入门) +- [例程](#例程) + - [C](#c) + - [MicroPython](#micropython) +- [服务](#服务) +- [如何向社区贡献](#如何向社区贡献) + +## 概况与总览 +### 特性 +* 丰富且强大的模块化[图形组件](https://docs.lvgl.io/master/widgets/index.html)：按钮 (buttons)、图表 (charts)、列表 (lists)、滑动条 (sliders)、图片 (images) 等 +* 高级的图形引擎：动画、抗锯齿、透明度、平滑滚动、图层混合等效果 +* 支持多种[输入设备](https://docs.lvgl.io/master/overview/indev.html)：触摸屏、 键盘、编码器、按键等 +* 支持[多显示设备](https://docs.lvgl.io/master/overview/display.html) +* 不依赖特定的硬件平台，可以在任何显示屏上运行 +* 配置可裁剪（最低资源占用：64 kB Flash，16 kB RAM） +* 基于UTF-8的多语种支持，例如中文、日文、韩文、阿拉伯文等 +* 可以通过[类CSS](https://docs.lvgl.io/master/overview/style.html)的方式来设计、布局图形界面（例如：[Flex](https://docs.lvgl.io/master/layouts/flex.html)、[Grid](https://docs.lvgl.io/master/layouts/grid.html)） +* 支持操作系统、外置内存、以及硬件加速（LVGL已内建支持STM32 DMA2D、SWM341 DMA2D、NXP PXP和VGLite） +* 即便仅有[单缓冲区(frame buffer)](https://docs.lvgl.io/master/porting/display.html)的情况下，也可保证渲染如丝般顺滑 +* 全部由C编写完成，并支持C++调用 +* 支持MicroPython编程，参见：[LVGL API in MicroPython](https://blog.lvgl.io/2019-02-20/micropython-bindings) +* 支持[模拟器](https://docs.lvgl.io/master/get-started/platforms/pc-simulator.html)仿真，可以无硬件依托进行开发 +* 丰富详实的[例程](https://github.com/lvgl/lvgl/tree/master/examples) +* 详尽的[文档](http://docs.lvgl.io/)以及API参考手册，可线上查阅或可下载为PDF格式 + +### 硬件要求 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
要求 最低要求建议要求
架构16、32、64位微控制器或微处理器
时钟 > 16 MHz > 48 MHz
Flash/ROM > 64 kB > 180 kB
Static RAM > 16 kB > 48 kB
Draw buffer > 1 × hor. res. pixels > 1/10屏幕大小
编译器 C99或更新
+ +*注意：资源占用情况与具体硬件平台、编译器等因素有关，上表中仅给出参考值* + +### 已经支持的平台 +LVGL本身并不依赖特定的硬件平台，任何满足LVGL硬件配置要求的微控制器均可运行LVGL。 +如下仅列举其中一部分: + +- NXP: Kinetis, LPC, iMX, iMX RT +- STM32F1, STM32F3, STM32F4, STM32F7, STM32L4, STM32L5, STM32H7 +- Microchip dsPIC33, PIC24, PIC32MX, PIC32MZ +- [Linux frame buffer](https://blog.lvgl.io/2018-01-03/linux_fb) (/dev/fb) +- [Raspberry Pi](http://www.vk3erw.com/index.php/16-software/63-raspberry-pi-official-7-touchscreen-and-littlevgl) +- [Espressif ESP32](https://github.com/lvgl/lv_port_esp32) +- [Infineon Aurix](https://github.com/lvgl/lv_port_aurix) +- Nordic NRF52 Bluetooth modules +- Quectel modems +- [SYNWIT SWM341](https://www.synwit.cn/) + +LVGL也支持： +- [Arduino library](https://docs.lvgl.io/master/get-started/platforms/arduino.html) +- [PlatformIO package](https://registry.platformio.org/libraries/lvgl/lvgl) +- [Zephyr library](https://docs.zephyrproject.org/latest/kconfig.html#CONFIG_LVGL) +- [ESP32 component](https://docs.lvgl.io/master/get-started/platforms/espressif.html) +- [NXP MCUXpresso component](https://www.nxp.com/design/software/embedded-software/lvgl-open-source-graphics-library:LITTLEVGL-OPEN-SOURCE-GRAPHICS-LIBRARY) +- [NuttX library](https://docs.lvgl.io/master/get-started/os/nuttx.html) +- [RT-Thread RTOS](https://www.rt-thread.org/document/site/#/rt-thread-version/rt-thread-standard/packages-manual/lvgl-docs/introduction) + + +## 如何入门 +请按照如下顺序来学习LVGL： +1. 使用[网页在线例程](https://lvgl.io/demos)来体验LVGL（3分钟） +2. 阅读文档[简介](https://docs.lvgl.io/master/intro/index.html)章节来初步了解LVGL（5分钟） +3. 再来阅读一下文档快速[快速概览](https://docs.lvgl.io/master/get-started/quick-overview.html)章节来了解LVGL的基本知识（15分钟） +4. 学习如何使用[模拟器](https://docs.lvgl.io/master/get-started/platforms/pc-simulator.html)来在电脑上仿真LVGL（10分钟） +5. 试着动手实践一些[例程](https://github.com/lvgl/lvgl/tree/master/examples) +6. 参考[移植指南](https://docs.lvgl.io/master/porting/index.html)尝试将LVGL移植到一块开发板上，LVGL也已经提供了一些移植好的[工程](https://github.com/lvgl?q=lv_port_) +7. 仔细阅读文档[总览](https://docs.lvgl.io/master/overview/index.html)章节来更加深入的了解和熟悉LVGL（2-3小时） +8. 浏览文档[组件(Widgets)](https://docs.lvgl.io/master/widgets/index.html)章节来了解如何使用它们 +9. 如果你有问题可以到LVGL[论坛](http://forum.lvgl.io/)提问 +10. 阅读文档[如何向社区贡献](https://docs.lvgl.io/master/CONTRIBUTING.html)章节来看看你能帮LVGL社区做些什么，以促进LVGL软件质量的不断提高（15分钟） + +## 例程 + +更多例程请参见 [examples](https://github.com/lvgl/lvgl/tree/master/examples) 文件夹。 + +![LVGL button with label example](https://github.com/kisvegabor/test/raw/master/readme_example_2.gif) + +### C +```c +lv_obj_t * btn = lv_button_create(lv_screen_active()); /*Add a button to the current screen*/ +lv_obj_set_pos(btn, 10, 10); /*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 +更多信息请到 [MicroPython官网](https://docs.lvgl.io/master/get-started/bindings/micropython.html) 查询. +```python +def btn_event_cb(e): + print("Clicked") + +# Create a Button and a Label +btn = lv.btn(lv.screen_active()) +btn.set_pos(10, 10) +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() +``` + +## 服务 +LVGL 责任有限公司成立的目的是为了给用户使用LVGL图形库提供额外的技术支持，我们致力于提供以下服务： + +- 图形设计 +- UI设计 +- 技术咨询以及技术支持 + +更多信息请参见 https://lvgl.io/services ，如果有任何问题请随时联系我们。 + + +## 如何向社区贡献 +LVGL是一个开源项目，非常欢迎您参与到社区贡献当中。您有很多种方式来为提高LVGL贡献您的一份力量，包括但不限于： + +- 介绍你基于LVGL设计的作品或项目 +- 写一些例程 +- 修改以及完善文档 +- 修复bug + +请参见文档[如何向社区贡献](https://docs.lvgl.io/master/CONTRIBUTING.html)章节来获取更多信息。 diff --git a/docs/README_zh.rst b/docs/README_zh.rst deleted file mode 100644 index 7f191c9d4..000000000 --- a/docs/README_zh.rst +++ /dev/null @@ -1,604 +0,0 @@ -.. raw:: html - -

- -

- -

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

- -.. raw:: html - -
- -.. raw:: html - -

-   -

- -.. raw:: html - -

- 轻量级通用型图形库 - -.. raw:: html - -

- -.. raw:: html - -
- -   -   -
-
-

- 官网 | - 文档 | - 论坛 | - 示例 | - 服务 -

-
- -.. _ledger-概况与总览: - -📒 概况与总览 -------------- - -**成熟且知名**\ - -LVGL 是最流行的免费开源嵌入式图形库，可以为任何 MCU、MPU 和显示类型创建漂亮的 UI。它得到了行业领先供应商和项目的支持，如 Arm、STM32、NXP、Espressif、Nuvoton、Arduino、RT-Thread、Zephyr、NuttX、Adafruit 等。 - -**功能丰富**\ - -它拥有创建现代美观 GUI 的所有功能：30 多个内置控件、强大的样式系统、Web 启发的布局管理器和支持多种语言的排版系统。要将 LVGL 集成到您的平台中，您只需要至少 32 KB -RAM 和 128 KB Flash、C 编译器、帧缓冲区和至少 1/10 屏幕大小的渲染缓冲区。 - -**服务**\ - -我们的团队随时准备为您提供图形设计、UI 实现和咨询服务。如果您在开发下一个 GUI 项目时需要一些支持，请与我们联系。 - -.. _rocket-特性: - -🚀 特性 -------- - -**免费和可移植性** - -- 一个完全可移植的 C（C++ 兼容）库，没有外部依赖关系。 -- 可以编译到任何 MCU 或 MPU，使用任何 RTOS 或者操作系统。 -- 支持单色、ePaper、OLED、TFT 显示器或者模拟器。 - `移植指南 `__ -- 该项目使用 MIT 许可证，因此您可以在商业项目中轻松使用它。 -- 仅需 32 KB RAM 和 128 KB Flash，一个帧缓冲区，以及至少 1/10 屏幕大小的渲染缓冲区。 -- 支持使用可选的操作系统、外部存储器和 GPU。 - -**控件、样式、布局等** - -- 30+ 内置\ `控件 `__: -  按钮、标签、滑块、图表、键盘、仪表、弧形、表格等等。 -- 灵活的\ `样式系统 `__ - 支持约 100 个样式属性，可在任何状态下自定义控件的任何部分。 -- `Flex 布局 `__ 和 - `Grid 布局 `__ - 可以响应式自动调整控件的大小和位置。 -- 文本支持 UTF-8 编码，支持 CJK、泰语、印地语、阿拉伯语和波斯语书写系统。 -- 支持自动换行、字距调整、文本滚动、亚像素渲染、拼音输入法、文本表情符号。 -- 渲染引擎支持动画、抗锯齿、不透明度、平滑滚动、阴影、图形变换等。 -- 支持鼠标、触摸板、小键盘、键盘、外部按钮、编码器\ `输入设备 `__\ 。 -- 支持\ `多显示器 `__\ 。 - -**绑定和构建支持** - -- `MicroPython 绑定 `__ - 公开 LVGL的API -- `PikaScript 绑定 `__ - 在 MCU 上的更轻更简单的 Python 版本 -- 未使用自定义生成系统。您可以在构建项目的其他文件时构建 LVGL。 -- 支持开箱即用的 Make 和 \ `CMake `__\ 编译系统。 -- 支持在 \ `PC 上开发 `__\ ，并可以在嵌入式硬件上使用相同的 UI 代码。 -- 支持使用我们的 \ `Emscripten 移植 `__\ 从而将 C 写的 UI 代码转换为 HTML 文件。 - -**文档、工具和服务** - -- 包含 \ `100 多个简单示例 `__\ 的详细\ `文档 `__ -- `服务 `__ - 如用户界面设计、实施和咨询，使 UI 开发更简单、更快。 - -.. _heart-赞助: - -❤️ 赞助 -------- - -如果 LVGL 为您节省了大量时间和金钱，或者您只是在使用它时玩得很开心，请考虑\ `支持它的开发 `__\ 。 - -**我们如何使用捐赠？**\ - -我们的目标是为 LVGL 做得最多的人提供经济补偿。这意味着不仅维护人员，而且任何实现伟大功能的人都应该从累积的资金中获得报酬。我们用捐款来支付服务器和相关服务等运营成本。 - -**如何捐赠？**\ - -我们使用 \ `GitHub Sponsors `__\ ，您可以轻松发送一次性或定期捐款。您还可以以透明的方式查看我们的所有费用。 - -**如何从您的贡献中获取报酬？**\ - -如果有人实施或修复了一个标记为\ `赞助 `__\ 的问题，他或她将获得该工作的报酬。我们估计问题所需的时间、复杂性和重要性，并据此设定价格。直接评论一个赞助的问题，说“嗨，我想处理它。这就是我计划修复/实施它的方式…”。当维护人员批准并合并工作时，就认为它已经准备好了。之后，您可以在 \ `opencollective.com `__\ 上提交并支付费用，几天后您将收到付款。 - -**支持 LVGL 的组织**\ - -|Sponsors of LVGL| - -**支持 LVGL 的个人**\ - -|Backers of LVGL| - -.. _package-支持包: - -📦 支持包 ---------- - -LVGL 可用于以下几种： - -- `Arduino - library `__ -- `PlatformIO - package `__ -- `Zephyr - library `__ -- `ESP-IDF(ESP32) - component `__ -- `NXP MCUXpresso - component `__ -- `NuttX - library `__ -- `RT-Thread - RTOS `__ -- CMSIS-Pack -- `RIOT OS - package `__ - -.. _robot-示例: - -🤖 示例 -------- - -请参阅创建控件、使用布局和应用样式的一些示例。您将找到 C 和 MicroPython 代码，以及在在线 MicroPython 编辑器中尝试或编辑示例的链接。 - -如果要查看更多示例，可查看 \ `Examples `__ 文件夹。 - -Hello world 标签 -~~~~~~~~~~~~~~~~ - -.. image:: https://github.com/kisvegabor/test/raw/master/readme_example_1.png - :alt: Simple Hello world label example in LVGL - -.. raw:: html - -
- C code - -.. code-block:: c - - /* Change Active Screen's background color */ - lv_obj_set_style_bg_color(lv_screen_active(), lv_color_hex(0x003a57), LV_PART_MAIN); - - /*Create a white label, set its text and align it to the center*/ - lv_obj_t * label = lv_label_create(lv_screen_active()); - lv_label_set_text(label, "Hello world"); - lv_obj_set_style_text_color(lv_screen_active(), lv_color_hex(0xffffff), LV_PART_MAIN); - lv_obj_align(label, LV_ALIGN_CENTER, 0, 0); - -.. raw:: html - -
- -.. raw:: html - -
- MicroPython code | 在线模拟器 - -.. code-block:: python - - # Change Active Screen's background color - scr = lv.screen_active() - scr.set_style_bg_color(lv.color_hex(0x003a57), lv.PART.MAIN) - - # Create a white label, set its text and align it to the center - label = lv.label(lv.screen_active()) - label.set_text("Hello world") - label.set_style_text_color(lv.color_hex(0xffffff), lv.PART.MAIN) - label.align(lv.ALIGN.CENTER, 0, 0) - -.. raw:: html - -
-
- -按钮与点击事件 -~~~~~~~~~~~~~~ - -.. image:: https://github.com/kisvegabor/test/raw/master/readme_example_2.gif - :alt: LVGL button with label example - -.. raw:: html - -
- C code - -.. code-block:: c - - lv_obj_t * button = lv_button_create(lv_screen_active());                   /*Add a button to the current screen*/ - lv_obj_center(button);                                     /*Set its position*/ - lv_obj_set_size(button, 100, 50);                                  /*Set its size*/ - lv_obj_add_event_cb(button, button_event_cb, LV_EVENT_CLICKED, NULL); /*Assign a callback to the button*/ - - lv_obj_t * label = lv_label_create(button);                        /*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 button_event_cb(lv_event_t * e) - { -   printf("Clicked\n"); - } - -.. raw:: html - -
- -.. raw:: html - -
- MicroPython code | 在线模拟器 - -.. code-block:: python - - def button_event_cb(e): -   print("Clicked") - - # Create a Button and a Label - button = lv.button(lv.screen_active()) - button.center() - button.set_size(100, 50) - button.add_event_cb(button_event_cb, lv.EVENT.CLICKED, None) - - label = lv.label(button) - label.set_text("Button") - label.center() - -.. raw:: html - -
-
- -带布局的复选框 -~~~~~~~~~~~~~~ - -.. image:: https://github.com/kisvegabor/test/raw/master/readme_example_3.gif - :alt: Checkboxes with layout in LVGL - -.. raw:: html - -
- C code - -.. code-block:: c - - - lv_obj_set_flex_flow(lv_screen_active(), LV_FLEX_FLOW_COLUMN); - lv_obj_set_flex_align(lv_screen_active(), LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER); - - lv_obj_t * cb; - cb = lv_checkbox_create(lv_screen_active()); - lv_checkbox_set_text(cb, "Apple"); - lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL); - - cb = lv_checkbox_create(lv_screen_active()); - lv_checkbox_set_text(cb, "Banana"); - lv_obj_add_state(cb, LV_STATE_CHECKED); - lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL); - - cb = lv_checkbox_create(lv_screen_active()); - lv_checkbox_set_text(cb, "Lemon"); - lv_obj_add_state(cb, LV_STATE_DISABLED); - lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL); - - cb = lv_checkbox_create(lv_screen_active()); - 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(cb, event_handler, LV_EVENT_ALL, NULL); - -.. raw:: html - -
- -.. raw:: html - -
- MicroPython code | 在线模拟器 - -.. code-block:: python - - 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.screen_active().set_flex_flow(lv.FLEX_FLOW.COLUMN) - lv.screen_active().set_flex_align(lv.FLEX_ALIGN.CENTER, lv.FLEX_ALIGN.START, lv.FLEX_ALIGN.CENTER) - - cb = lv.checkbox(lv.screen_active()) - cb.set_text("Apple") - cb.add_event_cb(event_handler, lv.EVENT.ALL, None) - - cb = lv.checkbox(lv.screen_active()) - cb.set_text("Banana") - cb.add_state(lv.STATE.CHECKED) - cb.add_event_cb(event_handler, lv.EVENT.ALL, None) - - cb = lv.checkbox(lv.screen_active()) - cb.set_text("Lemon") - cb.add_state(lv.STATE.DISABLED) - cb.add_event_cb(event_handler, lv.EVENT.ALL, None) - - cb = lv.checkbox(lv.screen_active()) - cb.add_state(lv.STATE.CHECKED | lv.STATE.DISABLED) - cb.set_text("Melon") - cb.add_event_cb(event_handler, lv.EVENT.ALL, None) - -.. raw:: html - -
-
- -设置滑块的样式 -~~~~~~~~~~~~~~ - -.. image:: https://github.com/kisvegabor/test/raw/master/readme_example_4.gif - :alt: Styling a slider with LVGL - -.. raw:: html - -
- C code - -.. code-block:: c - - lv_obj_t * slider = lv_slider_create(lv_screen_active()); - 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); - 4 - /*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 as well 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); - -.. raw:: html - -
- -.. raw:: html - -
- MicroPython code | - 在线模拟器 - - -.. code-block:: python - - # Create a slider and add the style - slider = lv.slider(lv.screen_active()) - 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 as well 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) - -.. raw:: html - -
-
- -英语、希伯来语（ 双向文本排版 ）和中文 -~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - -.. image:: https://github.com/kisvegabor/test/raw/master/readme_example_5.png - :alt: English, Hebrew and Chinese texts with LVGL - -.. raw:: html - -
- C code - -.. code-block:: c - - lv_obj_t * ltr_label = lv_label_create(lv_screen_active()); - 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_screen_active()); - 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_screen_active()); - 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); - -.. raw:: html - -
- -.. raw:: html - -
- MicroPython code | 在线模拟器 - -.. code-block:: python - - ltr_label = lv.label(lv.screen_active()) - 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.screen_active()) - 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.screen_active()) - 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) - -.. raw:: html - -
- -.. _arrow_forward-使用 lvgl 过程: - -▶️ 使用 LVGL 过程 ---------------- - -此列表将指导您逐步开始使用 LVGL。 - -**熟悉 LVGL** - -1. 查看\ `在线演示 `__\ ，了解 LVGL 的实际操作（3 分钟） -2. 阅读\ `文档 `__\ 的简介页（5 分钟） -3. 熟悉\ `快速概览 `__ - 页面上的基本知识（15 分钟） - -**开始使用 LVGL** - -4. 设置\ `模拟器 `__ （10 分钟） -5. 尝试一些\ `示例 `__ -6. 将LVGL端口连接到线路板。请参阅\ `移植 `__\ 指南，或查看现成的\ `项目 `__ - -**成为专业人士** - -7. 阅读\ `概述 `__\ 页面以更好地了解图书馆（2-3 小时） -8. 查看\ `控件 `__\ 的文档以查看其功能和用法 - -**获得帮助并帮助他人** - -9. 如果您有问题，请访问\ `论坛 `__ -10. 阅读\ `贡献 `__\ 指南，了解如何帮助提高 LVGL（15 分钟） - -.. _handshake-服务: - -🤝 服务 -------- - -LVGL LLC 的成立旨在为 LVGL 库提供坚实的背景，并提供多种类型的服务来帮助您进行 UI 开发。凭借在用户界面和图形行业超过15年的经验，我们可以帮助您将 UI 提升到一个新的水平。 - -- **平面设计** - 我们的内部图形设计师是创造美丽现代设计的专家，适合您的产品和硬件资源。 -- **UI 实现** - 我们还可以根据您或我们创建的设计来实现您的 UI。您可以确信，我们将充分利用您的硬件和 LVGL。如果 LVGL 中缺少某个功能或控件，请不要担心，我们会为您实现它。 -- **咨询和支持** - 我们也可以通过咨询来支持您，以避免在 UI 开发过程中出现昂贵和耗时的错误。 -- **板子认证** - 对于提供开发板或生产套件的公司，我们会进行板子认证，展示板如何运行 LVGL。 - -查看我们的 \ `Demos `__\ 作为参考。有关更多信息，请查看\ `服务页面 `__\ 。 - -`联系我们 `__\ ，告诉我们如何提供帮助。 - -.. _star2-贡献: - -🌟 贡献 -------- - -LVGL 是一个开放的项目，我们非常欢迎您的贡献。有很多方法可以帮助您，从简单地谈论您的项目，到编写示例、改进文档、修复错误，甚至在 LVGL 组织下托管您自己的项目。 - -有关贡献的详细说明，请访问文件的\ `贡献 `__\ 部分。 - -已经有 300 多人在 LVGL 留下了痕迹。期待你成为他们中的一员！并在下列贡献者中看到你！ 🙂 - -.. raw:: html - - - - - -... 等等其他人. - -.. |Sponsors of LVGL| image:: https://opencollective.com/lvgl/organizations.svg?width=600 - :target: https://opencollective.com/lvgl -.. |Backers of LVGL| image:: https://opencollective.com/lvgl/individuals.svg?width=600 - :target: https://opencollective.com/lvgl