क्लाउड से अपना Arduino/ESP कॉन्फिग वेबपेज लोड करें: 7 कदम

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

Arduino/ESP (ESP8266/ESP32) प्रोजेक्ट बनाते समय, आप सब कुछ हार्डकोड कर सकते हैं। लेकिन अक्सर कुछ नहीं होता है और आप अपने IoT- डिवाइस को फिर से अपने IDE से जोड़ देंगे। या आप अभी और अधिक लोगों को कॉन्फ़िगरेशन तक पहुँच प्राप्त कर रहे हैं और आप उन्हें आंतरिक कामकाज को समझने की अपेक्षा करने के बजाय एक UI प्रदान करना चाहते हैं।

यह निर्देश आपको बताएगा कि Arduino / ESP के बजाय अधिकांश UI को क्लाउड में कैसे रखा जाए। इसे इस तरह से करने से आप अंतरिक्ष और स्मृति उपयोग पर बचत करेंगे। मुफ्त स्थिर वेबपेज प्रदान करने वाली एक सेवा विशेष रूप से "क्लाउड" के रूप में उपयुक्त है, जैसे कि गिटहब पेज, लेकिन अन्य विकल्प शायद भी काम करेंगे।

इस तरह से वेबपेज बनाने के लिए उपयोगकर्ता के ब्राउज़र को 4 चरणों से गुजरना पड़ता है:

1. Arduino / ESP. से रूट यूआरएल का अनुरोध करें
2. एक बहुत ही सरल वेबपेज प्राप्त करें, जो निम्न को बता रहा है:
3. क्लाउड से JavaScript फ़ाइल का अनुरोध करें
4. वास्तविक पृष्ठ बनाने वाला कोड प्राप्त करें

यह निर्देश यह भी बताएगा कि उपरोक्त चरणों के अनुसार पृष्ठ तैयार होने के बाद Arduino / ESP के साथ कैसे बातचीत करें।

इस निर्देश पर बनाया गया कोड GitHub पर भी पाया जा सकता है।

आवश्यक शर्तें

यह निर्देश योग्य मानता है कि आपको कुछ सामग्रियों और कुछ पूर्व ज्ञान तक पहुँच प्राप्त हुई है:

• एक Arduino (नेटवर्क एक्सेस के साथ) / ESP
• उपरोक्त को संलग्न करने के लिए एक कंप्यूटर
• इंटरनेट से जुड़ा वाईफाई एक्सेस
• Arduino IDE स्थापित (ESP32 के लिए भी)
• आप अपने IoT-डिवाइस पर एक स्केच अपलोड करना जानते हैं
• आप गिट और गिटहब का उपयोग करना जानते हैं

चरण 1: एक साधारण वेबसर्वर स्केच के साथ शुरुआत करना

हम यथासंभव सरल शुरुआत करेंगे, और इसे यहीं से बढ़ने देंगे।

#शामिल

