شجرة عيد الميلاد يتحكم فيها موقع الويب (يمكن لأي شخص التحكم فيها): 19 خطوة (بالصور)

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

هل تريد أن تعرف كيف تبدو شجرة عيد الميلاد التي يتحكم فيها موقع ويب؟

إليكم مقطع الفيديو الذي يعرض مشروعي لشجرة عيد الميلاد الخاصة بي. انتهى البث المباشر الآن ، لكنني أنشأت مقطع فيديو ، أسجل ما كان يجري:

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

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

"ماذا لو صنعت أضواء شجرة عيد الميلاد بحيث يمكن لأي شخص التحكم فيها عبر واجهة موقع الويب؟"

(أدخل أسبوعين من الليالي الطوال)

لذلك صنعتها.

شجرة عيد الميلاد مع عشرين RGB LED متصلة بالإنترنت عبر ESP8266 Arduino.

ساعدني صديق لي (شكرًا لك JP) في إنشاء موقع ويب (لأنني لست مبرمجًا بطلاقة للأشياء المتعلقة بالموقع الإلكتروني).

وقد أنشأنا بثًا مباشرًا على مدار الساعة طوال أيام الأسبوع على YouTube لشجرتي حتى تتمكن من رؤية ما تقوم بتشغيله أو إيقاف تشغيله في جميع الأوقات.

يعد هذا المشروع مثاليًا لهذا العام ، نظرًا لأن العديد منا كانوا في وضع الإغلاق ، غير قادرين على مقابلة الأصدقاء والعائلة والتواصل معهم. لماذا لا تتحد عبر شجرة عيد الميلاد:)

في هذا Instructable ، سأشرح بالتفصيل كيف تم إنشاء هذا المشروع.

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

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

ستحتاج إلى مجموعة من 3 مهارات (أو ستتعلمها دون قلق): جزء خادم الويب وجزء Arduino وشجرة عيد الميلاد بالطبع!

المعرفة الموصى بها:

• مهارات الحاسوب والبرمجة الأساسية

• المعرفة الأساسية لينكس المحطة

• المعرفة الأساسية بشبكات الكمبيوتر

• المعرفة الأساسية بالإلكترونيات

• مهارات استخدام Google والقدرات "الخاصة" الأخرى

• يجب أن يعرف كيفية إعداد شجرة عيد الميلاد:)

إذا كان لديك بعض الإحساس بالتكنولوجيا والبرمجة ، فيجب أن تكون قادرًا على تعلم إعداد هذا الشيء وفقًا لهذا Instructable.

الخطوة 2: الأدوات والمكونات

على جانب شجرة الكريسماس ، ستحتاج إلى: • شجرة عيد الميلاد (دوه …)

• لوحة تحكم ميكرو NodeMCU

(يمكنك أيضًا استخدام ESP32 أو لوحات أخرى قادرة على Wi-Fi أو Ethernet)

• شريط RGB LED قابل للتحكم. سيوفر شريط RGB led القابل للتحكم الكثير من Arduino GPIOs (https://www.sparkfun.com/products/11020)

• برنامج NodeMCU (متوفر في هذا الدليل)

ستحتاج من جانب الخادم إلى:

• خادم خاص افتراضي مع IP عام. هنا تحصل على 100 دولار مجانًا على DigitalOcean

• مجال (اختياري) يمكنك التسجيل في أي مؤسسة تسجيل ، على سبيل المثال

• كود مخصص (مرفق مع هذا التعليمات)

الخطوة 3: تكوين الجهاز الظاهري (الكمبيوتر) الجزء 1

دعنا ننتقل مباشرة إلى البرمجة:)

نحتاج إلى خادم يتواصل مع الموقع الإلكتروني و NodeMCU.

تسمح لنا الخوادم الموجودة على DigitalOcean بالحصول على جهاز افتراضي بعنوان IP عام ، مما يعني أنه يمكننا تشغيل الخدمات عليه والوصول إليها في جميع أنحاء العالم.

بمجرد أن تدفع اشتراكًا شهريًا في DigitalOcean (يمكنك استخدام نسخة تجريبية مجانية لمدة 60 يومًا) ، أنشئ مشروعًا وقم بتسميته شجرة عيد الميلاد أو أي شيء تريده.

يمكنك الآن إنشاء جهازك الظاهري (كمبيوتر افتراضي يمكن الوصول إليه عن بُعد) بالنقر فوق "البدء باستخدام تطبيق droplet الصغير" (وهو في الأساس اسم DigitalOcean لجهاز افتراضي).

