Оглавление:

Визуализация транспортных данных с помощью карты Google: 6 шагов
Визуализация транспортных данных с помощью карты Google: 6 шагов

Видео: Визуализация транспортных данных с помощью карты Google: 6 шагов

Видео: Визуализация транспортных данных с помощью карты Google: 6 шагов
Видео: Как визуализировать данные на карте? Часть 6. Как поделиться готовой картой 2024, Ноябрь
Anonim
Визуализация транспортных данных с помощью карты Google
Визуализация транспортных данных с помощью карты Google

Обычно мы хотим записывать различные данные во время езды на велосипеде, на этот раз мы использовали новый Wio LTE для их отслеживания.

Шаг 1. Вещи, использованные в этом проекте

Компоненты аппаратного обеспечения

  • Совместимость с Wio LTE EU версии v1.3- 4G, Cat.1, GNSS, Espruino
  • Grove - датчик сердечного ритма с ушным зажимом
  • Grove - ЖК-дисплей 16 x 2 (черный на желтом)

Программные приложения и онлайн-сервисы

  • IDE Arduino
  • PubNub API публикации / подписки
  • Карты Гугл

Шаг 2: история

Image
Image

Шаг 3: Подключение оборудования

Веб-конфигурация
Веб-конфигурация

Установите антенны GPS и LTE на Wio LTE и подключите к нему SIM-карту. Подключите заушный датчик пульса и ЖК-дисплей 16x2 к портам D20 и I2C Wio LTE.

Вы можете заменить датчик сердечного ритма с ушным зажимом на другие датчики, которые вам нравятся. Пожалуйста, смотрите в конце этой статьи.

Шаг 4: веб-настройка

Часть 1: PubNub

Нажмите здесь, войдите или зарегистрируйте учетную запись PubNub, PubNub используется для передачи данных в реальном времени на карту.

Откройте демонстрационный проект на портале администратора PubNub, вы увидите ключ публикации и ключ подписки, запомните их для программирования программного обеспечения.

Часть 2: Карта Google

Следуйте здесь, чтобы получить ключ API карты Google, он также будет использоваться при программировании программного обеспечения.

Шаг 5: Программирование программного обеспечения

Программирование программного обеспечения
Программирование программного обеспечения

Часть 1: Wio LTE

Поскольку для Wio LTE нет библиотеки PubNub, мы можем отправлять наши данные из HTTP-запроса, см. Документ PubNub REST API.

Чтобы установить HTTP-соединение через SIM-карту, подключенную к Wio LTE, вы должны сначала установить APN, если вы этого не знаете, обратитесь к своим операторам мобильной связи.

Затем установите ключ публикации PubNub, ключ подписки и канал. Канал здесь используется для различения издателей и подписчиков. Например, здесь мы используем велосипедный канал, все подписчики в канале байк будут получать сообщения, которые мы опубликовали.

Приведенные выше настройки мы не упаковали по классу, поэтому вы можете проще изменить их в bike.ino, вы можете скачать эти коды в конце этой статьи.

Часть 2: PubNub

Нажмите и удерживайте кнопку Boot0 в Wio LTE, подключите его к компьютеру через USB-кабель, загрузите программу в Arduino IDE, нажмите кнопку Reset в Wio LTE.

Затем перейдите в PubNub, нажмите «Консоль отладки» в демонстрационном проекте, введите имя своего канала в «Канал по умолчанию» и нажмите «Добавить клиента».

Когда вы видите [1, «Подписка», «велосипед»] в консоли, подписчик был успешно добавлен. Подождите немного, вы увидите, что данные Wio LTE появятся в консоли.

Часть 3: Карта Google

ENO Maps - это карты в реальном времени с PubNub и MapBox, их также можно использовать для PubNub и Google Map, вы можете скачать их с GitHub.

Вы можете просто использовать пример с именем google-draw-line.html в папке примеров, просто изменив ключ публикации, ключ подписки, канал и ключ Google в строке 29, 30, 33 и 47.

ВНИМАНИЕ. Прокомментируйте строку 42, иначе в ваш PubNub будут отправлены данные моделирования.

Если вы хотите отобразить диаграмму сердечного ритма в правом нижнем углу, вы можете использовать Chart.js, его можно загрузить с его веб-сайта, поместить в корневую папку ENO Maps и включить в заголовок google-draw-line.html..

И добавьте холст в div для отображения диаграммы:

Затем создайте два массива для хранения данных диаграммы

//… var chartLabels = new Array (); var chartData = новый массив (); //…

Среди них chartLabels используется для хранения данных о местоположении, chartData используется для хранения данных о частоте пульса. Когда приходят сообщения, отправьте в них новые данные и обновите диаграмму.

//… var map = eon.map ({message: function (message, timetoken, channel) {//… chartLabels.push (obj2string (message [0].latlng)); chartData.push (message [0].data); var ctx = document.getElementById ("диаграмма"). getContext ('2d'); var chart = new Chart (ctx, {type: 'line', data: {labels: chartLabels, datasets: [{label: " Пульс », data: chartData}]}}); //…}});

Все сделано. Попробуйте взять его с собой в следующий раз на велосипеде.

Шаг 6: Как работать с другими Sensor Grove?

В программе 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 для подключения Temp & Humi Grove и LCD Grove к Wio LTE.

Затем включите файл заголовка в BickTracker.h и добавьте переменную и метод в класс BikeTracker для хранения и измерения температуры.

/// BikeTracker.h

//… #include Класс «Seeed_SHT35.h» application:: BikeTracker: application:: interface:: IApplication {//… защищенный: //… SHT35 _sht35; float _temperature; //… void MeasureTemperature (void); } /// BikeTracker.cpp //… // BikeTracker:: BikeTracker (void) //: _ethernet (Ethernet ()), _gnss (GNSS ()) {} // 21 - это пин-код SCL BikeTracker:: BikeTracker (void): _ethernet (Ethernet ()), _gnss (GNSS ()), _sht35 (SHT35 (21)) {} //… void BikeTracker:: measureTemperature (void) {плавающая температура, влажность; if (_sht35.read_meas_data_single_shot (HIGH_REP_WITH_STRCH, & температура, & влажность) == NO_ERROR) {_tempera = temperature; }} //…

При желании можно изменить отображение ЖК-дисплея в методе Loop ():

// sprintf (line2, «Частота пульса:% d», _heartRate);

Измерить температуру (); sprintf (line2, "Temp:% f", _temperature);

Но как опубликовать его в PubNub? В методе PublishToPubNub () нужно изменить параметры закодированных функций json и sprintf (), пусть это будет выглядеть так:

// sprintf (cmd, "GET / publish /% 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, _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.

Рекомендуемые: