Chart Timeseries

Lab 3: Chart Widget (Time-Series Data)

---

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

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

• Trend Analysis: เห็นแนวโน้มของข้อมูลตามเวลา

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

• Real-time Monitoring: ดู sensor data แบบ live

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

1. Chart Widget: สร้าง line chart

2. Multiple Series: เพิ่มหลาย data series

3. Auto-Shift: ข้อมูลเลื่อนอัตโนมัติ (ring buffer)

4. Styling: ปรับ line width, hide points

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

1. สร้าง Chart widget กำหนด type เป็น LINE

2. เพิ่ม 3 series สำหรับ X, Y, Z

3. ใช้ timer อัพเดทข้อมูลทุก 100ms

4. แสดง labels แสดงค่าปัจจุบัน

---

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

2.1 Chart Data Flow

┌─────────────────────────────────────────────────────────────┐
│                   CHART DATA FLOW                           │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   Sensor Data (100ms interval)                              │
│         │                                                   │
│         ▼                                                   │
│   ┌─────────────────┐                                       │
│   │ Scale to int    │  → ax*100 (for precision)             │
│   └────────┬────────┘                                       │
│            │                                                │
│            ▼                                                │
│   ┌─────────────────┐                                       │
│   │set_next_value() │  → Adds new point, shifts old         │
│   └────────┬────────┘                                       │
│            │                                                │
│            ▼                                                │
│   ┌───────────────────────────────────────────┐             │
│   │  Chart Buffer (Ring Buffer, 50 points)    │             │
│   │  [P0][P1][P2]...[P48][P49] ← New point    │             │
│   │   ↑                                       │             │
│   │   └── Oldest point discarded              │             │
│   └───────────────────────────────────────────┘             │
│                                                             │
└─────────────────────────────────────────────────────────────┘

2.2 Chart Configuration

┌─────────────────────────────────────────────────────────────┐
│                 CHART CONFIGURATION                         │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   1. Create Chart                                           │
│      lv_chart_create(parent)                                │
│                                                             │
│   2. Set Type                                               │
│      lv_chart_set_type(chart, LV_CHART_TYPE_LINE)           │
│                                                             │
│   3. Set Point Count (determines X resolution)              │
│      lv_chart_set_point_count(chart, 50)                    │
│                                                             │
│   4. Set Y Range                                            │
│      lv_chart_set_range(chart, Y_AXIS, min, max)            │
│                                                             │
│   5. Add Series                                             │
│      lv_chart_add_series(chart, color, axis)                │
│                                                             │
│   6. Style (hide points, set line width)                    │
│      lv_obj_set_style_size(chart, 0, 0, LV_PART_INDICATOR)  │
│      lv_obj_set_style_line_width(chart, 2, LV_PART_ITEMS)   │
│                                                             │
└─────────────────────────────────────────────────────────────┘

---

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

3.1 Chart Functions

Function	Description
lv_chart_create(parent)	สร้าง chart
lv_chart_set_type(chart, type)	กำหนดประเภท (LINE, BAR, SCATTER)
lv_chart_set_point_count(chart, count)	จำนวน data points
lv_chart_set_range(chart, axis, min, max)	กำหนด Y-axis range
lv_chart_add_series(chart, color, axis)	เพิ่ม data series
lv_chart_set_next_value(chart, ser, val)	เพิ่มค่าใหม่ (auto-shift)

3.2 Chart Types

Type	Description
LV_CHART_TYPE_LINE	เส้น (time-series)
LV_CHART_TYPE_BAR	แท่ง (comparison)
LV_CHART_TYPE_SCATTER	จุดกระจาย (X vs Y)

3.3 Performance Tips

• Point Count: 50-100 สำหรับ smooth performance

• Update Rate: 100ms เหมาะสมสำหรับ real-time

• Hide Points: ลด overhead ด้วย size(0,0) สำหรับ indicator

---

4. Code Example

4.1 Global Variables

static lv_obj_t * accel_chart;
static lv_chart_series_t * ser_x;
static lv_chart_series_t * ser_y;
static lv_chart_series_t * ser_z;
static lv_obj_t * value_labels[3];
static lv_timer_t * chart_timer;

