Button matrix (lv_btnmatrix)

Overview

The Button Matrix object is a lightweight way to display multiple buttons in rows and columns. Lightweight because the buttons are not actually created but just virtually drawn on the fly. This way, one button use only eight extra bytes of memory instead of the ~100-150 bytes a normal Button object plus the 100 or so bytes for the Label object.

The Button matrix is added to the default group (if one is set). Besides the Button matrix is an editable object to allow selecting and clicking the buttons with encoder navigation too.

Parts and Styles

  • LV_PART_MAIN The background of the button matrix, uses the typical background style properties. pad_row and pad_column sets the space between the buttons.

  • LV_PART_ITEMS The buttons all use the text and typical background style properties except translations and transformations.

Usage

Button's text

There is a text on each button. To specify them a descriptor string array, called map, needs to be used. The map can be set with lv_btnmatrix_set_map(btnm, my_map). The declaration of a map should look like const char * map[] = {"btn1", "btn2", "btn3", NULL}. Note that the last element has to be either NULL or an empty string ("")!

Use "\n" in the map to insert a line break. E.g. {"btn1", "btn2", "\n", "btn3", ""}. Each line's buttons have their width calculated automatically. So in the example the first row will have 2 buttons each with 50% width and a second row with 1 button having 100% width.

Control buttons

The buttons' width can be set relative to the other button in the same row with lv_btnmatrix_set_btn_width(btnm, btn_id, width) E.g. in a line with two buttons: btnA, width = 1 and btnB, width = 2, btnA will have 33 % width and btnB will have 66 % width. It's similar to how the flex-grow property works in CSS. The width must be in the [1..15] range and the default width is 1.

In addition to the width, each button can be customized with the following parameters:

  • LV_BTNMATRIX_CTRL_HIDDEN Makes a button hidden (hidden buttons still take up space in the layout, they are just not visible or clickable)

  • LV_BTNMATRIX_CTRL_NO_REPEAT Disable repeating when the button is long pressed

  • LV_BTNMATRIX_CTRL_DISABLED Makes a button disabled Like LV_STATE_DISABLED on normal objects

  • LV_BTNMATRIX_CTRL_CHECKABLE Enable toggling of a button. I.e. LV_STATE_CHECHED will be added/removed as the button is clicked

  • LV_BTNMATRIX_CTRL_CHECKED Make the button checked. It will use the LV_STATE_CHECHKED styles.

  • LV_BTNMATRIX_CTRL_CLICK_TRIG Enabled: send LV_EVENT_VALUE_CHANGE on CLICK, Disabled: send LV_EVENT_VALUE_CHANGE on PRESS

  • LV_BTNMATRIX_CTRL_POPOVER Show the button label in a popover when pressing this key

  • LV_BTNMATRIX_CTRL_RECOLOR Enable recoloring of button texts with #. E.g. "It's #ff0000 red#"

  • LV_BTNMATRIX_CTRL_CUSTOM_1 Custom free to use flag

  • LV_BTNMATRIX_CTRL_CUSTOM_2 Custom free to use flag

By default, all flags are disabled.

To set or clear a button's control attribute, use lv_btnmatrix_set_btn_ctrl(btnm, btn_id, LV_BTNM_CTRL_...) and lv_btnmatrix_clear_btn_ctrl(btnm, btn_id, LV_BTNMATRIX_CTRL_...) respectively. More LV_BTNM_CTRL_... values can be OR-ed

To set/clear the same control attribute for all buttons of a button matrix, use lv_btnmatrix_set_btn_ctrl_all(btnm, LV_BTNM_CTRL_...) and lv_btnmatrix_clear_btn_ctrl_all(btnm, LV_BTNMATRIX_CTRL_...).

The set a control map for a button matrix (similarly to the map for the text), use lv_btnmatrix_set_ctrl_map(btnm, ctrl_map). An element of ctrl_map should look like ctrl_map[0] = width | LV_BTNM_CTRL_NO_REPEAT |  LV_BTNM_CTRL_CHECHKABLE. The number of elements should be equal to the number of buttons (excluding newlines characters).

One check

The "One check" feature can be enabled with lv_btnmatrix_set_one_checked(btnm, true) to allow only one button to be checked at a time.

Events

  • LV_EVENT_VALUE_CHANGED Sent when a button is pressed/released or repeated after long press. The event parameter is set to the ID of the pressed/released button.

  • LV_EVENT_DRAW_PART_BEGIN and LV_EVENT_DRAW_PART_END are sent for the following types:

    • LV_BTNMATRIX_DRAW_PART_BTN The individual buttons.

      • part: LV_PART_ITEMS

      • id:index of the button being drawn

      • draw_area: the area of teh button

      • rect_dsc

