Toggle Switch

Lab 4: Switch Toggle Control

Week 3 Part I - LVGL Basics

---

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

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

Switch Widget เป็นตัวควบคุมสถานะ Binary (ON/OFF) ที่ใช้กันมากที่สุดในระบบ Embedded:

• Industrial Control: ควบคุมเครื่องจักรในโรงงาน เปิด/ปิด Motor, Valve, Heater

• Smart Home: สวิตช์ไฟ พัดลม เครื่องปรับอากาศผ่าน Touch Panel

• IoT Gateway: เปิด/ปิด Module ต่าง ๆ เช่น WiFi, Bluetooth, Sensor

• GPIO Mapping: Switch Widget บน UI สะท้องสถานะ GPIO pin จริง (HIGH/LOW)

ในงาน HMI (Human-Machine Interface) จริง ๆ switch เป็น widget ที่ operator ใช้บ่อยที่สุด เพราะมองเห็นสถานะชัดเจนทั้งจากรูปร่างและสี ไม่ต้องเดาว่าเปิดหรือปิดอยู่

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

1. Switch Widget: สร้าง toggle switch ด้วย lv_switch_create()

2. State Management: ตรวจสอบ/เปลี่ยนสถานะด้วย lv_obj_has_state(), lv_obj_add_state(), lv_obj_clear_state()

3. LV_EVENT_VALUE_CHANGED: ตอบสนองเมื่อ switch ถูก toggle

4. LED Synchronization: ซิงค์สถานะ Switch กับ LED Widget

5. Switch Styling: กำหนดสี ON/OFF และรูปแบบ knob

6. Programmatic Control: ควบคุม switch จาก code (ไม่ใช่จาก touch)

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

สร้าง Switch ที่ควบคุม Virtual LED พร้อมแสดงสถานะ GPIO (HIGH/LOW) จากนั้นฝึกสร้าง Device Power Panel สำหรับควบคุมอุปกรณ์หลายตัวพร้อมกัน

---

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

2.1 Switch Widget Architecture

┌─────────────────────────────────────────────────────────┐
│                  SWITCH WIDGET                          │
├─────────────────────────────────────────────────────────┤
│                                                         │
│   OFF State:              ON State:                     │
│   ┌─────────────────┐    ┌─────────────────┐            │
│   │  ●          ░░░░│    │░░░░          ●  │            │
│   └─────────────────┘    └─────────────────┘            │
│   LV_STATE_DEFAULT       LV_STATE_CHECKED               │
│                                                         │
│   Properties:                                           │
│   ├── State: CHECKED or DEFAULT (unchecked)             │
│   ├── Disabled: Can be grayed out                       │
│   └── Color: Customizable for both states               │
│                                                         │
│   Event:                                                │
│   └── LV_EVENT_VALUE_CHANGED: When toggled              │
│                                                         │
└─────────────────────────────────────────────────────────┘

2.2 State Checking Pattern

┌─────────────────────────────────────────────────────────┐
│              STATE CHECKING METHODS                     │
├─────────────────────────────────────────────────────────┤
│                                                         │
│   Method 1: lv_obj_has_state() ← Recommended            │
│   ─────────────────────────────                         │
│   bool is_on = lv_obj_has_state(sw, LV_STATE_CHECKED);  │
│                                                         │
│   Method 2: lv_obj_get_state()                          │
│   ─────────────────────────────                         │
│   lv_state_t state = lv_obj_get_state(sw);              │
│   bool is_on = (state & LV_STATE_CHECKED);              │
│                                                         │
│   Common States:                                        │
│   ├── LV_STATE_DEFAULT:  ไม่มี state พิเศษ                 │
│   ├── LV_STATE_CHECKED:  ถูกเลือก (ON)                    │
│   ├── LV_STATE_FOCUSED:  มี focus                        │
│   ├── LV_STATE_PRESSED:  กำลังกด                         │
│   └── LV_STATE_DISABLED: ถูก disable                     │
│                                                         │
└─────────────────────────────────────────────────────────┘

