مقدمة شاشة ESP32 Lora OLED: 8 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:40

هذا مقطع فيديو آخر يتعلق بمقدمة ESP32 LoRa. هذه المرة ، سنتحدث تحديدًا عن عرض رسومي (بحجم 128 × 64 بكسل). سنستخدم مكتبة SSD1306 لعرض المعلومات على شاشة OLED هذه وتقديم مثال للرسوم المتحركة باستخدام صور XBM.

الخطوة 1: الموارد المستخدمة

1 Heltec WiFi LoRa 32

بروتوبورد

الخطوة الثانية: العرض

الشاشة المستخدمة في لوحة التطوير هي OLED مقاس 0.96 بوصة.

حجمه 128 × 64 وهو أحادي اللون.

لديه اتصال 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 بت لكل منهما) ، من خلال قيمة سداسية عشرية. هذه تعادل بايت واحد.

نظرًا لاستخدام أحرف متعددة لتمثيل بايت واحد ، تميل هذه الملفات إلى أن تكون أكبر من تلك الموجودة في التنسيقات المعتمدة حاليًا. الميزة هي أنه يمكن تجميعها مباشرة دون الحاجة إلى معالجة مسبقة.

بالإضافة إلى المصفوفة ، يتم تضمين إعدادين يحددان حجم الصورة.

لبناء الرسوم المتحركة ، نحتاج إلى الصور التي ستشكل الإطارات.

يمكننا استخدام أي برنامج لتحرير الصور لبدء العمل. الاحتياطات الوحيدة التي يجب أن نتخذها هي أولاً الحفاظ على الحجم متوافقًا مع الشاشة واستخدام الملفات أحادية اللون.

لإنشاء الملفات ، يمكننا رسمها أو استيراد الصور. هنا ، قررنا تحرير صورة ملونة باستخدام فرشاة الطلاء ، ورسمنا كل إطار من الإطارات

الصورة الأصلية - 960 × 707 بكسل - تنسيق PNG

الخطوة التالية هي جعلها أحادية اللون عن طريق حفظها كصورة نقطية أحادية اللون.

بعد ذلك ، نقوم بتغيير حجمه إلى حجم متوافق مع الشاشة.

إيلاء اهتمام خاص لوحدات القياس. في هذه الحالة ، قمنا بضبط الصورة بحيث تشغل كامل ارتفاع الشاشة (عمودي = 64 بكسل).

مع الصورة بالحجم الصحيح ، سنقوم بتحريرها لتشكيل الإطارات. هنا ، نقوم بمسح كل قوس من مستويات الإشارة وحفظها كإطارات مقابلة.

الآن ، يتعين علينا تحويل ملفات BMP إلى تنسيق XBM.

هناك العديد من خيارات البرامج التي يمكنها القيام بهذا التحويل. اخترنا أيضًا GIMP كخيار محرر.

في مثالنا ، استخدمنا PaintBrush لإنشاء الملفات وتحريرها. ومع ذلك ، كان من الممكن إجراء كل واحدة من هذه العمليات في Gimp (أو أي محرر آخر).

للتحويل ، نفتح الملف أولاً.

مع فتح الصورة ، يمكننا تحديد ملف => تصدير باسم …

في نافذة تصدير الصورة ، يجب علينا تغيير امتداد الملف الوجهة لـ XBM. سيكون Gimp مسؤولاً عن تحديد التنسيق المطلوب وتقديم المزيد من الخيارات …

عند التصدير ، سيقدم Gimp خيارات أخرى. يمكننا ترك القيم الافتراضية.

بعد تحويل جميع الملفات ، سيكون لدينا أربعة ملفات XBM ، واحد لكل إطار.

لنقم الآن بنسخها إلى مجلد الكود المصدري وإعادة تسميتها عن طريق تغيير امتداداتها إلى.h.

الخطوة 5: الخروج من ملفات XBM

يمكننا فتح ملفات XBM في أي محرر نصوص ، حيث سنرى مصفوفة الصورة ومعلومات حجم الصورة التي تم تحديدها بالفعل.

الخطوة 6: كود المصدر

كود المصدر: البيانات

سنقوم بتضمين المكتبات اللازمة ، وكذلك ملفات الصور. نحدد مواضع الصورة والفاصل الزمني الانتقالي. نشير أيضًا إلى دبابيس OLED المتصلة بـ ESP32. أخيرًا ، نقوم بإنشاء وضبط كائن العرض.

// Incluindo as bibliotecas required # 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 interalo de transição #define posX 21 #define posY 0 #define periodalo 500 // Pinos do 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 deve ser controlado por software SSD1306 display (0x3c، SDA، SCL، RST) ؛ // Cria e ajusta o Objeto display

كود المصدر: إعداد ()

قم بتهيئة العرض وعكس الشاشة رأسيًا. الإجراء اختياري.

إعداد باطل () {display.init () ؛ // inicia o display.flipScreenVertically () ؛ // inverte verticalmente a tela (اختياري)}

كود المصدر: Loop ()

أول شيء تفعله في الحلقة هو مسح الشاشة. نقوم بتحميل الإطار 1 في المخزن المؤقت باستخدام المواضع الأولية لـ posX و posY. نقوم بإبلاغ حجم الصورة باستخدام frame1_width و frame1_height ، واسم المصفوفة التي تحتوي على بتات الصورة. نعرض المخزن المؤقت على الشاشة وننتظر فترة زمنية قبل عرض الإطار التالي.

حلقة باطلة () {display.clear () ، // limpa tela // carrega para o buffer o frame 1 // usando as posições iniciais posX e posY // informa o tamanho da imagem com frame1_width e frame1_height // informa o nome da matriz que contem os bits da imagem، no caso frame1_bits display.drawXbm (posX ، posY ، frame1_width ، frame1_height ، frame1_bits) ؛ // mostra o المخزن المؤقت لا يوجد عرض للعرض. // aguarda um interalo antes de mostrar o próximo تأخر الإطار (الفاصل الزمني) ؛

نكرر العملية لجميع الإطارات الأخرى.

// تكرار العمليات المتعلقة بالمهام المعروضة على الإطارات الخارجية. 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 of Code

مع فتح IDE ، افتح الملف الذي يحتوي على الكود المصدري بالنقر المزدوج فوق ملف.ino ، أو بالانتقال إلى قائمة "ملف".

مع توصيل Heltec بـ USB ، حدد القائمة Tools => Card: "Heltec_WIFI_LoRa_32"

لا يزال في قائمة الأدوات ، حدد منفذ COM حيث يتم توصيل Heltec.

انقر فوق الزر تحميل …

… وانتظر الخاتمة.

الخطوة 8: الملفات

قم بتنزيل الملفات:

بي دي إف

انا لا