สนุกกับจอแสดงผล OLED และ Arduino: 12 ขั้นตอน (พร้อมรูปภาพ)

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

ฉันค่อนข้างแน่ใจว่าคุณเคยได้ยินเกี่ยวกับเทคโนโลยีการแสดงผล OLED อย่างแน่นอน ค่อนข้างใหม่และให้คุณภาพที่ดีกว่าเทคโนโลยี LCD แบบเก่า ในบทช่วยสอนนี้ เราต้องการทบทวนขั้นตอนที่จำเป็นในการแสดงข้อมูลโมดูลจอแสดงผล OLED สีเดียวที่มีขายทั่วไปในตลาด ฉันจะพยายามอธิบายฟังก์ชันที่ได้รับจากไลบรารี Adafruit ที่เกี่ยวข้องเพื่อแสดงข้อมูลในโมดูลนี้

ขั้นตอนที่ 1: เราจะใช้โมดูล OLED ใด

โมดูล OLED มีให้เลือกหลายขนาดและคุณสมบัติ โมดูลที่เราจะใช้ในบทช่วยสอนนี้คือโมดูล OLED ขนาด 128x64 สีเดียว โมดูลประเภทนี้มีขนาดดังต่อไปนี้ (ตามลำดับที่คุณเห็นในภาพ):

• 128x64
• 128x32
• 96x16
• 64x48
• 64x32

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

ขั้นตอนที่ 2: I2C โดยสังเขป

วงจรรวม (IIC) ซึ่งปกติเรียกว่า I2C (I กำลังสอง C) ที่พัฒนาโดยฟิลิปส์ในทศวรรษที่ 80 เป็นบัสแลกเปลี่ยนข้อมูลที่ใช้ในการถ่ายโอนข้อมูลระหว่างหน่วยประมวลผลกลาง (CPU) หรือไมโครคอนโทรลเลอร์ยูนิต (MCU) ของอุปกรณ์และ ชิปต่อพ่วง โดยพื้นฐานแล้วเป้าหมายสำหรับแอปพลิเคชันทีวี เนื่องจากความเรียบง่าย มันจึงเป็นที่นิยมมากจนหลังจากนั้นไม่นานมันก็กลายเป็นหนึ่งในกลไกหลักของการถ่ายโอนข้อมูลสำหรับ CPU และ MCU และอุปกรณ์ต่อพ่วงที่ไม่ใช่ส่วนที่จำเป็นของบอร์ด PCB เดียวกันและเชื่อมต่อผ่านสายไฟ (เช่น เซ็นเซอร์ โมดูลแสดงผล ฯลฯ)

I2C ประกอบด้วยบัสสื่อสารที่ทำจากสองสายซึ่งรองรับการถ่ายโอนข้อมูลแบบสองทิศทางระหว่างอุปกรณ์หลักและอุปกรณ์ทาสหลายตัว โดยทั่วไปแล้วมาสเตอร์โหนดจะทำหน้าที่ควบคุมบัส ซึ่งจริง ๆ แล้วทำได้โดยการสร้างสัญญาณซิงโครไนซ์บนสายสัญญาณนาฬิกาอนุกรม (SCL) เป็นสัญญาณที่จะถูกส่งอย่างต่อเนื่องโดยมาสเตอร์ระหว่างการถ่ายโอนและโหนดอื่น ๆ ทั้งหมดที่เชื่อมต่อกับบัสจะใช้เพื่อซิงค์การสื่อสารและตรวจจับความเร็วของบัส ข้อมูลจะถูกถ่ายโอนระหว่างมาสเตอร์และสเลฟผ่านสายข้อมูลซีเรียล (SDA) ความเร็วในการส่งได้ถึง 3.4 Mbps. อุปกรณ์ทั้งหมดที่ต้องการโอนข้อมูลผ่าน I2C ควรมีที่อยู่ที่ไม่ซ้ำกันและสามารถทำงานเป็นเครื่องส่งหรือเครื่องรับขึ้นอยู่กับฟังก์ชันของอุปกรณ์ ตัวอย่างเช่น โมดูลแสดงผล OLED เป็นเครื่องรับที่รับข้อมูลบางส่วนและแสดงผล ขณะที่เซ็นเซอร์อุณหภูมิเป็นตัวรับส่งสัญญาณที่ส่งอุณหภูมิที่จับได้ผ่านบัส I2C โดยปกติอุปกรณ์หลักคืออุปกรณ์ที่เริ่มต้นการถ่ายโอนข้อมูลบนบัสและสร้างสัญญาณนาฬิกาเพื่ออนุญาตการถ่ายโอน ในระหว่างการถ่ายโอนนั้น อุปกรณ์ใดๆ ที่ต้นแบบนี้ระบุจะถือเป็นสเลฟและอ่านข้อมูลนั้น

