Chart Dashboard

Lab 6: Chart Dashboard (Multiple Chart Types)

---

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

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

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

• Chart Types: เลือกประเภท chart ที่เหมาะกับข้อมูล

• Professional Dashboard: รูปแบบ dashboard ที่ใช้ในอุตสาหกรรม

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

1. Bar Chart: เปรียบเทียบค่าแบบ side-by-side

2. Area Chart: แสดง trend พร้อม fill

3. Scatter Chart: แสดงความสัมพันธ์ X vs Y

4. Line Chart: Time-series หลาย series

5. Left Tabs: TabView กับ tabs ด้านซ้าย

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

1. สร้าง TabView กับ tabs ด้านซ้าย

2. Tab 1: Bar chart สำหรับ X, Y, Z comparison

3. Tab 2: Area chart สำหรับ magnitude

4. Tab 3: Scatter chart สำหรับ X vs Y motion

5. Tab 4: Line chart สำหรับ gyroscope

---

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

2.1 Chart Type Functions

Chart Type	Function	Update Method
LINE	LV_CHART_TYPE_LINE	lv_chart_set_next_value()
BAR	LV_CHART_TYPE_BAR	lv_chart_set_value_by_id() + refresh()
SCATTER	LV_CHART_TYPE_SCATTER	lv_chart_set_next_value2(x, y)

2.2 Bar Chart Specifics

/* Bar Chart requires: */
lv_chart_set_type(chart, LV_CHART_TYPE_BAR);
lv_chart_set_point_count(chart, 3);  /* Number of bars */

/* Update by ID (not next_value) */
lv_chart_set_value_by_id(chart, ser, 0, value_x);  /* Bar 0 */
lv_chart_set_value_by_id(chart, ser, 1, value_y);  /* Bar 1 */
lv_chart_set_value_by_id(chart, ser, 2, value_z);  /* Bar 2 */

/* MUST call refresh after update */
lv_chart_refresh(chart);

2.3 Scatter Chart Specifics

/* Scatter Chart requires: */
lv_chart_set_type(chart, LV_CHART_TYPE_SCATTER);

/* Set BOTH X and Y ranges */
lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_X, 0, 200);
lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 200);

/* Update with (x, y) pairs */
lv_chart_set_next_value2(chart, ser, x_value, y_value);

---

3. Code Example

3.1 Global Variables

#define CHART_POINTS    50
#define SCATTER_POINTS  30

/* Bar Chart */
static lv_obj_t * bar_chart;
static lv_chart_series_t * bar_ser;
static lv_obj_t * bar_labels[3];

/* Area Chart */
static lv_obj_t * area_chart;
static lv_chart_series_t * area_ser;
static lv_obj_t * area_label;

/* Scatter Chart */
static lv_obj_t * scatter_chart;
static lv_chart_series_t * scatter_ser;
static lv_obj_t * scatter_label;

/* Line Chart */
static lv_obj_t * line_chart;
static lv_chart_series_t * line_ser[3];
static lv_obj_t * line_labels[3];

static lv_timer_t * chart_timer;

3.2 Timer Callback

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

    /* Get sensor data */
    float ax, ay, az, gx, gy, gz;
    simulate_imu_accel(&ax, &ay, &az);
    simulate_imu_gyro(&gx, &gy, &gz);

    /*=== Bar Chart: X, Y, Z comparison ===*/
    int32_t bar_x = (int32_t)((ax + 2.0f) * 25.0f);  /* -2 to +2 → 0-100 */
    int32_t bar_y = (int32_t)((ay + 2.0f) * 25.0f);
    int32_t bar_z = (int32_t)((az / 10.0f) * 10.0f);
    bar_x = LV_CLAMP(0, bar_x, 100);
    bar_y = LV_CLAMP(0, bar_y, 100);
    bar_z = LV_CLAMP(0, bar_z, 100);

    lv_chart_set_value_by_id(bar_chart, bar_ser, 0, bar_x);
    lv_chart_set_value_by_id(bar_chart, bar_ser, 1, bar_y);
    lv_chart_set_value_by_id(bar_chart, bar_ser, 2, bar_z);
    lv_chart_refresh(bar_chart);  /* REQUIRED for bar chart */

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

    /*=== Area Chart: Magnitude ===*/
    float mag = sqrtf(ax*ax + ay*ay + az*az);
    int32_t mag_scaled = (int32_t)(mag * 10.0f);
    if(mag_scaled > 150) mag_scaled = 150;

    lv_chart_set_next_value(area_chart, area_ser, mag_scaled);
    lv_label_set_text_fmt(area_label, "Magnitude: %.2f m/s²", (double)mag);

    /*=== Scatter Chart: X vs Y ===*/
    int32_t scatter_x = (int32_t)((ax + 2.0f) * 50.0f);  /* -2 to +2 → 0-200 */
    int32_t scatter_y = (int32_t)((ay + 2.0f) * 50.0f);

    lv_chart_set_next_value2(scatter_chart, scatter_ser, scatter_x, scatter_y);
    lv_label_set_text_fmt(scatter_label, "X: %.2f  Y: %.2f",
                          (double)ax, (double)ay);

    /*=== Line Chart: Gyroscope ===*/
    int32_t gx_scaled = (int32_t)((gx + 1.0f) * 50.0f);  /* -1 to +1 → 0-100 */
    int32_t gy_scaled = (int32_t)((gy + 1.0f) * 50.0f);
    int32_t gz_scaled = (int32_t)((gz + 1.0f) * 50.0f);

    lv_chart_set_next_value(line_chart, line_ser[0], gx_scaled);
    lv_chart_set_next_value(line_chart, line_ser[1], gy_scaled);
    lv_chart_set_next_value(line_chart, line_ser[2], gz_scaled);

    lv_label_set_text_fmt(line_labels[0], "Roll: %.2f", (double)gx);
    lv_label_set_text_fmt(line_labels[1], "Pitch: %.2f", (double)gy);
    lv_label_set_text_fmt(line_labels[2], "Yaw: %.2f", (double)gz);
}

3.3 Tab Creators

static void create_bar_tab(lv_obj_t * parent)
{
    lv_obj_t * title = lv_label_create(parent);
    lv_label_set_text(title, "Bar: Accel X/Y/Z");
    lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 5);

    bar_chart = lv_chart_create(parent);
    lv_obj_set_size(bar_chart, 390, 280);
    lv_obj_align(bar_chart, LV_ALIGN_CENTER, 0, 0);
    lv_chart_set_type(bar_chart, LV_CHART_TYPE_BAR);
    lv_chart_set_point_count(bar_chart, 3);
    lv_chart_set_range(bar_chart, LV_CHART_AXIS_PRIMARY_Y, 0, 100);

    bar_ser = lv_chart_add_series(bar_chart,
                  lv_palette_main(LV_PALETTE_GREEN),
                  LV_CHART_AXIS_PRIMARY_Y);

    lv_obj_set_style_pad_column(bar_chart, 50, 0);

    /* Labels */
    const char *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++) {
        bar_labels[i] = lv_label_create(parent);
        lv_label_set_text_fmt(bar_labels[i], "%s: 0.00", names[i]);
        lv_obj_set_style_text_color(bar_labels[i], colors[i], 0);
        lv_obj_align(bar_labels[i], LV_ALIGN_BOTTOM_LEFT, 30 + i * 120, -5);
    }
}

static void create_area_tab(lv_obj_t * parent)
{
    lv_obj_t * title = lv_label_create(parent);
    lv_label_set_text(title, "Area: Magnitude");
    lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 5);

    area_chart = lv_chart_create(parent);
    lv_obj_set_size(area_chart, 390, 285);
    lv_obj_align(area_chart, LV_ALIGN_CENTER, 0, 0);
    lv_chart_set_type(area_chart, LV_CHART_TYPE_LINE);
    lv_chart_set_point_count(area_chart, CHART_POINTS);
    lv_chart_set_range(area_chart, LV_CHART_AXIS_PRIMARY_Y, 0, 150);

    area_ser = lv_chart_add_series(area_chart,
                   lv_palette_main(LV_PALETTE_RED),
                   LV_CHART_AXIS_PRIMARY_Y);

    /* Enable area fill */
    lv_obj_set_style_bg_opa(area_chart, LV_OPA_50, LV_PART_ITEMS);
    lv_obj_set_style_size(area_chart, 4, 4, LV_PART_INDICATOR);
    lv_obj_set_style_line_width(area_chart, 3, LV_PART_ITEMS);
    lv_chart_set_div_line_count(area_chart, 5, 8);

    area_label = lv_label_create(parent);
    lv_label_set_text(area_label, "Magnitude: 0.00 m/s²");
    lv_obj_set_style_text_color(area_label,
        lv_palette_main(LV_PALETTE_RED), 0);
    lv_obj_align(area_label, LV_ALIGN_BOTTOM_MID, 0, -5);
}

static void create_scatter_tab(lv_obj_t * parent)
{
    lv_obj_t * title = lv_label_create(parent);
    lv_label_set_text(title, "Scatter: X vs Y");
    lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 5);

    scatter_chart = lv_chart_create(parent);
    lv_obj_set_size(scatter_chart, 290, 280);
    lv_obj_align(scatter_chart, LV_ALIGN_CENTER, 0, 0);
    lv_chart_set_type(scatter_chart, LV_CHART_TYPE_SCATTER);
    lv_chart_set_point_count(scatter_chart, SCATTER_POINTS);

    /* MUST set BOTH X and Y ranges for scatter */
    lv_chart_set_range(scatter_chart, LV_CHART_AXIS_PRIMARY_X, 0, 200);
    lv_chart_set_range(scatter_chart, LV_CHART_AXIS_PRIMARY_Y, 0, 200);

    scatter_ser = lv_chart_add_series(scatter_chart,
                      lv_palette_main(LV_PALETTE_BLUE),
                      LV_CHART_AXIS_PRIMARY_Y);

    lv_obj_set_style_size(scatter_chart, 10, 10, LV_PART_INDICATOR);
    lv_obj_set_style_bg_opa(scatter_chart, LV_OPA_70, LV_PART_INDICATOR);
    lv_chart_set_div_line_count(scatter_chart, 5, 5);

    scatter_label = lv_label_create(parent);
    lv_label_set_text(scatter_label, "X: 0.00  Y: 0.00");
    lv_obj_align(scatter_label, LV_ALIGN_BOTTOM_MID, 0, -5);
}

static void create_line_tab(lv_obj_t * parent)
{
    lv_obj_t * title = lv_label_create(parent);
    lv_label_set_text(title, "Line: Gyro R/P/Y");
    lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 5);

    line_chart = lv_chart_create(parent);
    lv_obj_set_size(line_chart, 390, 275);
    lv_obj_align(line_chart, LV_ALIGN_CENTER, 0, -5);
    lv_chart_set_type(line_chart, LV_CHART_TYPE_LINE);
    lv_chart_set_point_count(line_chart, CHART_POINTS);
    lv_chart_set_range(line_chart, LV_CHART_AXIS_PRIMARY_Y, 0, 100);

    lv_obj_set_style_size(line_chart, 0, 0, LV_PART_INDICATOR);
    lv_obj_set_style_line_width(line_chart, 3, LV_PART_ITEMS);
    lv_chart_set_div_line_count(line_chart, 5, 5);

    lv_color_t colors[] = {
        lv_palette_main(LV_PALETTE_RED),
        lv_palette_main(LV_PALETTE_GREEN),
        lv_palette_main(LV_PALETTE_BLUE)
    };
    const char *names[] = {"Roll", "Pitch", "Yaw"};

    for(int i = 0; i < 3; i++) {
        line_ser[i] = lv_chart_add_series(line_chart, colors[i],
                                          LV_CHART_AXIS_PRIMARY_Y);
        line_labels[i] = lv_label_create(parent);
        lv_label_set_text_fmt(line_labels[i], "%s: 0.00", names[i]);
        lv_obj_set_style_text_color(line_labels[i], colors[i], 0);
        lv_obj_align(line_labels[i], LV_ALIGN_BOTTOM_LEFT, 20 + i * 125, -5);
    }
}

3.4 Main Function

void lab6_chart_dashboard(void)
{
    /* TabView with LEFT tabs */
    lv_obj_t * tabview = lv_tabview_create(lv_screen_active());
    lv_tabview_set_tab_bar_position(tabview, LV_DIR_LEFT);
    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_bar = lv_tabview_add_tab(tabview, "Bar");
    lv_obj_t * tab_area = lv_tabview_add_tab(tabview, "Area");
    lv_obj_t * tab_scatter = lv_tabview_add_tab(tabview, "Scatter");
    lv_obj_t * tab_line = lv_tabview_add_tab(tabview, "Line");

    /* Style backgrounds */
    lv_obj_set_style_bg_color(tab_bar, lv_color_hex(0xF5F5F5), 0);
    lv_obj_set_style_bg_opa(tab_bar, LV_OPA_COVER, 0);
    /* ... same for other tabs ... */

    /* Populate tabs */
    create_bar_tab(tab_bar);
    create_area_tab(tab_area);
    create_scatter_tab(tab_scatter);
    create_line_tab(tab_line);

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

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

---

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

4.1 Chart Type Summary

Type	point_count	Update	Refresh?
LINE	Data points	set_next_value()	No
BAR	Number of bars	set_value_by_id()	Yes
SCATTER	Trail length	set_next_value2(x,y)	No

4.2 Area Chart Technique

/* Area chart = Line chart + fill */
lv_chart_set_type(chart, LV_CHART_TYPE_LINE);
lv_obj_set_style_bg_opa(chart, LV_OPA_50, LV_PART_ITEMS);

4.3 Left Tab Content Size

/* With LEFT tabs (80px): */
/* Content area: (480 - 80) x 320 = 400 x 320 */
/* Chart size: ~390 x 280 (with padding) */

---

5. แบบฝึกหัด

Exercise 1: Multi-Series Bar Chart

สร้าง Bar chart ที่มี 2 series: Accelerometer และ Gyroscope บน chart เดียวกัน

Exercise 2: Combined Chart

สร้าง tab ที่แสดง Line chart (accelerometer) และ Scatter chart (X vs Y) พร้อมกันในหน้าเดียว

---

6. References

• LVGL Chart

• lv_example_chart_1.c

• LVGL TabView

---

Previous Lab: Lab 5: Sensor Dashboard Next Week: Week 4 Part II - Advanced Sensor Integration