مقدّمة:

 

هل تريد إضافة القليل من الحيويّة إلى المشاريع الخاصّة بإنترنت الأشياء وشريحة  ESP8266 ؟ أو ربّما تريد إظهار عنوان الـIP  الخاصّ بشريحة ESP8266 دون الحاجة إلى الخرج التسلسليّ، فقد تكون شاشات OLED المذهلة هي الأكثر ملاءمة، حيثُ تتّصف بأنّها خفيفة الوزن للغاية، ورقيقة السّماكة كالورق، ومرنة، وتنتج صورة أكثر سطوعاً ووضوحاً.

نظرة عامّة عن وحدة شاشة الإظهار OLED:

 

تتضمّن الوحدة شاشة OLED صغيرة وأحاديّة اللون، عرضها 128 بكسل، وطولها 64 بكسل، ومقطعها 0.96، وعلى الرّغم من حجمها الصغير، إلّا أنّها تملك تأثير كبير، حيث أنّ هذه الشاشات قابلة للقراءة بشكل واضح جدّاً بسبب التباين العالي، كما يمكن عرض الكثير من الرسوميّات ضمنها.

لا حاجة للإضاءة الخلفيّة بسبب شدّة سطوع الشاشة، ممّا يقلّل الطّاقة المطلوبة لتشغيل شاشة OLED، ولهذا السبب أيضاً تتميّز الشاشة بتباين عالٍ وزاوية مشاهدة عريضة، كما تُظهِر مستويات سوداء كبيرة.

يوضّح شاشة الإظهار OLED.
يوضّح شاشة الإظهار OLED

توجد في قلب الوحدة دارة قيادة أحاديّة الشريحة من النوع CMOS  (SSD1306) تتعامل مع جميع ذواكر الوصول العشوائيّ RAM بحيث لا يحتاج متحكّم ESP8266 إلّا إلى إنجاز القليل من العمل، كما أنّ جهد التشغيل لدارة القيادة (المتحكّم) SSD1306 يتراوح بين 1.65 و3.3 فولت، ويعتبر الجهد 3.3 مثاليّاً للتّعامل مع المتحكّمات الصّغرية مثل ESP8266.

خريطة ذاكرة OLED:

 

للتعامل مع هذه الشاشات من الضروريّ معرفة خريطة الذاكرة لدى شاشات OLED، فبغضّ النظر عن حجمها، فإنّ في دارة القيادة SSD1306 ذاكرة وصول عشوائيّ لعرض البيانات الرسوميّة GDDRAM بسعة 1 كيلو بايت على الشاشة، حيث تخزّن البتّات المراد عرضها. تقسم هذه المساحة من الذاكرة (مساحة الـ 1 كيلو بايت) في ثماني صفحات (من 0 وحتّى 7)، حيث تحتوي كلّ صفحة 128 عمود (من 0 وحتّى 127)، كما يمكن لكلّ عمود أن يخزن 8 بتّات من البيانات (من0 وحتّى 7)، وهذا بالتأكيد يخبرنا أنّنا نملك:

8 x 128 x 8 = 8192 bits = 1024 bytes = 1KB memory

يوضّح الشكل أدناه تقسيم الذاكرة.

يوضّح الذاكرة ومكوّناتها.
يوضّح الذاكرة ومكوّناتها (مصدر الصورة: موقع LastMinuteENGINERS)

يمثّل كلّ بت بكسلاً معيّناً من شاشة OLED، والذي يمكن تشغيله أو إطفاؤه برمجيّاً.

 

توصيل وحدة شاشة الإظهار OLED مع لوحة ESP8266 NodeMCU:

 

انتهينا من الشرح النّظريّ. لنبدأ بشرح التّطبيق العمليّ، وهيا بنا نربط الشّاشة مع المتحكّم، حيث يُعتبر التوصيل بسيطاً للغاية، فنبدأ بتوصيل طرف Vcc على الخرج 3.3 فولت الموجود على NodeMCU، ونصل طرف GND إلى الأرضيّ. بعد ذلك نصل طرف SCL إلى الطرف D1 (طرف المزامنة لبروتوكول I2C المتواجد على NodeMCU)، ونصل طرف SDA إلى الطرف D2 (طرف البيانات لبروتوكول I2C الموجود على NodeMCU)، والشكل التالي يوضّح كيفيّة الربط.

توصيل الشاشة إلى المتحكّم.
توصيل الشاشة إلى المتحكّم (مصدر الصورة: موقع LastMinuteENGINERS)

والآن أنت جاهز لرفع بعض الأكواد البرمجيّة والحصول على الطباعة ظاهرةً على الشاشة.

تثبيت المكتبة لوحدة شاشة OLED:

 

يحتوي المتحكّم SSD1306 الخاصّ بشاشة الإظهار على دارات قيادة مرنة ومعقّدة، ولحسن الحظ وُجِدت مكتبة AdaFruit SSD1306 لإخفاء تعقيدات متحكّم SSD1306، ممّا يمكّن من إصدار أوامر بسيطة للتحكّم بالإظهار والعرض.

لتثبيت المكتبة، انتقل عبر المسار التالي: Sketch > Include Library > Manage Libraries

ثمّ انتظر حتّى يقوم مدير المكتبات Library manager بتنزيل فهرس المكتبات وتحديث القائمة المُثبّتة سابقاً.

يوضّح طريقة تثبيت المكتبة.
يوضّح طريقة تثبيت المكتبة(مصدر الصورة: موقع LastMinuteENGINERS)

ابحث عن adafruit ssd1306، حيث يجب أن تجد عدّة خيارات.

ثم ابحث عن Adafruit SSD1306 من Adafruit.

بعد ذلك اضغط على هذا الخيار واختر التثبيت install.

 يوضّح مدير المكتبات وخيارات الإدخال.
يوضّح مدير المكتبات وخيارات الإدخال (مصدر الصورة: موقع LastMinuteENGINERS)

 

تعتبر مكتبة Adafruit SSD1306 مكتبة خاصّة بالأجهزة (العتاد الصلب)، والتي تتعامل مع توابع lower-level (توابع اللغات البرمجيّة منخفضة المستوى)، وتحتاج هذه المكتبة إلى أن تُقرن بمكتبة AdaFruit GFX لعرض وإظهار الرسوم الأساسيّة، كالنقاط والدوائر والخطوط والمستطيلات… إلخ، لذلك يجب تثبيت هذه المكتبة أيضاً.

يُظهر طريقة اختيار وتثبيت المكتبات.
يُظهر طريقة اختيار وتثبيت المكتبات (مصدر الصورة: موقع LastMinuteENGINERS)

تعديل مكتبة AdaFruit SSD1306:

 

هذه المكتبة غير مُعدّة للتّعامل مع شاشات OLED ذات الحجم 128×64 (وهي الشاشة التي نستخدمها هنا)، لذلك يجب تغيير حجم عرض الشاشة في الملف Adafruit_SSD1306.h حتّى تعمل معنا؛ لأنّه قد تظهر رسالة الخطأ التالية في حال لم نغيّره: #error (“Height incorrect, please fix Adafruit_SSD1306.h!”)، والتي تعني أنّ ارتفاع الشاشة غير صالح يرجى إصلاح الملف Adafruit_SSD1306.h، حيث تظهر هذه الرسالة عند محاولة التحقّق من مثال الرسم في بيئة التطوير البرمجيّة Arduino IDE.

 

يُظهر رسالة الخطأ الخاصة بحجم الشاشة.
يُظهر رسالة الخطأ الخاصة بحجم الشاشة (مصدر الصورة: موقع LastMinuteENGINERS)

ولتغيير ترويسة الملف، افتح موقع sketchbook وبشكل عام نتّبع المسار التالي:

My Documents > Arduino ثم libraries > Adafruit_SSD1306.

يوضّح طريقة تعديل الترويسة.
يوضّح طريقة تعديل الترويسة (مصدر الصورة: موقع LastMinuteENGINERS)

 

افتح ملف Adafruit_SSD1306.h في محرّر نصوص، ثمّ مرِّر لأسفل الملف للعثور على القسم الذي يعرض SSD1306، أو انتقل مباشرةً إلى السطر رقم 73 الذي يوجد عنده التعليق #define SSD1306_128_32، وألغِ التعليق عن #define SSD1306_128_64، على أن يصبح الكود البرمجي كما في الشكل التالي.

طريقة التعديل.
طريقة التعديل (مصدر الصورة: موقع LastMinuteENGINERS)

 

الآن احفظ الملف وأعد تشغيل بيئة التطوير البرمجيّة Arduino IDE.

 

الكود البرمجيّ للـ ESP8266  – عرض نصّ:

 

سننتقل الآن للأمور المثيرة للاهتمام، حيث سيطبع الكود التالي رسالة “Hello World” على الشاشة، كما يتضمّن ذلك ما يلي:

  • إظهار النصّ المعكوس.
  • إظهار الأرقام.
  • إظهار الأرقام مع أساسها (عشريّ – ست عشريّ).
  • إظهار رموز ASCII.
  • تمرير النّصّ أفقيّاً وعموديّاً.
  • تمرير جزء من النّصّ على الشّاشة.

