LED

Lab 3: LED Widget Control

1. โครงสร้างภาพรวมของ Lab

Why? - ทำไมต้องเรียนรู้เรื่องนี้

LED Widget เป็นเครื่องมือสำคัญสำหรับแสดงสถานะ:

• Visual Feedback: แสดงสถานะ ON/OFF อย่างชัดเจน

• Status Indicator: ใช้แสดงสถานะ GPIO, Connection, Error

• Brightness Control: สามารถควบคุมความสว่างได้ (0-255)

• Multiple Colors: รองรับสีต่างๆ ตาม Palette

What? - จะได้เรียนรู้อะไร

1. LED Widget: สร้างและควบคุม LED ด้วย LVGL

2. ON/OFF Control: ใช้ lv_led_on() และ lv_led_off()

3. Brightness: ปรับความสว่างด้วย lv_led_set_brightness()

4. Slider Widget: ควบคุมค่าต่อเนื่องด้วย Slider

5. Multiple Callbacks: ผูกหลาย callback กับหลาย widget

ฟังก์ชัน	หน้าที่
lv_led_create()	สร้าง Virtual LED widget
lv_led_on() / lv_led_off()	เปิด/ปิด LED
lv_led_set_brightness()	ปรับความสว่าง (0-255)
lv_led_set_color()	เปลี่ยนสี LED
lv_slider_create()	สร้าง Slider widget
lv_slider_set_range()	กำหนดค่า min-max
lv_slider_get_value()	อ่านค่าปัจจุบัน
LV_EVENT_VALUE_CHANGED	Event เมื่อค่า Slider เปลี่ยน

How? - ทำอย่างไร

• สร้าง Virtual LED ที่ควบคุมได้ด้วยปุ่ม ON/OFF และ Slider ปรับความสว่าง

---

2. หลักการทำงานและ Flowchart

2.1 LED Widget Architecture

┌─────────────────────────────────────────────────────────┐
│                   LED WIDGET                            │
├─────────────────────────────────────────────────────────┤
│                                                         │
│   ┌─────────────────────────────────────┐               │
│   │           LED Widget                │               │
│   │  ┌───────────────────────────────┐  │               │
│   │  │         Visual LED            │  │               │
│   │  │                               │  │               │
│   │  │   Color:  lv_led_set_color()  │  │               │
│   │  │   State:  ON / OFF            │  │               │
│   │  │   Bright: 0-255               │  │               │
│   │  │                               │  │               │
│   │  └───────────────────────────────┘  │               │
│   └─────────────────────────────────────┘               │
│                                                         │
│   Brightness Levels:                                    │
│   ├── 0:   OFF (completely dark)                        │
│   ├── 128: Mid brightness (50%)                         │
│   └── 255: Full brightness (100%)                       │
│                                                         │
│   ⚠️ NOTE: This is a VIRTUAL LED (UI only)              │
│            Not the physical LED on the board!           │
│                                                         │
└─────────────────────────────────────────────────────────┘

2.2 Slider Widget Architecture

┌─────────────────────────────────────────────────────────┐
│                  SLIDER WIDGET                          │
├─────────────────────────────────────────────────────────┤
│                                                         │
│   ┌─────────────────────────────────────────────┐       │
│   │    ●════════════════════○                   │       │
│   │    │                    │                   │       │
│   │  min                   max                  │       │
│   └─────────────────────────────────────────────┘       │
│                                                         │
│   Properties:                                           │
│   ├── Range: min to max (default 0-100)                 │
│   ├── Value: current position                           │
│   └── Mode: Normal or Range                             │
│                                                         │
│   Events:                                               │
│   ├── LV_EVENT_VALUE_CHANGED: Value is changing         │
│   └── LV_EVENT_RELEASED: User released slider           │
│                                                         │
│   Parts:                                                │
│   ├── LV_PART_MAIN:      Background track               │
│   ├── LV_PART_INDICATOR: Filled part                    │
│   └── LV_PART_KNOB:      The draggable knob             │
│                                                         │
└─────────────────────────────────────────────────────────┘

2.3 Program Flowchart

