DuvelBot - ESP32-CAM बीयर सर्विंग रोबोट: 4 चरण (चित्रों के साथ)

2024 लेखक: John Day | [email protected]. अंतिम बार संशोधित: 2024-01-30 09:20

दिन भर की कड़ी मेहनत के बाद, सोफे पर अपनी पसंदीदा बीयर की चुस्की लेने के करीब कुछ भी नहीं आता है। मेरे मामले में, वह बेल्जियम गोरा एले "डुवेल" है। हालाँकि, आखिरकार ढहने के बाद हम एक सबसे गंभीर समस्या का सामना कर रहे हैं: माई ड्यूवेल वाला फ्रिज उक्त सोफे से 20 फीट की दूरी पर हटाया जा सकता है।

जबकि मेरी तरफ से कुछ हल्का जोर कभी-कभी किशोर फ्रिज मेहतर को डुवेल के मेरे सप्ताह के भत्ते को बाहर निकालने के लिए ले जा सकता है, वास्तव में इसे अपने लगभग समाप्त पूर्वज तक पहुंचाने का कार्य स्पष्ट रूप से एक कदम बहुत दूर है।

सोल्डरिंग आयरन और कीबोर्ड को तोड़ने का समय…

डुवेलबॉट एक नो-फ्रिल्स एआई-थिंकर ईएसपी32-सीएएम आधारित ड्राइविंग वेबकैम है, जिसे आप अपने स्मार्टफोन, ब्राउज़र या टैबलेट से नियंत्रित कर सकते हैं।

कम अल्कोहल वाले उपयोगों के लिए इस प्लेटफ़ॉर्म को अनुकूलित या विस्तारित करना आसान है (सोचें कि SpouseSpy, NeighbourWatch, KittyCam…)।

मैंने इस रोबोट को मुख्य रूप से संपूर्ण वेब प्रोग्रामिंग और IoT सामग्री के बारे में कुछ सीखने के लिए बनाया था, जिसके बारे में मुझे कुछ भी नहीं पता था। तो इस निर्देश के अंत में एक विस्तृत विवरण है कि यह कैसे काम करता है।

इस निर्देश के कई भाग रैंडम नर्ड ट्यूटोरियल में मिली उत्कृष्ट व्याख्याओं पर आधारित हैं, इसलिए कृपया उन्हें एक यात्रा दें!

आपूर्ति

जिसकी आपको जरूरत है:

भागों की सूची पत्थर में खुदी हुई नहीं है और कई भागों को विभिन्न संस्करणों में और कई अलग-अलग स्थानों से प्राप्त किया जा सकता है। मैंने अली-एक्सप्रेस से सबसे ज्यादा खरीदारी की। जैसे माचेते ने कहा: कामचलाऊ।

हार्डवेयर:

• एआई थिंकर ईएसपी 32-सीएएम मॉड्यूल। यह शायद अन्य ईएसपी 32-सीएएम मॉड्यूल के साथ काम कर सकता है लेकिन मैंने यही इस्तेमाल किया है
• L298N मोटर चालक बोर्ड,
• एक सस्ता 4-पहिया रोबोटिक्स प्लेटफॉर्म,
• हैमंड इलेक्ट्रॉनिक्स 1599KGY जैसी बड़ी सपाट सतह वाला आवास,
• प्रोग्रामिंग के लिए USB-to-3.3V-TTL-कन्वर्टर।
• प्रकाश व्यवस्था के लिए: 3 सफेद एलईडी, BC327 या अन्य सामान्य प्रयोजन ट्रांजिस्टर NPN (Ic = 500mA), 4k7k रोकनेवाला, 3 82Ohm प्रतिरोधक, परफ़बोर्ड, केबल (योजनाबद्ध और चित्र देखें)।
• प्रोग्रामिंग के लिए चालू/बंद टॉगल स्विच और सामान्य रूप से खुला पुशबटन।

वैकल्पिक:

• ESP32-CAM मॉड्यूल के साथ प्रदान किए गए मानक OV2460 कैमरे की तुलना में लंबे समय तक फ्लेक्स वाला फ़िशआई कैमरा,
• उपयुक्त लंबी केबल के साथ वाईफाई एंटीना और इस तरह अल्ट्रा मिनीचर कोक्स कनेक्टर। ESP32-CAM में एक जहाज पर एंटीना है और आवास प्लास्टिक का है, इसलिए एक एंटीना की वास्तव में आवश्यकता नहीं है, हालांकि मुझे लगा कि यह अच्छा लग रहा है, इसलिए…
• शीर्ष कवर डिजाइन के लिए इंकजेट प्रिंट करने योग्य स्टिकर पेपर।

