diff --git a/docs/Application_guide/en/hardware/peripheral-interfaces/IIC.md b/docs/Application_guide/en/hardware/peripheral-interfaces/IIC.md index 520bdf243b00861146a8bafc48af809e149d4f46..f86983edd9d2997ceb8fc750e904ef4dc090393d 100644 --- a/docs/Application_guide/en/hardware/peripheral-interfaces/IIC.md +++ b/docs/Application_guide/en/hardware/peripheral-interfaces/IIC.md @@ -21,13 +21,18 @@ IIC Topology： - **Idle Level**: SCL and SDA both are in high level. - **START Condition**: A HIGH to LOW transition on the SDA line while SCL is HIGH (IDLE). + + - **STOP Condition**: A LOW to HIGH transition on the SDA line while SCL is HIGH (IDLE). + + - **Acknowledge Condition**: The acknowledge signal sent by the receiving end after it received valid data. After every byte (8 bits) of data, at the ninth clock, the transmitting end releases SDA line to receive acknowledge signal from the receiving end. If SDA is low, the Acknowledge (ACK) is valid and the transmission is successful. If SDA is high, it will be a Not Acknowledge (NACK) and indicates the transmission has failed. - **Data Transmission**: Data bits are allowed to change while SCL is LOW. After each 8 bits of data is tramsmitted, the slave would pull down the SDA (ACK) or pull up the SDA (NACK). + ## IIC Support on Different Platforms @@ -59,7 +64,7 @@ Below are modules that support IIC simulation. --> This chapter will introduce how we can use IIC driver's functionalities and data types to build communication between QuecPython series modules and other IIC devices. The typical programming workflow consists of following parts: -1. [Create an object](#create an-object) +1. [Create an object](#create-an-object) 2. [Send data](#send-data) 3. [Receive data](#receive-data) @@ -131,6 +136,7 @@ The QMA7981 has following features: - Working voltage range: 1.71V~3.6V. Working temperature range: -40°C~+85°C. #### QMA7981 Diagram + When using QMA7981, a couple of points should be noted: @@ -150,6 +156,7 @@ self._write([self.INTPIN_CONF_ADDR], [data[0]]) - When AD0 is connected to the ground, IIC slave address is 0x12. When AD0 is connected to VDDIO, IIC slave address is 0x13. - QMA7981 has two modes: Standby Mode and Active Mode. When powered on, it goes into Standby Mode by default. By setting the PM register (0x11) , it will enter Active Mode. + - When QMA7981 is stationary and level, Z axis will have 1G of acceleration due to gravity. X axis and Y axis should remain 0. @@ -188,8 +195,11 @@ def Trigger_measurement(self): - After acquiring the data form AHT10, a conversion should be made on the raw data to get desired information. **Relative Humidity (RH)** Can be calculated from the relative humidity signal SRH from SDA using the formula below + -**Temperature (T)T** can be calculated from the temperature signal ST using the formula below可以通过 + +**Temperature (T)T** can be calculated from the temperature signal ST using the formula below + ```python diff --git a/docs/Application_guide/en/media/hardware/peripheral-interfaces/SPI/MCP2515.png b/docs/Application_guide/en/media/hardware/peripheral-interfaces/SPI/MCP2515.png index eabc6a8140f38af18413516ca1014369b134f382..daa110d33e3daff5331a45dffcf56d238f208a3d 100644 Binary files a/docs/Application_guide/en/media/hardware/peripheral-interfaces/SPI/MCP2515.png and b/docs/Application_guide/en/media/hardware/peripheral-interfaces/SPI/MCP2515.png differ diff --git a/docs/Application_guide/zh/README.md b/docs/Application_guide/zh/README.md index 3c8f3f0c9cb4456de675a9ecefa42ddb2a037b23..541a88a086e6a63f117132c801f240218b9fe9c8 100644 --- a/docs/Application_guide/zh/README.md +++ b/docs/Application_guide/zh/README.md @@ -43,6 +43,12 @@ QuecPython 应用指导，是对QuecPython常用功能模块如何使用的指 - [音频驱动](hardware/audio-driver.md) +
+ 多媒体 + +- [GUI](multi-media/lvgl/lvgl.md) +
+
网络与通信 diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/LVGL_demo1.png b/docs/Application_guide/zh/media/multi-media/lvgl/LVGL_demo1.png new file mode 100644 index 0000000000000000000000000000000000000000..c770f76e842f215efd96ce0a9ce2c727e0434534 Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/LVGL_demo1.png differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/LVGL_drawing_flowchart.png b/docs/Application_guide/zh/media/multi-media/lvgl/LVGL_drawing_flowchart.png new file mode 100644 index 0000000000000000000000000000000000000000..288d7007c5206192d292d3f6700fb1e50c087151 Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/LVGL_drawing_flowchart.png differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/LVGL_initialization_flowchart.png b/docs/Application_guide/zh/media/multi-media/lvgl/LVGL_initialization_flowchart.png new file mode 100644 index 0000000000000000000000000000000000000000..b4bf921c602f5e73fab6030d61ad2e98b1b30e81 Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/LVGL_initialization_flowchart.png differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/guiguider1.png b/docs/Application_guide/zh/media/multi-media/lvgl/guiguider1.png new file mode 100644 index 0000000000000000000000000000000000000000..171ee753d466324718bcd539dc2fdc58bcb2fc73 Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/guiguider1.png differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/guiguider10.png b/docs/Application_guide/zh/media/multi-media/lvgl/guiguider10.png new file mode 100644 index 0000000000000000000000000000000000000000..b1e56209f96c64db3e0479a69cb064c937061caa Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/guiguider10.png differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/guiguider11.png b/docs/Application_guide/zh/media/multi-media/lvgl/guiguider11.png new file mode 100644 index 0000000000000000000000000000000000000000..31ca95bc099b5d2bc52aaa06fd3d537b1d0c27ff Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/guiguider11.png differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/guiguider12.png b/docs/Application_guide/zh/media/multi-media/lvgl/guiguider12.png new file mode 100644 index 0000000000000000000000000000000000000000..a38154990f5627dca680ed83853b1f73a098bb89 Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/guiguider12.png differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/guiguider13.png b/docs/Application_guide/zh/media/multi-media/lvgl/guiguider13.png new file mode 100644 index 0000000000000000000000000000000000000000..b08a2f88d59b32921655bfc4cea3344196a7e53a Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/guiguider13.png differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/guiguider2.png b/docs/Application_guide/zh/media/multi-media/lvgl/guiguider2.png new file mode 100644 index 0000000000000000000000000000000000000000..499372b403f9c5785dd8719896101667b4187e38 Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/guiguider2.png differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/guiguider3.png b/docs/Application_guide/zh/media/multi-media/lvgl/guiguider3.png new file mode 100644 index 0000000000000000000000000000000000000000..ec782a48ef0e5e0124e74361c60770a2a56371ff Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/guiguider3.png differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/guiguider4.png b/docs/Application_guide/zh/media/multi-media/lvgl/guiguider4.png new file mode 100644 index 0000000000000000000000000000000000000000..2bb3c7d5635269f13b11f5d187af57d42aee33eb Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/guiguider4.png differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/guiguider5.png b/docs/Application_guide/zh/media/multi-media/lvgl/guiguider5.png new file mode 100644 index 0000000000000000000000000000000000000000..62c1d148680361a904a0446f6bcd63970ae973f0 Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/guiguider5.png differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/guiguider6.png b/docs/Application_guide/zh/media/multi-media/lvgl/guiguider6.png new file mode 100644 index 0000000000000000000000000000000000000000..e88f862a1645c24ac7e706a32d590ac746ea40a8 Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/guiguider6.png differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/guiguider7.png b/docs/Application_guide/zh/media/multi-media/lvgl/guiguider7.png new file mode 100644 index 0000000000000000000000000000000000000000..4bb0dac6a44c6841f968ad456d2ddc88f0aa0179 Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/guiguider7.png differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/guiguider8.png b/docs/Application_guide/zh/media/multi-media/lvgl/guiguider8.png new file mode 100644 index 0000000000000000000000000000000000000000..d36e52035f2cf237f49adcd31436cb76e36090ac Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/guiguider8.png differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/guiguider9.png b/docs/Application_guide/zh/media/multi-media/lvgl/guiguider9.png new file mode 100644 index 0000000000000000000000000000000000000000..be1a3a98d4d972ce49b19de2d7789a13f00ec673 Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/guiguider9.png differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_1.png b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_1.png new file mode 100644 index 0000000000000000000000000000000000000000..75ec0b4071f35e3f5e37c967ed2748f47c32da6f Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_1.png differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_align_type.png b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_align_type.png new file mode 100644 index 0000000000000000000000000000000000000000..d8a1ec155321cc2dde655b612a8ba644b74ae8a9 Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_align_type.png differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_btn_demo.png b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_btn_demo.png new file mode 100644 index 0000000000000000000000000000000000000000..28256ad8feebca365545e9154c6b9186480b13ae Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_btn_demo.png differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_demo2.jpg b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_demo2.jpg new file mode 100644 index 0000000000000000000000000000000000000000..c3a67b4e39920f5c04660ec30fcae429428a60b2 Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_demo2.jpg differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_demo3.jpg b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_demo3.jpg new file mode 100644 index 0000000000000000000000000000000000000000..f743d4699e6a1dc2b4c92e150b14ae03e28c5d8f Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_demo3.jpg differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_demo4.jpg b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_demo4.jpg new file mode 100644 index 0000000000000000000000000000000000000000..2c9d49b94c39a0c6ff531bf189c7c2cc86b76fa9 Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_demo4.jpg differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font1.png b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font1.png new file mode 100644 index 0000000000000000000000000000000000000000..37226b22ff1eb6708f4b21cfba9fd91dbbe66804 Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font1.png differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font10.jpg b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font10.jpg new file mode 100644 index 0000000000000000000000000000000000000000..d02d316eb4037a1ae441bb4f2dae833d808cf5c8 Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font10.jpg differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font11.jpg b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font11.jpg new file mode 100644 index 0000000000000000000000000000000000000000..feffe91ac6b3e6e2ffa8120982ecebc4ff8c9cd5 Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font11.jpg differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font12.jpg b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font12.jpg new file mode 100644 index 0000000000000000000000000000000000000000..2f05e3d1da1cd1b2a9dc2d795188f7fbc93b57bf Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font12.jpg differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font13.jpg b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font13.jpg new file mode 100644 index 0000000000000000000000000000000000000000..c7323524818146c90164806fff9449112401cdc8 Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font13.jpg differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font14.jpg b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font14.jpg new file mode 100644 index 0000000000000000000000000000000000000000..521f35037560585f04b17f2efc9554aaa491eadc Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font14.jpg differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font15.jpg b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font15.jpg new file mode 100644 index 0000000000000000000000000000000000000000..445b394d58437ad49dc3a219545a981b889bb9f3 Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font15.jpg differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font16.jpg b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font16.jpg new file mode 100644 index 0000000000000000000000000000000000000000..4457483852068deecbcb59ca4c4e4e31bdf3a1f3 Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font16.jpg differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font17.jpg b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font17.jpg new file mode 100644 index 0000000000000000000000000000000000000000..1a4a4667c9ed5a175d11f34f5c787855ec65fd9e Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font17.jpg differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font18.jpg b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font18.jpg new file mode 100644 index 0000000000000000000000000000000000000000..82cdd8b30823868503ab87b407e78a9eb7888783 Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font18.jpg differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font19.jpg b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font19.jpg new file mode 100644 index 0000000000000000000000000000000000000000..5997ae1e3b3e0c711d3a829077e210706d423f79 Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font19.jpg differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font2.jpg b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font2.jpg new file mode 100644 index 0000000000000000000000000000000000000000..1eab535fb0f7f0f3bde70958c5d3e54e555c204d Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font2.jpg differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font3.jpg b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font3.jpg new file mode 100644 index 0000000000000000000000000000000000000000..21bf00f7be505f29063b9abb430ca49eedec05f5 Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font3.jpg differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font4.jpg b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font4.jpg new file mode 100644 index 0000000000000000000000000000000000000000..07c5574dadc27179e32ff9b26ebf6b77fdb22e9e Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font4.jpg differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font5.jpg b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font5.jpg new file mode 100644 index 0000000000000000000000000000000000000000..3c14989a937ae7ef0d80b0ec8c865732403b3a38 Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font5.jpg differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font6.jpg b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font6.jpg new file mode 100644 index 0000000000000000000000000000000000000000..a898128911211942f4b88f5114a720a078259f2a Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font6.jpg differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font7.jpg b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font7.jpg new file mode 100644 index 0000000000000000000000000000000000000000..86fdc2a40873c0aa27082111bff93b4a02a9d867 Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font7.jpg differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font8.jpg b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font8.jpg new file mode 100644 index 0000000000000000000000000000000000000000..b38cdfbfd52eec0c2ae01a4f3b009c8a2257a6d9 Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font8.jpg differ diff --git a/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font9.jpg b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font9.jpg new file mode 100644 index 0000000000000000000000000000000000000000..52c933476f05814c421e190f922536d63d5d0940 Binary files /dev/null and b/docs/Application_guide/zh/media/multi-media/lvgl/lvgl_font9.jpg differ diff --git a/docs/Application_guide/zh/multi-media/README.md b/docs/Application_guide/zh/multi-media/README.md new file mode 100644 index 0000000000000000000000000000000000000000..ad58b3c59d840c37b5191245caba578c5772b6bf --- /dev/null +++ b/docs/Application_guide/zh/multi-media/README.md @@ -0,0 +1,7 @@ +# 多媒体 + +多媒体是多种媒体的综合，一般包括文本，声音和图像等多种媒体形式。 +本系列包括两部分： +- GUI +- 二维码 +- 音频 diff --git a/docs/Application_guide/zh/multi-media/lvgl/README.md b/docs/Application_guide/zh/multi-media/lvgl/README.md new file mode 100644 index 0000000000000000000000000000000000000000..0d09c6664dbd1de62587ae1b15d393eb8985c3cf --- /dev/null +++ b/docs/Application_guide/zh/multi-media/lvgl/README.md @@ -0,0 +1,5 @@ +Quecpython LVGL具备具有界面精美，资源消耗小，响应式布局等特点，更有 GUI guider 工具可实现可视化组件拖曳式开发，能够让开发者轻松搞定精美的用户界面，并在资源有限的环境下获得卓越的性能和用户体验，大大提升产品的竞争力。 + +- [LVGL](./lvgl.md) + +- [开机logo](./startup_logo.md) diff --git a/docs/Application_guide/zh/multi-media/lvgl/lvgl.md b/docs/Application_guide/zh/multi-media/lvgl/lvgl.md new file mode 100644 index 0000000000000000000000000000000000000000..e48876d886bd385fb8452698597307011994425a --- /dev/null +++ b/docs/Application_guide/zh/multi-media/lvgl/lvgl.md @@ -0,0 +1,25 @@ +# LVGL + +## 概述 + +`LVGL`全称 Light and Versatile Graphics Library。是一个轻量级的、自由的、开源的 GUI库，界面精美，资源消耗小，响应式布局，很适合嵌入式界面开发。 + +Quecpython LVGL主要特性如下： + +- 基于Quecpython开发，上手简单。 +- 具有非常丰富的内置控件，像 label（文本），button（按钮）, img（图片），list（列表）等。 +- 高级图形效果：动画，反锯齿，透明度，平滑滚动。 +- 支持多种输入设备，像 touchpad, keyboard等。 +- GUI guider工具可实现可视化组件拖曳式开发，方便快捷。 +- 提供了丰富的在线和离线文档。 + +## 章节目录 + +- [LVGL工作流程](https://gitee.com/qpy-doc-center/teedoc_with_qpydoc/tree/main/docs/Application_guide/zh/multi-media/lvgl/lvgl_flow.md)：介绍LVGL与LCD等硬件设备的关联以及LVGL完整的工作流程。 +- [LVGL常见组件](https://gitee.com/qpy-doc-center/teedoc_with_qpydoc/tree/main/docs/Application_guide/zh/multi-media/lvgl/lvgl_control.md)：介绍LVGL对象的一些基本概念，包括对象间的关系（父级子级），样式，事件等；介绍项目中常用的组件的用法及API。 +- [LVGL简单示例](https://gitee.com/qpy-doc-center/teedoc_with_qpydoc/tree/main/docs/Application_guide/zh/multi-media/lvgl/lvgl_demo.md)：教您如何快速上手使用Quecpython LVGL开发一个GUI应用程序。 +- [LVGL字体库](https://gitee.com/qpy-doc-center/teedoc_with_qpydoc/tree/main/docs/Application_guide/zh/multi-media/lvgl/lvgl_fontlib.md)：如果LVGL默认字体库不能满足您的项目需求，请翻阅本章。 +- [LVGL UI工具](https://gitee.com/qpy-doc-center/teedoc_with_qpydoc/tree/main/docs/Application_guide/zh/multi-media/lvgl/lvgl_ui_tool.md)：介绍GUI guider工具的使用，即使不熟悉LVGL接口也能使用它轻松开发，帮您的UI开发节约90%的时间。 +- [LVGL应用场景](https://gitee.com/qpy-doc-center/teedoc_with_qpydoc/tree/main/docs/Application_guide/zh/multi-media/lvgl/lvgl_application_scenarios.md)：介绍Quecpython LVGL目前的几个主要应用场景，并给出开发指导。 +- [LVGL开发注意事项](https://gitee.com/qpy-doc-center/teedoc_with_qpydoc/tree/main/docs/Application_guide/zh/multi-media/lvgl/lvgl_notes.md)：避坑必看，总结了项目开发过程中经常遇到的问题，让您的GUI开发更顺利。 + diff --git a/docs/Application_guide/zh/multi-media/lvgl/lvgl_application_scenarios.md b/docs/Application_guide/zh/multi-media/lvgl/lvgl_application_scenarios.md new file mode 100644 index 0000000000000000000000000000000000000000..3b6e0aa35d5701e58bc7881a52259c4feb07eb02 --- /dev/null +++ b/docs/Application_guide/zh/multi-media/lvgl/lvgl_application_scenarios.md @@ -0,0 +1,18 @@ +# LVGL-应用场景 + +## 概述 + +目前，Quecpython LVGL已经在以下应用场景锋芒初露： + +- 智能手表 +- 电子学生卡 +- 两轮车仪表盘 +- 对讲机 +- 充电桩 + +凭借LVGL和Quecpython二者的优势，未来将有更多的应用场景加入进来。 + +### 典型场景的开发建议 + +-todo + diff --git a/docs/Application_guide/zh/multi-media/lvgl/lvgl_control.md b/docs/Application_guide/zh/multi-media/lvgl/lvgl_control.md new file mode 100644 index 0000000000000000000000000000000000000000..0e4826c4f314800c49f1d0c5db031212521cc23b --- /dev/null +++ b/docs/Application_guide/zh/multi-media/lvgl/lvgl_control.md @@ -0,0 +1,518 @@ +# LVGL-常用组件 + +LVGL库提供了一系列组件，用于构建用户界面的基本元素。这些组件包括但不限于按钮、标签、文本框、列表、滑块、图表等。每个组件都具有独特的功能和样式，开发者可以通过设置属性和样式来定制它们的外观和行为，以满足特定应用场景的需求。 + +以下介绍LVGL常用组件，使用以下组件可以实现绝大部分界面需求。若需了解所有的组件及其API说明，可以访问[LVGL官网](https://docs.lvgl.io/8.3/examples.html#widgets)查看。 + +## LVGL基础对象 + +### 概述 + +`基础对象`实现了屏幕上组件的基本属性，例如： + +- 坐标 + +- 父对象 + +- 基于父对象的后代 + +- 包含样式 + +- 诸如可点击(Clickable)、可滚动(Scrollable) 等属性。 + +`基础对象`是 LVGL 中所有组件的基类，其他组件对象均继承自基础对象。 + +`基础对象`可以直接用作一个简单的组件：它就是一个矩形。在没有指定父类对象的时候，一个基础对象就独自构成一个LVGL界面。在指定父类对象的时候，它是一个容器。 + +#### 坐标(Coordinates) + +##### 大小(Size) + +您可以使用`set_width(new_width)`和`set_height(new_height)`设置或修改单个轴上的对象大小，或者可以使用`set_size(new_width, new_height)`同时修改两个轴 。 + +##### 位置(Position) + +您可以使用`set_x(new_x)`和`set_y(new_y)`设置相对于父级的位置，或者使用`set_pos(new_x, new_y)`来同时设置两个轴的位置。 + +##### 对齐(Alignment) + +可以使用设置align(对齐)设置一个控件相对于父容器的对齐方式，Quecpython接口有下面两个: + +- `obj.align(lvgl.ALIGN.type,x,y)` +- `obj.set_align(lvgl.ALIGN.type)` + +> 如果设置居中,有快捷接口`obj.center()` + +LVGL支持的对齐方式见下图： + +![image-20230726163115149](../../media/multi-media/lvgl/lvgl_align_type.png) + +例如，以下代码会将对象从其父对象的中心移动 10(x)，20(y) 像素： + +```python +import lvgl as lv + +obj = lv.obj(lv.scr_act()) + +obj.set_align(lv.ALIGN.CENTER); +obj.set_pos(10, 20); + +//Or in one function +obj.align(lv.ALIGN.CENTER, 10, 20); +``` + +#### 父母和孩子(Parents and children) + +除了界面对象，所有LVGL组件对象都有父对象。 + +父对象和子对象具有以下特点： + +- 一起移动 +- 子对象仅在父对象范围可见 + +组件对象在创建的时候，就需要指定父级对象。您可以使用 `obj.set_parent(new_parent)`为对象设置新的父级。要获取当前父级，请使用 `obj.get_parent()`。 + +要获取父母的特定孩子，请使用`obj.get_child(idx)`。 idx 的一些示例： + +- `0` 获取创建的第一个子对象 + +- `1` 获取创建的第二个子对象 + +- `-1` 获取最后创建的子对象 + +父级的孩子们可以这样迭代： + +```python +for i in range(obj.get_child_cnt()): + child_obj = obj.get_child(i) +``` + +`obj.get_index()`返回对象在其父对象中的索引。 + +您可以使用`obj.move_foreground()`和`obj.move_background()`将对象移到前台或将其移到后台。 + +#### 显示和屏幕(Display and Screens) + +在 LVGL 中，对象层次结构的最高级别是 `display`，它代表显示设备（物理显示器或模拟器）的驱动程序，[LVGL与显示设备的关联](./LVGL流程.MD)在前面的章节已有描述，不做赘述。 一个显示器可以有一个或多个与其相关联的界面。 每个界面都包含图形组件的对象层次结构。 + +当你创建了一个像`screen = lv.obj()`这样的界面对象时，你可以用`lv.scr_load(screen)`激活它。 + +`lv.scr_act()` 函数为当前活动的界面对象。 + +#### 事件(Events) + +要为对象设置事件回调，请使用 `obj.add_event_cb(event_cb, lv.EVENT.type, user_data)`， + +要手动向对象发送事件，请使用 `lv.event_send(obj, lv.EVENT.type, param)` + +请阅读 事件概述 章节，以了解有关事件的更多信息。 + +#### 样式(Styles) + +可以使用`obj.add_style(new_style, selector)`函数向对象添加新样式。 + +selector可以组合使用。 例如：`lv.PART.SCROLLBAR | lv.STATE.PRESSED`。 + +基础对象的selector使用`lv.PART.MAIN`和`lv.PART.SCROLLBAR`。 + +请阅读 样式概述 章节详细了解。 + +#### 宏开关(Flags) + +有一些属性可以通过`obj.add/clear_flag(lv.obj.FLAG.type)`启用/禁用。`lv.obj.FLAG.type`见API常量。 + +### API + +> **注意：**本章节只介绍了一些常见API，如需查看所有API，可以访问[LVGL官网](https://docs.lvgl.io/8.3/examples.html#widgets)查看。 +> +> 以下描述均默认`import lvgl as lv`。 + +#### 构造函数 + +##### `lv.obj(parent)` + +创建一个基础对象(矩形)。 + +**参数描述：** + +- `parent` - 父对象，object类型，不指定则创建的是界面对象。 + +#### 方法 + +##### `obj.add_style(style_obj,selector)` + +给对象添加样式。 + +**参数描述：** + +- `style_obj` - 样式对象，style_obj类型，要添加的样式。 +- `selector` - 选择器，常量，要添加样式的部分及状态，可以组合使用。 例如：`lv.PART.SCROLLBAR | lv.STATE.PRESSED`。 + +##### `obj.add_flag(type)` + +给对象添加宏开关。 + +**参数描述：** + +- `type` - flag类型，常量，要添加的宏开关类型，可以一个或多个类型。 + +##### `obj.clear_flag(type)` + +清除对象的宏开关。 + +**参数描述：** + +- `type` - flag类型，常量，要清除的宏开关类型，可以多个类型。 + +##### `obj.add_state(state)` + +向对象添加一个或多个状态。其他状态位将保持不变。如果在样式中指定，则过渡动画将从以前的状态开始到当前状态。 + +**参数描述：** + +- `state` - state类型，常量，要添加的状态类型，可以一个或多个状态 。 + +##### `obj.clear_state(state)` + +删除对象的一个或多个状态。其他状态位将保持不变。如果在样式中指定，则过渡动画将从以前的状态开始到当前状态。 + +**参数描述：** + +- `state` - state类型，常量，要清除的状态类型，可以一个或多个状态 。 + +##### `obj.get_state()` + +获取对象的状态。 + +#### 常量 + +##### `flag` + +宏开关 + +- `lv.obj.FLAG.HIDDEN` 隐藏对象 +- `lv.obj.FLAG.CLICKABLE` 使输入设备可点击对象 +- `lv.obj.FLAG.CLICK_FOCUSABLE` 单击时将焦点状态添加到对象 +- `lv.obj.FLAG.CHECKABLE` 对象被点击时切换选中状态 +- `lv.obj.FLAG.SCROLLABLE` 使对象可滚动 +- `lv.obj.FLAG.SCROLL_ELASTIC` 允许在内部滚动但速度较慢 +- `lv.obj.FLAG.SCROLL_MOMENTUM` 在“抛出”时使对象滚动得更远 +- `lv.obj.FLAG.SCROLL_ONE` 只允许滚动一个可捕捉的孩子 +- `lv.obj.FLAG.SCROLL_CHAIN` 允许将滚动传播到父级 +- `lv.obj.FLAG.SCROLL_ON_FOCUS` 自动滚动对象以使其在聚焦时可见 +- `lv.obj.FLAG.SNAPPABLE` 如果在父对象上启用了滚动捕捉，它可以捕捉到这个对象 +- `lv.obj.FLAG.PRESS_LOCK` 保持对象被按下，即使按下从对象上滑动 +- `lv.obj.FLAG.EVENT_BUBBLE` 也将事件传播给父级 +- `lv.obj.FLAG.GESTURE_BUBBLE` 将手势传播给父级 +- `lv.obj.FLAG.ADV_HITTEST` 允许执行更准确的命中（点击）测试。例如。考虑圆角。 +- `lv.obj.FLAG.IGNORE_LAYOUT` 使对象可以通过布局定位 +- `lv.obj.FLAG.FLOATING` 父滚动时不滚动对象，忽略布局 + +##### `PART` + +- `lv.PART.MAIN` 类似矩形的背景 +- `lv.PART.SCROLLBAR` 滚动条部分 +- `lv.PART.INDICATOR` 指示部分，例如用于圆弧、条、开关或复选框的勾选框 +- `lv.PART.KNOB` 向圆弧的帽子部分 +- `lv.PART.SELECTED` 表示当前选择的选项或部分 +- `lv.PART.ITEMS` 如果小部件有多个相似的元素（例如表格单元格） +- `lv.PART.TICKS` 刻度上的刻度，例如对于图表或仪表 +- `lv.PART.CURSOR` 标记一个特定的地方，例如文本区域或图表的光标 +- `lv.PART.CUSTOM_FIRST` 可以从这里添加自定义部件。 + +##### `state` + +- `lv.STATE.DEFAULT` 正常, 释放状态默认状态 +- `lv.STATE.CHECKED` 切换或者选中状态 +- `lv.STATE.FOCUSED` 被按键或者编码器聚焦/被触摸屏或鼠标点击 +- `lv.STATE.FOCUS_KEY` 被按键或者编码器聚焦但不是被触摸屏或鼠标点击 +- `lv.STATE.EDITED` 被编码器编辑 +- `lv.STATE.HOVERED` 鼠标悬停（暂不支持） +- `lv.STATE.PRESSED` 被按住 +- `lv.STATE.SCROLLED` 正在滚动 +- `lv.STATE.DISABLED` 失效状态 + +##### `flex-flow` + +- `lv.FLEX_FLOW.ROW` 将子对象排成一行而换行 +- `lv.FLEX_FLOW.COLUMN` 将子对象放在一列中而不换行 +- `lv.FLEX_FLOW.ROW_WRAP` 将子对象排成一排,不超过父容器的宽,否则换行 +- `lv.FLEX_FLOW.COLUMN_WRAP` 将子对象放成一列，不超过父容器的高，否则换行 +- `lv.FLEX_FLOW.ROW_REVERSE` 将子对象排成一行而不换行，但顺序相反 +- `lv.FLEX_FLOW.COLUMN_REVERSE` 将子对象放在一列中，不换行，但顺序相反 +- `lv.FLEX_FLOW.ROW_WRAP_REVERSE` 将子对象排成一行而不换行，但顺序相反 +- `lv.FLEX_FLOW.COLUMN_WRAP_REVERSE` 将子对象放在一列中，不换行，但顺序相反 + +## 标签(label) + +### 概述 + +标签是用来显示文本的对象类型。 + +### 部分和风格(Parts and Styles) + +- `lv.PART.MAIN`表示整个背景和文本部分。 填充值可用于在文本和背景之间添加间隙。 +- `lv.PART.SCROLLBAR` 当文本大于组件的大小时显示的滚动条。 +- `lv.PART.SELECTED` 表示所选文本的部分。 只能使用 `text_color` 和 `bg_color` 样式属性。 + +### 用法(Usage) + +#### 设置文本(Set text) + +您可以在LVGL运行时使用 `label.set_text("New text")` 设置标签上的文本。 + +换行符由标签对象自动处理。 您可以使用 `\n` 来换行。 例如：`"line1\nline2\n\nline4"` + +#### 长模式(long mode) + +默认情况下，标签的大小会自动扩展到文本大小。 如果显式设置宽度或高度（使用例如`label.set_size` 或布局），则可以根据几种长模式策略来操作比标签宽度更宽的行。 类似地，如果文本的高度大于标签的高度，则可以应用策略。 + +- `lv.label.LONG.WRAP` 文本太长，将被剪裁。 （默认） +- `lv.label.LONG.DOT` 将标签右下角的最后 3 个字符替换为点 (`.`) +- `lv.label.LONG.SCROLL` 如果文本比标签宽，则水平来回滚动它。如果它更高，垂直滚动。只滚动一个方向，水平滚动的优先级更高。 +- `lv.label.LONG.SCROLL_CIRCULAR` 如果文本比标签宽，则水平滚动它。如果它更高，请垂直滚动。只滚动一个方向，水平滚动的优先级更高。 +- `lv.label.LONG.CLIP` 只需剪掉标签外的文本部分。 + +您可以使用 `label.set_long_mode(type)` 指定长模式。 + +#### 事件(Events) + +标签组件不发送特殊事件。 + +可以使用`lv.obj.FLAG.CLICKABLE` 使标签变成可点击对象，这样它近似于一个透明的按钮，可以添加点击事件。 + +### API + +> **注意：**本章节只介绍了一些常见API，如需查看所有API，可以访问[LVGL官网](https://docs.lvgl.io/8.3/examples.html#widgets)查看。 + +#### 构造函数 + +##### `lv.label(parent)` + +创建一个标签。 + +**参数描述：** + +- `parent` - 父对象，object类型，必填。 + +#### 方法 + +##### `label.set_text(text)` + +给标签设置显示文本。 + +**参数描述：** + +- `text` - 文本内容，string类型，要显示的文本。 + +##### `label.set_long_mode(type)` + +给标签设置长文本模式。 + +**参数描述：** + +- `type` - 模式，常量，长文本模式。 + +##### `label.get_text()` + +获取标签的显示文本。 + +**返回值描述：** + +- `text` - 文本内容，string类型，显示的文本。 + +#### 常量 + +##### `LONG` + +长文本模式 + +- `lv.label.LONG.WRAP` 文本太长，将被剪裁。 （默认） +- `lv.label.LONG.DOT` 将标签右下角的最后 3 个字符替换为点 (`.`) +- `lv.label.LONG.SCROLL` 如果显示文本比标签宽，则水平来回滚动它。如果它更高，垂直滚动。只滚动一个方向，水平滚动的优先级更高。 +- `lv.label.LONG.SCROLL_CIRCULAR` 如果文本比标签宽，则水平滚动它。如果它更高，垂直滚动。只滚动一个方向，水平滚动的优先级更高。 +- `lv.label.LONG.CLIP` 只需剪掉标签外的文本部分。 + +## 图像(image) + +### 概述 + +图像是显示来自闪存（作为数组）或来自文件的图像的基本对象。 图像也可以显示符号（`lv.SYMBOL....`）。 + +### 部分和风格(Parts and Styles) + +- `lv.PART.MAIN`表示整个背景和图像部分。 + +### 用法(Usage) + +#### 图片来源(Image source) + +为了提供最大的灵活性，图像的来源可以是： + +- 文件系统的文件。 +- Symbols图标。 + +要设置图像的来源，请使用`img.set_src(src)`。 + +要使用文件系统的文件，请将图片文件下载至文件系统，使用`img.set_src("U:/my_img.jpg")`。 + +您还可以设置类似于标签的符号。 在这种情况下，图像将根据样式中指定的 font 呈现为文本。 它其实是一个轻量级单色“字母”而不是真实图像。 你可以设置像`img.set_src(lv.SYMBOL.OK)`这样的符号。 + +#### 转换(Transformations) + +使用 `img.set_zoom(factor)` 图像将被缩放。 将 `factor` 设置为 `256` 为原图大小。 较大的值会放大图像（例如“512”双倍尺寸），较小的值会缩小图像（例如“128”半尺寸）。 分数尺度也有效。 例如。 `281` 放大 10%。 + +要旋转图像，请使用 `img.set_angle(angle)`。 角度的精度为 0.1 度，因此对于 45.8° 设置 458。 + +默认情况下，旋转的轴心点是图像的中心。 它可以通过 `img.set_pivot(pivot_x, pivot_y)` 改变。 `0;0` 是左上角。 + +转换的质量可以通过 `img.set_antialias(True/False)` 来调整。 启用抗锯齿后，转换质量更高但速度更慢。 + +请注意，图像对象的真实坐标在转换过程中不会改变。 即`obj.get_width/height/x/y()` 将返回原始的、未缩放的坐标。 + +#### 事件(Events) + +图像组件不发送特殊事件。 + +可以使用`lv.obj.FLAG.CLICKABLE` 使标签变成可点击对象，这样它近似于一个图像按钮，可以添加点击事件。 + +> **注意**：图像组件能使用图片缓存机制，所以相较于图像按钮组件，更推荐使用图像组件。 + +### API + +> **注意：**本章节只介绍了一些常见API，如需查看所有API，可以访问[LVGL官网](https://docs.lvgl.io/8.3/examples.html#widgets)查看。 + +#### 构造函数 + +##### `lv.img(parent)` + +创建一个图像。 + +**参数描述：** + +- `parent` - 父对象，object类型，必填。 + +#### 方法 + +##### `img.set_src(src)` + +给图像设置图像源。 + +**参数描述：** + +- `src` - 1)图像文件的路径，string类型，要显示的图像的路径。2)`SYMBOL`，例如`lv.SYMBOL.OK` + +##### `img.set_offset_x(x)` + +为图像的源设置x轴偏移，以便从新原点显示图像。 + +**参数描述：** + +- `x` - x轴偏移，int类型。 + +##### `img.set_offset_y(y)` + +为图像的源设置y轴偏移，以便从新原点显示图像。 + +**参数描述：** + +- `y` - y轴偏移，int类型。 + +##### `img.set_angle(angle)` + +图像设置旋转角度。 + +**参数描述：** + +- `angle` - 角度，int类型，精度为0.1度。 + +##### `img.set_zoom(factor)` + +图像设置缩放大小。 + +**参数描述：** + +- `factor` - 缩放程度，int类型，256为原图大小，512双倍尺寸。 + +##### `img.set_pivot(x,y)` + +设置图像的旋转中心，图像将围绕此点旋转。 + +**参数描述：** + +- `x` - 旋转中心x轴坐标，int类型。 +- `y` - 旋转中心y轴坐标，int类型。 + +##### `img.set_antialias(antialias)` + +是否启用/禁用变换的抗锯齿（旋转、缩放）。抗锯齿效果更好，但速度较慢。 + +**参数描述：** + +- `antialias` - 抗锯齿，bool类型，True为使能，False为禁止。 + +## 按钮(Button) + +### 概述 + +与基础对象相比，按钮没有新功能。 它们可用于语义目的，并且默认设置略有不同。 + +默认情况下，按钮在以下方面与基础对象不同： + +- 不可滚动 +- 添加到默认组 +- 默认高度和宽度设置为 `LV_SIZE_CONTENT` + +### 部分和风格(Parts and Styles) + +- `lv.PART.MAIN`表示按钮的背景部分。 + +### 用法(Usage) + +与基础对象相比，按钮没有新功能 + +#### 事件(Events) + +当对象被点击时有选中切换(Toggle)状态的效果，并且可以在 `lv.EVENT.VALUE_CHANGED` 事件类型中处理事件。 + +#### 事件(Events) + +请注意，`lv.KEY.ENTER` 的状态被转换为 `lv.EVENT.PRESSED/PRESSING/RELEASED` 等。 + +参见基础对象的事件。 + +### API + +> **注意：**本章节只介绍了一些常见API，如需查看所有API，可以访问[LVGL官网](https://docs.lvgl.io/8.3/examples.html#widgets)查看。 + +#### 构造函数 + +##### `lv.btn(parent)` + +创建一个按钮。 + +**参数描述：** + +- `parent` - 父对象，object类型，必填。 + +## LVGL其他组件 + +除了上述介绍的组件，LVGL还提供以下组件，项目中选择使用哪种组件请视需求而定。 + +| **组件** | 构造函数 | 说明 | LVGL官网链接 | +| -------- | --------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | +| 列表 | `lv.list()` | 一个垂直布局的矩形，可以向其中添加按钮和文本 | [click me](https://docs.lvgl.io/8.2/widgets/extra/list.html) | +| 窗口 | `lv.win()` | 由一个带有标题、按钮和内容区域的标题构建而成的容器 | [click me](https://docs.lvgl.io/8.2/widgets/extra/win.html) | +| 弧 | `lv.acr()` | 圆弧由背景和前景弧组成。前景（指示器）可以进行触摸调整 | [click me](https://docs.lvgl.io/8.2/widgets/core/arc.html) | +| 进度条 | `lv.bar()` | 显示进度 | [click me](https://docs.lvgl.io/8.2/widgets/core/bar.html) | +| 开关 | `lv.sw()` | 看起来像一个小滑块，开关的功能类似于按钮，也可以用来打开和关闭某些东西 | [click me](https://docs.lvgl.io/8.2/widgets/core/switch.html) | +| 滑动页 | `lv.tileview()` | 菜单页可用，比较界面切换的动画，多出了手指跟随的效果 | [click me](https://docs.lvgl.io/8.2/widgets/extra/tileview.html) | +| 仪表盘 | `lv.meter()` | 以非常灵活的方式可视化数据。在中可以显示圆弧、指针、刻度线和标签 | [click me](https://docs.lvgl.io/8.2/widgets/extra/meter.html) | +| 图表 | `lv.chart()` | 折线图，直方图，散点图 | [click me](https://docs.lvgl.io/8.2/widgets/extra/chart.html) | +| 键盘 | `lv.keyboard()` | 特殊的按钮矩阵，自身实现了按键映射 | [click me](https://docs.lvgl.io/8.2/widgets/extra/keyboard.html) | +| 菜单 | `lv.menu()` | 多级菜单，它自动处理页面之间的遍历 | [click me](https://docs.lvgl.io/8.2/widgets/extra/menu.html) | + + + + + diff --git a/docs/Application_guide/zh/multi-media/lvgl/lvgl_demo.md b/docs/Application_guide/zh/multi-media/lvgl/lvgl_demo.md new file mode 100644 index 0000000000000000000000000000000000000000..911c83bdf32bd2323e09329edf8c4e1ee0342c94 --- /dev/null +++ b/docs/Application_guide/zh/multi-media/lvgl/lvgl_demo.md @@ -0,0 +1,232 @@ +# LVGL-示例 + +## 概述 + +前面章节介绍了LVGL在嵌入式GUI开发上的优势，以及介绍了LVGL的工作流程和常用组件。 + +本章节将教您如何零基础快速上手使用Quecpython LVGL开发一个GUI应用程序。 + + + +## 实验环境搭建 + +### 硬件准备 + +**开发板**：LTE OPEN-EVB_V1.1和EC600U-EU_AB TE-A + +**LCD屏**：ST7789 240*320 + +### 固件下载 + +请前往[Quecpython官网下载中心](https://python.quectel.com/download)下载EC600U-EU_AB的公版固件。 + +![LVGL_demo1](../../media/multi-media/lvgl/LVGL_demo1.png) + +### 硬件连接 + +将LCD屏接好开发板的LCD接口，连接开发板的USB口，长按PWRKEY开机，如下图所示。 + +![lvgl_demo2](../../media/multi-media/lvgl/lvgl_demo2.jpg) + +### 固件烧录 + +使用QPYcom工具（[下载地址](https://python.quectel.com/download)），进行固件烧录， + +![lvgl_demo3](../../media/multi-media/lvgl/lvgl_demo3.jpg) + +## 脚本编写 + +应用代码[下载链接]()。 + +### LCD初始化 + +LCD的初始化部分参见wiki：[machine LCD](https://python.quectel.com/doc/API_reference/zh/peripherals/machine.LCD.html) + +本示例使用的是分辨率240*320的ST7789屏。以下为LCD初始化部分代码： + +```python +from machine import LCD + +init_param=( +0, 0, 0x11, +2, 0, 120, +0, 0, 0x00, +0, 1, 0x36, +1, 1, 0x00, +0, 1, 0x3A, +1, 1, 0x05, +0, 1, 0x35, +1, 1, 0x00, +0, 1, 0xC7, +1, 1, 0x00, +0, 1, 0xCC, +1, 1, 0x09, +0, 5, 0xB2, +1, 1, 0x0C, +1, 1, 0x0C, +1, 1, 0x00, +1, 1, 0x33, +1, 1, 0x33, +0, 1, 0xB7, +1, 1, 0x35, +0, 1, 0xBB, +1, 1, 0x36, +0, 1, 0xC0, +1, 1, 0x2C, +0, 1, 0xC2, +1, 1, 0x01, +0, 1, 0xC3, +1, 1, 0x0D, +0, 1, 0xC4, +1, 1, 0x20, +0, 1, 0xC6, +1, 1, 0x0F, +0, 2, 0xD0, +1, 1, 0xA4, +1, 1, 0xA1, +0, 14, 0xE0, +1, 1, 0xD0, +1, 1, 0x17, +1, 1, 0x19, +1, 1, 0x04, +1, 1, 0x03, +1, 1, 0x04, +1, 1, 0x32, +1, 1, 0x41, +1, 1, 0x43, +1, 1, 0x09, +1, 1, 0x14, +1, 1, 0x12, +1, 1, 0x33, +1, 1, 0x2C, +0, 14, 0xE1, +1, 1, 0xD0, +1, 1, 0x18, +1, 1, 0x17, +1, 1, 0x04, +1, 1, 0x03, +1, 1, 0x04, +1, 1, 0x31, +1, 1, 0x46, +1, 1, 0x43, +1, 1, 0x09, +1, 1, 0x14, +1, 1, 0x13, +1, 1, 0x31, +1, 1, 0x2D, +0, 0, 0x29, +0, 1, 0x36, +1, 1, 0x00, +0, 0, 0x2c, +) +init_data = bytearray(init_param) + +invalid_param = ( +0,4,0x2a, +1,1,0xf0, +1,1,0xf1, +1,1,0xe0, +1,1,0xe1, +0,4,0x2b, +1,1,0xf2, +1,1,0xf3, +1,1,0xe2, +1,1,0xe3, +0,0,0x2c, +) +test_invalid = bytearray(invalid_param) +displayoff = ( +0,0,0x28, +2,0,120, +0,0,0x10, +) +test_displayoff = bytearray(displayoff) +displayon = ( +0,0,0x11, +2,0,20, +0,0,0x29, +) +test_displayon = bytearray(displayon) + +lcd.lcd_init(init_data, 240, 320, 52000, 1, 4, 0, test_invalid, test_displayon, test_displayoff, None) +``` + +### LVGL初始化 + +```python +import lvgl as lv + +lv.init() +``` + +### 注册显示驱动程序 + +```python +LCD_SIZE_W = 240 +LCD_SIZE_H = 320 + +disp_buf1 = lv.disp_draw_buf_t() +buf1_1 = bytearray(LCD_SIZE_W * LCD_SIZE_H * 2) +disp_buf1.init(buf1_1, None, len(buf1_1)) +disp_drv = lv.disp_drv_t() +disp_drv.init() +disp_drv.draw_buf = disp_buf1 +disp_drv.flush_cb = lcd.lcd_write +disp_drv.hor_res = LCD_SIZE_W +disp_drv.ver_res = LCD_SIZE_H +disp_drv.register() +``` + +### 开启lvgl线程 + +按如下代码设置LVGL的心跳以及开启LVGL线程。 + +```python +lv.tick_inc(5) +lv.task_handler() +``` + +至此，我们完成了初始化部分，可以进行GUI界面主体代码的编写了。 + +### 创建界面对象 + +按照前面章节的描述，通过如下语句创建一个没有父类的LVGL基本对象（即界面对象）。 + +``` +screen = lv.obj() +``` + +### 创建图片对象 + +以刚刚创建的LVGL界面为父对象创建一个图片组件，并设置位置及图片源。 + +```python +# create a image object +img1 = lv.img(screen) +img1.set_pos(80, 80) +img1.set_src("U:/quectel.jpg") +``` + +### 创建标签对象 + +以刚刚创建的LVGL界面为父对象创建一个标签组件，设置文本及位置。 + +```python +# create a label object +label1 = lv.label(screen) +label1.set_text("Hello Quecpython") +label1.center() +label1.set_pos(0, 80) +``` + +### 加载界面 + +```python +lv.scr_load(screen) +``` + +## 效果验证 + +将脚本下载至模组，运行脚本，可以看到LCD屏显示界面如下图所示。 + +![lvgl_demo4](../../media/multi-media/lvgl/lvgl_demo4.jpg) \ No newline at end of file diff --git a/docs/Application_guide/zh/multi-media/lvgl/lvgl_flow.md b/docs/Application_guide/zh/multi-media/lvgl/lvgl_flow.md new file mode 100644 index 0000000000000000000000000000000000000000..52da600b09544875a33b27b28e74c7c06533fe54 --- /dev/null +++ b/docs/Application_guide/zh/multi-media/lvgl/lvgl_flow.md @@ -0,0 +1,191 @@ +# LVGL-流程 + +## 概述 + +在当今嵌入式系统开发领域，图形化用户界面（GUI）的需求越发突显，Quecpython + LVGL将为您的GUI开发助力。 + +本章节从其与硬件设备的关联到界面的绘制和显示过程，为您直观呈现一个完整的LVGL工作流程。 + +## LVGL与显示设备关联 + +LVGL通过注册的LCD显示驱动对象，将绘制的图形数据刷新到LCD屏幕上。LCD作为显示设备，负责在屏幕上显示图形界面的内容。LCD显示驱动对象充当了LVGL与LCD之间的桥梁，它接收LVGL生成的图形数据，并将其有效地传输到LCD屏幕上进行显示。通过这种方式，LVGL库与LCD之间建立了紧密的联系，使开发者能够借助LVGL的功能和灵活性，轻松创建出美观、交互性强的嵌入式用户界面，并通过LCD屏幕进行实时显示和更新。 + +![lvgl_1](../../media/multi-media/lvgl/lvgl_1.png) + +## LVGL工作流程 + +### LVGL初始化 + +#### 流程描述 + +LVGL初始化流程如下： + +1. 正确初始化LCD显示屏，参照[wiki](https://python.quectel.com/doc/API_reference/zh/peripherals/machine.LCD.html)。 +2. 初始化显示负载。 +3. 初始化显示驱动，指定刷新接口为LCD对象的写屏接口 +4. 如果有TP等输入设备，初始化TP对象。 +5. 初始化输入设备驱动。 +6. 开启LVGL线程。 + +下图为LVGL初始化流程图： + +![lvgl_2](../../media/multi-media/lvgl/LVGL_initialization_flowchart.png) + +#### 代码示例 + +以下为包含Touchpad(触摸板)的LVGL的初始化代码，该示例使用MIPI显示屏。 + +```python +import lvgl as lv +from machine import LCD, Pin +from tp import gt9xx + +# 此处MIPI初始化参数请根据具体屏幕驱动型号填写。 +init_para = (0x29,0,0) +# LCD初始化部分，详见代码下方注意事项。 +mipilcd = LCD() +mipilcd.mipi_init(initbuf=bytearray(init_para), width=480, hight=854) + +# LVGL初始化 +lv.init() +# 创建一个显示缓冲区对象 +disp_buf1 = lv.disp_draw_buf_t() +# 显示缓冲区对象大小为：width * height * 2 +buf1_1 = bytes(480 * 854 * 2) +disp_buf1.init(buf1_1, None, len(buf1_1)) + +# 创建LVGL显示驱动对象 +disp_drv = lv.disp_drv_t() +# 初始化LVGL显示驱动对象 +disp_drv.init() +# 将显示缓冲区对象赋值给驱动对象的draw_buf属性 +disp_drv.draw_buf = disp_buf1 +# 将LCD对象的刷新回调函数lcd_write赋值给驱动对象的flush_cb属性 +disp_drv.flush_cb = mipilcd.lcd_write +# 此处基于实际的屏幕宽度来设置水平分辨率 +disp_drv.hor_res = 480 +# 此处基于实际的屏幕高度来设置垂直分辨率 +disp_drv.ver_res = 854 +# 此处设置是否需要旋转 +disp_drv.sw_rotate = 1 +# 旋转角度 +disp_drv.rotated = lv.DISP_ROT._270 +# 注册LVGL显示驱动对象 +disp_drv.register() + +# Touchpad(触摸板)初始化 +tp_gt911 = gt9xx(irq=40, reset=20) +tp_gt911.activate() +tp_gt911.init() +print("gt911 init...") + +# 创建LVGL输入设备驱动对象 +indev_drv = lv.indev_drv_t() +indev_drv.init() +indev_drv.type = lv.INDEV_TYPE.POINTER +# 将Touchpad对象的读取函数read赋值给LVGL输入设备驱动对象的read_cb属性 +indev_drv.read_cb = tp_gt911.read +indev_drv.register() + +# 启动LVGL 线程 +lv.tick_inc(5) +lv.task_handler() +``` + +> **注意：** +> +> - LCD初始化部分参照[wiki](https://python.quectel.com/doc/API_reference/zh/peripherals/machine.LCD.html)。 +> +> - LVGL需要LCD对象提供lcd_write接口来刷新屏幕。 +> - LVGL需要TP对象提供read接口来进行触摸输入。 + +### LVGL界面绘制 + +#### 流程描述 + +LVGL绘制流程如下： + +1. 创建LVGL组件对象。 +2. 如有需要自定义样式，则创建LVGL样式对象。 +3. 给LVGL组件对象添加样式对象。 +4. 如有需要自定义事件，则创建LVGL事件回调函数。 +5. 给LVGL组件绑定事件回调函数，并指定触发事件类型。 +6. 加载界面，开始GUI显示逻辑。 + +下图为LVGL绘制流程图： + +![LVGL drawing flowchart](../../media/multi-media/lvgl/LVGL_drawing_flowchart.png) + +#### 代码示例 + +以下为一段示例代码，该示例创建了一个界面，并在界面上创建了一个可以点击的按钮。 + +```python +import lvgl as lv + +#此处省略LVGL初始化流程代码 + +#----------script start---------- + +# 创建一个界面 +screen = lv.obj() + +# 创建button对象 +btn1 = lv.btn(screen) +# button设置位置 +btn1.center() +# button添加文字 +label = lv.label(btn1) +label.set_text("click") + +# 创建样式对象 +style_btn = lv.style_t() +style_btn.init() +# 设置背景颜色 +style_btn.set_bg_color(lv.palette_main(lv.PALETTE.YELLOW)) +# 设置字体颜色 +style_btn.set_text_color(lv.palette_darken(lv.PALETTE.YELLOW, 4)) + +# 给button对象添加样式 +btn1.add_style(style_btn, 0) + +# 定义事件回调函数 +def event_handler(evt): + code = evt.get_code() + if code == lv.EVENT.CLICKED: + print("Clicked event detected") + +# 给button对象添加事件，再点击时触发 +btn1.add_event_cb(event_handler, lv.EVENT.CLICKED, None) + +# 加载界面 +lv.scr_load(screen) +``` + +> **注意：** +> +> - LVGL对象创建需在LVGL线程开始之后，否则会出错。 +> - LVGL绘制流程可以与显示交织进行，或者说可以在显示过程中动态绘制并实时显示。 + +### 效果展示 + +上述实例代码运行效果如下图所示： + +![lvgl_btn_demo](../../media/multi-media/lvgl/lvgl_btn_demo.png) + +## LVGL界面显示 + +LVGL以界面(obj对象)为基本单位进行显示，开发者根据业务逻辑调用界面加载接口进行界面的切换。 + +### 屏幕刷新机制 + +LVGL采用以下几种刷新机制并存的方式进行屏幕刷新，开发者了解即可。 + +1. 自动刷新(Automatic Refresh) + +这是LVGL的默认刷新模式。在这个模式下,LVGL会自动检测对象的状态变化并刷新显示。开发者不需要手动刷新。 + +2. 部分刷新(Partial Refresh) + +当屏幕的局部区域发生变化时,默认只刷新该区域而不是全屏刷新，该机制可以提高性能。 + diff --git a/docs/Application_guide/zh/multi-media/lvgl/lvgl_fontlib.md b/docs/Application_guide/zh/multi-media/lvgl/lvgl_fontlib.md new file mode 100644 index 0000000000000000000000000000000000000000..c5d8cba246da3f3f88b21443bd9ccc1833bbd7ff --- /dev/null +++ b/docs/Application_guide/zh/multi-media/lvgl/lvgl_fontlib.md @@ -0,0 +1,262 @@ +# LVGL-字体库 + +## 概述 + +在 LVGL 中，`字体`是渲染字母（字形）图像所需的位图和其他信息的集合。 + +`字体`具有bpp（像素深度）属性。它显示了使用多少位来描述字体中的像素。为像素存储的值决定了像素的不透明度。 这样，使用更高的 bpp，字母的边缘可以更平滑。可能的 bpp值为 1、2、4 和 8（值越高表示质量越好）。 + +bpp还会影响存储字体所需的内存大小。例如，bpp = 4使字体比 bpp = 1大近4倍。 + +## 字体分类 + +因LVGL字体的实质是字形图像的位图，所以不以字体语种作为分类依据。 + +`Quecpython LVGL字体`可分为： + +1. **内置字体**(built-in fonts) +2. **外置字体**(external fonts) + +> 注意：目前仅EC600M系列，EC600N系列，EC800M系列，EG810M系列支持外置字体。 + +## 内置字体(built-in fonts) + +### 概述 + +顾名思义，内置字体就是已经编辑集成进固件中的LVGL字体，可直接在应用代码中通过接口`style_obj.set_text_font(lv.font_name)`或`obj.set_style_text_font(lv.font_name,0)`使用。 + +### 默认字体 + +Quecpython LVGL默认集成了`MONTSERRAT 14`号字体，包含全部英文字符和部分常见英文符号。 + +默认字体可以通过`lv.font_default()`接口获取，或者直接使用`lv.font_montserrat_14`。 + +### 添加新字体 + +默认字体往往无法满足项目需求，如果您是使用pythonSDK开发，可以按以下方法将新字体编译到固件中。 + +#### 基于Lvgl 官网字体转换工具添加 + +此种方式添加新的内置字体较为简单，缺点是在bpp较小的时候，最后字体的显示质量较差。 + +##### 工具 + +[Lvgl 官网字体转换工具](https://lvgl.io/tools/fontconverter) + +##### 字体C文件生成 + +![lvgl_font1](../../media/multi-media/lvgl/lvgl_font1.png) + +1. 输入要生成的字体名称（最后会生成同名的 C 文件）； +2. 输入要转换的字体大小； +3. 选择锯齿平滑度； +4. 选择本地 TTF 或者 WOFF 格式的字体文件，(请确保该字体为免费商用)， 即你要转换成的目标字体； +5. 输入字库需要包含的文字，如需空格，符号，数字，字母也需一并输入； +6. 完成上述五步必须操作，点击 convert 进行在线转换，字体会自动下载到本地。 +7. 将生成的C文件复制到你的 LVGL 工程目录：`pythonSDK\services\microPython\lib\lvgl\lvgl\src\font`文件夹下。 + +您可以照上述步骤添加多个你需要的字体C文件到font目录。 + +##### 修改字体C文件 + +为了和其它字库文件统一，对生成的C文件做出以下修改，如果想使用宏控，则添加您项目对应的宏控，如本教程的`#if LV_FONT_UI_DEMO`。 + +![lvgl_font2](../../media/multi-media/lvgl/lvgl_font2.jpg) + +#### 基于LvglFontTool 工具添加 + +此种方式添加新的内置字体较为复杂，优点是在bpp较小的时候，最后字体的显示质量较好。 + +##### 工具 + +[LvglFontTool工具V0.4](http://www.armbbs.cn/forum.php?mod=viewthread&tid=99387) + +> 注意：此工具目前只有中文版本，海外客户可照下面图示及文字描述的步骤操作。 + +##### 字体C文件生成 + +打开工具，在选择字体的时候，有两种选项，第一种可以勾选”使用FreeType TTF“并选择TTF字体文件来制作字体，第二种不勾选”使用FreeType TTF“也可以选择pc上自带的字体来制作字体，步骤如下： + +![lvgl_font8](../../media/multi-media/lvgl/lvgl_font8.jpg) + +![lvgl_font9](../../media/multi-media/lvgl/lvgl_font9.jpg) + +![lvgl_font10](../../media/multi-media/lvgl/lvgl_font10.jpg) + +1. 勾选使用”使用FreeType TTF“(或不勾选)； +2. 选择TTF字体文件(或选择电脑自带字体)； +3. 设置字体大小，点击确定； +4. 输入字库需要包含的文字，如需空格，符号，数字，字母也需一并输入； +5. 选择6.0版本以上； +6. 选择内部字体； +7. 输入字体名字； +8. 完成上述必须操作，点击开始转换，选择保存路径即可； +9. 打开文件保存目录，将siyuan_light_12.c 复制到你的 LVGL 工程目录： + `pythonSDK\services\microPython\lib\lvgl\lvgl\src\font`文件夹下。 + +您可以照上述步骤添加多个你需要的字体C文件到font目录。 + +##### 修改字体C文件 + +为了和其它字库文件统一，对生成的C文件做出以下修改。 + +![lvgl_font11](../../media/multi-media/lvgl/lvgl_font11.jpg) + +![lvgl_font12](../../media/multi-media/lvgl/lvgl_font12.jpg) + +![image-20230803151622262](../../media/multi-media/lvgl/lvgl_font13.jpg) + +至此，字体C文件修改完成。 + +#### 参与编译 + +按上述步骤完成字体C文件的添加后，还需要按如下操作修改文件，使添加的字体C文件能参与编译。 + +- 在`pythonSDK\services\microPython\lib\lvgl\lvgl\src\font\lv_font.mk`中加入添加的字体文件。 + +![lvgl_font3](../../media/multi-media/lvgl/lvgl_font3.jpg) + +- 在`pythonSDK\services\microPython\microPython.mk`中加入添加的字体文件 + +![lvgl_font4](../../media/multi-media/lvgl/lvgl_font4.jpg) + +- 在`pythonSDK\services\microPython\lib\lvgl\lvgl\src\font\lv_font.h`中声明添加的字体 + +![lvgl_font5](../../media/multi-media/lvgl/lvgl_font5.jpg) + +- 在Quecpython中添加该字体的使用。 + +![lvgl_font6](../../media/multi-media/lvgl/lvgl_font6.jpg) + +![lvgl_font7](../../media/multi-media/lvgl/lvgl_font7.jpg) + +至此修改结束，编译固件并烧录到模块，就可以使用添加的内部字体库了。 + +## 外置字体(external fonts) + +### 概述 + +默认字体往往无法满足项目需求，如果您并未使用pythonSDK开发，您可以选择使用LVGL外置字体。 + +外置字体是将需要的字体制作成二进制bin文件，用指定方式合入固件中使用。 + +> 注意：目前仅EC600M系列，EC600N系列，EC800M系列，EG810M系列支持外置字体。 + +### 添加新字体 + +#### ext_font.bin文件生成 + +##### 工具 + +bin文件生成工具: [LvglFontTool工具V0.4](http://www.armbbs.cn/forum.php?mod=viewthread&tid=99387) + +bin文件合成工具: font_bin_merge.py + +> 注意：此工具目前只有中文版本，海外客户可照下面图示及文字描述的步骤操作。 +> +> 最终使用的二进制bin文件可能包含多个字体，所以需要先使用bin文件生成工具生成单个bin文件，再使用bin文件合成工具合成最终使用的二进制bin文件：ext_font.bin。 + +##### 单个bin文件生成 + +使用LvglFontTool转换字体工具进行文件生成。 + +![lvgl_font14](../../media/multi-media/lvgl/lvgl_font14.jpg) + +1. 选择您要转换的字体文件，并输入要使用的字体大小（就是汉字在显示器上占用像素的高度），点击确定。 +2. 在左上角的方框中输入需要添加的字体库文字，下方的按钮可以作为辅助。 +3. 选择锯齿平滑度,抗锯齿高占用空间大,需权衡。 +4. 版本选择，选择用于6.0版本以上。 +5. 选择保存类型：XBF字体，外部bin文件。 +6. 输入要保存的字体库名称。 +7. 点击开始转换，选择要保存文件的目录点击确定即可完成转换。该目录会生成bin文件和c文件。 + +操作的时候注意以下几点: + +- 制作字体生成的C文件中，找到该字体的line_height，纪录它，后面使用接口的时候需要传参! line_height也可在生成工具的右上侧代码中找到： + +![lvgl_font15](../../media/multi-media/lvgl/lvgl_font15.jpg) + +- 抗锯齿可以增加字体的圆润度，相应的会增加bin文件的大小 + +- 如果勾选了使用FreeType TTF选项，需要提前准备好一个字体TTF文件，或者可以取消勾选该选项，则可以从本机字体种选取字体进行bin文件制作。 + +- 尤其注意的是，**bin文件的大小，取决于包含的字符在unicode中的index的跨度！** + +##### 字体bin文件合成 + +通过上述步骤，我们创建了单独字体的bin文件，我们需要将它们合成LVGL外部字体库接口可以使用的ext_font.bin文件。 + +> 注意：若只有一个bin文件，也需要执行这一步。 + +打开font_bin_merge.py脚本，将main中的bin_create()的参数改成您需要合并的bin文件的路径即可,有几个bin文件就传几个参数。 + +![lvgl_font16](../../media/multi-media/lvgl/lvgl_font16.jpg) + +执行修改好的font_bin_merge.py脚本,即可在同目录下生成最终需要的bin文件:ext_font.bin。 + +> 注意：请先确保您正确安装了python。 + +#### flash分区调整 + +制作好ext_font.bin后，需要按以下操作将文件合入固件中。 + +#### 修改分区配置文件 + +将固件包中的 xxx_release_pack.zip 拷贝到 release_tool 目录下， 即和 release.exe 同级目录。 +将 xxx_release_pack.zip 解压到当前路径。 会解压出 2 个目录 config 和 images， config 存放分区配置文件， +images 存放烧录时用到的各种 bin 文件。 + +这里以 EC600NCN_LF 系列新增字库分区为例。 具体如下： +1、 config\template\目录下的 CRANE_EVB.json 文件， 需要增加新增分区的信息。 涉及 2 处如下图： + +![lvgl_font17](../../media/multi-media/lvgl/lvgl_font17.jpg) + +![lvgl_font18](../../media/multi-media/lvgl/lvgl_font18.jpg) + +2、 config\partition\目录下的 CRANE_SINGLE_FLASH_LAYOUT_LTEONLY.json 文件， 用来修改分区大小。 +需要增加新增分区的信息， 这里新增字库分区 ext_font 的大小为 1536KB， 根据实际需要决定该分区大小。 +同时由于总的分区空间不变， 所以需要减少另一个分区 customer_app 空间大小， 从 3116KB 减到 1580KB， +同理该分区大小也要根据实际情况调整， 最小不能小于 image\customer_app.bin 文件的实际大小。 如下图： + +![lvgl_font19](../../media/multi-media/lvgl/lvgl_font19.jpg) + +> **注意：** +> +> - 对于 EC600N 系列， 新增的 ext_font 分区空间来源于 customer_app 分区剩余空间+reserved 分区剩余 +> 空间， ext_font 分区的大小不能超过这 2 个之和， reserved 分区是预留的空间， 会自动调整， 不需要专门调整。 即这里 ext_font 分区的大小可以大于或等于 customer_app 分区减小的大小。 +> - 对于 EC600M 系列， 新增的 ext_font 分区空间只能来源于 customer_app 分区剩余空间， 而且 ext_font分区的大小必须等于 customer_app 分区减去的大小， 否则会导致 APP 启动失败。 + +#### ext_font.bin文件放置 + +将ext_font.bin文件copy 到 images\目录下。 + +#### 新固件生成 + +将修改内容后的 config 和 image 目录重新压缩成 xxx_release_pack.zip(注意不要多加一层文件夹， 需要 +xxx_release_pack.zip 点击进去直接是 config 和 image 目录)， 然后点击运行 release.exe 即可生成包含字 +库文件 ext_font.bin 的新固件。 + +如果生成固件失败， 基本是因为超过了空间的总大小。 请检查 ext_font 分区大小是否超过了 customer_app +分区剩余的空间大小（对于 EC600N 再加上 reserved 分区剩余的空间大小） 。 如果超了， 只能通过减小字 +库文件 ext_font.bin 的大小来解决。 + +#### 外置字体使用接口 + +按照上文内容，生成了包含ext_font.bin的固件包之后，烧录固件包。 + +#### 接口说明 + +Lvgl外部字体库接口： + +`lvgl.style_t().set_text_font_v2(font_name,line_height, flash_port)` + +参数说明: + +- `font_name`: 字体名称，系合成ext_font.bin文件的bin文件名称； +- `line_height`: 字形高度，可在工具生成的C文件中找到； +- `flash_port`: 内部flash填0即可；外部flash根据连接的spi port填写。 + +> **注意：** +> +> - 这里的font_name是您要使用的字体的原始bin文件名字，不是"ext_font.bin"。比如您制作了font_12.bin和font_14.bin，将它们合成了ext_font.bin，则font_name参数需填”font_12.bin”或”font_14.bin”。 +> - Line_height不要填错，否则可能字体显示不全或显示过高。 \ No newline at end of file diff --git a/docs/Application_guide/zh/multi-media/lvgl/lvgl_notes.md b/docs/Application_guide/zh/multi-media/lvgl/lvgl_notes.md new file mode 100644 index 0000000000000000000000000000000000000000..7db5e9debc0fd135c08d7ccf7db38c3c040952af --- /dev/null +++ b/docs/Application_guide/zh/multi-media/lvgl/lvgl_notes.md @@ -0,0 +1,143 @@ +# LVGL-注意事项 + +## 概述 + +在实际使用Quecpython LVGL的开发过程中，客户可能会遇到很多问题，本章总结一些开发者遇到的常见问题。 + +## 图片的选择与使用 + +> **注意：**图片解码消耗RAM资源！ + +项目GUI不可避免要用到图片，Quecpython LVGL提供了三种图片格式的支持，分别是PNG，JPG和SJPG。 + +## 图片格式的优缺点 + +### PNG + +优点 + +- 无损格式，图片质量较好 + +- 支持透明 + +缺点 + +- 解码需要RAM资源大（图像宽度 x 图像高度 x 4字节） +- 解码时间较长（图片放四线外挂flash） + +### JPG + +优点 + +- 较节省资源（解码需RAM：图像宽度 x 图像高度 x 3字节） +- 图片质量较好 + +缺点 + +- 不支持透明 +- 优点同时也是缺点，画质比PNG差，解码消耗资源也较大 + +### SJPG + +SJPG 是LVGL自定义的一种基于普通” JPG 的格式，全称split-jpeg ，它是一段带有 sjpg 标头的小 jpeg 片段数据，它的大小将几乎与 jpg 文件相当，或者可能会稍大一些。 + +优点 + +- 节省资源（解码不需申请较大RAM空间） + +缺点 + +- 不支持透明 +- 画质较差 +- 若图片放四线外挂flash，则加载慢 +- 不适用图片缓存机制 + +## 图片格式的选择 + +首先看透明度需求，有透明度需求的直接选择PNG格式。 + +其次得分以下两种情况说明。 + +### 图片放内置flash或外挂六线flash + +这种情况下，flash访问速度快，解码速度差距不大，对于客户而言，UI加载三种格式图片的速度差距不大。 + +请根据对画质的需求和资源分配权衡选择。 + +一般而言，若画质需求不强烈，可以选择SJPG，其次选择JPG，最后PNG； + +若模块RAM资源富余，可以选择PNG，其次JPG，最后SJPG。 + +需要根据项目实际情况找到一个平衡点。 + +### 图片放外挂四线flash + +外挂四线flash访问速度慢，UI图片较多的时候，对于客户而言，卡顿感知明显。 + +这种情况下，需要打开图片缓存机制，选择JPG或PNG格斯，不能选择SJPG！ + +## 图片缓存机制 + +上文说到，外挂四线flash文件系统读取速度比较慢，LVGL图片解码也比较耗时，导致GUI显示卡顿。需要使用LVGL的图片缓存机制来解决。 + +### 使用方法 + +使用JPG或者PNG格式图片，在切换界面之前执行以下两步： + +```python +lv.img.cache_invalidate_src(None) +lv.img.cache_set_size(cache_num) +``` + +`cache_num` - 需要缓存的图片数目，最大16。 + +> **注意：** +> +> - SJPG与图片缓存机制不兼容！因为SJPG的实质是很多块小图片。 +> - imgbtn组件不能使用图片缓存机制，不要使用imgbtn组件！ +> - 缓存的图片会占据RAM。 + +# LVGL休眠场景 + +首先，在需要进入低功耗模式的时候，务必确认外设是否停止交互，USB是否已断开，线程是否都已阻塞或挂起，否则无法进入低功耗模式。 + +在确保上述条件满足的情况下，项目一般采取以下流程进低功耗，其中背光关闭请根据硬件设计来对应的关闭。 + +```python +import pm +import lvgl as lv + +# Allow module to enter low-power mode in idle state +pm.autosleep(1) +# Allow lvgl to enter low-power mode in idle state +lv.autoSleep(1) +# LCD enters sleep state +lcd.lcd_display_off() +# touchpad enters sleep state if exists +tp.suspend() +# close lcd backlight if it can be controled +``` + +退出低功耗的时候执行相反的操作，如下。 + +```python +import pm +import lvgl as lv + +# module exits from low-power mode +pm.autosleep(0) +# lvgl exits from low-power mode +lv.autoSleep(0) +# wake LCD up +lcd.lcd_display_on() +# wake touchpad up +tp.resume() +# open lcd backlight if it can be controled +``` + +# 其他注意事项 + +- 避免组件或者样式被gc回收，请将其定义为全局变量。 +- 切换界面之前不要执行太多耗时操作，否则可能造成切换页面卡顿。 +- 因LVGL底层限制，不要给一个组件多次的添加样式(add_style)，超过64次会dump。 +- 从heap消耗上看，图片解码会消耗大量的heap，建议尽量少用不必要的大图片。比如纯色背景和渐变色背景都可以使用lvgl的背景色来完成，没必要使用图片。 \ No newline at end of file diff --git a/docs/Application_guide/zh/multi-media/lvgl/lvgl_ui_tool.md b/docs/Application_guide/zh/multi-media/lvgl/lvgl_ui_tool.md new file mode 100644 index 0000000000000000000000000000000000000000..7c652bf4abe2bceb9820d339359c62775b4ac366 --- /dev/null +++ b/docs/Application_guide/zh/multi-media/lvgl/lvgl_ui_tool.md @@ -0,0 +1,131 @@ +# LVGL-UI工具 + +## 简介 + +`Gui Guider`（恩智浦）是PC端GUI设计工具，可以通过拖放控件方式设计LVGL GUI页面，加速GUI设计。设计完成后可在PC上仿真运行，确认设计完毕后生成python脚本，再整合入模组中。完成开发。 + +[`Gui Guider`下载地址](https://www.nxp.com/products/processors-and-microcontrollers/s32-automotive-platform/s32k-auto-general-purpose-mcus/gui-guider:GUI-GUIDER)。 + +本文将介绍如何使用GUI Guider辅助进行Quecpython LVGL开发。 + +GUI Guider的主要特征 + +- 支持Windows 10和Ubuntu 20.04。 +- 支持中文、英文。 +- 兼容LVGL V8.3.5版本。 +- 支持拖放的所见即所得(WYSIWYG)用户界面设计。 +- 多种字体支持及第三方字体导入。 +- 自动产生python语言源代码。 +- 支持默认样式和自定义样式。 +- 演示应用程序集成。 +- 实时日志显示。 +- 集成上位机仿真器。 + +## 使用说明 + +正确安装好`Gui Guider`就可以开始设计GUI了，设计好模拟完毕后即可一键生成python代码，经过少量修改后就可以下载到模块中运行了。下面是具体的使用步骤。 + +### 创建工程 + +打开`Gui Guider`，在下面界面选择Create a new project。 + +![guiguider1](../../media/multi-media/lvgl/guiguider1.png) + +进入下面界面后选择v8.3.5，点击next进入下一步。 + +![guiguider2](../../media/multi-media/lvgl/guiguider2.png) + +在下面界面选择simulator模拟器。 + +![guiguider3](../../media/multi-media/lvgl/guiguider3.png) + +在下面界面选择一个模板，您可根据需要选择，如下有播放器，标签，仪表盘等，选择完点击next进入下一步。 + +![guiguider4](../../media/multi-media/lvgl/guiguider4.png) + +在下面界面的右侧填写项目名，选择保存路径，色深选择16位，根据项目LCD的实际分辨率选择分辨率，填写完成点击Create创建工程。 + +![guiguider5](../../media/multi-media/lvgl/guiguider5.png) + +### GUI设计 + +创建完项目后进入UI设计界面，下面为几个主要的区域的介绍。 + +- 工具界面左侧Layers下的Screen为当前创建的UI界面列表，可以通过点击“+”按钮来创建新界面。 +- 工具界面左侧Layers下的Widgets为当前编辑UI界面的组件列表。 +- 工具界面中间的UI editor左侧为可以拖拽的组件库，点击下面的扩展可以展开所有的组件。 +- 工具界面中间的UI editor主要部分为当前正在编辑的UI界面。 +- 工具界面右侧的Attributes可以设置UI界面或组件的属性值。 + +![guiguider6](../../media/multi-media/lvgl/guiguider6.png) + +请按照如下步骤完成UI的设计： + +创建所有需要的界面，命名最好规范，方便后面的代码生成及维护； + +设计每个界面，将所需的组件拖拽到界面上，调整位置和大小，设置属性； + +![guiguider7](../../media/multi-media/lvgl/guiguider7.png) + +如需给组件添加事件，比如点击切换界面，则先选中需要添加的组件，再在任意地方鼠标右击，点击Add Event按钮点开添加事件窗口，如下图所示。 + +![image-20230809115014573](../../media/multi-media/lvgl/guiguider10.png) + +![image-20230809115139952](../../media/multi-media/lvgl/guiguider11.png) + +UI设计完成后，点击右上角的三角形图标，选择Micropython模拟器点击启动，在模拟器上查看效果和验证事件。 + +![guiguider8](../../media/multi-media/lvgl/guiguider8.png) + +![guiguider9](../../media/multi-media/lvgl/guiguider9.png) + +### 代码生成 + +完成GUI的设计和模拟器模拟后，点击右上角的按钮生成代码。 + +![guiguider12](../../media/multi-media/lvgl/guiguider12.png) + +点击中间视图的Code Viewer可以预览生成的代码，生成的python代码名为gui_guider.py如下。代码路径为工程下的generated目录下。 + +![image-20230809141858481](../../media/multi-media/lvgl/guiguider13.png) + + + +## 适配Quecpython + +GUI guider生成的脚本与实际应用的脚本还有些轻微差异。稍微修改后即可直接运行于模组中。主要实际操作如下： + +1. 添加对LCD的初始化。 +2. 修改gui guider生成的代码。 +3. 下载脚本到模组运行。 + +### 添加LCD的初始化 + +在gui guider生成的py文件开始添加LCD显示屏初始化代码，参照[wiki](https://python.quectel.com/doc/API_reference/zh/peripherals/machine.LCD.html)。 + +### 修改生成的代码 + +gui guider生成的py文件还需进行一些修改才能适配Quecpython LVGL。 + +### 修改对LVGL的初始化 + +将生成文件的LVGL初始化代码，参照[LVGL流程](https://gitee.com/qpy-doc-center/teedoc_with_qpydoc/tree/main/docs/Application_guide/zh/multi-media/lvgl/lvgl_flow.md)的LVGL初始化章节进行修改。 + +### 修改对图片的使用 + +生成文件中对图片的使用它自定义的解码接口进行解码，而Quecpython LVGL自带图片解码器，故可直接使用路径调用。 + +把gui guider生成的py文件中所有的set_src接口的参数修改成图片的路径，示例如下。 + +```python +img_obj.set_src("U:/demo.png") +``` + +> **注意：** +> +> gui guider生成的代码中，每个组件都对应生成了一个style，这使得代码非常的臃肿，所以如需进阶开发，还得对其做进一步优化，比如减少不必要的style定义，比如去除不必要的try语句等。 + + + + + diff --git a/docs/Application_guide/zh/multi-media/lvgl/startup_logo.md b/docs/Application_guide/zh/multi-media/lvgl/startup_logo.md new file mode 100644 index 0000000000000000000000000000000000000000..b20f045d7801161ffe4da1d9957447bcb9a6b1dd --- /dev/null +++ b/docs/Application_guide/zh/multi-media/lvgl/startup_logo.md @@ -0,0 +1,11 @@ +# 开机LOGO + +## 概述 + +从按下开机键到GUI界面显示之间有一段时间的空白期，业务上通常采用显示开机logo的方案来填补。一个大气的开机logo界面也能为您的系统增色不少。 + +本章节将分别介绍如何使用开机logo方案。 + + + +--------------------重新设计？ \ No newline at end of file diff --git a/docs/Application_guide/zh/sidebar.yaml b/docs/Application_guide/zh/sidebar.yaml index 9d36c0e673a797202458882acaa142b9fa0ff6a2..5b06e4e4d1ff5f8a8ba5e2626ce28da03305254e 100644 --- a/docs/Application_guide/zh/sidebar.yaml +++ b/docs/Application_guide/zh/sidebar.yaml @@ -92,6 +92,29 @@ items: file: hardware/sensors/light-sensor/opt3001.md - label: 音频驱动 file: hardware/audio-driver.md +- label: 多媒体 + file: multi-media/README.md + items: + - label: GUI + file: multi-media/lvgl/README.md + items: + - label: LVGL + file: multi-media/lvgl/support/lvgl.md + items: + - label: LVGL工作流程 + file: multi-media/lvgl/lvgl_flow.md + - label: LVGL常见组件 + file: multi-media/lvgl/lvgl_control.md + - label: LVGL简单示例 + file: multi-media/lvgl/lvgl_demo.md + - label: LVGL字体库 + file: multi-media/lvgl/lvgl_fontlib.md + - label: LVGL UI工具 + file: multi-media/lvgl/lvgl_ui_tool.md + - label: LVGL应用场景 + file: multi-media/lvgl/lvgl_application_scenarios.md + - label: LVGL开发注意事项 + file: multi-media/lvgl/lvgl_notes.md - label: 网络与通信 file: network-comm/README.md items: