Sensor Dashboard

Lab 8: Real Sensor Dashboard (Based on Ex5)

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

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

• Multi-Sensor: รวม ADC, Accelerometer, Gyroscope ใน dashboard เดียว

• Real APIs: ใช้ aic_adc_read(), aic_imu_read_accel(), aic_imu_read_gyro()

• TabView Organization: จัดการข้อมูลหลายประเภทด้วย tabs

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

1. Multiple Sensor APIs: อ่านค่าจากหลาย sensor

2. TabView Integration: รวม widgets หลายประเภทใน tabs

3. Single Timer: อัพเดทหลาย widgets จาก timer เดียว

4. Data Mapping: แปลงค่า sensor เป็นค่าแสดงผล

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

1. เพิ่ม aic_sensors_init() ก่อนสร้าง TabView

2. Timer callback อ่านค่าจากทุก sensor APIs

3. อัพเดท ADC Bar, Accel Chart, Gyro Arcs ใน callback เดียว

---

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

2.1 Dashboard Architecture

┌─────────────────────────────────────────────────────────────┐
│             SENSOR DASHBOARD ARCHITECTURE                   │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   ┌──────────────────────────────────────────────────────┐  │
│   │                  SENSOR LAYER                        │  │
│   │   ┌─────────┐  ┌─────────────┐  ┌─────────────┐      │  │
│   │   │   ADC   │  │Accelerometer│  │  Gyroscope  │      │  │
│   │   │ (POTEN) │  │  (BMI270)   │  │  (BMI270)   │      │  │
│   │   └────┬────┘  └──────┬──────┘  └──────┬──────┘      │  │
│   └────────┼──────────────┼─────────────────┼────────────┘  │
│            │              │                 │               │
│            ▼              ▼                 ▼               │
│   ┌──────────────────────────────────────────────────────┐  │
│   │                  API LAYER                           │  │
│   │aic_adc_read() aic_imu_read_accel() aic_imu_read_gyro()  │
│   └────────┬──────────────┬─────────────────┬───────────┘   │
│            │              │                 │               │
│            ▼              ▼                 ▼               │
│   ┌──────────────────────────────────────────────────────┐  │
│   │             TIMER CALLBACK (100ms)                   │  │
│   │   - Read all sensors                                 │  │
│   │   - Scale data for widgets                           │  │
│   │   - Update UI elements                               │  │
│   └──────────────────────────────────────────────────────┘  │
│                                                             │
└─────────────────────────────────────────────────────────────┘

2.2 TabView Layout

┌─────────────────────────────────────────────────────────────┐
│  [  ADC  ] [  Accel  ] [  Gyro  ]    ← Tab Bar (80px)       │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   ╔═══════════════════════════════════════════════════════╗ │
│   ║                    Tab Content                        ║ │
│   ║                    480 x 240                          ║ │
│   ║                                                       ║ │
│   ║   ADC Tab:                                            ║ │
│   ║     [=========BAR (450x60)==========]                 ║ │
│   ║            "ADC: 2048 (1.65V)"                        ║ │
│   ║                                                       ║ │
│   ║   Accel Tab:                                          ║ │
│   ║     [CHART 400x210]  X: +0.5                          ║ │
│   ║                      Y: -0.3                          ║ │
│   ║                      Z: +9.8                          ║ │
│   ║                                                       ║ │
│   ║   Gyro Tab:                                           ║ │
│   ║     (Arc)    (Arc)    (Arc)                           ║ │
│   ║     Roll     Pitch    Yaw                             ║ │
│   ║     0.00     0.00     0.00                            ║ │
│   ╚═══════════════════════════════════════════════════════╝ │
└─────────────────────────────────────────────────────────────┘

2.3 Data Mapping

┌─────────────────────────────────────────────────────────────┐
│                 DATA MAPPING                                │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   ADC (0-4095):                                             │
│     pct = (adc * 100) / 4095     → Bar (0-100%)             │
│     volt = (adc / 4095) * 3.3V   → Label                    │
│                                                             │
│   Accelerometer (float m/s²):                               │
│     scaled = (int32_t)(ax * 100) → Chart (-1500 to 1500)    │
│                                                             │
│   Gyroscope (float rad/s, ±1.0):                            │
│     pct = (int32_t)((gx + 1.0) * 50) → Arc (0-100%)         │
│         -1.0 rad/s → 0%                                     │
│          0.0 rad/s → 50%                                    │
│         +1.0 rad/s → 100%                                   │
│                                                             │
└─────────────────────────────────────────────────────────────┘

---

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

3.1 Sensor APIs Used

Function	Return	Description
aic_sensors_init()	void	Initialize all sensors
aic_adc_read(AIC_ADC_CH0)	uint16_t	Read ADC channel 0 (0-4095)
aic_imu_read_accel(&ax,&ay,&az)	bool	Read accelerometer (m/s²)
aic_imu_read_gyro(&gx,&gy,&gz)	bool	Read gyroscope (rad/s)

3.2 Widget Functions

Tab	Widget	Key Functions
ADC	lv_bar	lv_bar_set_value(), lv_bar_set_range()
Accel	lv_chart	lv_chart_set_next_value()
Gyro	lv_arc	lv_arc_set_value(), lv_arc_set_range()

---

4. Code Example

4.1 Timer Callback (All Sensors)

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

    /* ===== ADC (REAL) ===== */
    uint16_t adc = aic_adc_read(AIC_ADC_CH0);
    int32_t pct = (adc * 100) / ADC_MAX;
    lv_bar_set_value(ex8_adc_bar, pct, LV_ANIM_ON);
    float volt = ((float)adc / ADC_MAX) * 3.3f;
    lv_label_set_text_fmt(ex8_adc_label, "ADC: %d (%.2fV)",
                          adc, (double)volt);

    /* ===== ACCELEROMETER (REAL BMI270) ===== */
    float ax, ay, az;
    if(aic_imu_read_accel(&ax, &ay, &az)) {
        lv_chart_set_next_value(ex8_accel_chart, ex8_accel_ser[0],
                                (int32_t)(ax * 100));
        lv_chart_set_next_value(ex8_accel_chart, ex8_accel_ser[1],
                                (int32_t)(ay * 100));
        lv_chart_set_next_value(ex8_accel_chart, ex8_accel_ser[2],
                                (int32_t)(az * 100));
        lv_label_set_text_fmt(ex8_accel_labels[0], "X:%+.1f", (double)ax);
        lv_label_set_text_fmt(ex8_accel_labels[1], "Y:%+.1f", (double)ay);
        lv_label_set_text_fmt(ex8_accel_labels[2], "Z:%+.1f", (double)az);
    }

    /* ===== GYROSCOPE (REAL BMI270) ===== */
    float gx, gy, gz;
    if(aic_imu_read_gyro(&gx, &gy, &gz)) {
        /* Map -1.0..+1.0 rad/s to 0..100% */
        int32_t gx_pct = (int32_t)((gx + 1.0f) * 50);
        int32_t gy_pct = (int32_t)((gy + 1.0f) * 50);
        int32_t gz_pct = (int32_t)((gz + 1.0f) * 50);

        lv_arc_set_value(ex8_gyro_arcs[0], gx_pct);
        lv_arc_set_value(ex8_gyro_arcs[1], gy_pct);
        lv_arc_set_value(ex8_gyro_arcs[2], gz_pct);

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

4.2 Create Gyro Tab (with Large Arcs)

static void ex8_create_gyro_tab(lv_obj_t * parent)
{
    /* Title */
    lv_obj_t * label = lv_label_create(parent);
    lv_label_set_text(label, "Gyroscope (REAL BMI270)");
    lv_obj_set_style_text_font(label, &lv_font_montserrat_24, 0);
    lv_obj_align(label, LV_ALIGN_TOP_MID, 0, 5);

    const char *axis_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++) {
        /* Large arcs */
        ex8_gyro_arcs[i] = lv_arc_create(parent);
        lv_obj_set_size(ex8_gyro_arcs[i], 140, 140);
        lv_obj_align(ex8_gyro_arcs[i], LV_ALIGN_CENTER, (i - 1) * 155, 0);
        lv_arc_set_range(ex8_gyro_arcs[i], 0, 100);
        lv_arc_set_value(ex8_gyro_arcs[i], 50);
        lv_arc_set_bg_angles(ex8_gyro_arcs[i], 135, 45);
        lv_obj_set_style_arc_color(ex8_gyro_arcs[i], colors[i],
                                   LV_PART_INDICATOR);
        lv_obj_set_style_arc_width(ex8_gyro_arcs[i], 20, LV_PART_MAIN);
        lv_obj_set_style_arc_width(ex8_gyro_arcs[i], 20, LV_PART_INDICATOR);

        /* Remove knob for read-only */
        lv_obj_remove_style(ex8_gyro_arcs[i], NULL, LV_PART_KNOB);

        /* Axis label above arc */
        lv_obj_t * axis_label = lv_label_create(parent);
        lv_label_set_text(axis_label, axis_names[i]);
        lv_obj_set_style_text_color(axis_label, colors[i], 0);
        lv_obj_set_style_text_font(axis_label, &lv_font_montserrat_24, 0);
        lv_obj_align_to(axis_label, ex8_gyro_arcs[i], LV_ALIGN_OUT_TOP_MID, 0, -5);

        /* Value label below arc */
        ex8_gyro_labels[i] = lv_label_create(parent);
        lv_label_set_text(ex8_gyro_labels[i], "0.00");
        lv_obj_set_style_text_color(ex8_gyro_labels[i], colors[i], 0);
        lv_obj_set_style_text_font(ex8_gyro_labels[i], &lv_font_montserrat_24, 0);
        lv_obj_align_to(ex8_gyro_labels[i], ex8_gyro_arcs[i],
                        LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
    }
}

4.3 Main Function

void week4_ex8_real_sensor_dashboard(void)
{
    /* ===== HARDWARE INITIALIZATION ===== */
    aic_sensors_init();

    /* ===== 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 content */
    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);
    /* ... same for other tabs ... */

    /* Populate tabs */
    ex8_create_adc_tab(tab_adc);
    ex8_create_accel_tab(tab_accel);
    ex8_create_gyro_tab(tab_gyro);

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

    /* Timer for ALL sensors */
    ex8_timer = lv_timer_create(ex8_timer_cb, 100, NULL);
}