सामान्य हार्डवेयर उपकरण: टांका लगाने वाला लोहा, ड्रिल, स्क्रूड्राइवर, सरौता…

चरण 1: रोबोट प्लेटफॉर्म का निर्माण

योजनाबद्ध:

योजनाबद्ध कुछ खास नहीं है। ESP32-कैम L298N मोटर ड्राइवर बोर्ड के माध्यम से मोटर्स को नियंत्रित करता है, जिसमें दो चैनल होते हैं। बाएँ और दाएँ पक्ष के मोटर्स समानांतर में रखे गए हैं और प्रत्येक पक्ष एक चैनल पर है। मोटर पिन के करीब चार छोटे 10..100nF सिरेमिक कैपेसिटर हमेशा की तरह RF हस्तक्षेप का मुकाबला करने के लिए उचित हैं। इसके अलावा, मोटर बोर्ड की आपूर्ति पर एक बड़ा इलेक्ट्रोलाइटिक कैप (2200…4700uF) जैसा कि योजनाबद्ध में दिखाया गया है, जबकि कड़ाई से जरूरत नहीं है, आपूर्ति वोल्टेज तरंग को थोड़ा सीमित कर सकता है (यदि आप एक डरावनी फिल्म देखना चाहते हैं, तो Vbat की जांच करें) एक आस्टसीलस्कप के साथ जबकि मोटर्स सक्रिय हैं)।

ध्यान दें कि दोनों मोटर चैनल ENABLE पिन ESP32 (IO12) के समान पल्स-चौड़ाई मॉड्यूलेटेड (PWM) पिन द्वारा संचालित होते हैं। ऐसा इसलिए है क्योंकि ESP32-CAM मॉड्यूल में एक टन GPIO नहीं है (मॉड्यूल का योजनाबद्ध संदर्भ के लिए शामिल है)। रोबोट के एल ई डी आईओ 4 द्वारा संचालित होते हैं, जो ऑनबोर्ड फ्लैश एलईडी भी चलाता है, इसलिए बंद आवास में फ्लैश एलईडी को प्रकाश में रोकने के लिए क्यू 1 को हटा दें।

प्रोग्रामिंग बटन, ऑन/ऑफ स्विच, चार्जिंग कनेक्टर और प्रोग्रामिंग कनेक्टर रोबोट के नीचे उपलब्ध हैं। मैं प्रोग्रामिंग कनेक्टर (3.5 मिमी जैक?) के लिए बहुत बेहतर काम कर सकता था, लेकिन बीयर अब और इंतजार नहीं कर सकती थी। साथ ही ओवर-द-एयर-अपडेट (OTA) सेटअप करना अच्छा होगा।

रोबोट को प्रोग्रामिंग मोड में रखने के लिए, प्रोग्रामिंग बटन दबाएं (यह IO0 को कम करता है) और फिर इसे चालू करें।

महत्वपूर्ण: रोबोट की NiMH बैटरियों को चार्ज करने के लिए, एक लैब सप्लाई सेट (अनलोडेड) का उपयोग लगभग 14V और करंट 250mA तक सीमित करें। वोल्टेज बैटरी के वोल्टेज के अनुकूल होगा। अगर रोबोट गर्म महसूस करता है या बैटरी वोल्टेज लगभग 12.5V तक पहुंच जाता है, तो डिस्कनेक्ट करें। यहां एक स्पष्ट सुधार एक उचित बैटरी चार्जर को एकीकृत करना होगा, लेकिन यह इस निर्देश के दायरे से बाहर है।

हार्डवेयर:

कृपया तस्वीरों में नोट भी देखें। आवास 4 M4 बोल्ट और सेल्फ-लॉकिंग नट्स का उपयोग करके रोबोट बेस पर लगाया गया है। दूरी स्पेसर के रूप में उपयोग की जाने वाली रबर टयूबिंग पर ध्यान दें। उम्मीद है, यह डुवेल को कुछ निलंबन भी देता है, अगर सवारी ऊबड़-खाबड़ साबित होती है। ESP32-CAM मॉड्यूल और L298N मोटर बोर्ड को अतिरिक्त छेदों को ड्रिल करने से रोकने के लिए प्लास्टिक स्टिकी फीट (अंग्रेजी में सही नाम के बारे में निश्चित नहीं) का उपयोग करके आवास में लगाया गया है। इसके अलावा ESP32 अपने स्वयं के परफ़ॉर्मर और प्लग करने योग्य पिनहेडर पर लगा होता है। इससे ESP32 को स्वैप करना आसान हो जाता है।

