Button Matrix Fit Tight

How-to
1

Description

When using a button matrix, is it possible to have the buttons fit tightly around their contents?
The screenshot below shows a button matrix with “C:” and “M:” labels. These buttons expanded to fill the width of the parent container, and expanded in height to make the button a square. I would liket o make these buttons a similar size to the “x” and “^” buttons.

The button matrix has some styling applied to remove the margin and padding.

image
image802×632 12.2 KB

What MCU/Processor/Board and compiler are you using?

Windows x64, MSVC.

What LVGL version are you using?

7.9.1

What do you want to achieve?

Make the buttons in the button matrix fit tightly.

What have you tried so far?

I attempted to use lv_cont_set_fit(btn_drvmtrx, LV_FIT_TIGHT); but that’s not compatible with the button matrix object.

Code

Full code at https://github.com/deltabeard/haiyajan-lvgl/blob/master/src/main.c

What I currently use to create the button matrix:

		lv_obj_t *btn_drvmtrx = lv_btnmatrix_create(cont, NULL);
		lv_btnmatrix_set_map(btn_drvmtrx, btn_drvs_ptr);
		lv_btnmatrix_set_one_check(btn_drvmtrx, true);
		lv_btnmatrix_set_btn_ctrl_all(btn_drvmtrx, LV_BTNMATRIX_CTRL_CHECKABLE);

		lv_obj_set_style_local_pad_all(btn_drvmtrx, LV_BTNMATRIX_PART_BG, LV_STATE_DEFAULT, 0);
		lv_obj_set_style_local_margin_all(btn_drvmtrx, LV_BTNMATRIX_PART_BG, LV_STATE_DEFAULT, 0);
		lv_obj_set_style_local_pad_all(btn_drvmtrx, LV_BTNMATRIX_PART_BTN, LV_STATE_DEFAULT, 0);
		lv_obj_set_style_local_margin_all(btn_drvmtrx, LV_BTNMATRIX_PART_BTN, LV_STATE_DEFAULT, 0);
		lv_obj_set_style_local_border_width(btn_drvmtrx, LV_BTNMATRIX_PART_BG, LV_STATE_DEFAULT, 0);
		lv_obj_set_style_local_outline_width(btn_drvmtrx, LV_BTNMATRIX_PART_BG, LV_STATE_DEFAULT, 0);

Many thanks.

2

you creat the button in a container？
Looks like you need to change the container fit property.
:sweat_smile: sorry didn’t see it,you already do this

3

lv_cont_set_fit(btn_drvmtrx, LV_FIT_TIGHT);
looks like The cont fit function applied on btn matrix

4

Thanks for your reply.

I’ve tried using lv_cont_set_fit(btn_drvmtrx, LV_FIT_TIGHT); on a button matrix, but it causes a segmentation fault. But it’s the sort of functionality I’m looking for in the button matrix. There seems to be some logic that is stretching the button matrix to the parent container, which I don’t want.

I want to create a left aligned toolbar of buttons.

5

lv_cont_set_fit(btn_drvmtrx, LV_FIT_TIGHT);
you use the cont fit function to the brn martrix,you need apply to the cont you created.
lv_cont_set_fit(cont, LV_FIT_TIGHT);

6

I already use lv_cont_set_fit(cont, LV_FIT_TIGHT); on the container when I first create it. Am I supposed to call set_fit after I create the button matrix?

7

hi,I’m new to lvgl.And not familiar with the widgets.
I took a look at the button matrix,it says: Use "\n" in the map to make line break . E.g. {"btn1", "btn2", "\n", "btn3", ""} . Each line’s buttons have their width calculated automatically.
looks the width is calculated automaticly .maybe you can set the cont’s width ,then the buttons will divide the width

8

I see. Thanks for the information. I’ve decided to use a dropdown list as an alternative.

I think a container could be used to limit the size of the buttons, but I would have preferred if sizing the buttons was automatic.