التحكم في Arduino باستخدام HTML / Javascript بالطريقة السهلة: 8 خطوات

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

يوضح لك هذا البرنامج التعليمي كيفية التحكم في اردوينو من خلال استدعاء ajax مرة أخرى من adafruit Huzzah باستخدام وظائف جافا سكريبت فقط. في الأساس ، يمكنك استخدام جافا سكريبت في صفحة html التي ستتيح لك كتابة واجهات html بسهولة مع وظائف جافا سكريبت البسيطة التي تستخدم رد اتصال أجاكس. للسماح لـ ESP8266 بالتواصل مع اردوينو. لذلك ، يمكن ضبط جميع الدبابيس من وظيفة جافا سكريبت. وبالمثل ، يمكننا أيضًا قراءة القيمة من أي دبوس باستخدام وظيفة جافا سكريبت. آمل أن يساعد هذا في تسهيل التحكم في Arduino من مستند html. اكتشفت أن هناك الكثير من الأشخاص الذين يمكنهم كتابة لغة تأشير النص الفائق. معظمهم لا يريدون عناء محاولة إنشاء تطبيق هاتف خلوي باستخدام java أو xcode أو أي إطار عمل آخر. سيجعل هذا الأمر سهلاً جدًا على الأشخاص لأن كل ما يحتاجون إليه هو استخدام وظيفة جافا سكريبت لتعيين القيم من الدبابيس وقراءتها. على سبيل المثال ، ليس من الأسهل بكثير الكتابة

شغله

من أجل تشغيل زر. الجميل هو أنه لا توجد برمجة أخرى اردوينو متضمنة إلى جانب إعلان pinMode (12 ، INPUT) ؛ في وظيفة الإعداد الخاص بك. طالما تم التصريح عن رقم التعريف الشخصي ، يمكن استخدام جافا سكريبت لأي شيء آخر.

document.onload = {

GetJSON ('A0'، 1 'return_json')

}

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

الخطوة 1: ما سوف تحتاجه

لقد قمت ببناء هذا المشروع للمستخدمين الذين يرغبون في التحكم في اردوينو الخاص بهم باستخدام صفحة html على ESP8266. الهدف من هذا المشروع هو إنشاء طريقة بسيطة لتعيين قيم المسامير على اردوينو باستخدام وظيفة جافا سكريبت. بالنسبة إلى نموذج الاختبار onclick = "SetPin (12 ، 1 ، 0)" سوف يقوم بتعيين Pin 12 على اردوينو الخاص بك على High.

في هذا البرنامج التعليمي ، ستحتاج إلى العناصر التالية من أجل المتابعة بالضبط. ومع ذلك ، أفترض أنه يجب أن يعمل على معظم مجموعات اردوينو و ESP8266. ومع ذلك ، لمتابعة ما لدي هنا بالضبط ، ستحتاج إلى المكونات التالية.

Arduino Uno - يجب أن يعمل مع أي متوافق مع اردوينو يحتوي على سلسلة Rx TxAdafruit Huzzah Breakout Board USB إلى Serial Cable 4 جهاز اختبار التعثر التناظري LED منخفض الطاقة - أي مستشعر تناظري يوفر إخراجًا تناظريًا سوف يقوم بعمل Wire Wifi Router الهاتف الخليوي مع متصفح المحمول Arduino Libraries.

الخطوة 2: تجهيز معرف Arduino

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

يستخدم الرمز عددًا من المكتبات لبدء العمل. أولاً سنركز على إعداد اردوينو لـ ESP8266 أنا أستخدم Adafruit Huzzah في هذا المثال ، لأنني أجد أن منتجات adafruit هي الأكثر موثوقية ولديها أفضل دعم. طالما أنك لا تحاول الحصول على دعم من خادم Adafruit Discord. سيكون لديك حظ أفضل بكثير في الحصول على المساعدة في منتديات الدعم.

على أي حال ، أنا أستخدم المكتبات التالية على ESP8266

