التحكم في شاشة LED المكونة من 7 أجزاء باستخدام خادم الويب ESP8266: 8 خطوات (بالصور)

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

يحتوي مشروعي على Nodemcu ESP8266 الذي يتحكم في عرض من 7 مقاطع من خلال خادم http باستخدام نموذج html.

الخطوة 1: حول هذا المشروع

إنه مشروع IOT تم تطويره باستخدام وحدة wifi ESP8266 (NodeMCU). الدافع من المشروع هو إنشاء خادم ويب على الوحدة النمطية يمكنه استضافة العديد من العملاء عبر الشبكة. هنا ، المعرفة الأساسية بلغة html و javaScript ضرورية لفهم مشروعي. بعض الموضوعات المتقدمة التي سأناقشها هنا بخصوص ESP8266 و javaScript هي:

1. تحميل الملفات على SPIFFS الخاص بـ ESP8266 لاستخدام هذه الملفات بشكل أكثر كفاءة في كود اردوينو الخاص بنا.

2. تخزين الويب باستخدام جافا سكريبت

نظام SPIFFS

حتى الآن ، قمنا دائمًا بتضمين HTML لصفحات الويب الخاصة بنا كسلسلة حرفية في مخططنا. هذا يجعل من الصعب للغاية قراءة الكود الخاص بنا ، وسوف تنفد الذاكرة بسرعة إلى حد ما.

SPIFFS هو نظام ملفات خفيف الوزن لوحدات التحكم الدقيقة المزودة بشريحة فلاش SPI. تحتوي شريحة فلاش ESP8266 المدمجة على مساحة كبيرة لصفحات الويب الخاصة بك ، خاصة إذا كان لديك إصدار 1 ميجابايت أو 2 ميجابايت أو 4 ميجابايت. يمكنك فهم كيفية إضافة أدوات في برنامج اردوينو الخاص بك لتحميل الملفات إلى SPIFFS عن طريق الرابط التالي: https://esp8266.github.io/Arduino/versions/2.0.0/d …

في هذا المشروع ، لدي ملفان بتنسيق html وملف جافا سكريبت. يتم تحميل كل هذه الملفات إلى SPIFFS منفصلة عن الرسم التخطيطي بحيث يكون التغيير في هذه الملفات مستقلاً عن المخطط الرئيسي.

يتم استرداد كلا ملفي html بواسطة PreparFile () كما هو موضح أدناه:

ملف تحضير باطل () {

منطقي طيب = SPIFFS.begin () ، إذا (موافق) {File f = SPIFFS.open ("/ index.html"، "r") ؛ ملف f1 = SPIFFS.open ("/ index1.html"، "r")؛ البيانات = f.readString () ، data1 = f1.readString () ، f.close () ؛ f1.close () ؛ } else Serial.println ("لم يتم العثور على مثل هذا الملف.")؛ }

أثناء قراءة ملف جافا سكريبت باستخدام () loadScript كما هو موضح أدناه:

تحميل باطل (مسار السلسلة ، نوع السلسلة) {

if (SPIFFS.exists (path)) {File file = SPIFFS.open (path، "r") ؛ server.streamFile (ملف ، نوع) ؛ }}

التخزين المحلي لتطبيقات الويب

يمكنك فهم كيفية استخدام كائنات وطرق مختلفة للتخزين المحلي في HTML5 باستخدام جافا سكريبت من المقالة التالية: https://diveintohtml5.info/storage.html. سأناقش استخدام التخزين المحلي في مشروعي في قسم العمل.

الخطوة 2: الأجهزة المطلوبة

وحدة واي فاي NodeMCU ESP8266 12E

لوح لحام

سلك العبور

7 عرض منفصل (كاثود مشترك)

1 كيلو أوم المقاوم

كابل Micro-USB (لتوصيل NodeMCU بجهاز الكمبيوتر الخاص بك)

الخطوة 3: الدائرة والتوصيلات

الاتصالات سهلة حقًا. في مخطط الدائرة أعلاه ، يتم توصيل دبابيس nodemcu بالطريقة التالية:

أ D1

ب D2

ج د 3

د D4

ه د 6

و د 7

G D8

حيث A ، B ، C ، D ، E & F هي شرائح عرض 7Segment

. تجاهل عرض DP من 7 مقاطع. لا تقم بتوصيله بالدبوس D5 الخاص بـ ESP

