ADC Display

Lab 8: Hardware ADC Display

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

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

ADC (Analog-to-Digital Converter) เป็นสะพานเชื่อมระหว่างโลก Analog กับ Digital:

• Sensor Reading: พื้นฐานสำหรับอ่านค่า Sensor ทุกชนิด (อุณหภูมิ, แรงดัน, แสง)

• Real-time Visualization: แสดงค่าที่เปลี่ยนแปลงอย่างต่อเนื่องบน LVGL

• Data Conversion: แปลง Raw ADC -> Percentage -> Voltage

• Industrial Monitoring: พื้นฐาน SCADA, Process Monitoring, Quality Control

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

1. Sensor Init: ต้องเรียก aic_sensors_init() ก่อนอ่านค่า ADC

2. ADC Read: aic_adc_read() คืนค่า 0-4095 (12-bit)

3. Value Mapping: แปลง Raw -> Percentage -> Voltage

4. Read-only Widgets: ใช้ Slider/Bar แสดงค่าโดยไม่ให้ user ปรับ

5. Timer-based Polling: อัพเดทค่า ADC แบบ Real-time ทุก 100ms

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

1. Initialize sensors ด้วย aic_sensors_init()

2. สร้าง LVGL widgets: Bar, Label สำหรับแสดงค่า

3. สร้าง LVGL Timer poll ทุก 100ms

4. ใน timer callback อ่าน ADC แล้วอัพเดท UI

---

2. หลักการทำงาน (Technical Principles)

2.1 ADC Architecture on PSoC Edge E84

+-------------------------------------------------------------+
|              PSoC Edge E84 ADC Architecture                  |
+-------------------------------------------------------------+
|                                                              |
|   Potentiometer (VR1)                                        |
|   +---[===]---+                                              |
|   |           |                                              |
|  3.3V        GND                                             |
|       |                                                      |
|       +---> ADC Input Pin                                    |
|             |                                                |
|             v                                                |
|   +-------------------+                                      |
|   |  12-bit SAR ADC   |                                      |
|   |                   |                                      |
|   |  0V    -> 0       |                                      |
|   |  1.65V -> 2048    |                                      |
|   |  3.3V  -> 4095    |                                      |
|   +-------------------+                                      |
|             |                                                |
|             v                                                |
|   CM55 reads via aic_adc_read()                              |
|                                                              |
+-------------------------------------------------------------+

2.2 ADC Value Conversion

+-------------------------------------------------------------+
|                    ADC VALUE CONVERSION                      |
+-------------------------------------------------------------+
|                                                              |
|   12-bit ADC Resolution:                                     |
|   +-- Raw Range: 0 to 4095 (2^12 - 1)                        |
|   +-- Voltage Ref: 3.3V                                      |
|                                                              |
|   Conversion Formulas:                                       |
|   =====================                                      |
|                                                              |
|   percent = (raw * 100) / 4095                               |
|   voltage = (raw * 3.3f) / 4095.0f                           |
|                                                              |
|   Examples:                                                  |
|   +--------------------+---------+---------+                 |
|   | Pot Position       | Raw     | Voltage |                 |
|   +--------------------+---------+---------+                 |
|   | Full CCW (min)     | 0       | 0.00V   |                 |
|   | 25%                | 1024    | 0.82V   |                 |
|   | 50% (middle)       | 2048    | 1.65V   |                 |
|   | 75%                | 3072    | 2.47V   |                 |
|   | Full CW (max)      | 4095    | 3.30V   |                 |
|   +--------------------+---------+---------+                 |
|                                                              |
+-------------------------------------------------------------+

2.3 Polling Architecture

+-------------------------------------------------------------+
|                  ADC POLLING PATTERN                        |
+-------------------------------------------------------------+
|                                                             |
|   LVGL Timer (100ms interval)                               |
|   +--------------------------------------------------+      |
|   |  adc_poll_cb()                                   |      |
|   |  {                                               |      |
|   |    // [1] Read hardware                          |      |
|   |    uint16_t raw = aic_adc_read();                |      |
|   |                                                  |      |
|   |    // [2] Convert values                         |      |
|   |    int percent = raw * 100 / 4095;               |      |
|   |    float voltage = raw * 3.3f / 4095.0f;         |      |
|   |                                                  |      |
|   |    // [3] Update LVGL widgets                    |      |
|   |    lv_bar_set_value(bar, percent, ANIM_ON);      |      |
|   |    lv_label_set_text_fmt(lbl, "%d%%", percent);  |      |
|   |    lv_label_set_text_fmt(volt, "%.2fV", voltage);|      |
|   |  }                                               |      |
|   +--------------------------------------------------+      |
|                                                             |
|   Why 100ms interval (not 50ms)?                            |
|   +-- ADC value changes slowly (user turns pot)             |
|   +-- 100ms = smooth update, less CPU usage                 |
|   +-- 10 updates/second = enough for human eye              |
|                                                             |
+-------------------------------------------------------------+

2.4 UI Layout

+-------------------------------------------------------------+
|           Part 1 Ex8: HW ADC Display                        |
+-------------------------------------------------------------+
|                                                             |
|   Raw: 2048          Voltage: 1.65V                         |
|                                                             |
|   +================================================+        |
|   |                 [BAR: 50%]                     |        |
|   +================================================+        |
|                                                             |
|                       50%                                   |
|                                                             |
|   [Part II - HW] Turn the potentiometer on the board        |
+-------------------------------------------------------------+

---

3. ฟังก์ชันสำคัญ (API Reference)

3.1 Sensor/ADC Hardware API (aic-eec.h)

Function	Returns	Description
aic_sensors_init()	void	Initialize sensor subsystem (ต้องเรียกก่อน)
aic_adc_read()	uint16_t	อ่านค่า Raw ADC (0-4095)

3.2 Value Conversion (ทำเองในโค้ด)

/* Raw -> Percentage (0-100) */
int percent = (int)((uint32_t)raw * 100 / 4095);

/* Raw -> Voltage (0.00 - 3.30V) */
float voltage = (float)raw * 3.3f / 4095.0f;

3.3 LVGL Functions ที่ใช้ในบทนี้

Function	Description
lv_bar_create(parent)	สร้าง Bar widget
lv_bar_set_range(bar, min, max)	กำหนดช่วงค่า Bar
lv_bar_set_value(bar, value, anim)	ตั้งค่า Bar
lv_slider_create(parent)	สร้าง Slider widget
lv_slider_set_range(slider, min, max)	กำหนดช่วงค่า Slider
lv_slider_set_value(slider, value, anim)	ตั้งค่า Slider
lv_obj_remove_flag(obj, LV_OBJ_FLAG_CLICKABLE)	ทำให้ Slider เป็น read-only
lv_label_set_text_fmt(lbl, fmt, ...)	แสดงข้อความแบบ format
lv_timer_create(cb, period, data)	สร้าง periodic timer

3.4 ทำ Slider เป็น Read-only

/* สร้าง slider ที่ user drag ไม่ได้ (แสดงค่าอย่างเดียว) */
lv_obj_t * slider = lv_slider_create(parent);
lv_obj_remove_flag(slider, LV_OBJ_FLAG_CLICKABLE);  /* <-- key! */

---

4. โค้ดตัวอย่าง (Code Examples)

4.1 Minimal Example: ADC to Label

#include "aic-eec.h"

static lv_obj_t * value_label;

/* Timer callback: read ADC every 100ms */
static void adc_poll_cb(lv_timer_t * t)
{
    uint16_t raw = aic_adc_read();
    int percent = (int)((uint32_t)raw * 100 / 4095);

    lv_label_set_text_fmt(value_label, "ADC: %d (%d%%)",
                          (int)raw, percent);
}

void minimal_adc_read(void)
{
    aic_sensors_init();   /* MUST call before aic_adc_read()! */

    value_label = lv_label_create(lv_screen_active());
    lv_label_set_text(value_label, "ADC: ---");
    lv_obj_center(value_label);

    lv_timer_create(adc_poll_cb, 100, NULL);
}

