ESP8266 वेदर स्टेशन जो एक वेबसाइट पर डेटा प्रदर्शित करता है: 7 कदम

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

नोट: इस ट्यूटोरियल के भाग मेरे YouTube चैनल - टेक ट्राइब पर वीडियो प्रारूप में उपलब्ध हो सकते हैं।

इस निर्देशयोग्य में, मैं दिखाऊंगा कि कैसे एक मौसम स्टेशन बनाया जाए जो सीधे आपकी वेबसाइट पर डेटा भेजता है। इसलिए, आपको अपने स्वयं के डोमेन की आवश्यकता होगी (उदा: msolonko.net)। शुरू करने के लिए, यहां वे सामग्रियां हैं जिनकी आपको आवश्यकता होगी:

आइटम:

पंख हुज़ाह($16.95)

डेटा के साथ माइक्रो यूएसबी केबल($1.99)

बैटरी पैक($25): मैं बाद में चर्चा करूंगा कि आपको बिना रिचार्ज किए कितने समय के लिए किस क्षमता की आवश्यकता है, ताकि आप अपनी इच्छित क्षमता का चयन कर सकें। यह एक लिंक है जिसका मैंने उपयोग किया था। आप इसे केवल एक आउटलेट से भी पावर कर सकते हैं।

1 फोटोरेसिस्टर

कुछ अन्य प्रतिरोधक - बाद में चर्चा की गई

वायर

परफ बोर्ड($5.59) - 20. का पैक

BME280 तापमान, दबाव और आर्द्रता सेंसर($9.99)

किसी प्रकार का डिब्बा; आप एक 3D प्रिंट कर सकते हैं, और मैं आपको अपना डिज़ाइन दिखाऊंगा।

वेबहोस्टिंग और डोमेन, यदि आप ट्यूटोरियल के साथ पूरी तरह से पालन करना चाहते हैं

उपकरण:

तार काटने वाला

सोल्डरिंग आयरन

चरण 1: पंख हुज़ाह कोड

कोड Arduino IDE में लिखा जाएगा, जिसे यहां से डाउनलोड किया जा सकता है। शुरू करने से पहले, कृपया अपने पंख हुज़ाह के साथ काम करने के लिए Arduino IDE सेट करने के लिए यहां दिए गए निर्देशों का पालन करें। इसके अलावा, बीएमई सेंसर को काम करने के लिए आवश्यक पुस्तकालयों को डाउनलोड करने के लिए इन निर्देशों का पालन करें। कोड फ़ाइल संलग्न है, और सभी कोड पर टिप्पणी की गई है ताकि आप इसे समझ सकें। एक बार जब आप इसे देख लेते हैं, तो अगले चरण पर जाएँ जहाँ हम उस कोड को देखेंगे जो सेंसर डेटा प्राप्त करता है।

चरण 2: फेदर हुज़ाह से डेटा प्राप्त करना

अब तक, आप उम्मीद से समझ गए होंगे कि Arduino कोड कैसे काम करता है। यदि नहीं, तो कोड पर वापस जाएं और मेरी टिप्पणियां पढ़ें (मैंने लगभग हर पंक्ति पर टिप्पणी की)। अब हम उस कोड को लिखेंगे जो डेटा प्राप्त करता है। पहले की तरह, यह सब टिप्पणी की गई है। इसके लिए उपयोग की जाने वाली प्रोग्रामिंग भाषा PHP है, जिसके बारे में आप यहाँ अधिक पढ़ सकते हैं।

हमारा डेटा एक MySQL डेटाबेस में संग्रहीत किया जाएगा, जिसके बारे में आप यहाँ अधिक पढ़ सकते हैं। डेटा को पंक्तियों और स्तंभों वाली तालिकाओं में संग्रहीत किया जाता है। कोड लिखने से पहले, हमें अपने टेबल की संरचना को अपने होस्टिंग cPanel पर बनाना चाहिए। मैं अरविक्स होस्टिंग का उपयोग कर रहा हूं, इसलिए आपका cPanel अलग दिख सकता है। मेरा एक हिस्सा कैसा दिखता है यह देखने के लिए छवियों में से एक को देखें। सबसे पहले, आप एक नया MySQL डेटाबेस बनाना चाहते हैं यदि आपके पास पहले से एक नहीं है। आप उसके लिए विज़ार्ड का उपयोग कर सकते हैं। यदि आपको सहायता की आवश्यकता है तो इस पर बहुत सारे ऑनलाइन संसाधन हैं।

