Skip to main content

Object

Object is the base class for all LVGL components in ElenixOS. This document describes the functionality, usage methods, and notes for the object component.

Feature Introduction​

The Object component is the fundamental building block of all LVGL UI components. All other components (buttons, labels, images, etc.) inherit from Object. It provides basic functionality such as positioning, sizing, styling, and event handling.

Usage Methods​

Creating Object​

Use the new lv.obj() constructor to create an object:

// Create object
const obj = new lv.obj(eos.view.active());

Configuring Object​

Use the following methods to configure the object:

// Set object size
obj.setSize(100, 100);

// Set object position
obj.setPos(10, 10);

// Set object background color
obj.setStyleBgColor(lv.color_hex(0xFF0000), 0);

// Set object border color
obj.setStyleBorderColor(lv.color_hex(0x000000), 0);

// Set object border width
obj.setStyleBorderWidth(2, 0);

// Center object
obj.center();

Event Handling​

Use the addEventCb method to bind events:

// Bind click event
obj.addEventCb((e) => {
    eos.console.log("Object clicked");
}, lv.EVENT_CLICKED, null);

Example: Creating a Simple Object​

// Create object
const obj = new lv.obj(eos.view.active());
obj.setSize(100, 100);
obj.align(lv.ALIGN_CENTER, 0, 0);

// Set background color
obj.setStyleBgColor(lv.color_hex(0xFF0000), 0);

// Bind event
obj.addEventCb((e) => {
    eos.console.log("Object clicked");
}, lv.EVENT_CLICKED, null);