4.2 Full Example: ADC with Bar + Voltage Display

#include "aic-eec.h"

/* ===== Global Variables ===== */
static lv_obj_t * raw_label;
static lv_obj_t * percent_label;
static lv_obj_t * voltage_label;
static lv_obj_t * adc_bar;
static lv_obj_t * adc_slider;

/* ===== Timer Callback: Poll ADC ===== */
static void adc_poll_cb(lv_timer_t * t)
{
    /* [1] Read Hardware */
    uint16_t raw = aic_adc_read();

    /* [2] Convert */
    int percent = (int)((uint32_t)raw * 100 / 4095);
    float voltage = (float)raw * 3.3f / 4095.0f;

    /* [3] Update Labels */
    lv_label_set_text_fmt(raw_label, "Raw: %d / 4095", (int)raw);
    lv_label_set_text_fmt(percent_label, "%d%%", percent);
    lv_label_set_text_fmt(voltage_label, "Voltage: %.2fV", voltage);

    /* [4] Update Bar */
    lv_bar_set_value(adc_bar, percent, LV_ANIM_ON);

    /* [5] Update read-only Slider */
    lv_slider_set_value(adc_slider, percent, LV_ANIM_ON);
}

/* ===== Main Function ===== */
void part1_ex8_hw_adc_display(void)
{
    /* ============================== */
    /*    HARDWARE INITIALIZATION     */
    /* ============================== */
    aic_sensors_init();   /* CRITICAL: must call before adc_read! */

    /* ============================== */
    /*         LVGL UI SETUP          */
    /* ============================== */
    lv_obj_t * scr = lv_screen_active();
    lv_obj_set_style_bg_color(scr, lv_color_hex(0x1a1a2e), 0);

    /* --- Title --- */
    lv_obj_t * title = lv_label_create(scr);
    lv_label_set_text(title, "Lab 8: HW ADC Display");
    lv_obj_set_style_text_color(title, lv_color_hex(0xFFFFFF), 0);
    lv_obj_set_style_text_font(title, &lv_font_montserrat_18, 0);
    lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 10);

    /* --- Container --- */
    lv_obj_t * cont = lv_obj_create(scr);
    lv_obj_set_size(cont, 440, 200);
    lv_obj_align(cont, LV_ALIGN_CENTER, 0, 10);
    lv_obj_set_style_bg_color(cont, lv_color_hex(0x16213e), 0);
    lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_COLUMN);
    lv_obj_set_flex_align(cont, LV_FLEX_ALIGN_CENTER,
                          LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
    lv_obj_set_style_pad_row(cont, 8, 0);
    lv_obj_set_style_pad_all(cont, 15, 0);

    /* --- Row: Raw + Voltage --- */
    lv_obj_t * row_top = lv_obj_create(cont);
    lv_obj_set_size(row_top, LV_PCT(100), 30);
    lv_obj_set_flex_flow(row_top, LV_FLEX_FLOW_ROW);
    lv_obj_set_flex_align(row_top, LV_FLEX_ALIGN_SPACE_BETWEEN,
                          LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
    lv_obj_set_style_bg_opa(row_top, LV_OPA_TRANSP, 0);
    lv_obj_set_style_border_width(row_top, 0, 0);
    lv_obj_set_style_pad_all(row_top, 0, 0);
    lv_obj_remove_flag(row_top, LV_OBJ_FLAG_SCROLLABLE);

    raw_label = lv_label_create(row_top);
    lv_label_set_text(raw_label, "Raw: --- / 4095");
    lv_obj_set_style_text_color(raw_label, lv_color_hex(0xCCCCCC), 0);

    voltage_label = lv_label_create(row_top);
    lv_label_set_text(voltage_label, "Voltage: --.--V");
    lv_obj_set_style_text_color(voltage_label, lv_color_hex(0x00FF88), 0);

    /* --- Bar Widget --- */
    adc_bar = lv_bar_create(cont);
    lv_obj_set_size(adc_bar, LV_PCT(90), 25);
    lv_bar_set_range(adc_bar, 0, 100);
    lv_bar_set_value(adc_bar, 0, LV_ANIM_OFF);
    lv_obj_set_style_bg_color(adc_bar, lv_color_hex(0x333333), 0);
    lv_obj_set_style_bg_color(adc_bar, lv_palette_main(LV_PALETTE_BLUE),
                              LV_PART_INDICATOR);

    /* --- Percent Label (large) --- */
    percent_label = lv_label_create(cont);
    lv_label_set_text(percent_label, "0%");
    lv_obj_set_style_text_color(percent_label, lv_color_hex(0x00BFFF), 0);
    lv_obj_set_style_text_font(percent_label, &lv_font_montserrat_24, 0);

    /* --- Read-only Slider --- */
    adc_slider = lv_slider_create(cont);
    lv_obj_set_size(adc_slider, LV_PCT(90), 15);
    lv_slider_set_range(adc_slider, 0, 100);
    lv_slider_set_value(adc_slider, 0, LV_ANIM_OFF);
    lv_obj_remove_flag(adc_slider, LV_OBJ_FLAG_CLICKABLE);  /* Read-only! */
    lv_obj_set_style_bg_color(adc_slider, lv_color_hex(0x333333), 0);
    lv_obj_set_style_bg_color(adc_slider,
        lv_palette_main(LV_PALETTE_CYAN), LV_PART_INDICATOR);

    /* --- Footer --- */
    lv_obj_t * footer = lv_label_create(scr);
    lv_label_set_text(footer,
        "[Part II - HW] Turn the potentiometer on the board");
    lv_obj_set_style_text_color(footer, lv_color_hex(0x888888), 0);
    lv_obj_align(footer, LV_ALIGN_BOTTOM_MID, 0, -10);

    /* ============================== */
    /*    START POLLING TIMER         */
    /* ============================== */
    lv_timer_create(adc_poll_cb, 100, NULL);  /* 100ms = 10 Hz */
}

4.3 อธิบายโค้ดทีละขั้นตอน

ขั้นตอน	โค้ด	คำอธิบาย
1	aic_sensors_init()	Initialize sensor subsystem (ห้ามลืม!)
2	lv_bar_create() + lv_slider_create()	สร้าง widgets แสดงค่า
3	lv_obj_remove_flag(slider, LV_OBJ_FLAG_CLICKABLE)	ทำ Slider เป็น read-only
4	lv_timer_create(adc_poll_cb, 100, NULL)	Poll ADC ทุก 100ms
5	aic_adc_read()	อ่านค่า Raw 0-4095
6	raw * 100 / 4095	แปลงเป็น Percentage
7	raw * 3.3f / 4095.0f	แปลงเป็น Voltage
8	lv_bar_set_value() + lv_label_set_text_fmt()	อัพเดท UI

---

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

5.1 Pattern: ADC Polling with Smoothing

/* Moving Average Filter สำหรับลดค่า noise */
#define FILTER_SIZE  8
static uint16_t filter_buf[FILTER_SIZE];
static int filter_idx = 0;
static bool filter_full = false;

static uint16_t adc_read_filtered(void)
{
    filter_buf[filter_idx] = aic_adc_read();
    filter_idx = (filter_idx + 1) % FILTER_SIZE;
    if (filter_idx == 0) filter_full = true;

    int count = filter_full ? FILTER_SIZE : filter_idx;
    uint32_t sum = 0;
    for (int i = 0; i < count; i++) {
        sum += filter_buf[i];
    }
    return (uint16_t)(sum / count);
}

5.2 Pattern: Read-only Widget

/* วิธีที่ 1: ใช้ Slider เป็น read-only gauge */
lv_obj_t * gauge = lv_slider_create(parent);
lv_obj_remove_flag(gauge, LV_OBJ_FLAG_CLICKABLE);

/* วิธีที่ 2: ใช้ Bar (อ่านอย่างเดียวโดยธรรมชาติ) */
lv_obj_t * bar = lv_bar_create(parent);
lv_bar_set_value(bar, percent, LV_ANIM_ON);

5.3 Pattern: Value Conversion

/* Integer division (ไม่มี float, เหมาะสำหรับ embedded) */
int percent = (int)((uint32_t)raw * 100 / 4095);

/* Float division (สำหรับแสดง voltage ทศนิยม) */
float voltage = (float)raw * 3.3f / 4095.0f;

/* Map to custom range (e.g., temperature 0-150 degrees) */
int temp = (int)((uint32_t)raw * 150 / 4095);

5.4 สิ่งที่ต้องระวัง

หัวข้อ	รายละเอียด
aic_sensors_init()	ต้องเรียกก่อน aic_adc_read() เสมอ ไม่งั้น return 0
Integer Overflow	raw * 100 อาจ overflow ถ้า raw เป็น uint16_t; ใช้ (uint32_t)raw * 100
Float Format	ใช้ %.2f สำหรับ 2 ทศนิยม; ใช้ %.1f สำหรับ 1 ทศนิยม
ADC Noise	ค่า ADC อาจกระเพื่อมเล็กน้อย; ใช้ Moving Average Filter
Timer Period	100ms เหมาะสำหรับ ADC; เร็วกว่านี้ไม่จำเป็นเพราะ pot หมุนช้า
Animation	ใช้ LV_ANIM_ON ให้ Bar เคลื่อนไหวนุ่มนวล

5.5 Application ในอุตสาหกรรม

• Process Monitoring: อ่านค่า Pressure Sensor แสดง Bar graph

• Quality Control: วัดค่า Dimension sensor แสดง Pass/Fail

• HVAC System: อ่าน Temperature sensor แสดง Gauge

• Water Treatment: วัดค่า pH, Turbidity แสดง Dashboard

---

6. แบบฝึกหัด (Exercises)

แบบฝึกหัดที่ 1: Precision Voltage Display

โจทย์: สร้างหน้าจอ Voltmeter ที่แสดงค่าแรงดันจาก Potentiometer

ข้อกำหนด:

• แสดงค่า Voltage เป็นตัวเลขใหญ่ (font 24) แบบ 2 ทศนิยม: "1.65 V"

• แสดง Raw ADC value: "Raw: 2048 / 4095"

• แสดง Bar graph แบบเปลี่ยนสี:

  • 0.0V - 1.0V: สีเขียว (Safe)

  • 1.0V - 2.5V: สีเหลือง (Warning)

  • 2.5V - 3.3V: สีแดง (Danger)

• แสดง Min/Max ที่เคยอ่านได้ (เช่น "Min: 0.12V Max: 3.28V")

• มีปุ่ม "Reset Min/Max" สำหรับ clear ค่า

Hints:

• ใช้ static float min_v = 3.3f, max_v = 0.0f; เก็บ min/max

• เปลี่ยนสี Bar: lv_obj_set_style_bg_color(bar, color, LV_PART_INDICATOR)

• เปรียบเทียบ voltage กับ threshold ใน timer callback

แบบฝึกหัดที่ 2: ADC Threshold Alarm System

โจทย์: สร้างระบบ Alarm ที่ trigger เมื่อค่า ADC เกิน threshold

ข้อกำหนด:

• มี Slider สำหรับตั้ง Threshold (0-100%)

• แสดง Bar graph ค่า ADC ปัจจุบัน

• เมื่อ ADC > Threshold:

  • พื้นหลัง Container เปลี่ยนเป็นสีแดง

  • Label แสดง "ALARM!" สีแดงกะพริบ

  • Hardware LED (Red) ติด

• เมื่อ ADC <= Threshold:

  • พื้นหลังกลับปกติ

  • Label แสดง "Normal" สีเขียว

  • Hardware LED (Red) ดับ

• แสดง Threshold value: "Threshold: 75%"

• แสดง Current value: "Current: 80%"

Hints:

• ใช้ aic_gpio_led_set(AIC_LED_RED, true/false) ควบคุม LED

• กะพริบ Label: สลับ lv_obj_add_flag(lbl, LV_OBJ_FLAG_HIDDEN) / remove_flag ใน timer

---

7. References

• aic-eec Sensors API

• LVGL Slider Widget

• LVGL Bar Widget

---