Sensor Dashboard

Lab 5: Sensor Dashboard (TabView)

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

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

Multi-Page UI: ในระบบ IoT จริง เรามีข้อมูลจากหลาย Sensor ที่ต้องแสดงผลพร้อมกัน TabView ช่วยจัดกลุ่มข้อมูลอย่างเป็นระบบ
Organized Layout: Dashboard ที่ดีจัดกลุ่ม content ตามประเภท ไม่แสดงทุกอย่างบนหน้าเดียว
Real-World Pattern: รูปแบบ Tab-based Dashboard ใช้แพร่หลายในระบบ SCADA, HMI, และ IoT Monitoring

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

TabView Widget: สร้าง multi-tab interface ด้วย lv_tabview_create()
Tab Content Management: แต่ละ tab มี widgets ของตัวเอง แยกจัดการอิสระ
Tab Bar Styling: ปรับแต่ง tab bar, ปุ่ม tab, สีพื้นหลัง
Tab Switching: ควบคุมการเปลี่ยน tab ทั้งด้วยการกด และ programmatic
Scroll Control: ปิด scrolling ที่ไม่ต้องการบน content area

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

สร้าง TabView กับ tab bar ด้านบน (80px)
เพิ่ม Tab 1: IMU data - แสดง accelerometer X/Y/Z ด้วย Line Chart
เพิ่ม Tab 2: ADC data - แสดงค่า ADC ด้วย Bar + Label แสดงแรงดัน
ใช้ timer callback อัพเดทข้อมูลทุก tab ทุก 100ms
ปรับแต่ง tab button styling ให้ดูเป็นมืออาชีพ

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

2.1 TabView Architecture

TabView เป็น widget ที่รวม Tab Bar (ปุ่มเลือก) กับ Content Area (พื้นที่แสดงผล) เข้าด้วยกัน เมื่อกดปุ่ม tab จะสลับแสดง content ของ tab นั้น

TabView Object Hierarchy:

  lv_tabview (parent)
  ├── Tab Bar (lv_obj - button container)
  │   ├── Button "IMU"     ← lv_tabview_get_tab_bar()
  │   └── Button "ADC"
  └── Content (lv_obj - page container)
      ├── Tab Page 0 (IMU)  ← lv_tabview_add_tab()
      │   ├── Title Label
      │   ├── Chart Widget
      │   └── Value Labels
      └── Tab Page 1 (ADC)
          ├── Title Label
          ├── Bar Widget
          └── Value Label

2.2 Screen Layout

┌─────────────────────────────────────────────────────────────┐
│                   SENSOR DASHBOARD                          │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   ┌───────────────────────────────────────────────────────┐ │
│   │     [  IMU  ]      [  ADC  ]       <-- Tab Bar (80px) │ │
│   └───────────────────────────────────────────────────────┘ │
│   ┌───────────────────────────────────────────────────────┐ │
│   │                                                       │ │
│   │              Content Area (480 x 240)                 │ │
│   │                                                       │ │
│   │   IMU Tab:                                            │ │
│   │     Chart (3 series: X=Red, Y=Green, Z=Blue)          │ │
│   │     Value Labels: X: +0.50  Y: -0.30  Z: +9.81        │ │
│   │                                                       │ │
│   │   ADC Tab:                                            │ │
│   │     [==============BAR================]               │ │
│   │     ADC: 2048 (1.65V)                                 │ │
│   │                                                       │ │
│   └───────────────────────────────────────────────────────┘ │
│                                                             │
│   Screen Size: 480 x 320                                    │
│   Tab Bar: 80px height                                      │
│   Content: 480 x 240                                        │
│                                                             │
└─────────────────────────────────────────────────────────────┘

2.3 Data Flow

┌─────────────────────────────────────────────────────────────┐
│                     DATA FLOW                               │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   lv_timer_create(timer_cb, 100ms)                          │
│       │                                                     │
│       ▼ ทุก 100ms                                            │
│   dashboard_timer_cb()                                      │
│       │                                                     │
│       ├── simulate_adc_read()                               │
│       │     │                                               │
│       │     ├── pct = (adc * 100) / 4095                    │
│       │     ├── lv_bar_set_value(bar, pct)                  │
│       │     └── lv_label_set_text_fmt("ADC: %d (%.2fV)")    │
│       │                                                     │
│       └── simulate_imu_accel(&ax, &ay, &az)                 │
│            │                                                │
│            ├── lv_chart_set_next_value(chart, ser_x, ax*100)│
│            ├── lv_chart_set_next_value(chart, ser_y, ay*100)│
│            ├── lv_chart_set_next_value(chart, ser_z, az*100)│
│            └── lv_label_set_text_fmt("X:%+.1f Y:%+.1f")     │
│                                                             │
└─────────────────────────────────────────────────────────────┘

2.4 Tab Bar Position Options

  LV_DIR_TOP (default)        LV_DIR_BOTTOM
  ┌──────────────────┐        ┌──────────────────┐
  │ [Tab1] [Tab2]    │        │                  │
  ├──────────────────┤        │    Content       │
  │                  │        │                  │
  │    Content       │        ├──────────────────┤
  │                  │        │ [Tab1] [Tab2]    │
  └──────────────────┘        └──────────────────┘

  LV_DIR_LEFT                 LV_DIR_RIGHT
  ┌────┬─────────────┐        ┌─────────────┬────┐
  │Tab1│             │        │             │Tab1│
  │    │   Content   │        │   Content   │    │
  │Tab2│             │        │             │Tab2│
  └────┴─────────────┘        └─────────────┴────┘

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

3.1 TabView Functions

Function

Description

ตัวอย่าง

lv_tabview_create(parent)

สร้าง TabView

lv_tabview_create(lv_screen_active())

lv_tabview_set_tab_bar_position(tv, dir)

ตำแหน่ง tab bar

...(tv, LV_DIR_TOP)

lv_tabview_set_tab_bar_size(tv, size)

ความสูง/กว้าง tab bar

...(tv, 80)

lv_tabview_add_tab(tv, "name")

เพิ่ม tab ใหม่ (return tab page)

lv_tabview_add_tab(tv, "IMU")

lv_tabview_get_tab_bar(tv)

รับ tab bar object สำหรับ styling

lv_tabview_get_tab_bar(tv)

lv_tabview_get_content(tv)

รับ content container

lv_tabview_get_content(tv)

lv_tabview_get_tab_active(tv)

ดูว่า tab ไหน active (0-based)

uint32_t idx = ...

lv_tabview_set_active(tv, idx, anim)

เปลี่ยน tab ด้วยโค้ด

...(tv, 1, LV_ANIM_ON)

3.2 Tab Bar Position Constants

Direction

Description

Content Size (480x320 screen)

LV_DIR_TOP

Tab bar ด้านบน (default)

480 x (320 - tab_size)

LV_DIR_BOTTOM

Tab bar ด้านล่าง

480 x (320 - tab_size)

LV_DIR_LEFT

Tab bar ด้านซ้าย

(480 - tab_size) x 320

LV_DIR_RIGHT

Tab bar ด้านขวา

(480 - tab_size) x 320

3.3 Critical Pattern - ปิด Scrolling

/* CRITICAL: ต้องปิด scrolling บน content container
 * ไม่งั้นเวลา swipe จะเลื่อนหน้าแทนที่จะเปลี่ยน tab */
lv_obj_remove_flag(lv_tabview_get_content(tabview), LV_OBJ_FLAG_SCROLLABLE);

3.4 Simulation Functions (PC Simulator)

/* จำลองค่า ADC (0-4095) - ขยับช้า ๆ ขึ้นลง */
static uint16_t simulate_adc_read(void)
{
    static float phase = 0.0f;
    phase += 0.02f;
    return (uint16_t)(2048 + 1800 * sinf(phase));
}

/* จำลองค่า IMU accelerometer (m/s^2) */
static void simulate_imu_accel(float *ax, float *ay, float *az)
{
    static float t = 0.0f;
    t += 0.05f;
    *ax = 0.5f * sinf(t * 1.0f);
    *ay = 0.3f * cosf(t * 0.7f);
    *az = 9.81f + 0.2f * sinf(t * 2.0f);
}

4. โค้ดตัวอย่าง

4.1 Global Variables

