Slider Bar

Lab 1: Slider & Bar Widget (ADC Visualization)

---

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

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

• ADC Visualization: ค่า ADC 0-4095 ต้องแสดงผลให้เข้าใจง่าย

• Slider vs Bar: Slider ใช้รับ input, Bar ใช้แสดงผล read-only

• Value Mapping: แปลงค่า raw → percentage → voltage

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

1. Slider Widget: สร้าง slider พร้อม range และ callback

2. Bar Widget: สร้าง progress bar แบบ read-only

3. ADC Mapping: สูตรการแปลงค่า ADC เป็น voltage

4. Timer Update: อัพเดท UI แบบ periodic

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

1. สร้าง Slider แสดง ADC raw value (0-4095)

2. สร้าง Bar แสดง percentage (0-100%)

3. แสดง Voltage คำนวณจาก ADC

---

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

2.1 ADC Value Mapping

┌─────────────────────────────────────────────────────────────┐
│                 ADC VALUE MAPPING                           │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   ADC Raw Value (0-4095)                                    │
│         │                                                   │
│         ▼                                                   │
│   ┌─────────────────┐                                       │
│   │ Slider Display  │  → Shows position on 0-4095 scale     │
│   └────────┬────────┘                                       │
│            │                                                │
│            ▼                                                │
│   ┌─────────────────┐                                       │
│   │  % = raw×100    │                                       │
│   │     ───────     │  → Percentage calculation             │
│   │      4095       │                                       │
│   └────────┬────────┘                                       │
│            │                                                │
│            ▼                                                │
│   ┌─────────────────┐                                       │
│   │  Bar Display    │  → Shows 0-100% progress              │
│   └────────┬────────┘                                       │
│            │                                                │
│            ▼                                                │
│   ┌─────────────────┐                                       │
│   │  V = raw×3.3V   │                                       │
│   │     ───────     │  → Voltage calculation                │
│   │      4095       │                                       │
│   └────────┬────────┘                                       │
│            │                                                │
│            ▼                                                │
│   ┌─────────────────┐                                       │
│   │  Label Display  │  → Shows "1.650 V"                    │
│   └─────────────────┘                                       │
│                                                             │
└─────────────────────────────────────────────────────────────┘

2.2 Timer Update Flow

┌─────────────────────────────────────────────────────────────┐
│                   TIMER UPDATE FLOW                         │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   Timer Created (100ms interval)                            │
│         │                                                   │
│         ▼                                                   │
│   ┌─────────────────┐                                       │
│   │ Read ADC Value  │  ← Simulated or real ADC              │
│   └────────┬────────┘                                       │
│            │                                                │
│            ▼                                                │
│   ┌─────────────────┐                                       │
│   │ Update Slider   │  → lv_slider_set_value()              │
│   └────────┬────────┘                                       │
│            │                                                │
│            ▼                                                │
│   ┌─────────────────┐                                       │
│   │ Trigger Event   │  → lv_obj_send_event()                │
│   └────────┬────────┘                                       │
│            │                                                │
│            ▼                                                │
│   ┌─────────────────┐                                       │
│   │ Callback runs   │  → Updates Bar and Labels             │
│   └─────────────────┘                                       │
│                                                             │
│   ◄──── Repeat every 100ms ────►                            │
│                                                             │
└─────────────────────────────────────────────────────────────┘

---

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

3.1 Slider Functions

Function	Description
lv_slider_create(parent)	สร้าง slider widget
lv_slider_set_range(slider, min, max)	กำหนด range
lv_slider_set_value(slider, val, anim)	ตั้งค่า
lv_slider_get_value(slider)	อ่านค่า

3.2 Bar Functions

Function	Description
lv_bar_create(parent)	สร้าง bar widget
lv_bar_set_range(bar, min, max)	กำหนด range
lv_bar_set_value(bar, val, anim)	ตั้งค่า

3.3 ADC Formulas

/* ADC Constants */
#define ADC_MAX      4095    /* 12-bit resolution */
#define ADC_VREF_MV  3300    /* 3.3V reference */

/* Percentage calculation */
int32_t pct = (adc_value * 100) / ADC_MAX;

/* Voltage calculation */
float voltage = ((float)adc_value / ADC_MAX) * (ADC_VREF_MV / 1000.0f);

