شاهد على يوتيوب

مشروع مصفوفة LED RGB ESP32-S3 3 - نص من الهاتف المحمول

المشروع 3 - التحكم في مصفوفة النص من هاتفك (نص HTTP)

في هذا المشروع، تحتوي مصفوفة LED RGB ESP32-S3 على صفحة ويب صغيرة حتى تتمكن من تغيير النص المتحرك، واللون، والاتجاه، والسرعة مباشرة من هاتفك أو جهاز الكمبيوتر. لا تحتاج إلى تطبيق منفصل - فقط متصفح ويب. يجعل هذا الوحدة شاشة نصية صغيرة تعتمد على الواي فاي يمكنك تحديثها في الوقت الحقيقي.

جميع المشاريع الستة في هذه السلسلة مشروحة ومعروضة في فيديو واحد على يوتيوب. الفيديو نفسه مدمج في هذه الصفحة، لذا يمكنك رؤية كيفية ظهور واجهة الويب بالضبط وكيف تحدث تحديثات النصوص على المصفوفة بشكل فوري. يتم تحميل الشيفرة المصدرية الكاملة لهذا المشروع تلقائيًا أسفل المقال، ويمكنك شراء وحدة مصفوفة LED RGB ESP32-S3 من المتاجر التابعة المدرجة تحت قسم الشيفرة.

في هذه المقالة نركز على كيفية عمل منطق الشبكة (الواي فاي المنزلي مقابل نقطة الوصول) وما هي الإعدادات التي يمكنك تغييرها في الكود لتخصيص السلوك.

نظرة عامة على وحدة مصفوفة الصمامات الثنائية المتلألئة RGB ESP32-S3

الأجهزة هي نفسها كما في جميع المشاريع الأخرى في هذه السلسلة: لوحة متحكم دقيق ESP32-S3 مزودة بمصفوفة LED RGB 8×8 مدمجة ومستشعر حركة QMI8658C في الخلف. يتم استخدام منفذ USB-C للطاقة والبرمجة، والأطراف المحيطة بالحواف لا تزال متاحة لمدخلات ومخرجات أخرى.:contentReference[oaicite:0]{index=0}

• ESP32-S3متكاملة دقيقة قادرة على الواي فاي والبلوتوث.
• 8×8 مصفوفة RGB- 64 مصباح LED ملون قابل للعناوين للنصوص والرسوم.
• QMI8658C مقياس التسارع- مستخدمة في مشاريع الميل واللعبة.
• منفذ USBيعمل على تشغيل اللوحة وتحميل الرسومات من Arduino IDE.
• دبابيس مكشوفة- السماح بإضافة مستشعرات أو محركات إضافية إذا لزم الأمر.
• أزرار التمهيد/إعادة الضبط- لرفع البرنامج الثابت وإعادة التشغيل.

للمشروع 3، أهم ميزة هي شبكة الواي فاي في ESP32، التي تمكن اللوحة من العمل كخادم ويب صغير لصفحة التحكم النصية.:contentReference[oaicite:1]{index=1}

المشاريع التي تم تغطيتها في الفيديو (الطوابع الزمنية)

الفيديو الواحد لهذه السلسلة يغطي جميع المشاريع الستة. للرجوع السريع:

• 00:00- مقدمة
• 02:01- تثبيت لوحات ESP32
• 03:32- تثبيت المكتبات
• 05:32- المشروع 1: النقطة المتحركة
• 11:11- المشروع 2: تمرير النص
• ١٢:٥٩-المشروع 3: نص HTTP (هذا المشروع)
• ١٦:٤١- المشروع 4: النقطة المائلة
• ١٨:٥٥- المشروع 5: السهم للأعلى
• ٢٠:٠٢- المشروع 6: لعبة الهدف

تشجع على مشاهدة قسم نص HTTP في الفيديو أثناء العمل مع هذه المقالة. يُظهر الفيديو كيف يتم توليد صفحة الويب بواسطة ESP32 وكيف يتم عكس تغيير النص، واللون، والسرعة فورياً على مصفوفة LED.:contentReference[oaicite:2]{index=2}