#include "lvgl.h"
#include <math.h>

#define ADC_MAX         4095
#define CHART_POINTS    50

/* ADC Tab widgets */
static lv_obj_t * adc_bar;
static lv_obj_t * adc_label;

/* IMU Tab widgets */
static lv_obj_t * imu_chart;
static lv_chart_series_t * imu_ser_x;
static lv_chart_series_t * imu_ser_y;
static lv_chart_series_t * imu_ser_z;
static lv_obj_t * imu_labels[3];

/* Timer */
static lv_timer_t * dash_timer;

4.2 Simulation Helpers

static uint16_t simulate_adc_read(void)
{
    static float phase = 0.0f;
    phase += 0.02f;
    return (uint16_t)(2048 + 1800 * sinf(phase));
}

static void simulate_imu_accel(float *ax, float *ay, float *az)
{
    static float t = 0.0f;
    t += 0.05f;
    *ax = 0.5f * sinf(t * 1.0f);
    *ay = 0.3f * cosf(t * 0.7f);
    *az = 9.81f + 0.2f * sinf(t * 2.0f);
}

4.3 Timer Callback - อัพเดทข้อมูลทุก Tab

static void dashboard_timer_cb(lv_timer_t * timer)
{
    (void)timer;

    /* ===== Update ADC Tab ===== */
    uint16_t adc = simulate_adc_read();
    int32_t pct = (adc * 100) / ADC_MAX;
    lv_bar_set_value(adc_bar, pct, LV_ANIM_ON);

    float volt = ((float)adc / ADC_MAX) * 3.3f;
    lv_label_set_text_fmt(adc_label, "ADC: %d (%.2fV)", adc, (double)volt);

    /* ===== Update IMU Tab ===== */
    float ax, ay, az;
    simulate_imu_accel(&ax, &ay, &az);

    /* Scale float to int for chart (multiply by 100) */
    lv_chart_set_next_value(imu_chart, imu_ser_x, (int32_t)(ax * 100));
    lv_chart_set_next_value(imu_chart, imu_ser_y, (int32_t)(ay * 100));
    lv_chart_set_next_value(imu_chart, imu_ser_z, (int32_t)(az * 100));

    /* Update value labels */
    lv_label_set_text_fmt(imu_labels[0], "X:%+.1f", (double)ax);
    lv_label_set_text_fmt(imu_labels[1], "Y:%+.1f", (double)ay);
    lv_label_set_text_fmt(imu_labels[2], "Z:%+.1f", (double)az);
}

4.4 สร้าง IMU Tab Content

static void create_imu_tab(lv_obj_t * parent)
{
    /* Title */
    lv_obj_t * title = lv_label_create(parent);
    lv_label_set_text(title, "Accelerometer (m/s2)");
    lv_obj_set_style_text_font(title, &lv_font_montserrat_24, 0);
    lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 5);

    /* Chart - Line type, 50 data points */
    imu_chart = lv_chart_create(parent);
    lv_obj_set_size(imu_chart, 380, 180);
    lv_obj_align(imu_chart, LV_ALIGN_CENTER, -30, 10);
    lv_chart_set_type(imu_chart, LV_CHART_TYPE_LINE);
    lv_chart_set_point_count(imu_chart, CHART_POINTS);
    lv_chart_set_range(imu_chart, LV_CHART_AXIS_PRIMARY_Y, -200, 1200);

    /* ซ่อน point indicator เพื่อให้เห็นแค่เส้น */
    lv_obj_set_style_size(imu_chart, 0, 0, LV_PART_INDICATOR);
    lv_obj_set_style_line_width(imu_chart, 2, LV_PART_ITEMS);

    /* สร้าง 3 series: X(Red), Y(Green), Z(Blue) */
    lv_color_t colors[] = {
        lv_palette_main(LV_PALETTE_RED),
        lv_palette_main(LV_PALETTE_GREEN),
        lv_palette_main(LV_PALETTE_BLUE)
    };

    imu_ser_x = lv_chart_add_series(imu_chart, colors[0],
                                     LV_CHART_AXIS_PRIMARY_Y);
    imu_ser_y = lv_chart_add_series(imu_chart, colors[1],
                                     LV_CHART_AXIS_PRIMARY_Y);
    imu_ser_z = lv_chart_add_series(imu_chart, colors[2],
                                     LV_CHART_AXIS_PRIMARY_Y);

    /* Value labels - แสดงค่าปัจจุบัน */
    const char * axis_names[] = {"X:", "Y:", "Z:"};
    for(int i = 0; i < 3; i++) {
        imu_labels[i] = lv_label_create(parent);
        lv_label_set_text_fmt(imu_labels[i], "%s 0.0", axis_names[i]);
        lv_obj_set_style_text_color(imu_labels[i], colors[i], 0);
        lv_obj_set_style_text_font(imu_labels[i], &lv_font_montserrat_24, 0);
        lv_obj_align(imu_labels[i], LV_ALIGN_RIGHT_MID, -10, -50 + i * 50);
    }
}

