บทเรียน 3.5 — ui.Chart: กราฟหลาย series และคาบเวลาของลูปจริง

chart = ui.Chart(x=24, y=52, w=292, h=144, min=-20, max=20, color=COL_AX)
s_ay = chart.add_series(COL_AY)      # คืนค่าเป็น "หมายเลข series"
s_az = chart.add_series(COL_AZ)
...
chart.set_next(0, int(ax))           # เติมจุดใหม่ให้ series 0
chart.set_next(s_ay, int(ay))        # เติมจุดใหม่ให้ series ที่เพิ่งเพิ่ม

ข้อที่หนึ่ง ตอนสร้าง ui.Chart มันสร้าง series 0 ให้อัตโนมัติ โดยใช้สีจาก color= เราจึงไม่ต้องเรียก add_series สำหรับเส้นแรก (COL_AX COL_AY COL_AZ คือ 0x4A9EFF 0x8E7BFF 0x2FB6A8 จากจานสีเส้นข้อมูล — บรรทัดจริงจาก s07_accel_chart.py)

ข้อที่สอง .add_series(color) คืนค่าเป็นตัวเลข ให้เก็บใส่ตัวแปรไว้เสมอ ถ้าไม่เก็บ ก็ไม่มีทางเติมข้อมูลให้เส้นนั้นได้อีกเลย ค่าที่คืนมาคือ 1 แล้ว 2 แล้ว 3 ตามลำดับที่เรียก เพราะ 0 ถูกจองไปแล้วตั้งแต่ตอนสร้าง เรียกครั้งที่สี่จะได้ RuntimeError: ui: add_series failed (max 4)

ข้อที่สาม min= กับ max= คือช่วงแกน Y ตั้งครั้งเดียวตอนสร้าง ไม่มี autoscale

ข้อที่สี่ set_next() เป็นคำสั่งแบบยิงแล้วลืม ส่ง idx ที่ไม่มีอยู่จริง เช่น set_next(3, ...) ทั้งที่มีแค่สามเส้น จะไม่มี error อะไรทั้งสิ้น ข้อมูลนั้นหายไปเฉย ๆ — ต่างจากค่าที่เป็นทศนิยม ซึ่งได้ TypeError ตั้งแต่ฝั่ง Python

ui.Chart ไม่มี autoscale ค่าที่เกินช่วงจะถูกกดให้ติดขอบ ดูเผิน ๆ เหมือนสัญญาณอิ่มตัว ทั้งที่จริงคือเราตั้งกรอบไว้แคบไป

ความเร่งบนบอร์ดนี้: วางนิ่ง Z ราว 9.8 m/s² · X, Y ราว 0 · เขย่าแรงพุ่ง 15-20 · กระแทกโต๊ะทะลุ 30

สีคือภาษาที่คนอ่านกราฟใช้ร่วมกัน — สามเส้นนี้หยิบจาก "จานสีเส้นข้อมูล" ของหลักสูตร ไม่ใช่ แดง/เขียว/น้ำเงิน ตามธรรมเนียมเดิม

ทำไมไม่ใช้ แดง/เขียว/น้ำเงิน — จานสีชุดนี้ไม่มีสีสถานะปนอยู่เลยสักตัว โดยตั้งใจ หน้าจอนี้มีไฟเตือนอยู่ด้วย และ เกณฑ์หน้าจอของหลักสูตร ห้ามใช้สีของการแจ้งเตือนกับอย่างอื่นในหน้าจอเดียวกัน เส้น X สีแดงที่แปลว่า "แกน X" เฉย ๆ จะแย่งความหมายของแดงที่แปลว่า "ต้องรีบดู" ไปจนหมด

หน้า Sensor Dashboard ของเฟิร์มแวร์ ที่เห็นในสไลด์แรกยังใช้ แดง/เขียว/น้ำเงิน อยู่ ของเราจึงไม่เหมือนของมัน — ตั้งใจให้ไม่เหมือน นี่คือตัวอย่างจริงของหน้าจอที่เขียนก่อนจะมีกฎข้อนี้

เวลาเห็นอะไรน่าสนใจวิ่งผ่านกราฟ เราอยากหยุดดู แต่ ห้ามหยุดลูป เด็ดขาด

เพราะถ้าลูปหยุด ui.poll() ก็หยุดตาม กฎเหล็กข้อแรกเล่นงานทันที — จอซ่อน widget ภายในราวสองวินาที ปุ่มเริ่มบันทึกที่จะกดก็หายไปด้วย กลายเป็นหยุดถาวรที่กู้ไม่ได้