┌─────────────────────────────────────────────────────────┐
│                  PROGRAM FLOW                           │
├─────────────────────────────────────────────────────────┤
│                                                         │
│                    ┌─────────┐                          │
│                    │  Start  │                          │
│                    └────┬────┘                          │
│                         │                               │
│     ┌───────────────────┼───────────────────┐           │
│     │                   │                   │           │
│     ▼                   ▼                   ▼           │
│ ┌─────────┐      ┌───────────┐       ┌──────────┐       │
│ │ Create  │      │ Create ON │       │ Create   │       │
│ │   LED   │      │ OFF Btns  │       │ Slider   │       │
│ └────┬────┘      └─────┬─────┘       └────┬─────┘       │
│      │                 │                  │             │
│      │                 │                  │             │
│      └─────────────────┼──────────────────┘             │
│                        │                                │
│                        ▼                                │
│              ┌─────────────────────┐                    │
│              │   LVGL Main Loop    │◄──────────┐        │
│              └─────────┬───────────┘           │        │
│                        │                       │        │
│         ┌──────────────┼──────────────┐        │        │
│         │              │              │        │        │
│    ON Button      OFF Button     Slider        │        │
│    Clicked        Clicked        Changed       │        │
│         │              │              │        │        │
│         ▼              ▼              ▼        │        │
│    ┌─────────┐   ┌──────────┐  ┌────────────┐  │        │
│    │lv_led_  │   │lv_led_   │  │lv_led_set_ │  │        │
│    │  on()   │   │  off()   │  │brightness()│  │        │
│    └────┬────┘   └────┬─────┘  └─────┬──────┘  │        │
│         │             │              │         │        │
│         └─────────────┴──────────────┘         │        │
│                        │                       │        │
│                        ▼                       │        │
│              ┌─────────────────────┐           │        │
│              │  Update UI Labels   │───────────┘        │
│              └─────────────────────┘                    │
│                                                         │
└─────────────────────────────────────────────────────────┘

---

3. ฟังก์ชันสำคัญ (API Reference)

3.1 LED Widget Functions

ฟังก์ชัน	พารามิเตอร์	คำอธิบาย
lv_led_create(parent)	parent object	สร้าง LED widget
lv_led_on(led)	led object	เปิด LED (brightness = 255)
lv_led_off(led)	led object	ปิด LED (brightness = 0)
lv_led_toggle(led)	led object	สลับ ON/OFF
lv_led_set_brightness(led, bright)	led, 0-255	กำหนดความสว่าง
lv_led_get_brightness(led)	led object	อ่านค่าความสว่าง
lv_led_set_color(led, color)	led, lv_color_t	เปลี่ยนสี LED

3.2 Slider Widget Functions

ฟังก์ชัน	พารามิเตอร์	คำอธิบาย
lv_slider_create(parent)	parent object	สร้าง Slider widget
lv_slider_set_range(slider, min, max)	slider, min, max	กำหนดช่วงค่า
lv_slider_set_value(slider, value, anim)	slider, value, LV_ANIM_ON/OFF	กำหนดค่าปัจจุบัน
lv_slider_get_value(slider)	slider object	อ่านค่าปัจจุบัน
lv_obj_set_width(slider, w)	slider, width_px	กำหนดความกว้าง

3.3 Style Functions ที่เกี่ยวข้อง

ฟังก์ชัน	คำอธิบาย
lv_obj_set_size(led, w, h)	กำหนดขนาด LED (ปกติสี่เหลี่ยมจัตุรัส เช่น 80x80)
lv_obj_set_style_bg_color(btn, color, 0)	เปลี่ยนสีปุ่ม ON/OFF
lv_obj_set_style_pad_hor(btn, px, 0)	padding ซ้าย-ขวาของปุ่ม
lv_obj_set_style_pad_ver(btn, px, 0)	padding บน-ล่างของปุ่ม

3.4 Slider Parts (สำหรับ Style ขั้นสูง)

Part	คำอธิบาย
LV_PART_MAIN	พื้นหลัง track ของ Slider
LV_PART_INDICATOR	ส่วนที่เติมสี (จาก min ถึง current value)
LV_PART_KNOB	ปุ่มกลมที่ผู้ใช้ลาก

---

4. โค้ดตัวอย่าง (Code Examples)

4.1 โค้ดอ้างอิง: part1_ex3_led_control()

จากไฟล์ part1_examples.c:

static lv_obj_t * ex3_led;
static lv_obj_t * ex3_brightness_label;
static lv_obj_t * slider_label;

static void ex3_on_btn_cb(lv_event_t * e)
{
    (void)e;
    lv_led_on(ex3_led);
    lv_label_set_text(ex3_brightness_label, "Brightness: 255 (ON)");
}

static void ex3_off_btn_cb(lv_event_t * e)
{
    (void)e;
    lv_led_off(ex3_led);
    lv_label_set_text(ex3_brightness_label, "Brightness: 0 (OFF)");
}