4.5 สร้าง ADC Tab Content

static void create_adc_tab(lv_obj_t * parent)
{
    /* Title */
    lv_obj_t * title = lv_label_create(parent);
    lv_label_set_text(title, "ADC Monitor");
    lv_obj_set_style_text_font(title, &lv_font_montserrat_24, 0);
    lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 20);

    /* Bar widget - แสดง % ของค่า ADC */
    adc_bar = lv_bar_create(parent);
    lv_obj_set_size(adc_bar, 400, 50);
    lv_obj_align(adc_bar, LV_ALIGN_CENTER, 0, 0);
    lv_bar_set_range(adc_bar, 0, 100);
    lv_bar_set_value(adc_bar, 0, LV_ANIM_OFF);

    /* สี indicator ของ bar */
    lv_obj_set_style_bg_color(adc_bar, lv_palette_main(LV_PALETTE_BLUE),
                              LV_PART_INDICATOR);

    /* Label - แสดงค่า ADC ดิบ + แรงดัน */
    adc_label = lv_label_create(parent);
    lv_label_set_text(adc_label, "ADC: 0 (0.00V)");
    lv_obj_set_style_text_font(adc_label, &lv_font_montserrat_24, 0);
    lv_obj_align(adc_label, LV_ALIGN_CENTER, 0, 60);
}

4.6 Main Function

void part2_ex5_sensor_dashboard(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, 80);

    /* ===== Style Tab Bar ===== */
    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);
    lv_obj_set_style_text_color(tab_btns,
        lv_palette_lighten(LV_PALETTE_GREY, 5), 0);

    /* ===== สร้าง Tabs ===== */
    lv_obj_t * tab_imu = lv_tabview_add_tab(tabview, "IMU");
    lv_obj_t * tab_adc = lv_tabview_add_tab(tabview, "ADC");

    /* ===== Style Tab Content (พื้นหลังสีขาว) ===== */
    lv_obj_set_style_bg_color(tab_imu, lv_color_hex(0xFFFFFF), 0);
    lv_obj_set_style_bg_opa(tab_imu, LV_OPA_COVER, 0);
    lv_obj_set_style_bg_color(tab_adc, lv_color_hex(0xFFFFFF), 0);
    lv_obj_set_style_bg_opa(tab_adc, LV_OPA_COVER, 0);

    /* ===== Populate Tab Content ===== */
    create_imu_tab(tab_imu);
    create_adc_tab(tab_adc);

    /* ===== CRITICAL: ปิด scrolling ===== */
    lv_obj_remove_flag(lv_tabview_get_content(tabview),
                       LV_OBJ_FLAG_SCROLLABLE);

    /* ===== Timer - อัพเดทข้อมูลทุก 100ms ===== */
    dash_timer = lv_timer_create(dashboard_timer_cb, 100, NULL);
}

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

5.1 Tab Bar Sizing - ขนาดของ Tab Bar

/* Tab bar size ขึ้นอยู่กับ position */

/* TOP/BOTTOM: size = ความสูง */
lv_tabview_set_tab_bar_position(tabview, LV_DIR_TOP);
lv_tabview_set_tab_bar_size(tabview, 80);  /* 80px height */
/* Content: 480 x (320 - 80) = 480 x 240 */

