Arc Gauge

Lab 2: Arc Widget (Circular Gauge)

---

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

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

• Circular Display: แสดงค่าแบบวงกลมสวยงาม

• Angular Data: เหมาะกับ Gyroscope, Compass, Angle

• Professional UI: Dashboard ที่ดูมืออาชีพ

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

1. Arc Widget: สร้าง circular gauge

2. Rotation & Angles: กำหนดมุมเริ่มต้นและ span

3. Arc Styling: ปรับความหนา, สี

4. Value Label: แสดงค่าตรงกลาง

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

1. สร้าง Arc widget พร้อมกำหนด rotation

2. ตั้งค่า background angles

3. เพิ่ม label แสดงค่าตรงกลาง

4. ใช้ timer อัพเดทค่าแบบ real-time

---

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

2.1 Arc Geometry

┌─────────────────────────────────────────────────────────────┐
│                   ARC GEOMETRY                              │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│              0° (3 o'clock)                                 │
│                   │                                         │
│                   │                                         │
│    270°(12)──────●──────90° (6 o'clock)                     │
│                   │                                         │
│                   │                                         │
│              180° (9 o'clock)                               │
│                                                             │
│   Default rotation: 0° (starts at 3 o'clock)                │
│   Common rotation: 135° (starts at bottom-left)             │
│                                                             │
└─────────────────────────────────────────────────────────────┘

2.2 Arc Configuration Flow

┌─────────────────────────────────────────────────────────────┐
│                 ARC CONFIGURATION                           │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   Step 1: Create Arc                                        │
│         │                                                   │
│         ▼                                                   │
│   ┌─────────────────┐                                       │
│   │ lv_arc_create() │                                       │
│   └────────┬────────┘                                       │
│            │                                                │
│   Step 2: Set Size (must be square)                         │
│         │                                                   │
│         ▼                                                   │
│   ┌─────────────────┐                                       │
│   │ lv_obj_set_size │                                       │
│   │  (200, 200)     │  ← Width = Height                     │
│   └────────┬────────┘                                       │
│            │                                                │
│   Step 3: Set Rotation (starting point)                     │
│         │                                                   │
│         ▼                                                   │
│   ┌─────────────────┐                                       │
│   │lv_arc_set_      │                                       │
│   │rotation(135°)   │  ← Start from bottom-left             │
│   └────────┬────────┘                                       │
│            │                                                │
│   Step 4: Set Background Angles (span)                      │
│         │                                                   │
│         ▼                                                   │
│   ┌─────────────────┐                                       │
│   │lv_arc_set_bg_   │                                       │
│   │angles(0, 270)   │  ← 270° span (3/4 circle)             │
│   └────────┬────────┘                                       │
│            │                                                │
│   Step 5: Set Range & Value                                 │
│         │                                                   │
│         ▼                                                   │
│   ┌─────────────────┐                                       │
│   │lv_arc_set_range │                                       │
│   │lv_arc_set_value │                                       │
│   └─────────────────┘                                       │
│                                                             │
└─────────────────────────────────────────────────────────────┘

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

3.1 Arc Functions

Function	Description
lv_arc_create(parent)	สร้าง arc widget
lv_arc_set_rotation(arc, angle)	กำหนดมุมเริ่มต้น
lv_arc_set_bg_angles(arc, start, end)	กำหนด background span
lv_arc_set_range(arc, min, max)	กำหนด value range
lv_arc_set_value(arc, value)	ตั้งค่าปัจจุบัน
lv_arc_get_value(arc)	อ่านค่าปัจจุบัน

3.2 Arc Styling

Function	Description
lv_obj_set_style_arc_width()	ความหนาของ arc
lv_obj_set_style_arc_color()	สีของ arc
lv_obj_remove_style(arc, NULL, LV_PART_KNOB)	ซ่อน knob

---

4. Code Example

4.1 Global Variables

static lv_obj_t * gauge_arc;
static lv_obj_t * value_label;
static lv_timer_t * arc_timer;

4.2 Arc Event Callback

static void arc_event_cb(lv_event_t * e)
{
    lv_obj_t * arc = lv_event_get_target(e);
    int32_t value = lv_arc_get_value(arc);
    lv_label_set_text_fmt(value_label, "%d%%", (int)value);
}

4.3 Timer Callback

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

    /* Simulate changing value */
    uint16_t adc = simulate_adc_read();
    int32_t pct = (adc * 100) / 4095;

    lv_arc_set_value(gauge_arc, pct);
    lv_label_set_text_fmt(value_label, "%d%%", (int)pct);
}

4.4 Main Function

void lab2_arc_gauge(void)
{
    /* Background */
    lv_obj_set_style_bg_color(lv_screen_active(),
                              lv_color_hex(0x0f0f23), LV_PART_MAIN);

    /* Title */
    lv_obj_t * title = lv_label_create(lv_screen_active());
    lv_label_set_text(title, "Lab 2: Arc Gauge");
    lv_obj_set_style_text_color(title, lv_color_hex(0xFFFFFF), 0);
    lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 10);

    /* Create Arc */
    gauge_arc = lv_arc_create(lv_screen_active());
    lv_obj_set_size(gauge_arc, 200, 200);

    /* Configuration */
    lv_arc_set_rotation(gauge_arc, 135);        /* Start from bottom-left */
    lv_arc_set_bg_angles(gauge_arc, 0, 270);    /* 270° span (3/4 circle) */
    lv_arc_set_range(gauge_arc, 0, 100);
    lv_arc_set_value(gauge_arc, 50);
    lv_obj_center(gauge_arc);

    /* Event callback */
    lv_obj_add_event_cb(gauge_arc, arc_event_cb,
                        LV_EVENT_VALUE_CHANGED, NULL);

    /* Styling */
    lv_obj_set_style_arc_width(gauge_arc, 20, LV_PART_MAIN);
    lv_obj_set_style_arc_width(gauge_arc, 20, LV_PART_INDICATOR);
    lv_obj_set_style_arc_color(gauge_arc,
                               lv_palette_main(LV_PALETTE_CYAN),
                               LV_PART_INDICATOR);

    /* Value label in center */
    value_label = lv_label_create(lv_screen_active());
    lv_label_set_text(value_label, "50%");
    lv_obj_set_style_text_color(value_label, lv_color_hex(0xFFFFFF), 0);
    lv_obj_set_style_text_font(value_label, &lv_font_montserrat_24, 0);
    lv_obj_center(value_label);

    /* Auto-update timer */
    arc_timer = lv_timer_create(arc_timer_cb, 100, NULL);
}

---

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

5.1 Arc Parts

/* LV_PART_MAIN - Background arc */
lv_obj_set_style_arc_color(arc, lv_color_hex(0x333333), LV_PART_MAIN);

/* LV_PART_INDICATOR - Filled arc (value) */
lv_obj_set_style_arc_color(arc, lv_palette_main(LV_PALETTE_CYAN), LV_PART_INDICATOR);

/* LV_PART_KNOB - The draggable knob */
lv_obj_remove_style(arc, NULL, LV_PART_KNOB);  /* ซ่อน knob */

5.2 Common Arc Configurations

Use Case	Rotation	BG Angles	Range
Gauge (3/4)	135°	0, 270	0-100
Full circle	270°	0, 360	-180 to +180
Half circle	180°	0, 180	0-100
Speedometer	135°	0, 270	0-200

5.3 Read-Only Arc (No Knob)

/* Remove knob for display-only arc */
lv_obj_remove_style(arc, NULL, LV_PART_KNOB);

/* Or make it non-adjustable */
lv_obj_clear_flag(arc, LV_OBJ_FLAG_CLICKABLE);

---

6. แบบฝึกหัด

Exercise 1: Triple Arc Display

สร้าง Arc 3 อันแสดง X, Y, Z ของ Gyroscope (Roll, Pitch, Yaw)

Exercise 2: Color Gradient Arc

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

• Cyan: 0-50%

• Yellow: 51-80%

• Red: 81-100%

---

7. References

• LVGL Arc

• lv_example_arc_1.c

---

Previous Lab: Lab 1: Slider & Bar Next Lab: Lab 3: Chart Time-Series