[TH] How to render the Thai string correctly?

จากบทความการใช้งาน u8g2 ที่สามารถเรนเดอร์ (Render) ภาษาไทย (Thai string) ได้ผ่านทางฟังก์ชัน drawUTF8() ของไลบรารี u8g2 แต่การแสดงผลไม่ถูกต้อง ดังภาพที่ 1 ด้วยเหตุนี้จึงต้องปรับปรุงโค้ดของไลบรารีเพิ่มเติมเพื่อให้การแสดงผลถูกต้องดังภาพที่ 2

ภาพที่ 1 การแสดงผลของ drawUTF8() ก่อนปรับปรุง
ภาพที่ 2 การแสดงผลของ drawUTF8() หลังปรับปรุง

[TH] Simple MineSweeper

บทความนี้เป็นการทดลองสร้างเกม Simple MineSweeper ดังภาพที่ 1 ซึ่งใช้บอร์ดไมโครคอนโทรลเลอร์ ESP32 กับจอแสดงผล st7735 แบบ REDTAB ขนาด 1.8″ ความละเอียดของการแสดงผลเป็น 128×160 อันเป็นฮาร์ดแวร์เดียวกับเกม Simple Tetris [ตอนที่ 1, ตอนที่ 2 และตอนที่ 3] ที่ได้กล่าวไปก่อนหน้านี้ โดยยังคงใช้ MicroPython เป็นหลักเช่นเดิม และการอธิบายจะเริ่มเป็นขั้นตอน ๆ ไป จากสร้างหน้าจอ สุ่มค่า การนับค่า การควบคุมการเคลื่อนที่ การเลื่อนกรอบตัวเลือก การปิดไม่ให้เห็นข้อมูล การสร้างความสัมพันธ์ระหว่างการระบุว่าตำแหน่งใดน่าจะเป็นระเบิด การเลือกเปิด และการนับคะแนนเมื่อจบเกม

ตัวเกม Simple MineSweeper เป็นเกมแรก ๆ ที่พวกเราทำเลียนแบบเพื่อศึกษาวิธีคิดและพัฒนาเทคนิคการเขียนโปรแกรมมาตั้งแต่ยุคระบบปฏิบัติการ DOS และ Windows ที่เป็น GUI ของ DOS ซึ่งตอนนั้นเขียนและทำงานบนระบบปฏิบัติการ DOS พร้อมทั้งต้องเปลี่ยนโหมดเป็นกราฟิกส์โหมด ติดต่อกับเมาส์ และสั่งวาดพิกเซลเอง (จะว่าไปแล้วก็เหมือนกันกับการเขียนบนบอร์ดไมโครคอนโทรลเลอร์ ESP32 แหละครับ แต่ไม่มีระบบปฏิบัติการให้ใช้) … ว่าแล้วมาทดลองสร้างกันดีกว่าครับ ดูจะรำลึกอดีตกันเนิ่นนานเลยทีเดียว

ภาพที่ 1 เกม simple mineSweeper

[TH] Simple Tetris Ep.3

บทความตอนสุดท้ายของการทำเกมเตตริสแบบง่าย (Simple Tetris) ที่ใช้ MicroPython กับไมโครคอนโทรลเลอร์ esp32 ตามที่ได้เขียนถึงในตอนที่ 1 และ 2 จาก 2 บทความแรกนั้น ผู้อ่านได้เรียนรู้การออกแบบโครงสร้างข้อมูล การวาดวัตถุที่ตกลงมาทั้ง 7 ชนิด และการควบคุมวัตถุให้เคลื่อนที่ไปทางซ้าย ขวา และการหมุน ส่วนในบทความที่ 2 ได้ให้วัตถุตกลงมาจากด้านบนและเก็บสถานะตำแหน่งของวัตถุเอาไว้ และในบทความนี้เป็นการทำให้วัตถุที่ตกลงมานั้นซ้อนกันได้ พร้อมทั้งการเลื่อนซ้าย ขวา และการหมุนวัตถุจะตรวจสอบการชนกับวัตถุเก่าที่เคยตกลงมาก่อน พร้อมทั้งตรวจสอบว่าเมื่อวัตถุตกลงมาจนถึงด้านล่างแล้วนั้นมีแถวใดบ้างที่ไม่มีช่องว่าง ถ้าพบแถวที่ไม่มีช่องว่างจะทำการลบแถวนั้นออกไป และสุดท้ายได้เพิ่มส่วนของการตรวจสอบการสิ้นสุดเกมในกรณีที่ไม่มีที่จะให้วัตถุตกลงมาและเคลื่อนที่ได้อีกดังภาพที่ 1 เป็นอันสิ้นสุดกระบวนการสร้างเกมแบบง่าย ๆ ของเรา