/* LEFT/RIGHT: size = ความกว้าง */
lv_tabview_set_tab_bar_position(tabview, LV_DIR_LEFT);
lv_tabview_set_tab_bar_size(tabview, 80);  /* 80px width */
/* Content: (480 - 80) x 320 = 400 x 320 */

5.2 Tab Content Parent - ข้อควรระวัง

/* Widgets ใน tab ต้องใช้ tab page เป็น parent ไม่ใช่ lv_screen_active() */
void create_tab_content(lv_obj_t * tab_parent)
{
    /* tab_parent มาจาก lv_tabview_add_tab() */
    lv_obj_t * widget = lv_label_create(tab_parent);  /* ถูกต้อง */

    /* อย่าทำแบบนี้: */
    /* lv_obj_t * widget = lv_label_create(lv_screen_active()); */
}

5.3 Tab Button Styling - ปรับแต่งปุ่ม Tab

lv_obj_t * tab_btns = lv_tabview_get_tab_bar(tabview);

/* สีพื้นหลัง tab bar */
lv_obj_set_style_bg_color(tab_btns,
    lv_palette_darken(LV_PALETTE_GREY, 3), 0);

/* สีตัวอักษร tab buttons */
lv_obj_set_style_text_color(tab_btns,
    lv_palette_lighten(LV_PALETTE_GREY, 5), 0);

/* เส้นใต้ tab ที่ active */
lv_obj_set_style_border_side(tab_btns,
    LV_BORDER_SIDE_BOTTOM,
    LV_PART_ITEMS | LV_STATE_CHECKED);
lv_obj_set_style_border_color(tab_btns,
    lv_palette_main(LV_PALETTE_ORANGE),
    LV_PART_ITEMS | LV_STATE_CHECKED);
lv_obj_set_style_border_width(tab_btns, 3,
    LV_PART_ITEMS | LV_STATE_CHECKED);

5.4 Programmatic Tab Switching

/* เปลี่ยน tab ด้วยโค้ด (ใช้สำหรับ auto-rotate) */
lv_tabview_set_active(tabview, 1, LV_ANIM_ON);   /* ไปยัง tab index 1 */

/* อ่าน tab ที่ active อยู่ */
uint32_t active_idx = lv_tabview_get_tab_active(tabview);

5.5 Performance Tip - อัพเดทเฉพาะ Tab ที่ Active

/* ลด CPU load โดยอัพเดทเฉพาะ tab ที่มองเห็น */
static void optimized_timer_cb(lv_timer_t * timer)
{
    uint32_t active = lv_tabview_get_tab_active(tabview_ref);
    switch(active) {
        case 0: update_imu_tab(); break;
        case 1: update_adc_tab(); break;
    }
}

6. แบบฝึกหัด

Exercise 1: เพิ่ม Tab ที่ 3 - System Status

โจทย์: เพิ่ม tab "System" ที่แสดงข้อมูล System Status:

Uptime: เวลาตั้งแต่เริ่มต้น (วินาที) อัพเดททุก 1 วินาที
Memory Usage: แสดงเป็น Bar (จำลอง 40-70%)
CPU Load: แสดงเป็น Arc gauge (จำลอง 20-80%)

การประยุกต์ใช้งานจริง:

ระบบ Monitoring ในโรงงาน ต้องมีหน้า System Health เสมอ
ใช้ตรวจสอบว่า Embedded Device ทำงานปกติหรือไม่

Hint:

ใช้ static uint32_t uptime_sec นับเวลาใน timer callback
ถ้า timer ทำงานทุก 100ms → นับ 10 ครั้ง = 1 วินาที
ใช้ lv_label_set_text_fmt() แสดง uptime

Exercise 2: Auto-Rotating Tabs

โจทย์: สร้างระบบ Auto-Rotate ที่เปลี่ยน tab ทุก 5 วินาทีอัตโนมัติ:

เปลี่ยน tab ไปข้างหน้าทีละ tab
เมื่อถึง tab สุดท้าย ย้อนกลับ tab แรก
แสดงตัวนับถอยหลัง "Next tab in: 3s" ที่มุมล่างขวา
เมื่อผู้ใช้กดเลือก tab เอง ให้ reset ตัวนับถอยหลัง

