GPIO Dashboard

Lab 9: Hardware GPIO Dashboard

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

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

Dashboard รวมทุก GPIO ไว้ในหน้าจอเดียว:

• Complete Integration: รวม LED + Button + ADC + PWM

• Real-world Application: คล้ายหน้า Control Panel จริง

• Mixed Control: บาง LED ควบคุมได้, บางตัวอ่านจาก Sensor

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

1. Multi-device Control: ควบคุมหลาย device พร้อมกัน

2. Panel Layout: จัด UI เป็น panels แยกตามหน้าที่

3. Mixed Input/Output: ทั้ง read (Button, ADC) และ write (LED)

4. PWM Integration: Blue LED ควบคุมด้วย Potentiometer

---

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

2.1 Dashboard Layout

┌─────────────────────────────────────────────────────────────┐
│              Week 3 Ex9: HW GPIO Dashboard                  │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  [Red LED]    Red    [Switch]    [All ON] [All OFF]         │
│  [Green LED]  Green  [Switch]                               │
│  [Blue LED]   Blue   (POT ctrl)                             │
│                                                             │
│ ┌─────────────────────┐     ┌─────────────────────┐         │
│ │   USER BTN2 (SW4)   │     │   POT -> Blue LED   │         │
│ │                     │     │                     │         │
│ │  ●    Released      │     │  ════════════════   │         │
│ │                     │     │        70%          │         │
│ └─────────────────────┘     └─────────────────────┘         │
│                     (C) 2026 AIC-EEC.com                    │
└─────────────────────────────────────────────────────────────┘

2.2 Control Architecture

┌─────────────────────────────────────────────────────────────┐
│                  CONTROL ARCHITECTURE                       │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  User Controls (Switches)           Sensor Controls         │
│  ─────────────────────────         ─────────────────────    │
│  ┌────────────┐                    ┌────────────┐           │
│  │ Red Switch │──>aic_gpio_led_set │ Button SW4 │           │
│  │ Green Switch│  (toggle ON/OFF)  │ read state │           │
│  └────────────┘                    └────────────┘           │
│                                    ┌────────────┐           │
│  Batch Controls                    │ POT (ADC)  │           │
│  ─────────────────────────         │ read value │           │
│  ┌────────────┐                    └─────┬──────┘           │
│  │  All ON    │──>loop all LEDs         │                   │
│  │  All OFF   │                         ▼                   │
│  └────────────┘                    ┌────────────┐           │
│                                    │ Blue LED   │           │
│                                    │ PWM dimming│           │
│                                    └────────────┘           │
│                                                             │
└─────────────────────────────────────────────────────────────┘

---

3. ฟังก์ชันสำคัญ

3.1 LED Control Summary

LED	Control	API
Red	Switch ON/OFF	aic_gpio_led_set(AIC_LED_RED, bool)
Green	Switch ON/OFF	aic_gpio_led_set(AIC_LED_GREEN, bool)
Blue	POT auto	aic_gpio_pwm_set_brightness(AIC_LED_BLUE, %)

3.2 Input Summary

Input	Method	Update Rate
Button SW4	Polling	100ms
Potentiometer	Polling	100ms

---

4. Code Example

4.1 Data Structure

#define EX9_NUM_TOGGLE_LEDS 2  /* Red and Green */

typedef struct {
    lv_obj_t *led;
    lv_obj_t *sw;
    lv_obj_t *label;
    const char *name;
    bool state;
} ex9_gpio_item_t;

static ex9_gpio_item_t ex9_gpios[EX9_NUM_TOGGLE_LEDS];
static lv_obj_t * ex9_blue_led;  /* Blue LED controlled by POT */

4.2 Switch Callback

static void ex9_switch_cb(lv_event_t * e)
{
    ex9_gpio_item_t * gpio = (ex9_gpio_item_t *)lv_event_get_user_data(e);
    lv_obj_t * sw = lv_event_get_target(e);
    int idx = (int)(gpio - ex9_gpios);

    gpio->state = lv_obj_has_state(sw, LV_STATE_CHECKED);

    /* Update virtual LED */
    if(gpio->state) lv_led_on(gpio->led);
    else lv_led_off(gpio->led);

    /* Control REAL hardware LED */
    aic_gpio_led_set((aic_led_t)idx, gpio->state);
}

4.3 Timer Callback

static void ex9_timer_cb(lv_timer_t * timer)
{
    /* Read button state */
    bool pressed = aic_gpio_button_read(AIC_BTN_USER2);
    // Update button UI...

    /* Read ADC and control Blue LED */
    uint8_t percent = aic_adc_read_percent(AIC_ADC_CH0);

    /* Update Blue LED widget (dimming) */
    uint8_t brightness = (uint8_t)((percent * 255) / 100);
    lv_led_on(ex9_blue_led);
    lv_led_set_brightness(ex9_blue_led, brightness);

    /* Update hardware Blue LED via PWM */
    aic_gpio_pwm_set_brightness(AIC_LED_BLUE, percent);
}

4.4 Batch Control

static void ex9_all_on_cb(lv_event_t * e)
{
    /* Turn on Red and Green */
    for(int i = 0; i < EX9_NUM_TOGGLE_LEDS; i++) {
        ex9_gpios[i].state = true;
        lv_led_on(ex9_gpios[i].led);
        lv_obj_add_state(ex9_gpios[i].sw, LV_STATE_CHECKED);
        aic_gpio_led_set((aic_led_t)i, true);
    }

    /* Set Blue to 100% */
    lv_led_on(ex9_blue_led);
    aic_gpio_pwm_set_brightness(AIC_LED_BLUE, 100);
}

---

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

5.1 Panel-based Layout

/* Button status panel */
lv_obj_t * btn_panel = lv_obj_create(scr);
lv_obj_set_size(btn_panel, 225, 128);
lv_obj_align(btn_panel, LV_ALIGN_BOTTOM_LEFT, 5, -25);
lv_obj_clear_flag(btn_panel, LV_OBJ_FLAG_SCROLLABLE);

/* ADC panel */
lv_obj_t * adc_panel = lv_obj_create(scr);
lv_obj_set_size(adc_panel, 225, 128);
lv_obj_align(adc_panel, LV_ALIGN_BOTTOM_RIGHT, -5, -25);

5.2 LED Dimming Effect

/* Map 0-100% to 0-255 for LVGL brightness */
uint8_t brightness = (uint8_t)((percent * 255) / 100);

/* MUST call lv_led_on() first, then set brightness */
lv_led_on(blue_led);
lv_led_set_brightness(blue_led, brightness);

---

Previous Lab: Lab 8: HW ADC Display Next Lab: Lab 10: CAPSENSE UI Mockup