#define CHART_POINT_COUNT  50

4.2 Timer Callback

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

    /* Get accelerometer data */
    float ax, ay, az;
    simulate_imu_accel(&ax, &ay, &az);

    /* Scale to int for chart (multiply by 100) */
    int32_t x_val = (int32_t)(ax * 100);
    int32_t y_val = (int32_t)(ay * 100);
    int32_t z_val = (int32_t)(az * 100);

    /* Add new points (auto-shift old data) */
    lv_chart_set_next_value(accel_chart, ser_x, x_val);
    lv_chart_set_next_value(accel_chart, ser_y, y_val);
    lv_chart_set_next_value(accel_chart, ser_z, z_val);

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

4.3 Main Function

void lab3_chart_timeseries(void)
{
    /* Title */
    lv_obj_t * title = lv_label_create(lv_screen_active());
    lv_label_set_text(title, "Lab 3: Accelerometer Chart");
    lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 10);

    /* Create Chart */
    accel_chart = lv_chart_create(lv_screen_active());
    lv_obj_set_size(accel_chart, 400, 220);
    lv_obj_align(accel_chart, LV_ALIGN_CENTER, 0, 10);

    /* Chart configuration */
    lv_chart_set_type(accel_chart, LV_CHART_TYPE_LINE);
    lv_chart_set_point_count(accel_chart, CHART_POINT_COUNT);

    /* Y-axis range: -200 to 1200 (for accel * 100) */
    lv_chart_set_range(accel_chart, LV_CHART_AXIS_PRIMARY_Y, -200, 1200);

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

    /* Add series for X, Y, Z */
    ser_x = lv_chart_add_series(accel_chart,
                lv_palette_main(LV_PALETTE_RED),
                LV_CHART_AXIS_PRIMARY_Y);

    ser_y = lv_chart_add_series(accel_chart,
                lv_palette_main(LV_PALETTE_GREEN),
                LV_CHART_AXIS_PRIMARY_Y);

    ser_z = lv_chart_add_series(accel_chart,
                lv_palette_main(LV_PALETTE_BLUE),
                LV_CHART_AXIS_PRIMARY_Y);

    /* Value labels */
    const char *axis_names[] = {"X:", "Y:", "Z:"};
    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++) {
        value_labels[i] = lv_label_create(lv_screen_active());
        lv_label_set_text_fmt(value_labels[i], "%s 0.00", axis_names[i]);
        lv_obj_set_style_text_color(value_labels[i], colors[i], 0);
        lv_obj_align(value_labels[i], LV_ALIGN_BOTTOM_LEFT,
                     30 + i * 140, -30);
    }

    /* Timer for updates */
    chart_timer = lv_timer_create(chart_timer_cb, 100, NULL);
}

---

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

5.1 Data Scaling

/* Accelerometer: float → int (x100) */
float ax = 0.5f;              /* m/s² */
int32_t scaled = (int32_t)(ax * 100);  /* = 50 */

/* Set range accordingly */
lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, -200, 1200);
/* Covers -2.00 to +12.00 m/s² */

5.2 Ring Buffer Behavior

/* lv_chart_set_next_value() behavior:
 *
 * Initial:  [0][0][0][0][0]  (5 points)
 *
 * Add 10:   [0][0][0][0][10]
 *
 * Add 20:   [0][0][0][10][20]
 *
 * Add 30:   [0][0][10][20][30]
 *
 * ... oldest data shifts out automatically
 */

5.3 Grid Lines

/* Add grid lines for better readability */
lv_chart_set_div_line_count(chart, 5, 8);  /* 5 horizontal, 8 vertical */

---

6. แบบฝึกหัด

Exercise 1: Magnitude Chart

แสดง Magnitude ของ accelerometer (sqrt(x² + y² + z²)) แทน 3 แกน

Exercise 2: Dual Y-Axis

แสดง Accelerometer บน Y-axis หลัก และ Temperature บน Y-axis รอง

---

7. References

• LVGL Chart

• lv_example_chart_1.c

---

Previous Lab: Lab 2: Arc Gauge Next Lab: Lab 4: Scale Temperature