static void ex3_slider_cb(lv_event_t * e)
{
    lv_obj_t * slider = lv_event_get_target(e);
    int32_t value = lv_slider_get_value(slider);

    /* Update percentage label (0-255 -> 0-100%) */
    int percent = (value * 100) / 255;
    lv_label_set_text_fmt(slider_label, "%d%%", percent);

    lv_led_set_brightness(ex3_led, (uint8_t)value);
    lv_label_set_text_fmt(ex3_brightness_label, "Brightness: %d",
                          (int)value);
}

void part1_ex3_led_control(void)
{
    /* Background */
    lv_obj_set_style_bg_color(lv_screen_active(),
                              lv_color_hex(0x0f0f23), LV_PART_MAIN);

    /* Title */
    lv_obj_t * title = lv_label_create(lv_screen_active());
    lv_label_set_text(title, "Part 1 - Example 3: LED Widget");
    lv_obj_set_style_text_color(title, lv_color_hex(0xFFFFFF), 0);
    lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 20);

    /* Create LED widget */
    ex3_led = lv_led_create(lv_screen_active());
    lv_obj_set_size(ex3_led, 80, 80);
    lv_obj_align(ex3_led, LV_ALIGN_CENTER, 0, -70);
    lv_led_set_color(ex3_led, lv_palette_main(LV_PALETTE_GREEN));
    lv_led_set_brightness(ex3_led, 150);

    /* Brightness label */
    ex3_brightness_label = lv_label_create(lv_screen_active());
    lv_label_set_text(ex3_brightness_label, "Brightness: 150");
    lv_obj_set_style_text_color(ex3_brightness_label,
                                lv_color_hex(0xFFFFFF), 0);
    lv_obj_align(ex3_brightness_label, LV_ALIGN_CENTER, 0, 0);

    /* ON Button */
    lv_obj_t * btn_on = lv_button_create(lv_screen_active());
    lv_obj_add_event_cb(btn_on, ex3_on_btn_cb, LV_EVENT_CLICKED, NULL);
    lv_obj_align(btn_on, LV_ALIGN_CENTER, -60, 50);
    lv_obj_set_style_bg_color(btn_on,
                              lv_palette_main(LV_PALETTE_GREEN), 0);
    lv_obj_set_style_pad_hor(btn_on, 30, 0);
    lv_obj_set_style_pad_ver(btn_on, 15, 0);

    lv_obj_t * label_on = lv_label_create(btn_on);
    lv_label_set_text(label_on, "ON");
    lv_obj_center(label_on);

    /* OFF Button */
    lv_obj_t * btn_off = lv_button_create(lv_screen_active());
    lv_obj_add_event_cb(btn_off, ex3_off_btn_cb, LV_EVENT_CLICKED, NULL);
    lv_obj_align(btn_off, LV_ALIGN_CENTER, 60, 50);
    lv_obj_set_style_bg_color(btn_off,
                              lv_palette_main(LV_PALETTE_RED), 0);
    lv_obj_set_style_pad_hor(btn_off, 30, 0);
    lv_obj_set_style_pad_ver(btn_off, 15, 0);

    lv_obj_t * label_off = lv_label_create(btn_off);
    lv_label_set_text(label_off, "OFF");
    lv_obj_center(label_off);

    /* Brightness Slider */
    lv_obj_t * slider = lv_slider_create(lv_screen_active());
    lv_obj_set_width(slider, 200);
    lv_obj_align(slider, LV_ALIGN_CENTER, 0, 110);
    lv_slider_set_range(slider, 0, 255);
    lv_slider_set_value(slider, 150, LV_ANIM_OFF);
    lv_obj_add_event_cb(slider, ex3_slider_cb,
                        LV_EVENT_VALUE_CHANGED, NULL);

    /* Slider percentage label */
    slider_label = lv_label_create(lv_screen_active());
    lv_label_set_text(slider_label, "59%");
    lv_obj_set_style_text_color(slider_label, lv_color_hex(0xFFFFFF), 0);
    lv_obj_align_to(slider_label, slider,
                    LV_ALIGN_OUT_BOTTOM_MID, 0, 5);
}

วิเคราะห์โครงสร้าง:

องค์ประกอบ	ตำแหน่ง	หน้าที่
Title	TOP_MID, y=20	ชื่อ Example
LED (80x80)	CENTER, y=-70	แสดงสถานะ Virtual LED
Brightness Label	CENTER, y=0	แสดงค่า Brightness 0-255
ON/OFF Buttons	CENTER, y=50, x=-60/+60	เปิด/ปิด LED
Slider (w=200)	CENTER, y=110	ปรับ brightness ต่อเนื่อง
Slider Label	ด้านล่าง Slider	แสดง % (0-100%)

4.2 LED สีต่างๆ