ستظهر صفحة التكوين ويمكنك البقاء مع افتراضي: صورة Ubuntu والخطة الأساسية وعدم تخزين كتلة (5 دولارات شهريًا)

الخطوة 4: تكوين الجهاز الظاهري (الكمبيوتر) الجزء 2

منطقة مركز البيانات هي المكان الذي سيتم إنشاء خادمك فيه.

اختر الأقرب إليك ومن المستخدمين المحتملين. سيوفر هذا أقل وقت استجابة.

علاوة على ذلك ، في قسم المصادقة ، سيُطلب منك إدخال كلمة مرور للوصول إلى جهازك الظاهري.

في قسم الإنهاء والإنشاء ، احتفظ بقطرة واحدة بشكل افتراضي ، واختر اسم مضيف (شجرة عيد الميلاد مرة أخرى) ، وحدد مشروعك الذي تم إنشاؤه مسبقًا إذا لم يتم تحديده افتراضيًا وانقر فوق إنشاء تطبيق droplet الصغير. هذا سوف يستغرق بضع دقائق. من خلال النقر فوق مشروعك في قسم التنقل على اليسار ، سترى تطبيق Droplet الخاص بك.

الخطوة 5: تكوين الجهاز الظاهري (الكمبيوتر) الجزء 3

من خلال النقر على النقاط الثلاث على يمين القطرة ، يمكنك النقر فوق وحدة التحكم في الوصول ، والتي ستجعلك تصل إلى جهاز الكمبيوتر الافتراضي الخاص بك.

سيتم فتح نافذة متصفح صغيرة جديدة. الآن ، هذه ليست بيئة سطح مكتب ، كما هو الحال في Windows 10 أو Ubuntu مع كمبيوتر واجهة رسومية.

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

إنه ليس مخيفًا كما يبدو:)

الخطوة 6: تكوين الجهاز الظاهري (الكمبيوتر) الجزء 4

لقد نجحت في إنشاء جهازك الظاهري الخاص بك في سحابة DigitalOcean.

في الخطوات التالية ، ستقوم بإعداد خادم ويب يسمى Apache وإعداد صفحة الويب الخاصة بك.

قم بتنزيل عميل Filezilla من هنا https://filezilla-project.org/download.php؟platfo… (أو ابحث عن إصدار 32 بت لنظام التشغيل 32 بت) وقم بتثبيته. إنه عميل FTP (بروتوكول نقل الملفات).

ستتمكن من الوصول إلى الملفات ونقلها من جهازك الظاهري وإليه.

بمجرد التثبيت ، انقر فوق ملف ← مدير الموقع ← موقع جديد وأدخل البيانات مثل الصورة أعلاه.

البروتوكول: SFTP (بروتوكول نقل الملفات الآمن)

المضيف: IP الخاص بخادمك ، ابحث عنه في مشروعك على DigitalOcean.

المستخدم هو الجذر وكلمة المرور هي ما تقوم بتعيينه عند إنشاء تطبيق droplet الصغير.

انقر فوق "موافق" والاتصال بجهازك الظاهري.

سيتم تحذيرك ، مفتاح المضيف غير معروف. اتبع الصورة الثانية.

أنشئ مجلدًا محليًا للمشروع ، واستخرج ملفات المشروع التي ستقوم بتنزيلها هنا.

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

الخطوة 7: تثبيت خادم الويب

قم بتسجيل الدخول إلى وحدة تحكم Droplet الخاصة بك باستخدام جذر اسم المستخدم وكلمة المرور الخاصة بك.

نظرًا لأننا لا نمتلك واجهة رسومية ، فإننا نستخدم أوامر للتحكم في جهازك الظاهري. فيما يلي بعض الأوامر الشائعة التي ستستخدمها على Ubuntu (Linux):

• pwd - طباعة دليلي الحالي

• ls - سرد الملفات والمجلدات في دليلي الحالي

• cd / - انتقل إلى المجلد / (المجلد الذي يتضمن أدلة Linux الرئيسية مثل etc ، bin ، boot ، dev ، root ، home ، var وما إلى ذلك)

بالركض ، أعني ، أدخل الأمر واضغط على Enter.

الآن ، سنقوم بتشغيل apt-get update -y لتحديث النظام.

قم بتشغيل apt install apache2 -y لتثبيت خادم الويب Apache.

يجب أن تكون شاشة الترحيب الخاصة بك في Apache متاحة على https:// virtual-machine-ip من متصفحك.

استبدل عنوان IP الخاص بالجهاز الظاهري بـ IP الخاص بالجهاز الظاهري ، على سبيل المثال 165.12.45.123. يمكنك أيضًا تخطي https:// حيث ستتم إضافته تلقائيًا.

تهاني!