เมื่อโหนดต้องการส่งข้อมูล ไบต์แรกของข้อมูลควรเป็นที่อยู่ของเครื่องรับ จากนั้นข้อมูลจริงจะตามมาในภายหลัง ซึ่งหมายความว่าในการส่งข้อมูลไปยังอุปกรณ์ส่งออกโดยใช้ I2C (เช่น โมดูลการแสดงผล I2C OLED) อันดับแรก เราควรหาที่อยู่ I2C ก่อน และนี่คือสิ่งที่เราจะทำในขั้นตอนต่อไป

หากคุณสนใจที่จะทราบข้อมูลเพิ่มเติมเกี่ยวกับรายละเอียดและทฤษฎีเกี่ยวกับบัส I2C คุณสามารถใช้ข้อมูลอ้างอิงต่อไปนี้:

www.i2c-bus.org

learn.sparkfun.com/tutorials/i2c

ขั้นตอนที่ 3: โมดูลและส่วนประกอบที่จำเป็น

คุณสามารถค้นหารายการส่วนประกอบที่คุณจำเป็นต้องทำในบทช่วยสอนนี้ให้สมบูรณ์ได้ที่นี่:

ลิงค์อีเบย์:

• 1 x Arduino Uno:
• 1 x โมดูล OLED 128x64:
• 4 x สายดูปองท์:
• 1 x เขียงหั่นขนมขนาดเล็ก:

ลิงค์ Amazon.com:

• 1 x Arduino Uno:
• 1 x โมดูล OLED 128x64:
• 4 x สายดูปองท์:
• 1 x เขียงหั่นขนมขนาดเล็ก:

ขั้นตอนที่ 4: การเดินสายไฟโมดูลแสดงผล OLED ไปยัง Arduino

หมายเหตุสำคัญเกี่ยวกับอุปกรณ์ที่เปิดใช้งาน I2C คือวิธีที่คุณควรเชื่อมต่อกับ Arduino นั้นเหมือนกันทั้งหมด เนื่องจาก Arduino ใช้งานการสื่อสาร I2C บนพินเฉพาะเท่านั้น ในบทช่วยสอนนี้ ฉันใช้ Arduino Uno Arduino Uno ใช้พิน A5 เป็น SCK และ A4 เป็น SDA ดังนั้นเราจึงสามารถเชื่อมต่อโมดูลแสดงผล OLED กับ Arduino Uno ตามที่แสดงในมุมมองแผนผัง ดังที่คุณอาจสังเกตเห็นในภาพที่ฉันถ่ายจากโมดูลจอแสดงผล OLED ตัวเชื่อมต่อสำหรับ VCC และ GND นั้นแตกต่างจากมุมมองแผนผัง อย่าลืมตรวจสอบฉลากของหมุดบนโมดูลของคุณเพื่อให้แน่ใจว่าคุณกำลังเชื่อมต่ออย่างถูกวิธี

เราต้องการเพียง 4 พินเท่านั้นที่ควรเชื่อมต่อดังนี้:

Arduino VCC -> โมดูล OLED VCC

Arduino GND -> โมดูล OLED GND

Arduino 4 -> โมดูล OLED SDA

Arduino 5 -> โมดูล OLED SCK

ขั้นตอนที่ 5: ค้นหาที่อยู่ของโมดูลการแสดงผล

ในขั้นแรกในการเชื่อมต่อกับอุปกรณ์ที่เปิดใช้งาน I2C คุณต้องมีที่อยู่ของโมดูล ในการดำเนินการดังกล่าว หลังจากเดินสายโมดูลไปยัง Arduino ของคุณแล้ว คุณควรอัปโหลดโค้ดที่แนบมากับ Arduino ของคุณ รหัสนี้รวมไลบรารี Wire ซึ่งเป็นไลบรารีที่มาพร้อมกับ Arduino IDE ที่จัดการการสื่อสาร I2C จะพยายามสแกนอุปกรณ์ I2C ที่เชื่อมต่อและส่งที่อยู่ผ่านทางพอร์ตอนุกรมไปยังคอมพิวเตอร์ของคุณ ดังนั้นคุณจึงสามารถเข้าถึงเอาต์พุตของมันผ่านเครื่องมือ Serial Monitor ใน Arduino IDE เวอร์ชันดั้งเดิมมีให้ที่ Arduino Playground) นอกจากนี้ คุณสามารถดูได้ในวิธีที่อ่านง่ายขึ้นใน Arduino Editor ออนไลน์ของฉัน อย่าคาดหวังให้สิ่งใดปรากฏบนหน้าจอในขณะที่โค้ดนี้กำลังทำงานอยู่

