สร้างภาพเคลื่อนไหวให้กราฟแท่ง
แสดงค่าเซนเซอร์ที่เปลี่ยนแปลงด้วยแท่งที่เคลื่อนไหว
สร้างภาพเคลื่อนไหวให้กราฟแท่ง เป็นบทเรียน Arduino & IoT Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Arduino & IoT Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Arduino & IoT Academy มีบทเรียนทั้งหมด 4 บทเรียน
ทำไมต้องใช้กราฟแท่ง
ตัวเลขมีความแม่นยำ แต่ bar ช่วยบอกแนวโน้มได้ทันที แถบที่ยาวขึ้นแสดงค่าจากเซ็นเซอร์ที่เพิ่มขึ้นได้เร็วกว่าการอ่านตัวเลขมาก 📊
เริ่มจากค่าที่อ่านได้
ภาพเคลื่อนไหวเริ่มจากข้อมูลใหม่ ในแต่ละรอบการทำงาน ให้คุณอ่านค่าใหม่จาก sensor เช่น ค่า analogRead ที่อยู่ระหว่าง 0 ถึง 1023
int value = analogRead(A0);แปลงเป็นความกว้างของแถบ
ช่วงค่าดิบมักไม่ตรงกับขนาดหน้าจอ ใช้ map เพื่อปรับช่วง 0-1023 ให้เป็น 0-128 พิกเซล เพื่อให้ค่าแสดงพอดีกับความกว้างของหน้าจอ
int barWidth = map(value, 0, 1023, 0, 128);จำกัดผลลัพธ์
ค่าที่อ่านได้ซึ่งมีสัญญาณรบกวนอาจเกินช่วง ให้ครอบค่าด้วย constrain เพื่อไม่ให้แถบถูกวาดเลยขอบหน้าจอและทำให้การจัดวางเสียหาย
barWidth = constrain(barWidth, 0, 128);ล้างแต่ละเฟรม
ภาพเคลื่อนไหวก็คือการวาดใหม่อย่างรวดเร็ว ทุกเฟรมต้องเริ่มด้วย clearDisplay เพื่อให้แถบเดิมหายไปก่อนวาดความยาวใหม่
display.clearDisplay();วาดแถบ
ตอนนี้เติมแถบด้วย fillRect โดยใช้ความกว้างที่แปลงแล้ว กำหนดค่า x, y และความสูงคงที่ เพื่อให้แถบอยู่กับที่ขณะที่ความกว้างเปลี่ยนตามข้อมูล
display.fillRect(0, 28, barWidth, 8, WHITE);เพิ่มกรอบ
วาดกรอบรางทั้งหมดด้วย drawRect เพื่อให้ผู้ใช้เห็นค่าสูงสุด ส่วนที่เติมจะขยายอยู่ภายในกรอบนี้ ทำให้เข้าใจบริบทของแถบได้ชัดเจน
display.drawRect(0, 28, 128, 8, WHITE);ติดป้ายกำกับค่า
แสดงตัวเลขจริงคู่กับแถบ วางเคอร์เซอร์ไว้เหนือแถบแล้วใช้ print พิมพ์ค่าที่อ่านได้ เพื่อให้ผู้ใช้เห็นทั้งรูปร่างและตัวเลขที่แม่นยำ
display.setCursor(0, 0);
display.print(value);ส่งเฟรมขึ้นหน้าจอ
ส่งเฟรมที่เสร็จแล้วด้วย display.display() เนื่องจากบัฟเฟอร์ทั้งหมดอัปเดตพร้อมกัน แถบจึงเคลื่อนไหวอย่างราบรื่นโดยไม่กะพริบหรือปรากฏเพียงบางส่วน
display.display();กำหนดจังหวะภาพเคลื่อนไหว
การวาดใหม่ให้เร็วที่สุดอาจดูสั่นไหว การใช้ delay สั้น ๆ 50 มิลลิวินาทีจะทำให้การเคลื่อนไหวราบรื่นและค่าจากเซ็นเซอร์ที่แกว่งดูนิ่งขึ้น
delay(50);รอบการทำงานทั้งหมด
รวมทุกอย่างเข้าด้วยกัน: อ่านค่า แปลงค่า ล้างหน้าจอ วาด แสดงผล แล้วหยุดชั่วคราว วงจรนี้ใน loop() คือกลไกเบื้องหลังภาพเคลื่อนไหว OLED แบบสดทุกแบบที่คุณสร้าง
ตรวจสอบอย่างรวดเร็ว
แถบของคุณมีร่องรอยจาง ๆ จากเฟรมก่อนหน้า
สรุปทบทวน
คุณเปลี่ยนค่าที่อ่านได้ให้เป็น bar graph แบบสดแล้ว: อ่านค่า แปลงค่า จำกัดค่า ล้างหน้าจอ เติมแถบ วาดกรอบ ติดป้ายกำกับ และแสดงผลในรอบการทำงานที่กำหนดจังหวะ นี่คือการแสดงข้อมูลแบบเวลาจริง
เรียนรู้ C++ ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 30
- บทเรียน
- 120
คำถามที่พบบ่อย
บทเรียน “สร้างภาพเคลื่อนไหวให้กราฟแท่ง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “สร้างภาพเคลื่อนไหวให้กราฟแท่ง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Arduino & IoT Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Arduino & IoT Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “สร้างภาพเคลื่อนไหวให้กราฟแท่ง”
แสดงค่าเซนเซอร์ที่เปลี่ยนแปลงด้วยแท่งที่เคลื่อนไหว คุณปฏิบัติ Arduino & IoT Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Arduino & IoT Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Arduino & IoT Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “สร้างภาพเคลื่อนไหวให้กราฟแท่ง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Arduino & IoT Academy นี้ได้ไหม
ได้ บทเรียน Arduino & IoT Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ต่อสายและเริ่มต้น SSD1306 OLED
- วาดข้อความหลายขนาด
- เส้น สี่เหลี่ยม และวงกลม
- สร้างภาพเคลื่อนไหวให้กราฟแท่ง