سيعطيك هذا فهماً كاملاً حول كيفيّة استخدام شاشة OLED، كما يمكن أن يعمل كأساس ومصدر لتجارب ومشاريع عمليّة أكثر.

الكود البرمجيّ: هنا

يبدأ الكود البرمجيّ بتضمين أربع مكتبات، وهي: SPI.h و Wire.hو Adafruit_GFX.hوAdafruit_SSD1306.h، وعلى الرغم من أن مكتبة SPI.h غير مطلوبة للشاشة إلّا أنّنا نحتاجها من أجل تجميع البرنامج.

#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

 

نحتاج بعد ذلك إنشاء كائن خاصّ بـ AdaFruit_SSD.h، حيث يأخذ التابع الباني رقم طرف ESP8266 الذي يتّصل بطرف reset الخاصّ بالشاشة معاملا، وبما أنّ شاشة OLED لا تحتوي طرف reset فسنرسل القيمة (-1) للإشارة إلى أنّ الباني لا يُستخدَم أي طرف من أطراف ESP8266 كطرف RESET.

 

Adafruit_SSD1306 display(-1);

نحتاج إلى تهيئة كائن OLED ضمن تابع set up باستخدام تابع ()begin الذي يتطلّب معاملين:

الأوّل هو “SSD1306_SWITCHCAPVCC” لتشغيل دارة “charge-pump” الدّاخليّة (دارة إلكترونيّة تعدّ أحد أنواع محوّلات الجهد المستمرّ – مستمر تستخدم المكثفات لرفع الجهد إلى سويّات أعلى (المصدر:هنا)).

بينما يؤمّن المعامل الثاني عنوان بروتوكول I2C لشاشة OLED، ذلك أنّ عنوان هذا البروتوكول عموماً هو عنوان ثابت لا يمكن تغييره، وهو 0x3C.

سنفرّغ تالياً الذاكرة المؤقتة buffer وذلك قبل طباعة رسالتنا الأولى على الشاشة.

 

// initialize with the I2C addr 0x3C
display.begin(SSD1306_SWITCHCAPVCC, 0x3C);

// Clear the buffer.
display.clearDisplay();

 

إظهار نصّ بسيط (Hello World):

 

 

ايوضّح إظهار النصّ على الشاشة.
يوضّح إظهار النصّ على الشاشة

 

// Display Text
display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,28);
display.println("Hello world!");
display.display();
delay(2000);

نحتاج إلى ضبط حجم الخط لإظهار النصّ على الشاشة، ويُنفّذ ذلك عن طريق استدعاء التابع setTextSize(font-size)، وتمرير حجم الخط كمعامل (بدءاً من 1)، ثمّ يجب ضبط لون الخط عبر استدعاء التابع setTextColor(color)، علماً أنّه يجب تمرير البارامتر WHITE للخلفيّة الداكنة، وتمرير البارامتر BLACK للخلفية الفاتحة.

والآن نحتاج لضبط مكان المؤشّر قبل طباعة النصّ، وذلك من خلال استدعاء التابع setCursor(X,Y)، كما صُمّمت بكسلات الشاشة لتكون بإحداثيّات أفقيّة X وعموديّة Y، حيث تتوضّع النقطة المرجعيّة (0,0) في نظام شبكة الإحداثيّات على الزاوية العليا اليُسرى، حيث تزداد القيم باتجاه اليمين بالنسبة لX ، وباتجاه الأسفل بالنسبة لY.

يمكننا ببساطة استخدام التوابع(” “) print و(” “) println لطباعة الرسالة على الشاشة تماماً مثل ما هو الحال عند طباعة البيانات على نافذة العرض التسلسليّ، لكن تذكّر أنّ تابع (” “)println ينقل المؤشّر إلى سطر جديد.

استدعاء التابع print لا ينقل المحتوى إلى الذاكرة المؤقتة في متحكّم الشاشة بشكل فوريّ، حيث لتتمكّن المكتبة من إجراء عمليّات حسابيّة سريعة على الذاكرة المؤقّتة buffer (buffer هو جزء من الذاكرة تُخزَّن عليه القيم والبيانات بشكل مؤقّت) نستخدم الأمر display لنقل كتلة البيانات من الذاكرة المؤقّتة للشاشة في ESP8266 إلى الذاكرة الداخليّة للمتحكّم SSD1306، وبمجرّد الانتهاء من عمليّة النقل ستظهر البكسلات الموافقة لبيانات الرسالة المطلوبة على الشاشة.

 

إظهار نصّ معكوس الألوان:

يظهر النصّ المعكوس على الشاشة.
يظهر النصّ المعكوس على الشاشة (مصدر الصورة: موقع LastMinuteENGINERS)

// Display Inverted Text
display.clearDisplay();
display.setTextColor(BLACK, WHITE); // 'inverted' text
display.setCursor(0,28);
display.println("Hello world!");
display.display();
delay(2000);

 

نستدعي التّابع setTextColor(FontColor,BackgroundColor) مرّة ثانية لإظهار النصّ معكوس الألوان، وإذا كنت قد انتبهت فإننا مؤخّراً مررنا معاملاً واحداً لهذا التابع، لكنّنا سنمرّر الآن معاملين، وهذا ممكن بسبب خاصيّة التحميل الزائد للتوابع  overloading function(توابع قابلة للتعديل أو قابلة لزيادة عدد البارامترات الممرَّرة)، فهذه التوابع لها القدرة على إنشاء عدّة توابع بنفس الاسم ولكن بمعاملات مختلفة.

وفي حالتنا هنا مرّرنا البارامترات setTextColor(BLACK, WHITE)، والتي ستُظهِر النصّ ملوّناً بالأسود على خلفيّة مُعبّأة بالكامل.

 

تغيير حجم الخط:

يبيّن حجم الخط على الشّاشة.
يبيّن حجم الخط على الشّاشة (مصدر الصورة: موقع LastMinuteENGINERS)

// Changing Font Size
display.clearDisplay();
display.setTextColor(WHITE);
display.setCursor(0,24);
display.setTextSize(2);
display.println("Hello!");
display.display();
delay(2000);

 

سبق لنا واستدعينا التابع setTextSize(font-size) لضبط حجم الخط، حيث مرّرنا الرقم (1) كمعامل. يمكننا أيضاً استخدام هذا التابع لتغيير الخط عبر تمرير أي عدد صحيح موجب، علماً أنّه تُعرَض الأحرف بنسبة 7:10، ممّا يعني أنّ تمرير حجم الخط (1) سيُظهِر النصّ بحجم 7×10 بكسل للمحرف الواحد، كما أنّ تمرير الحجم (2) يعني إظهار النصّ بحجم 14×20 بكسل للمحرف الواحد وهكذا. ومن الجدير بالذكر أنّ مكتبة AdaFruit_GFX مسؤولة عن إظهار الخط وعرضه، حيث يُحدَّد نمط الخط افتراضيّاً على أنّه أُحادي التباعد، ومع ذلك توفّر الإصدارات الحديثة للمكتبة القدرة على استخدام أنماط خطوط بديلة؛ على أن تأتي هذه الخطوط مع المكتبة، بالإضافة لإمكانيّة إضافة خطوط جديدة.

 

إظهار الأرقام:

يوضّح الأرقام على شاشة OLED.
يوضّح الأرقام على شاشة OLED (مصدر الصورة: موقع LastMinuteENGINERS)
// Display Numbers
display.clearDisplay();
display.setTextSize(1);
display.setCursor(0,28);
display.println(123456789);
display.display();
delay(2000);

 

يمكن إظهار الأرقام على شاشة OLED عبر استدعاء تابع ()print أو ()println. نسخة أخرى من هذين التابعين (overloaded) تأخذ معاملاً بحجم 32 بت من الأعداد الصحيحة int الموجبة، لذلك يمكن فقط عرض الأرقام من 0 وحتى 492949967295.

 

تحديد نظام العدّ للأرقام:

يوضّح أساس الأرقام العشريّة والست عشريّة.
يوضّح أساس الأرقام العشريّة والست عشريّة (مصدر الصورة: موقع LastMinuteENGINERS)

// Specifying Base For Numbers
display.clearDisplay();
display.setCursor(0,28);
display.print("0x"); display.print(0xFF, HEX); 
display.print("(HEX) = ");
display.print(0xFF, DEC);
display.println("(DEC)"); 
display.display();
delay(2000);

 

tln() بارامتر ثاني اختياريّ يحدّد نظام العد للرقم المُستخدم، حيث أنّ القيم المتاحة هي BIN (الثنائي أو ذو الأساس 2) وoct (الثماني أو ذو الأساس 8) و DEC (العشريّ أو ذو الأساس 10) وHEX (الست عشريّ أو ذو الأساس 16)، علماً أنّ هذا البارامتر يحدّد عدد المنازل العشريّة المُستخدمة للأرقام ذات الفاصلة العشريّة، مثلاً:

  • تعليمة print(78, BIN) تعطي بالخرج “1001110”
  • تعليمة print(78, OCT) تعطي بالخرج “116”
  • تعليمة print(78, DEC) تعطي بالخرج “78”
  • تعليمة print(78, HEX) تعطي بالخرج “4E”
  • تعليمة println(1.23456, 0) تعطي بالخرج “1”
  • تعليمة println(1.23456, 2) تعطي بالخرج “1.23”
  • تعليمة println(1.23456, 4) تعطي بالخرج “1.2346”

 

