UX/UI Workshops

1. ภาพรวมการบูรณาการ Sensor กับ LVGL

การเชื่อมโยงองค์ความรู้จากทุกสัปดาห์

┌─────────────────────────────────────────────────────────────────────┐
│                        Week 1 + Week 2 + Week 3-4                   │
│                                                                     │
│  ┌──────────────┐    ┌──────────────┐    ┌───────────────────────┐  │
│  │   Week 1     │    │   Week 2     │    │     Week 3-4          │  │
│  │              │    │              │    │                       │  │
│  │  GPIO ───────┼────┼──────────────┼───►│  Button/Switch/LED    │  │
│  │              │    │              │    │                       │  │
│  │  ADC  ───────┼────┼──────────────┼───►│  Slider/Bar/Arc       │  │
│  │              │    │              │    │                       │  │
│  │              │    │  IMU ────────┼───►│  Chart/Scale/Gauge    │  │
│  │              │    │  (FreeRTOS)  │    │                       │  │
│  └──────────────┘    └──────────────┘    └───────────────────────┘  │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

Sensor → Widget Mapping

Sensor Type	ข้อมูล	Widget ที่เหมาะสม	เหตุผล
ADC	0-4095 (12-bit)	Slider, Bar, Arc	Linear value mapping
Accelerometer	±2g (m/s²)	Chart, Scale, Bar	3-axis real-time
Gyroscope	±2000°/s	Arc, Chart	Angular velocity
Orientation	6 states	Label, LED	Discrete states
Temperature	°C	Scale, Label	Single value

---

2. Slider Widget - ADC Input Visualization

ตัวอย่างจาก: examples/widgets/slider/lv_example_slider_1.c

static lv_obj_t * slider_label;

static void slider_event_cb(lv_event_t * e)
{
    lv_obj_t * slider = lv_event_get_target(e);
    char buf[8];

    /* แปลงค่าเป็น string */
    lv_snprintf(buf, sizeof(buf), "%d%%",
                (int)lv_slider_get_value(slider));

    lv_label_set_text(slider_label, buf);

    /* จัดตำแหน่ง Label ให้ตามติด Slider */
    lv_obj_align_to(slider_label, slider,
                    LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
}

void lv_example_slider_1(void)
{
    /* สร้าง Slider กลางจอ */
    lv_obj_t * slider = lv_slider_create(lv_screen_active());
    lv_obj_center(slider);

    /* ลงทะเบียน Event */
    lv_obj_add_event_cb(slider, slider_event_cb,
                        LV_EVENT_VALUE_CHANGED, NULL);

    /* Animation Duration สำหรับ smooth transition */
    lv_obj_set_style_anim_duration(slider, 2000, 0);

    /* สร้าง Label แสดงค่า */
    slider_label = lv_label_create(lv_screen_active());
    lv_label_set_text(slider_label, "0%");
    lv_obj_align_to(slider_label, slider,
                    LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
}

WHY: ทำไม Slider เหมาะกับ ADC?

• Range 0-100 (default) ใกล้เคียงกับ ADC 0-4095

• มี Knob ที่แสดงตำแหน่งค่าปัจจุบัน

• ผู้ใช้สามารถ interact กลับได้ (set threshold)

HOW: เชื่อมโยง ADC กับ Slider

/* Global slider object */
static lv_obj_t * g_adc_slider = NULL;

/* ADC ค่า 0-4095 → Slider 0-100 */
void update_slider_from_adc(uint16_t adc_value)
{
    if(g_adc_slider != NULL) {
        /* Map 0-4095 → 0-100 */
        int32_t slider_value = (adc_value * 100) / 4095;
        lv_slider_set_value(g_adc_slider, slider_value, LV_ANIM_ON);
    }
}

/* ADC Read Task (จาก Week 1) */
void adc_read_task(void *pvParameters)
{
    for(;;) {
        uint16_t adc_result;

        /* อ่านค่า ADC */
        Cy_SAR_StartConvert(SAR0, CY_SAR_START_CONVERT_SINGLE_SHOT);
        while(Cy_SAR_IsEndConversion(SAR0, CY_SAR_WAIT_FOR_RESULT)
              != CY_SAR_SUCCESS);
        adc_result = Cy_SAR_GetResult16(SAR0, 0);

        /* Update LVGL Slider (ต้องอยู่ใน LVGL context) */
        update_slider_from_adc(adc_result);

        vTaskDelay(pdMS_TO_TICKS(50));
    }
}

CAUTION: ข้อควรระวัง Slider

• LV_ANIM_ON ทำให้ transition smooth แต่เพิ่ม CPU load

• ค่า default range คือ 0-100 (ต้องเปลี่ยนถ้าต้องการอื่น)

• ใช้ lv_slider_set_range() เพื่อเปลี่ยน range

/* เปลี่ยน range เป็น 0-4095 สำหรับ ADC */
lv_slider_set_range(slider, 0, 4095);

---

3. Bar Widget - Progress Display

ตัวอย่างจาก: examples/widgets/bar/lv_example_bar_1.c

void lv_example_bar_1(void)
{
    lv_obj_t * bar1 = lv_bar_create(lv_screen_active());
    lv_obj_set_size(bar1, 200, 20);
    lv_obj_center(bar1);
    lv_bar_set_value(bar1, 70, LV_ANIM_OFF);
}

WHY: ทำไม Bar เหมาะกับ Sensor?

• แสดงค่า Linear ได้ชัดเจน (Battery, Signal strength)

• Read-only (ผู้ใช้ดูอย่างเดียว ไม่ interact)

• ใช้ resources น้อยกว่า Slider

HOW: Bar สำหรับ Multi-Sensor Display

/* แสดง 3 แกน Accelerometer ด้วย Bar */
typedef struct {
    lv_obj_t *bar;
    lv_obj_t *label;
    const char *name;
} axis_bar_t;

static axis_bar_t accel_bars[3];

void create_accelerometer_bars(void)
{
    const char *axis_names[] = {"X:", "Y:", "Z:"};
    lv_color_t axis_colors[] = {
        lv_palette_main(LV_PALETTE_RED),
        lv_palette_main(LV_PALETTE_GREEN),
        lv_palette_main(LV_PALETTE_BLUE)
    };

    for(int i = 0; i < 3; i++) {
        /* Label */
        accel_bars[i].label = lv_label_create(lv_screen_active());
        accel_bars[i].name = axis_names[i];
        lv_label_set_text(accel_bars[i].label, axis_names[i]);
        lv_obj_align(accel_bars[i].label,
                     LV_ALIGN_LEFT_MID, 10, (i - 1) * 40);

        /* Bar */
        accel_bars[i].bar = lv_bar_create(lv_screen_active());
        lv_obj_set_size(accel_bars[i].bar, 200, 25);
        lv_obj_align_to(accel_bars[i].bar, accel_bars[i].label,
                        LV_ALIGN_OUT_RIGHT_MID, 10, 0);

        /* Range: -100 ถึง +100 (แทน -2g ถึง +2g) */
        lv_bar_set_range(accel_bars[i].bar, -100, 100);

        /* สีตามแกน */
        lv_obj_set_style_bg_color(accel_bars[i].bar,
                                  axis_colors[i],
                                  LV_PART_INDICATOR);
    }
}

/* Update จาก IMU (Week 2) */
void update_accel_bars(float x, float y, float z)
{
    /* แปลง m/s² → percent of range */
    /* ถ้า x = 9.81 m/s² (1g) → 50% */
    int32_t x_pct = (int32_t)(x / 19.62f * 100.0f);  /* ±2g */
    int32_t y_pct = (int32_t)(y / 19.62f * 100.0f);
    int32_t z_pct = (int32_t)(z / 19.62f * 100.0f);

    /* Clamp to range */
    x_pct = LV_CLAMP(-100, x_pct, 100);
    y_pct = LV_CLAMP(-100, y_pct, 100);
    z_pct = LV_CLAMP(-100, z_pct, 100);

    lv_bar_set_value(accel_bars[0].bar, x_pct, LV_ANIM_ON);
    lv_bar_set_value(accel_bars[1].bar, y_pct, LV_ANIM_ON);
    lv_bar_set_value(accel_bars[2].bar, z_pct, LV_ANIM_ON);
}

CAUTION: ข้อควรระวัง Bar

• Default range คือ 0-100 (ไม่รองรับค่าลบ)

• ใช้ lv_bar_set_range(bar, min, max) สำหรับค่าลบ

• Update บ่อยเกินไปจะทำให้ animation กระตุก

---

4. Arc Widget - Circular Gauge

ตัวอย่างจาก: examples/widgets/arc/lv_example_arc_1.c

static void value_changed_event_cb(lv_event_t * e)
{
    lv_obj_t * arc = lv_event_get_target(e);
    lv_obj_t * label = lv_event_get_user_data(e);

    /* แสดงค่าใน Label */
    lv_label_set_text_fmt(label, "%" LV_PRId32 "%%",
                          lv_arc_get_value(arc));

    /* หมุน Label ตามตำแหน่ง Arc */
    lv_arc_rotate_obj_to_angle(arc, label, 25);
}

void lv_example_arc_1(void)
{
    lv_obj_t * label = lv_label_create(lv_screen_active());

    /* สร้าง Arc */
    lv_obj_t * arc = lv_arc_create(lv_screen_active());
    lv_obj_set_size(arc, 150, 150);

    /* ตั้งค่ามุมเริ่มต้น */
    lv_arc_set_rotation(arc, 135);
    lv_arc_set_bg_angles(arc, 0, 270);
    lv_arc_set_value(arc, 10);
    lv_obj_center(arc);

    /* ลงทะเบียน Event พร้อมส่ง Label เป็น User Data */
    lv_obj_add_event_cb(arc, value_changed_event_cb,
                        LV_EVENT_VALUE_CHANGED, label);

    /* Trigger event ครั้งแรก */
    lv_obj_send_event(arc, LV_EVENT_VALUE_CHANGED, NULL);
}

WHY: ทำไม Arc เหมาะกับ Gyroscope?

• แสดงมุมได้โดยธรรมชาติ (rotation)

• สวยงามสำหรับ Dashboard

• เหมาะกับค่าที่มี range จำกัด

HOW: Arc สำหรับ IMU Orientation

/* Arc สำหรับแสดง Roll/Pitch/Yaw */
typedef struct {
    lv_obj_t *arc;
    lv_obj_t *label;
    const char *name;
} orientation_arc_t;

static orientation_arc_t orient_arcs[3];

void create_orientation_display(void)
{
    const char *names[] = {"Roll", "Pitch", "Yaw"};
    int x_offsets[] = {-100, 0, 100};

    for(int i = 0; i < 3; i++) {
        /* Title */
        lv_obj_t * title = lv_label_create(lv_screen_active());
        lv_label_set_text(title, names[i]);
        lv_obj_align(title, LV_ALIGN_TOP_MID, x_offsets[i], 10);

        /* Arc */
        orient_arcs[i].arc = lv_arc_create(lv_screen_active());
        lv_obj_set_size(orient_arcs[i].arc, 80, 80);
        lv_obj_align(orient_arcs[i].arc, LV_ALIGN_CENTER,
                     x_offsets[i], 0);

        /* ตั้ง range -180 ถึง +180 องศา */
        lv_arc_set_range(orient_arcs[i].arc, -180, 180);
        lv_arc_set_bg_angles(orient_arcs[i].arc, 0, 360);
        lv_arc_set_rotation(orient_arcs[i].arc, 270);

        /* Value label */
        orient_arcs[i].label = lv_label_create(lv_screen_active());
        lv_label_set_text(orient_arcs[i].label, "0°");
        lv_obj_align_to(orient_arcs[i].label,
                        orient_arcs[i].arc,
                        LV_ALIGN_OUT_BOTTOM_MID, 0, 5);
    }
}

/* Update จาก Gyroscope */
void update_orientation(float roll, float pitch, float yaw)
{
    /* Convert rad/s to degrees (simple integration) */
    static float angles[3] = {0, 0, 0};
    float dt = 0.1f;  /* 100ms update rate */

    angles[0] += roll * dt * 57.2958f;   /* rad/s → deg */
    angles[1] += pitch * dt * 57.2958f;
    angles[2] += yaw * dt * 57.2958f;

    /* Wrap to -180 ~ +180 */
    for(int i = 0; i < 3; i++) {
        while(angles[i] > 180.0f)  angles[i] -= 360.0f;
        while(angles[i] < -180.0f) angles[i] += 360.0f;

        lv_arc_set_value(orient_arcs[i].arc, (int32_t)angles[i]);
        lv_label_set_text_fmt(orient_arcs[i].label,
                              "%.1f°", (double)angles[i]);
    }
}

CAUTION: ข้อควรระวัง Arc

• lv_arc_set_rotation() กำหนดมุมเริ่มต้น (ไม่ใช่มุมปัจจุบัน)

• lv_arc_set_bg_angles() กำหนด background arc span

• ค่าที่ set ต้องอยู่ใน range ไม่งั้นจะ clamp

---

5. Chart Widget - Time-Series Data

ตัวอย่างจาก: examples/widgets/chart/lv_example_chart_1.c

void lv_example_chart_1(void)
{
    /* สร้าง Chart */
    lv_obj_t * chart = lv_chart_create(lv_screen_active());
    lv_obj_set_size(chart, 200, 150);
    lv_obj_center(chart);

    /* ตั้งค่าเป็น Line chart */
    lv_chart_set_type(chart, LV_CHART_TYPE_LINE);

    /* เพิ่ม Data Series สีเขียว (Y-axis หลัก) */
    lv_chart_series_t * ser1 = lv_chart_add_series(
        chart,
        lv_palette_main(LV_PALETTE_GREEN),
        LV_CHART_AXIS_PRIMARY_Y
    );

    /* เพิ่ม Data Series สีแดง (Y-axis รอง) */
    lv_chart_series_t * ser2 = lv_chart_add_series(
        chart,
        lv_palette_main(LV_PALETTE_RED),
        LV_CHART_AXIS_SECONDARY_Y
    );

    /* ดึง pointer ไป array ของ ser2 */
    int32_t * ser2_y_points = lv_chart_get_y_array(chart, ser2);

    /* ใส่ข้อมูล */
    for(uint32_t i = 0; i < 10; i++) {
        /* วิธีที่ 1: ใส่ทีละ point (auto shift) */
        lv_chart_set_next_value(chart, ser1, lv_rand(10, 50));

        /* วิธีที่ 2: Direct array access */
        ser2_y_points[i] = lv_rand(50, 90);
    }

    /* Refresh ถ้าใช้ direct array access */
    lv_chart_refresh(chart);
}

WHY: ทำไม Chart จำเป็นสำหรับ Sensor?

• แสดง Trend ของข้อมูลตามเวลา

• เปรียบเทียบหลาย Sensor พร้อมกัน

• วิเคราะห์ Pattern ได้ง่าย

HOW: Real-time Accelerometer Chart

/* Global Chart และ Series */
static lv_obj_t * g_imu_chart = NULL;
static lv_chart_series_t * g_accel_x_series = NULL;
static lv_chart_series_t * g_accel_y_series = NULL;
static lv_chart_series_t * g_accel_z_series = NULL;

#define CHART_POINT_COUNT   50  /* จำนวน data points */

void create_imu_chart(void)
{
    /* สร้าง Chart */
    g_imu_chart = lv_chart_create(lv_screen_active());
    lv_obj_set_size(g_imu_chart, 280, 180);
    lv_obj_align(g_imu_chart, LV_ALIGN_CENTER, 0, 30);

    /* ตั้งค่า Chart */
    lv_chart_set_type(g_imu_chart, LV_CHART_TYPE_LINE);
    lv_chart_set_point_count(g_imu_chart, CHART_POINT_COUNT);

    /* Range สำหรับ ±2g (±19.6 m/s²) */
    lv_chart_set_range(g_imu_chart, LV_CHART_AXIS_PRIMARY_Y,
                       -2000, 2000);  /* milli-g */

    /* ซ่อน point dots (แสดงแค่ line) */
    lv_obj_set_style_line_width(g_imu_chart, 2, LV_PART_ITEMS);
    lv_obj_set_style_size(g_imu_chart, 0, 0, LV_PART_INDICATOR);

    /* สร้าง Series สำหรับ 3 แกน */
    g_accel_x_series = lv_chart_add_series(
        g_imu_chart,
        lv_palette_main(LV_PALETTE_RED),
        LV_CHART_AXIS_PRIMARY_Y
    );

    g_accel_y_series = lv_chart_add_series(
        g_imu_chart,
        lv_palette_main(LV_PALETTE_GREEN),
        LV_CHART_AXIS_PRIMARY_Y
    );

    g_accel_z_series = lv_chart_add_series(
        g_imu_chart,
        lv_palette_main(LV_PALETTE_BLUE),
        LV_CHART_AXIS_PRIMARY_Y
    );

    /* Legend */
    lv_obj_t * legend = lv_label_create(lv_screen_active());
    lv_label_set_text(legend,
        LV_SYMBOL_MINUS " X  "
        LV_SYMBOL_MINUS " Y  "
        LV_SYMBOL_MINUS " Z");
    lv_obj_align_to(legend, g_imu_chart, LV_ALIGN_OUT_TOP_RIGHT, 0, -5);
}

/* เรียกจาก sensor_hub_daq_task (Week 2) */
void update_imu_chart(float x, float y, float z)
{
    if(g_imu_chart == NULL) return;

    /* แปลง m/s² → milli-g */
    int32_t x_mg = (int32_t)(x / 9.81f * 1000.0f);
    int32_t y_mg = (int32_t)(y / 9.81f * 1000.0f);
    int32_t z_mg = (int32_t)(z / 9.81f * 1000.0f);

    /* เพิ่มค่าใหม่ (auto shift เก่าออก) */
    lv_chart_set_next_value(g_imu_chart, g_accel_x_series, x_mg);
    lv_chart_set_next_value(g_imu_chart, g_accel_y_series, y_mg);
    lv_chart_set_next_value(g_imu_chart, g_accel_z_series, z_mg);
}

CAUTION: ข้อควรระวัง Chart

• Point count มากเกินไปจะ lag (แนะนำ 50-100)

• lv_chart_set_next_value() จะ shift ข้อมูลเก่าออก (ring buffer)

• ถ้าใช้ direct array ต้องเรียก lv_chart_refresh()

---

6. Scale Widget - Instrument Gauge

ตัวอย่างจาก: examples/widgets/scale/lv_example_scale_1.c

void lv_example_scale_1(void)
{
    lv_obj_t * scale = lv_scale_create(lv_screen_active());
    lv_obj_set_size(scale, lv_pct(80), 100);

    /* Mode: แนวนอน ขีดด้านล่าง */
    lv_scale_set_mode(scale, LV_SCALE_MODE_HORIZONTAL_BOTTOM);
    lv_obj_center(scale);

    /* แสดง Label */
    lv_scale_set_label_show(scale, true);

    /* ตั้งจำนวน Tick */
    lv_scale_set_total_tick_count(scale, 31);
    lv_scale_set_major_tick_every(scale, 5);

    /* ความยาว Tick */
    lv_obj_set_style_length(scale, 5, LV_PART_ITEMS);      /* minor */
    lv_obj_set_style_length(scale, 10, LV_PART_INDICATOR); /* major */

    /* Range */
    lv_scale_set_range(scale, 10, 40);  /* เช่น temperature 10-40°C */
}

WHY: ทำไม Scale เหมาะกับ Sensor?

• ดูเหมือนเครื่องมือวัดจริง (Professional look)

• มี Tick marks ช่วยอ่านค่า

• เหมาะกับ Single value display (Temperature, Pressure)

HOW: Temperature Gauge ด้วย Scale

static lv_obj_t * g_temp_scale = NULL;
static lv_obj_t * g_temp_needle_line = NULL;
static lv_obj_t * g_temp_value_label = NULL;

void create_temperature_gauge(void)
{
    /* Title */
    lv_obj_t * title = lv_label_create(lv_screen_active());
    lv_label_set_text(title, "Temperature (°C)");
    lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 10);

    /* Scale - Round mode */
    g_temp_scale = lv_scale_create(lv_screen_active());
    lv_obj_set_size(g_temp_scale, 200, 200);
    lv_obj_center(g_temp_scale);

    lv_scale_set_mode(g_temp_scale, LV_SCALE_MODE_ROUND_OUTER);
    lv_scale_set_range(g_temp_scale, -10, 50);  /* -10°C to 50°C */

    lv_scale_set_total_tick_count(g_temp_scale, 61);
    lv_scale_set_major_tick_every(g_temp_scale, 10);

    lv_obj_set_style_length(g_temp_scale, 8, LV_PART_ITEMS);
    lv_obj_set_style_length(g_temp_scale, 15, LV_PART_INDICATOR);

    /* Color zones */
    /* Cold zone: -10 to 10 (blue) */
    lv_scale_section_t * cold_sec = lv_scale_add_section(g_temp_scale);
    lv_scale_section_set_range(cold_sec, -10, 10);
    lv_scale_section_set_style(cold_sec, LV_PART_INDICATOR,
        lv_palette_main(LV_PALETTE_BLUE));

    /* Normal zone: 10 to 35 (green) */
    lv_scale_section_t * normal_sec = lv_scale_add_section(g_temp_scale);
    lv_scale_section_set_range(normal_sec, 10, 35);
    lv_scale_section_set_style(normal_sec, LV_PART_INDICATOR,
        lv_palette_main(LV_PALETTE_GREEN));

    /* Hot zone: 35 to 50 (red) */
    lv_scale_section_t * hot_sec = lv_scale_add_section(g_temp_scale);
    lv_scale_section_set_range(hot_sec, 35, 50);
    lv_scale_section_set_style(hot_sec, LV_PART_INDICATOR,
        lv_palette_main(LV_PALETTE_RED));

    /* Value Label */
    g_temp_value_label = lv_label_create(lv_screen_active());
    lv_label_set_text(g_temp_value_label, "25.0°C");
    lv_obj_align(g_temp_value_label, LV_ALIGN_CENTER, 0, 50);
    lv_obj_set_style_text_font(g_temp_value_label,
                               &lv_font_montserrat_24, 0);
}

void update_temperature(float temp_celsius)
{
    if(g_temp_value_label != NULL) {
        lv_label_set_text_fmt(g_temp_value_label,
                              "%.1f°C", (double)temp_celsius);
    }
}

---

7. Chart Dashboard - Multiple Chart Types

ตรงกับ: week4_ex6_chart_dashboard()

Example 6 แสดงการใช้ Chart Widget หลายประเภทใน TabView เดียว ซึ่งเป็นรูปแบบที่พบบ่อยในแอปพลิเคชัน Dashboard จริง

Official References

• Chart: https://docs.lvgl.io/9.2/widgets/chart.html

• TabView: https://docs.lvgl.io/9.2/widgets/tabview.html

WHY: ทำไมต้องใช้หลาย Chart Types?

Chart Type	Use Case	ข้อดี
Bar Chart	เปรียบเทียบค่าแต่ละแกน (X, Y, Z)	เห็นความแตกต่างชัดเจน
Area Chart	แสดง Magnitude ตามเวลา	เห็น trend และพื้นที่ใต้กราฟ
Scatter Chart	แสดงความสัมพันธ์ X vs Y	เห็น motion pattern
Line Chart	แสดง time-series หลาย series	เปรียบเทียบ Gyro 3 แกน

HOW: โครงสร้าง Chart Dashboard

┌─────────────────────────────────────────────────────────────┐
│  ┌─────┐  ┌─────────────────────────────────────────────┐   │
│  │ Bar │  │                                             │   │
│  ├─────┤  │          Content Area (400x320)             │   │
│  │Area │  │                                             │   │
│  ├─────┤  │     - Bar Chart: Accel X/Y/Z comparison     │   │
│  │Scat-│  │     - Area Chart: Magnitude over time       │   │
│  │ ter │  │     - Scatter Chart: X vs Y motion          │   │
│  ├─────┤  │     - Line Chart: Gyro Roll/Pitch/Yaw       │   │
│  │Line │  │                                             │   │
│  └─────┘  └─────────────────────────────────────────────┘   │
│   (80px)                                                    │
└─────────────────────────────────────────────────────────────┘

Code Example: Chart Dashboard Structure

/*******************************************************************************
 * Chart Dashboard - TabView with LEFT tabs
 ******************************************************************************/

void week4_ex6_chart_dashboard(void)
{
    /* สร้าง TabView กับ tabs ด้านซ้าย */
    lv_obj_t * tabview = lv_tabview_create(lv_screen_active());
    lv_tabview_set_tab_bar_position(tabview, LV_DIR_LEFT);  /* Tabs ด้านซ้าย */
    lv_tabview_set_tab_bar_size(tabview, 80);

    /* Style tab buttons */
    lv_obj_t * tab_btns = lv_tabview_get_tab_bar(tabview);
    lv_obj_set_style_bg_color(tab_btns, lv_palette_darken(LV_PALETTE_GREY, 3), 0);

    /* สร้าง 4 tabs สำหรับ 4 ประเภท Chart */
    lv_obj_t * tab_bar = lv_tabview_add_tab(tabview, "Bar");
    lv_obj_t * tab_area = lv_tabview_add_tab(tabview, "Area");
    lv_obj_t * tab_scatter = lv_tabview_add_tab(tabview, "Scatter");
    lv_obj_t * tab_line = lv_tabview_add_tab(tabview, "Line");

    /* Populate each tab */
    create_bar_chart_tab(tab_bar);
    create_area_chart_tab(tab_area);
    create_scatter_chart_tab(tab_scatter);
    create_line_chart_tab(tab_line);

    /* Disable scrolling on content */
    lv_obj_remove_flag(lv_tabview_get_content(tabview), LV_OBJ_FLAG_SCROLLABLE);

    /* Timer for real-time updates */
    lv_timer_create(ex6_chart_timer_cb, 100, NULL);
}

Chart Type 1: Bar Chart (เปรียบเทียบ X, Y, Z)

static void create_bar_chart_tab(lv_obj_t * parent)
{
    /* สร้าง Bar Chart */
    lv_obj_t * chart = lv_chart_create(parent);
    lv_obj_set_size(chart, 390, 280);
    lv_obj_align(chart, LV_ALIGN_CENTER, 0, 0);

    /* ตั้งค่าเป็น Bar chart */
    lv_chart_set_type(chart, LV_CHART_TYPE_BAR);
    lv_chart_set_point_count(chart, 3);  /* X, Y, Z = 3 bars */
    lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 100);

    /* Add series */
    lv_chart_series_t * ser = lv_chart_add_series(
        chart,
        lv_palette_main(LV_PALETTE_GREEN),
        LV_CHART_AXIS_PRIMARY_Y
    );

    /* Set initial values */
    lv_chart_set_value_by_id(chart, ser, 0, 50);  /* X */
    lv_chart_set_value_by_id(chart, ser, 1, 50);  /* Y */
    lv_chart_set_value_by_id(chart, ser, 2, 98);  /* Z (gravity) */

    /* Style bars spacing */
    lv_obj_set_style_pad_column(chart, 50, 0);
}

