# 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="/files/dyMUWXyq8KSIBFZbZBp6" 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET 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?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.