სატრანსპორტო მონაცემების ვიზუალიზაცია Google Map– ით: 6 ნაბიჯი

2024 ავტორი: John Day | [email protected]. ბოლოს შეცვლილი: 2024-01-30 10:18

ჩვენ, როგორც წესი, გვინდა ველოსიპედის დროს სხვადასხვა მონაცემების ჩაწერა, ამჯერად ჩვენ გამოვიყენეთ ახალი Wio LTE მათი თვალთვალისთვის.

ნაბიჯი 1: ნივთები, რომლებიც გამოიყენება ამ პროექტში

კურდღლის კომპონენტები

• Wio LTE EU Version v1.3- 4G, Cat.1, GNSS, Espruino თავსებადი
• გროვი - ყურმილი გულისცემის სენსორი
• გროვი - 16 x 2 LCD (შავი ყვითელზე)

პროგრამული უზრუნველყოფის პროგრამები და ონლაინ სერვისები

• Arduino IDE
• PubNub Publish/Subscribe API
• გუგლის რუკა

ნაბიჯი 2: ისტორია

ნაბიჯი 3: აპარატურის კავშირი

დააინსტალირეთ GPS და LTE ანტენები Wio LTE– ზე და შეაერთეთ თქვენი SIM ბარათი. შეაერთეთ ყურის დამჭერი გულისცემის სენსორი და 16x2 LCD Wio LTE- ს D20 და I2C პორტს.

თქვენ შეგიძლიათ შეცვალოთ საყურე გულისცემის სენსორი სხვა სენსორებით, რომლებიც მოგწონთ. გთხოვთ იხილოთ ამ სტატიის დასასრული.

ნაბიჯი 4: ვებ კონფიგურაცია

ნაწილი 1: PubNub

დააწკაპუნეთ აქ შესვლა ან რეგისტრაცია PubNub ანგარიში, PubNub გამოიყენება რეალურ დროში მონაცემების რუქაზე გადასაცემად.

გახსენით დემო პროექტი PubNub– ის ადმინისტრაციულ პორტალში, თქვენ ნახავთ გამოქვეყნების გასაღებს და გამოწერის გასაღებს, დაიმახსოვრეთ ისინი პროგრამული უზრუნველყოფის პროგრამირებისთვის.

ნაწილი 2: Google რუკა

გთხოვთ მიჰყევით აქ Google Map API გასაღების მისაღებად, ის ასევე გამოყენებული იქნება პროგრამული უზრუნველყოფის პროგრამებშიც.

ნაბიჯი 5: პროგრამული უზრუნველყოფის პროგრამირება

ნაწილი 1: Wio LTE

ვინაიდან Wio LTE– სთვის არ არსებობს PubNub ბიბლიოთეკა, ჩვენ შეგვიძლია გამოვაგზავნოთ ჩვენი მონაცემები HTTP მოთხოვნიდან, იხილეთ PubNub REST API დოკუმენტი.

Wio LTE- ში ჩართული თქვენი SIM ბარათის მეშვეობით HTTP კავშირის შესაქმნელად, თქვენ ჯერ უნდა დააყენოთ თქვენი APN, თუ ეს არ იცით, გთხოვთ დაუკავშირდეთ თქვენს მობილურ ოპერატორებს.

შემდეგ, დააყენეთ თქვენი PubNub Publish Key, Subscribe Key და Channel. აქ არხი გამოიყენება გამომცემლებისა და გამომწერების დიფერენცირებისთვის. მაგალითად, ჩვენ ვიყენებთ არხის ველოსიპედს, არხის ველოსიპედის ყველა აბონენტი მიიღებს ჩვენს მიერ გამოქვეყნებულ შეტყობინებებს.

ზემოთ მოყვანილი პარამეტრები, ჩვენ არ შეფუთული გვაქვს კლასში, ასე რომ თქვენ შეგიძლიათ მარტივად შეცვალოთ ისინი bike.ino– ში, შეგიძლიათ ჩამოტვირთოთ ეს კოდები ამ სტატიის ბოლოდან.

ნაწილი 2: PubNub

დააჭირეთ და გამართავს Boot0 ღილაკს Wio LTE– ში, დაუკავშირეთ იგი თქვენს კომპიუტერს USB კაბელის საშუალებით, ატვირთეთ პროგრამა Arduino IDE– ში, დააჭირეთ ღილაკს Reset ღილაკს Wio LTE– ში.

შემდეგ გადადით PubNub– ზე, დააწკაპუნეთ გამართვის კონსოლზე დემო პროექტში, შეავსეთ თქვენი არხის სახელი ნაგულისხმევ არხში, დააწკაპუნეთ კლიენტის დამატებაზე.

როდესაც ხედავთ [1, "გამოწერილი", "ველოსიპედი"] კონსოლში, აბონენტი წარმატებით დაემატა. დაელოდეთ ცოტა ხანს, დაინახავთ Wio LTE მონაცემებს კონსოლში.

ნაწილი 3: Google რუკა

ENO რუქები არის რეალურ დროში რუქები PubNub და MapBox– ით, ის ასევე შეიძლება გამოყენებულ იქნას PubNub და Google Map– ებისთვის, შეგიძლიათ გადმოწეროთ მისი GitHub– დან.

თქვენ შეგიძლიათ უბრალოდ გამოიყენოთ მაგალითი სახელწოდებით google-draw-line.html მაგალითების საქაღალდეში, უბრალოდ შეცვალოთ Publish Key, Subscribe Key, Channel და Google Key სტრიქონებში 29, 30, 33 და 47.