Key Points - Bar Chart:

• ใช้ LV_CHART_TYPE_BAR

• point_count = จำนวน bars

• ใช้ lv_chart_set_value_by_id() เพื่อ update แต่ละ bar

• ต้องเรียก lv_chart_refresh() หลัง update

Chart Type 2: Area Chart (Magnitude Over Time)

static void create_area_chart_tab(lv_obj_t * parent)
{
    lv_obj_t * chart = lv_chart_create(parent);
    lv_obj_set_size(chart, 390, 285);
    lv_obj_align(chart, LV_ALIGN_CENTER, 0, 0);

    /* ใช้ Line chart แต่เพิ่ม area fill */
    lv_chart_set_type(chart, LV_CHART_TYPE_LINE);
    lv_chart_set_point_count(chart, 50);
    lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 150);

    /* Add series */
    lv_chart_series_t * ser = lv_chart_add_series(
        chart,
        lv_palette_main(LV_PALETTE_RED),
        LV_CHART_AXIS_PRIMARY_Y
    );

    /* เปิด Area fill */
    lv_obj_set_style_bg_opa(chart, LV_OPA_50, LV_PART_ITEMS);

    /* Style */
    lv_obj_set_style_size(chart, 4, 4, LV_PART_INDICATOR);
    lv_obj_set_style_line_width(chart, 3, LV_PART_ITEMS);

    /* Grid lines */
    lv_chart_set_div_line_count(chart, 5, 8);
}