See the events of the Base object too.

lv_btnmatrix_get_selected_btn(btnm) returns the index of the most recently released or focused button or LV_BTNMATRIX_BTN_NONE if no such button.

lv_btnmatrix_get_btn_text(btnm, btn_id) returns a pointer to the text of btn_idth button.

Learn more about Events.

Keys

  • LV_KEY_RIGHT/UP/LEFT/RIGHT To navigate among the buttons to select one

  • LV_KEY_ENTER To press/release the selected button

Learn more about Keys.

Example

Simple Button matrix

C code  

 GitHub
#include "../../lv_examples.h"
#if LV_USE_BTNMATRIX && LV_BUILD_EXAMPLES

static void event_handler(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * obj = lv_event_get_target(e);
    if(code == LV_EVENT_VALUE_CHANGED) {
        uint32_t id = lv_btnmatrix_get_selected_btn(obj);
        const char * txt = lv_btnmatrix_get_btn_text(obj, id);

        LV_LOG_USER("%s was pressed\n", txt);
    }
}

static const char * btnm_map[] = {"1", "2", "3", "4", "5", "\n",
                                  "6", "7", "8", "9", "0", "\n",
                                  "Action1", "Action2", ""
                                 };

void lv_example_btnmatrix_1(void)
{
    lv_obj_t * btnm1 = lv_btnmatrix_create(lv_scr_act());
    lv_btnmatrix_set_map(btnm1, btnm_map);
    lv_btnmatrix_set_btn_width(btnm1, 10, 2);        /*Make "Action1" twice as wide as "Action2"*/
    lv_btnmatrix_set_btn_ctrl(btnm1, 10, LV_BTNMATRIX_CTRL_CHECKABLE);
    lv_btnmatrix_set_btn_ctrl(btnm1, 11, LV_BTNMATRIX_CTRL_CHECKED);
    lv_obj_align(btnm1, LV_ALIGN_CENTER, 0, 0);
    lv_obj_add_event_cb(btnm1, event_handler, LV_EVENT_ALL, NULL);
}

#endif

MicroPython code  

 GitHub Simulator
def event_handler(evt):
    code = evt.get_code()
    obj  = evt.get_target()

    if code == lv.EVENT.VALUE_CHANGED :
        id = obj.get_selected_btn()
        txt = obj.get_btn_text(id)

        print("%s was pressed"%txt)

btnm_map = ["1", "2", "3", "4", "5", "\n",
            "6", "7", "8", "9", "0", "\n",
            "Action1", "Action2", ""]

btnm1 = lv.btnmatrix(lv.scr_act())
btnm1.set_map(btnm_map)
btnm1.set_btn_width(10, 2)        # Make "Action1" twice as wide as "Action2"
btnm1.set_btn_ctrl(10, lv.btnmatrix.CTRL.CHECKABLE)
btnm1.set_btn_ctrl(11, lv.btnmatrix.CTRL.CHECKED)
btnm1.align(lv.ALIGN.CENTER, 0, 0)
btnm1.add_event_cb(event_handler, lv.EVENT.ALL, None)


#endif

Custom buttons

C code  

 GitHub
#include "../../lv_examples.h"
#if LV_USE_BTNMATRIX && LV_BUILD_EXAMPLES