ดังที่คุณเห็นในภาพ โมดูลของฉันถูกผูกไว้กับที่อยู่ 0x3C โดยปกติอุปกรณ์ทั้งหมดในสายผลิตภัณฑ์เฉพาะ (เช่น โมดูล OLED ขนาด 128x64 ทั้งหมด) จะมีที่อยู่เดียวกัน

ที่อยู่ของอุปกรณ์ I2C ถูกจำกัดจาก 1 ถึง 126 รหัสนี้เพียงพยายามเชื่อมต่อกับแต่ละอุปกรณ์ตามลำดับ (โดยไม่ส่งข้อมูลใดๆ) จากนั้นตรวจสอบว่ามีข้อผิดพลาดใดๆ ที่รายงานโดยไลบรารีพื้นฐานในการเชื่อมต่อกับที่อยู่ที่ให้ไว้หรือไม่ หากไม่มีข้อผิดพลาด ให้พิมพ์ที่อยู่เป็นโมดูลที่สามารถเชื่อมต่อได้ นอกจากนี้ ควรสังเกตว่าที่อยู่ 15 อันดับแรกถูกสงวนไว้ ดังนั้นจึงข้ามไปและพิมพ์ที่อยู่ที่อยู่เหนือช่วงนี้ โปรดจำไว้ว่าที่อยู่ของโมดูล I2C เหล่านี้มีฮาร์ดโค้ดบนอุปกรณ์และไม่สามารถเปลี่ยนแปลงได้ ดังนั้นจึงควรจดบันทึกไว้ที่ใดที่หนึ่งหรือติดฉลากบนโมดูลเมื่อคุณจะวางกลับบนชั้นวางห้องปฏิบัติการของคุณ เพื่อที่จะได้ไม่ต้องเรียกใช้รหัสเครื่องสแกนในครั้งต่อไป อย่างไรก็ตามมันไม่ใช่ขั้นตอนที่ซับซ้อน;)

ขั้นตอนที่ 6: การติดตั้งไลบรารีที่จำเป็นเพื่อแสดงข้อมูลบนโมดูล OLED

ไลบรารี Wire สามารถจัดการการสื่อสารระดับต่ำกับอุปกรณ์ I2C เมื่อคุณต้องการเชื่อมต่อกับอุปกรณ์เฉพาะเพื่ออ่าน/เขียนข้อมูลจาก/ไปยังอุปกรณ์นั้น ปกติแล้วคุณจะใช้ไลบรารี่ของบริษัทที่สร้างโมดูลนั้นในตอนแรก ไลบรารีนี้จัดการรายละเอียดการสื่อสาร I2C ทั้งหมดด้วยโมดูลที่กำหนด และให้เรามุ่งความสนใจไปที่ธุรกิจของเรามากขึ้น ซึ่งในกรณีนี้คือการแสดงข้อมูลในแบบที่เราต้องการ

Adafruit ซึ่งเป็นบริษัทที่ผลิตโมดูลแสดงผลรุ่นดั้งเดิมได้จัดหาไลบรารีชื่อ Adafruit SSD1306 เพื่อแสดงข้อมูลบนจอภาพขาวดำเหล่านี้ ดังนั้น ก่อนเริ่มเขียนโค้ด เราต้องติดตั้งไลบรารีนี้ผ่าน Library Manager (เข้าถึงได้จาก Sketch > Include Library > Manage Libraries… menu) ใน Arduino IDE นอกจากนี้ยังมีไลบรารีอื่นที่เรียกว่า Adafruit GFX Library ซึ่งจัดการเนื้อหากราฟิกระดับต่ำและใช้ภายในโดย Adafruit SSD1306 คุณต้องติดตั้งทั้งคู่บน Arduino IDE ของคุณดังที่คุณเห็นในรูปภาพ

ขั้นตอนที่ 7: การเริ่มต้นโมดูลการแสดงผล

การวาดภาพบนโมดูลแสดงผลถูกรวมไว้ในคลาสชื่อ Adafruit_SSD1306 คำจำกัดความของคลาสนี้อยู่ในไลบรารี Adafruit ดังนั้นเราจึงต้องรวมไลบรารีนั้นก่อน จากนั้นเราต้องยกตัวอย่างของคลาสนี้ก่อน คอนสตรัคเตอร์ของคลาสนี้ใช้หมายเลขพอร์ตที่สามารถรีเซ็ตจอแสดงผลได้ ซึ่งก็คือพิน 4 (เชื่อมต่อกับ SCK) โค้ดส่วนนี้ควรอยู่ที่จุดเริ่มต้นของไฟล์ (ออกจากฟังก์ชัน setup() และ loop())

#รวม

Adafruit_SSD1306 จอแสดงผล (4);

