Google मानचित्र के साथ परिवहन डेटा विज़ुअलाइज़ेशन: 6 चरण

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

हम आमतौर पर बाइकिंग के दौरान विभिन्न डेटा रिकॉर्ड करना चाहते हैं, इस बार हमने उन्हें ट्रैक करने के लिए नए वाईओ एलटीई का इस्तेमाल किया।

चरण 1: इस परियोजना में प्रयुक्त चीजें

हरेवेयर घटक

• Wio LTE EU संस्करण v1.3- 4G, Cat.1, GNSS, एस्प्रुइनो संगत
• ग्रोव - ईयर-क्लिप हार्ट रेट सेंसर
• ग्रोव - 16 x 2 एलसीडी (पीले रंग पर काला)

सॉफ़्टवेयर ऐप्स और ऑनलाइन सेवाएं

• अरुडिनो आईडीई
• पबनब पब्लिश/सब्सक्राइब एपीआई
• गूगल मानचित्र

चरण 2: कहानी

चरण 3: हार्डवेयर कनेक्शन

Wio LTE में GPS और LTE एंटेना इंस्टॉल करें और उसमें अपना सिम कार्ड प्लग करें। ईयर-क्लिप हार्ट रेट सेंसर और 16x2 LCD को Wio LTE के D20 और I2C पोर्ट से कनेक्ट करें।

आप ईयर-क्लिप हार्ट रेट सेंसर को अन्य सेंसर में बदल सकते हैं जो आपको पसंद हैं। कृपया इस लेख का अंत देखें।

चरण 4: वेब कॉन्फ़िगरेशन

भाग 1: पबनब

यहां क्लिक करें लॉगिन करें या एक PubNub खाता पंजीकृत करें, PubNub का उपयोग मानचित्र पर रीयल-टाइम डेटा संचारित करने के लिए किया जाता है।

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

भाग 2: गूगल मानचित्र

Google मानचित्र API कुंजी प्राप्त करने के लिए कृपया यहां का अनुसरण करें, इसका उपयोग सॉफ़्टवेयर प्रोग्रामिंग में भी किया जाएगा।

चरण 5: सॉफ्टवेयर प्रोग्रामिंग

भाग 1: वाईओ एलटीई

क्योंकि Wio LTE के लिए कोई PubNub लाइब्रेरी नहीं है, हम HTTP अनुरोध से अपना डेटा भेज सकते हैं, PubNub REST API दस्तावेज़ देखें।

Wio LTE में प्लग किए गए अपने सिम कार्ड के माध्यम से एक HTTP कनेक्शन बनाने के लिए, आपको पहले अपना APN सेट करना चाहिए, यदि आप इसे नहीं जानते हैं, तो कृपया अपने मोबाइल ऑपरेटरों से संपर्क करें।

और फिर, अपनी PubNub Publish Key, Subscribe Key और Channel को सेट करें। यहां चैनल का उपयोग प्रकाशकों और ग्राहकों में अंतर करने के लिए किया जाता है। उदाहरण के लिए, हम यहां चैनल बाइक का उपयोग करते हैं, चैनल बाइक के सभी सब्सक्राइबर्स को हमारे द्वारा प्रकाशित संदेश प्राप्त होंगे।

उपरोक्त सेटिंग्स, हमने क्लास में पैक नहीं किया है, ताकि आप उन्हें Bike.ino में आसानी से संशोधित कर सकें, आप इस लेख के अंत से इन कोड को डाउनलोड कर सकते हैं।

भाग 2: पबनुब

Wio LTE में Boot0 कुंजी को दबाकर रखें, इसे USB केबल के माध्यम से अपने कंप्यूटर से कनेक्ट करें, Arduino IDE में प्रोग्राम अपलोड करें, Wio LTE में रीसेट कुंजी दबाएं।

फिर PubNub की ओर मुड़ें, डेमो प्रोजेक्ट में डीबग कंसोल पर क्लिक करें, अपने चैनल का नाम डिफ़ॉल्ट चैनल में भरें, क्लाइंट जोड़ें पर क्लिक करें।

जब आप कंसोल में [1, "सब्सक्राइब्ड", "बाइक"] देखते हैं, तो सब्सक्राइबर को सफलतापूर्वक जोड़ दिया गया था। थोड़ी देर प्रतीक्षा करें, आपको कंसोल में Wio LTE डेटा दिखाई देगा।

भाग 3: गूगल मानचित्र

ENO मैप्स PubNub और MapBox के साथ रीयल-टाइम मैप हैं, इसे PubNub और Google मैप के लिए भी इस्तेमाल किया जा सकता है, आप इसे इसके GitHub से डाउनलोड कर सकते हैं।

आप उदाहरण फ़ोल्डर में google-draw-line.html नाम के एक उदाहरण का उपयोग कर सकते हैं, बस 29, 30, 33 और 47 पंक्ति में प्रकाशित कुंजी, सदस्यता कुंजी, चैनल और Google कुंजी को संशोधित करें।

सूचना: कृपया पंक्ति 42 पर टिप्पणी करें, या यह आपके PubNub को सिम्युलेशन डेटा भेजेगा।

यदि आप निचले दाएं कोने में हृदय गति चार्ट प्रदर्शित करना चाहते हैं, तो आप चार्ट.जेएस का उपयोग कर सकते हैं, इसे इसकी वेबसाइट से डाउनलोड किया जा सकता है, इसे ईएनओ मैप्स के रूट फ़ोल्डर में डाल सकते हैं, और इसे google-draw-line.html के हेड में शामिल कर सकते हैं।.

