> For the complete documentation index, see [llms.txt](https://docs.aic-eec.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.aic-eec.com/interfacing-with-infineon-psoc-tm-edge/hmi-development/gpio-to-hmi-display/ux-ui-workshops/led-and-switch/led.md).

# 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

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

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

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

<figure><img src="https://1856353139-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MClo3nC-1US0rbK8Qau%2Fuploads%2FPkJvk5iCVoV24LQmxymm%2Fweek3_ex3_led_control.gif?alt=media&amp;token=638cf559-f005-4fc2-b828-c970c10d8072" alt=""><figcaption></figcaption></figure>

***

### 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

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

#### 3.2 Slider Widget Functions

<table><thead><tr><th width="363.85443115234375">ฟังก์ชัน</th><th width="190.2528076171875">พารามิเตอร์</th><th>คำอธิบาย</th></tr></thead><tbody><tr><td><code>lv_slider_create(parent)</code></td><td>parent object</td><td>สร้าง Slider widget</td></tr><tr><td><code>lv_slider_set_range(slider, min, max)</code></td><td>slider, min, max</td><td>กำหนดช่วงค่า</td></tr><tr><td><code>lv_slider_set_value(slider, value, anim)</code></td><td>slider, value, LV_ANIM_ON/OFF</td><td>กำหนดค่าปัจจุบัน</td></tr><tr><td><code>lv_slider_get_value(slider)</code></td><td>slider object</td><td>อ่านค่าปัจจุบัน</td></tr><tr><td><code>lv_obj_set_width(slider, w)</code></td><td>slider, width_px</td><td>กำหนดความกว้าง</td></tr></tbody></table>

#### 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`:

```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 สีต่างๆ

```c
/* 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

```c
/* 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

```c
/* เปลี่ยนสี 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 เดียวกัน

```c
/*
 * 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

```c
/* 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)

```c
/* ใช้ 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](https://docs.lvgl.io/9.2/widgets/led.html)
* [LVGL LED Example](https://github.com/lvgl/lvgl/blob/release/v9.2/examples/widgets/led/lv_example_led_1.c)
* [LVGL Slider Documentation](https://docs.lvgl.io/9.2/widgets/slider.html)
* [LVGL Timer Documentation](https://docs.lvgl.io/9.2/overview/timer.html)

***

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