/* LED สีแดง */
lv_obj_t * led_r = lv_led_create(lv_screen_active());
lv_led_set_color(led_r, lv_palette_main(LV_PALETTE_RED));
lv_led_on(led_r);

/* LED สีจาก Hex */
lv_obj_t * led_custom = lv_led_create(lv_screen_active());
lv_led_set_color(led_custom, lv_color_hex(0xFF6600));   /* สีส้ม */
lv_led_set_brightness(led_custom, 200);

4.3 Slider กับ Custom Range

/* Slider สำหรับอุณหภูมิ 15-35 องศา */
lv_obj_t * temp_slider = lv_slider_create(lv_screen_active());
lv_slider_set_range(temp_slider, 15, 35);
lv_slider_set_value(temp_slider, 25, LV_ANIM_OFF);

/* Slider สำหรับ PWM duty cycle 0-100% */
lv_obj_t * pwm_slider = lv_slider_create(lv_screen_active());
lv_slider_set_range(pwm_slider, 0, 100);
lv_slider_set_value(pwm_slider, 50, LV_ANIM_OFF);

4.4 Slider Style Customization

/* เปลี่ยนสี Slider */
lv_obj_t * slider = lv_slider_create(lv_screen_active());
lv_obj_set_width(slider, 250);

/* สี track (พื้นหลัง) */
lv_obj_set_style_bg_color(slider, lv_color_hex(0x333333), LV_PART_MAIN);

/* สี indicator (ส่วนที่เติม) */
lv_obj_set_style_bg_color(slider,
    lv_palette_main(LV_PALETTE_BLUE), LV_PART_INDICATOR);

/* สี knob (ปุ่มกลม) */
lv_obj_set_style_bg_color(slider,
    lv_palette_main(LV_PALETTE_CYAN), LV_PART_KNOB);
lv_obj_set_style_pad_all(slider, 6, LV_PART_KNOB);  /* ขนาด knob */

---

5. องค์ความรู้และเทคนิค (Patterns & Tips)

5.1 Multiple Callbacks ควบคุม Widget เดียวกัน

/*
 * Pattern: หลาย Callback อัปเดต Widget ร่วม
 *
 * LED (global)  <--- on_btn_cb()   (set 255)
 *               <--- off_btn_cb()  (set 0)
 *               <--- slider_cb()   (set 0-255)
 *
 * สิ่งที่ต้องระวัง:
 * - LED object ต้องเป็น static/global เพื่อให้ทุก callback เข้าถึงได้
 * - Brightness label ก็ต้อง global เพื่ออัปเดตจากทุก callback
 */

5.2 ข้อผิดพลาดที่พบบ่อย

ข้อผิดพลาด	สาเหตุ	วิธีแก้
LED ไม่เปลี่ยนสี	ตั้งสีหลัง lv_led_on()	ตั้งสีก่อน set_brightness
Slider ไม่ตอบสนอง	ลืม add_event_cb	ตรวจสอบ LV_EVENT_VALUE_CHANGED
Label ไม่อัปเดต	ใช้ local variable แทน static/global	ใช้ static lv_obj_t *
Virtual LED สับสนกับ Hardware LED	ไม่ได้อธิบายในโค้ด	comment ชัดเจนว่าเป็น virtual
Slider range ไม่ตรง	ลืม lv_slider_set_range()	default คือ 0-100, LED ต้อง 0-255
Percentage คำนวณผิด	ใช้ integer division	(value * 100) / 255 ไม่ใช่ value / 255 * 100

5.3 Virtual LED vs. Hardware LED

    Virtual LED (LVGL)                  Hardware LED (GPIO)
    +-------------------+              +-------------------+
    | lv_led_create()   |              | aic_gpio_init()   |
    | lv_led_on()       |              | aic_gpio_led_set()|
    | lv_led_off()      |              |                   |
    | lv_led_set_       |              | ใช้ใน Part II     |
    |   brightness()    |              | (Ex 6-11)         |
    +-------------------+              +-------------------+
    |  แสดงบนจอเท่านั้น   |              |  ควบคุม LED จริง    |
    |  ใช้ใน Simulator   |              |  บนบอร์ด           |
    +-------------------+              +-------------------+

    เมื่อเรียนต่อ Part II:
    Slider --> callback --> lv_led_set_brightness()    (UI update)
                       --> aic_gpio_led_set(pwm_val)   (Hardware)

5.4 Brightness to Percentage Conversion

/* Brightness 0-255 to Percentage 0-100% */
int percent = (brightness * 100) / 255;

/* Percentage 0-100% to Brightness 0-255 */
int brightness = (percent * 255) / 100;