ภาพที่ 1 ตัวอย่างเกมของบทความนี้

[TH] Simple Tetris Ep.2

จากตอนที่แล้วเราได้วาดฉากหลัง การสุ่มวัตถุ การวาดวัตถุ การเลื่อนซ้ายขวา และการหมุนไปแล้ว ในบทความตอนที่ 2 ซึ่งเป็นตอนก่อนตอนสุดท้ายของชุดการทำเกม Tetris โดยเนื้อหาเป็นเรื่องของการสร้างฉากหลังเป็นโครงสร้างข้อมูลตาราง ถ้าวัตถุตกลงมาจนถึงล่างสุดจะแปลงวัตถุนั้นให้เป็นข้อมูลหนึ่งของตาราง ดังภาพที่ 1และปรับปรุงเรื่องวิธีการตกลงมาของวัตถุและการควบคุม/แสดงผลวัตถุใหม่ด้วยการใช้ตัวตั้งเวลา โดยยังไม่ตรวจสอบการชนจากการเลื่อนซ้าย/ขวา การตรวจสอบว่าวัตถุตกลงมาซ้อนกับวัตถุก่อนหน้านี้หรือไม่การหมุน และการตัดแถวซึ่งจะกล่าวถึงในบทความตอนสุดท้ายหรือ Simple Tetris Ep.3

ภาพที่ 1 ตัวอย่างเกมของบทความนี้

[TH] Simple Tetris Ep.1

บทความนี้แนะนำการเขียนเกมเตตริส (Tetris) แบบง่าย โดยแสดงผลในตารางขนาด กว้าง 10 ช่อง และสูง 16 ช่อง ตามภาพที่ 1 โดยใช้บอร์ดไมโครคอนโทรลเลอร์ esp32 ที่ต่อกับจอแสดงผลแบบ ST7735 และสวิตช์สำหรับควบคุมอีก 8 ตัว ที่สำคัญคือ เขียนด้วยภาษาไพธอนผ่าน MicroPython ที่คอมไพล์ให้ใช้ชุดไลบรารี st7735_mpy ซึ่งในบทความนี้กล่าวถึงการจัดเก็บวัตถุทั้ง 7 แบบที่เป็นสิ่งของหรือวัตถุที่ตกลงมาให้รองรับการแสดงผลและการหมุนวัตถุ กับการเลื่อนวัตถุไปทางซ้ายและขวา ส่วนการควบคุมและตรรกะของเกม Tetris จะกล่าวในบทความถัดไป

ภาพที่ 1 ตัวอย่างเกมของบทความนี้

[TH] How to make the stopwatch?

จากบทความสร้างนาฬิกาที่แสดงผลแบบแอนาล็อกแสดงผ่านจอแสดงผลแบบสี ครั้งนี้นำมาปรับปรุงแก้ไขเพื่อสร้างการทำงานเป็นเครื่องจับเวลาหรือนาฬิกาจับเวลา (Stopwatch) โดยใช้บอร์ด ESP32-CAM เชื่อมต่อกับจอ TFT และใช้สวิตช์จากขา GPIO0 ที่ใช้เป็นสวิตช์เลือกโหมดทำงานหรือโปรแกรมชิพเมื่อตอนบูตระบบหรือจ่ายไฟเข้าบอร์ด ESP32-CAM ดังภาพที่ 1 และการเขียนโปรแกรมยังคงใช้ภาษาไพธอนกับตัว MicroPython เช่นเคย

ภาพที่ 1 บอร์ด dCore RED บอร์ด esp32cam+REDTAB

[TH] Draw an analog clock using MicroPython.

บทความก่อนหน้านี้ได้กล่าวถึงการปรับปรุงปรับปรุงความเร็วในการแสดงผลด้วยการใช้เทคนิคดับเบิลบัฟเฟอร์ (double buffer) จึงนำมาประยุกต์ใช้สำหรับการแสดงผลเป็นนาฬิกาแบบแอนาล็อกดังภาพที่ 1 ซึ่งวิธีการวาดนั้นใช้การคำนวณตรีโกณมิติเพื่อหาค่าพิกัด (x,y) ของปลายเข็มวินาที นาที และชั่วโมง โดยการทำงานของแต่ละวินาทีจะใช้ตัวตั้งเวลาหรือไทเมอร์ (Timer) เพื่อให้การทำงานนั้นใกล้เคียงกับเวลาจริงมากกว่าการวนรอบหรือการหน่วงเวลา

ภาพที่ 1 ตัวอย่างผลลัพธ์ของการวาดนาฬิกาแบบแอนาล็อก

[TH] MicroPython : pyb USB_HID/USB_VCP

