Sensor Dashboard

Lab 5: Sensor Dashboard (TabView)

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

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

Multi-Page UI: แยกข้อมูลหลาย sensors ใน tabs
Organized Layout: จัดกลุ่ม content อย่างเป็นระบบ
Real Applications: รูปแบบ dashboard ที่ใช้จริง

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

TabView Widget: สร้าง multi-tab interface
Tab Content: แต่ละ tab มี widgets ของตัวเอง
Tab Styling: ปรับแต่ง tab bar และ buttons
Scrolling Control: ปิด scroll ถ้าไม่ต้องการ

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

สร้าง TabView กับ tab bar ด้านบน
เพิ่ม tabs: ADC, Accelerometer, Gyroscope
ใส่ content widgets ในแต่ละ tab
ใช้ timer อัพเดทข้อมูลทุก tab

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

2.1 TabView Functions

Function

Description

lv_tabview_create(parent)

สร้าง tabview

lv_tabview_set_tab_bar_position(tv, dir)

ตำแหน่ง tab bar

lv_tabview_set_tab_bar_size(tv, size)

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

lv_tabview_add_tab(tv, "name")

เพิ่ม tab ใหม่

lv_tabview_get_tab_bar(tv)

รับ tab bar object

lv_tabview_get_content(tv)

รับ content container

2.2 Tab Bar Position

Direction

Description

LV_DIR_TOP

Tab bar ด้านบน (default)

LV_DIR_BOTTOM

Tab bar ด้านล่าง

LV_DIR_LEFT

Tab bar ด้านซ้าย

LV_DIR_RIGHT

Tab bar ด้านขวา

2.3 Important Pattern

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

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

3.1 TabView Functions

Function

Description

lv_tabview_create(parent)

สร้าง tabview

lv_tabview_set_tab_bar_position(tv, dir)

ตำแหน่ง tab bar

lv_tabview_set_tab_bar_size(tv, size)

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

lv_tabview_add_tab(tv, "name")

เพิ่ม tab ใหม่

lv_tabview_get_tab_bar(tv)

รับ tab bar object

lv_tabview_get_content(tv)

รับ content container

3.2 Tab Bar Position

Direction

Description

LV_DIR_TOP

Tab bar ด้านบน (default)

LV_DIR_BOTTOM

Tab bar ด้านล่าง

LV_DIR_LEFT

Tab bar ด้านซ้าย

LV_DIR_RIGHT

Tab bar ด้านขวา

3.3 Important Pattern

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

4. Code Example

4.1 Global Variables

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

/* Accelerometer Tab */
static lv_obj_t * accel_chart;
static lv_chart_series_t * accel_ser[3];
static lv_obj_t * accel_labels[3];

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

static lv_timer_t * dash_timer;

4.2 Timer Callback

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

    /* Update ADC */
    uint16_t adc = simulate_adc_read();
    int32_t pct = (adc * 100) / 4095;
    lv_bar_set_value(adc_bar, pct, LV_ANIM_ON);
    float volt = ((float)adc / 4095.0f) * 3.3f;
    lv_label_set_text_fmt(adc_label, "ADC: %d (%.2fV)", adc, (double)volt);

    /* Update Accelerometer */
    float ax, ay, az;
    simulate_imu_accel(&ax, &ay, &az);
    lv_chart_set_next_value(accel_chart, accel_ser[0], (int32_t)(ax * 100));
    lv_chart_set_next_value(accel_chart, accel_ser[1], (int32_t)(ay * 100));
    lv_chart_set_next_value(accel_chart, accel_ser[2], (int32_t)(az * 100));
    lv_label_set_text_fmt(accel_labels[0], "X:%+.1f", (double)ax);
    lv_label_set_text_fmt(accel_labels[1], "Y:%+.1f", (double)ay);
    lv_label_set_text_fmt(accel_labels[2], "Z:%+.1f", (double)az);

    /* Update Gyroscope */
    float gx, gy, gz;
    simulate_imu_gyro(&gx, &gy, &gz);
    int32_t gx_pct = (int32_t)((gx + 1.0f) * 50);  /* -1..1 → 0..100 */
    int32_t gy_pct = (int32_t)((gy + 1.0f) * 50);
    int32_t gz_pct = (int32_t)((gz + 1.0f) * 50);
    lv_arc_set_value(gyro_arcs[0], gx_pct);
    lv_arc_set_value(gyro_arcs[1], gy_pct);
    lv_arc_set_value(gyro_arcs[2], gz_pct);
    lv_label_set_text_fmt(gyro_labels[0], "%.2f", (double)gx);
    lv_label_set_text_fmt(gyro_labels[1], "%.2f", (double)gy);
    lv_label_set_text_fmt(gyro_labels[2], "%.2f", (double)gz);
}