ภายในฟังก์ชัน setup() เราควรเรียกใช้ฟังก์ชันเริ่มต้นของอ็อบเจ็กต์การแสดงผลโดยส่งที่อยู่ I2C ของเราตามด้านล่าง (SSD1306_SWITCHCAPVCC เป็นค่าคงที่ที่ระบุประเภทของแหล่งพลังงานไปยังไลบรารี):

การตั้งค่าเป็นโมฆะ () {

display.begin(SSD1306_SWITCHCAPVCC, 0x3C); display.display(); } void loop() {} // loop สามารถว่างได้ในตอนนี้

ตอนนี้วัตถุแสดงผลพร้อมแล้ว และเราสามารถเรียกใช้ฟังก์ชันได้ (เช่น display.write(), display.drawLine เป็นต้น) หมายเหตุสำคัญคือ เมื่อใดก็ตามที่เราวาดบางสิ่งโดยเรียกใช้วัตถุแสดงผล เราต้องเรียกใช้ฟังก์ชัน display.display() เพื่อให้การวาดจริงเกิดขึ้นในระดับฮาร์ดแวร์ สาเหตุหลักมาจากความจริงที่ว่าฟังก์ชั่นการวาดที่เราเรียกว่าเพียงอัปเดตการแสดง "ในหน่วยความจำ" ของจอแสดงผลด้วยเหตุผลด้านประสิทธิภาพ มันแคชการเปลี่ยนแปลงในหน่วยความจำจริง ๆ ดังนั้นเราควรจำไว้เสมอว่าให้เรียกใช้ฟังก์ชัน display() เมื่อเราวาดภาพบนหน้าจอเสร็จแล้ว

display.write(…); // คอยอัปเดตในหน่วยความจำ

display.drawLine(…); // คอยอัปเดตในหน่วยความจำ display.display(); // ล้างการเปลี่ยนแปลงทั้งหมดไปยังฮาร์ดแวร์การแสดงผล

หากคุณพยายามอัปโหลดรหัสของคุณในขั้นตอนนี้ คุณจะสังเกตเห็นว่าโลโก้ Adafruit Industries จะปรากฏขึ้น คุณอาจสงสัยว่าใครขอให้มันวาดอย่างนั้น! จริงๆ แล้วนี่คือสิ่งที่ห้องสมุดอดาฟรุตทำ มันเริ่มต้นหน่วยความจำของโมดูล (การแสดงในหน่วยความจำของฮาร์ดแวร์การแสดงผล) ด้วยโลโก้ของบริษัทนี้ หากคุณไม่ต้องการเห็นสิ่งนี้ในระหว่างการเริ่มต้น คุณสามารถลองเรียกใช้ฟังก์ชัน display.clearDisplay() ก่อนเรียกใช้ display.display() ในฟังก์ชันการตั้งค่าของคุณ ฟังก์ชันนี้จะล้างการแสดงผลอย่างสมบูรณ์ตามชื่อของมัน

#รวม

Adafruit_SSD1306 จอแสดงผล (4); การตั้งค่าเป็นโมฆะ () { display.begin (SSD1306_SWITCHCAPVCC, 0x3C); display.clearDisplay(); display.display(); } วงเป็นโมฆะ () { }

จากเอกสารประกอบของไลบรารี Adafruit_SSD1306 คุณสามารถใช้ฟังก์ชันต่างๆ ที่คลาสนี้มีให้เพื่อวาดบนจอแสดงผลหรือจัดการพิกเซลบนไลบรารีโดยตรง ในหัวข้อถัดไป เราจะพยายามนำเสนอตัวอย่างสำหรับแต่ละรายการ เพื่อให้คุณมีแนวคิดเกี่ยวกับวิธีการทำงาน ตัวอย่างเหล่านี้ส่วนใหญ่จะแสดงเฉพาะเนื้อหาสแตติกอย่างง่าย ดังนั้นเราสามารถใส่ไว้ในฟังก์ชัน setup() ของเรา (หลังโค้ดเริ่มต้น) โดยการทำเช่นนี้จะเป็นการเรียกใช้เพียงครั้งเดียวและยังคงอยู่ที่นั่น

ขั้นตอนที่ 8: แสดงข้อความอย่างง่าย

ในการแสดงข้อความ เราสามารถใช้ฟังก์ชัน display.println() อย่างง่ายของไลบรารี ยอมรับข้อความเป็นสตริงและพยายามแสดง สิ่งสำคัญคือต้องรู้ว่าเราต้องบอกห้องสมุดว่าเราจะนำเสนอข้อความที่ใดบนจอแสดงผล ทุกพิกเซลบนจอแสดงผลมีพิกัดที่ระบุด้วย X และ Y X เพิ่มขึ้นจากซ้ายไปขวา และ Y เพิ่มขึ้นจากบนลงล่าง มุมซ้ายบนของหน้าจอคือ (X=0, Y=0) และมุมล่างขวาคือ (X=127, Y=63) ฉันสังเกตพิกัดของมุมในภาพแรก เราสามารถใช้ฟังก์ชัน display.setCursor() เพื่อระบุตำแหน่งบนจอแสดงผลที่เราจะแสดงข้อความ