Key Points - Area Chart:

• ใช้ LV_CHART_TYPE_LINE + lv_obj_set_style_bg_opa() สำหรับ fill

• ใช้ lv_chart_set_next_value() สำหรับ streaming data

• เหมาะกับ magnitude: sqrt(ax² + ay² + az²)

Chart Type 3: Scatter Chart (X vs Y Motion)

static void create_scatter_chart_tab(lv_obj_t * parent)
{
    lv_obj_t * chart = lv_chart_create(parent);
    lv_obj_set_size(chart, 290, 280);
    lv_obj_align(chart, LV_ALIGN_CENTER, 0, 0);

    /* ตั้งค่าเป็น Scatter chart */
    lv_chart_set_type(chart, LV_CHART_TYPE_SCATTER);
    lv_chart_set_point_count(chart, 30);

    /* X และ Y ranges */
    lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_X, 0, 200);
    lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 200);

    /* Add scatter series */
    lv_chart_series_t * ser = lv_chart_add_series(
        chart,
        lv_palette_main(LV_PALETTE_BLUE),
        LV_CHART_AXIS_PRIMARY_Y
    );

    /* Style scatter points */
    lv_obj_set_style_size(chart, 10, 10, LV_PART_INDICATOR);
    lv_obj_set_style_bg_opa(chart, LV_OPA_70, LV_PART_INDICATOR);

    /* Grid */
    lv_chart_set_div_line_count(chart, 5, 5);
}

