diff --git a/docs/CODE_OF_CONDUCT.md b/docs/CODE_OF_CONDUCT.md index c7d7eeb143..4052ad6799 100644 --- a/docs/CODE_OF_CONDUCT.md +++ b/docs/CODE_OF_CONDUCT.md @@ -34,7 +34,7 @@ This Code of Conduct applies both within project spaces and in public spaces whe ## Enforcement -Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at [atom@github.com](mailto:atom@github.com). 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. Further details of specific enforcement policies may be posted separately. +Instances of abusive, harassing, or otherwise unacceptable behavior may 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. Further details of specific enforcement policies may be posted 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. diff --git a/docs/get-started/arduino.md b/docs/get-started/arduino.md index a7fe31864a..c382b62955 100644 --- a/docs/get-started/arduino.md +++ b/docs/get-started/arduino.md @@ -14,7 +14,7 @@ For example ESP32 is a good candidate to create your UI with LVGL. ## Get the LVGL Ardunio library -LVGL can be installed via Arduino IDE Library Manager or as an .ZIP library. +LVGL can be installed via the Arduino IDE Library Manager or as a .ZIP library. It will also install [lv_exmaples](https://github.com/lvgl/lv_examples) which contains a lot of examples and demos to try LVGL. ## Set up drivers @@ -46,7 +46,7 @@ LVGL has its own configuration file called `lv_conf.h`. When LVGL is installed t ## Initialize LVGL and run an example Take a look at [LVGL_Arduino.ino](https://github.com/lvgl/lvgl/blob/master/examples/LVGL_Arduino.ino) to see how to initialize LVGL. -It also uses TFT_eSPI as driver. +TFT_eSPI is used as the display driver. In the INO file you can see how to register a display and a touch pad for LVGL and call an example. @@ -55,9 +55,9 @@ For the full list of examples see the [README of lv_examples](https://github.com ## Debugging and logging -In case of trouble there are debug information inside LVGL. +In case of trouble LVGL can display debug information. In the `LVGL_Arduino.ino` example there is `my_print` method, which allow to send this debug information to the serial interface. -To enable this feature you have to edit `lv_conf.h` file and enable logging in section `log settings`: +To enable this feature you have to edit `lv_conf.h` file and enable logging in the section `log settings`: ```c /*Log settings*/ @@ -73,5 +73,5 @@ To enable this feature you have to edit `lv_conf.h` file and enable logging in s # define LV_LOG_LEVEL LV_LOG_LEVEL_WARN ``` -After enabling log module and setting LV_LOG_LEVEL accordingly the output log is sent to the `Serial` port @ 115200 Baud rate. +After enabling the log module and setting LV_LOG_LEVEL accordingly the output log is sent to the `Serial` port @ 115200 bps. diff --git a/docs/get-started/index.md b/docs/get-started/index.md index 69b350fda9..42cbeb3c99 100644 --- a/docs/get-started/index.md +++ b/docs/get-started/index.md @@ -4,7 +4,7 @@ ``` # Get started -There are several ways to get your feet wet with LVGL. This list shows the recommended way of learning the library: +There are several ways to get your feet wet with LVGL. Here is one recommended order of documents to read and things to play with when you are learning to use LVGL: 1. Check the [Online demos](https://lvgl.io/demos) to see LVGL in action (3 minutes) 2. Read the [Introduction](https://docs.lvgl.io/latest/en/html/intro/index.html) page of the documentation (5 minutes) 3. Read the [Quick overview](https://docs.lvgl.io/latest/en/html/get-started/quick-overview.html) page of the documentation (15 minutes) diff --git a/docs/get-started/micropython.md b/docs/get-started/micropython.md index d934ad6935..cd9d937999 100644 --- a/docs/get-started/micropython.md +++ b/docs/get-started/micropython.md @@ -33,8 +33,8 @@ In Micropython it's just **`Change code` > `Run`** ! You can even run commands i ### Micropython + LVGL could be used for: - Fast prototyping GUI. -- Shorten the cycle of changing and fine-tuning the GUI. -- Model the GUI in a more abstract way by defining reusable composite objects, taking advantage of Python's language features such as Inheritance, Closures, List Comprehension, Generators, Exception Handling, Arbitrary Precision Integers and others. +- Shortening the cycle of changing and fine-tuning the GUI. +- Modelling the GUI in a more abstract way by defining reusable composite objects, taking advantage of Python's language features such as Inheritance, Closures, List Comprehension, Generators, Exception Handling, Arbitrary Precision Integers and others. - Make LVGL accessible to a larger audience. No need to know C in order to create a nice GUI on an embedded system. This goes well with [CircuitPython vision](https://learn.adafruit.com/welcome-to-circuitpython/what-is-circuitpython). CircuitPython was designed with education in mind, to make it easier for new or unexperienced users to get started with embedded development. - Creating tools to work with LVGL at a higher level (e.g. drag-and-drop designer). @@ -82,15 +82,15 @@ Micropython is ported to many platforms. One notable port is "unix", which allow ### Embedded platform -At the end, the goal is to run it all on an embedded platform. +In the end, the goal is to run it all on an embedded platform. Both Micropython and LVGL can be used on many embedded architectures, such as stm32, ESP32 etc. -You would also need display and input drivers. We have some sample drivers (ESP32+ILI9341, as well as some other examples), but most chances are you would want to create your own input/display drivers for your specific purposes. -Drivers can be implemented either in C as Micropython module, or in pure Micropython! +You would also need display and input drivers. We have some sample drivers (ESP32+ILI9341, as well as some other examples), but chances are you would want to create your own input/display drivers for your specific hardware. +Drivers can be implemented either in C as a Micropython module, or in pure Micropython! ## Where can I find more information? -- On the [Blog Post](https://blog.lvgl.io/2019-02-20/micropython-bindings) -- On `lv_micropython` [README](https://github.com/lvgl/lv_micropython) -- On `lv_binding_micropython` [README](https://github.com/lvgl/lv_binding_micropython) -- On LVGL forum (Feel free to ask anything!) -- On Micropython [docs](http://docs.micropython.org/en/latest/) and [forum](https://forum.micropython.org/) +- In this [Blog Post](https://blog.lvgl.io/2019-02-20/micropython-bindings) +- `lv_micropython` [README](https://github.com/lvgl/lv_micropython) +- `lv_binding_micropython` [README](https://github.com/lvgl/lv_binding_micropython) +- The [LVGL micropython forum](https://forum.lvgl.io/c/micropython) (Feel free to ask anything!) +- At Micropython: [docs](http://docs.micropython.org/en/latest/) and [forum](https://forum.micropython.org/) diff --git a/docs/get-started/nuttx.md b/docs/get-started/nuttx.md index 1caac46b4f..11067a9de2 100644 --- a/docs/get-started/nuttx.md +++ b/docs/get-started/nuttx.md @@ -7,50 +7,50 @@ ## What is NuttX? [NuttX](https://nuttx.apache.org/) is a mature and secure real-time operating system (RTOS) with an emphasis on technical standards compliance and small size. -It is scalable from 8-bit to 64-bit microcontroller and microprocessors. Complaint with the Portable Operating System Interface (POSIX) and the American National Standards Institute (ANSI) standards and with many Linux-like subsystems. -The best way to think about NuttX is thinking about a small Unix/Linux for microcontrollers. +It is scalable from 8-bit to 64-bit microcontrollers and microprocessors and compliant with the Portable Operating System Interface (POSIX) and the American National Standards Institute (ANSI) standards and with many Linux-like subsystems. +The best way to think about NuttX is to think of it as a small Unix/Linux for microcontrollers. ### Highlights of NuttX -- **Small** - Fits and runs within small microcontroller as small was 32KB Flash and 8KB of RAM. +- **Small** - Fits and runs in microcontrollers as small as 32KB Flash and 8KB of RAM. - **Compliant** - Strives to be as compatible as possible with POSIX and Linux. - **Versatile** - Supports many architectures (ARM, ARM Thumb, AVR, MIPS, OpenRISC, RISC-V 32-bit and 64-bit, RX65N, x86-64, Xtensa, Z80/Z180, etc). -- **Modular** - Its modular design allow developers to select only what really matters and use modules to include new features. +- **Modular** - Its modular design allows developers to select only what really matters and use modules to include new features. - **Popular** - NuttX is used by many companies around the world. Probably you already used a product with NuttX without knowing it was running NuttX. -- **Predictable** - NuttX is a preemptible Realtime kernel, then you can use it to create predictable applications for realtime control. +- **Predictable** - NuttX is a preemptible Realtime kernel, so you can use it to create predictable applications for realtime control. --- ## Why NuttX + LVGL? -Although NuttX has its own graphic library called [NX](https://cwiki.apache.org/confluence/pages/viewpage.action?pageId=139629474), LVGL is a good alternative because users could find more eyes-candy demos and reuse it from previous projects. +Although NuttX has its own graphic library called [NX](https://cwiki.apache.org/confluence/pages/viewpage.action?pageId=139629474), LVGL is a good alternative because users could find more eye-candy demos and they can reuse code from previous projects. LVGL is an [Object Oriented Component Based](https://blog.lvgl.io/2018-12-13/extend-lvgl-objects) high-level GUI library, that could fit very well for a RTOS with advanced features like NuttX. LVGL is implemented in C and its APIs are in C. ### Here are some advantages of using LVGL in NuttX -- Develop GUI in Linux first and when it is done just compile it for NuttX, nothing more, no wasting of time. -- Usually, GUI development for low level RTOS requires multiple iterations to get things right. Where each iteration consists of **`Change code` > `Build` > `Flash` > `Run`**. +- Develop GUI in Linux first and when it is done just compile it for NuttX. Nothing more, no wasting of time. +- Usually, GUI development for low level RTOS requires multiple iterations to get things right, where each iteration consists of **`Change code` > `Build` > `Flash` > `Run`**. Using LVGL, Linux and NuttX you can reduce this process and just test everything on your computer and when it is done, compile it on NuttX and that is it. ### NuttX + LVGL could be used for - GUI demos to demonstrate your board graphics capacities. - Fast prototyping GUI for MVP (Minimum Viable Product) presentation. -- Easy way to visualize sensors data directly on the board without using a computer. -- Final products GUI without touchscreen (i.e. 3D Printer Interface using Rotary Encoder to Input data). -- Final products interface with touchscren (and bells and whistles). +- visualize sensor data directly and easily on the board without using a computer. +- Final products with a GUI without a touchscreen (i.e. 3D Printer Interface using Rotary Encoder to Input data). +- Final products with a touchscreen (and all sorts of bells and whistles). --- ## How to get started with NuttX and LVGL? There are many boards in the NuttX mainline (https://github.com/apache/incubator-nuttx) with support for LVGL. -Let's to use the [STM32F429IDISCOVERY](https://www.st.com/en/evaluation-tools/32f429idiscovery.html) as example because it is a very popular board. +Let's use the [STM32F429IDISCOVERY](https://www.st.com/en/evaluation-tools/32f429idiscovery.html) as example because it is a very popular board. ### First you need to install the pre-requisite on your system -Let's to use Linux and example, for [Windows](https://acassis.wordpress.com/2018/01/10/how-to-build-nuttx-on-windows-10/) +Let's use the [Windows Subsystem for Linux](https://acassis.wordpress.com/2018/01/10/how-to-build-nuttx-on-windows-10/) ```shell $ sudo apt-get install automake bison build-essential flex gcc-arm-none-eabi gperf git libncurses5-dev libtool libusb-dev libusb-1.0.0-dev pkg-config kconfig-frontends openocd @@ -96,6 +96,6 @@ nsh> lvgldemo ## Where can I find more information? -- On the [LVGL on LPCXpresso54628](https://acassis.wordpress.com/2018/07/19/running-nuttx-on-lpcxpresso54628-om13098/) -- NuttX mailing list [Apache NuttX Mailing List](http://nuttx.incubator.apache.org/community/) +- This blog post: [LVGL on LPCXpresso54628](https://acassis.wordpress.com/2018/07/19/running-nuttx-on-lpcxpresso54628-om13098/) +- NuttX mailing list: [Apache NuttX Mailing List](http://nuttx.incubator.apache.org/community/) diff --git a/docs/get-started/pc-simulator.md b/docs/get-started/pc-simulator.md index e2db8a9c13..08392088db 100644 --- a/docs/get-started/pc-simulator.md +++ b/docs/get-started/pc-simulator.md @@ -5,13 +5,13 @@ # Simulator on PC -You can try out the LVGL **using only your PC** (i.e. without any development boards). The LVGL will run on a simulator environment on the PC where anyone can write and experiment the real LVGL applications. +You can try out LVGL **using only your PC** (i.e. without any development boards). LVGL will run on a simulator environment on the PC where anyone can write and experiment the real LVGL applications. -Simulator on the PC have the following advantages: -- Hardware independent - Write a code, run it on the PC and see the result on the PC monitor. -- Cross-platform - Any Windows, Linux or OSX PC can run the PC simulator. +Using the simulator on the PC has the following advantages: +- Hardware independent - Write code, run it on the PC and see the result on the PC monitor. +- Cross-platform - Any Windows, Linux or MacOS system can run the PC simulator. - Portability - the written code is portable, which means you can simply copy it when using an embedded hardware. -- Easy Validation - The simulator is also very useful to report bugs because it means common platform for every user. So it's a good idea to reproduce a bug in simulator and use the code snippet in the [Forum](https://forum.lvgl.io). +- Easy Validation - The simulator is also very useful to report bugs because it means common platform for every user. So it's a good idea to reproduce a bug in the simulator and use the code snippet in the [Forum](https://forum.lvgl.io). ## Select an IDE @@ -23,7 +23,7 @@ The simulator is ported to various IDEs (Integrated Development Environments). C - [VSCode with SDL driver](https://github.com/lvgl/lv_sim_vscode_sdl): Recommended on Linux and Mac - [PlatformIO with SDL driver](https://github.com/lvgl/lv_platformio): Recommended on Linux and Mac -You can use any IDEs for the development but, for simplicity, the configuration for Eclipse CDT is focused in this tutorial. +You can use any IDE for the development but, for simplicity, the configuration for Eclipse CDT is what we'll focus on in this tutorial. The following section describes the set-up guide of Eclipse CDT in more details. **Note: If you are on Windows, it's usually better to use the Visual Studio or CodeBlocks projects instead. They work out of the box without requiring extra steps.** @@ -91,8 +91,8 @@ On **Windows** you have to do two additional things: ### Compile and Run -Now you are ready to run the LVGL Graphics Library on your PC. Click on the Hammer Icon on the top menu bar to Build the project. If you have done everything right, then you will not get any errors. Note that on some systems additional steps might be required to "see" SDL 2 from Eclipse but, in most of cases the configurations in the downloaded project is enough. +Now you are ready to run LVGL on your PC. Click on the Hammer Icon on the top menu bar to Build the project. If you have done everything right, then you will not get any errors. Note that on some systems additional steps might be required to "see" SDL 2 from Eclipse but, in most of cases the configurations in the downloaded project is enough. After a success build, click on the Play button on the top menu bar to run the project. Now a window should appear in the middle of your screen. -Now everything is ready to use the LVGL in the practice or begin the development on your PC. +Now you are ready to use LVGL and begin development on your PC. diff --git a/docs/get-started/quick-overview.md b/docs/get-started/quick-overview.md index 3cbc814426..c384a71659 100644 --- a/docs/get-started/quick-overview.md +++ b/docs/get-started/quick-overview.md @@ -6,20 +6,20 @@ # Quick overview Here you can learn the most important things about LVGL. -You should read it first to get a general impression and read the detailed [Porting](/porting/index) and [Overview](/overview/index) sections after that. +You should read this first to get a general impression and read the detailed [Porting](/porting/index) and [Overview](/overview/index) sections after that. ## Get started in a simulator -Instead of porting LVGL to an embedded hardware, it's highly recommended to get started in a simulator first. +Instead of porting LVGL to embedded hardware straight away, it's highly recommended to get started in a simulator first. LVGL is ported to many IDEs to be sure you will find your favorite one. Go to the [Simulators](/get-started/pc-simulator) section to get ready-to-use projects that can be run on your PC. -This way you can save the time of porting for now and make some experience with LVGL immediately. +This way you can save the time of porting for now and get some experience with LVGL immediately. ## Add LVGL into your project -If you rather want to try LVGL on your own project follow these steps: +If you would rather try LVGL on your own project follow these steps: -- [Download](https://github.com/lvgl/lvgl/archive/master.zip) or Clone the library from GitHub with `git clone https://github.com/lvgl/lvgl.git`. +- [Download](https://github.com/lvgl/lvgl/archive/master.zip) or clone the library from GitHub with `git clone https://github.com/lvgl/lvgl.git`. - Copy the `lvgl` folder into your project. - Copy `lvgl/lv_conf_template.h` as `lv_conf.h` next to the `lvgl` folder, change the first `#if 0` to `1` to enable the file's content and set the `LV_COLOR_DEPTH` defines. - Include `lvgl/lvgl.h` in files where you need to use LVGL related functions. @@ -94,7 +94,7 @@ Every object has a parent object where it is created. For example if a label is The child object moves with the parent and if the parent is deleted the children will be deleted too. -Children can be visible only on their parent. It other words, the parts of the children out of the parent are clipped. +Children can be visible only on their parent. It other words, the parts of the children outside of the parent are clipped. A Screen is the "root" parent. You can have any number of screens. @@ -124,10 +124,10 @@ To see the full API visit the documentation of the widgets or the related header ### Events -Events are used to inform the user if something has happened with an object. +Events are used to inform the user that something has happened with an object. You can assign one or more callbacks to an object which will be called if the object is clicked, released, dragged, being deleted etc. -It should look like this: +A callback is assigned like this: ```c lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_CLICKED, NULL); /*Assign a callback to the button*/ @@ -174,11 +174,11 @@ The objects can be in a combination of the following states: - `LV_STATE_SCROLLED` Being scrolled - `LV_STATE_DISABLED` Disabled -For example, if you press an object it will automatically goes to `LV_STATE_FOCUSED` and `LV_STATE_PRESSED` state and when you release it, the `LV_STATE_PRESSED` state will be removed. +For example, if you press an object it will automatically go to `LV_STATE_FOCUSED` and `LV_STATE_PRESSED` state and when you release it, the `LV_STATE_PRESSED` state will be removed. -To check if an object is in a given state use `lv_obj_has_state(obj, LV_STATE_...)`. It will return `true` if the object "has" the given state at that moment. +To check if an object is in a given state use `lv_obj_has_state(obj, LV_STATE_...)`. It will return `true` if the object is in that state at that time. -To manually add remove the states use +To manually add or remove states use ```c lv_obj_add_state(obj, LV_STATE_...); lv_obj_clear_state(obj, LV_STATE_...); @@ -195,7 +195,7 @@ lv_style_init(&style1); lv_style_set_bg_color(&style1, lv_color_hex(0xa03080)) lv_style_set_border_width(&style1, 2)) ``` -See the full list of properties go [here](/overview/style.html#properties). +See the full list of properties [here](/overview/style.html#properties). The styles are assigned to an object's part and state. For example to *"Use this style on the slider's indicator when the slider is pressed"*: @@ -230,15 +230,15 @@ lv_obj_add_style(btn1, &style1_btn_red, 0); If a property is not set on for the current state the style with `LV_STATE_DEFAULT` will be used. If the property is not defined even in the default state a default value is used. Some properties (typically the text-related ones) can be inherited. It means if a property is not set in an object it will be searched in its parents too. -For example, you can set the font once in the screen's style and every text will inherit it by default. +For example, you can set the font once in the screen's style and all text on that screen will inherit it by default. -Local style properties also can be added to the objects. It creates a style is inside the object that is used only by the object: +Local style properties also can be added to the objects. It creates a style which resides inside the object and which is used only by the object: ```c lv_obj_set_style_bg_color(slider1, lv_color_hex(0x2080bb), LV_PART_INDICATOR | LV_STATE_PRESSED); ``` -To learn all the features of styles see the [Style overview](/overview/style) section +To learn all the features of styles see the [Style overview](/overview/style) section. ### Themes diff --git a/docs/intro/index.md b/docs/intro/index.md index 3c0d60e850..20d5cadce2 100644 --- a/docs/intro/index.md +++ b/docs/intro/index.md @@ -5,20 +5,20 @@ # Introduction -LVGL (Light and Versatile Graphics Library) is a free and open-source graphics library providing everything you need to create embedded GUI with easy-to-use graphical elements, beautiful visual effects and low memory footprint. +LVGL (Light and Versatile Graphics Library) is a free and open-source graphics library providing everything you need to create embedded GUI with easy-to-use graphical elements, beautiful visual effects and a low memory footprint. ## Key features -- Powerful building blocks such as buttons, charts, lists, sliders, images etc. +- Powerful building blocks such as buttons, charts, lists, sliders, images, etc. - Advanced graphics with animations, anti-aliasing, opacity, smooth scrolling -- Various input devices such as touchpad, mouse, keyboard, encoder etc. +- Various input devices such as touchpad, mouse, keyboard, encoder, etc. - Multi-language support with UTF-8 encoding -- Multi-display support, i.e. use more TFT, monochrome displays simultaneously -- Fully customizable graphic elements withh CSS-like styles -- Hardware independent to use with any microcontroller or display -- Scalable to operate with little memory (64 kB Flash, 16 kB RAM) -- OS, External memory and GPU supported but not required -- Single frame buffer operation even with advanced graphical effects +- Multi-display support, i.e. use multiple TFT, monochrome displays simultaneously +- Fully customizable graphic elements with CSS-like styles +- Hardware independent: use with any microcontroller or display +- Scalable: able to operate with little memory (64 kB Flash, 16 kB RAM) +- OS, external memory and GPU supported but not required +- Single frame buffer operation even with advanced graphic effects - Written in C for maximal compatibility (C++ compatible) - Simulator to start embedded GUI design on a PC without embedded hardware - Binding to MicroPython @@ -48,23 +48,23 @@ Basically, every modern controller  (which is able to drive a display) is suita structs, callbacks. -Note that the memory usage might vary depending on the architecture, compiler and build options. +Note that memory usage may vary depending on architecture, compiler and build options. ## License The LVGL project (including all repositories) is licensed under [MIT license](https://github.com/lvgl/lvgl/blob/master/LICENCE.txt). It means you can use it even in commercial projects. -It's not mandatory but we highly appreciate it if you write a few words about your project in the [My projects](https://forum.lvgl.io/c/my-projects/10) category of the Forum or a private message from [lvgl.io](https://lvgl.io/#contact). +It's not mandatory but we highly appreciate it if you write a few words about your project in the [My projects](https://forum.lvgl.io/c/my-projects/10) category of the forum or a private message to [lvgl.io](https://lvgl.io/#contact). -Although you can get LVGL for free there is a huge work behind it. It's created by a group of volunteers who made it available for you in their free time. +Although you can get LVGL for free there is a massive amount of work behind it. It's created by a group of volunteers who made it available for you in their free time. -To make the LVGL project sustainable, please consider [Contributing](/CONTRIBUTING) to the project. -You can choose from [many ways of contributions](/CONTRIBUTING) such as simply writing a tweet about you are using LVGL, fixing bugs, translating the documentation, or even becoming a maintainer. +To make the LVGL project sustainable, please consider [contributing](/CONTRIBUTING) to the project. +You can choose from [many different ways of contributing](/CONTRIBUTING) such as simply writing a tweet about you are using LVGL, fixing bugs, translating the documentation, or even becoming a maintainer. ## Repository layout -All repositories of the LVGL project are hosted n GitHub: https://github.com/lvgl +All repositories of the LVGL project are hosted on GitHub: https://github.com/lvgl -You find these repositories there: +You will find these repositories there: - [lvgl](https://github.com/lvgl/lvgl) The library itself with many [examples](https://github.com/lvgl/lvgl/blob/master/examples/). - [lv_demos](https://github.com/lvgl/lv_demos) Demos created with LVGL. - [lv_drivers](https://github.com/lvgl/lv_drivers) Display and input device drivers @@ -86,7 +86,7 @@ Tags like `vX.Y.Z` are created for every release. ### Release cycle - Bugfixes: Released on demand even weekly -- Minor releases: In every 3-4 month +- Minor releases: Every 3-4 months - Major releases: Approximatelly yearly ### Branches @@ -102,7 +102,7 @@ The core repositories have at least the following branches: The changes are recorded in [CHANGELOG.md](/CHANGELOG). ### Version support -Before v8 every minor release of major releases are supproted for 1 year. +Before v8 every minor release of major releases is supported for 1 year. From v8 every minor release is supported for 1 year. | Version | Release date | Support end | Active | @@ -116,7 +116,7 @@ From v8 every minor release is supported for 1 year. ## FAQ ### Where can I ask questions? -You can ask questions in the Forum: [https://forum.lvgl.io/](https://forum.lvgl.io/). +You can ask questions in the forum: [https://forum.lvgl.io/](https://forum.lvgl.io/). We use [GitHub issues](https://github.com/lvgl/lvgl/issues) for development related discussion. So you should use them only if your question or issue is tightly related to the development of the library. @@ -124,10 +124,10 @@ So you should use them only if your question or issue is tightly related to the ### Is my MCU/hardware supported? Every MCU which is capable of driving a display via Parallel port, SPI, RGB interface or anything else and fulfills the [Requirements](#requirements) is supported by LLVGL. -It includes: +This includes: - "Common" MCUs like STM32F, STM32H, NXP Kinetis, LPC, iMX, dsPIC33, PIC32 etc. - Bluetooth, GSM, WiFi modules like Nordic NRF and Espressif ESP32 -- Linux frame buffer like /dev/fb0 which includes Single-board computers too like Raspberry Pi +- Linux with frame buffer device such as /dev/fb0. This includes Single-board computers like the Raspberry Pi - And anything else with a strong enough MCU and a periphery to drive a display ### Is my display supported? @@ -149,11 +149,11 @@ Be sure you are calling `lv_tick_inc(x)` in an interrupt and `lv_timer_handler() Learn more in the [Tick](/porting/tick) and [Task handler](/porting/task-handler) section. -### Why the display driver is called only once? Only the upper part of the display is refreshed. +### Why is the display driver called only once? Only the upper part of the display is refreshed. Be sure you are calling `lv_disp_flush_ready(drv)` at the end of your "*display flush callback*". -### Why I see only garbage on the screen? -Probably there a bug in your display driver. Try the following code without using LVGL. You should see a square with red-blue gradient +### Why do I see only garbage on the screen? +Probably there a bug in your display driver. Try the following code without using LVGL. You should see a square with red-blue gradient. ```c #define BUF_W 20 @@ -178,7 +178,7 @@ a.y2 = a.y1 + BUF_H - 1; my_flush_cb(NULL, &a, buf); ``` -### Why I see non-sense colors on the screen? +### Why I see nonsense colors on the screen? Probably LVGL's color format is not compatible with your displays color format. Check `LV_COLOR_DEPTH` in *lv_conf.h*. If you are using 16 bit colors with SPI (or other byte-oriented interface) probably you need to set `LV_COLOR_16_SWAP  1` in *lv_conf.h*. diff --git a/docs/layouts/flex.md b/docs/layouts/flex.md index 30989d5dad..b31baaab74 100644 --- a/docs/layouts/flex.md +++ b/docs/layouts/flex.md @@ -9,11 +9,11 @@ The Flexbox (or Flex for short) is a subset of [CSS Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/). -It can arrange items into rows or columns (tracks), handle wrapping, adjust the spacing between the items and tracks, handle *grow* to make the item(s) will the remaining space with respect to min/max width and height. +It can arrange items into rows or columns (tracks), handle wrapping, adjust the spacing between the items and tracks, handle *grow* to make the item(s) fill the remaining space with respect to min/max width and height. To make an object flex container call `lv_obj_set_layout(obj, LV_LAYOUT_FLEX)`. -Note that, the flex layout needs to enabled with `LV_USE_FLEX` in `lv_conf.h`. +Note that the flex layout feature of LVGL needs to be globally enabled with `LV_USE_FLEX` in `lv_conf.h`. ## Terms - tracks: the rows or columns @@ -26,13 +26,13 @@ The available space will be distributed among items respective to the their grow ## Simple interface -With follwoing functions you can simple set a Flex layout on any parent. +With the following functions you can set a Flex layout on any parent. ### Flex flow -`lv_obj_set_flex_flow(obj, felx_flow)` +`lv_obj_set_flex_flow(obj, flex_flow)` -The possible values for `felx_flow` are: +The possible values for `flex_flow` are: - `LV_FLEX_FLOW_ROW` Place the children in a row without wrapping - `LV_FLEX_FLOW_COLUMN` Place the children in a column without wrapping - `LV_FLEX_FLOW_ROW_WRAP` Place the children in a row with wrapping @@ -45,15 +45,15 @@ The possible values for `felx_flow` are: ### Flex align To manage the placement of the children use `lv_obj_set_flex_align(obj, main_place, cross_place, track_cross_place)` -- `main_place` tells how to distribute the items in their track on the main axis. E.g. flush the items to the right on `LV_FLEX_FLOW_ROW_WRAP`. (It's called `justify-content` in CSS) -- `cross_place` tells how to distribute the items in their track on the cross axis. E.g. if the items have differetn height place them to the bottom of the track. (It's called `align-items` in CSS) -- `track_cross_place` tells how to distribute the tracks (It's called `align-content` in CSS) +- `main_place` determines how to distribute the items in their track on the main axis. E.g. flush the items to the right on `LV_FLEX_FLOW_ROW_WRAP`. (It's called `justify-content` in CSS) +- `cross_place` determines how to distribute the items in their track on the cross axis. E.g. if the items have different height place them to the bottom of the track. (It's called `align-items` in CSS) +- `track_cross_place` determines how to distribute the tracks (It's called `align-content` in CSS) The possible values are: - `LV_FLEX_ALIGN_START` means left on a horizontally and top vertically. (default) - `LV_FLEX_ALIGN_END` means right on a horizontally and bottom vertically - `LV_FLEX_ALIGN_CENTER` simply center -- `LV_FLEX_ALIGN_SPACE_EVENLY` items are distributed so that the spacing between any two items (and the space to the edges) is equal. Not applies to `track_cross_place`. +- `LV_FLEX_ALIGN_SPACE_EVENLY` items are distributed so that the spacing between any two items (and the space to the edges) is equal. Does not apply to `track_cross_place`. - `LV_FLEX_ALIGN_SPACE_AROUND` items are evenly distributed in the track with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies. Not applies to `track_cross_place`. @@ -66,7 +66,7 @@ Flex grow can be used to make one or more children fill the available space on t For example let's there is 400 px remaining space and 4 object with grow: - `A` with grow = 1 - `B` with grow = 1 -- `c` with grow = 2 +- `C` with grow = 2 `A` and `B` will have 100 px size, and `C` will have 200 px size. @@ -75,7 +75,7 @@ Flex grow can be set on a child with `lv_obj_set_flex_flow(child, value)`. `valu ## Style interface -All the Flex related values are style properties under the hood and you can use them similarly to any other style property. The following flex related style properties exist: +All the Flex-related values are style properties under the hood and you can use them similarly to any other style property. The following flex related style properties exist: - `FLEX_FLOW` - `FLEX_MAIN_PLACE` diff --git a/docs/layouts/grid.md b/docs/layouts/grid.md index 251930125b..87290185bf 100644 --- a/docs/layouts/grid.md +++ b/docs/layouts/grid.md @@ -12,9 +12,9 @@ The Grid layout is a subset of [CSS Flexbox](https://css-tricks.com/snippets/css It can arrange items into 2D "table" that has rows or columns (tracks). The item can span through multiple columns or rows. The track's size can be set in pixel, to the largest item (`LV_GRID_CONTENT`) or in "Free unit" (FR) to distribute the free space proportionally. -To make an object grid container call `lv_obj_set_layout(obj, LV_LAYOUT_GRID)`. +To make an object a grid container call `lv_obj_set_layout(obj, LV_LAYOUT_GRID)`. -Note that, the grid layout needs to enabled with `LV_USE_GRID` in `lv_conf.h`. +Note that the grid layout feature of LVGL needs to be globally enabled with `LV_USE_GRID` in `lv_conf.h`. ## Terms - tracks: the rows or columns @@ -23,7 +23,7 @@ Note that, the grid layout needs to enabled with `LV_USE_GRID` in `lv_conf.h`. ## Simple interface -With the following functions you can simple set a Grid layout on any parent. +With the following functions you can easily set a Grid layout on any parent. ### Grid descriptors @@ -42,11 +42,11 @@ Besides simple settings the size in pixel you can use two special values: - `LV_GRID_FR(X)` tell what portion of the remaining space should be used by this track. Larger value means larger space. ### Grid items -By default the children are not added to the grid but they needs to be added manually to a cell. +By default the children are not added to the grid. They need to be added manually to a cell. -To to this call `lv_obj_set_grid_cell(child, column_align, column_pos, column_span, row_align, row_pos, row_span)`. +To do this call `lv_obj_set_grid_cell(child, column_align, column_pos, column_span, row_align, row_pos, row_span)`. -`column_align` and `row_align` tells how to align the children in its cell. The possible values are: +`column_align` and `row_align` determine how to align the children in its cell. The possible values are: - `LV_GRID_ALIGN_START` means left on a horizontally and top vertically. (default) - `LV_GRID_ALIGN_END` means right on a horizontally and bottom vertically - `LV_GRID_ALIGN_CENTER` simply center @@ -87,7 +87,7 @@ All the Grid related values are style properties under the hood and you can use ## Other features ### RTL -If the base direction of the container is set the `LV_BASE_DIR_RTL` the meaning of `LV_GRID_ALIGN_START` and `LV_GRID_ALIGN_END` is swapped. I.e. `START` will mean right. +If the base direction of the container is set to `LV_BASE_DIR_RTL`, the meaning of `LV_GRID_ALIGN_START` and `LV_GRID_ALIGN_END` is swapped. I.e. `START` will mean right-most. The columns will be placed from right to left. diff --git a/docs/overview/animation.md b/docs/overview/animation.md index f25df6e97d..3c4d98078e 100644 --- a/docs/overview/animation.md +++ b/docs/overview/animation.md @@ -5,13 +5,13 @@ # Animations You can automatically change the value of a variable between a start and an end value using animations. -The animation will happen by the periodical call of an "animator" function with the corresponding value parameter. +The animation will happen by periodically calling an "animator" function with the corresponding value parameter. -The *animator* functions has the following prototype: +The *animator* functions have the following prototype: ```c void func(void * var, lv_anim_var_t value); ``` -This prototype is compatible with the majority of the *set* function of LVGL. For example `lv_obj_set_x(obj, value)` or `lv_obj_set_width(obj, value)` +This prototype is compatible with the majority of the *set* functions of LVGL. For example `lv_obj_set_x(obj, value)` or `lv_obj_set_width(obj, value)` ## Create an animation @@ -82,27 +82,27 @@ Therefore `lv_anim_start()` will delete the already existing variable-function a ## Animation path -You can determinate the path of animation. In the most simple case, it is linear, which means the current value between *start* and *end* is changed linearly. +You can determinate the path of animation. The most simple case is linear, meaning the current value between *start* and *end* is changed with fixed steps. A *path* is a function which calculates the next value to set based on the current state of the animation. Currently, there are the following built-in paths functions: - `lv_anim_path_linear` linear animation - `lv_anim_path_step` change in one step at the end - `lv_anim_path_ease_in` slow at the beginning - `lv_anim_path_ease_out` slow at the end -- `lv_anim_path_ease_in_out` slow at the beginning and end too +- `lv_anim_path_ease_in_out` slow at the beginning and at the end - `lv_anim_path_overshoot` overshoot the end value - `lv_anim_path_bounce` bounce back a little from the end value (like hitting a wall) ## Speed vs time -By default, you can set the animation time. But, in some cases, the animation speed is more practical. +By default, you set the animation time. But in some cases, setting the animation speed is more practical. The `lv_anim_speed_to_time(speed, start, end)` function calculates the required time in milliseconds to reach the end value from a start value with the given speed. -The speed is interpreted in _unit/sec_ dimension. For example, `lv_anim_speed_to_time(20,0,100)` will give 5000 milliseconds. For example, in case of `lv_obj_set_x` *unit* is pixels so *20* means *20 px/sec* speed. +The speed is interpreted in _unit/sec_ dimension. For example, `lv_anim_speed_to_time(20,0,100)` will yield 5000 milliseconds. For example, in case of `lv_obj_set_x` *unit* is pixels so *20* means *20 px/sec* speed. ## Delete animations -You can delete an animation by `lv_anim_del(var, func)` by providing the animated variable and its animator function. +You can delete an animation with `lv_anim_del(var, func)` if you provide the animated variable and its animator function. ## Examples diff --git a/docs/overview/coords.md b/docs/overview/coords.md index 077f93c2c9..95416099df 100644 --- a/docs/overview/coords.md +++ b/docs/overview/coords.md @@ -5,8 +5,8 @@ # Positions, sizes, and layouts ## Overview -Similarly to many other parts of LVGL, the concept of setting the coordinates were inspired by CSS. It doesn't mean a perfect copy of the standard but subsets of CSS were implemented (sometimes with minor adjustments). -It shorts it means: +Similarly to many other parts of LVGL, the concept of setting the coordinates was inspired by CSS. By no means a complete implementation of the standard but subsets of CSS were implemented (sometimes with minor adjustments). +In shorts this means: - the set coordinates (size, position, layouts, etc) are stored in styles - support min-width, max-width, min-height, max-height - have pixel, percentage, and "content" units @@ -15,7 +15,7 @@ It shorts it means: - a subset of flexbox and grid layouts are supported ### Units -- pixel: Simply a position in pixels. A simple integer always mean pixel. E.g. `lv_obj_set_x(btn, 10)` +- pixel: Simply a position in pixels. A simple integer always means pixel. E.g. `lv_obj_set_x(btn, 10)` - percentage: The percentage of the size of the object or its parent (depending on the property). The `lv_pct(value)` converts a value to percentage. E.g. `lv_obj_set_width(btn, lv_pct(50))` - `LV_SIZE_CONTENT`: Special value to set the width/height of an object to involve all the children. Its similar to `auto` in CSS. E.g. `lv_obj_set_width(btn, LV_SIZE_CONTENT)`. @@ -34,16 +34,16 @@ The border is drawn inside the bounding box. Inside the border LVGL keeps "paddi The outline is drawn outside of the bounding box. ### Important notes -This section describes special cases in which LVGL's behavior might look unexpected. +This section describes special cases in which LVGL's behavior might be unexpected. #### Postponed coordinate calculation -LVGL doesn't recalculate all the coordinate changes immediately to improve performance. +LVGL doesn't recalculate all the coordinate changes immediately. This is done to improve performance. Instead, the objects are marked as "dirty" and before redrawing the screen LVGL checks if there are any "dirty" objects. If so it refreshes their position, size and layout. -In other words, if you need to get the any coordinate of an object and it the coordinates were just changed LVGL's needs to be forced to recalculate to coordinates. +In other words, if you need to get the any coordinate of an object and it the coordinates were just changed LVGL's needs to be forced to recalculate the coordinates. To do this call `lv_obj_update_layout(obj)`. -The size and position might depends on the parent or layout therefor `lv_obj_update_layout` recalculates the coordinates of all objects on the screen of `obj`. +The size and position might depend on the parent or layout. Therefore `lv_obj_update_layout` recalculates the coordinates of all objects on the screen of `obj`. #### Removing styles As it's described in the [Using styles](#using-styles) section the coordinates can be set via style properties too. @@ -83,7 +83,7 @@ lv_obj_set_pos(obj, 10, 20); //Or in one function ``` By default the the x and y coordinates are measured from the top left corner of the parent's content area. -For example if the parent has 5 pixel padding on every side, the above code will place `obj` to (15, 25) because the content area starts after the padding. +For example if the parent has 5 pixels padding on every side, the above code will place `obj` at (15, 25) because the content area starts after the padding. If percentage values are calculated from the parents content area size. ```c @@ -143,7 +143,7 @@ Besides the alignments options above the following can be used to align the obje - `LV_ALIGN_OUT_RIGHT_MID` - `LV_ALIGN_OUT_RIGHT_BOTTOM` -For example to align a label above a button and center the label is horizontally: +For example to align a label above a button and center the label horizontally: ```c lv_obj_align_to(label, btn, LV_ALIGN_OUT_TOP_MID, 0, -10); ``` @@ -165,10 +165,10 @@ Percentage values are calculated based on the parent's content area size. For ex lv_obj_set_height(obj, lv_pct(100)); ``` -Size setting supports a value: `LV_SIZE_CONTENT`. It means the object's size in the respective direction will be set to involve its the children. -Note that only children on the right and bottom will be considered and children on the top and left remains cropped. This limitation makes the behavior more predictable. +Size setting supports a value: `LV_SIZE_CONTENT`. It means the object's size in the respective direction will be set to the size of its children. +Note that only children on the right and bottom will be considered and children on the top and left remain cropped. This limitation makes the behavior more predictable. -Object with `LV_OBJ_FLAG_HIDDEN` or `LV_OBJ_FLAG_FLOATING` will be ignored by `LV_SIZE_CONTENT` calculation. +Objects with `LV_OBJ_FLAG_HIDDEN` or `LV_OBJ_FLAG_FLOATING` will be ignored by the `LV_SIZE_CONTENT` calculation. The above functions set the size of the bounding box of the object but the size of the content area can be set as well. It means the object's bounding box will be larger with the paddings than the set size. ```c @@ -189,7 +189,7 @@ Under the hood the position, size and alignment properties are style properties. The above described "simple functions" hide the style related code for the sake of simplicity and set the position, size, and alignment properties in the local styles of the obejct. However, using styles as to set the coordinates has some great advantages: -- It makes easy to set the width/height/etc for several object together with ease. E.g. all make all the sliders 100x10 pixels sized. +- It makes it easy to set the width/height/etc for several objects together. E.g. make all the sliders 100x10 pixels sized. - It also makes possible to modify the values in one place. - The values can be overwritten by other styles. For example `style_btn` makes the object `100x50` by default but adding `style_full_width` overwrites only the width of the object. - The object can have different position or size in different state. E.g. 100 px wide in `LV_STATE_DEFAULT` but 120 px in `LV_STATE_PRESSED`. @@ -258,14 +258,14 @@ Translation is applied from the current position of the object. Percentage values can be used in translations as well. The percentage is relative to the size of the object (and not to the size of the parent). For example `lv_pct(50)` will move the object with half of its width/height. -The translations is applied after the layouts are calculated. Therefore, even the layouted objects' position can be translated. +The translation is applied after the layouts are calculated. Therefore, even the layouted objects' position can be translated. -The translation actually moves the object. It means it makes the scrollbars and `LV_SIZE_CONTENT` sized objects react on the position change. +The translation actually moves the object. It means it makes the scrollbars and `LV_SIZE_CONTENT` sized objects react to the position change. ## Transformation Similarly to the position the size can be changed relative to the current size as well. -The transformed width and height is added on both sides of the object. That is 10 px transformed width makes the object 2x10 pixel wider. +The transformed width and height are added on both sides of the object. This means 10 px transformed width makes the object 2x10 pixel wider. Unlike position translation, the size transformation doesn't make the object "really" larger. In other words scrollbars, layouts, `LV_SIZE_CONTENT` will not consider the transformed size. Hence size transformation if "only" a visual effect. diff --git a/docs/overview/display.md b/docs/overview/display.md index 1e1e0adbfa..9664911845 100644 --- a/docs/overview/display.md +++ b/docs/overview/display.md @@ -22,16 +22,16 @@ Why would you want multi-display support? Here are some examples: - Have two large TFT displays: one for a customer and one for the shop assistant. ### Using only one display -Using more displays can be useful, but in most cases, it's not required. Therefore, the whole concept of multi-display is completely hidden if you register only one display. -By default, the lastly created (the only one) display is used as default. +Using more displays can be useful but in most cases it's not required. Therefore, the whole concept of multi-display is completely hidden if you register only one display. +By default, the lastly created (and only) display is used. -`lv_scr_act()`, `lv_scr_load(scr)`, `lv_layer_top()`, `lv_layer_sys()`, `LV_HOR_RES` and `LV_VER_RES` are always applied on the lastly created (default) screen. +`lv_scr_act()`, `lv_scr_load(scr)`, `lv_layer_top()`, `lv_layer_sys()`, `LV_HOR_RES` and `LV_VER_RES` are always applied on the most recently created (default) screen. If you pass `NULL` as `disp` parameter to display related function, usually the default display will be used. E.g. `lv_disp_trig_activity(NULL)` will trigger a user activity on the default screen. (See below in [Inactivity](#Inactivity)). ### Mirror display -To mirror the image of the display to another display, you don't need to use the multi-display support. Just transfer the buffer received in `drv.flush_cb` to another display too. +To mirror the image of the display to another display, you don't need to use the multi-display support. Just transfer the buffer received in `drv.flush_cb` to the other display too. ### Split image You can create a larger display from smaller ones. You can create it as below: @@ -51,7 +51,7 @@ Be sure not to confuse displays and screens: Screens can be considered the highest level containers which have no parent. The screen's size is always equal to its display and size their position is (0;0). Therefore, the screens coordinates can't be changed, i.e. `lv_obj_set_pos()`, `lv_obj_set_size()` or similar functions can't be used on screens. -A screen can be created from any object type but, the two most typical types are the [Base object](/widgets/obj) and the [Image](/widgets/core/img) (to create a wallpaper). +A screen can be created from any object type but the two most typical types are the [Base object](/widgets/obj) and the [Image](/widgets/core/img) (to create a wallpaper). To create a screen, use `lv_obj_t * scr = lv__create(NULL, copy)`. `copy` can be an other screen to copy it. @@ -64,10 +64,10 @@ Screens can be deleted with `lv_obj_del(scr)`, but ensure that you do not delete Usually, the opacity of the screen is `LV_OPA_COVER` to provide a solid background for its children. If it's not the case (opacity < 100%) the display's background color or image will be visible. See the [Display background](#display-background) section for more details. If the display's background opacity is also not `LV_OPA_COVER` LVGL has no solid background to draw. -This configuration (transparent screen ans display) could be used to create for example OSD menus where a video is played to lower layer, and menu is created on an upper layer. +This configuration (transparent screen and display) could be used to create for example OSD menus where a video is played on a lower layer, and a menu is overlayed on an upper layer. -To handle transparent displays special (slower) color mixing algorithms needs to be used by LVGL so this feature needs to enabled with `LV_COLOR_SCREEN_TRANSP` n `lv_conf.h`. -As this mode operates on the Alpha channel of the pixels `LV_COLOR_DEPTH = 32` is also required. The Alpha channel of 32-bit colors will be 0 where there are no objects and will be 255 where there are solid objects. +To handle transparent displays special (slower) color mixing algorithms need to be used by LVGL so this feature needs to enabled with `LV_COLOR_SCREEN_TRANSP` in `lv_conf.h`. +As this mode operates on the Alpha channel of the pixels `LV_COLOR_DEPTH = 32` is also required. The Alpha channel of 32-bit colors will be 0 where there are no objects and 255 where there are solid objects. In summary, to enable transparent screen and displays to create OSD menu-like UIs: - Enable `LV_COLOR_SCREEN_TRANSP` in `lv_conf.h` @@ -89,8 +89,8 @@ Every display has background color, a background image and background opacity pr Background color is a simple color to fill the display. It can be adjusted with `lv_disp_set_bg_color(disp, color)`; -Background image is path to file or pointer to an `lv_img_dsc_t` variable (converted image) to be used as wallpaper. It can be set with `lv_disp_set_bg_color(disp, &my_img)`; -If the background image is set (not `NULL`) the background won't filled with `bg_color`. +Background image is a path to a file or a pointer to an `lv_img_dsc_t` variable (converted image) to be used as wallpaper. It can be set with `lv_disp_set_bg_color(disp, &my_img)`; +If the background image is set (not `NULL`) the background won't be filled with `bg_color`. The opacity of the background color or image can be adjusted with `lv_disp_set_bg_opa(disp, opa)`. diff --git a/docs/overview/drawing.md b/docs/overview/drawing.md index 74d823ad86..cf85bdbf16 100644 --- a/docs/overview/drawing.md +++ b/docs/overview/drawing.md @@ -8,7 +8,7 @@ With LVGL, you don't need to draw anything manually. Just create objects (like b However, it might be useful to have a basic understanding of how drawing happens in LVGL to add customization, make it easier to find bugs or just out of curiosity. -The basic concept is to not draw directly to the screen, but draw to an internal draw buffer first. When drawing (rendering) is ready copy that buffer to the screen. +The basic concept is to not draw directly to the screen, but draw to an internal draw buffer first. When drawing (rendering) is ready, that buffer is copied to the screen. The draw buffer can be smaller than the screen's size. LVGL will simply render in "tiles" that fit into the given draw buffer. @@ -17,7 +17,7 @@ This approach has two main advantages compared to directly drawing to the screen 2. It's faster to modify a buffer in internal RAM and finally write one pixel only once than reading/writing the display directly on each pixel access. (e.g. via a display controller with SPI interface). -Note that, this concept is different from "traditional" double buffering where there are 2 screen sized frame buffers: +Note that this concept is different from "traditional" double buffering where there are 2 screen sized frame buffers: one holds the current image to show on the display, and rendering happens to the other (inactive) frame buffer, and they are swapped when the rendering is finished. The main difference is that with LVGL you don't have to store 2 frame buffers (which usually requires external RAM) but only smaller draw buffer(s) that can easily fit into the internal RAM too. @@ -27,7 +27,7 @@ The main difference is that with LVGL you don't have to store 2 frame buffers (w Be sure to get familiar with the [Buffering modes of LVGL](/porting/display) first. LVGL refreshes the screen in the following steps: -1. Something happens on the UI which requires redrawing. For example, a button is pressed, a chart is changed or an animation happened, etc. +1. Something happens on the UI which requires redrawing. For example, a button is pressed, a chart is changed, an animation happened, etc. 2. LVGL saves the changed object's old and new area into a buffer, called an *Invalid area buffer*. For optimization, in some cases, objects are not added to the buffer: - Hidden objects are not added. - Objects completely out of their parent are not added. @@ -42,7 +42,7 @@ LVGL refreshes the screen in the following steps: - Do the same with all the joined areas. When an area is redrawn, the library searches the top most object which covers that area, and starts drawing from that object. -For example, if a button's label has changed, the library will see that it's enough to draw the button under the text, and it's not required to draw the screen under the button too. +For example, if a button's label has changed, the library will see that it's enough to draw the button under the text, and that it's not required to draw the screen under the button too. The difference between buffering modes regarding the drawing mechanism is the following: 1. **One buffer** - LVGL needs to wait for `lv_disp_flush_ready()` (called from `flush_cb`) before starting to redraw the next part. @@ -51,18 +51,18 @@ The difference between buffering modes regarding the drawing mechanism is the fo ## Masking *Masking* is the basic concept of LVGL's draw engine. -To use LVGL it's not required to know about the mechanisms described here, you might find interesting to know how drawing works under hood. -Knowing about mask comes in handy if you want to customize drawing. +To use LVGL it's not required to know about the mechanisms described here, but you might find interesting to know how drawing works under hood. +Knowing about masking comes in handy if you want to customize drawing. To learn masking let's learn the steps of drawing first. LVGL performs the following steps to render any shape, image or text. It can be considered as a drawing pipeline. -1. **Prepare the draw descriptors** Create a draw descriptor from an object's styles (e.g. `lv_draw_rect_dsc_t`). It tells the parameters of drawing, for example the colors, widths, opacity, fonts, radius, etc. +1. **Prepare the draw descriptors** Create a draw descriptor from an object's styles (e.g. `lv_draw_rect_dsc_t`). This gives us the parameters for drawing, for example the colors, widths, opacity, fonts, radius, etc. 2. **Call the draw function** Call the draw function with the draw descriptor and some other parameters (e.g. `lv_draw_rect()`). It renders the primitive shape to the current draw buffer. 3. **Create masks** If the shape is very simple and doesn't require masks go to #5. Else create the required masks (e.g. a rounded rectangle mask) 4. **Calculate all the added mask**. It creates 0..255 values into a *mask buffer* with the "shape" of the created masks. E.g. in case of a "line mask" according to the parameters of the mask, keep one side of the buffer as it is (255 by default) and set the rest to 0 to indicate that this side should be removed. -5. **Blend a color or image** During blending masks (make some pixels transparent or opaque), blending modes (additive, subtractive, etc), opacity are handled. +5. **Blend a color or image** During blending masks (make some pixels transparent or opaque), blending modes (additive, subtractive, etc) and opacity are handled. LVGL has the following built-in mask types which can be calculated and applied real-time: - `LV_DRAW_MASK_TYPE_LINE` Removes a side from a line (top, bottom, left or right). `lv_draw_line` uses 4 of it. @@ -83,23 +83,23 @@ Masks are used the create almost every basic primitives: ## Hook drawing Although widgets can be very well customized by styles there might be cases when something really custom is required. -To ensure a great level of flexibility LVGL sends a lot events during drawing with parameters that tells what LVGL is about to draw. +To ensure a great level of flexibility LVGL sends a lot events during drawing with parameters that tell what LVGL is about to draw. Some fields of these parameters can be modified to draw something else or any custom drawing can be added manually. A good use case for it is the [Button matrix](/widgets/core/btnmatrix) widget. By default its buttons can be styled in different states but you can't style the buttons one by one. -However, an event is sent for ever button and you can tell LVGL for example to use different colors on a specific buttons or manually draw an image on an some buttons. +However, an event is sent for every button and you can for example tell LVGL to use different colors on a specific button or to manually draw an image on some buttons. -Below each related events are described in detail. +Below each of these events are described in detail. ### Main drawing These events are related to the actual drawing of the object. E.g. drawing of buttons, texts, etc happens here. -`lv_event_get_clip_area(event)` can be used to get the current clip area. The clip area is required in draw functions to make them draw only on limited area. +`lv_event_get_clip_area(event)` can be used to get the current clip area. The clip area is required in draw functions to make them draw only on a limited area. #### LV_EVENT_DRAW_MAIN_BEGIN -Sent before starting to draw an object. It's a good place to add masks manually. E.g. add a line mask that "removes" the right side of an object. +Sent before starting to draw an object. This is a good place to add masks manually. E.g. add a line mask that "removes" the right side of an object. #### LV_EVENT_DRAW_MAIN @@ -122,7 +122,7 @@ Sent before starting the post draw phase. Masks can be added here too to mask ou #### LV_EVENT_DRAW_POST -The actual drawing should happens here. +The actual drawing should happen here. #### LV_EVENT_DRAW_POST_END @@ -131,7 +131,7 @@ Called when post drawing has finished. If the masks were not removed in `LV_EVEN ### Part drawing When LVGL draws a part of an object (e.g. a slider's indicator, a table's cell or a button matrix's button) it sends events before and after drawing that part with some context of the drawing. -It allows changing the parts on a very low level with masks, extra drawing, or changing the parameters the LVGL is planning to use for drawing. +It allows changing the parts on a very low level with masks, extra drawing, or changing the parameters that LVGL is planning to use for drawing. In these events an `lv_obj_draw_part_t` structure is used to describe the context of the drawing. Not all fields are set for every part and widget. To see which fields are set for a widget see the widget's documentation. @@ -165,11 +165,11 @@ const void * sub_part_ptr; // A pointer the identifies something in the #### LV_EVENT_DRAW_PART_BEGIN -Start the drawing of a part. It's good place to modify the draw descriptors (e.g. `rect_dsc`), or add masks. +Start the drawing of a part. This is a good place to modify the draw descriptors (e.g. `rect_dsc`), or add masks. #### LV_EVENT_DRAW_PART_END -Finish the drawing of a part. It's a good place to draw extra content on the part, or remove the masks added in `LV_EVENT_DRAW_PART_BEGIN`. +Finish the drawing of a part. This is a good place to draw extra content on the part, or remove the masks added in `LV_EVENT_DRAW_PART_BEGIN`. ### Others @@ -180,22 +180,22 @@ This event is used to check whether an object fully covers an area or not. `lv_event_get_cover_area(event)` returns an pointer to an area to check and `lv_event_set_cover_res(event, res)` can be used to set one of these results: - `LV_COVER_RES_COVER` the areas is fully covered by the object - `LV_COVER_RES_NOT_COVER` the areas is not covered by the object -- `LV_COVER_RES_MASKED` there is a mask on the object so it can not covert the area +- `LV_COVER_RES_MASKED` there is a mask on the object so it can not cover the area -Here are some cases why can't an object fully cover an area: -- It's simply not fully on the that area -- It has radius +Here are some reasons why an object would be unable to fully cover an area: +- It's simply not fully in area +- It has a radius - It has not 100% background opacity - It's an ARGB or chroma keyed image -- It has not normal blending mode. In this case LVGL needs to know the colors under the object to make the blending properly +- It does not have normal blending mode. In this case LVGL needs to know the colors under the object to do the blending properly - It's a text, etc -In short if for any reason the the area below the object is visible than it doesn't cover that area. +In short if for any reason the area below the object is visible than it doesn't cover that area. Before sending this event LVGL checks if at least the widget's coordinates fully cover the area or not. If not the event is not called. You need to check only the drawing you have added. The existing properties known by widget are handled in the widget's internal events. -E.g. if a widget has > 0 radius it might not cover an area but you need to handle `radius` only if you will modify it and widget can't know about it. +E.g. if a widget has > 0 radius it might not cover an area but you need to handle `radius` only if you will modify it and the widget can't know about it. #### LV_EVENT_REFR_EXT_DRAW_SIZE diff --git a/docs/overview/event.md b/docs/overview/event.md index b2919914fb..51aea84daf 100644 --- a/docs/overview/event.md +++ b/docs/overview/event.md @@ -4,11 +4,11 @@ ``` # Events -Events are triggered in LVGL when something happens which might be interesting to the user, e.g. if an object: +Events are triggered in LVGL when something happens which might be interesting to the user, e.g. when an object - is clicked - is scrolled -- its value has changed -- redrawn, etc. +- has its value changed +- is redrawn, etc. ## Add events to the object @@ -76,10 +76,10 @@ The following event codes exist: - `LV_EVENT_SHORT_CLICKED` The object was pressed for a short period of time, then released it. Not called if scrolled. - `LV_EVENT_LONG_PRESSED` Object has been pressed for at least the `long_press_time` specified in the input device driver. Not called if scrolled. - `LV_EVENT_LONG_PRESSED_REPEAT` Called after `long_press_time` in every `long_press_repeat_time` ms. Not called if scrolled. -- `LV_EVENT_CLICKED` Called on release if the object not scrolled (regardless to long press) -- `LV_EVENT_RELEASED` Called in every cases when the object has been released +- `LV_EVENT_CLICKED` Called on release if the object did not scroll (regardless of long press) +- `LV_EVENT_RELEASED` Called in every case when the object has been released - `LV_EVENT_SCROLL_BEGIN` Scrolling begins. The event paramter is `NULL` or an `lv_anim_t *` with the scroll animation descriptor to modify if required. -- `LV_EVENT_SCROLL_END` Scrolling ends +- `LV_EVENT_SCROLL_END` Scrolling ends. - `LV_EVENT_SCROLL` The object was scrolled - `LV_EVENT_GESTURE` A gesture is detected. Get the gesture with `lv_indev_get_gesture_dir(lv_indev_get_act());` - `LV_EVENT_KEY` A key is sent to the object. Get the key with `lv_indev_get_key(lv_indev_get_act());` @@ -126,7 +126,7 @@ And can be sent to any object with `lv_event_send(obj, MY_EVENT_1, &some_data)` To manually send events to an object, use `lv_event_send(obj, &some_data)`. -For example, it can be used to manually close a message box by simulating a button press (although there are simpler ways of doing this): +For example, this can be used to manually close a message box by simulating a button press (although there are simpler ways to do this): ```c /*Simulate the press of the first button (indexes start from zero)*/ uint32_t btn_id = 0; @@ -143,7 +143,7 @@ lv_event_send(mbox, LV_EVENT_VALUE_CHANGED, &btn_id); ## Fields of lv_event_t -`lv_event_t` is the only parameter passed to event callback and it contains all the data about the event. The following values can be get from it: +`lv_event_t` is the only parameter passed to event callback and it contains all the data about the event. The following values can be gotten from it: - `lv_event_get_code(e)` get the event code - `lv_event_get_target(e)` get the object to which the event is sent - `lv_event_get_original_target(e)` get the object to which the event is sent originally sent (different from `lv_event_get_target` if [event bubbling](#event-bubbling) is enabled) diff --git a/docs/overview/file-system.md b/docs/overview/file-system.md index 58ab74c56c..dfebd5b4d1 100644 --- a/docs/overview/file-system.md +++ b/docs/overview/file-system.md @@ -4,7 +4,7 @@ ``` # File system -LVGL has a 'File system' abstraction module that enables you to attach any type of file systems. +LVGL has a 'File system' abstraction module that enables you to attach any type of file system. The file system is identified by a drive letter. For example, if the SD card is associated with the letter `'S'`, a file can be reached like `"S:path/to/file.txt"`. diff --git a/docs/overview/font.md b/docs/overview/font.md index 3a95281c57..a44cad9286 100644 --- a/docs/overview/font.md +++ b/docs/overview/font.md @@ -5,7 +5,7 @@ # Fonts In LVGL fonts are collections of bitmaps and other information required to render the images of the letters (glyph). -A font is stored in a `lv_font_t` variable and can be set in style's *text_font* field. For example: +A font is stored in a `lv_font_t` variable and can be set in a style's *text_font* field. For example: ```c lv_style_set_text_font(&my_style, LV_STATE_DEFAULT, &lv_font_montserrat_28); /*Set a larger font*/ ``` @@ -13,7 +13,7 @@ lv_style_set_text_font(&my_style, LV_STATE_DEFAULT, &lv_font_montserrat_28); /* The fonts have a **bpp (bits per pixel)** property. It shows how many bits are used to describe a pixel in the font. The value stored for a pixel determines the pixel's opacity. This way, with higher *bpp*, the edges of the letter can be smoother. The possible *bpp* values are 1, 2, 4 and 8 (higher value means better quality). -The *bpp* also affects the required memory size to store the font. For example, *bpp = 4* makes the font nearly 4 times greater compared to *bpp = 1*. +The *bpp* also affects the required memory size to store the font. For example, *bpp = 4* makes the font nearly 4 times larger compared to *bpp = 1*. ## Unicode support @@ -32,7 +32,7 @@ If all works well, a ✓ character should be displayed. There are several built-in fonts in different sizes, which can be enabled in `lv_conf.h` by *LV_FONT_...* defines. ### Normal fonts -Containing all the ASCII characters, the degree symbol (U+00B0), the bullet symbol (U+2022) and the build in symbols (see below). +Containing all the ASCII characters, the degree symbol (U+00B0), the bullet symbol (U+2022) and the built-in symbols (see below). - `LV_FONT_MONTSERRAT_12` 12 px font - `LV_FONT_MONTSERRAT_14` 14 px font - `LV_FONT_MONTSERRAT_16` 16 px font @@ -56,15 +56,15 @@ Containing all the ASCII characters, the degree symbol (U+00B0), the bullet symb ### Special fonts - `LV_FONT_MONTSERRAT_12_SUBPX` Same as normal 12 px font but with [subpixel rendering](#subpixel-rendering) - `LV_FONT_MONTSERRAT_28_COMPRESSED` Same as normal 28 px font but [compressed font](#compress-fonts) with 3 bpp -- `LV_FONT_DEJAVU_16_PERSIAN_HEBREW` 16 px font with normal range + Hebrew, Arabic, Perisan letters and all their forms +- `LV_FONT_DEJAVU_16_PERSIAN_HEBREW` 16 px font with normal range + Hebrew, Arabic, Persian letters and all their forms - `LV_FONT_SIMSUN_16_CJK`16 px font with normal range + 1000 most common CJK radicals - `LV_FONT_UNSCII_8` 8 px pixel perfect font with only ASCII characters - `LV_FONT_UNSCII_16` 16 px pixel perfect font with only ASCII characters -The built-in fonts are **global variables** with names like `lv_font_montserrat_16` for 16 px hight font. To use them in a style, just add a pointer to a font variable like shown above. +The built-in fonts are **global variables** with names like `lv_font_montserrat_16` for a 16 px hight font. To use them in a style, just add a pointer to a font variable like shown above. -The built-in fonts have *bpp = 4*, contains the ASCII characters and uses the [Montserrat](https://fonts.google.com/specimen/Montserrat) font. +The built-in fonts with *bpp = 4* contain the ASCII characters and use the [Montserrat](https://fonts.google.com/specimen/Montserrat) font. In addition to the ASCII range, the following symbols are also added to the built-in fonts from the [FontAwesome](https://fontawesome.com/) font. @@ -94,7 +94,7 @@ LVGL not only supports RTL texts but supports mixed (a.k.a. bidirectional, BiDi) ![](/misc/bidi.png "Bidirectional text examples") -The BiDi support can be enabled by `LV_USE_BIDI` in *lv_conf.h* +BiDi support is enabled by `LV_USE_BIDI` in *lv_conf.h* All texts have a base direction (LTR or RTL) which determines some rendering rules and the default alignment of the text (Left or Right). However, in LVGL, base direction is applied not only for labels. It's a general property which can be set for every object. @@ -125,32 +125,31 @@ A different form of the same letter needs to be used if it isolated, start, midd LVGL supports to apply these rules if `LV_USE_ARABIC_PERSIAN_CHARS` is enabled. However, there some limitations: -- Only displaying texts is supported (e.g. on labels), text inputs (e.g. text area) doesn't support this feature -- Static text (i.e. const) are not processed. E.g. texts set by `lv_label_set_text()` will "Arabic processed" but `lv_lable_set_text_static()` won't. +- Only displaying texts is supported (e.g. on labels), text inputs (e.g. text area) don't support this feature. +- Static text (i.e. const) is not processed. E.g. texts set by `lv_label_set_text()` will be "Arabic processed" but `lv_lable_set_text_static()` won't. - Text get functions (e.g. `lv_label_get_text()`) will return the processed text. ### Subpixel rendering -Subpixel rendering means to triple the horizontal resolution by rendering on Red, Green and Blue channel instead of pixel level. It takes advantage of the position of physical color channels of each pixel. - It results in higher quality letter anti-aliasing. Lear more [here](https://en.wikipedia.org/wiki/Subpixel_rendering). +Subpixel rendering allows for tripling the horizontal resolution by rendering on Red, Green and Blue channel instead of pixel level. This takes advantage of the position of physical color channels of each pixel, resulting in higher quality letter anti-aliasing. Learn more [here](https://en.wikipedia.org/wiki/Subpixel_rendering). -Subpixel rendering requires to generate the fonts with special settings: +For subpixel rendering the fonts need to be generated with special settings: - In the online converter tick the `Subpixel` box - In the command line tool use `--lcd` flag. Note that the generated font needs about 3 times more memory. Subpixel rendering works only if the color channels of the pixels have a horizontal layout. That is the R, G, B channels are next each other and not above each other. -The order of color channels also needs to match with the library settings. By default the LVGL assumes `RGB` order, however it can be swapped by setting `LV_SUBPX_BGR 1` in *lv_conf.h*. +The order of color channels also needs to match with the library settings. By default LVGL assumes `RGB` order, however this can be swapped by setting `LV_SUBPX_BGR 1` in *lv_conf.h*. ### Compress fonts The bitmaps of the fonts can be compressed by - ticking the `Compressed` check box in the online converter -- not passing `--no-compress` flag to the offline converter (applies compression by default) +- not passing `--no-compress` flag to the offline converter (compression is applied by default) The compression is more effective with larger fonts and higher bpp. However, it's about 30% slower to render the compressed fonts. Therefore it's recommended to compress only the largest fonts of user interface, because - they need the most memory - they can be compressed better -- and probably they are used less frequently then the medium sized fonts. (so performance cost is smaller) +- and probably they are used less frequently then the medium sized fonts, so the performance cost is smaller. ## Add new font @@ -158,14 +157,14 @@ There are several ways to add a new font to your project: 1. The simplest method is to use the [Online font converter](https://lvgl.io/tools/fontconverter). Just set the parameters, click the *Convert* button, copy the font to your project and use it. **Be sure to carefully read the steps provided on that site or you will get an error while converting.** 2. Use the [Offline font converter](https://github.com/lvgl/lv_font_conv). (Requires Node.js to be installed) 3. If you want to create something like the built-in fonts (Roboto font and symbols) but in different size and/or ranges, you can use the `built_in_font_gen.py` script in `lvgl/scripts/built_in_font` folder. -(It requires Python and `lv_font_conv` to be installed) +(This requires Python and `lv_font_conv` to be installed) To declare the font in a file, use `LV_FONT_DECLARE(my_font_name)`. To make the fonts globally available (like the builtin fonts), add them to `LV_FONT_CUSTOM_DECLARE` in *lv_conf.h*. ## Add new symbols -The built-in symbols are created from [FontAwesome](https://fontawesome.com/) font. +The built-in symbols are created from the [FontAwesome](https://fontawesome.com/) font. 1. Search symbol on [https://fontawesome.com](https://fontawesome.com). For example the [USB symbol](https://fontawesome.com/icons/usb?style=brands). Copy it's Unicode ID which is `0xf287` in this case. 2. Open the [Online font converter](https://lvgl.io/tools/fontconverter). Add Add [FontAwesome.woff](https://lvgl.io/assets/others/FontAwesome5-Solid+Brands+Regular.woff). . @@ -175,13 +174,13 @@ The built-in symbols are created from [FontAwesome](https://fontawesome.com/) fo 6. Declare the font using `extern lv_font_t my_font_name;` or simply `LV_FONT_DECLARE(my_font_name);`. **Using the symbol** -1. Convert the Unicode value to UTF8. You can do it e.g on [this site](http://www.ltg.ed.ac.uk/~richard/utf-8.cgi?input=f287&mode=hex). For `0xf287` the *Hex UTF-8 bytes* are `EF 8A 87`. +1. Convert the Unicode value to UTF8, for example on [this site](http://www.ltg.ed.ac.uk/~richard/utf-8.cgi?input=f287&mode=hex). For `0xf287` the *Hex UTF-8 bytes* are `EF 8A 87`. 2. Create a `define` from the UTF8 values: `#define MY_USB_SYMBOL "\xEF\x8A\x87"` 3. Create a label and set the text. Eg. `lv_label_set_text(label, MY_USB_SYMBOL)` Note - `lv_label_set_text(label, MY_USB_SYMBOL)` searches for this symbol in the font defined in `style.text.font` properties. To use the symbol you may need to change it. Eg ` style.text.font = my_font_name` -## Load font in run-time +## Load font at run-time `lv_font_load` can be used to load a font from a file. The font to load needs to have a special binary format. (Not TTF or WOFF). Use [lv_font_conv](https://github.com/lvgl/lv_font_conv/) with `--format bin` option to generate an LVGL compatible font file. @@ -202,7 +201,7 @@ lv_font_free(my_font); ## Add a new font engine LVGL's font interface is designed to be very flexible. -You don't need to use LVGL's internal font engine but, you can add your own. +But even so you don't need to use LVGL's internal font engine: you can add your own. For example, use [FreeType](https://www.freetype.org/) to real-time render glyphs from TTF fonts or use an external flash to store the font's bitmap and read them when the library needs them. A ready to use FreeType can be found in [lv_freetype](https://github.com/lvgl/lv_lib_freetype) repository. diff --git a/docs/overview/image.md b/docs/overview/image.md index 305787d2cd..e9bf83bda0 100644 --- a/docs/overview/image.md +++ b/docs/overview/image.md @@ -12,7 +12,7 @@ You can store images in two places - as a file ### Variables -The images stored internally in a variable is composed mainly of an `lv_img_dsc_t` structure with the following fields: +The images stored internally in a variable are composed mainly of an `lv_img_dsc_t` structure with the following fields: - **header** - *cf* Color format. See [below](#color-format) - *w* width in pixels (<= 2048) @@ -27,7 +27,7 @@ These are usually stored within a project as C files. They are linked into the r ### Files To deal with files you need to add a *Drive* to LVGL. In short, a *Drive* is a collection of functions (*open*, *read*, *close*, etc.) registered in LVGL to make file operations. You can add an interface to a standard file system (FAT32 on SD card) or you create your simple file system to read data from an SPI Flash memory. -In every case, a *Drive* is just an abstraction to read and/or write data to a memory. +In every case, a *Drive* is just an abstraction to read and/or write data to memory. See the [File system](/overview/file-system) section to learn more. Images stored as files are not linked into the resulting executable, and must be read to RAM before being drawn. As a result, they are not as resource-friendly as variable images. However, they are easier to replace without needing to recompile the main program. @@ -58,10 +58,10 @@ For 8-bit color depth: - Byte 2: Alpha byte (only with LV_IMG_CF_TRUE_COLOR_ALPHA) -You can store images in a *Raw* format to indicate that, it's not a built-in color format and an external [Image decoder](#image-decoder) needs to be used to decode the image. +You can store images in a *Raw* format to indicate that it's not encoded with one of the built-in color formats and an external [Image decoder](#image-decoder) needs to be used to decode the image. - **LV_IMG_CF_RAW** Indicates a basic raw image (e.g. a PNG or JPG image). - **LV_IMG_CF_RAW_ALPHA** Indicates that the image has alpha and an alpha byte is added for every pixel. -- **LV_IMG_CF_RAW_CHROME_KEYED** Indicates that the image is chrome keyed as described in `LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED` above. +- **LV_IMG_CF_RAW_CHROME_KEYED** Indicates that the image is chroma-keyed as described in `LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED` above. ## Add and use images @@ -138,21 +138,21 @@ The image decoder consists of 4 callbacks: - **read** if *open* didn't fully open the image this function should give some decoded data (max 1 line) from a given position. - **close** close the opened image, free the allocated resources. -You can add any number of image decoders. When an image needs to be drawn, the library will try all the registered image decoder until finding one which can open the image, i.e. knowing that format. +You can add any number of image decoders. When an image needs to be drawn, the library will try all the registered image decoders until it finds one which can open the image, i.e. one which knows that format. The `LV_IMG_CF_TRUE_COLOR_...`, `LV_IMG_INDEXED_...` and `LV_IMG_ALPHA_...` formats (essentially, all non-`RAW` formats) are understood by the built-in decoder. ### Custom image formats -The easiest way to create a custom image is to use the online image converter and set `Raw`, `Raw with alpha` or `Raw with chrome keyed` format. It will just take every byte of the binary file you uploaded and write it as the image "bitmap". You then need to attach an image decoder that will parse that bitmap and generate the real, renderable bitmap. +The easiest way to create a custom image is to use the online image converter and set `Raw`, `Raw with alpha` or `Raw with chroma-keyed` format. It will just take every byte of the binary file you uploaded and write it as the image "bitmap". You then need to attach an image decoder that will parse that bitmap and generate the real, renderable bitmap. `header.cf` will be `LV_IMG_CF_RAW`, `LV_IMG_CF_RAW_ALPHA` or `LV_IMG_CF_RAW_CHROME_KEYED` accordingly. You should choose the correct format according to your needs: fully opaque image, use alpha channel or use chroma keying. After decoding, the *raw* formats are considered *True color* by the library. In other words, the image decoder must decode the *Raw* images to *True color* according to the format described in [#color-formats](Color formats) section. If you want to create a custom image, you should use `LV_IMG_CF_USER_ENCODED_0..7` color formats. However, the library can draw the images only in *True color* format (or *Raw* but finally it's supposed to be in *True color* format). -So the `LV_IMG_CF_USER_ENCODED_...` formats are not known by the library, therefore, they should be decoded to one of the known formats from [#color-formats](Color formats) section. -It's possible to decode the image to a non-true color format first, for example, `LV_IMG_INDEXED_4BITS`, and then call the built-in decoder functions to convert it to *True color*. +The `LV_IMG_CF_USER_ENCODED_...` formats are not known by the library and therefore they should be decoded to one of the known formats from [#color-formats](Color formats) section. +It's possible to decode the image to a non-true color format first (for example: `LV_IMG_INDEXED_4BITS`) and then call the built-in decoder functions to convert it to *True color*. With *User encoded* formats, the color format in the open function (`dsc->header.cf`) should be changed according to the new format. @@ -256,11 +256,11 @@ So in summary: - In `decoder_open`, you should try to open the image source pointed by `dsc->src`. Its type is already in `dsc->src_type == LV_IMG_SRC_FILE/VARIABLE`. If this format/type is not supported by the decoder, return `LV_RES_INV`. However, if you can open the image, a pointer to the decoded *True color* image should be set in `dsc->img_data`. -If the format is known but, you don't want to decode while image (e.g. no memory for it) set `dsc->img_data = NULL` to call `read_line` to get the pixels. +If the format is known but you don't want to decode the entire image (e.g. no memory for it) set `dsc->img_data = NULL` to call `read_line` to get the pixels. - In `decoder_close` you should free all the allocated resources. - `decoder_read` is optional. Decoding the whole image requires extra memory and some computational overhead. However, if can decode one line of the image without decoding the whole image, you can save memory and time. -To indicate that, the *line read* function should be used, set `dsc->img_data = NULL` in the open function. +To indicate that the *line read* function should be used, set `dsc->img_data = NULL` in the open function. ### Manually use an image decoder @@ -301,15 +301,15 @@ To decide which image to close, LVGL uses a measurement it previously made of ho If you want or need to override LVGL's measurement, you can manually set the *time to open* value in the decoder open function in `dsc->time_to_open = time_ms` to give a higher or lower value. (Leave it unchanged to let LVGL set it.) -Every cache entry has a *"life"* value. Every time an image opening happens through the cache, the *life* of all entries are decreased to make them older. -When a cached image is used, its *life* is increased by the *time to open* value to make it more alive. +Every cache entry has a *"life"* value. Every time an image opening happens through the cache, the *life* value of all entries is decreased to make them older. +When a cached image is used, its *life* value is increased by the *time to open* value to make it more alive. -If there is no more space in the cache, always the entry with the smallest life will be closed. +If there is no more space in the cache, the entry with the smallest life value will be closed. ### Memory usage -Note that, the cached image might continuously consume memory. For example, if 3 PNG images are cached, they will consume memory while they are opened. +Note that the cached image might continuously consume memory. For example, if 3 PNG images are cached, they will consume memory while they are open. -Therefore, it's the user's responsibility to be sure there is enough RAM to cache, even the largest images at the same time. +Therefore, it's the user's responsibility to be sure there is enough RAM to cache even the largest images at the same time. ### Clean the cache Let's say you have loaded a PNG image into a `lv_img_dsc_t my_png` variable and use it in an `lv_img` object. If the image is already cached and you then change the underlying PNG file, you need to notify LVGL to cache the image again. Otherwise, there is no easy way of detecting that the underlying file changed and LVGL will still draw the old image. diff --git a/docs/overview/indev.md b/docs/overview/indev.md index 0f5e899e17..890624a3f2 100644 --- a/docs/overview/indev.md +++ b/docs/overview/indev.md @@ -16,7 +16,7 @@ An input device usually means: ## Pointers -Pointer input devices can have a cursor. (typically for mouses) +Pointer input devices (like a mouse) can have a cursor. ```c ... @@ -73,7 +73,7 @@ With an encoder, you should use only `LV_KEY_LEFT`, `LV_KEY_RIGHT`, and `LV_KEY_ #### Edit and navigate mode -Since a keypad has plenty of keys, it's easy to navigate between the objects and edit them using the keypad. But, the encoders have a limited number of "keys" hence, it is difficult to navigate using the default options. *Navigate* and *Edit* are created to avoid this problem with the encoders. +Since a keypad has plenty of keys, it's easy to navigate between the objects and edit them using the keypad. But the encoders have a limited number of "keys" and hence it is difficult to navigate using the default options. *Navigate* and *Edit* are created to avoid this problem with the encoders. In *Navigate* mode, the encoders `LV_KEY_LEFT/RIGHT` is translated to `LV_KEY_NEXT/PREV`. Therefore the next or previous object will be selected by turning the encoder. Pressing `LV_KEY_ENTER` will change to *Edit* mode. diff --git a/docs/overview/layer.md b/docs/overview/layer.md index 6844ab31b8..e8e55d725e 100644 --- a/docs/overview/layer.md +++ b/docs/overview/layer.md @@ -7,7 +7,7 @@ ## Order of creation -By default, LVGL draws old objects on the background and new objects on the foreground. +By default, LVGL draws new objects on top of old objects. For example, assume we added a button to a parent object named button1 and then another button named button2. Then button1 (with its child object(s)) will be in the background and can be covered by button2 and its children. @@ -57,4 +57,4 @@ The `layer_top` can be used by the user to create some content visible everywher lv_obj_set_click(lv_layer_top(), true); ``` -The `layer_sys` is also used for a similar purpose on LVGL. For example, it places the mouse cursor above all layers to be sure it's always visible. +The `layer_sys` is also used for similar purposes on LVGL. For example, it places the mouse cursor above all layers to be sure it's always visible. diff --git a/docs/overview/object.md b/docs/overview/object.md index d9b58782d8..f7c9236920 100644 --- a/docs/overview/object.md +++ b/docs/overview/object.md @@ -4,10 +4,10 @@ ``` # Objects -In the LVGL the **basic building blocks** of a user interface are the objects, also called *Widgets*. +In LVGL the **basic building blocks** of a user interface are the objects, also called *Widgets*. For example a [Button](/widgets/core/btn), [Label](/widgets/core/label), [Image](/widgets/core/img), [List](/widgets/extra/list), [Chart](/widgets/extra/chart) or [Text area](/widgets/core/textarea). -Check all the [Object types](/widgets/index) here. +You can see all the [Object types](/widgets/index) here. All objects are referenced using an `lv_obj_t` pointer as a handle. This pointer can later be used to set or get the attributes of the object. @@ -39,7 +39,7 @@ The object types have special attributes too. For example, a slider has - Minimum and maximum values - Current value -For these attributes, every object type have unique API functions. For example for a slider: +For these special attributes, every object type may have unique API functions. For example for a slider: ```c /*Set slider specific attributes*/ @@ -95,9 +95,9 @@ lv_obj_set_x(obj1, -30); /*Move the child a little bit off the parent*/ In LVGL objects can be created and deleted dynamically in run time. It means only the currently created (existing) objects consume RAM. -It allows to create a screen just when a button is clicked to open it. A delete the screen when a new screen is loaded. +This allows for the creation of a screen just when a button is clicked to open it, and for deletion of screens when a new screen is loaded. -Or the UI can be created based on the current environment of the device. For example create meter, charts, bars, slider etc according to the currently attached sensors. +UIs can be created based on the current environment of the device. For example one can create meters, charts, bars and sliders based on the currently attached sensors. Every widget has its own **create** function with a prototype like this: ```c @@ -116,8 +116,8 @@ void lv_obj_del(lv_obj_t * obj); ``` `lv_obj_del` will delete the object immediately. -If for any reason you can't delete the object immediately you can use `lv_obj_del_async(obj)` that will perefome the deletion on hte next call of `lv_timer_handler()`. -It is useful e.g. if you want to delete the parent of an object in the child's `LV_EVENT_DELETE` signal. +If for any reason you can't delete the object immediately you can use `lv_obj_del_async(obj)` that will perform the deletion on the next call of `lv_timer_handler()`. +This is useful e.g. if you want to delete the parent of an object in the child's `LV_EVENT_DELETE` handler. You can remove all the children of an object (but not the object itself) using `lv_obj_clean(obj)`. @@ -149,7 +149,7 @@ There are two automatically generated layers: They are independent of the screens and they will be shown on every screen. The *top layer* is above every object on the screen and the *system layer* is above the *top layer* too. You can add any pop-up windows to the *top layer* freely. But, the *system layer* is restricted to system-level things (e.g. mouse cursor will be placed here in `lv_indev_set_cursor()`). -The `lv_layer_top()` and `lv_layer_sys()` functions gives a pointer to the top or system layer. +The `lv_layer_top()` and `lv_layer_sys()` functions return pointers to the top and system layers respectively. Read the [Layer overview](/overview/layer) section to learn more about layers. @@ -176,11 +176,11 @@ Visit [Multi-display support](/overview/display) to learn more. ## Parts -The widgets are built from multiple parts. For example a [Base object](/widgets/obj) uses the main and scroll bar parts but a [Slider](/widgets/core/slider) uses the main, the indicator and the knob parts. +The widgets are built from multiple parts. For example a [Base object](/widgets/obj) uses the main and scrollbar parts but a [Slider](/widgets/core/slider) uses the main, the indicator and the knob parts. Parts are similar to *pseudo elements* in CSS. The following predefined parts exist in LVGL: -- `LV_PART_MAIN` A background like rectangle*/ +- `LV_PART_MAIN` A background like rectangle*/`` - `LV_PART_SCROLLBAR` The scrollbar(s) - `LV_PART_INDICATOR` Indicator, e.g. for slider, bar, switch, or the tick box of the checkbox - `LV_PART_KNOB` Like a handle to grab to adjust the value*/ @@ -194,7 +194,7 @@ The main purpose of parts to allow styling the "components" of the widgets. Therefore the parts are described in more detail in the [Style overview](/overview/style) section. ## States -The object can be in a combinations of the following states: +The object can be in a combination of the following states: - `LV_STATE_DEFAULT` Normal, released state - `LV_STATE_CHECKED` Toggled or checked state - `LV_STATE_FOCUSED` Focused via keypad or encoder or clicked via touchpad/mouse diff --git a/docs/overview/scroll.md b/docs/overview/scroll.md index b1ff50cd79..03e8df9775 100644 --- a/docs/overview/scroll.md +++ b/docs/overview/scroll.md @@ -9,7 +9,7 @@ In LVGL scrolling works very intuitively: if an object is out of its parent cont Any object can be scrollable including `lv_obj_t`, `lv_img`, `lv_btn`, `lv_meter`, etc -The obejct can be scrolled either horizontally or vertically at a time, that is diagonal scrolling is not possible. +The object can either be scrolled either horizontally or vertically in one stroke; diagonal scrolling is not possible. ### Scrollbar @@ -24,7 +24,7 @@ The scrollbars are displayed according to the set `mode`. The following `mode`s #### Styling -The scrollbars have its own dedicated part, called `LV_PART_SCROLLBAR`. For example a scrollbar can turned to red like this: +The scrollbars have their own dedicated part, called `LV_PART_SCROLLBAR`. For example a scrollbar can turned to red like this: ```c static lv_style_t style_red; lv_style_init(&style_red); @@ -83,13 +83,13 @@ OR-ed values are also possible. E.g. `LV_DIR_TOP | LV_DIR_LEFT`. ### Scroll chain If an object can't be scrolled further (e.g. it's content has reached the bottom most position) the scrolling is propagated to it's parent. If the parent an be scrolled in that direction than it will be scrolled instead. -It goes to the grad parent and grand grandparents too. +It propagets to the grandparent and grand-grandparents too. -The propagation on scrolling in called "scroll chaining" and it can be enabled/disabled with the `LV_OBJ_FLAG_SCROLL_CHAIN` flag. +The propagation on scrolling is called "scroll chaining" and it can be enabled/disabled with the `LV_OBJ_FLAG_SCROLL_CHAIN` flag. If chaining is disabled the propagation stops on the object and the parent(s) won't be scrolled. ### Scroll momentum -When the user scrolls an object and releases it LVGL can emulate a momentum for the scrolling. It's like to object were thrown and the scrolling slows down smoothly. +When the user scrolls an object and releases it, LVGL can emulate a momentum for the scrolling. It's like the object was thrown and scrolling slows down smoothly. The scroll momentum can be enabled/disabled with the `LV_OBJ_FLAG_SCROLL_MOMENTUM` flag. @@ -97,10 +97,10 @@ The scroll momentum can be enabled/disabled with the `LV_OBJ_FLAG_SCROLL_MOMENTU Normally the content can't be scrolled inside the object. That is the top side of the content can't be below the top side of the object. However, with `LV_OBJ_FLAG_SCROLL_ELASTIC` a fancy effect can be added when the user "over-scrolls" the content. The scrolling slows down, and the content can be scrolled inside the object. -When the object is releases the content is scrolled in it will be animated back to the valid position. +When the object is released the content scrolled in it will be animated back to the valid position. -### Snaping -The children of an object can be snapped according to specific rules when scrolling ends. Children can be made snapable individually with the `LV_OBJ_FLAG_SNAPABLE` flag. +### Snapping +The children of an object can be snapped according to specific rules when scrolling ends. Children can be made snappable individually with the `LV_OBJ_FLAG_SNAPABLE` flag. (Note misspelling of the flag name: your code needs to spell it with one P.) The object can align the snapped children in 4 ways: - `LV_SCROLL_SNAP_NONE` Snapping is disabled. (default) - `LV_SCROLL_SNAP_START` Align the children to the left/top side of the scrolled object @@ -109,15 +109,15 @@ The object can align the snapped children in 4 ways: The alignment can be set with `lv_obj_set_scroll_snap_x/y(obj, LV_SCROLL_SNAP_...)`: -Under the hood the followings happen +Under the hood the following happens: 1. User scrolls an object and releases the screen -2. LVGL calculates where would the scroll end considering scroll momentum +2. LVGL calculates where the scroll would end considering scroll momentum 3. LVGL finds the nearest scroll point -4. LVGL scrolls the snap point with an animation +4. LVGL scrolls to the snap point with an animation ### Scroll one -The "scroll one" feature tells LVGL to allow scrolling only one snapable children at a time. -So it requires to make the children snapable and and set a scroll snap alignment different from `LV_SCROLL_SNAP_NONE`. +The "scroll one" feature tells LVGL to allow scrolling only one snappable child at a time. +So this requires to make the children snappable (LV_OBJ_FLAG_SNAPABLE spelled with one P in code) and and set a scroll snap alignment different from `LV_SCROLL_SNAP_NONE`. This feature can be enabled by the `LV_OBJ_FLAG_SCROLL_ONE` flag. diff --git a/docs/overview/style-props.md b/docs/overview/style-props.md index cbd5bd6acc..b69ae3bcf2 100644 --- a/docs/overview/style-props.md +++ b/docs/overview/style-props.md @@ -93,7 +93,7 @@ Set the Y coordinate of the object considering the set `align`. Pixel and percen ### align -Set the alignment which tells from which point of the parent the X and Y coordinates should be interpreted. The possible values are: `LV_ALIGN_TOP_LEFT/MID/RIGHT`, `LV_ALIGN_BOTTOM_LEFT/MID/RIGHT`, `LV_ALIGN_LEFT/RIGHT_MID`, `LV_ALIGN_CENTER` +Set the alignment which determines from which point of the parent the X and Y coordinates should be interpreted. The possible values are: `LV_ALIGN_TOP_LEFT/MID/RIGHT`, `LV_ALIGN_BOTTOM_LEFT/MID/RIGHT`, `LV_ALIGN_LEFT/RIGHT_MID`, `LV_ALIGN_CENTER`