คุณสมบัติอีกอย่างของข้อความคือสี เราสามารถระบุสีโดยใช้ display.setTextColor() ตามที่แสดงในตัวอย่างต่อไปนี้

display.clearDisplay();

display.setTextColor(สีขาว); display.setCursor (35, 30); display.println("สวัสดีชาวโลก!"); display.display();

นอกจากนี้เรายังสามารถใช้ฟังก์ชัน display.write() เพื่อแสดงอักขระตัวเดียว ยอมรับรหัสอักขระเป็นประเภท uint8_t และแสดงอักขระที่สอดคล้องกับรหัสนั้นบนสตริง ตัวอย่างเช่น หากเราต้องการแสดงสตริงเดียวกันโดยใช้ฟังก์ชันนี้ เราสามารถใช้ตัวอย่างต่อไปนี้:

display.clearDisplay();

display.setTextColor(สีขาว); display.setCursor(35, 30); display.write(72); display.write(101); display.write(108); display.write(108); display.write(111); display.write(32); display.write(87); display.write(111); display.write(114); display.write(108); display.write(100); display.write(33); display.display();

นอกจากนี้ยังสามารถวาดข้อความเป็นสีดำโดยมีพื้นหลังสีขาว คุณต้องเรียกใช้ฟังก์ชัน display.setTextColor ดังต่อไปนี้:

display.clearDisplay();

// ตั้งค่าสีเป็นสีดำโดยมีพื้นหลังสีขาว display.setTextColor(BLACK, WHITE); display.setCursor(25, 30); display.println("ข้อความกลับด้าน!"); display.display();

คุณยังมีตัวเลือกในการตั้งค่าขนาดของข้อความโดยใช้ฟังก์ชัน display.setTextSize() ยอมรับจำนวนเต็มเป็นขนาด ยิ่งตัวเลขมากเท่าไหร่ ข้อความก็จะยิ่งมากขึ้นเท่านั้น ขนาดที่เล็กที่สุดคือ 1 ซึ่งเป็นขนาดเริ่มต้นของข้อความ รหัสต่อไปนี้พยายามเขียนตัวอักษร "A" ใน 6 ขนาดที่แตกต่างกัน:

display.clearDisplay();

display.setTextColor(สีขาว); display.setCursor(0, 0); display.setTextSize(1); display.print("A"); display.setTextSize(2); display.print("A"); display.setTextSize(3); display.print("A"); display.setTextSize(4); display.print("A"); display.setTextSize(5); display.print("A"); display.setTextSize(6); display.print("A"); display.display();

ขั้นตอนที่ 9: การวาดรูปทรงพื้นฐาน

การวาดรูปร่างพื้นฐาน เช่น สี่เหลี่ยมผืนผ้า วงกลม สามเหลี่ยม เส้น หรือจุดนั้นง่ายมาก และมีฟังก์ชันเฉพาะสำหรับแต่ละรูปร่าง

วาดเส้น

หากต้องการวาดเส้น คุณสามารถเรียก display.drawLine(startX, startY, endX, endY, color) ตัวอย่างเช่น โค้ดต่อไปนี้จะวาดเส้นทแยงมุมในหน้าจอเพื่อให้เป็นรูปร่าง X ขนาดใหญ่:

display.clearDisplay();

display.drawLine(0, 0, display.width() - 1, display.height() - 1, WHITE); display.drawLine(display.width() - 1, 0, 0, display.height() - 1, WHITE); display.display();

คุณสามารถเข้าถึงความกว้างและความสูงของจอแสดงผลได้โดยใช้ฟังก์ชัน display.width() และ display.height() โดยการทำเช่นนี้รหัสของคุณจะเป็นอิสระจากขนาดหน้าจอ

วาดรูปสี่เหลี่ยมผืนผ้า

ฟังก์ชันสำหรับวาดรูปสี่เหลี่ยมผืนผ้าคือ display.drawRect(upperLeftX, upperLeftY, width, height, color) นี่คือรหัสที่วาดรูปสี่เหลี่ยมผืนผ้าสามแห่งในสถานที่สุ่มบางแห่ง:

display.clearDisplay();

display.drawRect(100, 10, 20, 20, สีขาว); display.fillRect (10, 10, 45, 15, สีขาว); display.drawRoundRect(60, 20, 35, 35, 8, สีขาว); display.display();