تثبيت لوحات ESP32 في بيئة تطوير Arduino

إذا كنت قد أكملت بالفعل المشروعين 1 أو 2، فقد تم إعداد اللوحة ويمكنك تخطي هذا القسم. خلاف ذلك، اتبع هذه الخطوات في بيئة تطوير أردوينو:

1. فتحFile > Preferencesوإضافة عنوان URL الخاص بلوحات ESP32 إلى "عناوين مدير اللوحات الإضافية".
2. اذهب إلىTools > Board > Boards Manager…ابحث عنESP32، وتثبيت حزمة ESP32 الرسمية.
3. اختر اللوحة الصحيحة لمصفوفة RGB ESP32-S3 منTools > Board.
4. قم بتوصيل الوحدة عبر USB واختر منفذ السيريال الصحيح تحتTools > Port.

بدون دعم اللوحة المناسب لـ ESP32 والم port الصحيح، لن يتم رفع برنامج خادم الويب.

تثبيت NeoMatrix والمكتبات المطلوبة

يستخدم هذا المشروع نفس المكتبات مثل مشروع تمرير النص السابق:

• Adafruit NeoMatrix
• Adafruit NeoPixel
• Adafruit GFX Library

التثبيت عبر مدير المكتبة:

1. فتحSketch > Include Library > Manage Libraries….
2. البحث عنAdafruit NeoMatrixوانقرتثبيت.
3. قبول تثبيت التبعياتAdafruit GFXوAdafruit NeoPixel).

بمجرد التثبيت، يجب أن ترى أمثلة NeoMatrix و NeoPixel تحتFile > Examples.

وضعان لشبكة الواي فاي في المشروع 3

أهم مفهوم في هذا المشروع هو أن ESP32 يمكن أن يعمل فينمطان مختلفان:

1. وضع المحطة (STA)يتصل ESP32 بشبكة الواي فاي المنزلية الموجودة لديك.
2. وضع نقطة الوصول (AP)إن ESP32 ينشئ شبكته الخاصة للواي فاي إذا لم يكن الواي فاي المنزلي متاحًا.

تستخدم كلا الوضعين نفس واجهة الويب: صفحة HTML يتم تقديمها من جهاز ESP32 نفسه، حيث يمكنك تغيير النص، اللون، اتجاه التمرير، والسرعة.:contentReference[oaicite:3]{index=3}

الوضع 1 - الاتصال بشبكة الواي فاي المنزلية (وضع المحطة)

في وضع المحطة، ينضم ESP32 إلى شبكة واي فاي المنزلية أو مكتبك. هذا هو الوضع المفضل كلما كان جهاز التوجيه الخاص بك متاحًا لأنه:

• لقد تم توصيل هاتفك وجهاز الكمبيوتر الخاص بك بالفعل بنفس شبكة الواي فاي.
• يمكنك توجيه متصفحك إلى عنوان IP الخاص بـ ESP32 والتحكم في النص من أي جهاز على تلك الشبكة.

في قسم الإعدادات من الرسم التخطيطي، تقدم اسم شبكة الواي فاي (SSID) وكلمة المرور الخاصة بك:

// Home Wi-Fi credentials (Station mode)
const char* WIFI_SSID = "YourHomeWiFi";
const char* WIFI_PASS = "YourHomePassword";

بعد أن يتم تشغيل اللوحة، تحاول الاتصال بـWIFI_SSIDإذا كان التشغيل ناجحًا، يقوم الكود بطباعة عنوان IP المعين على شاشة السيريال، على سبيل المثال:

Connected to WiFi
IP address: 192.168.1.16

للتحكم في النص:

1. تأكد من أن هاتفك أو الكمبيوتر متصل بنفس شبكة الواي فاي (على سبيل المثال،YourHomeWiFi).
2. افتح متصفحاً وأدخل عنوان IP المطبوعة، مثلhttp://192.168.1.16/. :contentReference[oaicite:4]{index=4}
3. ستظهر صفحة التحكم، مما يتيح لك كتابة النص، واختيار اللون، وتحديد الاتجاه، وضبط سرعة التمرير.

الوضع 2 - نقطة وصول مستقلة (وضع نقطة الوصول)

إذا لم يتمكن جهاز ESP32 من الاتصال بشبكة Wi-Fi المنزلية الخاصة بك (كلمة مرور خاطئة، الشبكة غير متاحة، أو أنك تستخدم الوحدة في الخارج)، فإن البرنامج يقوم بالتبديل تلقائيًا إلى وضع نقطة الوصول. في وضع AP، يصبح جهاز ESP32 نفسه نقطة ساخنة لشبكة Wi-Fi باسمه وكلمة المرور الخاصة به.

في هذا المشروع، تم تثبيت إعدادات نقطة الوصول على النحو التالي:

// Access Point (AP) credentials (fallback mode)
const char* AP_SSID = "ESP32";
const char* AP_PASS = "password";

عندما يفشل وضع المحطة، يتحول الوحدة إلى وضع نقطة الوصول ويبدأ في بث شبكة واي فاي تسمىESP32للتحكم في المصفوفة:

1. على هاتفك أو الكمبيوتر الخاص بك، افتح إعدادات الواي فاي واتصل بالشبكةESP32.
2. أدخل كلمة المروركلمة المرور(كما هو معرف في القانون).
3. بمجرد الاتصال، افتح متصفحًا واذهب إلىhttp://192.168.4.1/(عنوان بروتوكول الإنترنت الافتراضي لوضع نقطة الوصول ESP32).
4. تظهر نفس صفحة التحكم، مما يتيح لك تغيير النص واللون والسرعة والاتجاه.

يُتيح هذا السلوك البديل للبرنامج أن يكون مفيدًا في أي مكان: في المنزل، أو في المختبر، أو في بيئة العرض حيث لا يوجد جهاز توجيه متاح.

المشروع 3 - الإعدادات الرئيسية في الكود

تم تحميل مخطط HTTP Text الكامل أسفل هذه المقالة بواسطة الموقع. هنا نوثق فقط أهم خيارات التكوين التي من المحتمل أن تقوم بتحريرها.

إعدادات الواي فاي ونقطة الوصول

في أعلى الرسم التخطيطي ستجد قسم إعدادات الواي فاي. قم بتغيير بيانات اعتماد المحطة (واي فاي المنزل) فقط؛ عادةً ما يتم الاحتفاظ بإعدادات نقطة الوصول كإعدادات افتراضية:

// ---------- Wi-Fi SETTINGS ----------

// Home Wi-Fi (Station mode)
const char* WIFI_SSID = "YourHomeWiFi";      // put your router SSID here
const char* WIFI_PASS = "YourHomePassword";  // put your router password here

// Fallback Access Point (AP mode)
const char* AP_SSID = "ESP32";               // fixed AP name
const char* AP_PASS = "password";            // fixed AP password

سلوك:

• إذاWIFI_SSIDوWIFI_PASSصحيحة والشبكة متاحة → يتصل ESP32 كجهاز واي فاي عادي (وضع المحطة).
• إذا فشل الاتصال بعد انتهاء المهلة → يبدأ ESP32 نقطة الوصول الخاصة به باستخدامAP_SSIDوAP_PASS.

مصفوفة الدبوس، الحجم، والسطوع

تلك الإعدادات هي نفسها كما في المشاريع السابقة:

// Matrix configuration
const int MATRIX_PIN    = 14;   // RGB matrix data pin
const int MATRIX_WIDTH  = 8;
const int MATRIX_HEIGHT = 8;

// Overall display brightness (0–255)
uint8_t matrixBrightness = 40;  // adjust for your environment

احتفظMATRIX_PINفي14لهذا اللوح. يمكنك زيادةmatrixBrightnessإذا كنت بحاجة إلى مزيد من الضوء، فإن القيم الأقل أكثر راحة للمشاهدة عن قرب.

إعدادات النص الافتراضي والتمرير

عندما يبدأ اللوح، يعرض رسالة ابتدائية حتى تفتح صفحة الويب وتكتب رسالة جديدة. يمكنك تغيير النص الافتراضي في الإعدادات:

// Default message shown at startup
String currentText = "Robojax";   // overwrite from web UI later

يتم التحكم في بقية سلوك التمرير من خلال مجموعة من المتغيرات التي يتم تحديثها بواسطة واجهة الويب:

// Scroll delay in milliseconds (lower = faster)
int scrollDelayMs = 50;

// Scroll direction: 0=left, 1=right, 2=up, 3=down
int scrollDirection = 0;   // default: scroll left

ترسل الصفحة الإلكترونية قيمًا جديدة بناءً على خيارات الشريط المتحرك والأزرار. من جانب Arduino، تحتاج فقط إلى معرفة ما يلي:

• تخفيضscrollDelayMsيجعل النص يتحرك بشكل أسرع.
• يزيدscrollDelayMsيجعلها تتحرك ببطء أكبر.
• تغييرscrollDirectionيتبدل بين أوضاع التمرير لليسار أو اليمين أو إلى الأعلى أو إلى الأسفل.

لون النص (يتم التحكم فيه من صفحة الويب)

يتم التحكم في لون النص بواسطة ثلاث قيم تتراوح بين 0-255 (أحمر، أخضر، أزرق). يتم تحديثها كلما اخترت لونًا جديدًا على صفحة الويب:

// Current text color (R, G, B)
uint8_t textRed   = 255;
uint8_t textGreen = 255;
uint8_t textBlue  = 255;

عند اختيار لون في المتصفح والنقر على تطبيق، يقوم ESP32 بتحليل قيم RGB وتحديث هذه المتغيرات الثلاثة؛ يتغير لون النص على المصفوفة على الفور. في الفيديو، يتم توضيح هذا السلوك مع تغييرات لونية متعددة، بما في ذلك أمثلة باللون الأحمر والأخضر والأزرق.:contentReference

ملخص

يقوم المشروع 3 بتحويل مصفوفة مصابيح LED RGB ESP32-S3 الخاصة بك إلى شاشة نصية لاسلكية بالكامل يمكنك التحكم فيها باستخدام أي جهاز يحتوي على متصفح ويب. تم تصميم البرنامج ليكون قويًا:

• تحاول أولاً الاتصال بشبكة الواي فاي المنزلية الخاصة بك باستخدام SSID وكلمة المرور التي قمت بتكوينها.
• إذا فشل ذلك، فإنه يصبح تلقائيًا نقطة وصول بالاسمESP32وكلمة المرورpassword.
• في كلا الوضعين، فتح عنوان IP الصحيح في متصفح يعرض نفس صفحة التحكم للنص واللون والاتجاه والسرعة.

يتوفر كود نص HTTP الكامل أدناه هذه المقالة (يتم تحميله تلقائيًا على الموقع). للحصول على شرح تفصيلي خطوة بخطوة وعرض حي يوضح كيف يتم تحديث النص في الوقت الفعلي، تأكد من مشاهدة قسم المشروع 3 في الفيديو. إذا كنت ترغب في بناء المشروع بنفسك، يمكنك أيضًا شراء وحدة مصفوفة LED RGB ESP32-S3 باستخدام الروابط التابعة المدرجة تحت الكود.

الصور

ESP32 S3 Matrix

ESP32 S3 Matrix pin out

ESP32-S3_RGB_8x8_matrix-3

ESP32 S3 Matrix displaying rainbow heart

ESP32-S3_RGB_8x8_matrix1

ESP32-S3_RGB_8x8_matrix-2

ESP32-S3 RGB Matrix- Mobile Phone Text

ESP32 S3 Matrix

ESP32 S3 Matrix pin out

ESP32-S3_RGB_8x8_matrix-3

ESP32 S3 Matrix displaying rainbow heart

ESP32-S3_RGB_8x8_matrix1

ESP32-S3_RGB_8x8_matrix-2

ESP32-S3 RGB Matrix- Mobile Phone Text