บทนำ ESP32 Lora OLED Display: 8 ขั้นตอน

2025 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2025-01-23 15:12

นี่เป็นอีกหนึ่งวิดีโอเกี่ยวกับบทนำสู่ ESP32 LoRa คราวนี้เราจะพูดถึงการแสดงผลกราฟิกโดยเฉพาะ (ขนาด 128x64 พิกเซล) เราจะใช้ไลบรารี SSD1306 เพื่อแสดงข้อมูลบนจอแสดงผล OLED นี้ และนำเสนอตัวอย่างแอนิเมชั่นโดยใช้อิมเมจ XBM

ขั้นตอนที่ 1: ทรัพยากรที่ใช้

1 Heltec WiFi LoRa 32

โปรโตบอร์ด

ขั้นตอนที่ 2: จอแสดงผล

จอแสดงผลที่ใช้ในบอร์ดพัฒนาคือ OLED 0.96 นิ้ว

มี 128x64 และเป็นขาวดำ

มีการสื่อสาร I2C และเชื่อมต่อกับ ESP32 ผ่าน 3 สาย:

SDA บน GPIO4 (สำหรับข้อมูล)

SCL บน GPIO15 (สำหรับนาฬิกา)

RST บน GPIO16 (สำหรับการรีเซ็ตและเริ่มต้นการแสดงผล)

ขั้นตอนที่ 3: ไลบรารี SSD1306

สามารถพบได้พร้อมกับชุดของไลบรารีที่ Heltec-Aaron-Lee จัดเตรียมไว้ให้

มีฟังก์ชันหลายอย่างสำหรับการเขียนสตริง การวาดเส้น สี่เหลี่ยมผืนผ้า วงกลม และการแสดงภาพ

github.com/Heltec-Aaron-Lee/WiFi_Kit_series

ขั้นตอนที่ 4: ไฟล์แอนิเมชั่นและ XBM

เราจะใช้ฟังก์ชัน drawXbm ของไลบรารีเพื่อแสดงภาพเคลื่อนไหว

รูปแบบภาพ XBM ประกอบด้วยอาร์เรย์ของอักขระที่แต่ละองค์ประกอบแสดงข้อความเป็นชุดของพิกเซลขาวดำ (แต่ละพิกเซล 1 บิต) ผ่านค่าเลขฐานสิบหก สิ่งเหล่านี้เทียบเท่ากับหนึ่งไบต์

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

นอกจากอาร์เรย์แล้ว ยังมีการตั้งค่าสองแบบที่กำหนดขนาดรูปภาพด้วย

ในการสร้างแอนิเมชั่น เราต้องการรูปภาพที่จะสร้างเฟรม

เราสามารถใช้ซอฟต์แวร์แก้ไขภาพใดๆ ก็ได้เพื่อทำงาน ข้อควรระวังเพียงอย่างเดียวที่เราควรทำคือรักษาขนาดให้เข้ากันได้กับจอแสดงผลก่อน และใช้ไฟล์ขาวดำ

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

ภาพต้นฉบับ - 960x707 พิกเซล - รูปแบบ PNG

ขั้นตอนต่อไปคือการทำให้เป็นขาวดำโดยบันทึกเป็นบิตแมปขาวดำ

จากนั้นเราปรับขนาดให้เป็นขนาดที่เข้ากันได้กับจอแสดงผล

ให้ความสนใจเป็นพิเศษกับหน่วยวัด ในกรณีนี้ เราปรับภาพเพื่อให้ครอบคลุมความสูงทั้งหมดของจอแสดงผล (แนวตั้ง = 64 พิกเซล)

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

ตอนนี้ เราต้องแปลงไฟล์ BMP เป็นรูปแบบ XBM

มีตัวเลือกซอฟต์แวร์หลายตัวที่สามารถทำการแปลงนี้ได้ นอกจากนี้เรายังเลือก GIMP เป็นตัวเลือกตัวแก้ไข

ในตัวอย่างของเรา เราใช้ PaintBrush เพื่อสร้างและแก้ไขไฟล์ อย่างไรก็ตาม กระบวนการทั้งหมดนี้สามารถทำได้ใน Gimp (หรือตัวแก้ไขอื่นๆ)

ในการแปลง ขั้นแรกให้เปิดไฟล์

เมื่อเปิดรูปภาพขึ้นมา เราก็สามารถเลือก File => Export as…

ในหน้าต่างส่งออกรูปภาพ เราต้องเปลี่ยนนามสกุลไฟล์ปลายทางสำหรับ XBM Gimp จะรับผิดชอบในการระบุรูปแบบที่ต้องการและนำเสนอตัวเลือกเพิ่มเติม…

เมื่อส่งออก Gimp จะแสดงตัวเลือกอื่นๆ เราสามารถปล่อยให้ค่าดีฟอลต์

