docs: bring back flat widget directory structure

This commit is contained in:
Gabor Kiss-Vamosi
2022-07-27 10:50:32 +02:00
parent cd11476592
commit 2461ac0758
46 changed files with 93 additions and 115 deletions

View File

@@ -47,7 +47,7 @@ Be sure not to confuse displays and screens:
Screens can be considered the highest level containers which have no parent.
A screen's size is always equal to its display and their origin is (0;0). Therefore, a screen's 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 [Base object](/widgets/obj) and [Image](/widgets/core/img) (to create a wallpaper).
A screen can be created from any object type but the two most typical types are [Base object](/widgets/obj) and [Image](/widgets/img) (to create a wallpaper).
To create a screen, use `lv_obj_t * scr = lv_<type>_create(NULL, copy)`. `copy` can be an existing screen copied into the new screen.

View File

@@ -101,7 +101,7 @@ Although widgets can be easily customized by styles there might be cases when so
To ensure a great level of flexibility LVGL sends a lot of 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 operations can be added manually.
A good use case for this 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.
A good use case for this is the [Button matrix](/widgets/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 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.
Each of these events is described in detail below.

View File

@@ -110,7 +110,7 @@ lv_fs_dir_close(&dir);
## Use drives for images
[Image](/widgets/core/img) objects can be opened from files too (besides variables stored in the compiled program).
[Image](/widgets/img) objects can be opened from files too (besides variables stored in the compiled program).
To use files in image widgets the following callbacks are required:
- open

View File

@@ -104,11 +104,11 @@ static lv_img_dsc_t my_img_dsc = {
If the color format is `LV_IMG_CF_TRUE_COLOR_ALPHA` you can set `data_size` like `80 * 60 * LV_IMG_PX_SIZE_ALPHA_BYTE`.
Another (possibly simpler) option to create and display an image at run-time is to use the [Canvas](/widgets/core/canvas) object.
Another (possibly simpler) option to create and display an image at run-time is to use the [Canvas](/widgets/canvas) object.
### Use images
The simplest way to use an image in LVGL is to display it with an [lv_img](/widgets/core/img) object:
The simplest way to use an image in LVGL is to display it with an [lv_img](/widgets/img) object:
```c
lv_obj_t * icon = lv_img_create(lv_scr_act(), NULL);

View File

@@ -62,7 +62,7 @@ To prevent passing the gesture event to the parent from an object use `lv_obj_cl
Note that, gestures are not triggered if an object is being scrolled.
If you did some action on a gesture you can call `lv_indev_wait_release(lv_indev_get_act())` in the event handler to prevent LVGL sending further input device related events.
If you did some action on a gesture you can call `lv_indev_wait_release(lv_indev_get_act())` in the event handler to prevent LVGL sending further input device related events.
## Keypad and encoder
@@ -72,8 +72,8 @@ You can fully control the user interface without a touchpad or mouse by using a
Objects you want to control with a keypad or encoder need to be added to a *Group*.
In every group there is exactly one focused object which receives the pressed keys or the encoder actions.
For example, if a [Text area](/widgets/core/textarea) is focused and you press some letter on a keyboard, the keys will be sent and inserted into the text area.
Similarly, if a [Slider](/widgets/core/slider) is focused and you press the left or right arrows, the slider's value will be changed.
For example, if a [Text area](/widgets/textarea) is focused and you press some letter on a keyboard, the keys will be sent and inserted into the text area.
Similarly, if a [Slider](/widgets/slider) is focused and you press the left or right arrows, the slider's value will be changed.
You need to associate an input device with a group. An input device can send key events to only one group but a group can receive data from more than one input device.
@@ -90,11 +90,11 @@ There are some predefined keys which have special meaning:
- **LV_KEY_DOWN** Decrease value or move downwards
- **LV_KEY_RIGHT** Increase value or move to the right
- **LV_KEY_LEFT** Decrease value or move to the left
- **LV_KEY_ESC** Close or exit (E.g. close a [Drop down list](/widgets/core/dropdown))
- **LV_KEY_DEL** Delete (E.g. a character on the right in a [Text area](/widgets/core/textarea))
- **LV_KEY_BACKSPACE** Delete a character on the left (E.g. in a [Text area](/widgets/core/textarea))
- **LV_KEY_HOME** Go to the beginning/top (E.g. in a [Text area](/widgets/core/textarea))
- **LV_KEY_END** Go to the end (E.g. in a [Text area](/widgets/core/textarea))
- **LV_KEY_ESC** Close or exit (E.g. close a [Drop down list](/widgets/dropdown))
- **LV_KEY_DEL** Delete (E.g. a character on the right in a [Text area](/widgets/textarea))
- **LV_KEY_BACKSPACE** Delete a character on the left (E.g. in a [Text area](/widgets/textarea))
- **LV_KEY_HOME** Go to the beginning/top (E.g. in a [Text area](/widgets/textarea))
- **LV_KEY_END** Go to the end (E.g. in a [Text area](/widgets/textarea))
The most important special keys are `LV_KEY_NEXT/PREV`, `LV_KEY_ENTER` and `LV_KEY_UP/DOWN/LEFT/RIGHT`.
In your `read_cb` function, you should translate some of your keys to these special keys to support navigation in a group and interact with selected objects.
@@ -112,7 +112,7 @@ Pressing `LV_KEY_ENTER` will change to *Edit* mode.
In *Edit* mode, `LV_KEY_NEXT/PREV` is usually used to modify an object.
Depending on the object's type, a short or long press of `LV_KEY_ENTER` changes back to *Navigate* mode.
Usually, an object which cannot be pressed (like a [Slider](/widgets/core/slider)) leaves *Edit* mode upon a short click. But with objects where a short click has meaning (e.g. [Button](/widgets/core/btn)), a long press is required.
Usually, an object which cannot be pressed (like a [Slider](/widgets/slider)) leaves *Edit* mode upon a short click. But with objects where a short click has meaning (e.g. [Button](/widgets/btn)), a long press is required.
#### Default group
Interactive widgets - such as buttons, checkboxes, sliders, etc. - can be automatically added to a default group.

View File

@@ -1,7 +1,7 @@
# Objects
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).
For example a [Button](/widgets/btn), [Label](/widgets/label), [Image](/widgets/img), [List](/widgets/list), [Chart](/widgets/chart) or [Text area](/widgets/textarea).
You can see all the [Object types](/widgets/index) here.
@@ -179,7 +179,7 @@ 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 scrollbar parts but a [Slider](/widgets/core/slider) uses the main, indicator and 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/slider) uses the main, indicator and knob parts.
Parts are similar to *pseudo-elements* in CSS.
The following predefined parts exist in LVGL:

View File

@@ -117,7 +117,7 @@ The following predefined parts exist in LVGL:
- `LV_PART_CUSTOM_FIRST` Custom part identifiers can be added starting from here.
For example a [Slider](/widgets/core/slider) has three parts:
For example a [Slider](/widgets/slider) has three parts:
- Background
- Indicator
- Knob