ESP8266WiFi WiFiClient ESP8266WebServer ArduinoJSONT هذا ليس برنامجًا تعليميًا حول كيفية تنزيل المكتبات وتثبيتها ، ومع ذلك ، فهذه هي المكتبات المستخدمة في HUZZAH. لذا يرجى البحث عنها وتثبيتها. ستحتاج أيضًا إلى تثبيت تعريفات اللوحة لـ HUZZAH ، لذا إذا انتقلت إلى FILE> التفضيلات في المربع الذي يشير إلى عناوين URL لمدير اللوحات الإضافية ، يرجى إضافة ما يلي: //arduino.esp8266.com/stable/package_esp8266c … إذا كان لديك بالفعل شيء ما في هذا الحقل ، من التأكد من إضافة فاصلة هناك لإضافة عنوان url إضافي للوحة. انقر فوق موافق أن تذهب

Tools> Board> Boards Manager من البحث عن ESP8266 بدلاً من تثبيت ESP8266 بواسطة مجتمع ESP8266.

رائع الآن ، دعنا نتأكد من أن لدينا كل ما نحتاجه لتشغيل كود اردوينو. أحد جوانب اردوينو ، يستخدم اردوينو نفسه مكتبتين فقط لهذا البرنامج التعليمي.

SoftwareSerialArduinoJSON الذي يجب أن يكون لديك بالفعل.

الخطوة 3: تحضير ESP8266

سنقوم الآن بوضع الكود على ESP8266 (Adafruit HUZZAH) وإعداده للاتصال بـ Arduino. قم بفك ضغط رمز HUZZAH وافتح الرسم التخطيطي. في السطرين 11 و 12 ، قم بتغيير ssid وكلمة المرور إلى اتصال WIFI الخاص بك على شبكتك المحلية. ستلاحظ وجود ملفين هما ملف الرسم وملف index.h. ملف index.h هو المكان الذي يتم فيه تخزين html الذي سيتم عرضه في هاتفك.

بعد تعيين SSID وكلمة المرور الصحيحين لشبكة wifi الخاصة بك ، يمكنك تجميع الكود وتحميله على ESP8266. في HUZZAH ، يجب أن تضغط باستمرار على الزر المسمى GPIO0 ثم النقر فوق زر الراحة ، بدلاً من ترك زر GPIO0 لوضع الشريحة في وضع أداة تحميل التشغيل. إذا تم وضع الشريحة بنجاح في وضع أداة تحميل التشغيل ، فسيتم تشغيل ضوء أحمر للإشارة إلى أن الشريحة في وضع محمل التمهيد.

للاتصال بـ ESP8266 ، ستحتاج إلى كبل تسلسلي أو محول USB إلى Serial أو شريحة FDTI. في هذه الحالة ، أستخدم كابل adafruit كما هو مذكور في التعليمات. ومع ذلك ، يمكنك التوصيل بالشريحة بعدة طرق ، باستخدام TTL على دبابيس Tx و Rx. والذي آمل أن يعرف الأشخاص الذين يشاهدون هذا كيفية التوصيل بالشريحة لتحميل الكود عليها. على أي حال ، امض قدمًا وقم بوميض الشريحة بالرمز الموجود في الملف المضغوط المرفق بهذه الخطوة.

الخطوة 4: تحضير Arduino

لتحميل الكود على اردوينو ، قم بتغيير تعريف اللوحة الخاصة بك إلى Arduino / Genuino Uno. ثم قم بفك ضغط الملف المرفق بهذه الخطوة. من تحميله على ardunio. بسيط جدًا حقًا ، لقد تم إنجاز كل العمل الشاق من أجلك بالفعل. لقد مررت بالفعل بتجربة عملية خطأ ، لذا كل ما عليك فعله هو تحميل الكود.

الخطوة 5: توصيل كل شيء معًا

حسنًا ، بالنسبة للأسلاك ، لدي صورة أعلاه لما لدي هنا.

قم بتوصيل Tx على Huzzah إلى Pin 2 على arduino. قم بتوصيل Rx على Huzzah إلى Pin 3 على اردوينو. لقد قمت بإنشاء مقبس تسلسلي آخر على المسامير 2 و 3 على اردوينو لتحرير وحدة التحكم التسلسلية الافتراضية.

قم بتوصيل Pin V + و En بـ 5v من arduino. - يحتوي adafruit Huzzah على منظم جهد مدمج 3.3 فولت ، لذا فإن توصيل هذه المسامير بهذا الشكل قد لا يعمل مع جميع وحدات ESP8266. قد تحتاج إلى توصيل منظم الجهد الخاص بك. أوصي باستخدام الحوزة إذا كنت ترغب فقط في جعل الشيء يعمل بسهولة. قم بتوصيل GND بـ GND الخاص بـ arduino