โดยการเรียก display.fillRect(upperLeftX, upperLeftY, width, height, WHITE) คุณสามารถวาดรูปสี่เหลี่ยมผืนผ้าที่เต็มไปด้วยสีที่ระบุได้ นอกจากนี้ ฟังก์ชันที่สามในตัวอย่างนี้คือ display.drawRoundRect(upperLeftX, upperLeftY, width, height, cornerRadius, color) ที่คุณเห็นในภาพใช้เพื่อวาดรูปสี่เหลี่ยมผืนผ้าที่มีมุมมน ยอมรับพารามิเตอร์พิเศษก่อนสีที่เป็นตัวเลขจำนวนเต็มที่ระบุรัศมีมุม ยิ่งค่ามาก มุมก็จะยิ่งกลม นอกจากนี้ยังมีฟังก์ชั่นการเติมชื่อ display.drawFillRoundRect ที่ฉันคิดว่าคุณสามารถเดาได้ว่ามันทำอะไร

วาดวงกลม

ฟังก์ชันคือ display.drawCircle (centerX, centerY, รัศมี, สี) นี่คือตัวอย่างที่วาดรูปร่างคล้ายหน้ายิ้ม:

display.drawCircle(60, 30, 30, สีขาว);

display.fillCircle(50, 20, 5, สีขาว); display.fillCircle(70, 20, 5, สีขาว);

เช่นเดียวกับสี่เหลี่ยมผืนผ้า คุณสามารถใช้ฟังก์ชัน display.fillCircle เพื่อวาดวงกลมที่เต็มไปด้วยสีที่กำหนด

วาดรูปสามเหลี่ยม

อ้อ เรียกอีกอย่างว่า display.drawTriangle(poin1X, point1Y, point2X, point2Y, point3X, point3Y, color) และ display.fillTriangle ที่สอดคล้องกันซึ่งวาดรูปสามเหลี่ยมที่เต็มไป

display.drawTriangle(24, 1, 3, 55, 45, 55, สีขาว);

display.fillTriangle(104, 62, 125, 9, 83, 9, สีขาว);

วาดจุด

คุณยังสามารถกำหนดสีเฉพาะจุด (ซึ่งเรียกว่าพิกเซล) บนหน้าจอได้โดยใช้ฟังก์ชัน display.drawPixel(pixelX, pixelY, color)

display.drawPixel(20, 35, สีขาว);

display.drawPixel(45, 12, สีขาว); display.drawPixel (120, 59, สีขาว); display.drawPixel(97, 20, สีขาว); display.drawPixel(35, 36, สีขาว); display.drawPixel(72, 19, สีขาว); display.drawPixel(90, 7, สีขาว); display.drawPixel(11, 29, สีขาว); display.drawPixel(57, 42, สีขาว); display.drawPixel(69, 34, สีขาว); display.drawPixel(108, 12, สีขาว);

ขั้นตอนที่ 10: การวาดภาพ

การวาดภาพนั้นแตกต่างและซับซ้อนเล็กน้อย เนื่องจากโมดูลการแสดงผลเป็นแบบสีเดียว เราต้องแปลงรูปภาพของเราให้อยู่ในรูปแบบที่เรียกว่าบิตแมปสีโมโน (เรียกอีกอย่างว่าขาวดำ) ก่อน ในรูปแบบดังกล่าว แต่ละพิกเซลของรูปภาพจะแสดงด้วย 0 หรือ 1 โดยที่ 1 หมายถึงการมีอยู่ของสี และ 0s หมายถึงพื้นที่ว่าง คุณสามารถดูตัวอย่างโลโก้ Arduino ในรูปแบบนี้ได้ที่ด้านบนของส่วนนี้ ฟังก์ชันสำหรับวาดภาพบิตแมปคือ display.drawBitmap(topLeftX, topLeftY, imageData, width, height, color) พารามิเตอร์ imageData คืออาร์เรย์ของตัวเลขในหน่วยไบต์ แต่ละไบต์มี 8 บิต ดังนั้นแต่ละไบต์จึงมีข้อมูล 8 พิกเซลของรูปภาพ โดยการระบุความกว้างและความสูงของรูปภาพ ฟังก์ชัน drawBitmap จะทราบว่าแถวถัดไปของพิกเซลเริ่มต้นจากบิตใด