إظهار رموز ASCII:

يبيّن رموز ASCII على الشاشة.
يبيّن رموز ASCII على الشاشة (مصدر الصورة: موقع LastMinuteENGINERS)

// Display ASCII Characters
display.clearDisplay();
display.setCursor(0,24);
display.setTextSize(2);
display.write(3);
display.display();
delay(2000);

 

ترسل توابع ()print و()println البيانات إلى الشاشة كنصّ ASCII قابل للقراءة، بينما يرسل تابع ()write البيانات الثنائيّة إلى الشاشة لإظهارها، بالتالي يمكن استخدام هذا التابع لإظهار رموز ASCII، وفي مثالنا سيؤدّي إرسال الرقم 3 إلى إظهار رمز قلب.

 

التمرير على كامل الشاشة:

يوضّح تمرير النصّ على كامل الشاشة.
يوضّح تمرير النصّ على كامل الشاشة (مصدر الصورة: موقع LastMinuteENGINERS)

// Scroll full screen
display.clearDisplay();
display.setCursor(0,0);
display.setTextSize(1);
display.println("Full");
display.println("screen");
display.println("scrolling!");
display.display();
display.startscrollright(0x00, 0x07);
delay(2000);
display.stopscroll();
delay(1000);
display.startscrollleft(0x00, 0x07);
delay(2000);
display.stopscroll();
delay(1000);    
display.startscrolldiagright(0x00, 0x07);
delay(2000);
display.startscrolldiagleft(0x00, 0x07);
delay(2000);
display.stopscroll();

 

مرّر النّص المعروض أفقيّاً عبر استدعاء توابع startscrollright(start page, stop page) وstartscrollleft(start page, stop page)، وقطريّاً عبر استدعاء توابع startscrolldiagright(start page, stop page) و startscrolldiagleft(start page, stop page)، مع العلم أنّ جميع هذه التوابع تقبل معاملين هما صفحة البداية وصفحة النهاية، وللتذكير بشرح للصفحات راجع فقرة خريطة ذاكرة شاشة OLED، والتي تشمل 8 صفحات مُفهرسة من 0 وحتّى 7، حيث يمكن التمرير على كامل الشاشة عن طريق تمرير جميع الصفحات، أي تمرير البارامترات0x00  و0x07، كما نستخدم التابع stopscroll()  لإيقاف تمرير النصّ.

 

تمرير جزء من النصّ:

يوضّح تمرير جزء من النصّ على الشاشة.
يوضّح تمرير جزء من النصّ على الشاشة (مصدر الصورة: موقع LastMinuteENGINERS)

// Scroll part of the screen
display.setCursor(0,0);
display.setTextSize(1);
display.println("Scroll");
display.println("some part");
display.println("of the screen.");
display.display();
display.startscrollright(0x00, 0x00);

 

لا نحتاج في بعض الأحيان لتمرير النصّ بالكامل على الشاشة، ولتنفيذ ذلك يمكننا فقط تمرير رقم صفحة البداية المطلوبة وصفحة النهاية. في مثالنا أعلاه جعلنا كلا المعاملين بقيمة 0x00 لضبط التمرير على الصفحة الأولى فقط.

 

الكود البرمجي لمتحكم ESP8266 – الرسومات الأساسيّة:

 

سنعرض في هذا المثال بعض الرسومات الأساسيّة، حيث يشرح هذا المقطع البرمجيّ بعضاً من توابع الرسم، بما في ذلك المستطيلات والمستطيلات البيضوية والدوائر والمثلثات. لنجرّب تنفيذ المقطع البرمجيّ أولاً ثمّ نشرحه بالتفصيل.

الكود البرمجيّ: هنا

يتماثل معظم الكود البرمجيّ (بما في ذلك المكتبات والتهيئة) مع الكود البرمجيّ المشروح أعلاه باستثناء التعليمات البرمجيّة التالية الخاصّة بالرسم.

رسم المستطيل:

يُظهر مستطيل مُفرّغ على الشاشة.
يُظهر مستطيل مُفرّغ على الشاشة (مصدر الصورة: موقع LastMinuteENGINERS)
يظهر مستطيل مُعبّأ على الشاشة.
يظهر مستطيل مُعبّأ على الشاشة (مصدر الصورة: موقع LastMinuteENGINERS)

