Chart Dashboard

Lab 11: Real Chart Dashboard (Based on Ex6)

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

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

• Multiple Visualizations: ข้อมูล sensor เดียวกันแสดงได้หลายรูปแบบ

• Performance Optimization: อัพเดทเฉพาะ chart ที่ active

• Real Data Integration: รวม IMU และ Tilt data ใน dashboard

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

1. Bar Chart: แสดง Accel X/Y/Z แบบเปรียบเทียบ

2. Area Chart: แสดง Tilt Magnitude ตามเวลา

3. Scatter Chart: แสดง Roll vs Pitch (Tilt Ball)

4. Line Chart: แสดง Gyroscope time-series

5. Active Tab Optimization: ลด CPU usage

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

1. สร้าง TabView แบบ side tabs (LV_DIR_LEFT)

2. สร้าง 4 chart types ใน 4 tabs

3. Timer callback ตรวจสอบ active tab และอัพเดทเฉพาะ chart นั้น

---

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

2.1 Dashboard Architecture

┌─────────────────────────────────────────────────────────────┐
│              CHART DASHBOARD ARCHITECTURE                   │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   ┌──────────────────────────────────────────────────────┐  │
│   │                 SENSOR LAYER                         │  │
│   │                                                      │  │
│   │   ┌───────────────┐    ┌───────────────┐             │  │
│   │   │  Accelerometer│    │   Gyroscope   │             │  │
│   │   │   ax, ay, az  │    │   gx, gy, gz  │             │  │
│   │   └───────┬───────┘    └───────┬───────┘             │  │
│   │           │                    │                     │  │
│   │           └────────┬───────────┘                     │  │
│   │                    │                                 │  │
│   │           ┌────────▼────────┐                        │  │
│   │           │  Tilt Analysis  │                        │  │
│   │           │   Roll, Pitch   │                        │  │
│   │           └────────┬────────┘                        │  │
│   └────────────────────┼─────────────────────────────────┘  │
│                        │                                    │
│   ┌────────────────────▼─────────────────────────────────┐  │
│   │              TIMER CALLBACK                          │  │
│   │                                                      │  │
│   │   1. Read all sensors                                │  │
│   │   2. Get active_tab = lv_tabview_get_tab_active()    │  │
│   │   3. switch(active_tab) - Update ONLY that chart     │  │
│   │                                                      │  │
│   └──────────────────────────────────────────────────────┘  │
│                                                             │
└─────────────────────────────────────────────────────────────┘

2.2 Tab Layout (Side Tabs)

┌─────────────────────────────────────────────────────────────┐
│  ┌────────┐                                                 │
│  │  Bar   │  ╔═══════════════════════════════════════════╗  │
│  │ Chart  │  ║         Tab Content (400x320)             ║  │
│  ├────────┤  ║                                           ║  │
│  │  Area  │  ║   Tab 0: Bar Chart (Accel X/Y/Z)          ║  │
│  │ Chart  │  ║      [====X====]  X: +0.5                 ║  │
│  ├────────┤  ║      [====Y====]  Y: -0.3                 ║  │
│  │Scatter │  ║      [====Z====]  Z: +9.8                 ║  │
│  │ Chart  │  ║                                           ║  │
│  ├────────┤  ║   Tab 1: Area Chart (Tilt Magnitude)      ║  │
│  │  Line  │  ║      ╱╲    ╱╲                             ║  │
│  │ Chart  │  ║     ╱  ╲  ╱  ╲╱╲                          ║  │
│  └────────┘  ║    ╱    ╲╱      ╲  (faded fill)           ║  │
│              ║                                           ║  │
│   Tab Bar    ║   Tab 2: Scatter (Roll vs Pitch)          ║  │
│    80px      ║           •  •                            ║  │
│              ║        •   •   •  (motion pattern)        ║  │
│              ║                                           ║  │
│              ║   Tab 3: Line Chart (Gyroscope)           ║  │
│              ║      ─── Roll                             ║  │
│              ║      ─── Pitch                            ║  │
│              ║      ─── Yaw                              ║  │
│              ╚═══════════════════════════════════════════╝  │
└─────────────────────────────────────────────────────────────┘

2.3 Chart Data Sources

