🎨 آموزش کامل مدیریت استایل‌ها در EVM JavaScript با ESP32-EVM-LVGL

مقدمه

در پروژه‌های مبتنی بر EVM (Embedded Virtual Machine) و میکروکنترلر ESP32، طراحی رابط گرافیکی حرفه‌ای یکی از مهم‌ترین عوامل کیفیت نهایی محصول است. استفاده از کتابخانه LVGL در کنار EVM JavaScript این امکان را فراهم می‌کند که بدون برنامه‌نویسی C، رابط‌های گرافیکی قدرتمند، سریع و زیبا طراحی کنیم.

در این میان، مدیریت صحیح استایل‌ها (Styles) نقش کلیدی دارد. استایل‌ها تعیین‌کننده رنگ، فونت، ابعاد، شفافیت، گردی گوشه‌ها و حتی نحوه نمایش المان‌هایی مانند Arc، Label و Container هستند.

در این مقاله از شاپ الکترونیک به‌صورت کاملاً عملی یاد می‌گیریم:

• ساختار ماژول استایل در EVM
• نحوه ایجاد و حذف استایل‌ها
• مدیریت حافظه و جلوگیری از نشتی
• طراحی UI گرافیکی با LVGL
• بهترین روش‌ها برای پروژه‌های ESP32

🏗️ ساختار ماژول استایل در ESP32 EVM LVGL

برای کار با استایل‌ها در EVM، ابتدا باید ماژول مربوطه را بارگذاری کنیم:

var styleModule = require('@native.lv_style');

ماژول استایل در EVM به‌صورت مفهومی به سه بخش اصلی تقسیم می‌شود:

• توابع مدیریت استایل‌ها
• توابع مدیریت آبجکت و حافظه
• توابع کمکی و ابزارها

این ساختار باعث می‌شود طراحی رابط کاربری در پروژه‌های امبدد کاملاً ماژولار و قابل نگهداری باشد.

🎨 بخش اول: مدیریت استایل‌ها در EVM JavaScript

🔹 ایجاد و حذف استایل (بسیار مهم)

در EVM برخلاف برخی فریم‌ورک‌ها، مدیریت حافظه استایل‌ها دستی است. اگر استایلی حذف نشود، به‌مرور باعث نشتی حافظه و کرش سیستم خواهد شد.

var myStyle = styleModule.lv_style_create();
print("استایل ایجاد شد");

styleModule.set_style_bg_color(myStyle, 0x000033);
styleModule.set_style_bg_opa(myStyle, 255);
styleModule.set_style_radius(myStyle, 15);

// حذف استایل
styleModule.lv_style_destroy(myStyle);
print("استایل حذف شد");

📌 نکته مهم:
هر استایلی که ایجاد می‌کنید، باید در پایان عمر آن با lv_style_destroy آزاد شود.

🎨 تنظیم رنگ و شفافیت در LVGL

مثال کاربردی:

styleModule.set_style_bg_color(style, 0xFF0000); // قرمز
styleModule.set_style_bg_opa(style, 200);
styleModule.set_style_text_color(style, 0x00FF00); // سبز

📏 تنظیم اندازه، موقعیت و Padding

styleModule.set_style_width(style, 120);
styleModule.set_style_height(style, 60);

styleModule.set_style_x(style, 20);
styleModule.set_style_y(style, 30);

styleModule.set_style_pad_all(style, 10);
styleModule.set_style_pad_top(style, 5);

این تنظیمات برای طراحی پنل‌های صنعتی، HMI و صفحات لمسی بسیار کاربردی هستند.

🖋️ مدیریت متن و فونت

styleModule.set_style_text_font(style, lv.lv_font_default());
styleModule.set_style_text_letter_space(style, 2);
styleModule.set_style_text_line_space(style, 5);
styleModule.set_style_text_align(style, lv.LV_TEXT_ALIGN_CENTER);

⭕ استایل‌دهی Arc در LVGL

Arcها برای پروژه‌هایی مانند ترموستات هوشمند، ولوم، گیج و نشانگر دما بسیار پرکاربرد هستند.

styleModule.set_style_arc_width(style, 8);
styleModule.set_style_arc_color(style, 0xFF5555);

styleModule.set_style_arc_indic_width(style, 6);
styleModule.set_style_arc_indic_color(style, 0x00FF00);