في المسامير 12 و 11 و 9 و 8 على سلك اردوينو في مصابيح LED الخاصة بك ، استخدمت مصابيح LED منخفضة الطاقة هنا لأن تلك التي تجذب الكثير من التيار قد تستهلك الكثير من الطاقة من أجل الحفاظ على هذه التجربة بسيطة.

مقارنةً بـ A0 التمثيلي Pin 0 على اردوينو ، قمت بتوصيل خط الإخراج الخاص بجهاز اختبار Turpitity. ومع ذلك ، يمكنك توصيل خرج أي جهاز استشعار يمنحك قراءة تمثيلية. هذا كل ما عليك القيام به لتوصيل هذا الأمر.

الخطوة 6: الوصول إلى صفحة الويب

الآن بعد أن أصبح لديك اردوينو سلكيًا وتم تحميل كل شيء على اللوحات الخاصة بك ، يجب أن تكون قادرًا على عرض html على هاتفك المحمول. الآن أريدك أن تتصل بنفس جهاز توجيه wifi الذي قمت بتعيين SSID وكلمة المرور له في الكود الموجود على Huzzah. ثم تحتاج إلى معرفة عنوان IP الذي خصصه جهاز التوجيه لجهازك. عادة ، إذا قمت بتسجيل الدخول إلى تكوين أجهزة التوجيه الخاصة بك ، فيجب أن تكون هناك قائمة بالعميل. يعرض ذلك عناوين IP لجميع الأجهزة المتصلة باتصال Wifi الخاص بك. ومع ذلك ، إذا لم تتمكن من العثور على عنوان IP هذا ، فيمكنك فصله من Arduino وتشغيله باستخدام الكبل التسلسلي مرة أخرى. إذا فتحت وحدة التحكم التسلسلية على الجهاز ، فسيتم طباعة عنوان IP للجهاز في وحدة التحكم التسلسلية في حالة عدم العثور عليه بطريقة أخرى. على أي حال بمجرد اتصالك بنفس شبكة Wifi بهاتفك الخلوي. ثم قم بتوجيه متصفح الويب الخاص بجوالك إلى عنوان IP الخاص بـ Huzzah. الذي ربما يبدو شيئًا مشابهًا لهذا. https://192.168.0.107 أو شيء مشابه جدًا. هناك وضعت في صفحة أساسية تسمح لك بتشغيل وإيقاف 4 المصابيح وكذلك قراءة قيمة المستشعر التناظري.

الخطوة 7: استخدام Javascipt

في الملف المسمى index.h في رسم ESP8266Code ، يجب أن يظهر كعلامة تبويب منفصلة في محرر اردوينو. يمكنك أن ترى المثال الأساسي الذي قدمته هنا. الطريقة التي تعمل بها هي في الأساس مثل هذا.

SetPin (12 ، 1 ، 0) ؛ SetPin ({رقم التعريف الشخصي} ، {القيمة 1 عالية 0 منخفضة} ، {IsAnalog 1 نعم 0 لا})

سيؤدي ذلك إلى ضبط قيمة الرقم الرقمي 12 على قيمة عالية

SetPin (4 ، 0 ، 0) ؛

سيؤدي ذلك إلى ضبط قيمة الرقم 4 الرقمي على قيمة منخفضة

SetPin (A2، 439، 1) سيؤدي هذا إلى تعيين قيمة Analog Pin 2 إلى 439

وبالمثل ، ستعيد الدالة GetJSON القيمة المطلوبة من رقم التعريف الشخصي وتضعها في ملف html مزود بمعرف div المحدد.

GetJSON ('A0'، 1، 'resp_i') GetJSON ({Pin Number}، {IsAnalog 1 Yes 0 No}، {Id Of HTML Element to return result})

سيرسل هذا طلبًا إلى arduino يطلب منه قيمة الدبوس التناظري 0 وإرجاع النتيجة إلى Div مع ID resp_iGetJSON (12، 0، 'mydiv') ؛ سيطلب هذا من اردوينو الحصول على قيمة الرقم الرقمي 0 وإرجاع النتيجة إلى عنصر html مع معرف mydiv

الخطوة 8: الدعم

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

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

شكرا لك على الوقت الذي قضيته في رؤية الكود الخاص بي.

جون أندرسون

شركة فيرمونت لتصميم الإنترنت ذ

www.vermontinternetdesign.com