ملحوظة:

إذا كنت تريد الوصول إلى موقع الويب الخاص بك من خلال اسم ، بدلاً من عنوان IP (مثل استخدام https://blinkmytree.live/) ، فانتقل إلى موقع مزود المجال GoDaddy أو ما شابه (namecheap.com إلخ..) واتبع التعليمات هنا:

بعض أسماء النطاقات غير مكلفة للغاية. لم يكلف نطاقي سوى 2 دولار في السنة. بالتأكيد تستحق المال:)

الخطوة 8: قم بتثبيت إطار عمل تطبيق الويب

العودة إلى وحدة التحكم لدينا. لا تخافوا:)

استخدم Filezilla لإنشاء مجلد باسم app within / home ، لذلك سيكون / home / app هو مجلدك

قم بتشغيل cd / home / app للانتقال إلى مجلد التطبيق الداخلي.

قم بتشغيل الأمر apt install npm -y ، لتثبيت مدير الحزم npm. هذا سوف يستغرق بضع دقائق.

قم بتشغيل npm init -y لإنشاء ملف package.json ، والذي سيتتبع / يتذكر بيانات الحزمة الرئيسية حول التطبيق.

تشغيل npm - حفظ أقراص التثبيت السريع لتثبيت وحدات الكور ، السريعة

Cors هو وحدة نمطية لتكوين الوصول عبر المواقع و Express هو إطار تطبيق ويب.

Npm هو مدير حزم استخدمناه وسنستخدم وقت تشغيل JavaScript node.js لبرمجة واجهة برمجة التطبيقات الخاصة بنا (API) ، والتي ستقبل ، جنبًا إلى جنب مع خادم http ، طلبات HTTP لتطبيق الألوان على مصابيح LED ، وتحديد قيمها (الألوان) في الذاكرة ، وتمرير القيم إلى NodeMcu ، عندما تطلب ذلك.

ملاحظة: لا علاقة للعقدة في NodeMcu بالعقدة في node.js. يمكن استبدال NodeMcu بأي لوحة تطوير اردوينو متصلة بالإنترنت أو لوحة تطوير NXP أو رقاقة مخصصة / NXP / Renesas / STM / Atmel PCB. يمكن أيضًا استبدال Node.js بـ. Net framework أو PHP أو أي نظام أساسي آخر. ولكن من أجل البساطة ، نستخدم NodeMCU و Node.js.

الآن ، لنقم بإجراء اختبار ، إذا كان بإمكاننا تشغيل برنامج صغير في node.js