मत भूलो: यदि आप बिल्ट-इन के बजाय बाहरी वाईफाई एंटीना के साथ जा रहे हैं, तो ESP32-CAM बोर्ड के नीचे एंटीना-चयन जम्पर को भी मिलाएं।

DuvelBot.svg फ़ाइल में शीर्ष लोगो को इंकजेट स्टिकर पेपर पर प्रिंट करें (या अपना खुद का डिज़ाइन करें), और आप जाने के लिए तैयार हैं!

चरण 2: रोबोट को प्रोग्राम करें

रोबोट को बंद करने से पहले प्रोग्राम करना उचित है, यह सुनिश्चित करने के लिए कि सब कुछ काम करता है और कोई जादू का धुआं नहीं दिखाई देता है।

आपको निम्नलिखित सॉफ्टवेयर टूल्स की आवश्यकता है:

• अरुडिनो आईडीई,
• ESP32 लाइब्रेरी, SPIFFS (सीरियल पेरिफेरल फ्लैश फाइल सिस्टम), ESPAsync वेबसर्वर लाइब्रेरी।

उत्तरार्द्ध को "आपकी फाइलों को व्यवस्थित करना" अनुभाग तक और इसमें शामिल करके इस randomnerdtutorial का पालन करके स्थापित किया जा सकता है। मैं वास्तव में इसे और बेहतर तरीके से नहीं समझा सकता था।

कोड:

मेरा कोड यहां पाया जा सकता है:

• एक Arduino स्केच DuvelBot.ino,
• एक डेटा सबफ़ोल्डर जो उन फ़ाइलों को रखता है जिन्हें SPIFFS का उपयोग करके ESP फ़्लैश पर अपलोड किया जा रहा है। इस फ़ोल्डर में वेबपेज है जो ईएसपी (index.html) परोसेगा, एक लोगो इमेज जो वेबपेज का हिस्सा है (duvel.png) और एक कैस्केड स्टाइल शीट या सीएसएस फ़ाइल (style.css)।

रोबोट को प्रोग्राम करने के लिए:

• योजनाबद्ध में दिखाए अनुसार USB-TTL कनवर्टर कनेक्ट करें,
• फ़ाइल -> खोलें -> उस फ़ोल्डर में जाएँ जहाँ DuvelBot.ino है।
• स्केच में अपना नेटवर्क क्रेडेंशियल बदलें:

const char* ssid = "yourNetworkSSIDHere";const char* password = "yourPasswordHere";

• टूल्स -> बोर्ड -> "एआई-थिंकर ईएसपी -32 सीएएम" और अपने पीसी के लिए उपयुक्त सीरियल पोर्ट का चयन करें (टूल्स -> पोर्ट -> कुछ / देव / ttyUSB0 या COM4),
• Arduino IDE में सीरियल मॉनिटर खोलें, PROG बटन दबाते समय (जो IO0 को कम खींचता है), रोबोट पर स्विच करें,
• सीरियल मॉनीटर पर जांचें कि ईएसपी 32 डाउनलोड के लिए तैयार है,
• सीरियल मॉनिटर बंद करें (अन्यथा SPIFFS अपलोड विफल हो जाता है),
• टूल्स -> "ESP32 स्केच डेटा अपलोड" और इसके समाप्त होने की प्रतीक्षा करें,
• प्रोग्रामिंग मोड पर लौटने के लिए PROG बटन को बंद करके फिर से चालू करें,
• स्केच को प्रोग्राम करने के लिए "अपलोड" तीर दबाएं और इसके समाप्त होने की प्रतीक्षा करें,
• सीरियल मॉनिटर खोलें और ESP32 को स्विच ऑफ/ऑन करके रीसेट करें,
• एक बार जब यह बूट हो जाता है, तो आईपी पता (192.168.0.121 जैसा कुछ) नोट करें और रोबोट को यूएसबी-टीटीएल कनवर्टर से डिस्कनेक्ट करें,
• इस आईपी पते पर एक ब्राउज़र खोलें। आपको चित्र के अनुसार इंटरफ़ेस देखना चाहिए।
• वैकल्पिक: अपने राउटर में ईएसपी 32 के मैक-एड्रेस को एक निश्चित आईपी पते पर सेट करें (राउटर पर निर्भर करता है कि कैसे करें)।