// مخفی کردن Knob
styleModule.lv_arc_hide_knob(arcObject);

🗑️ بخش دوم: مدیریت آبجکت و حافظه در ESP32 EVM LVGL

🔥 حذف ایمن آبجکت‌ها

ترتیب صحیح حذف آبجکت‌ها بسیار مهم است:

1. حذف فرزندان
2. حذف آبجکت اصلی
3. حذف استایل

styleModule.lv_obj_delete_all_children(parent);
styleModule.lv_obj_del(parent);
styleModule.lv_style_destroy(style);

🧹 پاکسازی کامل صفحه

styleModule.lv_obj_clean(lv.lv_scr_act());

📌 این دستور هنگام خروج از برنامه یا تغییر صفحه ضروری است.

🔄 مدیریت استایل روی آبجکت‌ها

styleModule.lv_obj_remove_style(obj, myStyle, 0);
styleModule.lv_obj_remove_style_all(obj);
styleModule.lv_style_reset(myStyle);

⚙️ بخش سوم: توابع کمکی

🎨 تبدیل رنگ‌های LVGL

var red = lv.lv_color_hex(0xFF0000);
styleModule.set_style_bg_color(style, red);

📊 استفاده در حلقه اصلی برنامه

while (true) {
    Timer.delay(1000);

    if (GPIO.readButton(GPIO.Buttons.BACK)) {
        styleModule.lv_obj_clean(lv.lv_scr_act());
        break;
    }
}

🛠️ نمونه کد کامل رابط کاربری در ESP32 EVM LVGL

print("=== UI Sample ===");

var lv = require('@native.lvgl');
var styleModule = require('@native.lv_style');

var scr = lv.lv_scr_act();

// استایل اصلی
var mainStyle = styleModule.lv_style_create();
styleModule.set_style_bg_color(mainStyle, 0x000033);
styleModule.set_style_bg_opa(mainStyle, 255);
styleModule.set_style_radius(mainStyle, 15);

// استایل متن
var textStyle = styleModule.lv_style_create();
styleModule.set_style_text_color(textStyle, 0x00FFFF);

// کانتینر
var container = lv.lv_obj_create(scr);
lv.lv_obj_set_size(container, 160, 100);
lv.lv_obj_center(container);
lv.lv_obj_add_style(container, mainStyle, 0);

// لیبل
var label = lv.lv_label_create(container);
lv.lv_label_set_text(label, "سلام از شاپ الکترونیک");
lv.lv_obj_add_style(label, textStyle, 0);
lv.lv_obj_center(label);

⚠️ بهترین روش‌ها (Best Practices)

✅ کارهای صحیح

• حذف استایل بعد از استفاده
• حذف فرزندان قبل از والد
• استفاده از رنگ‌های هگزادسیمال

❌ اشتباهات رایج

• فراموش کردن lv_style_destroy
• حذف والد قبل از فرزندان
• استفاده همزمان از استایل‌های متناقض

🔍 عیب‌یابی سریع ESP32 EVM LVGL

📦 لینک‌های مرجع و منابع

🔗 مخزن گیت‌هاب ESP32 EVM:
https://github.com/hadipic/esp32-evm-bin?tab=readme-ov-file

🔗 کانال تلگرام EVM:
https://t.me/esp32_evm

🔗 معرفی ماشین مجازی EVM در شاپ الکترونیک:
https://shop-electronic.ir/%d9%85%d8%a7%d8%b4%db%8c%d9%86-%d9%85%d8%ac%d8%a7%d8%b2%db%8c-%d8%ac%d8%a7%d9%88%d8%a7-%d8%a8%d8%b1%d8%a7%d9%8a-%d8%a7%d9%85%d8%a8%d8%af-%d8%a8%d8%b1%d8%af%d9%87%d8%a7-evm-embedded-virtual-machi/

🎯 جمع‌بندی نهایی

مدیریت صحیح استایل‌ها در EVM JavaScript و LVGL باعث می‌شود رابط کاربری شما:

• زیباتر
• پایدارتر
• کم‌مصرف‌تر
• و حرفه‌ای‌تر

باشد. با رعایت اصول این آموزش، می‌توانید در پروژه‌های ESP32 + EVM + LCD رابط‌های گرافیکی صنعتی و تجاری بسازید.