---

4. Code Example

4.1 Global Variables

static lv_obj_t * adc_slider;
static lv_obj_t * pct_bar;
static lv_obj_t * raw_label;
static lv_obj_t * volt_label;
static lv_timer_t * update_timer;

#define ADC_MAX      4095
#define ADC_VREF_MV  3300

4.2 Slider Callback

static void slider_event_cb(lv_event_t * e)
{
    lv_obj_t * slider = lv_event_get_target(e);
    int32_t value = lv_slider_get_value(slider);

    /* Calculate percentage */
    int32_t pct = (value * 100) / ADC_MAX;

    /* Update bar */
    lv_bar_set_value(pct_bar, pct, LV_ANIM_ON);

    /* Update raw label */
    lv_label_set_text_fmt(raw_label, "Raw: %d", (int)value);

    /* Calculate and update voltage */
    float voltage = ((float)value / ADC_MAX) * (ADC_VREF_MV / 1000.0f);
    lv_label_set_text_fmt(volt_label, "Voltage: %.3f V", (double)voltage);
}

4.3 Timer Callback

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

    /* Read ADC (simulated or real) */
    uint16_t adc_value = simulate_adc_read();  /* หรือ read จาก hardware */

    /* Update slider */
    lv_slider_set_value(adc_slider, adc_value, LV_ANIM_ON);

    /* Trigger callback */
    lv_obj_send_event(adc_slider, LV_EVENT_VALUE_CHANGED, NULL);
}

4.4 Main Function

void lab1_slider_bar(void)
{
    /* Title */
    lv_obj_t * title = lv_label_create(lv_screen_active());
    lv_label_set_text(title, "Lab 1: ADC Visualization");
    lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 10);

    /* Slider (ADC raw value) */
    adc_slider = lv_slider_create(lv_screen_active());
    lv_obj_set_width(adc_slider, 300);
    lv_obj_align(adc_slider, LV_ALIGN_TOP_MID, 0, 60);
    lv_slider_set_range(adc_slider, 0, ADC_MAX);
    lv_slider_set_value(adc_slider, 2048, LV_ANIM_OFF);
    lv_obj_add_event_cb(adc_slider, slider_event_cb,
                        LV_EVENT_VALUE_CHANGED, NULL);

    /* Bar (percentage) */
    pct_bar = lv_bar_create(lv_screen_active());
    lv_obj_set_size(pct_bar, 300, 25);
    lv_obj_align(pct_bar, LV_ALIGN_CENTER, 0, 0);
    lv_bar_set_range(pct_bar, 0, 100);

    /* Labels */
    raw_label = lv_label_create(lv_screen_active());
    lv_label_set_text(raw_label, "Raw: 2048");
    lv_obj_align(raw_label, LV_ALIGN_CENTER, -80, 60);

    volt_label = lv_label_create(lv_screen_active());
    lv_label_set_text(volt_label, "Voltage: 1.650 V");
    lv_obj_set_style_text_font(volt_label, &lv_font_montserrat_24, 0);
    lv_obj_align(volt_label, LV_ALIGN_CENTER, 0, 100);

    /* Timer for auto-update */
    update_timer = lv_timer_create(timer_cb, 100, NULL);
}

---

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

5.1 Slider vs Bar

Feature	Slider	Bar
User Input	Yes	No (read-only)
Knob	Yes	No
Use Case	Input value	Display progress
Resources	Higher	Lower

5.2 Animation Options

/* LV_ANIM_ON - Smooth transition */
lv_slider_set_value(slider, value, LV_ANIM_ON);

/* LV_ANIM_OFF - Instant change */
lv_slider_set_value(slider, value, LV_ANIM_OFF);

5.3 Read-Only Slider

/* ทำให้ slider เป็น read-only */
lv_obj_add_state(slider, LV_STATE_DISABLED);

---

6. แบบฝึกหัด

Exercise 1: Dual Bar Display

แสดง Bar 2 อัน: Raw value และ Percentage

Exercise 2: Color Threshold

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

• Green: 0-30%

• Yellow: 31-70%

• Red: 71-100%

---

7. References

• LVGL Slider

• LVGL Bar

• lv_example_slider_1.c

---

Next Lab: Lab 2: Arc Gauge