running = True
while True:
    for ev in ui.poll():             # ต้องเรียกทุกลูป ไม่ว่าจะหยุดหรือไม่
        h = ev.get('handle')
        if h == start_id:
            running = True           # ปุ่มเริ่ม มีหน้าที่เดียว
            led_rec.value(1)
        elif h == stop_id:
            running = False          # ปุ่มหยุด มีหน้าที่เดียว
            led_rec.value(0)
    if running:
        chart.set_next(0, int(ax))   # เติมข้อมูลเฉพาะตอนเดิน
    time.sleep_ms(200)               # หน่วงเท่าเดิมเสมอ

เราสั่ง time.sleep_ms(200) แต่ลูปหนึ่งรอบไม่ได้ใช้เวลา 200 ms พอดี เพราะยังมีเวลาอ่านเซนเซอร์ ส่งข้าม IPC และอัปเดตป้ายอีกหลายใบ

$$T_{\text{loop}} = T_{\text{sleep}} + T_{\text{work}} \qquad f_s = \frac{1}{T_{\text{loop}}}$$

ไทย: คาบจริง = เวลาที่หน่วง + เวลาที่ทำงาน · ตัวเลขที่ควรอ่านได้ (วัดบน Eva Kit · Dev Kit อ่าน IMU คนละเส้นทาง ตัวเลขอาจต่าง ให้จดของทีมเอง): 205-215 ms ถ้าพุ่งถึง 300 ms แปลว่างานในลูปหนักกว่าที่คิด และ $f_s$ ตกจาก 5 Hz เหลือ 3.3 Hz โดยที่โค้ดไม่บอกเราสักคำ

now = time.ticks_ms()                  # นาฬิกามิลลิวินาทีของระบบ
dt  = time.ticks_diff(now, last_ms)    # ผลต่างจากรอบที่แล้ว
last_ms = now

ทำไมต้อง ticks_diff แทน now - last_ms — ticks_ms() เป็นตัวนับที่ วนกลับไปเริ่มใหม่ เมื่อชนเพดาน ถ้าลบเองในจังหวะที่มันวนพอดี จะได้ค่าติดลบมหาศาลแบบไม่มีปี่มีขลุ่ย ส่วน ticks_diff รู้เรื่องการวนนี้และคืนค่าที่ถูกต้องเสมอ

บทเรียน 2.4–2.6 เราเจอสี่เมธอดนี้กับกล่องสี่เหลี่ยมใบเดียว วันนี้ขอย้ำอีกครั้ง เพราะ Chart ก็รับคำสั่งชุดเดียวกันนี้ และคนส่วนใหญ่ไม่คิดถึงมันตอนออกแบบหน้าจอที่มีกราฟ

w.pos(x, y)      # ย้ายไปพิกัดใหม่ - สองอาร์กิวเมนต์ ขาดไม่ได้
w.size(cw, ch)   # เปลี่ยนขนาด - สองอาร์กิวเมนต์เหมือนกัน
w.hide()         # ยังอยู่ แต่ไม่วาด
w.show()         # กลับมาวาด

ทั้งสี่ตัวใช้ได้กับ widget ทุกชนิด ไม่เว้นแม้แต่ Chart, Panel หรือ Compass เพราะมันอยู่ในตารางเมธอดชุดเดียวกันหมด

สามข้อที่ต้องรู้ก่อนใช้

1. รับจำนวนเต็มเท่านั้น และต้องครบสองตัว — w.pos(10) ได้ TypeError เรื่องจำนวนอาร์กิวเมนต์ ส่วน w.pos(10.5, 20) ได้ TypeError: can't convert float to int เหมือน set_next()
2. ไม่มีตัวอ่านกลับ — ไม่มี .x() ไม่มี .y() ไม่มีอะไรถามตำแหน่งปัจจุบันได้เลย ย้ายไปไหนแล้ว เราต้องจำเอง ในตัวแปรฝั่ง Python
3. .hide() ไม่ใช่ .delete() — ของที่ซ่อนยัง กินช่องในตาราง 64 ตัวอยู่เต็ม ๆ ส่วน .delete() คืนช่องให้ แต่ตัวแปร Python ยังชี้ไปที่ handle เดิมที่ตายแล้ว สั่งอะไรต่อก็เงียบ

กราฟเวลาที่เราทำวันนี้ตอบได้ว่า "ค่าเปลี่ยนไปยังไงตามเวลา" แต่ตอบไม่ได้ว่า "การสั่นนี้ประกอบด้วยความถี่อะไรบ้าง"

ภาพขวาคือข้อมูลจริงจากงานเฝ้าระวังตลับลูกปืน แถวบนเป็นโดเมนเวลา แถวล่างเป็นสเปกตรัมของข้อมูล ชุดเดียวกันเป๊ะ — กราฟเวลาของตัวปกติกับตัวเสียดูคล้ายกันมาก แต่สเปกตรัมแยกออกทันที

นี่คือสาเหตุที่งาน predictive maintenance ในโรงงานทำ FFT ก่อนตัดสินใจ ไม่ได้ดูกราฟเวลาอย่างเดียว สเปกตรัมคือที่ที่ความต่างซ่อนอยู่ ทั้งที่กราฟเวลาบอกไม่ได้

เชื่อมกับวันนี้: ที่ $f_s = 5$ Hz เราทำ FFT ที่มีประโยชน์ไม่ได้ เพราะเห็นได้แค่ถึง 2.5 Hz ส่วนความสั่นของเครื่องจักรจริงอยู่หลักกิโลเฮิรตซ์ — อัตราแบบนั้นลูป Python เอื้อมไม่ถึง ต้องให้ เฟิร์มแวร์เป็นคนสุ่มตัวอย่าง แล้วส่งค่าที่ยุบแล้วขึ้นมาให้ เหมือนที่โมดูล mic ทำในบทเรียน 3.7–3.9

โมดูล dsp มี FFT ในตัวแล้ว: dsp.fft_mag(ชุด, n=256) คืนสเปกตรัม n/2 ช่อง จบใน C ราวหนึ่งมิลลิวินาที (เพิ่ม 2026-08-20 — firmware รุ่นก่อนหน้ายังไม่มี · ulab ยังไม่มีเช่นเดิม) — ข้างในของมันคือ radix-2 ที่สไลด์อ่านเสริมท้ายเด็คแกะให้ดูทั้งตัว

ก่อนต่อเซนเซอร์จริง ลองป้อนสัญญาณที่เรารู้คำตอบล่วงหน้าเข้ากราฟดูก่อน วิธีนี้แยกได้ชัดว่า ถ้ากราฟเพี้ยน มันเพี้ยนที่กราฟหรือเพี้ยนที่เซนเซอร์

import ui, time, math
ui.screen()
ch = ui.Chart(x=40, y=60, w=700, h=250, min=-100, max=100, color=0x4A9EFF)
lbl = ui.Label("i = 0", x=40, y=330)          # ปลุกโหมดเร่งทุกรอบ

for i in range(200):
    val = int(90 * math.sin(i * 0.15))               # ไซน์
    # val = 80 if (i // 8) % 2 == 0 else -80         # สี่เหลี่ยม
    # val = (i % 20) * 9 - 90                        # ฟันเลื่อย
    ch.set_next(0, val)
    lbl.text("i = {}".format(i))
    ui.poll()
    time.sleep_ms(100)

ลองสลับบรรทัดที่คอมเมนต์ไว้ทีละแบบ แล้วดูว่ารูปคลื่นบนจอตรงกับที่คิดไหม จากนั้นเปลี่ยน 0.15 เป็น 0.6 — ไซน์จะเริ่มดูไม่เหมือนไซน์ เพราะเราสุ่มไม่ทันมันแล้ว นั่นคือ aliasing ในสิบบรรทัด

สังเกตบรรทัด lbl.text(...) ที่เพิ่มเข้ามา — นั่นคือกฎจากสไลด์ก่อนหน้า ลองลบมันออกแล้วรันใหม่ กราฟจะเดินช้าลงอย่างเห็นได้ชัดทั้งที่ sleep_ms เท่าเดิม

# --- ท่าที่ 1: เตรียมเซนเซอร์และหน้าจอให้พร้อม ---
# ไม่มี sensors.init() ทั้งสองบอร์ด (Eva: ได้ OSError / Dev Kit: ไม่จำเป็น)
try:
    sensors.bmi270.motion()          # อ่านทิ้งหนึ่งครั้ง ให้การรอไปเกิดตรงนี้
except OSError:
    print("อ่านเซนเซอร์รอบแรกยังไม่ได้ - ลองใหม่ในลูป")

ui.clear()
time.sleep_ms(200)

# --- ท่าที่ 2: กราฟหนึ่งใบ สามเส้น และตารางสรุปข้าง ๆ ---
chart = ui.Chart(x=24, y=52, w=292, h=144, min=-20, max=20, color=COL_AX)
s_ay = chart.add_series(COL_AY)
s_az = chart.add_series(COL_AZ)
tbl = ui.Table(x=332, y=52, w=436, h=280, cols=4, value=16)
tbl.col_width(0, 100)          # กว้างพอสำหรับข้อความที่ยาวที่สุด
tbl.col_width(1, 108)
tbl.col_width(2, 108)
tbl.col_width(3, 108)
tbl.add_row("แกน", "ต่ำสุด", "สูงสุด", "ล่าสุด")
tbl.add_row("X", "-", "-", "-")
tbl.add_row("Y", "-", "-", "-")
tbl.add_row("Z", "-", "-", "-")

# --- ท่าที่ 3: ไฟบอกสถานะ และปุ่มเริ่มกับปุ่มหยุดที่แยกกัน ---
led_rec = ui.Led(x=24, y=212, w=48, h=48, color=COL_RUN, value=1)
lbl_rec = ui.Label("กำลังบันทึก", x=88, y=216, color=COL_TEXT, value=20)
rec_msg = "กำลังบันทึก"       # ข้อความสถานะล่าสุด เปลี่ยนเฉพาะตอนกดปุ่ม
lbl_dt = ui.Label("คาบลูป -- ms", x=88, y=252, color=COL_DIM, value=20)
btn_start = ui.Button("เริ่มบันทึก", x=24, y=296, w=128, h=88,
                      color=0x30A46C, value=20)
btn_stop = ui.Button("หยุดบันทึก", x=184, y=296, w=128, h=88,
                     color=0x3A4150, value=20)
start_id = btn_start.id()
stop_id = btn_stop.id()
ui.poll()
running = True                # ตัวแปรที่ต้องจำสถานะข้ามรอบ ต้องเกิดนอกลูป

# --- ท่าที่ 4: อ่านหกแกนจาก snapshot ชุดเดียว แล้วป้อนสามเส้น ---
if running:
    try:
        ax, ay, az, gx, gy, gz = sensors.bmi270.motion()
    except OSError:
        pass                  # อ่านพลาดหนึ่งรอบ ใช้ค่าเดิมไปก่อน
    chart.set_next(0, int(ax))
    chart.set_next(s_ay, int(ay))
    chart.set_next(s_az, int(az))
    note(0, ax)               # จำต่ำสุด-สูงสุดไว้ให้ตาราง
    note(1, ay)
    note(2, az)

motion() คืนหกค่าในการอ่านครั้งเดียว เราใช้แค่สามค่าแรก แต่ยังต้องรับให้ครบหกตัวแปร ไม่งั้น Python จะฟ้อง ValueError · ห่อ try ไว้เพราะอ่านพลาดหนึ่งรอบไม่ควรทำให้กราฟดับทั้งหน้า

# --- ท่าที่ 5: วัดคาบลูปจริงแล้วรายงาน ---
now = time.ticks_ms()
dt = time.ticks_diff(now, last_ms)
last_ms = now

sec = time.ticks_ms() // 1000        # ตัวเลขเปลี่ยนวินาทีละครั้ง
if sec != last_sec:
    last_sec = sec
    for i, v in enumerate((ax, ay, az)):
        tbl.cell(i + 1, 1, cell(lo[i]))    # แถว 0 คือหัวตาราง
        tbl.cell(i + 1, 2, cell(hi[i]))
        tbl.cell(i + 1, 3, "{:+.2f}".format(v))
    lbl_dt.text("คาบลูป {} ms".format(dt))

time.sleep_ms(PERIOD_MS)

สามบรรทัดแรกคือแพตเทิร์นมาตรฐานของการวัดคาบ: จับเวลาตอนนี้ ลบด้วยเวลารอบที่แล้ว แล้วจำเวลาตอนนี้ไว้ใช้รอบหน้า

ค่า dt รอบแรกจะแปลก ๆ เพราะยังไม่มีรอบก่อนหน้าให้เทียบ เราจึงตั้งค่าตั้งต้นให้มันไว้ก่อนเข้าลูป