Bài 06 · Đọc mọi kiểu giá trị
Bốn ô số liệu, bốn hình dạng giá trị, một node, một ảnh chụp màn hình.
Bài toán
Dashboard hiển thị Gold 12480, Energy 85%, Troops 3/5, Next Cycle 04:20. Một quy trình thật thường cần vài giá trị này cùng lúc — mà bốn node Read Text riêng lẻ sẽ chụp bốn ảnh của cùng một màn hình, chậm chạp, và giá trị có thể đổi giữa các lần chụp.
Chế độ đa vùng (multi-region) đọc nhiều hình chữ nhật từ một khung hình đã chụp.
Bạn sẽ học được
- Read Text đa vùng: nhiều vùng, một node, một ảnh chụp.
- Hai kiểu có cấu trúc — Counter (x/y) và Time (mm:ss) — cùng các biến phẳng chúng sinh ra.
- So sánh hai biến trong một biểu thức.
Trước khi bắt đầu
- Hoàn thành Bài 05. Cổng OCR đang bật.
Flow
Badge đánh số node theo thứ tự đọc, khớp phần Dựng flow. Bốn ô số liệu, bốn kiểu nội dung, một flow — kiểu giá trị là một thiết lập của từng node, không phải một loại node khác.
Dựng flow
- Flow mới; khai báo sáu biến nullable:
gold(number?),energy(number?),troops_current,troops_max,cycle_hours,cycle_minutes(đều number?). - Thêm Read Text tên
1. Read all four readouts in one nodevà bật Read multiple regions. Thêm bốn vùng:
| Vùng (vẽ trên Live Preview) | What to read | Biến sinh ra |
|---|---|---|
| Ô Gold | Number | gold |
| Ô Energy | Percentage | energy |
| Ô Troops | Counter (x/y) | troops_current, troops_max |
| Ô Next Cycle | Time (mm:ss) | cycle_hours, cycle_minutes |
Đây là node đang được chọn trong trình soạn thảo — Properties panel hiện danh sách vùng cùng kiểu của từng vùng:
- Thêm một If, chế độ Expression:
{{troops_current}} >= {{troops_max}}. - Ba Stop:
all slots busy(success) /slots available(success) /unreadable(failure). - Nối như sơ đồ. Save, Auto Layout.
Vì sao nó vận hành như vậy
Một khung hình, nhiều mảnh cắt. Node chụp một ảnh màn hình và OCR từng hình chữ nhật từ ảnh đó. Rẻ hơn bốn node — và nhất quán: cả bốn giá trị đến từ cùng một khoảnh khắc, nên bộ đếm không bao giờ "mới hơn" cái đồng hồ bên cạnh.
Kiểu có cấu trúc sinh biến phẳng. Counter cho ra troops_current và troops_max, không phải một object lồng nhau — vì tham chiếu {{name}} phân giải tên phẳng ở mọi nơi (biểu thức If, tọa độ Click, dòng log). Quy tắc đặt tên đơn giản là <gốc>_<phần>.
Phép so sánh là hai biến, không phải một biến với một hằng số — {{troops_current}} >= {{troops_max}} vẫn đúng nếu ứng dụng có ngày hiển thị 3/8 thay vì 3/5. Hãy ưu tiên quan hệ thay vì con số cứng khi màn hình cho bạn cả hai vế.
Chạy thử
- Dashboard trơn (
3/5): →success · A troop slot is free. dashboard.html?troops=5/5: →success · All troop slots in use.
Chạy Test Node trên phép đọc trước và nhìn output: sáu biến, mỗi biến đúng kiểu — energy là 85 (một con số, dấu % đã được bóc), cycle_minutes là 20.
Best practices
- Một node đa vùng cho mỗi màn hình, không phải một node cho mỗi giá trị.
- Đặt tên theo nghĩa (
troops_current), không bao giờ theo vị trí (value3). - Kiểu theo từng vùng: mỗi hình chữ nhật nhận đúng kiểu nội dung của nó.
- So sánh quan hệ (
current >= max) thay vì hằng số khi có thể. - Chỉ đặt Default cho vùng khi giá trị dự phòng thật sự an toàn — còn lại hãy để sự trống lộ ra.
Lỗi thường gặp
| Lỗi | Hậu quả | Cách sửa |
|---|---|---|
| Bốn node Read Text riêng | Chậm gấp 4, giá trị từ các khoảnh khắc khác nhau | Một node đa vùng |
Tham chiếu {{troops}} | Không tồn tại — bộ đếm sinh troops_current/troops_max | Dùng tên phẳng |
Kiểu Counter cho ô 85% | Không có dạng x/y để phân tích → trống | Kiểu Percentage |
| Vùng đè lên hai ô số liệu | Đọc lẫn lộn | Mỗi giá trị một hình chữ nhật ôm sát |
Khắc phục sự cố
Một vùng đọc được, vùng khác về trống. Mỗi vùng phân tích độc lập. Test Node hiện OCR thô theo từng vùng — vùng trống có hình chữ nhật bị lệch hoặc kiểu không khớp nội dung.
energy so sánh sai.
Kiểm tra nó là kiểu Percentage: kiểu n ày cho ra số 85. Auto sẽ cho ra chuỗi "85%".
Cả bốn cùng trống một lượt. Đó là lỗi chụp hình, không phải bốn trùng hợp: sai màn hình đang hiện, hoặc cổng OCR tắt.
Tóm tắt
- OCR đa vùng: một ảnh chụp, nhiều giá trị có kiểu, nhất quán được bảo đảm.
- Counter và Time sinh biến phẳng
_current/_max,_hours/_minutes. - Màn hình thường cho cả hai vế của phép so sánh — hãy dùng chúng.
Tiếp theo
Bạn đã đọc được mọi thứ màn hình hiển thị. Bài 07 · Đếm bằng biến khiến flow tự sinh giá trị của riêng nó — bộ đếm, một vòng lặp, và Flow Input theo lần chạy đầu tiên của bạn.
Xem thêm: Read Text (OCR) · Biến và bộ nhớ