static void event_cb(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * obj = lv_event_get_target(e);
    if(code == LV_EVENT_DRAW_PART_BEGIN) {
        lv_obj_draw_part_dsc_t * dsc = lv_event_get_draw_part_dsc(e);

        /*When the button matrix draws the buttons...*/
        if(dsc->class_p == &lv_btnmatrix_class && dsc->type == LV_BTNMATRIX_DRAW_PART_BTN) {
            /*Change the draw descriptor of the 2nd button*/
            if(dsc->id == 1) {
                dsc->rect_dsc->radius = 0;
                if(lv_btnmatrix_get_selected_btn(obj) == dsc->id)  dsc->rect_dsc->bg_color = lv_palette_darken(LV_PALETTE_BLUE, 3);
                else dsc->rect_dsc->bg_color = lv_palette_main(LV_PALETTE_BLUE);

                dsc->rect_dsc->shadow_width = 6;
                dsc->rect_dsc->shadow_ofs_x = 3;
                dsc->rect_dsc->shadow_ofs_y = 3;
                dsc->label_dsc->color = lv_color_white();
            }
            /*Change the draw descriptor of the 3rd button*/
            else if(dsc->id == 2) {
                dsc->rect_dsc->radius = LV_RADIUS_CIRCLE;
                if(lv_btnmatrix_get_selected_btn(obj) == dsc->id)  dsc->rect_dsc->bg_color = lv_palette_darken(LV_PALETTE_RED, 3);
                else dsc->rect_dsc->bg_color = lv_palette_main(LV_PALETTE_RED);

                dsc->label_dsc->color = lv_color_white();
            }
            else if(dsc->id == 3) {
                dsc->label_dsc->opa = LV_OPA_TRANSP; /*Hide the text if any*/

            }
        }
    }
    if(code == LV_EVENT_DRAW_PART_END) {
        lv_obj_draw_part_dsc_t * dsc = lv_event_get_draw_part_dsc(e);

        /*When the button matrix draws the buttons...*/
        if(dsc->class_p == &lv_btnmatrix_class && dsc->type == LV_BTNMATRIX_DRAW_PART_BTN) {
            /*Add custom content to the 4th button when the button itself was drawn*/
            if(dsc->id == 3) {
                LV_IMG_DECLARE(img_star);
                lv_img_header_t header;
                lv_res_t res = lv_img_decoder_get_info(&img_star, &header);
                if(res != LV_RES_OK) return;

                lv_area_t a;
                a.x1 = dsc->draw_area->x1 + (lv_area_get_width(dsc->draw_area) - header.w) / 2;
                a.x2 = a.x1 + header.w - 1;
                a.y1 = dsc->draw_area->y1 + (lv_area_get_height(dsc->draw_area) - header.h) / 2;
                a.y2 = a.y1 + header.h - 1;

                lv_draw_img_dsc_t img_draw_dsc;
                lv_draw_img_dsc_init(&img_draw_dsc);
                img_draw_dsc.recolor = lv_color_black();
                if(lv_btnmatrix_get_selected_btn(obj) == dsc->id)  img_draw_dsc.recolor_opa = LV_OPA_30;

                lv_draw_img(dsc->draw_ctx, &img_draw_dsc, &a, &img_star);
            }
        }
    }
}

/**
 * Add custom drawer to the button matrix to customize buttons one by one
 */
void lv_example_btnmatrix_2(void)
{
    lv_obj_t * btnm = lv_btnmatrix_create(lv_scr_act());
    lv_obj_add_event_cb(btnm, event_cb, LV_EVENT_ALL, NULL);
    lv_obj_center(btnm);
}

#endif

MicroPython code  

 GitHub Simulator
from imagetools import get_png_info, open_png

# Register PNG image decoder
decoder = lv.img.decoder_create()
decoder.info_cb = get_png_info
decoder.open_cb = open_png

# Create an image from the png file
try:
    with open('../../assets/img_star.png','rb') as f:
        png_data = f.read()
except:
    print("Could not find star.png")
    sys.exit()

img_star_argb = lv.img_dsc_t({
  'data_size': len(png_data),
  'data': png_data
})

def event_cb(e):
    code = e.get_code()
    obj = e.get_target()
    dsc = lv.obj_draw_part_dsc_t.__cast__(e.get_param())
    if code == lv.EVENT.DRAW_PART_BEGIN:
        # Change the draw descriptor the 2nd button
        if dsc.id == 1:
            dsc.rect_dsc.radius = 0
            if obj.get_selected_btn() == dsc.id:
                dsc.rect_dsc.bg_color = lv.palette_darken(lv.PALETTE.GREY, 3)
            else:
                dsc.rect_dsc.bg_color = lv.palette_main(lv.PALETTE.BLUE)

            dsc.rect_dsc.shadow_width = 6
            dsc.rect_dsc.shadow_ofs_x = 3
            dsc.rect_dsc.shadow_ofs_y = 3
            dsc.label_dsc.color = lv.color_white()

        # Change the draw descriptor the 3rd button

        elif dsc.id == 2:
            dsc.rect_dsc.radius = lv.RADIUS.CIRCLE
            if obj.get_selected_btn() == dsc.id:
                dsc.rect_dsc.bg_color = lv.palette_darken(lv.PALETTE.RED, 3)
            else:
                dsc.rect_dsc.bg_color = lv.palette_main(lv.PALETTE.RED)

                dsc.label_dsc.color = lv.color_white()
        elif dsc.id == 3:
            dsc.label_dsc.opa = lv.OPA.TRANSP  # Hide the text if any

    if code == lv.EVENT.DRAW_PART_END:
        # Add custom content to the 4th button when the button itself was drawn
        if dsc.id == 3:
            # LV_IMG_DECLARE(img_star)
            header = lv.img_header_t()
            res = lv.img.decoder_get_info(img_star_argb, header)
            if res != lv.RES.OK:
                print("error when getting image header")
                return
            else:
                a = lv.area_t()
                a.x1 = dsc.draw_area.x1 + (dsc.draw_area.get_width() - header.w) // 2
                a.x2 = a.x1 + header.w - 1
                a.y1 = dsc.draw_area.y1 + (dsc.draw_area.get_height() - header.h) // 2
                a.y2 = a.y1 + header.h - 1
                img_draw_dsc = lv.draw_img_dsc_t()
                img_draw_dsc.init()
                img_draw_dsc.recolor = lv.color_black()
                if obj.get_selected_btn() == dsc.id:
                    img_draw_dsc.recolor_opa = lv.OPA._30

                dsc.draw_ctx.img(img_draw_dsc, a, img_star_argb)