इतना ही! पढ़ें अगर आप जानना चाहते हैं कि यह कैसे काम करता है …

चरण 3: यह कैसे काम करता है

अब हम दिलचस्प हिस्से पर आते हैं: यह सब एक साथ कैसे काम करता है?

मैं इसे चरण दर चरण समझाने की कोशिश करूंगा लेकिन कृपया ध्यान रखें कि कजनजप्स वेब प्रोग्रामिंग विशेषज्ञ नहीं हैं। वास्तव में, थोड़ा सा वेब प्रोग्रामिंग सीखना डुवेलबॉट के निर्माण का पूरा आधार था। अगर मैं स्पष्ट गलतियाँ करता हूँ, तो कृपया एक टिप्पणी छोड़ें!

ठीक है, ESP32 चालू होने के बाद, हमेशा की तरह सेटअप में यह GPIO को इनिशियलाइज़ करता है, उन्हें मोटर और एलईडी नियंत्रण के लिए PWM टाइमर के साथ जोड़ता है। मोटर नियंत्रण के बारे में अधिक जानकारी के लिए यहां देखें, यह काफी मानक है।

फिर कैमरा कॉन्फ़िगर किया गया है। सुस्त प्रतिक्रिया से बचने के लिए मैंने जानबूझकर संकल्प को काफी कम (वीजीए या 640x480) रखा। ध्यान दें कि AI-Thinker ESP32-CAM बोर्ड में एक सीरियल रैम चिप (PSRAM) है जिसका उपयोग वह बड़े रिज़ॉल्यूशन के कैमरा फ्रेम को स्टोर करने के लिए करता है:

अगर (psramFound ()) {Serial.println ("PSRAM मिला।"); config.frame_size = FRAMESIZE_VGA; config.jpg_quality = 12; config.fb_count = 2; // फ्रेमबफ़र्स की संख्या देखें: https://github.com/espressif/esp32-camera } और { Serial.println ("कोई PSRAM नहीं मिला।"); config.frame_size = FRAMESIZE_QVGA; config.jpg_quality = 12; config.fb_count = 1; }

फिर सीरियल पेरिफेरल फ्लैश फाइल सिस्टम (SPIFFS) को इनिशियलाइज़ किया जाता है:

// SPIFFS को इनिशियलाइज़ करें if(!SPIFFS.begin(true)) { Serial.println ("SPIFFS बढ़ते समय एक त्रुटि हुई!"); वापसी; }

SPIFFS ESP32 पर एक छोटे फाइल सिस्टम की तरह काम करता है। यहां इसका उपयोग तीन फाइलों को संग्रहीत करने के लिए किया जाता है: वेबपेज स्वयं index.html, एक कैस्केड फ़ाइल स्टाइलशीट Style.css, और एक-p.webp

अगला ESP32 आपके राउटर से जुड़ता है (अपलोड करने से पहले अपनी साख सेट करना न भूलें):

// यहां अपने राउटर की साख बदलें char* ssid = "yourNetworkSSIDHere";const char* पासवर्ड = "yourPasswordHere"; … // वाईफाई सीरियल से कनेक्ट करें। प्रिंट ("वाईफाई से कनेक्ट करना"); वाईफाई.बेगिन (एसएसआईडी, पासवर्ड); जबकि (WiFi.status() != WL_CONNECTED) { Serial.print('.'); देरी (500); } // अब राउटर से जुड़ा है: ESP32 में अब आईपी एड्रेस है

वास्तव में कुछ उपयोगी करने के लिए, हम एक एसिंक्रोनस वेबसर्वर शुरू करते हैं:

// पोर्ट 80AsyncWebServer सर्वर (80) पर एक AsyncWebServer ऑब्जेक्ट बनाएं; … सर्वर। शुरू (); // कनेक्शन के लिए सुनना शुरू करें

अब, यदि आप ब्राउज़र के एड्रेस बार में राउटर द्वारा ESP32 को असाइन किया गया IP पता टाइप करते हैं, तो ESP32 को एक अनुरोध प्राप्त होता है। इसका मतलब है कि इसे क्लाइंट (आप, या आपके ब्राउज़र) को कुछ परोस कर जवाब देना चाहिए, उदाहरण के लिए एक वेबपेज।

ESP32 जानता है कि कैसे प्रतिक्रिया देनी है, क्योंकि सेटअप में सर्वर.ऑन () का उपयोग करके सभी संभावित अनुमत अनुरोधों के जवाब पंजीकृत किए गए हैं। उदाहरण के लिए, मुख्य वेबपेज या इंडेक्स (/) को इस तरह से हैंडल किया जाता है:

server.on("/", HTTP_GET, (AsyncWebServerRequest *request){ Serial.println("/ request get!"); request->send(SPIFFS, "/index.html", String(), false, प्रोसेसर);});

इसलिए यदि क्लाइंट कनेक्ट होता है, तो ESP32 SPIFFS फ़ाइल सिस्टम से index.html फ़ाइल भेजकर प्रतिक्रिया करता है। पैरामीटर प्रोसेसर एक फ़ंक्शन का नाम है जो html को प्रीप्रोसेस करता है और किसी विशेष टैग को बदल देता है:

// HTML में प्लेसहोल्डर्स को %DATA%// जैसे वेरिएबल से बदल देता है जिन्हें आप दिखाना चाहते हैं //

डेटा:% डेटा%

स्ट्रिंग प्रोसेसर (कॉन्स्ट स्ट्रिंग और var) {अगर (var == "डेटा") {//Serial.println ("प्रोसेसर में!"); वापसी स्ट्रिंग (ड्यूटीसाइकल नाउ); } वापसी स्ट्रिंग ();}

अब, वेबपेज index.html को ही विच्छेदित करते हैं। सामान्य तौर पर हमेशा तीन भाग होते हैं:

1. एचटीएमएल कोड: कौन से तत्व दिखाए जाने चाहिए (बटन/पाठ/स्लाइडर/छवियां इत्यादि),
2. स्टाइल कोड, या तो एक अलग.css फ़ाइल में या एक … अनुभाग में: तत्वों को कैसा दिखना चाहिए,
3. javascript a…अनुभाग: वेबपेज को कैसे कार्य करना चाहिए।

एक बार index.html ब्राउज़र में लोड हो जाता है (जो जानता है कि यह DOCTYPE लाइन के कारण html है), यह इस लाइन में चलता है:

यह एक सीएसएस स्टाइल शीट के लिए अनुरोध है। इस शीट का स्थान href="…" में दिया गया है। तो आपका ब्राउज़र क्या करता है? ठीक है, यह सर्वर के लिए एक और अनुरोध शुरू करता है, इस बार style.css के लिए। सर्वर इस अनुरोध को कैप्चर करता है, क्योंकि यह पंजीकृत था:

server.on("/style.css", HTTP_GET, (AsyncWebServerRequest *request){ Serial.println("css request get"); request->send(SPIFFS, "/style.css", "text/css) ");});

नीट हुह? संयोग से, आपके सभी ब्राउज़र के लिए यह href="/some/file/on/the/other/side/of/the/moon" हो सकता था। यह उस फाइल को उतनी ही खुशी से लाएगा। मैं स्टाइलशीट के बारे में नहीं बताऊंगा क्योंकि यह सिर्फ दिखावे को नियंत्रित करता है इसलिए यह वास्तव में यहां दिलचस्प नहीं है, लेकिन यदि आप और जानना चाहते हैं, तो इस ट्यूटोरियल को देखें।

डुवेलबॉट लोगो कैसे दिखाई देता है? index.html में हमारे पास है:

जिस पर ESP32 प्रतिक्रिया करता है:

server.on("/duvel", HTTP_GET, (AsyncWebServerRequest *request){ Serial.println("duvel logo request get!"); request->send(SPIFFS, "/duvel.png", "image/png" ");});

..एक और SPIFFS फ़ाइल, इस बार एक पूर्ण छवि, जैसा कि प्रतिक्रिया में "छवि/पीएनजी" द्वारा दर्शाया गया है।

अब हम वास्तव में दिलचस्प भाग पर आते हैं: बटन के लिए कोड। आइए फॉरवर्ड बटन पर ध्यान दें:

आगे

वर्ग = "…" नाम केवल आकार, रंग, आदि को अनुकूलित करने के लिए स्टाइलशीट से जोड़ने के लिए एक नाम है। महत्वपूर्ण भाग हैं onmousedown="toggleCheckbox('forward')" और onmouseup="toggleCheckbox('stop') ". ये बटन की क्रियाओं का गठन करते हैं (ऑनटचस्टार्ट/ऑनटचेंड के लिए समान लेकिन इसके लिए टचस्क्रीन/फोन है)। यहां, बटन क्रिया जावास्क्रिप्ट अनुभाग में एक फ़ंक्शन टॉगलचेकबॉक्स (x) को कॉल करती है:

फ़ंक्शन टॉगलचेकबॉक्स (एक्स) {var xhr = नया XMLHttpRequest (); xhr.open ("प्राप्त करें", "/" + x, सत्य); xhr.send (); // तैयार होने पर भी प्रतिक्रिया के साथ कुछ कर सकता है, लेकिन हम नहीं करते हैं }

तो फॉरवर्ड बटन दबाकर, तुरंत टॉगल चेकबॉक्स ('फॉरवर्ड') कॉल हो रहा है। यह फ़ंक्शन तब "/forward" स्थान का XMLHttpRequest "GET" लॉन्च करता है, जो ठीक उसी तरह कार्य करता है जैसे आपने अपने ब्राउज़र एड्रेस बार में 192.168.0.121/forward टाइप किया होता। एक बार जब यह अनुरोध ESP32 पर आता है, तो इसे इसके द्वारा नियंत्रित किया जाता है:

server.on("/forward", HTTP_GET, (AsyncWebServerRequest *request){ Serial.println("Received/forward"); actionNow = FORWARD; request->send(200, "text/plain", "OK Forward" ।"); });

अब ESP32 बस "ओके फॉरवर्ड" टेक्स्ट के साथ जवाब देता है। नोट टॉगलचेकबॉक्स () इस प्रतिक्रिया के साथ (या प्रतीक्षा करें) कुछ भी नहीं करता है, हालांकि इसे बाद में कैमरा कोड में दिखाया जा सकता है।

इस प्रतिक्रिया के दौरान अपने आप में, प्रोग्राम केवल एक चर actionNow = FORWARD सेट करता है, बटन दबाने की प्रतिक्रिया के रूप में। अब कार्यक्रम के मुख्य लूप में, इस चर की निगरानी मोटर्स के पीडब्लूएम को ऊपर/नीचे करने के लक्ष्य के साथ की जाती है। तर्क यह है: जब तक हमारे पास एक ऐसी क्रिया है जो STOP नहीं है, तब तक उस दिशा में मोटर्स को रैंप करें जब तक कि एक निश्चित संख्या (ड्यूटीसाइकलमैक्स) तक नहीं पहुंच जाती। तब तक उस गति को बनाए रखें, जब तक कि actionNow नहीं बदला है:

शून्य लूप () {वर्तमान मिलिस = मिली (); अगर (करंटमिलिस - पिछलामिलिस> = ड्यूटीसाइकिलस्टेपडेले) {// पिछली बार लूप को निष्पादित करते समय सहेजें पिछलामिलिस = करंटमिलिस; // मेनलूप मोटरों को ऊपर/नीचे करने के लिए जिम्मेदार है अगर (एक्शन नाउ! = पिछला एक्शन) {//रैंप डाउन, फिर स्टॉप, फिर एक्शन बदलें और रैंप अप ड्यूटी साइकिल नाउ = ड्यूटीसाइकल नाउ-ड्यूटीसाइकिलस्टेप; अगर (ड्यूटीसाइकिल नाउ <= 0) {// यदि डीसी नीचे रैंप करने के बाद 0 है, तो नई दिशा पर सेट करें, न्यूनतम ड्यूटीसाइकिल सेटडिर (एक्शन नाउ) से शुरू करें; पिछला क्रिया = क्रिया अब; ड्यूटी साइकिल नाउ = ड्यूटी साइकिल मिन; } } और // एक्शन नाउ == पिछला एक्शन रैंप अप, सिवाय जब दिशा स्टॉप हो {अगर (एक्शन नाउ! = स्टॉप) {ड्यूटीसाइकिल नाउ = ड्यूटीसाइकल नाउ + ड्यूटी साइकिल स्टेप; अगर (ड्यूटीसाइकल नाउ> ड्यूटी साइकिल मैक्स) ड्यूटी साइकिल नाउ = ड्यूटी साइकिल मैक्स; } और ड्यूटी साइकिल नाउ = 0; } LEDcWrite (pwmChannel, ड्यूटीसाइकिल नाउ); // मोटर ड्यूटी साइकिल को समायोजित करें}}

यह केवल पूरी गति से लॉन्च करने और कीमती कीमती डुवेल को फैलाने के बजाय, मोटर्स की गति को धीरे-धीरे बढ़ाता है। इस कोड को टाइमर इंटरप्ट रूटीन में स्थानांतरित करने के लिए एक स्पष्ट सुधार होगा, लेकिन यह वैसे ही काम करता है।

अब अगर हम फॉरवर्ड बटन छोड़ते हैं, तो आपका ब्राउज़र टॉगलचेकबॉक्स ('स्टॉप') को कॉल करता है, जिसके परिणामस्वरूप GET /stop का अनुरोध होता है। ESP32 एक्शन नाउ को STOP पर सेट करता है (और "ओके स्टॉप" के साथ प्रतिक्रिया करता है), जो मोटर्स को स्पिन करने के लिए मेनलूप की शुरुआत करता है।

एलईडी के बारे में क्या? वही तंत्र, लेकिन अब हमारे पास एक स्लाइडर है:

जावास्क्रिप्ट में, स्लाइडर की सेटिंग की निगरानी की जाती है, जैसे कि प्रत्येक परिवर्तन पर "/LED/xxx" प्राप्त करने के लिए एक कॉल होता है, जहां xxx चमक मान है जिसे एलईडी पर सेट किया जाना चाहिए:

वर स्लाइड = document.getElementById ('स्लाइड'), स्लाइडरडिव = document.getElementById ("sliderAmount"); स्लाइड.ऑनचेंज = फ़ंक्शन () {var xhr = नया XMLHttpRequest (); xhr.open("GET", "/LED/" + this.value, true); xhr.send (); स्लाइडरडिव.इनरएचटीएमएल = this.value; }

ध्यान दें कि हमने स्लाइडर ऑब्जेक्ट को स्वयं प्राप्त करने के लिए document.getElementByID('slide') का उपयोग किया था, जिसे घोषित किया गया था और यह मान प्रत्येक परिवर्तन के साथ टेक्स्ट तत्व के लिए आउटपुट है।

स्केच में हैंडलर हैंडलर पंजीकरण में "/LED/*" का उपयोग करके सभी चमक अनुरोधों को पकड़ता है। फिर अंतिम भाग (एक संख्या) को विभाजित किया जाता है और एक इंट में डाला जाता है:

server.on("/LED/*", HTTP_GET, (AsyncWebServerRequest *request){ Serial.println ("एलईडी अनुरोध प्राप्त हुआ!"); setLedBrightness((request->url()).substring(5).toInt ()); अनुरोध-> भेजें (200, "पाठ/सादा", "ठीक एलईडी।"); });

जैसा कि ऊपर बताया गया है, रेडियोबूटन वेरिएबल्स को नियंत्रित करते हैं जो पीडब्लूएम डिफॉल्ट्स को सेट करते हैं, जैसे कि डुवेलबॉट बीयर के साथ आपके पास धीरे-धीरे ड्राइव कर सकता है, सावधान रहें कि उस तरल सोने को न फैलाएं, और कुछ और लाने के लिए रसोई में तेजी से वापस जाएं।

…तो आपके द्वारा पेज को रीफ्रेश किए बिना कैमरा इमेज कैसे अपडेट हो जाती है? इसके लिए हम AJAX (एसिंक्रोनस जावास्क्रिप्ट और एक्सएमएल) नामक तकनीक का उपयोग करते हैं। समस्या यह है कि आम तौर पर क्लाइंट-सर्वर कनेक्शन एक निश्चित प्रक्रिया का पालन करता है: क्लाइंट (ब्राउज़र) अनुरोध करता है, सर्वर (ईएसपी 32) प्रतिक्रिया देता है, केस बंद हो जाता है। किया हुआ। अब कुछ नहीं होता। यदि केवल किसी तरह से हम ईएसपी 32 से नियमित रूप से अपडेट का अनुरोध करने के लिए ब्राउज़र को धोखा दे सकते हैं … और ठीक यही हम जावास्क्रिप्ट के इस टुकड़े के साथ करेंगे:

setInterval(function(){ var xhttp = new XMLHttpRequest(); xhttp.open("GET", "/CAMERA", true); xhttp.responseType = "blob"; xhttp.timeout = 500; xhttp.ontimeout = function(){}; xhttp.onload = function(e){ if (this.readyState == 4 && this.status == 200) {//देखें: https://stackoverflow.com/questions/7650587/use… // https://www.html5rocks.com/en/tutorials/file/xhr2/ var urlCreator = window. URL || window.webkitURL; var imageUrl = urlCreator.createObjectURL(this.response); // ब्लॉब से एक ऑब्जेक्ट बनाएं document.querySelector("#camimage").src = imageUrl; urlCreator.revokeObjectURL(imageurl)}}; xhttp.send(); }, 250);

setInterval पैरामीटर के रूप में एक फ़ंक्शन लेता है और इसे हर बार निष्पादित करता है (यहां प्रति 250ms में एक बार जिसके परिणामस्वरूप 4 फ्रेम/सेकंड होता है)। निष्पादित किया गया फ़ंक्शन पते /CAMERA पर बाइनरी "ब्लॉब" के लिए अनुरोध करता है। इसे ESP32-CAM द्वारा स्केच में (Randomnerdtutorials से) के रूप में नियंत्रित किया जाता है:

server.on("/CAMERA", HTTP_GET, (AsyncWebServerRequest *request){ Serial.println ("कैमरा अनुरोध प्राप्त हुआ!"); camera_fb_t * fb = NULL; //esp_err_t res = ESP_OK; size_t _jpg_buf_len = 0; uint8_t * _jpg_buf = NULL; // एक फ्रेम कैप्चर करें fb = esp_camera_fb_get (); अगर (!fb) {Serial.println ("फ्रेम बफर हासिल नहीं किया जा सका"); वापसी;} if(fb->format != PIXFORMAT_JPEG)/ /पहले से ही इस प्रारूप में config{ bool jpeg_converted = frame2jpg(fb, 80, &_jpg_buf, &_jpg_buf_len); esp_camera_fb_return(fb); fb = NULL; if(!jpeg_converted){Serial.println("JPEG संपीड़न विफल");वापसी से इस प्रारूप में; } } और{ _jpg_buf_len = fb->len; _jpg_buf = fb->buf; } //Serial.println(_jpg_buf_len); // स्वरूपित छवि अनुरोध भेजें->send_P(200, "image/jpg", _jpg_buf, _jpg_buf_len); // सफाई अगर (एफबी) {esp_camera_fb_return (एफबी); एफबी = नल; _jpg_buf = NULL; } और अगर (_jpg_buf) {मुफ़्त (_jpg_buf); _jpg_buf = NULL; }});

महत्वपूर्ण भाग हैं फ्रेम fb = esp_camera_fb_get() इसे एक-j.webp

जावास्क्रिप्ट फ़ंक्शन तब इस छवि के आने की प्रतीक्षा करता है। फिर प्राप्त "ब्लॉब" को एक यूआरएल में बदलने के लिए बस थोड़ा सा काम लगता है जिसे एचटीएमएल पेज में छवि को अपडेट करने के लिए स्रोत के रूप में उपयोग किया जा सकता है।

ओह, हम कर रहे हैं!

चरण 4: विचार और बचा हुआ

मेरे लिए इस परियोजना का लक्ष्य वेब पर हार्डवेयर को इंटरफ़ेस करने के लिए पर्याप्त वेब प्रोग्रामिंग सीखना था। इस परियोजना के कई विस्तार संभव हैं। यहां कुछ विचार हैं:

• 'असली' कैमरा स्ट्रीमिंग को लागू करें जैसा कि यहां और यहां बताया गया है और इसे उसी ईएसपी 32 पर यहां बताए गए दूसरे सर्वर पर ले जाएं, लेकिन दूसरे सीपीयू कोर पर, फिर कैमरेस्ट्रीम को पहले सर्वर द्वारा प्रदान किए गए एचटीएमएल में आयात करें …. इसके परिणामस्वरूप तेजी से कैमरा अपडेट होना चाहिए।
• एक्सेस प्वाइंट (एपी) मोड का उपयोग करें ताकि रोबोट अधिक स्टैंडअलोन हो जैसा कि यहां बताया गया है।
• बैटरी वोल्टेज मापन, गहरी नींद क्षमताओं आदि के साथ विस्तार करें। यह इस समय थोड़ा मुश्किल है क्योंकि एआई-थिंकर ईएसपी 32-सीएएम में कई जीपीआईओ नहीं हैं; uart के माध्यम से विस्तार की आवश्यकता है और उदाहरण के लिए एक गुलाम arduino।
• एक बिल्ली की तलाश करने वाले रोबोट में कनवर्ट करें जो समय-समय पर एक बड़े बटन के पंजा प्रेस पर बिल्ली का इलाज करता है, दिन के दौरान कई अच्छी बिल्ली तस्वीरें स्ट्रीम करता है …

कृपया टिप्पणी करें यदि आपको पसंद आया या कोई प्रश्न है और पढ़ने के लिए धन्यवाद!