2.3 GPIO Simulation Concept

┌─────────────────────────────────────────────────────────┐
│               GPIO ↔ SWITCH MAPPING                     │
├─────────────────────────────────────────────────────────┤
│                                                         │
│   UI (Switch)         →    Hardware (GPIO)              │
│   ────────────────────────────────────────────          │
│                                                         │
│   ┌──────────────┐         ┌──────────────┐             │
│   │ Switch OFF   │    ══>  │ GPIO = LOW   │ = 0V        │
│   │ (unchecked)  │         │ LED OFF      │             │
│   └──────────────┘         └──────────────┘             │
│                                                         │
│   ┌──────────────┐         ┌──────────────┐             │
│   │ Switch ON    │    ══>  │ GPIO = HIGH  │ = 3.3V      │
│   │ (checked)    │         │ LED ON       │             │
│   └──────────────┘         └──────────────┘             │
│                                                         │
│   In Real Hardware (Week 3 Part II):                    │
│   cyhal_gpio_write(LED_PIN, is_checked);                │
│                                                         │
└─────────────────────────────────────────────────────────┘

2.4 Program Flowchart

┌─────────────────────────────────────────────────────────┐
│                  PROGRAM FLOW                           │
├─────────────────────────────────────────────────────────┤
│                                                         │
│                    ┌─────────┐                          │
│                    │  Start  │                          │
│                    └────┬────┘                          │
│                         │                               │
│                         ▼                               │
│              ┌─────────────────────┐                    │
│              │ Create LED          │                    │
│              │ (Initial: OFF)      │                    │
│              └──────────┬──────────┘                    │
│                         │                               │
│                         ▼                               │
│              ┌─────────────────────┐                    │
│              │ Create Switch       │                    │
│              │ (Initial: unchecked)│                    │
│              └──────────┬──────────┘                    │
│                         │                               │
│                         ▼                               │
│              ┌─────────────────────┐                    │
│              │ Create Status Label │                    │
│              │ "GPIO State: LOW"   │                    │
│              └──────────┬──────────┘                    │
│                         │                               │
│                         ▼                               │
│              ┌─────────────────────┐                    │
│              │ LVGL Main Loop      │◄──────────┐        │
│              └──────────┬──────────┘           │        │
│                         │                      │        │
│                    User toggles                │        │
│                    switch                      │        │
│                         │                      │        │
│                         ▼                      │        │
│              ┌─────────────────────┐           │        │
│              │ VALUE_CHANGED Event │           │        │
│              └──────────┬──────────┘           │        │
│                         │                      │        │
│                         ▼                      │        │
│              ┌─────────────────────┐           │        │
│              │ Check state:        │           │        │
│              │ lv_obj_has_state()  │           │        │
│              └──────────┬──────────┘           │        │
│                         │                      │        │
│           ┌─────────────┴─────────────┐        │        │
│           │                           │        │        │
│           ▼                           ▼        │        │
│    ┌────────────┐              ┌────────────┐  │        │
│    │ CHECKED:   │              │ UNCHECKED: │  │        │
│    │ LED ON     │              │ LED OFF    │  │        │
│    │ "HIGH"     │              │ "LOW"      │  │        │
│    └─────┬──────┘              └─────┬──────┘  │        │
│          │                           │         │        │
│          └───────────────────────────┘         │        │
│                         │                      │        │
│                         └──────────────────────┘        │
│                                                         │
└─────────────────────────────────────────────────────────┘

---

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

3.1 Switch Creation & Control

Function	Description	Return
lv_switch_create(parent)	สร้าง Switch widget	lv_obj_t *
lv_obj_add_state(sw, LV_STATE_CHECKED)	ตั้งค่าสถานะ ON	void
lv_obj_clear_state(sw, LV_STATE_CHECKED)	ตั้งค่าสถานะ OFF	void
lv_obj_has_state(sw, LV_STATE_CHECKED)	ตรวจว่า ON หรือ OFF	bool
lv_obj_add_state(sw, LV_STATE_DISABLED)	Disable switch (กดไม่ได้)	void

3.2 LED Widget Functions

Function	Description	Parameters
lv_led_create(parent)	สร้าง LED widget	parent object
lv_led_on(led)	เปิด LED (สว่างเต็ม)	led object
lv_led_off(led)	ปิด LED (หรี่สุด)	led object
lv_led_set_color(led, color)	ตั้งสี LED	led, lv_color_t
lv_led_set_brightness(led, bright)	ตั้งความสว่าง 0-255	led, uint8_t

3.3 Event Handling

Function	Description	Return
lv_obj_add_event_cb(obj, cb, event, user_data)	ลงทะเบียน callback	void
lv_event_get_target(e)	ได้ object ที่ trigger event	lv_obj_t *
lv_event_get_user_data(e)	ได้ user_data ที่ส่งมา	void *

3.4 Switch vs Button Comparison

Feature	Button	Switch
Action	Click (momentary)	Toggle (latching)
State	Pressed/Released	ON/OFF
Event	LV_EVENT_CLICKED	LV_EVENT_VALUE_CHANGED
Use Case	Action trigger	Setting toggle
Visual	Text label	Sliding knob

---

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

4.1 Complete Code - part1_ex4_switch_toggle()

จากไฟล์ part1_examples.c:

/*******************************************************************************
 * Example 4: Switch Widget (ON/OFF Toggle)
 *
 * Learning: lv_switch_create, LV_STATE_CHECKED, LV_EVENT_VALUE_CHANGED
 * Platform: PSoC Edge E84 + LVGL v9.2.0
 ******************************************************************************/

/* Global variables สำหรับ update จาก callback */
static lv_obj_t * ex4_status_label;
static lv_obj_t * ex4_led;

/* Switch callback - เรียกทุกครั้งที่ user toggle switch */
static void ex4_switch_cb(lv_event_t * e)
{
    lv_obj_t * sw = lv_event_get_target(e);
    bool is_checked = lv_obj_has_state(sw, LV_STATE_CHECKED);

    if(is_checked) {
        lv_label_set_text(ex4_status_label, "GPIO State: HIGH (ON)");
        lv_led_on(ex4_led);
        printf("Switch ON - GPIO would be HIGH\r\n");
    } else {
        lv_label_set_text(ex4_status_label, "GPIO State: LOW (OFF)");
        lv_led_off(ex4_led);
        printf("Switch OFF - GPIO would be LOW\r\n");
    }
}

void part1_ex4_switch_toggle(void)
{
    /* [1] Background - สีเข้มสำหรับ dark theme */
    lv_obj_set_style_bg_color(lv_screen_active(),
                              lv_color_hex(0x16213e),
                              LV_PART_MAIN);

    /* [2] Title */
    lv_obj_t * title = lv_label_create(lv_screen_active());
    lv_label_set_text(title, "Part 1 - Example 4: Switch Control");
    lv_obj_set_style_text_color(title, lv_color_hex(0xFFFFFF), 0);
    lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 20);

    /* [3] LED indicator - เริ่มที่ OFF */
    ex4_led = lv_led_create(lv_screen_active());
    lv_obj_set_size(ex4_led, 60, 60);
    lv_obj_align(ex4_led, LV_ALIGN_CENTER, 0, -60);
    lv_led_set_color(ex4_led, lv_palette_main(LV_PALETTE_YELLOW));
    lv_led_off(ex4_led);

    /* [4] Label ใต้ LED */
    lv_obj_t * led_label = lv_label_create(lv_screen_active());
    lv_label_set_text(led_label, "Virtual LED");
    lv_obj_set_style_text_color(led_label, lv_color_hex(0xFFFFFF), 0);
    lv_obj_align_to(led_label, ex4_led, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);

    /* [5] Switch - สร้าง + ลงทะเบียน callback */
    lv_obj_t * sw = lv_switch_create(lv_screen_active());
    lv_obj_set_size(sw, 80, 40);
    lv_obj_align(sw, LV_ALIGN_CENTER, 0, 40);
    lv_obj_add_event_cb(sw, ex4_switch_cb, LV_EVENT_VALUE_CHANGED, NULL);

    /* [6] Status label - แสดง GPIO state */
    ex4_status_label = lv_label_create(lv_screen_active());
    lv_label_set_text(ex4_status_label, "GPIO State: LOW (OFF)");
    lv_obj_set_style_text_color(ex4_status_label, lv_color_hex(0x00FF00), 0);
    lv_obj_align(ex4_status_label, LV_ALIGN_CENTER, 0, 100);

    /* [7] Description */
    lv_obj_t * desc = lv_label_create(lv_screen_active());
    lv_label_set_text(desc, "Learning: lv_switch_create, LV_STATE_CHECKED\n"
                           "This switch would control a real GPIO in actual hardware");
    lv_obj_set_style_text_color(desc, lv_color_hex(0xAAAAAA), 0);
    lv_obj_set_style_text_align(desc, LV_TEXT_ALIGN_CENTER, 0);
    lv_obj_align(desc, LV_ALIGN_BOTTOM_MID, 0, -45);
}