और चार्ट प्रदर्शित करने के लिए एक div में कैनवास जोड़ें:

फिर चार्ट डेटा रखने के लिए दो सरणियाँ बनाएँ

// … वर चार्ट लेबल = नया ऐरे (); वर चार्टडेटा = नया ऐरे (); //…

उनमें से, चार्ट लेबल का उपयोग स्थान डेटा रखने के लिए किया जाता है, चार्टडेटा का उपयोग हृदय गति डेटा रखने के लिए किया जाता है। जब संदेश आते हैं, तो उन्हें नया डेटा पुश करें, और चार्ट को रीफ़्रेश करें।

// … var map = eon.map ({संदेश: फ़ंक्शन (संदेश, टाइमटोकन, चैनल) {//); var ctx = document.getElementById ("चार्ट")। getContext ('2d'); वर चार्ट = नया चार्ट (ctx, {प्रकार: 'लाइन', डेटा: {लेबल: चार्ट लेबल, डेटासेट: [{लेबल: " हृदय गति", डेटा: चार्टडेटा}]}}); //…}});

सब कुछ कर दिया। अगली बार इसे अपनी बाइकिंग के साथ लेने का प्रयास करें।

चरण 6: अन्य सेंसर ग्रोव के साथ कैसे काम करें?

वाईओ एलटीई के कार्यक्रम में, आप चार्ट में प्रदर्शित करने के लिए एक या अधिक कस्टम डेटा ले सकते हैं या अधिक कर सकते हैं। निम्न आलेख दिखाता है कि इसे प्राप्त करने के लिए प्रोग्राम को कैसे संशोधित किया जाए।

पहली चीज़ जो आपको जाननी चाहिए, वह यह है कि जिस json को आप PubNub पर प्रकाशित करना चाहते हैं, वह url-एन्कोडेड होना चाहिए। एन्कोडेड जोंस को BikeTracker क्लास में हार्ड-कोड किया गया है, यह इस तरह दिखता है:

%%5b%%7b%%22latlng%%22%%3a%%5b%f%%2c%f%%5d%%2c%%22data%%22%%3a%d%%7d%%5d

इसलिए एक कस्टम डेटा लेना आसान है, या आप अधिक डेटा लेने के लिए अपना खुद का एन्कोडेड json बनाने के लिए url-encode टूल का उपयोग कर सकते हैं।

इस बार हम हार्ट रेट ग्रोव को बदलने के लिए I2C हाई एक्रेसी टेम्प और हमी ग्रोव का उपयोग करने का प्रयास करते हैं। क्योंकि LCD Grove भी I2C का उपयोग करता है, हम Temp और Humi Grove और LCD Grove को Wio LTE से जोड़ने के लिए I2C हब का उपयोग करते हैं।

फिर BickTracker.h में हेड फाइल शामिल करें, और तापमान को स्टोर और मापने के लिए BikeTracker क्लास में एक वैरिएबल और एक मेथड जोड़ें।

/// BikeTracker.h

// … #include "Seed_SHT35.h" क्लास एप्लिकेशन:: बाइकट्रैकर: एप्लिकेशन:: इंटरफ़ेस:: Iapplication {// … संरक्षित: // … SHT35 _sht35; फ्लोट _तापमान; // … शून्य माप तापमान (शून्य); } /// BikeTracker.cpp //… // BikeTracker::BikeTracker(void) //: _ethernet(Ethernet()), _gnss(GNSS()) { } // 21 SCL पिन नंबर है BikeTracker::BikeTracker(शून्य): _ईथरनेट (ईथरनेट ()), _gnss (GNSS ()), _sht35 (SHT35(21)) { } // … शून्य BikeTracker::measureTemperature(void) { फ्लोट तापमान, आर्द्रता; अगर (_sht35.read_meas_data_single_shot(HIGH_REP_WITH_STRCH, &तापमान, और नमी) == NO_ERROR) { _temperature = तापमान; } } //…

आप चाहें तो LCD के डिस्प्ले को Loop() मेथड में बदल सकते हैं:

// स्प्रिंटफ (लाइन 2, "हृदय गति:% d", _heartRate);

माप तापमान (); स्प्रिंटफ (लाइन 2, "अस्थायी:% f", _temperature);

लेकिन इसे PubNub पर कैसे प्रकाशित करें? आपको PublishToPubNub() विधि में एन्कोडेड json और sprintf() फ़ंक्शन के पैरामीटर बदलने की आवश्यकता है, इसे इस तरह दिखने दें:

// स्प्रिंटफ (सीएमडी, प्राप्त करें / प्रकाशित करें /% एस /% एस / 0 /% एस / 0 /%% 5 बी%% 7 बी%% 22latlng%% 22%% 3 ए% 5 बी% एफ%% 2 सी% एफ% %5d%%2c%%22data%%22%%3a%d%%7d%%5d?store=0

// _publishKey, _subscribeKey, _channel, _latitude, _longitude, _heartRate); sprintf(cmd, "GET/publish/%s/%s/0/%s/0/%%5b%%7b%%22latlng%%22%%3a%5b%f%%2c%f%%5d %%2c%%22data%%22%%3a%f%%7d%%5d?store=0 HTTP/1.0\n\r\n\r", _publishKey, _subscribeKey, _channel, _latitude, _longitude, _temperature);

तब आप PubNub डिबग कंसोल में तापमान देख सकते हैं।