/* ตัวอย่างค่า: */
/*   0 -> 0%,  64 -> 25%,  128 -> 50%,  192 -> 75%,  255 -> 100% */

5.5 Timer Pattern (สำหรับ animation)

/* ใช้ lv_timer เพื่อทำ animation (เช่น LED กระพริบ) */
static void blink_timer_cb(lv_timer_t * timer)
{
    lv_obj_t * led = (lv_obj_t *)lv_timer_get_user_data(timer);
    lv_led_toggle(led);   /* สลับ ON/OFF */
}

/* สร้าง Timer ให้ LED กระพริบทุก 500ms */
lv_timer_create(blink_timer_cb, 500, my_led);
/*                              ^     ^
 *                              |     |
 *                         ทุก 500ms  user_data = LED object
 */

---

6. แบบฝึกหัด (Exercises)

Exercise 1: RGB LED Mixer - 15-20 นาที

โจทย์: สร้าง RGB Color Mixer ที่มี Slider 3 ตัว (R, G, B) ควบคุมสีของ LED Widget 1 ตัว

ข้อกำหนด:

1. Background สี 0x0f0f23

2. Title "RGB LED Mixer" (font_24, สีขาว, TOP_MID)

3. LED Widget ขนาด 100x100 ตรงกลางด้านบน (CENTER, y=-60)

4. สร้าง Slider 3 ตัว:

   • Red Slider: range 0-255, ค่าเริ่มต้น 255

   • Green Slider: range 0-255, ค่าเริ่มต้น 0

   • Blue Slider: range 0-255, ค่าเริ่มต้น 0

5. แต่ละ Slider มี Label ชื่อสี (R/G/B) ทางซ้าย และ Label ค่า (0-255) ทางขวา

6. เมื่อ Slider เปลี่ยน ให้อัปเดตสี LED ด้วย lv_led_set_color(led, lv_color_make(r, g, b))

7. ความกว้าง Slider = 200px

ผลลัพธ์ที่คาดหวัง:

    +-------------------------------------------+
    |           RGB LED Mixer (ขาว)             |
    |                                           |
    |              +--------+                   |
    |              |  LED   |  (สีเปลี่ยนตาม)      |
    |              +--------+                   |
    |                                           |
    |  R: [==========O=======] 255              |
    |  G: [O=====================] 0            |
    |  B: [O=====================] 0            |
    |                                           |
    +-------------------------------------------+

---

Exercise 2: LED Traffic Light Simulation - 20-25 นาที

โจทย์: สร้างไฟจราจรจำลอง (Traffic Light) ที่มี LED 3 สี (แดง, เหลือง, เขียว) เปลี่ยนสลับอัตโนมัติด้วย Timer พร้อมปุ่ม Start/Stop

ข้อกำหนด:

1. Background สี 0x1a1a2e

2. Title "Traffic Light Simulator" (font_20, สีขาว)

3. LED Widget 3 ตัว จัดเรียงแนวตั้ง (ขนาด 60x60 แต่ละตัว):

   • แดง (ด้านบน)

   • เหลือง (กลาง)

   • เขียว (ด้านล่าง)

4. ใช้ Container สีเทาเข้ม (0x2a2a2a) ขนาด 100x220 เป็นกรอบไฟจราจร

5. ปุ่ม "Start" (สีเขียว) เริ่มจับเวลา / "Stop" (สีแดง) หยุดจับเวลา

6. ใช้ lv_timer_create() สำหรับเปลี่ยนสถานะ:

   • แดง: 3000ms (3 วินาที)

   • เหลือง: 1000ms (1 วินาที)

   • เขียว: 3000ms (3 วินาที)

7. เมื่อไฟเปลี่ยน: LED ที่ active = brightness 255, LED อื่น = brightness 0

8. Label แสดงสถานะ "State: RED (3s)" ด้านล่าง

ผลลัพธ์ที่คาดหวัง:

    +-------------------------------------------+
    |       Traffic Light Simulator (ขาว)       |
    |                                           |
    |          +----------+                     |
    |          |  (R) ON  |                     |
    |          |  (Y) off |                     |
    |          |  (G) off |                     |
    |          +----------+                     |
    |                                           |
    |     [Start (เขียว)]  [Stop (แดง)]          |
    |         State: RED (3s)                   |
    +-------------------------------------------+

---

7. References

• LVGL LED Documentation

• LVGL LED Example

• LVGL Slider Documentation

• LVGL Timer Documentation

---

Previous Lab: Lab 2: Button with Counter Next Lab: Lab 4: Switch Toggle