---

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

5.1 Gyroscope Data Mapping

/* Gyroscope: -1.0 to +1.0 rad/s → 0 to 100% */
float gx = -0.5f;  /* Example: -0.5 rad/s */
int32_t pct = (int32_t)((gx + 1.0f) * 50);  /* = 25% */

/* Visual representation:
 *   -1.0 rad/s = 0%   (full left)
 *    0.0 rad/s = 50%  (center)
 *   +1.0 rad/s = 100% (full right)
 */

5.2 Single Timer for Multiple Sensors

/* Advantages:
 * - Single callback simplifies timing
 * - All sensors read at same instant
 * - Consistent update rate across UI
 * - Less memory (fewer timer objects)
 */

5.3 Tab Content Styling

/* Set white background for each tab content */
lv_obj_set_style_bg_color(tab, lv_color_hex(0xFFFFFF), 0);
lv_obj_set_style_bg_opa(tab, LV_OPA_COVER, 0);

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

---

6. แบบฝึกหัด

Exercise 1: ADC with Color Threshold

เปลี่ยนสี ADC Bar ตามค่า:

• Green: 0-30%

• Yellow: 31-70%

• Red: 71-100%

Exercise 2: Active Tab Optimization

อัพเดทเฉพาะ tab ที่ active เท่านั้น เพื่อเพิ่ม performance

---

7. References

• LVGL TabView

• LVGL Arc

• lv_example_tabview_2

---

Previous Lab: Lab 7: Real IMU Display Next Lab: Lab 9: Real Arc Gauge