กราฟิกบนจอแสดงผล SSD1306 I2C OLED 128x64 พร้อม CircuitPython โดยใช้ Itsybitsy M4 Express: 13 ขั้นตอน (พร้อมรูปภาพ)

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:05

จอแสดงผล SSD1306 OLED เป็นจอแสดงผลกราฟิกขาวดำขนาดเล็ก (0.96 นิ้ว) ราคาไม่แพง ใช้กันอย่างแพร่หลาย I2C แบบกราฟิกขาวดำขนาด 128x64 พิกเซล ซึ่งเชื่อมต่อได้ง่าย (เพียง 4 สาย) กับบอร์ดพัฒนาไมโครโปรเซสเซอร์ เช่น Raspberry Pi, Arduino หรือ Adafruit Itsybitsy M4 Express, CircuitPlayground Express หรืออุปกรณ์ CircuitPython อื่น ๆ สามารถดาวน์โหลดไดรเวอร์ได้จากอินเทอร์เน็ต

รูทีนแบบกราฟิกสำหรับ Arduinos มีให้ใช้งานมาระยะหนึ่งแล้ว แต่ไม่ใช่สำหรับระบบการพัฒนาอื่นๆ

ไดรเวอร์อุปกรณ์พื้นฐานอนุญาตให้ผู้ใช้:

• ล้างหน้าจอเป็นสีดำหรือขาว oled.fill(c)
• เขียนสตริงข้อความไปยังหน้าจอในตำแหน่งที่ระบุ (x, y) oled.text("Text", x, y, c)
• วาดจุดที่ตำแหน่งที่ระบุ (x, y) oled.pixel(x, y, c)
• โหลดไฟล์รูปภาพขึ้นหน้าจอ (ไม่ได้ใช้ในโครงการนี้)
• อัปเดตการแสดงผล oled.show()

คำแนะนำนี้จะสาธิตด้วยขั้นตอนง่าย ๆ วิธีการวาดแบบโต้ตอบ:

• เส้น
• วงกลม
• กล่องกลวง
• บล็อกแข็ง
• ตัวอักษรที่กำหนดไว้ล่วงหน้า

ฉันจะใช้ Adafruit Itsybitsy M4 Express เพื่อสาธิตวิธีการต่างๆ แต่โค้ดใน Python สามารถย้ายไปยังระบบการพัฒนาอื่นๆ ได้อย่างง่ายดาย

ฉันเลือก Itsybitsy M4 สำหรับการสาธิตนี้ เพราะมีราคาไม่แพง ทรงพลัง ตั้งโปรแกรมได้ง่าย รวมถึงอินพุต/เอาต์พุตแบบอะนาล็อกและดิจิตอล มีหน่วยความจำมากมาย มีเอกสารประกอบและฟอรัมช่วยเหลือบนอินเทอร์เน็ต ตั้งค่าได้ง่ายมาก และรองรับ CircuitPython ซึ่งเป็นเวอร์ชันของ Python ที่เหมาะสำหรับผู้ที่เพิ่งเริ่มเขียนโค้ด

เมื่อคุณได้ตั้งค่า Itsybitsy และ SSD1306 แล้ว นี่คือการสร้างเขียงหั่นขนมที่ง่ายมาก ไม่มีการพิมพ์ สามารถดาวน์โหลดไฟล์ทั้งหมดได้

นี่เป็นโครงการที่ไม่แพงและง่ายต่อการสร้าง แต่แนะนำแนวคิดขั้นกลาง/ขั้นสูง ฉันหวังว่าคุณจะลองดู ฉันรู้สึกประทับใจกับการแสดงเล็กๆ นี้

ขั้นตอนที่ 1: สิ่งที่เราต้องการสำหรับโครงการนี้

ฮาร์ดแวร์:

• SSD1306 I2C จอแสดงผลขาวดำ 128x64 พิกเซล
• Itsybitsy M4 Express
• สาย microUSB เป็น USB - เพื่อตั้งโปรแกรมบอร์ด
• เขียงหั่นขนม
• 1 10K โอห์มโพเทนชิโอมิเตอร์
• สวิตช์ 1 ปุ่ม
• สายต่อ-สีต่างๆช่วยได้
• คอมพิวเตอร์ (สำหรับเขียนโค้ดและอัปโหลด) - แล็ปท็อปรุ่นเก่าๆ ทำได้

ซอฟต์แวร์:

ตัวแก้ไข Mu - สำหรับเขียนโค้ดและอัปโหลดสคริปต์ไปยัง Itsybitsy

อธิบายการตั้งค่า Itsybitsy ที่นี่:

CircuitPython เวอร์ชันล่าสุด:

ห้องสมุด CircuitPython:

บรรณาธิการ Mu:

ขั้นตอนที่ 2: วงจร

นี่เป็นวงจรที่ง่ายมากในการตั้งค่า หน้าถัดไปแสดงเขียงหั่นขนมที่เสร็จแล้วด้วยสายสีเพื่อให้ง่ายขึ้น

ขั้นตอนที่ 3: เวอร์ชั่น Breadboard ของ Circuit

มีรางไฟฟ้าที่ด้านบนและด้านล่างของเขียงหั่นขนม ด้วยลวดสีแดงเชื่อมราง +ve เข้าด้วยกัน ด้วยลวดสีดำเชื่อมราง -ve เข้าด้วยกัน

เข้าร่วมพิน 3V ของ Itsybitsy กับราง +ve ล่าง - สายสีแดง (คอลัมน์ 12)

เข้าร่วมพิน G (GND) ของ Itsybitsy กับรางด้านบน -ve - สายสีดำ (คอลัมน์ 12)

ในคอลัมน์ 33 และ 34 ให้เชื่อมต่อพิน SSD1306 VCC และ GND เข้ากับรางจ่ายไฟด้านบน

ด้วยลวดสีชมพูเชื่อมหมุด SCL เข้าด้วยกัน

ด้วยลวดสีเทารวมหมุด SDA เข้าด้วยกัน

ด้วยสายสีแดงและสีดำเชื่อมต่อพินด้านนอกของโพเทนชิออมิเตอร์กับรางไฟด้านบนและด้วยสายสีเขียวเชื่อมต่อพินตรงกลาง (ที่ปัดน้ำฝน) กับ A5 บน Itsybitsy

เชื่อมต่อด้านหนึ่งของสวิตช์ปุ่มด้วยสายสีม่วงเข้ากับขา 2 และสายสีดำเชื่อมต่ออีกด้านหนึ่งเข้ากับราง GND

ขั้นตอนที่ 4: กำลังโหลดแบบอักษร

ดาวน์โหลดไฟล์ฟอนต์แล้วลากไปที่ไดรฟ์ CIRCUITPY (นี่คือ Itsybitsy.)

ดับเบิลคลิกที่โฟลเดอร์ lib และดูรายการไดรเวอร์ที่คุณโหลดไว้แล้ว

ขั้นตอนที่ 5: การเพิ่มไดรเวอร์พิเศษ

คุณจะต้องมีสิ่งต่อไปนี้ในโฟลเดอร์ lib:

• simpleio.mpy
• adafruit_bus_device
• adafruit_framebuf.mpy
• adafruit_ssd1306.mpy

หากไม่มี ให้ลากลงในโฟลเดอร์จากเวอร์ชันล่าสุดที่มี

ตอนนี้คุณพร้อมที่จะดาวน์โหลดสคริปต์แล้ว

เมื่อโหลดลงในตัวแก้ไข Mu คุณสามารถบันทึกลงใน Itsybitsy ด้วยชื่อ main.py

โปรแกรมดำเนินการผ่านการสาธิตเส้น วงกลม กราฟแท่งแบบไดนามิก และการแสดงอักขระที่กำหนด เพียงหมุนหม้อช้าๆ แล้วกดปุ่มค้างไว้เพื่อควบคุมการแสดงผล

หน้าต่อไปนี้ให้ข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของโปรแกรม

ขั้นตอนที่ 6: ตั้งค่าอุปกรณ์

ส่วนแรกนี้จะโหลดไลบรารีทั้งหมดและตั้งค่า SSD1306 โพเทนชิออมิเตอร์และสวิตช์ปุ่มบนพินที่ถูกต้อง

ขั้นตอนที่ 7: กำหนดอักขระและวาดเส้นแนวนอนและแนวตั้ง

ส่วนนี้ตั้งค่าอักขระที่กำหนดไว้ล่วงหน้า กว้าง 5 จุด สูง 8 จุด แต่ละจุดในคำจำกัดความจะดึง 4 จุดบนหน้าจอเพื่อให้แสดงได้ดีขึ้น

เส้นแนวนอนและแนวตั้งนั้นง่ายต่อการวาดด้วยการวนซ้ำ คุณแค่ต้องจำไว้ว่าคุณต้องมีจุดพิเศษในตอนท้าย เส้นจาก (0, 7) ถึง (5, 7) จะต้องมี 6 จุด: โดยที่ x เท่ากับ 0, 1, 2, 3, 4 และ 5 ในทางกลับกัน

คำสั่ง dot พื้นฐานคือ oled.pixel(x, y, colour) - 0 คือสีดำ และ 1 คือสีขาว

จุดเริ่มต้น (0, 0) อยู่ที่ด้านซ้ายบนของหน้าจอ 0 - 127 พิกเซลในแนวนอน (ซ้ายไปขวา) และ 0 - 63 ในแนวตั้ง (บนลงล่าง)

ขั้นตอนที่ 8: กล่อง บล็อก และเส้นลาดเอียง

กล่องถูกสร้างขึ้นจากเส้นแนวนอนและแนวตั้ง

บล็อกถูกสร้างขึ้นจากเส้นแนวนอนหลายเส้น

สำหรับเส้นลาดเอียง เราตรวจสอบพิกัดก่อนว่าให้เหลือมากที่สุดก่อน ถ้าไม่เราจะสลับกันเพราะเส้นจะถูกลากจากซ้ายไปขวา

จากนั้นเราคำนวณความชันและใช้เพื่อตั้งค่า y สำหรับแต่ละค่าของ x

ขั้นตอนการแสดงผล (t) ทำให้มองเห็นหน้าจอที่อัปเดตและรอสักครู่ t วินาที

ขั้นตอนที่ 9: สัญลักษณ์องศา Anlgnment กราฟแท่งและวงกลม

สัญลักษณ์องศาถูกสร้างขึ้นจาก 4 พิกเซล

รูทีน align() เพิ่มช่องว่างด้านหน้าตัวเลขเพื่อจัดค่าสั้น ๆ ให้ชิดขวาในพื้นที่คงที่

รูทีน graph(v) วาดกราฟแท่งแนวนอนโดยให้เปอร์เซ็นต์ที่เลือก ค่าจะถูกเขียนที่ด้านขวามือโดยใช้ 'T' เพื่อแทน 100 (Ton หรือ Top)

วงกลมต้องใช้ตรีโกณมิติ เราจึงต้องนำเข้าห้องสมุดคณิตศาสตร์ที่จุดเริ่มต้นของสคริปต์ เราใช้ sin, cos และเรเดียนในการคำนวณค่าออฟเซ็ต x และ y จากจุดศูนย์กลางเมื่อรัศมีหมุนไป 90 องศา จุดจะถูกพล็อตในแต่ละสี่จตุภาคสำหรับการคำนวณออฟเซ็ตแต่ละครั้ง

ขั้นตอนที่ 10: การรวบรวมขยะ ชื่อและแวดวง

คำแนะนำเหล่านี้สาธิตการล้างหน้าจอเป็นขาวดำ การเขียนข้อความไปยังหน้าจอ และใช้รูทีน 'การรวบรวมขยะ' ของ gc() เพื่อเพิ่มพื้นที่ว่าง ค่านี้แสดงว่ามีพื้นที่เพียงพอสำหรับสคริปต์ที่ใหญ่กว่ามาก

จากนั้นโปรแกรมจะวาดวงกลมด้วยจุดศูนย์กลางร่วมและจุดศูนย์กลางเคลื่อนที่ ค่อนข้างเป็นกิจวัตรที่รวดเร็วเมื่อพิจารณาถึงจำนวนที่ต้องการในการคำนวณ

หัวข้อสำหรับการสาธิตบรรทัดจะถูกเขียนต่อไป

ขั้นตอนที่ 11: การสาธิตเส้น

รูทีนนี้ทำให้รูทีน line() ออกกำลังกายได้จริง เส้นเรเดียลถูกวาดจากมุมทั้งสี่ของจอแสดงผลโดยมีรูปแบบการเว้นระยะห่างต่างกัน

ขั้นตอนที่ 12: วงหลัก: กราฟแท่งและอักขระที่กำหนด

นี่คือลูปหลักของโปรแกรม ค่าจากโพเทนชิออมิเตอร์จะเปลี่ยนค่าที่แสดงและเปลี่ยนความยาวของกราฟแท่ง

หากกดปุ่มค้างไว้ อักขระที่กำหนดจะถูกสลับเป็น 1/0 และ True/False วนรอบนี้ทำงานค่อนข้างช้าเนื่องจากการวาดอักขระที่กำหนดไว้ล่วงหน้าเป็นกระบวนการที่ช้า คุณสามารถเร่งความเร็วได้โดยการแสดงความคิดเห็นบางส่วน

ไม่มีเซ็นเซอร์อุณหภูมิติดตั้งอยู่ เพื่อให้การสาธิตนี้เรียบง่าย ดังนั้น '?' จะแสดงแทนค่าในบรรทัดที่ 190