قم بإنشاء ملف باسم index.js باستخدام notepad / notepad ++ أو محرر آخر أو بيئة تطوير متكاملة تستخدمها (Visual Studio Code https://code.visualstudio.com/) في مجلدك المحلي.

ضع هذا الرمز فيه:

var http = يتطلب ('http') ؛

http.createServer (الوظيفة (الطلب ، الدقة) {

res.writeHead (200، {'Content-Type': 'text / simple'}) ؛

res.end ("Hello World!") ؛

}) استمع (8080) ؛

احفظه وانقله إلى مجلد / الصفحة الرئيسية / التطبيق باسم index.js بنقر مزدوج / سحب وإفلات في الملف في FileZilla.

قم بتشغيل node index.js ، واتركه يعمل.

الآن ، يمكننا الوصول إلى صفحتنا على https:// virtual-machine-ip: 8080 من متصفحنا. ستظهر صفحة بيضاء بها نص Hello World.

تهانينا ، لقد قمت للتو بإنشاء خادم ويب في node.js!

الخطوة 9: تحضير البرنامج

انتقل إلى وحدة التحكم وأوقف البرنامج بالضغط على ctrl + C.

استبدل ملف index.js الخاص بك في / home / app / واستبدله بـ index.js في.

يمكنك تنزيل جميع الملفات الخاصة بالموقع من هنا:

drive.google.com/file/d/1oIFdipoJxg6PF5klO…

انسخ كود شجرة الكريسمس من مجلد html إلى الدليل البعيد / var / www / html / باستخدام Filezilla. وسوف يستغرق بعض الوقت. إذا طلب منك ذلك ، فاستبدل index.html بواحد جديد.

ضع IP الخاص بك مرة أخرى في متصفح الويب المفضل لديك.

لقد قمت للتو بإتاحة الواجهة الأمامية لتطبيق الويب الخاص بك على https:// virtual-machine-ip.

الخطوة 10: عدم تحديد الكود الخلفي وجعله يعمل

ملاحظة: رمز النهاية الخاص بك موجود في / home / app

تذكر ، بعد تحرير الكود الخاص بك محليًا ، لا تنسى تحميله على الخادم الخاص بك باستخدام FileZilla ، وإعادة تشغيل تطبيق العقدة (وحدة التحكم: ctrl + c ، السهم لأعلى (يعرض مؤشر عقدة الأمر الأخير index.js) ، أدخل)

لكي يعمل الرمز ، ستحتاج إلى إدخال بعض البيانات أولاً.

أولاً ، ستحتاج إلى تغيير متغير اسم المضيف في index.js إلى المجال الخاص بك أو IP ، (شيء يشبه: 165.13.45.123).

ثانيًا ، سأوجهك عبر الكود لفهمه. تأكد من عدم تخطي التعليقات التي كتبتها في التعليمات البرمجية.

يمكنك أن ترى في ملف index.js أننا نقوم بإنشاء تطبيق باستخدام الوحدة النمطية السريعة. بعد ذلك ، نطبق قواعد CORS عليه ، ونضيف واجهات برمجة التطبيقات (API) ونبدأ خادم http. لن يخدم هذا الخادم صفحة ويب من خلال طلبات GET http ، ولكنه سيخدم الحالات التي يقودها من خلال طلب GET http وتحديث الحالات التي يقودها على طلبات PUT http المستلمة.

تعد واجهات برمجة التطبيقات ممارسة شائعة لتبادل المعلومات بين التطبيقات. الأكثر شيوعًا التي نستخدمها هي REST APIs التي نستخدمها بأنفسنا. هم عديمي الجنسية وليس لديهم اتصال دائم (shorturl.at/aoBC3 ،

تقوم طلبات PUT ببساطة بتحديث الحالات التي يقودها في متغير مصفوفة التطبيق (الذاكرة) ، وترسل طلبات GET ببساطة حالات يقودها إلى العميل.

عادةً ما تكون الإجابة للعميل بترميز JSON ، ولكن لهذه الاستجابة البسيطة لـ 30 حالة LED ، نرسل ببساطة سلسلة من 30 قيمة مفصولة بفاصلة.

الخطوة 11: فهم كود الواجهة الأمامية وجعلها تعمل الجزء 1

ملاحظة: كود الواجهة الخاص بك موجود في / var / www / html

تذكر ، بعد تحرير التعليمات البرمجية الخاصة بك محليًا ، لا تنس تحميلها على الخادم الخاص بك باستخدام FileZilla. على عكس node.js ، يعيد Apache إعادة تشغيل نفسه تلقائيًا ، ولكن سيتعين عليك إعادة تحميل صفحتك في متصفحك. استخدم ctrl + f5 للتحديث ولحذف ذاكرة التخزين المؤقت لصفحتك أيضًا.

لكي يعمل الرمز ، ستحتاج إلى إدخال القليل من البيانات. أولاً ، ستحتاج إلى تغيير متغير url في دالة send_request داخل index.html من blinkmytree.live إلى المجال الخاص بك أو IP ، على سبيل المثال: 165.13.45.123.

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

أردنا هذه الميزات الرئيسية (قد يقول خبراء الأساليب الرشيقة قصص المستخدمين) على الصفحة:

• فيديو مباشر مضمن في الصفحة

• مصابيح LED قابلة للنقر على شجرة عيد الميلاد ، والتي تم التلاعب بها في محرر الصور Gimp (https://www.gimp.org/).

• الاتصال الفعلي مع الخادم ، في انتظار تغيير الحالات التي يقودها.

الخطوة 12: فهم كود الواجهة الأمامية وجعلها تعمل الجزء 2

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

في HTML5 ، أحدث معيار HTML ، يوجد شيء يسمى مخطط الصورة. يسمح لنا بتحديد مناطق في الصورة ، والتي يمكننا تطبيق مستمعي الحركة عليها.

نظرًا لأن لدينا الكثير من المجالات التي يجب تحديدها ، فقد استخدمنا أداة عبر الإنترنت https://www.image-map.net/ لتحديد هذه المناطق ونسخ كود HTML إلى صفحتنا.

بمجرد القيام بذلك ، يمكننا وضع حدث onclick مع وظيفة تستدعيها ومعلمة لرقم LED لكل مجال من هذه المناطق. انظر لقطة الشاشة أعلاه.

الخطوة 13: فهم كود الواجهة الأمامية وجعلها تعمل الجزء 3

داخل نهاية نص HTML ، في منطقة ما ، نضع بعض جافا سكريبت لتحديد الوظائف التي نستدعيها في أحداث onclick. على الصعيد العالمي ، نحدد طلب XMLHttpRequest ، والذي نستخدمه لإرسال طلب PUT

لدينا وظيفتان:

وظيفة set_color (val)

وظيفة send_request (معرف)

لاختبار طلب واجهة برمجة التطبيقات ، أوصي باستخدام أداة برمجية شائعة الاستخدام تسمى Postman https://www.postman.com/. يسمح لنا ببساطة بإرسال طلب API إلى الخادم ، دون مهارات البرمجة. يسمح بالسخرية من الخادم وقبول الطلبات أيضًا.

الخطوة 14: فهم كود الواجهة الأمامية وجعلها تعمل الجزء 4

التطبيق الخاص بك يعمل.

كن على علم ، الأرقام معكوسة ، أي 20 هي 1 و 1 هي 20 ، هذا لأن مصابيح LED على الشجرة تبدأ من الأسفل ، ولكن لتجربة مستخدم أفضل ، وضعنا بداية تقود إلى الأعلى.

ستظل بحاجة إلى إنشاء بث مباشر على YouTube إذا كنت ترغب في ذلك ، واستبدال كود التضمين الخاص بفيديو YouTube بكودك الخاص.

الخطوة 15: كود اردوينو

يقوم ESP8266 بتشغيل رسم تخطيطي أساسي لعميل HTTP تم تعديله بشكل طفيف ، حيث يتلقى البيانات من موقع الويب الخاص بي عبر استدعاء API.

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

github.com/adafruit/Adafruit-WS2801-Librar…

في الرسم الذي أرفقته ، ستحتاج إلى إدخال اسم wi-fi وكلمة المرور وعنوان url لموقع الويب الخاص بك (انظر التعليقات)

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

هذا كل شيء!

تهانينا ، لقد فعلتها!

الخطوة 16: سلسلة RGB LED

اه اه. حان الوقت الآن لأخذ استراحة صغيرة من جميع الترميز:)

نظرًا لأن ESP8266 لا يحتوي على العديد من دبابيس GPIO للتحكم في مصابيح LED بشكل فردي ، فقد استخدمت سلسلة RGB LED القابلة للتحكم:

www.sparkfun.com/products/11020

بهذه الطريقة ، يمكن التحكم في جميع المصابيح الـ 20 RGB (إجمالي 60 مصباحًا) بواسطة دبابيس فقط - "البيانات" و "الساعة" وطاقة 5 فولت مباشرةً من ESP8266.

من السهل توصيل الشريط بـ NodeMcu. 5 فولت إلى فين على NodeMcu (5 فولت من USB) ، سلك أصفر إلى دبوس 12 ، سلك أخضر إلى دبوس 14 ، من الأرض إلى الأرض.

يمكنك ضبط لون RGB الفردي والسطوع. مع بعض خلط الألوان ، يمكنك إنتاج الكثير من الألوان لكل LED.

هناك أيضًا مكتبة رائعة جدًا لجميع أنواع تأثيرات FX الرائعة باستخدام مصابيح LED هذه. جربه إذا كنت تحب:

github.com/r41d/WS2801FX

الخطوة 17: تزيين شجرة عيد الميلاد

اجعلها جميلة وتأكد من أن جميع مصابيح LED مرئية ومنتشرة بشكل جيد فوق الشجرة.

الخطوة 18: اللمسات الأخيرة

عندما تكون الشجرة جاهزة ، التقط صورة جميلة وكرر الخطوة لإنشاء خريطة صورة للمواضع القابلة للنقر (مواضع LED)

هذه هي الطريقة الأكثر سهولة للتفاعل مع مصابيح LED.

إذا كنت لا تريد المبالغة في تعقيد الأشياء ، يمكنك استخدام الأزرار العادية.

يجب أيضًا بدء بث مباشر لشجرتك على YouTube (إذا كنت ترغب في مشاهدة ما يحدث في الوقت الفعلي) وتضمين البث في موقعك.

الخطوة 19: معجب بموقع الويب الخاص بك

أنت رائع إذا وصلت إلى هذا الحد:) قم بدعوة أصدقائك (وأنا بالطبع: P) واجعلهم ينقرون على شجرتك قدر الإمكان:)

ن

كان هذا طويلًا جدًا Instructable ، لمشروع معقد إلى حد ما. لكن الأمر يستحق العناء في النهاية: د

شكرا لك! إذا كنت تريد البقاء على اتصال بشأن ما أعمل عليه:

يمكنك الاشتراك في قناتي على يوتيوب:

www.youtube.com/c/JTMakesIt

يمكنك أيضًا متابعتي على Facebook و Instagram

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

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

www.buymeacoffee.com/JTMakesIt

ولا تنس التصويت لهذا Instructable في مسابقة "Anything Goes":)