4.3 Tab Content Creators

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 */
    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);

    /* Label */
    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);
}

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

    /* Chart */
    accel_chart = lv_chart_create(parent);
    lv_obj_set_size(accel_chart, 380, 180);
    lv_obj_align(accel_chart, LV_ALIGN_CENTER, -30, 10);
    lv_chart_set_type(accel_chart, LV_CHART_TYPE_LINE);
    lv_chart_set_point_count(accel_chart, 50);
    lv_chart_set_range(accel_chart, LV_CHART_AXIS_PRIMARY_Y, -200, 1200);
    lv_obj_set_style_size(accel_chart, 0, 0, LV_PART_INDICATOR);

    /* Series */
    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++) {
        accel_ser[i] = lv_chart_add_series(accel_chart, colors[i],
                                           LV_CHART_AXIS_PRIMARY_Y);
        accel_labels[i] = lv_label_create(parent);
        lv_label_set_text(accel_labels[i], "0.0");
        lv_obj_set_style_text_color(accel_labels[i], colors[i], 0);
        lv_obj_set_style_text_font(accel_labels[i], &lv_font_montserrat_24, 0);
        lv_obj_align(accel_labels[i], LV_ALIGN_RIGHT_MID, -10, -60 + i * 50);
    }
}

static void create_gyro_tab(lv_obj_t * parent)
{
    /* Title */
    lv_obj_t * title = lv_label_create(parent);
    lv_label_set_text(title, "Gyroscope (rad/s)");
    lv_obj_set_style_text_font(title, &lv_font_montserrat_24, 0);
    lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 5);

    const char *names[] = {"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++) {
        /* Arc */
        gyro_arcs[i] = lv_arc_create(parent);
        lv_obj_set_size(gyro_arcs[i], 120, 120);
        lv_obj_align(gyro_arcs[i], LV_ALIGN_CENTER, (i - 1) * 140, 0);
        lv_arc_set_range(gyro_arcs[i], 0, 100);
        lv_arc_set_value(gyro_arcs[i], 50);
        lv_arc_set_bg_angles(gyro_arcs[i], 135, 45);
        lv_obj_set_style_arc_color(gyro_arcs[i], colors[i], LV_PART_INDICATOR);
        lv_obj_remove_style(gyro_arcs[i], NULL, LV_PART_KNOB);

        /* Name label */
        lv_obj_t * name = lv_label_create(parent);
        lv_label_set_text(name, names[i]);
        lv_obj_set_style_text_color(name, colors[i], 0);
        lv_obj_set_style_text_font(name, &lv_font_montserrat_24, 0);
        lv_obj_align_to(name, gyro_arcs[i], LV_ALIGN_OUT_TOP_MID, 0, -5);

        /* Value label */
        gyro_labels[i] = lv_label_create(parent);
        lv_label_set_text(gyro_labels[i], "0.00");
        lv_obj_set_style_text_font(gyro_labels[i], &lv_font_montserrat_24, 0);
        lv_obj_align_to(gyro_labels[i], gyro_arcs[i],
                        LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
    }
}

4.4 Main Function