บทความนี้กล่าวถึงการใช้ความสามารถเกี่ยวกับ USB HID ของบอร์ดไมโครคอนโทรลเลอร์ STM32F411CEU6 ผ่านทาง MicroPython ในคลาส pyb ซึ่งทีมงานเราได้แรงบันดาลใจจากบทความ MicroPython for STM32F411 Black Pill: Embedded Programming Style ของอาจารย์ดร.เรวัต ศิริโภคาภิรมย์ ว่าแล้วมาเริ่มคอมไพล์และอัพโหลดเฟิร์มแวร์กันได้เลยครับ (อ่านรายละเอียดได้จากบทความของอาจารย์ดร.เรวัต ศิริโภคาภิรมย์ ได้เลยครับ) โดยเราใช้บอร์ดเลียนแบบ WeAct STM32F411CEU6 ดังภาพที่ 1 ซึ่งเมื่อติดตั้ง MicroPython จะมีคลาส pyb ให้ใช้งาน

ภาพที่ 1 บอร์ดสำหรับการทดลองในบทความนี้

[TH] LittleFS Filesystem

บทความกล่าวถึงการใช้ไลบรารี LittleFS และแนะนำไลบรารีที่ถูกพัฒนาเพื่อใช้กับไมโครคอนโทรเลอร์ esp32 ซึ่งมีส่วนเสริม (plugin) ของ Arduino IDE สำหรับอัพโหลดไฟล์ไปเก็บในรอมของไมโครคอนโทรลเลอร์ ทำให้สะดวกต่อการโหลดข้อมูลไปเก็บและเรียกใช้งาน ด้วยเหตุนี้ถ้าผู้เขียนโปรแกรมรู้สึกยุ่งยากกับการแปลงโค้ด HTML/CSS/JavaScript ให้เป็นสตริงด้วยตนเอง และเปลี่ยนมาเป็นอัพโหลดไฟล์ไปเก็บใน esp32 แล้วอ่านไฟล์เว็บมาใช้งานโดยตรงจะเป็นสิ่งที่จะต้องฝึกฝนใช้งานเจ้า LittleFS ไว้เป็นไลบรารีคู่ใจกันเลยทีเดียว


[TH] Binary Search Tree data structure programming with Python.

ในบทความก่อนหน้านี้ได้แนะนำการเขียนโปรแกรมเพื่อใช้โครงสร้างข้อมูลแบบคิวไปแล้ว ในบทความนี้จึงแนะนำการเขียนโปรแกรมจัดการโครงสร้างข้อมูล (Data Structure) อีกประเภทหนึ่งซึ่งมีวิธีการจัดเก็บและจัดการที่แตกต่างกันไปอันมีชื่อว่าต้นไม้แบบ BST หรือ Binary Search Tree ดังในภาพที่ 1 ซึ่งเป็นโครงสร้างที่สามารถนำไปประยุกต์เกี่ยวกับการเก็บข้อมูลที่มีคุณลักษณะที่ข้อมูลทางกิ่งด้านซ้ายมีค่าที่น้อยกว่าตัวเอง และกิ่งด้านขวามีค่ามากกว่าต้นเอง หรือทำตรงกันข้ามคือกิ่งซ้ายมีค่ามากกว่า และกิ่งด้านขวามีค่าน้อยกว่า ทำให้การค้นหาข้อมูลในกรณีที่ต้นไม้มีความสมดุลย์ทั้งทางซ้ายและทางขวาบนโครงสร้าง BST ประหยัดเวลาหรือจำนวนครั้งในการค้นหาลงรอบละครึ่งหนึ่งของข้อมูลที่มี เช่น มีข้อมูล 100 ชุด ในรอบแรกถ้าตัวเองยังไม่ใช่ข้อมูลที่กำลังค้นหา จะเหลือทางเลือกให้หาจากกิ่งทางซ้ายหรือขวา ซึ่งการเลือกทำให้ข้อมูลของอีกฝั่งนั้นไม่ถูกพิจารณา หรือตัดทิ้งไปครึ่งหนึ่งโดยประมาณ แต่ถ้าเป็นกรณีที่ Binary Search Tree นั้นขาดความสมดุลย์จะส่งผลให้การค้นหามีความเร็วไม่แตกต่างกับการค้นหาแบบลำดับ (Sequential Search) เท่าใดนัก

ในบทความนี้ใช้ภาษาไพธอนที่ทำงานได้ทั้งบนตัวแปลภาษา Python 3 หรือ MicroPython เพื่อจัดเก็บข้อมูล การเพิ่มข้อมูล การค้นหาข้อมูล เพื่อเป็นตัวอย่างของการนำไปพัฒนาต่อไป

BST : Binary Search Tree
ภาพที่ 1 ตัวอย่าง BST