display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Rectangle");
display.drawRect(0, 15, 60, 40, WHITE);
display.display();
delay(2000);

display.clearDisplay();  
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Filled Rectangle");
display.fillRect(0, 15, 60, 40, WHITE);
display.display();
delay(2000);

يمكن رسم المستطيل على الشاشة باستخدام تابع drawRect(X-coordinate, Y-coordinate, Width, Height, color)، حيث يرسم هذا التابع في الواقع مستطيلاً مُفرّغاً بحدود عرضها 1 بكسل، كما بالإمكان رسم مستطيل معبّأ باستخدام تابع ()fillRect.

 

رسم مستطيل بيضويّ:

 

مستطيل بيضويّ مُفرّغ.
مستطيل بيضويّ مُفرّغ(مصدر الصورة: موقع LastMinuteENGINERS)
مستطيل بيضويّ مُعبّأ.
مستطيل بيضويّ مُعبّأ(مصدر الصورة: موقع LastMinuteENGINERS)

 

display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Round Rectangle");
display.drawRoundRect(0, 15, 60, 40, 8, WHITE);
display.display();
delay(2000);

display.clearDisplay();  
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Filled Round Rectangl");
display.fillRoundRect(0, 15, 60, 40, 8, WHITE);
display.display();
delay(2000);

يمكن رسم مستطيل بيضوي على الشاشة باستخدام تابع drawRoundRect(X-coordinate, Y-coordinate, Width, Height, color)، حيث يأخذ هذا التابع نفس معاملات التابع السابق باستثناء وجود معامل إضافيّ، وهو نصف قطر زاوية الدوران، فيرسم هذا التابع في الواقع مستطيلاً بيضويّاً بحدود عرضها 1 بكسل، كما بالإمكان رسم مستطيل بيضويّ مُعبّأ باستخدام تابع ()fillRoundRect.

 

رسم الدائرة:

"<yoastmark

"<yoastmark

display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Circle");
display.drawCircle(20, 35, 20, WHITE);
display.display();
delay(2000);

display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Filled Circle");
display.fillCircle(20, 35, 20, WHITE);
display.display();
delay(2000);

 

يمكن رسم دائرة باستخدام تابع drawCircle(X-coordinate of center, Y-coordinate of center, radius, color)، حيث يرسم هذا التابع دائرة مفرّغة بحدود عرضها 1 بكسل، كما يمكن رسم دائرة مُعبّأة باستخدام تابع ()fillCircle.

 

رسم المثلّث:

"<yoastmark
(مصدر الصورة: موقع LastMinuteENGINERS)

 

display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Triangle");
display.drawTriangle(30, 15, 0, 60, 60, 60, WHITE);
display.display();
delay(2000);

display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Filled Triangle");
display.fillTriangle(30, 15, 0, 60, 60, 60, WHITE);
display.display();
delay(2000);

يمكن رسم مثلث على الشاشة باستخدام تابع drawTriangle(x0, y0, x1, y1, x2, y2, color)، حيث يأخذ التابع سبعة معاملات، وهي ثلاث إحداثيّات x  وy من شبكة الإحداثيّات لرؤوس المثلّث والألوان، فتعطي الإحداثيّة (x0,y0) الرأس الأعلى للمثلّث، وتعطي الإحداثيّة (x1,y1) رأس المثلّث الأيسر، وتعطي الإحداثيّة (x2,y2) رأس المثلّث الأيمن، علماً أنّ هذا التابع يرسم مثلّثاً مفرّغاً بحدود عرضها 1 بكسل، ويمكن رسم مثلّث مُعبّأ باستخدام تابع fillTriangle().

 

الكود البرمجيّ لمتحكّم ESP8266 – إظهار الصورة النّقطية:

 

يعرض هذا المثال الأخير كيفيّة رسم الصور النّقطيّة bitmap على شاشة الإظهار OLED، وهي مفيدة لإنشاء الرسوميّات الملفتة للانتباه، كشعار الشّركة أو رسوم متحركة أو مجرّد إنشاء رسومات ممتعة لعرض المعلومات.

انسخ الكود البرمجي التالي والصقه في بيئة التطوير البرمجيّة ثمّ اضغط للتحميل.

الكود البرمجيّ: هنا

يظهر الخرج كما يلي في الصورة

خرج الكود البرمجيّ السابق للصورة النقطيّة.
خرج الكود البرمجيّ السابق للصورة النقطيّة (مصدر الصورة: موقع LastMinuteENGINERS)

نحتاج لاستدعاء تابع drawBitmap(X-coordinate, Y-coordinate, bitmap array, width, height, color)