┌─────────────────────────────────────────────────────────────┐
│                    DATA SOURCES PER TAB                     │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   Tab 0: Bar Chart                                          │
│     Source: aic_imu_read_accel(&ax, &ay, &az)               │
│     Mapping: -5..+5 m/s² → 0..100 (sensitive)               │
│                                                             │
│   Tab 1: Area Chart                                         │
│     Source: aic_tilt_get_roll(), aic_tilt_get_pitch()       │
│     Mapping: magnitude = sqrt(roll² + pitch²) degrees       │
│     Range: 0..90 degrees                                    │
│                                                             │
│   Tab 2: Scatter Chart                                      │
│     Source: Roll, Pitch from Tilt Analysis                  │
│     X-axis: Roll (-90..+90 → 0..200)                        │
│     Y-axis: Pitch (-90..+90 → 0..200)                       │
│     Center = 100,100 (level position)                       │
│                                                             │
│   Tab 3: Line Chart                                         │
│     Source: aic_imu_read_gyro(&gx, &gy, &gz)                │
│     Mapping: -2..+2 rad/s → -200..+200                      │
│                                                             │
└─────────────────────────────────────────────────────────────┘

---

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

3.1 Chart Types

Type	Constant	Use Case
Bar	LV_CHART_TYPE_BAR	Compare values at moment
Line	LV_CHART_TYPE_LINE	Time-series data
Scatter	LV_CHART_TYPE_SCATTER	X vs Y correlation

3.2 Key Functions

Function	Description
lv_chart_set_value_by_id()	Update specific bar in bar chart
lv_chart_set_next_value()	Add point to line/area chart
lv_chart_set_next_value2()	Add X,Y point to scatter chart
lv_tabview_get_tab_active()	Get currently active tab index

3.3 Optimization APIs

/* Get active tab index (0, 1, 2, 3) */
uint32_t active = lv_tabview_get_tab_active(tabview);

/* Only update active tab's chart */
switch(active) {
    case 0: update_bar_chart(); break;
    case 1: update_area_chart(); break;
    case 2: update_scatter_chart(); break;
    case 3: update_line_chart(); break;
}

---

4. Code Example

4.1 Timer Callback (Active Tab Only)

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

    /* ===== READ ALL SENSORS ===== */
    float ax, ay, az;
    float gx, gy, gz;

    if(!aic_imu_read_accel(&ax, &ay, &az)) {
        ax = 0; ay = 0; az = 9.81f;
    }
    if(!aic_imu_read_gyro(&gx, &gy, &gz)) {
        gx = 0; gy = 0; gz = 0;
    }

    /* Update Tilt */
    aic_tilt_update_from_imu();
    float roll = aic_tilt_get_roll();
    float pitch = aic_tilt_get_pitch();

    /* ===== GET ACTIVE TAB ===== */
    uint32_t active_tab = lv_tabview_get_tab_active(ex11_tabview);

    /* ===== UPDATE ONLY ACTIVE TAB ===== */
    switch(active_tab) {
        case 0: /* Bar Chart - Accel X/Y/Z */
        {
            /* Scale: -5 to +5 m/s² → 0 to 100 */
            int32_t bar_x = (int32_t)((ax + 5.0f) * 10.0f);
            int32_t bar_y = (int32_t)((ay + 5.0f) * 10.0f);
            int32_t bar_z = (int32_t)((az + 5.0f) * 10.0f);

            /* Clamp to 0-100 */
            if(bar_x < 0) bar_x = 0; if(bar_x > 100) bar_x = 100;
            if(bar_y < 0) bar_y = 0; if(bar_y > 100) bar_y = 100;
            if(bar_z < 0) bar_z = 0; if(bar_z > 100) bar_z = 100;

            lv_chart_set_value_by_id(ex11_bar_chart, ex11_bar_ser_x, 0, bar_x);
            lv_chart_set_value_by_id(ex11_bar_chart, ex11_bar_ser_y, 0, bar_y);
            lv_chart_set_value_by_id(ex11_bar_chart, ex11_bar_ser_z, 0, bar_z);
            lv_chart_refresh(ex11_bar_chart);

            lv_label_set_text_fmt(ex11_bar_labels[0], "X: %.1f", (double)ax);
            lv_label_set_text_fmt(ex11_bar_labels[1], "Y: %.1f", (double)ay);
            lv_label_set_text_fmt(ex11_bar_labels[2], "Z: %.1f", (double)az);
            break;
        }

        case 1: /* Area Chart - Tilt Magnitude */
        {
            float tilt_mag = sqrtf(roll*roll + pitch*pitch);
            int32_t tilt_scaled = (int32_t)(tilt_mag);
            if(tilt_scaled > 90) tilt_scaled = 90;

            lv_chart_set_next_value(ex11_area_chart, ex11_area_ser, tilt_scaled);
            lv_label_set_text_fmt(ex11_area_label,
                "Tilt: %.1f deg (R:%.1f P:%.1f)",
                (double)tilt_mag, (double)roll, (double)pitch);
            break;
        }

        case 2: /* Scatter Chart - Roll vs Pitch */
        {
            /* Roll/Pitch: -90..+90 → 0..200 */
            int32_t scatter_x = (int32_t)((roll + 90.0f) * (200.0f/180.0f));
            int32_t scatter_y = (int32_t)((pitch + 90.0f) * (200.0f/180.0f));

            if(scatter_x < 0) scatter_x = 0; if(scatter_x > 200) scatter_x = 200;
            if(scatter_y < 0) scatter_y = 0; if(scatter_y > 200) scatter_y = 200;

            lv_chart_set_next_value2(ex11_scatter_chart, ex11_scatter_ser,
                                      scatter_x, scatter_y);
            lv_label_set_text_fmt(ex11_scatter_label,
                "Roll: %.1f  Pitch: %.1f",
                (double)roll, (double)pitch);
            break;
        }

        case 3: /* Line Chart - Gyroscope */
        {
            /* Scale: -2..+2 rad/s → -200..+200 */
            int32_t gx_val = (int32_t)(gx * 100);
            int32_t gy_val = (int32_t)(gy * 100);
            int32_t gz_val = (int32_t)(gz * 100);

            lv_chart_set_next_value(ex11_line_chart, ex11_line_ser[0], gx_val);
            lv_chart_set_next_value(ex11_line_chart, ex11_line_ser[1], gy_val);
            lv_chart_set_next_value(ex11_line_chart, ex11_line_ser[2], gz_val);

            lv_label_set_text_fmt(ex11_line_labels[0], "X:%.2f", (double)gx);
            lv_label_set_text_fmt(ex11_line_labels[1], "Y:%.2f", (double)gy);
            lv_label_set_text_fmt(ex11_line_labels[2], "Z:%.2f", (double)gz);
            break;
        }
    }
}