/* Update scatter chart */
void update_scatter(float ax, float ay)
{
    /* Scale to chart range: -2 to +2 → 0 to 200 */
    int32_t x = (int32_t)((ax + 2.0f) * 50.0f);
    int32_t y = (int32_t)((ay + 2.0f) * 50.0f);

    /* ใช้ lv_chart_set_next_value2 สำหรับ scatter */
    lv_chart_set_next_value2(chart, ser, x, y);
}

Key Points - Scatter Chart:

• ใช้ LV_CHART_TYPE_SCATTER

• ต้องตั้ง range ทั้ง X และ Y axis

• ใช้ lv_chart_set_next_value2(chart, ser, x, y) สำหรับ (x,y) pairs

• เหมาะกับการดู motion pattern หรือ correlation

Chart Type 4: Line Chart (Gyroscope Time Series)

static void create_line_chart_tab(lv_obj_t * parent)
{
    lv_obj_t * chart = lv_chart_create(parent);
    lv_obj_set_size(chart, 390, 275);
    lv_obj_align(chart, LV_ALIGN_CENTER, 0, -5);

    lv_chart_set_type(chart, LV_CHART_TYPE_LINE);
    lv_chart_set_point_count(chart, 50);
    lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 100);

    /* Hide points, show only lines */
    lv_obj_set_style_size(chart, 0, 0, LV_PART_INDICATOR);
    lv_obj_set_style_line_width(chart, 3, LV_PART_ITEMS);

    /* Grid */
    lv_chart_set_div_line_count(chart, 5, 5);

    /* Add 3 series for Roll, Pitch, Yaw */
    lv_color_t colors[] = {
        lv_palette_main(LV_PALETTE_RED),
        lv_palette_main(LV_PALETTE_GREEN),
        lv_palette_main(LV_PALETTE_BLUE)
    };

    for(int i = 0; i < 3; i++) {
        ser[i] = lv_chart_add_series(chart, colors[i],
                                      LV_CHART_AXIS_PRIMARY_Y);
    }
}