لإظهار الصورة النقطيّة على الشاشة، والذي يأخذ ستة معاملات، هي: الإحداثية x في الزاوية اليسرى العليا، والإحداثيّة y للزاوية اليسرى العليا، ومصفوفة الصورة النقطيّة أحاديّة اللون، وعرض الصورة بالبكسل، وارتفاعها بالبكسل أيضاً، ولونها.

ففي مثالنا هذا إنّ حجم الصورة النقطيّة هو 128×64، بالتالي إنّ الإحداثيّات مضبوطة لتأخذ قيمة الصفر، بينما العرض والارتفاع مضبوطان بقيم 128 و64.

// Display bitmap
display.drawBitmap(0, 0,  MarilynMonroe, 128, 64, WHITE);
display.display();

ولكن وقبل أن يكون بإمكاننا استدعاء التابع ()drawBitmap نحتاج أوّلاً إلى صورة حتّى نعرضها، وتذكّر أنّ دقّة شاشة OLED هي 128×64 بكسل، بالتالي إنّ الصور الأكبر من هذا الحجم لن تظهر بشكل صحيح، وللحصول على حجم صحيح للصورة يمكننا استخدام برامج الرسم المفضلة، مثل: Inkscape و Photoshopو Paintوضبط حجم اللوحة على 128×64. أخذنا هنا صورة لمارلين مونرو وهي تضحك كمثال، وحوّلنا حجمها إلى 128×64 بكسل باستخدام برنامج الرسام Paint، وحفظناها بصيغة (.bmp).

صورة مارلين الأصليّة.
صورة مارلين الأصليّة (مصدر الصورة: موقع LastMinuteENGINERS)
الصورة المُصغّرة عن الصورة السابقة.
الصورة المُصغّرة عن الصورة السابقة(مصدر الصورة: موقع LastMinuteENGINERS)

حالما تحصل على الصورة النقطيّة يحين الوقت لتحويلها إلى مصفوفة يفهمها متحكّم SSD1306 OLED، وذلك بطريقتين:

 

طريقة عبر الإنترنت Online باستخدام برنامجimage2cpp ، وطريقة ثانية من دون الإنترنتOffline  باستخدام برنامج LCD Assistant.

 

منشئ المصفوفات عبر الإنترنت – image2cpp :

 

يوجد تطبيق مباشر عبر الإنترنت يدعى image2cpp ، والذي بإمكانه تحويل الصورة إلى مصفوفة، ويعدّ هذا التّطبيق أحدث وأكثر فعاليّة من تطبيق LCD Assistant (الذي سنتحدّث عنه تالياً)، حيث يسمح لك بما يلي:

  • تحويل عدّة صور بنفس الوقت.
  • تغيير حجم ملف الصورة تمديدها/جعلها ملائمة/الحجم الأصليّ.
  • ضبط عتبة الإضاءة بين الأبيض والأسود.
  • إعادة توسيط الصورة عموديّاً و/أو أفقيّاً.
  • عكس ألوان الصورة.

تُعتبر هذه الأداة فعّالة جدّاً، حيث يمكنها العمل بحالة عدم وجود إنترنت offline، وببساطة احفظ الصفحة بجهازك الحاسوب وافتحها في متصفحك.

نبدأ بفتح تطبيقimage2cpp  بالمتصفح واختيار أيّة صورة نريدها لتظهر على شاشة OLED.

اختيار الصورة.
اختيار الصورة (مصدر الصورة: موقع LastMinuteENGINERS)

تُملأ الأبعاد الخاصّة بالصورة في خيار حجم اللوحة Canvas size الموجود ضمن إعدادات الصورة، فإن كنت قد اخترت حجم للصورة أكبر من 128×64 فقم بتغييره إلى الحجم الآنف ذكره، ثمّ حدّد خيار القياس المناسب، كما يمكنك استعراض الخرج ورؤيته في قسم المعاينة. إضافةً إلى ذلك يمكن تغيير لون الخلفية أو عكس ألوان الصورة إن كان ذلك ضروريّاً.

أخيراً، قم بتغيير الخيار الأكثر أهمّيّة، وهو خيار عتبة الإضاءة وفقاً لمتطلّباتك، حيث يؤدّي ضبط العتبة إلى جعل البكسلات الموجودة فوق هذا المستوى بيضاء والموجود تحته سوداء، وفي حالتنا هنا ضبطنا العتبة على 171 للحصول على تفاصيل جميلة لمارلين مونرو.

ضبط الصورة.
ضبط الصورة (مصدر الصورة: موقع LastMinuteENGINERS)