void lab5_sensor_dashboard(void)
{
    /* Create 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);

    /* Create tabs */
    lv_obj_t * tab_adc = lv_tabview_add_tab(tabview, "ADC");
    lv_obj_t * tab_accel = lv_tabview_add_tab(tabview, "Accel");
    lv_obj_t * tab_gyro = lv_tabview_add_tab(tabview, "Gyro");

    /* Style tab backgrounds */
    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);
    lv_obj_set_style_bg_color(tab_accel, lv_color_hex(0xFFFFFF), 0);
    lv_obj_set_style_bg_opa(tab_accel, LV_OPA_COVER, 0);
    lv_obj_set_style_bg_color(tab_gyro, lv_color_hex(0xFFFFFF), 0);
    lv_obj_set_style_bg_opa(tab_gyro, LV_OPA_COVER, 0);

    /* Populate tabs */
    create_adc_tab(tab_adc);
    create_accel_tab(tab_accel);
    create_gyro_tab(tab_gyro);

    /* CRITICAL: Disable scrolling */
    lv_obj_remove_flag(lv_tabview_get_content(tabview),
                       LV_OBJ_FLAG_SCROLLABLE);

    /* Timer for updates */
    dash_timer = lv_timer_create(dashboard_timer_cb, 100, NULL);
}

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

5.1 Tab Bar Sizing

/* Tab bar size depends on position */

/* TOP/BOTTOM: size = height */
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 = width */
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 created in tab use the TAB as parent */
void create_tab_content(lv_obj_t * tab_parent)
{
    /* tab_parent is the container returned by lv_tabview_add_tab() */
    lv_obj_t * widget = lv_label_create(tab_parent);  /* NOT lv_screen_active() */
}

5.3 Tab Button Styling

lv_obj_t * tab_btns = lv_tabview_get_tab_bar(tabview);

/* Background color */
lv_obj_set_style_bg_color(tab_btns,
    lv_palette_darken(LV_PALETTE_GREY, 3), 0);

/* Text color */
lv_obj_set_style_text_color(tab_btns,
    lv_palette_lighten(LV_PALETTE_GREY, 5), 0);

/* Active tab indicator */
lv_obj_set_style_border_side(tab_btns,
    LV_BORDER_SIDE_TOP,
    LV_PART_ITEMS | LV_STATE_CHECKED);

6. แบบฝึกหัด

Exercise 1: Four-Tab Dashboard

เพิ่ม tab ที่ 4 "Summary" แสดงค่าสรุปจากทุก sensor

Exercise 2: Bottom Tabs

เปลี่ยน tab bar ไปด้านล่าง พร้อมปรับ content layout

7. References

Previous Lab: Lab 4: Scale Temperature Next Lab: Lab 6: Chart Dashboard

PreviousScale Temperature NextChart Dashboard

Last updated 20 days ago

Was this helpful?

hashtagLab 5: Sensor Dashboard (TabView)

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

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

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

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

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

hashtag2.1 TabView Functions

hashtag2.2 Tab Bar Position

hashtag2.3 Important Pattern

hashtag3.1 TabView Functions

hashtag3.2 Tab Bar Position

hashtag3.3 Important Pattern

hashtag4. Code Example

hashtag4.1 Global Variables

hashtag4.2 Timer Callback

hashtag4.3 Tab Content Creators

hashtag4.4 Main Function

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

hashtag5.1 Tab Bar Sizing

hashtag5.2 Tab Content Parent

hashtag5.3 Tab Button Styling

hashtag6. แบบฝึกหัด

hashtagExercise 1: Four-Tab Dashboard

hashtagExercise 2: Bottom Tabs

hashtag7. References

Lab 5: Sensor Dashboard (TabView)

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

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

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

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

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

2.1 TabView Functions

2.2 Tab Bar Position

2.3 Important Pattern

3.1 TabView Functions

3.2 Tab Bar Position

3.3 Important Pattern

4. Code Example

4.1 Global Variables

4.2 Timer Callback

4.3 Tab Content Creators

4.4 Main Function

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

5.1 Tab Bar Sizing

5.2 Tab Content Parent

5.3 Tab Button Styling

6. แบบฝึกหัด

Exercise 1: Four-Tab Dashboard

Exercise 2: Bottom Tabs

7. References