Object

Object is the base class for all LVGL components in ElenixOS, providing common functionality and methods. This document will introduce the features, usage methods, and precautions of the object component.

Feature Introduction

The object component is the base class for all LVGL components, providing the following common functionality:

• Position and size management
• Style management
• Event handling
• Child object management
• Flag management

Usage Methods

Create Object

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

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

Configure 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 alignment
obj.align(lv.ALIGN_CENTER, 0, 0);

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

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

// Set object corner radius
obj.setStyleRounded(5, 0);

// Set object opacity
obj.setStyleOpacity(0.8, 0);

Child Object Management

Use the following methods to manage child objects:

// Create child object
const child = new lv.obj(obj);
child.setSize(50, 50);
child.setPos(25, 25);

// Get parent object
const parent = child.getParent();

// Get child object
const firstChild = obj.getChild(0);

// Remove child object
obj.removeChild(child);

Flag Management

Use the following methods to manage object flags:

// Add flag
obj.addFlag(lv.OBJ_FLAG_CLICKABLE);
obj.addFlag(lv.OBJ_FLAG_CHECKABLE);

// Remove flag
obj.clearFlag(lv.OBJ_FLAG_CLICKABLE);

// Check flag
if (obj.hasFlag(lv.OBJ_FLAG_CLICKABLE)) {
    eos.console.log("Object is clickable");
}

Event Handling

Use the following methods to handle events:

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

// Remove event callback
obj.removeEventCb(callback);

// Send event
obj.sendEvent(lv.EVENT_CLICKED, null);

// Get event count
const eventCount = obj.getEventCount();

Example: Create 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 object style
obj.setStyleBgColor(lv.color_hex(0x007AFF), 0);
obj.setStyleRounded(10, 0);

// Add child object
const child = new lv.obj(obj);
child.setSize(50, 50);
child.align(lv.ALIGN_CENTER, 0, 0);
child.setStyleBgColor(lv.color_hex(0xFFFFFF), 0);

Example: Create a Clickable Object

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

// Set object style
obj.setStyleBgColor(lv.color_hex(0x007AFF), 0);
obj.setStyleRounded(10, 0);

// Add clickable flag
obj.addFlag(lv.OBJ_FLAG_CLICKABLE);

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

Common Flags

Flag	Description
lv.OBJ_FLAG_HIDDEN	Hide object
lv.OBJ_FLAG_CLICKABLE	Clickable object
lv.OBJ_FLAG_CHECKABLE	Checkable object
lv.OBJ_FLAG_SCROLLABLE	Scrollable object
lv.OBJ_FLAG_SCROLL_ELASTIC	Elastic scrolling
lv.OBJ_FLAG_SCROLL_MOMENTUM	Momentum scrolling
lv.OBJ_FLAG_SNAPPABLE	Snappable
lv.OBJ_FLAG_PRESS_LOCK	Press lock
lv.OBJ_FLAG_EVENT_BUBBLE	Event bubble
lv.OBJ_FLAG_GESTURE_BUBBLE	Gesture bubble