CAUTION: ข้อควรระวัง Chart Dashboard

ข้อควรระวัง	คำอธิบาย
Chart Type	Scatter ต้องใช้ lv_chart_set_next_value2() ไม่ใช่ lv_chart_set_next_value()
Point Count	มากเกินไปจะ lag (แนะนำ 30-50 สำหรับ scatter, 50-100 สำหรับ line)
Refresh	Bar chart ต้องเรียก lv_chart_refresh() หลัง set_value_by_id()
Range	Scatter ต้องตั้ง range ทั้ง X และ Y axis
Tab Size	TabView ที่ LEFT ต้องลดพื้นที่ content ลง (480 - 80 = 400px)

สรุป Chart Functions

Function	ใช้กับ	คำอธิบาย
lv_chart_set_type()	ทุก chart	ตั้งประเภท (LINE, BAR, SCATTER)
lv_chart_set_next_value()	Line, Area	เพิ่มค่าใหม่ (auto shift)
lv_chart_set_next_value2()	Scatter	เพิ่ม (x,y) pair
lv_chart_set_value_by_id()	Bar	Update bar ตาม index
lv_chart_refresh()	Bar	Refresh หลัง direct update
lv_chart_set_div_line_count()	ทุก chart	ตั้ง grid lines

---

8. IMU Data Dashboard

แดชบอร์ดรวมข้อมูล IMU (Accelerometer + Gyroscope)

/*******************************************************************************
 * IMU Dashboard - บูรณาการกับ Week 2 sensor_hub_daq_task
 ******************************************************************************/

/* UI Components */
static struct {
    /* Accelerometer */
    lv_obj_t *accel_chart;
    lv_chart_series_t *accel_x, *accel_y, *accel_z;
    lv_obj_t *accel_labels[3];

    /* Gyroscope */
    lv_obj_t *gyro_arcs[3];
    lv_obj_t *gyro_labels[3];

    /* Orientation */
    lv_obj_t *orient_label;
    lv_obj_t *orient_led;
} imu_ui;

void create_imu_dashboard(void)
{
    /* ========== Header ========== */
    lv_obj_t * header = lv_label_create(lv_screen_active());
    lv_label_set_text(header, "IMU Sensor Dashboard");
    lv_obj_align(header, LV_ALIGN_TOP_MID, 0, 5);
    lv_obj_set_style_text_font(header, &lv_font_montserrat_18, 0);

    /* ========== Accelerometer Section ========== */
    lv_obj_t * accel_title = lv_label_create(lv_screen_active());
    lv_label_set_text(accel_title, "Accelerometer (m/s²)");
    lv_obj_align(accel_title, LV_ALIGN_TOP_LEFT, 10, 30);

    /* Chart */
    imu_ui.accel_chart = lv_chart_create(lv_screen_active());
    lv_obj_set_size(imu_ui.accel_chart, 200, 100);
    lv_obj_align(imu_ui.accel_chart, LV_ALIGN_TOP_LEFT, 10, 50);
    lv_chart_set_type(imu_ui.accel_chart, LV_CHART_TYPE_LINE);
    lv_chart_set_point_count(imu_ui.accel_chart, 30);
    lv_chart_set_range(imu_ui.accel_chart, LV_CHART_AXIS_PRIMARY_Y,
                       -20, 20);

    imu_ui.accel_x = lv_chart_add_series(imu_ui.accel_chart,
        lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y);
    imu_ui.accel_y = lv_chart_add_series(imu_ui.accel_chart,
        lv_palette_main(LV_PALETTE_GREEN), LV_CHART_AXIS_PRIMARY_Y);
    imu_ui.accel_z = lv_chart_add_series(imu_ui.accel_chart,
        lv_palette_main(LV_PALETTE_BLUE), LV_CHART_AXIS_PRIMARY_Y);

    /* Numeric Labels */
    const char *axis_names[] = {"X:", "Y:", "Z:"};
    for(int i = 0; i < 3; i++) {
        imu_ui.accel_labels[i] = lv_label_create(lv_screen_active());
        lv_label_set_text_fmt(imu_ui.accel_labels[i],
                              "%s 0.00", axis_names[i]);
        lv_obj_align(imu_ui.accel_labels[i], LV_ALIGN_TOP_LEFT,
                     220, 55 + i * 25);
    }

    /* ========== Gyroscope Section ========== */
    lv_obj_t * gyro_title = lv_label_create(lv_screen_active());
    lv_label_set_text(gyro_title, "Gyroscope (rad/s)");
    lv_obj_align(gyro_title, LV_ALIGN_TOP_LEFT, 10, 160);

    for(int i = 0; i < 3; i++) {
        imu_ui.gyro_arcs[i] = lv_arc_create(lv_screen_active());
        lv_obj_set_size(imu_ui.gyro_arcs[i], 60, 60);
        lv_obj_align(imu_ui.gyro_arcs[i], LV_ALIGN_BOTTOM_LEFT,
                     30 + i * 80, -50);
        lv_arc_set_range(imu_ui.gyro_arcs[i], -35, 35);  /* rad/s */
        lv_arc_set_bg_angles(imu_ui.gyro_arcs[i], 135, 45);
        lv_arc_set_value(imu_ui.gyro_arcs[i], 0);

        imu_ui.gyro_labels[i] = lv_label_create(lv_screen_active());
        lv_label_set_text(imu_ui.gyro_labels[i], "0.0");
        lv_obj_align_to(imu_ui.gyro_labels[i], imu_ui.gyro_arcs[i],
                        LV_ALIGN_OUT_BOTTOM_MID, 0, 5);
    }

    /* ========== Orientation Section ========== */
    imu_ui.orient_led = lv_led_create(lv_screen_active());
    lv_obj_align(imu_ui.orient_led, LV_ALIGN_BOTTOM_RIGHT, -30, -60);
    lv_led_set_color(imu_ui.orient_led, lv_palette_main(LV_PALETTE_CYAN));

    imu_ui.orient_label = lv_label_create(lv_screen_active());
    lv_label_set_text(imu_ui.orient_label, "UNKNOWN");
    lv_obj_align_to(imu_ui.orient_label, imu_ui.orient_led,
                    LV_ALIGN_OUT_BOTTOM_MID, 0, 5);
}