#
# Add custom drawer to the button matrix to c
#
btnm = lv.btnmatrix(lv.scr_act())
btnm.add_event_cb(event_cb, lv.EVENT.ALL, None)
btnm.center()

API

Typedefs

typedef uint16_t lv_btnmatrix_ctrl_t
typedef bool (*lv_btnmatrix_btn_draw_cb_t)(lv_obj_t *btnm, uint32_t btn_id, const lv_area_t *draw_area, const lv_area_t *clip_area)

Enums

enum [anonymous]

Type to store button control bits (disabled, hidden etc.) The first 3 bits are used to store the width

Values:

enumerator _LV_BTNMATRIX_WIDTH

Reserved to store the size units

enumerator LV_BTNMATRIX_CTRL_HIDDEN

Button hidden

enumerator LV_BTNMATRIX_CTRL_NO_REPEAT

Do not repeat press this button.

enumerator LV_BTNMATRIX_CTRL_DISABLED

Disable this button.

enumerator LV_BTNMATRIX_CTRL_CHECKABLE

The button can be toggled.

enumerator LV_BTNMATRIX_CTRL_CHECKED

Button is currently toggled (e.g. checked).

enumerator LV_BTNMATRIX_CTRL_CLICK_TRIG

1: Send LV_EVENT_VALUE_CHANGE on CLICK, 0: Send LV_EVENT_VALUE_CHANGE on PRESS

enumerator LV_BTNMATRIX_CTRL_POPOVER

Show a popover when pressing this key

enumerator LV_BTNMATRIX_CTRL_RECOLOR

Enable text recoloring with #color

enumerator _LV_BTNMATRIX_CTRL_RESERVED_1

Reserved for later use

enumerator _LV_BTNMATRIX_CTRL_RESERVED_2

Reserved for later use

enumerator LV_BTNMATRIX_CTRL_CUSTOM_1

Custom free to use flag

enumerator LV_BTNMATRIX_CTRL_CUSTOM_2

Custom free to use flag

enum lv_btnmatrix_draw_part_type_t

type field in lv_obj_draw_part_dsc_t if class_p = lv_btnmatrix_class Used in LV_EVENT_DRAW_PART_BEGIN and LV_EVENT_DRAW_PART_END

Values:

enumerator LV_BTNMATRIX_DRAW_PART_BTN

The rectangle and label of buttons

Functions

LV_EXPORT_CONST_INT(LV_BTNMATRIX_BTN_NONE)
lv_obj_t *lv_btnmatrix_create(lv_obj_t *parent)

Create a button matrix object

Parameters

parent -- pointer to an object, it will be the parent of the new button matrix

Returns

pointer to the created button matrix

void lv_btnmatrix_set_map(lv_obj_t *obj, const char *map[])

Set a new map. Buttons will be created/deleted according to the map. The button matrix keeps a reference to the map and so the string array must not be deallocated during the life of the matrix.

Parameters

  • obj -- pointer to a button matrix object

  • map -- pointer a string array. The last string has to be: "". Use "\n" to make a line break.

void lv_btnmatrix_set_ctrl_map(lv_obj_t *obj, const lv_btnmatrix_ctrl_t ctrl_map[])

Set the button control map (hidden, disabled etc.) for a button matrix. The control map array will be copied and so may be deallocated after this function returns.

Parameters

  • obj -- pointer to a button matrix object

  • ctrl_map -- pointer to an array of lv_btn_ctrl_t control bytes. The length of the array and position of the elements must match the number and order of the individual buttons (i.e. excludes newline entries). An element of the map should look like e.g.: ctrl_map[0] = width | LV_BTNMATRIX_CTRL_NO_REPEAT | LV_BTNMATRIX_CTRL_TGL_ENABLE

void lv_btnmatrix_set_selected_btn(lv_obj_t *obj, uint16_t btn_id)

Set the selected buttons

Parameters

  • obj -- pointer to button matrix object

  • btn_id -- 0 based index of the button to modify. (Not counting new lines)