การประยุกต์ใช้งานจริง:

Digital Signage ในห้องควบคุมโรงงาน
Kiosk Mode ใน Dashboard ที่ไม่มีคนดูแลตลอดเวลา
หน้าจอ Overview สำหรับผู้บริหารดูภาพรวม

Hint:

ใช้ lv_tabview_set_active(tv, next_idx, LV_ANIM_ON)
นับ counter ใน timer callback: static uint32_t auto_counter
Reset counter เมื่อ auto_counter >= 50 (50 x 100ms = 5s)

Exercise 3: Tab Content with Color Theme

โจทย์: ปรับแต่งแต่ละ tab ให้มี color theme แตกต่างกัน:

IMU Tab: พื้นหลังสีน้ำเงินเข้ม (#16213E) ตัวอักษรสีขาว
ADC Tab: พื้นหลังสีเขียวเข้ม (#1A3C34) ตัวอักษรสีขาว
System Tab: พื้นหลังสีม่วงเข้ม (#2D1B3D) ตัวอักษรสีขาว

Hint:

ใช้ lv_obj_set_style_bg_color(tab, lv_color_hex(0x16213E), 0)
Label สีขาว: lv_obj_set_style_text_color(label, lv_color_hex(0xFFFFFF), 0)

7. References

PreviousScale Temperature NextChart Dashboard

Last updated 12 days ago

Was this helpful?

hashtagLab 5: Sensor Dashboard (TabView)

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

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

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

hashtagHow? - จะทำอย่างไร

hashtag2. หลักการทำงาน

hashtag2.1 TabView Architecture

hashtag2.2 Screen Layout

hashtag2.3 Data Flow

hashtag2.4 Tab Bar Position Options

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

hashtag3.1 TabView Functions

hashtag3.2 Tab Bar Position Constants

hashtag3.3 Critical Pattern - ปิด Scrolling

hashtag3.4 Simulation Functions (PC Simulator)

hashtag4. โค้ดตัวอย่าง

hashtag4.1 Global Variables

hashtag4.2 Simulation Helpers

hashtag4.3 Timer Callback - อัพเดทข้อมูลทุก Tab

hashtag4.4 สร้าง IMU Tab Content

hashtag4.5 สร้าง ADC Tab Content

hashtag4.6 Main Function

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

hashtag5.1 Tab Bar Sizing - ขนาดของ Tab Bar

hashtag5.2 Tab Content Parent - ข้อควรระวัง

hashtag5.3 Tab Button Styling - ปรับแต่งปุ่ม Tab

hashtag5.4 Programmatic Tab Switching

hashtag5.5 Performance Tip - อัพเดทเฉพาะ Tab ที่ Active

hashtag6. แบบฝึกหัด

hashtagExercise 1: เพิ่ม Tab ที่ 3 - System Status

hashtagExercise 2: Auto-Rotating Tabs

hashtagExercise 3: Tab Content with Color Theme

hashtag7. References

Lab 5: Sensor Dashboard (TabView)

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

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

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

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

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

2.1 TabView Architecture

2.2 Screen Layout

2.3 Data Flow

2.4 Tab Bar Position Options

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

3.1 TabView Functions

3.2 Tab Bar Position Constants

3.3 Critical Pattern - ปิด Scrolling

3.4 Simulation Functions (PC Simulator)

4. โค้ดตัวอย่าง

4.1 Global Variables

4.2 Simulation Helpers

4.3 Timer Callback - อัพเดทข้อมูลทุก Tab

4.4 สร้าง IMU Tab Content

4.5 สร้าง ADC Tab Content

4.6 Main Function

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

5.1 Tab Bar Sizing - ขนาดของ Tab Bar

5.2 Tab Content Parent - ข้อควรระวัง

5.3 Tab Button Styling - ปรับแต่งปุ่ม Tab

5.4 Programmatic Tab Switching

5.5 Performance Tip - อัพเดทเฉพาะ Tab ที่ Active

6. แบบฝึกหัด

Exercise 1: เพิ่ม Tab ที่ 3 - System Status

Exercise 2: Auto-Rotating Tabs

Exercise 3: Tab Content with Color Theme

7. References