შენიშვნა: გთხოვთ გააკეთოთ კომენტარი 42 -ე სტრიქონიდან, წინააღმდეგ შემთხვევაში ის გამოგიგზავნით სიმულაციის მონაცემებს თქვენს PubNub- ში.

თუ გსურთ გულისცემის დიაგრამის ჩვენება ქვედა მარჯვენა კოენერში, შეგიძლიათ გამოიყენოთ Chart.js, მისი გადმოწერა შესაძლებელია მისი ვებ – გვერდიდან, ჩადეთ ENO Maps– ის ძირითად საქაღალდეში და შეიტანეთ google-draw-line.html– ის თავში რა

დაამატეთ ტილო div- ში დიაგრამის საჩვენებლად:

შემდეგ შექმენით ორი მასივი გრაფიკის მონაცემების შესანახად

//… var chartLabels = ახალი მასივი (); var chartData = ახალი მასივი (); //…

მათ შორის chartLabels გამოიყენება მდებარეობის მონაცემების შესანახად, chartData გამოიყენება გულისცემის მონაცემების შესანარჩუნებლად. როდესაც შეტყობინებები მოდის, მიაწოდეთ მათ ახალი მონაცემები და განაახლეთ სქემა.

//… var map = eon.map ({შეტყობინება: ფუნქცია (შეტყობინება, დრო, არხი) {//… chartLabels.push (obj2string (შეტყობინება [0].latlng)); chartData.push (შეტყობინება [0]. მონაცემები.); var ctx = document.getElementById ("დიაგრამა"). getContext ("2d"); var chart = new Chart (ctx, {type: 'line', data: {labels: chartLabels, datasets: [{label: " გულისცემა ", მონაცემები: chartData}]}}); //…}});

Ყველაფერი შესრულებულია. ეცადეთ, შემდეგ ჯერზე ველოსიპედით გაატაროთ.

ნაბიჯი 6: როგორ ვიმუშაოთ სხვა სენსორულ გროვთან?

Wio LTE- ის პროგრამაში შეგიძლიათ აიღოთ ერთი და მეტი პერსონალური მონაცემი, რათა აჩვენოთ დიაგრამაში ან გააკეთოთ მეტი. შემდეგი სტატია აჩვენებს, თუ როგორ უნდა შეცვალოთ პროგრამა მის მისაღწევად.

პირველი რაც თქვენ უნდა იცოდეთ არის ის json, რომლის გამოქვეყნებაც გსურთ PubNub– ში, უნდა იყოს url კოდირებული. დაშიფრული json მყარად არის კოდირებული BikeTracker კლასში, ის ასე გამოიყურება:

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

ასე რომ, ადვილია ერთი პერსონალური მონაცემის აღება, ან შეგიძლიათ გამოიყენოთ url- კოდირების ინსტრუმენტები, რათა შექმნათ თქვენი საკუთარი დაშიფრული json მეტი მონაცემების ასაღებად.

ამჯერად ჩვენ ვცდილობთ გამოვიყენოთ I2C High Accracy Temp & Humi Grove რომ შეცვალოს Heart Rate Grove. იმის გამო, რომ LCD Grove ასევე იყენებს I2C- ს, ჩვენ ვიყენებთ I2C Hub– ს Temp & Humi Grove და LCD Grove Wio LTE– თან დასაკავშირებლად.

შემდეგ შეიტანეთ მთავარი ფაილი BickTracker.h და დაამატეთ ცვლადი და მეთოდი BikeTracker კლასში ტემპერატურის შესანახად და გასაზომად.

/// BikeTracker.h

//… # #მოიცავს "Seeed_SHT35.h" კლასის აპლიკაციას:: BikeTracker: application:: interface:: IApplication {//… დაცული: //… SHT35 _sht35; float _ ტემპერატურა; //… სიცარიელე MeasureTemperature (ბათილი); } /// BikeTracker.cpp //… // BikeTracker:: BikeTracker (ბათილია) //: _ethernet (Ethernet ()), _gnss (GNSS ()) {} // 21 არის SCL პინ ნომერი BikeTracker:: BikeTracker (ბათილი): _ethernet (Ethernet ()), _gnss (GNSS ()), _sht35 (SHT35 (21)) {} //… void BikeTracker:: ღონისძიებაTemperature (void) {float ტემპერატურა, ტენიანობა; if (_sht35.read_meas_data_single_shot (HIGH_REP_WITH_STRCH, & ტემპერატურა და ტენიანობა) == NO_ERROR) {_temperature = ტემპერატურა; }} //…

თუ გსურთ, შეგიძლიათ შეცვალოთ LCD ეკრანი Loop () მეთოდით:

// sprintf (ხაზი 2, "გულისცემა: %d", _heartRate);

გაზომეთ ტემპერატურა (); sprintf (ხაზი 2, "ტემპი: %f", _ ტემპერატურა);

მაგრამ როგორ გამოვაქვეყნოთ ის PubNub– ში? თქვენ უნდა შეცვალოთ კოდირებული json და sprintf () ფუნქციის პარამეტრები PublishToPubNub () მეთოდით, ასე გამოიყურება:

// sprintf (cmd, "GET/გამოქვეყნება/%s/%s/0/%s/0/%% 5b %% 7b %% 22latlng %% 22 %% 3a %% 5b%f %% 2c%f% %5d %% 2c %% 22data %% 22 %% 3a%d %% 7d %% 5d? Store = 0 HTTP/1.0 / n / r / n / r ", // _publishKey, _sabscribeKey, _ channel, _ latitude, _longitude, _heartRate); sprintf (cmd, "GET/გამოქვეყნება/%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 გამართვის კონსოლში.