void lv_btnmatrix_set_btn_ctrl(lv_obj_t *obj, uint16_t btn_id, lv_btnmatrix_ctrl_t ctrl)

Set the attributes of a button of the button matrix

Parameters

  • obj -- pointer to button matrix object

  • btn_id -- 0 based index of the button to modify. (Not counting new lines)

  • ctrl -- OR-ed attributs. E.g. LV_BTNMATRIX_CTRL_NO_REPEAT | LV_BTNMATRIX_CTRL_CHECKABLE

void lv_btnmatrix_clear_btn_ctrl(lv_obj_t *obj, uint16_t btn_id, lv_btnmatrix_ctrl_t ctrl)

Clear the attributes of a button of the button matrix

Parameters

  • obj -- pointer to button matrix object

  • btn_id -- 0 based index of the button to modify. (Not counting new lines)

  • ctrl -- OR-ed attributs. E.g. LV_BTNMATRIX_CTRL_NO_REPEAT | LV_BTNMATRIX_CTRL_CHECKABLE

void lv_btnmatrix_set_btn_ctrl_all(lv_obj_t *obj, lv_btnmatrix_ctrl_t ctrl)

Set attributes of all buttons of a button matrix

Parameters

  • obj -- pointer to a button matrix object

  • ctrl -- attribute(s) to set from lv_btnmatrix_ctrl_t. Values can be ORed.

void lv_btnmatrix_clear_btn_ctrl_all(lv_obj_t *obj, lv_btnmatrix_ctrl_t ctrl)

Clear the attributes of all buttons of a button matrix

Parameters

  • obj -- pointer to a button matrix object

  • ctrl -- attribute(s) to set from lv_btnmatrix_ctrl_t. Values can be ORed.

  • en -- true: set the attributes; false: clear the attributes

void lv_btnmatrix_set_btn_width(lv_obj_t *obj, uint16_t btn_id, uint8_t width)

Set a single button's relative width. This method will cause the matrix be regenerated and is a relatively expensive operation. It is recommended that initial width be specified using lv_btnmatrix_set_ctrl_map and this method only be used for dynamic changes.

Parameters

  • obj -- pointer to button matrix object

  • btn_id -- 0 based index of the button to modify.

  • width -- relative width compared to the buttons in the same row. [1..7]

void lv_btnmatrix_set_one_checked(lv_obj_t *obj, bool en)

Make the button matrix like a selector widget (only one button may be checked at a time). LV_BTNMATRIX_CTRL_CHECKABLE must be enabled on the buttons to be selected using lv_btnmatrix_set_ctrl() or lv_btnmatrix_set_btn_ctrl_all().

Parameters

  • obj -- pointer to a button matrix object

  • en -- whether "one check" mode is enabled

const char **lv_btnmatrix_get_map(const lv_obj_t *obj)

Get the current map of a button matrix

Parameters

obj -- pointer to a button matrix object

Returns

the current map

uint16_t lv_btnmatrix_get_selected_btn(const lv_obj_t *obj)

Get the index of the lastly "activated" button by the user (pressed, released, focused etc) Useful in the event_cb to get the text of the button, check if hidden etc.

Parameters

obj -- pointer to button matrix object

Returns

index of the last released button (LV_BTNMATRIX_BTN_NONE: if unset)

const char *lv_btnmatrix_get_btn_text(const lv_obj_t *obj, uint16_t btn_id)

Get the button's text

Parameters

  • obj -- pointer to button matrix object

  • btn_id -- the index a button not counting new line characters.

Returns

text of btn_index` button

bool lv_btnmatrix_has_btn_ctrl(lv_obj_t *obj, uint16_t btn_id, lv_btnmatrix_ctrl_t ctrl)

Get the whether a control value is enabled or disabled for button of a button matrix

Parameters

  • obj -- pointer to a button matrix object

  • btn_id -- the index of a button not counting new line characters.

  • ctrl -- control values to check (ORed value can be used)

Returns

true: the control attribute is enabled false: disabled

bool lv_btnmatrix_get_one_checked(const lv_obj_t *obj)

Tell whether "one check" mode is enabled or not.

Parameters

obj -- Button matrix object

Returns

true: "one check" mode is enabled; false: disabled

Variables

const lv_obj_class_t lv_btnmatrix_class
struct lv_btnmatrix_t

Public Members

lv_obj_t obj
const char **map_p
lv_area_t *button_areas
lv_btnmatrix_ctrl_t *ctrl_bits
uint16_t btn_cnt
uint16_t row_cnt
uint16_t btn_id_sel
uint8_t one_check