Skip to main content

Button Matrix

Button Matrix is a special API component in ElenixOS for creating button matrices. This document will introduce the features, usage methods, and precautions of the button matrix component.

Feature Introduction​

Button Matrix allows developers to create a matrix containing multiple buttons, which can be organized in rows and columns. Button matrices are typically used to create keyboards, numeric keypads, function button groups, etc.

Usage Methods​

Create Button Matrix​

Use the new lv.btnm() constructor to create a button matrix object:

// Create button matrix object
const btnm = new lv.btnm(eos.view.active());

Configure Button Matrix​

Use the following methods to configure the button matrix:

// Set button matrix size
btnm.setSize(200, 150);

// Set button matrix position
btnm.setPos(10, 10);

// Set button matrix button text
// Use "\n" to separate rows, use " " to separate buttons in the same row
const buttons = "1 2 3\n4 5 6\n7 8 9\n* 0 #";
btnm.setMap(buttons);

// Set button matrix button size
btnm.setBtnSize(60, 40);

// Set button matrix button spacing
btnm.setBtnSpacing(5);

Bind Events​

Use the addEventCb method to bind events:

// Bind button click event
btnm.addEventCb((e) => {
    const btnId = btnm.getPressedBtn();
    eos.console.log("Button clicked:", btnId);
}, lv.EVENT_VALUE_CHANGED, null);

Example: Create Numeric Keypad​

// Create button matrix
const btnm = new lv.btnm(eos.view.active());
btnm.setSize(240, 200);
btnm.align(lv.ALIGN_CENTER, 0, 0);

// Set button text
const buttons = "1 2 3\n4 5 6\n7 8 9\n* 0 #";
btnm.setMap(buttons);

// Bind event
btnm.addEventCb((e) => {
    const btnId = btnm.getPressedBtn();
    eos.console.log("Button clicked:", btnId);
}, lv.EVENT_VALUE_CHANGED, null);

Example: Create Function Button Group​

// Create button matrix
const btnm = new lv.btnm(eos.view.active());
btnm.setSize(200, 100);
btnm.align(lv.ALIGN_CENTER, 0, 0);

// Set button text
const buttons = "Play Pause Stop\nNext Prev";
btnm.setMap(buttons);

// Bind event
btnm.addEventCb((e) => {
    const btnId = btnm.getPressedBtn();
    eos.console.log("Button clicked:", btnId);
}, lv.EVENT_VALUE_CHANGED, null);

Special Characters for Button Matrix​

Button Matrix supports the following special characters:

CharacterDescription
" "Empty button
"\n"New line
"_"Horizontal divider
`""`

Notes​

Performance Optimization​

  1. Reasonable button matrix size: Button matrix should not be too large to avoid affecting system performance
  2. Reduce button count: Button count should not be too many to avoid affecting system performance
  3. Optimize event handling: Event handling functions should not be too complex to avoid affecting system performance

Memory Management​

  1. Release button matrix objects in time: Release button matrix when it is no longer needed
  2. Avoid memory leaks: Ensure there are no circular references in event callback functions

Error Handling​

  1. Parameter verification: Verify button matrix parameters to avoid invalid parameters
  2. Exception capture: Use try-catch to catch possible errors

Best Practices​

  1. Use button matrix reasonably: Use button matrix reasonably according to application scenarios
  2. Performance testing: Conduct performance testing before using button matrix to ensure it does not affect system performance
  3. Code optimization: Optimize button matrix code to improve performance
  4. User experience: Consider user experience to ensure button matrix layout and size are reasonable

Summary​

Button Matrix is a special API component in ElenixOS for creating button matrices. Through button matrix, developers can create keyboards, numeric keypads, function button groups, etc.

When using button matrix, developers should pay attention to performance optimization, memory management, error handling, and other issues to ensure button matrix performance and system stability.