تعكس هذه المعاينة الصّغيرة أيّة تغييرات تجريها في الإعدادات، بحيث يمكنك مراقبة الصورة مع تغيير الإعدادات.

يُظهر معاينة الصّورة.
يُظهر معاينة الصّورة (مصدر الصورة: موقع LastMinuteENGINERS)

يمكنك متابعة توليد مصفوفة البيانات حالما تكون راضياً عن النّتيجة، حيث ليس عليك سوى تحديد نمط الخرج للكود كـ Arduino code والنقر على زرّ إنشاء كود، ولزيادة معلوماتك يوجد خيار يدعى وضع الرسم Draw mode، وهو في الواقع يُنشئ صورةً وفقاً لطريقة المسح الضوئيّ للشاشة، فإذا بدت لك الصورة متداخلة بالكامل (مشوّشة) حاول عندها تغيير الوضع (النمط).

 

طريقة ضبط الخرج.
طريقة ضبط الخرج (مصدر الصورة: موقع LastMinuteENGINERS)

هذه هي مصفوفة البايت للصورة النقطيّة المُولَّدة، حيث يمكن استخدام الخرج بشكل مباشر مع مثال الكود البرمجي خاصّتنا. فقط تأكّد من تسميتها بشكل مناسب، بعد ذلك استدعِ المصفوفة ضمن تابع ()drawBitmap.

مصفوفة البايت للصورة.
مصفوفة البايت للصورة (مصدر الصورة: موقع LastMinuteENGINERS)

منشئ المصفوفات في حال عدم وجود الإنترنت – تطبيق LCD Assistant:

 

يوجد تطبيق آخر يُدعى LCD Assistant، والذي يحوّل الصورة النقطيّة إلى مصفوفة بيانات، وهو ليس بكفاءة التطبيق السابق لكنّه يبقى المفضّل لدى الهواة.

لنبدأ حيث نحتاج لتحويل الصورة إلى صورة نقطيّة أحاديّة اللون بحجم 128×64. يمكن استخدام برامج الرسم المفضّلة، مثل: Inkscape و Photoshopو Paintونقوم بذلك تماماً كما فعلنا في برنامج MS Paint. افتح الملف في برنامج MS Paint (أعد الحجم إلى 128×64).

فتح الصورة في برنامج MS Paint.
فتح الصورة في برنامج MS Paint (مصدر الصورة: موقع LastMinuteENGINERS)

الآن احفظ الملف كصورة نقطيّة bitmap، وفي أثناء حفظ الملف اخترSave as type: Monochrome Bitmap(*.bmp;*.dib).، فهذا سيؤدّي لتوليد مصفوفة ثنائيّة البت، والتي لها فقط قيمتان ممكنتان لكلّ بكسل، مثل: الصفر للأسود والواحد للأبيض.

حفظ الصورة.
حفظ الصورة (مصدر الصورة: موقع LastMinuteENGINERS)

يعتبر الجانب السلبيّ الوحيد هنا هو عدم القدرة على ضبط مستوى عتبة الإضاءة (السطوع)، حيث يُعيَّن افتراضيّاً على 50% ولا يمكن تغييره. على أي حال، قم بتنزيل برنامج LCD Assistant وافتح الملف المراد تنفيذه، ثمّ حمّل الصورة النقطيّة من قائمة ملف File.

تحويل الصورة لمصفوفة بايت.
تحويل الصورة لمصفوفة بايت (مصدر الصورة: موقع LastMinuteENGINERS)

لا يوجد الكثير لاستخدامه مع هذه الأداة، لذلك انتقل لقائمة File واضغط على خيار حفظ الخرج save output، ثمّ احفظ الملف كملف نصّيّ، علماً أنّه يوجد خيار يدعى Byte Orientation يُنشِئ صورةً وفقاً لطريقة المسح الضوئيّ للشاشة، لكن إن بدت الصورة مشوّشة بالكامل حاول تغيير الوضع (النمط).

حفظ الخرج في تطبيق LCD.
حفظ الخرج في تطبيق LCD (مصدر الصورة: موقع LastMinuteENGINERS)

هذا كل شيء ما عليك سوى لصق المصفوفة المولَّدة ضمن الكود البرمجيّ.

حفظ الخرج في تطبيق LCD.
حفظ الخرج في تطبيق LCD (مصدر الصورة: موقع LastMinuteENGINERS)

تأكّد فقط من تسميته بشكل مناسب، ثمّ استدعِ المصفوفة ضمن تابع ()drawBitmap.

 


المصدر: هنا

إعداد: سارة خضر، مراجعة: علي العلي، تدقيق لغوي: سلام أحمد، تصميم: علي العلي، تحرير: كرم ديوب.