الخطوة 4: العمل

كما ناقشنا سابقًا ، لدينا ملفان html. إحداها هي صفحة جذر html تسمى عند تلقي خادم ESP8266 "/" أي إذا كان URI '/' مطلوبًا ، يجب أن يرد الخادم برمز حالة HTTP يبلغ 200 (موافق) ثم يرسل استجابة بـ "الفهرس". html ".

سيتم إرسال ملف html الثاني عندما يطلب العميل من الصفحة الرئيسية عن طريق إرسال مدخلات في النموذج. بمجرد أن يحصل الخادم على الإدخال POSTED من النموذج ، يقوم بمقارنته بقيمة سلسلة ثابتة وإرسال صفحة html الثانية ردًا.

if (server.arg ("nam") == "0") {server.send (200، "text / html"، data1)؛ SevenSeg (0) ؛ }

نظرًا لأن html للصفحة الثانية لم يتم تحديده في الرسم التخطيطي ، فنحن هنا نشير إلى "data1" التي تقرأ بالفعل أكواد html باستخدام SPIFFS.readString ()

ملف f1 = SPIFFS.open ("/ index1.html"، "r") ؛ data1 = f1.readString () ؛

هنا يتم استدعاء SevenSeg () أيضًا مع وسيط "0" بحيث يمكن استخدامه لعرض "0" عن طريق تبديل مقاطع مختلفة ON و OFF. هنا ، صنعت اسم fuction ذاتيًا ، أي onA () ستعمل على تشغيل الجزء A من 7 شرائح العرض على اللوح ، وبالمثل سيتم إيقاف تشغيله.

لذلك ، في هذه الحالة لعرض "0" ، يتعين علينا تبديل كل المقطع باستثناء G (يتم تجاهل DP لأنه غير متصل بأي دبوس من ESP8266). لذا تبدو وظيفتي كما يلي:

إذا (عدد == 0) {onA () ؛ onB () ؛ onC () ؛ onD () ؛ واحد()؛ onF () ؛ offG () ؛ }

الخطوة 5: كود HTML و JAVASCRIPT

يحتوي الملف index.html على لوحة قماشية بها 7 مقاطع معروضة في وضع إيقاف التشغيل والشكل الموجود تحتها. هذا ما تراه بعد فتحه:

إذا أردنا استخدام صفحة الويب الخاصة بنا بدون ESP8266 ، فسيكون ذلك ممكنًا عن طريق تغيير الرابط في سمة الإجراء في النموذج الخاص بك ، وهذا هو الرابط قيد العمل حاليًا:

هنا يمكنك أن ترى أن الرابط قيد التشغيل هو نفس عنوان IP المخصص لـ nodeMCU بعد الاتصال بأي شبكة wifi (أو نقطة اتصال). تبدو علامة النموذج بعد التعديل كما يلي:

هنا ، أستخدم أداة ويب للمتصفح لتخزين قيمة إدخال المستخدم بحيث يتم تخزين القيمة التي تم إدخالها في index.html في المتصفح محليًا (مثل ملف تعريف الارتباط). يتم جلب هذه القيمة من خلال index1.html ويتم عرض الرقم على الشاشة المكونة من 7 أجزاء على لوحة html. قد تفهم هذا الإجراء باتباع الفيديو:

video_attach

الخطوة 6: الملاحظات الرئيسية

سيعمل هذا المشروع مع nodemcu الخاص بك إذا كنت تهتم بالنقاط التالية:

1. يجب أن يكون الرابط الموجود في سمة الإجراء لملف html الجذر هو "https:// (IP on Serial monitor أو IP المخصص لـ ESP الخاص بك) / Submit".

2. استخدم أحدث إصدار من المتصفح الذي يدعم html5 والعلامات والوظائف الجديدة.

3. سيعمل SPIFFS فقط إذا تم تجميع index.html و index1.html و main.js معًا في مجلد البيانات. يمكنك استنساخ ملف الشفرة من جيثب الخاص بي

الخطوة 7: الكود

هذا هو رابط المستودع لرمز مشروعي. إذا كنت تعمل مع SPIFFS في ESP8266 ، فيمكنك فهم سبب وضع ملفات html و javascript في مجلد البيانات.

رابط مستودع جيثب

الخطوة 8: فيديو تعليمي

إذا كان يساعد ، يرجى الاشتراك