Table (lv_table)
Overview
Tables, as usual, are built from rows, columns, and cells containing texts.
The Table object is very lightweight because only the texts are stored. No real objects are created for cells but they are just drawn on the fly.
The Table is added to the default group (if it is set). Besides the Table is an editable object to allow selecting a cell with encoder navigation too.
Parts and Styles
LV_PART_MAINThe background of the table uses all the typical background style properties.LV_PART_ITEMSThe cells of the table also use all the typical background style properties and the text properties.
Usage
Set cell value
The cells can store only text so numbers need to be converted to text before displaying them in a table.
lv_table_set_cell_value(table, row, col, "Content"). The text is saved by the table so it can be even a local variable.
Line breaks can be used in the text like "Value\n60.3".
New rows and columns are automatically added is required
Rows and Columns
To explicitly set number of rows and columns use lv_table_set_row_count(table, row_cnt) and lv_table_set_column_count(table, col_cnt)
Width and Height
The width of the columns can be set with lv_table_set_column_width(table, col_id, width). The overall width of the Table object will be set to the sum of columns widths.
The height is calculated automatically from the cell styles (font, padding etc) and the number of rows.
Merge cells
Cells can be merged horizontally with lv_table_add_cell_ctrl(table, row, col, LV_TABLE_CELL_CTRL_MERGE_RIGHT). To merge more adjacent cells call this function for each cell.
Scroll
If the label's width or height is set to LV_SIZE_CONTENT that size
will be used to show the whole table in the respective direction. E.g.
lv_obj_set_size(table, LV_SIZE_CONTENT, LV_SIZE_CONTENT)
automatically sets the table size to show all the columns and rows.
If the width or height is set to a smaller number than the "intrinsic" size then the table becomes scrollable.
Events
LV_EVENT_VALUE_CHANGEDSent when a new cell is selected with keys.
See the events of the Base object too.
Learn more about Events.
Keys
The following Keys are processed by the Tables: -
LV_KEY_RIGHT/LEFT/UP/DOWN/ Select a cell.
Note that, as usual, the state of LV_KEY_ENTER is translated to
LV_EVENT_PRESSED/PRESSING/RELEASED etc.
lv_table_get_selected_cell(table, &row, &col) can be used to get the
currently selected cell. Row and column will be set to
LV_TABLE_CELL_NONE no cell is selected.
Learn more about Keys.
Example
Simple table
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_TABLE && LV_BUILD_EXAMPLES
static void draw_event_cb(lv_event_t * e)
{
lv_draw_task_t * draw_task = lv_event_get_draw_task(e);
lv_draw_dsc_base_t * base_dsc = draw_task->draw_dsc;
/*If the cells are drawn...*/
if(base_dsc->part == LV_PART_ITEMS) {
uint32_t row = base_dsc->id1;
uint32_t col = base_dsc->id2;
/*Make the texts in the first cell center aligned*/
if(row == 0) {
if(draw_task->type == LV_DRAW_TASK_TYPE_LABEL) {
lv_draw_label_dsc_t * label_draw_dsc = draw_task->draw_dsc;
label_draw_dsc->align = LV_TEXT_ALIGN_CENTER;
}
if(draw_task->type == LV_DRAW_TASK_TYPE_FILL) {
lv_draw_rect_dsc_t * rect_draw_dsc = draw_task->draw_dsc;
rect_draw_dsc->bg_color = lv_color_mix(lv_palette_main(LV_PALETTE_BLUE), rect_draw_dsc->bg_color, LV_OPA_20);
rect_draw_dsc->bg_opa = LV_OPA_COVER;
}
}
/*In the first column align the texts to the right*/
else if(col == 0) {
if(draw_task->type == LV_DRAW_TASK_TYPE_LABEL) {
lv_draw_label_dsc_t * label_draw_dsc = draw_task->draw_dsc;
label_draw_dsc->align = LV_TEXT_ALIGN_RIGHT;
}
}
/*Make every 2nd row grayish*/
if((row != 0 && row % 2) == 0) {
if(draw_task->type == LV_DRAW_TASK_TYPE_FILL) {
lv_draw_rect_dsc_t * rect_draw_dsc = draw_task->draw_dsc;
rect_draw_dsc->bg_color = lv_color_mix(lv_palette_main(LV_PALETTE_GREY), rect_draw_dsc->bg_color, LV_OPA_10);
rect_draw_dsc->bg_opa = LV_OPA_COVER;
}
}
}
}
void lv_example_table_1(void)
{
lv_obj_t * table = lv_table_create(lv_screen_active());
/*Fill the first column*/
lv_table_set_cell_value(table, 0, 0, "Name");
lv_table_set_cell_value(table, 1, 0, "Apple");
lv_table_set_cell_value(table, 2, 0, "Banana");
lv_table_set_cell_value(table, 3, 0, "Lemon");
lv_table_set_cell_value(table, 4, 0, "Grape");
lv_table_set_cell_value(table, 5, 0, "Melon");
lv_table_set_cell_value(table, 6, 0, "Peach");
lv_table_set_cell_value(table, 7, 0, "Nuts");
/*Fill the second column*/
lv_table_set_cell_value(table, 0, 1, "Price");
lv_table_set_cell_value(table, 1, 1, "$7");
lv_table_set_cell_value(table, 2, 1, "$4");
lv_table_set_cell_value(table, 3, 1, "$6");
lv_table_set_cell_value(table, 4, 1, "$2");
lv_table_set_cell_value(table, 5, 1, "$5");
lv_table_set_cell_value(table, 6, 1, "$1");
lv_table_set_cell_value(table, 7, 1, "$9");
/*Set a smaller height to the table. It'll make it scrollable*/
lv_obj_set_height(table, 200);
lv_obj_center(table);
/*Add an event callback to to apply some custom drawing*/
lv_obj_add_event_cb(table, draw_event_cb, LV_EVENT_DRAW_TASK_ADDED, NULL);
lv_obj_add_flag(table, LV_OBJ_FLAG_SEND_DRAW_TASK_EVENTS);
}
#endif
Lightweighted list from table
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_TABLE && LV_BUILD_EXAMPLES
#define ITEM_CNT 200
static void draw_event_cb(lv_event_t * e)
{
lv_obj_t * obj = lv_event_get_target(e);
lv_draw_task_t * draw_task = lv_event_get_draw_task(e);
lv_draw_dsc_base_t * base_dsc = draw_task->draw_dsc;
/*If the cells are drawn...*/
if(base_dsc->part == LV_PART_ITEMS && draw_task->type == LV_DRAW_TASK_TYPE_FILL) {
/*Draw the background*/
bool chk = lv_table_has_cell_ctrl(obj, base_dsc->id1, 0, LV_TABLE_CELL_CTRL_CUSTOM_1);
lv_draw_rect_dsc_t rect_dsc;
lv_draw_rect_dsc_init(&rect_dsc);
rect_dsc.bg_color = chk ? lv_theme_get_color_primary(obj) : lv_palette_lighten(LV_PALETTE_GREY, 2);
rect_dsc.radius = LV_RADIUS_CIRCLE;
lv_area_t sw_area;
sw_area.x1 = 0;
sw_area.x2 = 40;
sw_area.y1 = 0;
sw_area.y2 = 24;
lv_area_align(&draw_task->area, &sw_area, LV_ALIGN_RIGHT_MID, -15, 0);
lv_draw_rect(base_dsc->layer, &rect_dsc, &sw_area);
/*Draw the knob*/
rect_dsc.bg_color = lv_color_white();
lv_area_t knob_area;
knob_area.x1 = 0;
knob_area.x2 = 18;
knob_area.y1 = 0;
knob_area.y2 = 18;
if(chk) {
lv_area_align(&sw_area, &knob_area, LV_ALIGN_RIGHT_MID, -3, 0);
}
else {
lv_area_align(&sw_area, &knob_area, LV_ALIGN_LEFT_MID, 3, 0);
}
lv_draw_rect(base_dsc->layer, &rect_dsc, &knob_area);
}
}
static void change_event_cb(lv_event_t * e)
{
lv_obj_t * obj = lv_event_get_target(e);
uint32_t col;
uint32_t row;
lv_table_get_selected_cell(obj, &row, &col);
bool chk = lv_table_has_cell_ctrl(obj, row, 0, LV_TABLE_CELL_CTRL_CUSTOM_1);
if(chk) lv_table_clear_cell_ctrl(obj, row, 0, LV_TABLE_CELL_CTRL_CUSTOM_1);
else lv_table_add_cell_ctrl(obj, row, 0, LV_TABLE_CELL_CTRL_CUSTOM_1);
}
/**
* A very light-weighted list created from table
*/
void lv_example_table_2(void)
{
/*Measure memory usage*/
lv_mem_monitor_t mon1;
lv_mem_monitor(&mon1);
uint32_t t = lv_tick_get();
lv_obj_t * table = lv_table_create(lv_screen_active());
/*Set a smaller height to the table. It'll make it scrollable*/
lv_obj_set_size(table, LV_SIZE_CONTENT, 200);
lv_table_set_column_width(table, 0, 150);
lv_table_set_row_count(table, ITEM_CNT); /*Not required but avoids a lot of memory reallocation lv_table_set_set_value*/
lv_table_set_column_count(table, 1);
/*Don't make the cell pressed, we will draw something different in the event*/
lv_obj_remove_style(table, NULL, LV_PART_ITEMS | LV_STATE_PRESSED);
uint32_t i;
for(i = 0; i < ITEM_CNT; i++) {
lv_table_set_cell_value_fmt(table, i, 0, "Item %"LV_PRIu32, i + 1);
}
lv_obj_align(table, LV_ALIGN_CENTER, 0, -20);
/*Add an event callback to to apply some custom drawing*/
lv_obj_add_event_cb(table, draw_event_cb, LV_EVENT_DRAW_TASK_ADDED, NULL);
lv_obj_add_event_cb(table, change_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
lv_obj_add_flag(table, LV_OBJ_FLAG_SEND_DRAW_TASK_EVENTS);
lv_mem_monitor_t mon2;
lv_mem_monitor(&mon2);
uint32_t mem_used = mon1.free_size - mon2.free_size;
uint32_t elaps = lv_tick_elaps(t);
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text_fmt(label, "%"LV_PRIu32" items were created in %"LV_PRIu32" ms\n"
"using %"LV_PRIu32" bytes of memory",
(uint32_t)ITEM_CNT, elaps, mem_used);
lv_obj_align(label, LV_ALIGN_BOTTOM_MID, 0, -10);
}
#endif
MicroPython
No examples yet.