4.2 Create Bar Chart Tab

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

    /* Create Bar Chart */
    ex11_bar_chart = lv_chart_create(parent);
    lv_obj_set_size(ex11_bar_chart, 250, 200);
    lv_obj_align(ex11_bar_chart, LV_ALIGN_CENTER, -50, 10);
    lv_chart_set_type(ex11_bar_chart, LV_CHART_TYPE_BAR);
    lv_chart_set_point_count(ex11_bar_chart, 1);  /* Single bar per series */
    lv_chart_set_range(ex11_bar_chart, LV_CHART_AXIS_PRIMARY_Y, 0, 100);

    /* Add colored series */
    ex11_bar_ser_x = lv_chart_add_series(ex11_bar_chart,
                        lv_palette_main(LV_PALETTE_RED),
                        LV_CHART_AXIS_PRIMARY_Y);
    ex11_bar_ser_y = lv_chart_add_series(ex11_bar_chart,
                        lv_palette_main(LV_PALETTE_GREEN),
                        LV_CHART_AXIS_PRIMARY_Y);
    ex11_bar_ser_z = lv_chart_add_series(ex11_bar_chart,
                        lv_palette_main(LV_PALETTE_BLUE),
                        LV_CHART_AXIS_PRIMARY_Y);

    /* Value labels */
    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++) {
        ex11_bar_labels[i] = lv_label_create(parent);
        lv_obj_set_style_text_color(ex11_bar_labels[i], colors[i], 0);
        lv_obj_align(ex11_bar_labels[i], LV_ALIGN_RIGHT_MID, -10, -40 + i*35);
    }
}

4.3 Create Scatter Chart Tab

static void ex11_create_scatter_tab(lv_obj_t * parent)
{
    /* Title */
    lv_obj_t * title = lv_label_create(parent);
    lv_label_set_text(title, "Tilt Ball (Roll vs Pitch)");
    lv_obj_set_style_text_font(title, &lv_font_montserrat_24, 0);
    lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 5);

    /* Create Scatter Chart */
    ex11_scatter_chart = lv_chart_create(parent);
    lv_obj_set_size(ex11_scatter_chart, 200, 200);  /* Square for X-Y */
    lv_obj_align(ex11_scatter_chart, LV_ALIGN_CENTER, 0, 20);
    lv_chart_set_type(ex11_scatter_chart, LV_CHART_TYPE_SCATTER);
    lv_chart_set_point_count(ex11_scatter_chart, 30);  /* Trail of points */

    /* Range: 0-200 (center = 100 = level) */
    lv_chart_set_range(ex11_scatter_chart, LV_CHART_AXIS_PRIMARY_X, 0, 200);
    lv_chart_set_range(ex11_scatter_chart, LV_CHART_AXIS_PRIMARY_Y, 0, 200);

    /* Series with visible points */
    ex11_scatter_ser = lv_chart_add_series(ex11_scatter_chart,
                           lv_palette_main(LV_PALETTE_PURPLE),
                           LV_CHART_AXIS_PRIMARY_Y);

    /* Point style */
    lv_obj_set_style_size(ex11_scatter_chart, 6, 6, LV_PART_INDICATOR);
    lv_obj_set_style_line_width(ex11_scatter_chart, 0, LV_PART_ITEMS);  /* No lines */

    /* Label */
    ex11_scatter_label = lv_label_create(parent);
    lv_label_set_text(ex11_scatter_label, "Roll: 0.0  Pitch: 0.0");
    lv_obj_align(ex11_scatter_label, LV_ALIGN_BOTTOM_MID, 0, -10);
}