कॉन्स्ट चार * एसएसआईडी = "तुम्हारा सिड"; कॉन्स्ट चार * पासवर्ड = "yourpasswd"; वाईफाई सर्वर सर्वर (80); शून्य सेटअप () {// सीरियल को इनिशियलाइज़ करें और पोर्ट के खुलने की प्रतीक्षा करें: Serial.begin(११५२००); जबकि (! सीरियल) {; // सीरियल पोर्ट के कनेक्ट होने की प्रतीक्षा करें। केवल देशी USB पोर्ट के लिए आवश्यक} WiFi.begin(ssid, पासवर्ड); जबकि (वाईफाई। स्थिति ()! = WL_CONNECTED) {देरी (500); सीरियल.प्रिंट ("।"); } Serial.println ("वाईफाई कनेक्टेड।"); Serial.println ("आईपी पता:"); Serial.println (वाईफाई.लोकलआईपी ()); सर्वर। शुरू (); } शून्य लूप () {// आने वाले ग्राहकों के लिए वाईफाई क्लाइंट क्लाइंट = सर्वर। उपलब्ध (); // आने वाले क्लाइंट के लिए सुनें bool sendResponse = false; // अगर हम एक प्रतिक्रिया भेजना चाहते हैं तो सही पर सेट करें स्ट्रिंग urlLine = ""; // अनुरोधित URL को होल्ड करने के लिए एक स्ट्रिंग बनाएं यदि (क्लाइंट) // यदि आपको कोई क्लाइंट मिलता है, { Serial.println ("नया क्लाइंट।"); // सीरियल पोर्ट से एक संदेश प्रिंट करें String currentLine = ""; // क्लाइंट से आने वाले डेटा को होल्ड करने के लिए एक स्ट्रिंग बनाएं, जबकि (क्लाइंट.कनेक्टेड ()) // लूप जबकि क्लाइंट कनेक्टेड है {if(client.available ()) // अगर क्लाइंट से पढ़ने के लिए बाइट्स हैं, { char c = क्लाइंट.रीड (); // एक बाइट पढ़ें, फिर अगर (सी == '\ n') // यदि बाइट एक न्यूलाइन कैरेक्टर है {// यदि वर्तमान लाइन खाली है, तो आपको एक पंक्ति में दो न्यूलाइन वर्ण मिलते हैं। // यह क्लाइंट HTTP अनुरोध का अंत है, इसलिए एक प्रतिक्रिया भेजें: if(currentLine.length() == 0) { sendResponse = true; // सब कुछ बढ़िया है! टूटना; // थोड़ी देर के लूप से बाहर निकलें} और // यदि आपको एक नई लाइन मिली है, तो वर्तमान लाइन साफ़ करें: {अगर (currentLine.indexOf ("GET /")> = 0) // यह URL लाइन होनी चाहिए { urlLine = currentLine; // इसे बाद में उपयोग के लिए सहेजें } currentLine = ""; // करंटलाइन स्ट्रिंग को रीसेट करें}} और अगर (सी! = '\ r') // अगर आपको कैरिज रिटर्न कैरेक्टर के अलावा कुछ और मिला है, {currentLine += c; // इसे currentLine के अंत में जोड़ें } } } if(sendResponse) { Serial.print("Client request"); Serial.println (urlLine); // HTTP हेडर हमेशा एक प्रतिक्रिया कोड (जैसे HTTP / 1.1 200 OK) // और एक सामग्री-प्रकार से शुरू होते हैं ताकि क्लाइंट को पता चले कि क्या आ रहा है, फिर एक खाली लाइन: client.println ("HTTP / 1.1 200 OK"); client.println ("सामग्री-प्रकार: टेक्स्ट/एचटीएमएल"); क्लाइंट.प्रिंट्लन (); if(urlLine.indexOf("GET /")>= 0) // यदि URL केवल एक "/" है {// HTTP प्रतिक्रिया की सामग्री हेडर का अनुसरण करती है: क्लाइंट.प्रिंट्लन ("हैलो वर्ल्ड!"); } // HTTP प्रतिक्रिया एक और रिक्त पंक्ति के साथ समाप्त होती है: client.println (); } // कनेक्शन बंद करें: क्लाइंट.स्टॉप (); Serial.println ("क्लाइंट डिस्कनेक्ट किया गया।"); } }

उपरोक्त कोड को कॉपी करें, या इसे GitHub पर कमिट से डाउनलोड करें।

अपने नेटवर्क से मेल खाने के लिए SSID और पासवर्ड बदलना न भूलें।

यह स्केच प्रसिद्ध Arduino का उपयोग करता है

सेट अप()

तथा

कुंडली()

कार्य। में

सेट अप()

कार्य आईडीई के लिए सीरियल कनेक्शन प्रारंभ किया गया है और वाईफाई भी है। एक बार जब वाईफाई उक्त एसएसआईडी से कनेक्ट हो जाता है तो आईपी प्रिंट हो जाता है और वेबसर्वर शुरू हो जाता है। के प्रत्येक पुनरावृत्ति में

कुंडली()

फ़ंक्शन कनेक्टेड क्लाइंट के लिए वेबसर्वर की जाँच की जाती है। यदि कोई क्लाइंट जुड़ा हुआ है तो अनुरोध पढ़ा जाता है और अनुरोधित यूआरएल एक चर में सहेजा जाता है। यदि सब कुछ ठीक लगता है, तो अनुरोधित URL के आधार पर सर्वर से क्लाइंट को प्रतिक्रिया दी जाती है।

चेतावनी! यह कोड इसे सरल रखने के लिए Arduino String वर्ग का उपयोग करता है। स्ट्रिंग ऑप्टिमाइज़ेशन इस निर्देश के दायरे में नहीं हैं। न्यूनतम राम का उपयोग करके Arduino स्ट्रिंग मैनिपुलेशन के बारे में निर्देश पर इसके बारे में और पढ़ें।

चरण 2: रिमोट जावास्क्रिप्ट बनाना

Arduino / ESP विज़िटर ब्राउज़र को इस एक फ़ाइल को लोड करने के लिए कहेगा। बाकी सब इस जावास्क्रिप्ट कोड द्वारा किया जाएगा।

इस निर्देश में हम jQuery का उपयोग करेंगे, यह कड़ाई से आवश्यक नहीं है, लेकिन यह चीजों को आसान बना देगा।

इस फ़ाइल को वेब से एक्सेस करने की आवश्यकता है, एक स्थिर पेज सर्वर यह काम करने के लिए पर्याप्त है, उदाहरण के लिए गिटहब पेज। तो आप शायद एक नया GitHub रिपॉजिटरी बनाना चाहते हैं और एक बनाना चाहते हैं

gh-पृष्ठ

डाली। निम्नलिखित कोड को अंदर रखें a

.जेएस

सही शाखा में भंडार में फ़ाइल।

उपरोक्त कोड को कॉपी करें, या इसे GitHub पर कमिट से डाउनलोड करें।

जांचें कि क्या आपकी फ़ाइल पहुंच योग्य है। GitHub पृष्ठों के मामले में https://username.github.io/repository/your-file.j… पर जाएं (प्रतिस्थापित करें)

उपयोगकर्ता नाम

,

कोष

तथा

आपकी-file.js

सही मापदंडों के लिए)।