วิธีแก้ปัญหาที่ฉันเลือกแปลงรูปภาพของฉันเป็นรูปแบบนี้คือ ก่อนอื่นให้ใช้ "ตัวแปลงรูปภาพเป็น ASCII" ออนไลน์ (เช่น https://my.asciiart.club) เพื่อแปลงรูปภาพของฉันเป็นชุดอักขระ ASCII แล้วแทนที่ อักขระที่ใช้สำหรับพื้นที่ว่างโดย 0 และอักขระอื่นๆ ที่มี 1 นั่นคือสิ่งที่คุณจะเห็นด้านล่าง คุณสามารถคิดว่า 0 และ 1 แต่ละตัวเป็นพิกเซลบนจอแสดงผล ดังนั้นขนาดของรูปภาพไม่ควรเกินขนาดที่แสดงของเราซึ่งก็คือ 128x64

หมายเหตุ: การใช้เทคนิค ASCII นี้ไม่ใช่แนวทางที่แนะนำ เนื่องจากอัตราส่วนภาพของอักขระ รูปภาพของคุณจะผิดรูป (อักขระไม่ใช่สี่เหลี่ยมจัตุรัส) ฉันลองใช้เทคนิคนี้เพียงเพราะช่วยให้แปลงรูปภาพเป็นรูปแบบที่ต้องการได้ง่ายขึ้น มิฉะนั้น จะสามารถบรรลุผลลัพธ์ที่ดีที่สุดผ่านการเขียนโปรแกรมบางอย่างหรือใช้แอพพลิเคชั่นยูทิลิตี้บางอย่างที่อยู่นอกเหนือขอบเขตของข้อความนี้โดยสมบูรณ์

00000000000000000000011111111111111111111110000000000000000000000000000000000000011111111111111111111111111111100000000000000000 0000000000000111111111111111111111111111111111111110000000000000 0000000000011111111111111111111111111111111111111111100000000000 0000000001111111111111111111111111111111111111111111111000000000 0000000111111111111111111111111111111111111111111111111110000000 0000011111111111111111111111111111111111111111111111111111100000 0000111111111111111111111111111111111111111111111111111111110000 0001111111111111111111111111111111111111111111111111111111111000 0011111111111111111111111111111111111111111111111111111111111100 0111111111111111000000011111111111111111100000001111111111111110 0111111111110000000000000001111111111000000000000000111111111110 1111111111000000001111000000001111000000001111000000001111111111 1111111110000011111111111100000110000011111111111100000111111111 1111111100000111111111111111000000001111111001111110000011111111 1111111100001111100000011111100000011111100000011111000011111111 1111111100001111100000011111100000011111100000011111000011111111 1111111100000111111111111111000000001111111001111110000011111111 1111111110000011111111111100000110000011111111111100000111111111 1111111111000000001111000000001111000000001111100000001111111111 0111111111110000000000000000111111110000000000000000111111111110 0111111111111111000000001111111111111111000000001111111111111110 0011111111111111111111111111111111111111111111111111111111111100 0001111111111111111111111111111111111111111111111111111111111000 0000111111111111111111111111111111111111111111111111111111110000 0000011111111111111111111111111111111111111111111111111111100000 0000000111111111111111111111111111111111111111111111111110000000 0000000011111111111111111111111111111111111111111111111100000000 0000000000011111111111111111111111111111111111111111100000000000 0000000000000111111111111111111111111111111111111110000000000000 0000000000000000111111111111111111111111111111110000000000000000 0000000000000000000001111111111111111111111000000000000000000000

ตอนนี้เราควรแบ่งแต่ละบรรทัดด้วย 8 แทนไบต์และเก็บไว้ในอาร์เรย์ดังต่อไปนี้:

คงที่ const ถ่านที่ไม่ได้ลงชื่อ PROGMEM arduino_logo ={

B00000000, B00000000, B00000111, B11111111, B11111111, B11100000, B00000000, B0000000000, B00000000, B0000000000, B01111111, B11111111, B11111111, B111111110, B00000000, B00000000, … // ดำเนินต่อไปจนถึงจุดสิ้นสุดของภาพ };

จากนั้นเราสามารถวาดมันบนหน้าจอได้โดยการเรียกฟังก์ชัน drawBitmap

display.drawBitmap (32, 16, arduino_logo, 64, 32, สีขาว);

ขั้นตอนที่ 11: การแก้ไขปัญหา

นี่เป็นการกวดวิชาที่ยาวนาน ดังนั้นจึงมีความเป็นไปได้สูงที่จะมีบางอย่างผิดพลาด นี่คือรายการข้อผิดพลาดทั่วไปที่คุณอาจพบขณะตั้งค่าโมดูลการแสดงผล OLED สำหรับโปรเจ็กต์ของคุณ (บางส่วนเกิดขึ้นกับฉันขณะเตรียมบทช่วยสอนนี้)

ไม่มีอะไรแสดงเลย

สิ่งนี้อาจเกิดขึ้นได้จากหลายสาเหตุ ดังนั้นฉันขอแนะนำให้ตรวจสอบรายการต่อไปนี้ซึ่งอาจเกิดขึ้นในโครงการของคุณ:

ที่อยู่ I2C อาจไม่ถูกต้อง

ตรวจสอบให้แน่ใจว่าคุณได้ตั้งค่าที่อยู่ที่คุณได้รับในโค้ด i2c-scanner ในฟังก์ชัน display.begin() เมื่อตั้งค่าวัตถุที่แสดงของคุณ

SCL และ SDA เชื่อมต่อกันในทางที่ผิด

สิ่งนี้เกิดขึ้นจริงสำหรับฉัน หากคุณกำลังใช้ Arduino Uno คุณต้องตรวจสอบการเชื่อมต่อของคุณอีกครั้งเพื่อให้แน่ใจว่าเชื่อมต่อเหมือนกับของฉัน หากคุณกำลังใช้ Arduino รุ่นอื่น (เช่น Mega, Leonardo ฯลฯ) คุณต้องรู้ว่าพวกเขาอาจตั้งค่า I2C เป็นพินอื่น สามารถตรวจสอบได้ที่เอกสารของห้องสมุด Wire

คุณกำลังวาดบางอย่างออกจากพื้นที่ที่มองเห็นได้

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

ข้อความไม่แสดงเลย

คุณลืมกำหนดสีของข้อความหรือคุณตั้งค่าผิด

คุณต้องเรียก setTextColor ก่อนวาดข้อความ มิฉะนั้น คุณจะไม่มีข้อผิดพลาด แต่คุณจะไม่เห็นสิ่งใดแสดงขึ้น นอกจากนี้ คุณอาจกำหนดสีข้อความเหมือนกับสีพื้นหลัง

คุณกำลังใช้แบบอักษรขนาดใหญ่มาก

หากคุณตั้งค่าขนาดตัวอักษรเป็นค่าที่สูงมาก อาจเป็นไปได้ว่าอักขระจะหลุดออกจากพื้นที่ที่มองเห็นได้ทั้งหมด

มีข้อผิดพลาดในการคอมไพล์เกี่ยวกับขนาดการแสดงผล

สิ่งนี้เกิดขึ้นกับฉันด้วยและฉันคิดว่ามันจะเกิดขึ้นกับพวกคุณส่วนใหญ่ เป็นเพราะค่าคงที่ของขนาดการแสดงผลที่กำหนดไว้ในไฟล์ส่วนหัว Adafruit_SSD1306.h ที่เรารวมไว้บนสคริปต์ของเรา ไฟล์นี้ตั้งอยู่ที่ {your-project-folder}\libraries\Adafruit_SSD1306\Adafruit_SSD1306.h หากคุณเปิดไฟล์นี้ คุณจะสังเกตเห็นว่ามีส่วนความคิดเห็นด้านล่างซึ่งอธิบายว่าคุณต้องยกเลิกการใส่ความคิดเห็นเฉพาะค่าคงที่ที่แสดงขนาดโมดูลการแสดงผล OLED ของคุณ สำหรับโมดูลแสดงผลขนาด 128x64 ควรยกเลิกการใส่เครื่องหมายบรรทัด #define SSD1306_128_64

/*=====================================================================

จอแสดงผล SSD1306 ------------------------------------------------ ---------------------- ไดรเวอร์นี้ใช้ในจอแสดงผลหลายจอ (128x64, 128x32 เป็นต้น) เลือกจอแสดงผลที่เหมาะสมด้านล่างเพื่อสร้างเฟรมบัฟเฟอร์ขนาดที่เหมาะสม ฯลฯ SSD1306_128_64 จอแสดงผล 128x64 พิกเซล SSD1306_128_32 จอแสดงผลขนาด 128x32 พิกเซล SSD1306_96_16 --------------------------- ---------------------------------------------------*/ #define SSD1306_128_64 / / #define SSD1306_128_32 // #define SSD1306_96_16 /*====================================== ===============================*/

ขั้นตอนที่ 12: จะทำอย่างไรต่อไป?

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

สิ่งที่คุณสามารถทำได้ในฐานะจุดเริ่มต้นอาจเป็น:

• อ่านค่าเซ็นเซอร์อุณหภูมิและแสดงบนโมดูล OLED คุณสามารถเพิ่มเซ็นเซอร์ความดันหรือความชื้นและสร้างโครงการสถานีตรวจอากาศที่ทำงานได้อย่างสมบูรณ์
• ลองวาดบางอย่างบนโมดูลแสดงผลโดยใช้โมดูลจอยสติ๊กเป็นอุปกรณ์อินพุต
• ลองวาดแอนิเมชั่นบนจอแสดงผลตามลำดับการวาด/ชะลอการเรียกใช้ฟังก์ชันหรือ Arduino ขัดจังหวะ
• แสดงโลโก้ที่กำหนดเองของคุณเมื่อเริ่มต้นระบบ (แทนโลโก้ Adafruit)

อย่าลืมบอกฉันเกี่ยวกับความคิดเห็น คุณจะทำอย่างไร (หรือทำไปแล้ว) โดยใช้โมดูลแสดงผล OLED