4.4 Main Function

void week4_ex11_real_chart_dashboard(void)
{
    /* ===== HARDWARE INITIALIZATION ===== */
    aic_sensors_init();
    aic_tilt_init(NULL);

    /* ===== CREATE TABVIEW (LEFT TABS) ===== */
    ex11_tabview = lv_tabview_create(lv_screen_active());
    lv_tabview_set_tab_bar_position(ex11_tabview, LV_DIR_LEFT);
    lv_tabview_set_tab_bar_size(ex11_tabview, 80);

    /* Create tabs */
    lv_obj_t * tab_bar = lv_tabview_add_tab(ex11_tabview, "Bar");
    lv_obj_t * tab_area = lv_tabview_add_tab(ex11_tabview, "Area");
    lv_obj_t * tab_scatter = lv_tabview_add_tab(ex11_tabview, "Scatter");
    lv_obj_t * tab_line = lv_tabview_add_tab(ex11_tabview, "Line");

    /* White background for all tabs */
    lv_obj_set_style_bg_color(tab_bar, lv_color_hex(0xFFFFFF), 0);
    lv_obj_set_style_bg_opa(tab_bar, LV_OPA_COVER, 0);
    /* ... same for other tabs ... */

    /* Populate tabs */
    ex11_create_bar_tab(tab_bar);
    ex11_create_area_tab(tab_area);
    ex11_create_scatter_tab(tab_scatter);
    ex11_create_line_tab(tab_line);

    /* Disable scrolling */
    lv_obj_remove_flag(lv_tabview_get_content(ex11_tabview),
                       LV_OBJ_FLAG_SCROLLABLE);

    /* Timer - optimized for active tab */
    ex11_chart_timer = lv_timer_create(ex11_chart_timer_cb, 100, NULL);
}

---

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

5.1 Active Tab Optimization

/* Benefits:
 * - Only 1 chart updated per timer tick instead of 4
 * - ~75% reduction in CPU/GPU usage
 * - Smoother animations on active tab
 * - Battery saving on portable devices
 */

/* Pattern:
 * 1. Read all sensors (cheap operation)
 * 2. Check active tab
 * 3. Update only that tab's widgets
 */

5.2 Scatter Chart for Motion Pattern

/* Scatter chart shows motion pattern over time:
 *
 * - Each point represents Roll/Pitch at one moment
 * - Trail of 30 points shows recent history
 * - Center (100,100) = board is level
 * - Movement creates pattern showing tilt behavior
 *
 * Use cases:
 * - Gesture recognition
 * - Motion analysis
 * - Balance training feedback
 */

5.3 Bar Chart with Multiple Series

/* Bar chart with 3 colored series:
 *
 * - Each series = one axis (X, Y, Z)
 * - Each series has 1 point (current value)
 * - Colors distinguish axes clearly
 * - Good for comparing values at same moment
 *
 * Note: Use lv_chart_set_value_by_id() for bar charts
 *       (not set_next_value which shifts data)
 */

lv_chart_set_value_by_id(chart, series, 0, value);  /* Index 0 */
lv_chart_refresh(chart);  /* Force redraw */

---

6. แบบฝึกหัด

Exercise 1: Add Grid Lines

เพิ่ม grid lines ให้ Scatter chart เพื่อแสดง level position ชัดเจน

Exercise 2: Color by Zone

เปลี่ยนสี scatter points ตามระยะห่างจากศูนย์กลาง:

• Green: distance < 30 (stable)

• Yellow: 30 <= distance < 60

• Red: distance >= 60 (tilting)

---

7. References

• LVGL Chart

• lv_example_chart_5 (Area effect)

• LVGL TabView

---

Previous Lab: Lab 10: Real Scale Gauge Next Week: Week 5: Scope TBD