4.2 Code Breakdown

Part A: Switch Event Callback

static void ex4_switch_cb(lv_event_t * e)
{
    /* [1] ดึง object ที่ trigger event */
    lv_obj_t * sw = lv_event_get_target(e);

    /* [2] ตรวจสอบว่า switch ON หรือ OFF */
    bool is_checked = lv_obj_has_state(sw, LV_STATE_CHECKED);

    /* [3] อัพเดท UI ตาม state */
    if(is_checked) {
        lv_label_set_text(ex4_status_label, "GPIO State: HIGH (ON)");
        lv_led_on(ex4_led);                // LED สว่าง
    } else {
        lv_label_set_text(ex4_status_label, "GPIO State: LOW (OFF)");
        lv_led_off(ex4_led);               // LED ดับ
    }
}

Part B: Switch Creation

/* สร้าง switch พร้อมกำหนดขนาดและตำแหน่ง */
lv_obj_t * sw = lv_switch_create(lv_screen_active());
lv_obj_set_size(sw, 80, 40);                    /* กว้าง 80, สูง 40 */
lv_obj_align(sw, LV_ALIGN_CENTER, 0, 40);       /* กลางจอ เลื่อนลง 40px */

/* ลงทะเบียน callback - เฉพาะ VALUE_CHANGED เท่านั้น */
lv_obj_add_event_cb(sw, ex4_switch_cb, LV_EVENT_VALUE_CHANGED, NULL);

---

5. องค์ความรู้และเทคนิค

5.1 Switch Styling - กำหนดสี ON/OFF

/* สี ON state (checked) - indicator track */
lv_obj_set_style_bg_color(sw, lv_palette_main(LV_PALETTE_GREEN),
                          LV_PART_INDICATOR | LV_STATE_CHECKED);

/* สี OFF state - indicator track */
lv_obj_set_style_bg_color(sw, lv_color_hex(0x666666),
                          LV_PART_INDICATOR);

/* สี knob (ปุ่มกลม) */
lv_obj_set_style_bg_color(sw, lv_color_hex(0xFFFFFF), LV_PART_KNOB);

/* เพิ่ม padding ให้ knob ใหญ่ขึ้น */
lv_obj_set_style_pad_all(sw, 5, LV_PART_KNOB);

5.2 Programmatic State Control

/* เปิด switch จาก code */
lv_obj_add_state(sw, LV_STATE_CHECKED);

/* ปิด switch จาก code */
lv_obj_clear_state(sw, LV_STATE_CHECKED);

/* สลับ (toggle) state */
if(lv_obj_has_state(sw, LV_STATE_CHECKED)) {
    lv_obj_clear_state(sw, LV_STATE_CHECKED);
} else {
    lv_obj_add_state(sw, LV_STATE_CHECKED);
}