एक बार आपके पास डेटाबेस सेट हो जाने के बाद, phpMyAdmin पर जाएं और अपना डेटाबेस चुनें। वेदर_डेटा नाम की एक टेबल बनाएं जिसमें 9 कॉलम हों। प्रत्येक कॉलम क्या होना चाहिए, यह देखने के लिए ऊपर दी गई मेरी छवियों में से एक से परामर्श लें (यदि आप मेरे कोड का उपयोग करना चाहते हैं तो नाम, डेटाटाइप और बाकी सब कुछ कॉपी करें)। काउंटर हमारी प्राथमिक कुंजी होगी और आईडी हमें यह पहचानने में मदद करेगी कि डेटा किस दिन संबंधित है (1: आज, 2: कल, 3: बाकी सब कुछ)। चूंकि हमारे पास बहुत सारा डेटा होगा, इसलिए जैसे-जैसे यह पुराना होता जाएगा, हम इसमें से कुछ को मिटाते रहेंगे। इसलिए हमें id कॉलम की आवश्यकता है। बाकी कॉलम काफी आत्म-व्याख्यात्मक हैं। अभी, आपके डेटाबेस में आपकी तालिका बिल्कुल मेरी तरह दिखनी चाहिए।

अब, संलग्न कोड डाउनलोड करें और इसे और मेरी टिप्पणियों को पढ़ें। जब हो जाए, तो अगले चरण पर आगे बढ़ें।

नोट: जब आप कोड डाउनलोड करते हैं, तो उसका नाम बदलकर esp.php कर दें। किसी कारण से, जब मैंने एक PHP फ़ाइल अपलोड करने का प्रयास किया तो मुझे एक त्रुटि मिली।

यह मूल रूप से कोड कैसे काम करेगा।

1. हर 10 मिनट में डेटा एकत्र करें और उसे प्रदर्शित करें

2. एक बार एक दिन बीत जाने पर, प्रत्येक 6 मानों का औसत (डीबी स्थान बचाने के लिए) ताकि प्रत्येक घंटे के लिए एक डेटा बिंदु हो

3. एक बार एक और दिन बीत जाने के बाद, उस दिन के शेष सभी डेटा को औसत करें और इसे केवल एक डेटा बिंदु के रूप में संग्रहीत करें

इस तरह, हम महीनों के समय में प्रकाश, तापमान आदि में उतार-चढ़ाव देख पाएंगे, तापमान, प्रकाश आदि में दैनिक उतार-चढ़ाव से विचलित हुए बिना।

चरण 3: डेटाबेस से डेटा को प्रदर्शित करने के लिए पुनर्प्राप्त करना

तो अब हमने यह पता लगा लिया है कि मौसम संबंधी डेटा कैसे एकत्र करें और इसे अपने डेटाबेस में कैसे अपलोड करें। अब हमें इसे प्रयोग करने योग्य रूप में पुनः प्राप्त करने में सक्षम होना होगा। पहले की तरह, मैंने एक PHP फ़ाइल getWeatherData.txt संलग्न की है जिसे आपको अपने होस्ट में सहेजना चाहिए और फ़ाइल नाम एक्सटेंशन को.txt के बजाय.php में बदलना चाहिए। सभी कोड टिप्पणी की गई है। इसे समझने के लिए इसे पढ़ें और एक बार जब आपको लगे कि आपको यह मिल गया है तो आगे बढ़ें। यदि आपके कोई प्रश्न हैं, तो बेझिझक नीचे पूछें।

चरण 4: पुस्तकालय सेटअप और कुछ अन्य चीजें

इस परियोजना के लिए, हम जिन रूपरेखाओं का उपयोग करेंगे, उनमें से एक एंगुलरजेएस है, जो हमें डेटाबेस के साथ संवाद करने और एक एसपीए (सिंगल पेज एप्लिकेशन) बनाने में मदद करेगी। पुस्तकालय प्राप्त करने के लिए, इस लिंक पर जाएं और 1.64 या उच्चतर संस्करण डाउनलोड करें। इस ट्यूटोरियल के लिए, मैंने 1.64 का उपयोग किया लेकिन नए संस्करण अक्सर जारी किए जा रहे हैं ताकि आप एक अलग का उपयोग कर सकें। उस पृष्ठ पर एक लिंक खोजें जो इस प्रकार समाप्त होता है: /VERSION/angular.min.js

लिंक को कॉपी करें और इसे किसी सुरक्षित जगह पर सेव कर लें। हमें अभी एंगुलरजेएस लाइब्रेरी के लिए एक लिंक मिला है। अगले चरण के लिए आपको इसकी आवश्यकता होगी। अब, उसी पृष्ठ पर इस तरह दिखने वाला एक लिंक ढूंढें और उसे भी कॉपी करें: /VERSION/angular-route.min.js

कोणीय-मार्ग हमें अपने एसपीए को प्रबंधित करने और पृष्ठ में विचारों के स्विचिंग को संभालने में मदद करेगा।

हम अपने डेटा के चार्ट को अच्छी तरह से प्रदर्शित करने में सक्षम होना चाहते हैं। इसके लिए हम चार्टजेएस नामक पुस्तकालय का उपयोग करेंगे। यहां जाएं, नवीनतम संस्करण चुनें और इस तरह समाप्त होने वाले लिंक को सहेजें: VERSION/Chart.bundle.min.js

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

अब, हमें अपने आवेदन के लिए अलग-अलग विचार स्थापित करने चाहिए। अपने होस्ट की निर्देशिका में जहां आपके पास पिछली दो फ़ाइलें हैं (esp.php और getWeatherData.php), एक नया फ़ोल्डर बनाएं जिसका नाम weather_views है। यहां, हम अपने सभी पृष्ठों को रखेंगे जो हमारे डेटाबेस (1, 2, या 3) से एक आईडी के अनुरूप होंगे।