/* เรียกจาก sensor_hub_daq_task หลังอ่านค่า IMU */
void update_imu_dashboard(mtb_bmi270_data_t *data,
                          float ax, float ay, float az,
                          float gx, float gy, float gz)
{
    /* Update Accelerometer Chart */
    lv_chart_set_next_value(imu_ui.accel_chart, imu_ui.accel_x, (int32_t)ax);
    lv_chart_set_next_value(imu_ui.accel_chart, imu_ui.accel_y, (int32_t)ay);
    lv_chart_set_next_value(imu_ui.accel_chart, imu_ui.accel_z, (int32_t)az);

    /* Update Accelerometer Labels */
    lv_label_set_text_fmt(imu_ui.accel_labels[0], "X: %+.2f", (double)ax);
    lv_label_set_text_fmt(imu_ui.accel_labels[1], "Y: %+.2f", (double)ay);
    lv_label_set_text_fmt(imu_ui.accel_labels[2], "Z: %+.2f", (double)az);

    /* Update Gyroscope Arcs */
    lv_arc_set_value(imu_ui.gyro_arcs[0], (int32_t)(gx * 10));
    lv_arc_set_value(imu_ui.gyro_arcs[1], (int32_t)(gy * 10));
    lv_arc_set_value(imu_ui.gyro_arcs[2], (int32_t)(gz * 10));

    lv_label_set_text_fmt(imu_ui.gyro_labels[0], "%.1f", (double)gx);
    lv_label_set_text_fmt(imu_ui.gyro_labels[1], "%.1f", (double)gy);
    lv_label_set_text_fmt(imu_ui.gyro_labels[2], "%.1f", (double)gz);

    /* Update Orientation */
    const char *orient_str = "UNKNOWN";
    int16_t abs_x = abs(data->sensor_data.acc.x);
    int16_t abs_y = abs(data->sensor_data.acc.y);
    int16_t abs_z = abs(data->sensor_data.acc.z);

    if((abs_z > abs_x) && (abs_z > abs_y)) {
        orient_str = (data->sensor_data.acc.z < 0) ? "FACE DOWN" : "FACE UP";
        lv_led_set_color(imu_ui.orient_led, lv_palette_main(LV_PALETTE_GREEN));
    }
    else if((abs_y > abs_x) && (abs_y > abs_z)) {
        orient_str = (data->sensor_data.acc.y > 0) ? "BOTTOM EDGE" : "TOP EDGE";
        lv_led_set_color(imu_ui.orient_led, lv_palette_main(LV_PALETTE_YELLOW));
    }
    else {
        orient_str = (data->sensor_data.acc.x < 0) ? "RIGHT EDGE" : "LEFT EDGE";
        lv_led_set_color(imu_ui.orient_led, lv_palette_main(LV_PALETTE_CYAN));
    }

    lv_label_set_text(imu_ui.orient_label, orient_str);
    lv_led_on(imu_ui.orient_led);
}

---

9. ADC Dashboard

แดชบอร์ดสำหรับ ADC (เชื่อมโยงกับ Week 1)

/*******************************************************************************
 * ADC Dashboard - บูรณาการกับ Week 1 ADC Basic
 ******************************************************************************/

typedef struct {
    lv_obj_t *slider;      /* แสดง raw value */
    lv_obj_t *bar;         /* แสดง percentage */
    lv_obj_t *value_label; /* แสดงตัวเลข */
    lv_obj_t *volt_label;  /* แสดงแรงดัน */
} adc_ui_t;

static adc_ui_t adc_ui;

/* ADC Constants จาก Week 1 */
#define ADC_VREF_MV         3300    /* 3.3V = 3300mV */
#define ADC_RESOLUTION      4095    /* 12-bit */