หลังจากแปลงไฟล์ทั้งหมดแล้ว เราจะมีไฟล์ XBM สี่ไฟล์ หนึ่งไฟล์สำหรับแต่ละเฟรม

ตอนนี้ ให้คัดลอกไปยังโฟลเดอร์ซอร์สโค้ดแล้วเปลี่ยนชื่อโดยเปลี่ยนนามสกุลเป็น.h

ขั้นตอนที่ 5: ออกจาก XBM Files

เราสามารถเปิดไฟล์ XBM ในโปรแกรมแก้ไขข้อความใด ๆ ซึ่งเราจะเห็นข้อมูลเมทริกซ์รูปภาพและข้อมูลขนาดรูปภาพที่กำหนดไว้แล้ว

ขั้นตอนที่ 6: รหัสที่มา

รหัสที่มา: งบ

เราจะรวมไลบรารีที่จำเป็นรวมถึงไฟล์รูปภาพด้วย เรากำหนดตำแหน่งของภาพและช่วงการเปลี่ยนภาพ นอกจากนี้เรายังชี้หมุด OLED ที่เชื่อมต่อกับ ESP32 สุดท้าย เราสร้างและปรับวัตถุที่แสดง

//รวมเป็นบรรณานุกรมที่จำเป็น#include #include "SSD1306.h" //Incluindo os arquivos de imagem #include "frame1.h" #include "frame2.h" #include "frame3.h" #include "frame4.h" //definições de posição da imagem e intervalo de transição #define posX 21 #define posY 0 #define intervalo 500 // Pinos ทำ OLED estão conctados ao ESP32: I2C //OLED_SDA - GPIO4 //OLED_SCL - GPIO15 //OLED_RST - - GPIO16 #define SDA 4 #define SCL 15 #define RST 16 // O RST พัฒนาซอฟต์แวร์ควบคุมการแสดงผล SSD1306 (0x3c, SDA, SCL, RST); //Cria e ajusta o Objeto display

รหัสที่มา: การตั้งค่า ()

เริ่มต้นการแสดงผลและพลิกหน้าจอในแนวตั้ง การดำเนินการเป็นทางเลือก

การตั้งค่าเป็นโมฆะ () { display.init (); //เริ่มต้นหรือแสดง display.flipScreenVertically(); // inverte verticalmente a tela (opcional) }

รหัสที่มา: วน ()

สิ่งแรกที่ต้องทำในลูปคือการล้างหน้าจอ เราโหลดเฟรม 1 ลงในบัฟเฟอร์โดยใช้ตำแหน่งเริ่มต้น posX และ posY เราแจ้งขนาดของรูปภาพด้วย frame1_width และ frame1_height และชื่อของอาร์เรย์ที่มีบิตของรูปภาพ เราแสดงบัฟเฟอร์บนหน้าจอและรอช่วงเวลาก่อนที่จะแสดงเฟรมถัดไป

วงเป็นโมฆะ () { display.clear (); //limpa tela //carrega para o buffer o frame 1 // ใช้งานเป็น posições iniciais posX e posY // แจ้งข้อมูล o tamanho da imagem com frame1_width e frame1_height // ข้อมูล o nome da matriz que contem os bits da imagem_bit display.drawXbm(posX, posY, frame1_width, frame1_height, frame1_bits); //mostra o บัฟเฟอร์ไม่แสดงผล display.display(); //aguarda um intervalo antes de mostrar o próximo ความล่าช้าของเฟรม (ช่วงเวลา);

เราทำซ้ำขั้นตอนสำหรับเฟรมอื่นทั้งหมด

//ทำซ้ำหรือประมวลผลสำหรับ todos os outros frames display.clear(); display.drawXbm(posX, posY, frame2_width, frame2_height, frame2_bits); display.display(); ล่าช้า(ช่วงเวลา); display.clear(); display.drawXbm(posX, posY, frame3_width, frame3_height, frame3_bits); display.display(); ล่าช้า(ช่วงเวลา); display.clear(); display.drawXbm(posX, posY, frame4_width, frame4_height, frame4_bits); display.display(); ล่าช้า(ช่วงเวลา); }

ขั้นตอนที่ 7: ทำการ UpLoad ของโค้ด

เมื่อเปิด IDE ขึ้น ให้เปิดไฟล์ที่มีซอร์สโค้ดโดยดับเบิลคลิกที่ไฟล์.ino หรือโดยไปที่เมนูไฟล์

เมื่อ Heltec เชื่อมต่อกับ USB ให้เลือกเมนู Tools => Card: "Heltec_WIFI_LoRa_32"

ยังอยู่ในเมนูเครื่องมือ ให้เลือกพอร์ต COM ที่ Heltec เชื่อมต่ออยู่

คลิกปุ่มอัพโหลด…

… และรอข้อสรุป

ขั้นตอนที่ 8: ไฟล์

ดาวน์โหลดไฟล์:

ไฟล์ PDF

ฉันไม่