/* สำคัญ: การเปลี่ยน state จาก code ไม่ trigger callback!
 * ถ้าต้องการให้ callback ทำงาน ใช้:
 * lv_event_send(sw, LV_EVENT_VALUE_CHANGED, NULL);
 */

5.3 Disable/Enable Switch

/* Disable - switch จะเป็นสีจาง กดไม่ได้ */
lv_obj_add_state(sw, LV_STATE_DISABLED);

/* Enable กลับมา */
lv_obj_clear_state(sw, LV_STATE_DISABLED);

/* ใช้ได้กับสถานการณ์:
 * - ต้อง login ก่อน ถึงจะควบคุมอุปกรณ์ได้
 * - อุปกรณ์เสีย ไม่ให้ user เปิด
 * - Interlock safety (ห้ามเปิดพร้อมกัน)
 */

5.4 User Data Pattern (สำหรับหลาย Switch)

/* เมื่อมี switch หลายตัว ใช้ user_data แยก */
typedef struct {
    lv_obj_t *led;
    const char *name;
} device_t;

static device_t devices[4];

/* ตอนสร้าง - ส่ง pointer ไปกับ callback */
lv_obj_add_event_cb(sw, device_cb,
                   LV_EVENT_VALUE_CHANGED, &devices[i]);

/* ตอนรับ - ดึง pointer กลับ */
static void device_cb(lv_event_t * e)
{
    device_t * dev = (device_t *)lv_event_get_user_data(e);
    printf("Device: %s toggled\n", dev->name);
}

---

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

Exercise 1: Device Power Panel (Intermediate)

สร้าง Smart Home Power Panel ที่มี 4 switches ควบคุมอุปกรณ์ พร้อม LED indicator แต่ละตัว

Requirements:

• 4 อุปกรณ์: Fan, Light, AC, Heater

• แต่ละตัวมี Switch + LED + Label แสดงชื่อและสถานะ

• LED เปลี่ยนสีตามอุปกรณ์ (Fan=Blue, Light=Yellow, AC=Cyan, Heater=Red)

• แสดงจำนวนอุปกรณ์ที่เปิดอยู่ "Active: 2/4"

Expected Output:

+------------------------------------------+
|         Device Power Panel               |
|           Active: 2/4                    |
+------------------------------------------+
|                                          |
|   [O] Fan        [ ==== O ]  OFF         |
|   [*] Light      [ O ==== ]  ON          |
|   [*] AC         [ O ==== ]  ON          |
|   [O] Heater     [ ==== O ]  OFF         |
|                                          |
+------------------------------------------+

Hints:

• ใช้ struct array เก็บข้อมูลแต่ละอุปกรณ์

• ส่ง pointer ไป callback ด้วย user_data

• สร้าง function update_active_count() แยก

---

Exercise 2: Master Switch with Child Switches (Advanced)

สร้าง Master Switch ที่ควบคุม switches ลูกทั้งหมด:

• Master ON --> ลูกทุกตัว ON

• Master OFF --> ลูกทุกตัว OFF

• ลูกแต่ละตัวยังสามารถ toggle เองได้

• แสดงสถานะ "All ON", "All OFF", หรือ "Partial (2/4)"

Expected Output:

+------------------------------------------+
|       Master Switch Control              |
+------------------------------------------+
|                                          |
|  MASTER:  [ O ==== ]  Status: Partial    |
|  --------------------------------------- |
|  CH1  [O]  [ ==== O ]  OFF               |
|  CH2  [*]  [ O ==== ]  ON                |
|  CH3  [*]  [ O ==== ]  ON                |
|  CH4  [O]  [ ==== O ]  OFF               |
|                                          |
+------------------------------------------+

Hints:

• Master switch callback ใช้ loop set state ให้ switches ลูกทั้งหมด

• เรียก lv_obj_invalidate() หลังเปลี่ยน state จาก code

• อัพเดท master label เมื่อ child switch เปลี่ยน

---

7. References

• LVGL Switch Documentation

• LVGL Switch Example

• LVGL State System

---

Previous Lab: Lab 3: LED Widget Control Next Lab: Lab 5: GPIO Dashboard