फोल्डर में 3 फाइलें बनाएं (day.html, old.html, और last.html)। संलग्न कोड डाउनलोड करें और इसे उन फाइलों में डालें। DAY. HTML के कोड पर टिप्पणी की गई है ताकि आप समझ सकें कि क्या हो रहा है। अन्य 2 पृष्ठों के लिए कोड मूल रूप से समान है (old.html में भिन्न भाग पर टिप्पणी की गई है)।

एक बार जब आप इस चरण को पूरा कर लेते हैं, तो अगले चरण पर जाएँ, जो प्रोग्रामिंग का सबसे कठिन चरण है।

चरण 5: मुख्य HTML फ़ाइल

इस चरण में, आप मुख्य HTML फ़ाइल बना/संपादित/पढ़ेंगे जहाँ आप सब कुछ प्रदर्शित करेंगे। संलग्न फ़ाइल (जो, हमेशा की तरह, टिप्पणी की गई है) को espdata.html के रूप में esp.php के समान निर्देशिका में सहेजें। मुझे आशा है कि आप इसमें कुछ बदलाव कर सकते हैं और समझ सकते हैं कि वास्तव में क्या हो रहा है।

यह आपके कोड का बड़ा हिस्सा है, इसलिए यह समझना निश्चित रूप से महत्वपूर्ण है कि क्या हो रहा है।

चरण 6: ब्रेडबोर्ड पर तारों का परीक्षण

अब हम परीक्षण करेंगे कि सभी कोड हमारे हार्डवेयर के साथ काम करते हैं। यदि आपने पहले से ऐसा नहीं किया है, तो फेदर हुज़ाह और BME280 सेंसर पर सोल्डर हैडर पिन करता है। प्रत्येक चरण के लिए एक फोटो संलग्न है।

1. ब्रेडबोर्ड पर पंख लगाएं। 3V को + रेल और GND से - रेल से कनेक्ट करें।

2. सेंसर VIN को + रेल और GND को - रेल से कनेक्ट करें।

3. पंख पर 4 पिन करने के लिए सेंसर एसडीए कनेक्ट करें। SCL को पिन 5 से कनेक्ट करें।

4. ब्रेडबोर्ड पर फोटोरेसिस्टर रखें, जिसमें एक सीसा + रेल पर जा रहा हो।

5. एक 4.7k रोकनेवाला को photoresistor के असंबद्ध लीड से कनेक्ट करें। 4.7k के असंबद्ध लीड को 2k रोकनेवाला से कनेक्ट करें। 2k रोकनेवाला के असंबद्ध छोर को - रेल (GND) से कनेक्ट करें।

6. एडीसी (एनालॉग पिन) को पिन करने के लिए 4.7k और 2k रोकनेवाला के जोड़ को कनेक्ट करें। हमने सिर्फ एक वोल्टेज डिवाइडर बनाया है जो पिन द्वारा पढ़े गए अधिकतम वोल्टेज को 3.3V से 1V से कम में विभाजित करता है। आप चाहें तो अपने खुद के संयोजन के साथ खेल सकते हैं लेकिन ध्यान रखें कि एनालॉग पिन को दिया गया वोल्टेज 1V से कम होना चाहिए।

7. अंत में, पंख पर 16 पिन करने के लिए पंख पर आरएसटी (रीसेट) पिन कनेक्ट करें (फोटो में नारंगी तार)। यह कॉन्फ़िगरेशन फ़ेदर हुज़ाह को पावर बचाने के लिए डीप स्लीप मोड में प्रवेश करने की अनुमति देता है।

अब आप कर चुके हैं! कोड को अपने फेदर हुज़ाह पर अपलोड करें, और उम्मीद है कि आप अपना वेबपेज अपडेट (केवल day.html पेज) देख सकते हैं। यदि नहीं, तो नीचे दी गई टिप्पणियों में समस्या निवारण या पूछने के लिए सीरियल मॉनिटर का उपयोग करने का प्रयास करें।

चरण 7: स्थायी परियोजना (वैकल्पिक)

यह मानते हुए कि सब कुछ काम करता है, आप चाहें तो इस परियोजना को और अधिक स्थायी बना सकते हैं। मैं इसे यहां नहीं दिखा रहा हूं, लेकिन आप सभी घटकों को एक पूर्ण बोर्ड में मिला सकते हैं और फिर उन्हें एक कंटेनर में संलग्न कर सकते हैं। मैं उस 3D कंटेनर के लिए IPT फाइलें संलग्न करूंगा जिसका मैंने नीचे उपयोग किया था और कुछ तस्वीरें आपको आरंभ करने के लिए। कंटेनर प्रेरणा के लिए है क्योंकि आप शायद इसे एक अलग डिज़ाइन और टेक्स्ट के साथ और अधिक व्यक्तिगत बनाना चाहेंगे। अनुकूलन के साथ मज़े करो! आपको कामयाबी मिले!