void create_adc_dashboard(void)
{
    /* Title */
    lv_obj_t * title = lv_label_create(lv_screen_active());
    lv_label_set_text(title, "ADC Monitor");
    lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 10);
    lv_obj_set_style_text_font(title, &lv_font_montserrat_18, 0);

    /* Slider (Read-only, shows raw value position) */
    adc_ui.slider = lv_slider_create(lv_screen_active());
    lv_obj_set_size(adc_ui.slider, 250, 30);
    lv_obj_align(adc_ui.slider, LV_ALIGN_CENTER, 0, -40);
    lv_slider_set_range(adc_ui.slider, 0, 4095);
    lv_obj_add_state(adc_ui.slider, LV_STATE_DISABLED);  /* Read-only */

    /* Raw Value Label */
    adc_ui.value_label = lv_label_create(lv_screen_active());
    lv_label_set_text(adc_ui.value_label, "Raw: 0");
    lv_obj_align_to(adc_ui.value_label, adc_ui.slider,
                    LV_ALIGN_OUT_TOP_LEFT, 0, -10);

    /* Percentage Bar */
    lv_obj_t * pct_title = lv_label_create(lv_screen_active());
    lv_label_set_text(pct_title, "Percentage:");
    lv_obj_align(pct_title, LV_ALIGN_CENTER, -100, 20);

    adc_ui.bar = lv_bar_create(lv_screen_active());
    lv_obj_set_size(adc_ui.bar, 200, 20);
    lv_obj_align(adc_ui.bar, LV_ALIGN_CENTER, 30, 20);

    /* Voltage Display */
    lv_obj_t * volt_title = lv_label_create(lv_screen_active());
    lv_label_set_text(volt_title, "Voltage:");
    lv_obj_align(volt_title, LV_ALIGN_CENTER, -100, 70);

    adc_ui.volt_label = lv_label_create(lv_screen_active());
    lv_label_set_text(adc_ui.volt_label, "0.000 V");
    lv_obj_align(adc_ui.volt_label, LV_ALIGN_CENTER, 30, 70);
    lv_obj_set_style_text_font(adc_ui.volt_label,
                               &lv_font_montserrat_24, 0);

    /* Unit Indicator */
    lv_obj_t * unit = lv_label_create(lv_screen_active());
    lv_label_set_text(unit, "(VREF = 3.3V, 12-bit ADC)");
    lv_obj_align(unit, LV_ALIGN_BOTTOM_MID, 0, -20);
    lv_obj_set_style_text_color(unit, lv_palette_main(LV_PALETTE_GREY), 0);
}

/* เรียกจาก ADC Read Task */
void update_adc_dashboard(uint16_t raw_value)
{
    /* Update Slider */
    lv_slider_set_value(adc_ui.slider, raw_value, LV_ANIM_ON);

    /* Update Raw Label */
    lv_label_set_text_fmt(adc_ui.value_label, "Raw: %d", raw_value);

    /* Update Percentage Bar */
    int32_t pct = (raw_value * 100) / ADC_RESOLUTION;
    lv_bar_set_value(adc_ui.bar, pct, LV_ANIM_ON);

    /* Calculate and Update Voltage */
    /* สูตรจาก Week 1: V = (raw / 4095) × 3.3V */
    float voltage = ((float)raw_value / ADC_RESOLUTION) *
                    (ADC_VREF_MV / 1000.0f);
    lv_label_set_text_fmt(adc_ui.volt_label, "%.3f V", (double)voltage);
}

---

10. Multi-Sensor Integration

รวมทุก Sensor ไว้ใน TabView

/*******************************************************************************
 * Multi-Sensor Dashboard with Tabs
 ******************************************************************************/

void create_sensor_hub_ui(void)
{
    /* สร้าง TabView */
    lv_obj_t * tabview = lv_tabview_create(lv_screen_active());
    lv_tabview_set_tab_bar_position(tabview, LV_DIR_TOP);
    lv_tabview_set_tab_bar_size(tabview, 40);

    /* Tab 1: GPIO Status */
    lv_obj_t * tab_gpio = lv_tabview_add_tab(tabview, "GPIO");
    /* เพิ่ม GPIO widgets จาก Week 3 */
    create_gpio_content(tab_gpio);

    /* Tab 2: ADC Monitor */
    lv_obj_t * tab_adc = lv_tabview_add_tab(tabview, "ADC");
    /* เพิ่ม ADC widgets */
    create_adc_content(tab_adc);

    /* Tab 3: IMU Dashboard */
    lv_obj_t * tab_imu = lv_tabview_add_tab(tabview, "IMU");
    /* เพิ่ม IMU widgets */
    create_imu_content(tab_imu);

    /* Tab 4: All Sensors */
    lv_obj_t * tab_all = lv_tabview_add_tab(tabview, "All");
    /* สรุปข้อมูลทุก sensor */
    create_summary_content(tab_all);
}

/* Content creators */
static void create_gpio_content(lv_obj_t * parent)
{
    lv_obj_t * sw = lv_switch_create(parent);
    lv_obj_center(sw);
    /* ... เพิ่ม GPIO controls ... */
}

static void create_adc_content(lv_obj_t * parent)
{
    lv_obj_t * bar = lv_bar_create(parent);
    lv_obj_center(bar);
    /* ... เพิ่ม ADC display ... */
}

static void create_imu_content(lv_obj_t * parent)
{
    lv_obj_t * chart = lv_chart_create(parent);
    lv_obj_center(chart);
    /* ... เพิ่ม IMU chart ... */
}

static void create_summary_content(lv_obj_t * parent)
{
    /* สร้าง Grid layout */
    static int32_t col_dsc[] = {LV_GRID_FR(1), LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
    static int32_t row_dsc[] = {LV_GRID_FR(1), LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};

    lv_obj_set_grid_dsc_array(parent, col_dsc, row_dsc);

    /* GPIO Card */
    lv_obj_t * gpio_card = lv_obj_create(parent);
    lv_obj_set_grid_cell(gpio_card, LV_GRID_ALIGN_STRETCH, 0, 1,
                                     LV_GRID_ALIGN_STRETCH, 0, 1);

    /* ADC Card */
    lv_obj_t * adc_card = lv_obj_create(parent);
    lv_obj_set_grid_cell(adc_card, LV_GRID_ALIGN_STRETCH, 1, 1,
                                    LV_GRID_ALIGN_STRETCH, 0, 1);

    /* IMU Card */
    lv_obj_t * imu_card = lv_obj_create(parent);
    lv_obj_set_grid_cell(imu_card, LV_GRID_ALIGN_STRETCH, 0, 2,
                                    LV_GRID_ALIGN_STRETCH, 1, 1);
}