चरण 3: दूरस्थ जावास्क्रिप्ट फ़ाइल को विज़िटर ब्राउज़र में लोड करना

अब जब हमने सब कुछ सेट कर लिया है, तो वेबपेज को दूरस्थ जावास्क्रिप्ट फ़ाइल लोड करने का समय आ गया है।

आप स्केच की लाइन 88 को से बदलकर ऐसा कर सकते हैं

client.println ("हैलो वर्ल्ड!"); टी

क्लाइंट.प्रिंट्लन ("");

(बदलें

एसआरसी

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

परिवर्तित फ़ाइल GitHub पर संबंधित कमिट में भी पाई जा सकती है।

समायोजित स्केच को अपने Arduino/ESP पर अपलोड करें।

चरण 4: पृष्ठ में नए तत्व जोड़ना

एक खाली पृष्ठ बेकार है, इसलिए अब वेबपेज में एक नया तत्व जोड़ने का समय आ गया है। अभी के लिए यह एक YouTube वीडियो होगा। इस उदाहरण में इसे पूरा करने के लिए कुछ jQuery कोड का उपयोग किया जाएगा।

कोड की निम्न पंक्ति को इसमें जोड़ें

इस में()

समारोह:

$('').prop({ src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', फ्रेमबॉर्डर: '0'}).css({चौड़ाई: '608px', ऊंचाई: '342px'}).appendTo('body');

यह एक बना देगा

आईफ्रेम

तत्व, सही सेट करें

एसआरसी

विशेषता और सीएसएस का उपयोग करके आकार सेट करें और तत्व को पृष्ठ के मुख्य भाग में जोड़ें।

jQuery हमें वेबपेज में तत्वों को आसानी से चुनने और बदलने में मदद करता है, जानने के लिए कुछ बुनियादी बातें:

• $ ('बॉडी')

• पहले से मौजूद किसी भी तत्व का चयन करता है, अन्य सीएसएस चयनकर्ताओं का भी उपयोग किया जा सकता है

• $(' ')

  एक नया बनाता है

• तत्व (लेकिन इसे दस्तावेज़ में नहीं जोड़ता है)

• .appendTo('.main')

• सीएसएस वर्ग 'मुख्य' वाले तत्व में चयनित/निर्मित तत्व को जोड़ता है

• तत्वों को जोड़ने के लिए अन्य कार्य हैं

  संलग्न करें ()

  ,

  .preपेंड ()

  ,

  .prependTo()

  ,

  सम्मिलित करें ()

  ,

  डालने के बाद ()

  ,

  .इन्सर्ट बिफोर ()

  ,

  ।उपरांत()

  ,

  ।इससे पहले()

अगर कुछ भी स्पष्ट नहीं है, तो GitHub पर संबंधित कमिटमेंट पर एक नज़र डालें।

चरण 5: इंटरएक्टिव तत्व

एक वीडियो मजेदार है, लेकिन इस निर्देश का उद्देश्य Arduino / ESP के साथ बातचीत करना है। आइए वीडियो को एक बटन के लिए बदलें जो Arduino / ESP को जानकारी भेजता है और प्रतिक्रिया की प्रतीक्षा भी करता है।

हमें एक की आवश्यकता होगी

$('')

पृष्ठ में जोड़ने के लिए, और इसमें एक ईवेंट श्रोता संलग्न करें। निर्दिष्ट ईवेंट होने पर ईवेंटलिस्टर कॉलबैक फ़ंक्शन को कॉल करेगा:

$('').text('a button').on('click', function()

{// कोड यहां बटन पर क्लिक होने पर निष्पादित किया जाएगा})।appendTo('body');

और कॉलबैक फ़ंक्शन में AJAX अनुरोध जोड़ें:

$.get('/ajax', function(data)

{// कोड यहां निष्पादित किया जाएगा जब AJAX अनुरोध समाप्त हो जाएगा});

अनुरोध समाप्त होने के बाद, लौटाया गया डेटा पृष्ठ में जोड़ दिया जाएगा:

$('

')। टेक्स्ट (डेटा)। संलग्न करें ('बॉडी');

संक्षेप में, उपरोक्त कोड एक बटन बनाता है, इसे वेबपेज में जोड़ता है, जब बटन पर क्लिक किया जाता है तो एक अनुरोध भेजा जाएगा और प्रतिक्रिया भी वेबपेज में जोड़ दी जाएगी।

यदि आप पहली बार कॉलबैक का उपयोग कर रहे हैं तो आप यह देखने के लिए गिटहब पर प्रतिबद्धता जांचना चाहेंगे कि सबकुछ कैसे घोंसला है।

चरण 6: इंटरएक्टिव तत्व का जवाब दें

बेशक, AJAX अनुरोध को प्रतिक्रिया की आवश्यकता है।

के लिए सही प्रतिक्रिया बनाने के लिए

/ajax

url हमें जोड़ने की आवश्यकता होगी a

और अगर ()

इफ स्टेटमेंट के क्लोजिंग ब्रैकेट के ठीक बाद जो चेक करता है

/

यूआरएल.

और अगर (urlLine.indexOf ("GET /ajax")> = 0)

{ क्लाइंट.प्रिंट ("हाय!"); }

गिटहब पर प्रतिबद्धता में मैंने ब्राउज़र को दिखाने के लिए एक काउंटर भी जोड़ा है कि प्रत्येक अनुरोध अद्वितीय है।

चरण 7: निष्कर्ष

यह इस निर्देश का अंत है। अब आपके पास एक Arduino / ESP है जो एक छोटे से वेबपेज की सेवा कर रहा है जो विज़िटर के ब्राउज़र को क्लाउड से एक जावास्क्रिप्ट फ़ाइल लोड करने के लिए कहता है। एक बार जावास्क्रिप्ट लोड हो जाने के बाद यह वेबपेज की बाकी सामग्री का निर्माण करता है जो उपयोगकर्ता को Arduino / ESP के साथ संवाद करने के लिए UI प्रदान करता है।

अब यह आपकी कल्पना पर निर्भर है कि आप वेबपेज पर अधिक तत्व बनाएं और किसी प्रकार के ROM (EEPROM / NVS / आदि) पर स्थानीय रूप से सेटिंग्स को सहेजें।

पढ़ने के लिए धन्यवाद, और कृपया कुछ प्रतिक्रिया देने के लिए स्वतंत्र महसूस करें!