Visualización de datos de transporte con Google Map: 6 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:42

Por lo general, queremos registrar varios datos durante el ciclismo, esta vez usamos el nuevo Wio LTE para rastrearlos.

Paso 1: Cosas utilizadas en este proyecto

Componentes de Hareware

• Wio LTE EU Versión v1.3- 4G, Cat.1, GNSS, Compatible con Espruino
• Grove - Sensor de frecuencia cardíaca con clip para la oreja
• Grove - LCD de 16 x 2 (negro sobre amarillo)

Aplicaciones de software y servicios en línea

• IDE de Arduino
• API PubNub Publish / Subscribe
• mapas de Google

Paso 2: historia

Paso 3: Conexión de hardware

Instale antenas GPS y LTE en Wio LTE y conecte su tarjeta SIM. Conecte el sensor de frecuencia cardíaca con clip para la oreja y la pantalla LCD de 16x2 al puerto D20 e I2C de Wio LTE.

Puede cambiar el sensor de frecuencia cardíaca Ear-clip a otros sensores que desee. Consulte el final de este artículo.

Paso 4: Configuración web

Parte 1: PubNub

Haga clic aquí para iniciar sesión o registrar una cuenta PubNub, PubNub se utiliza para transmitir datos en tiempo real al mapa.

Abra el proyecto de demostración en PubNub Admin Portal, verá una clave de publicación y una clave de suscripción, recuérdelas para la programación de software.

Parte 2: Mapa de Google

Siga aquí para obtener una clave de API de Google Map, también se utilizará en la programación de software.

Paso 5: Programación de software

Parte 1: Wio LTE

Debido a que no existe una biblioteca PubNub para Wio LTE, podemos enviar nuestros datos desde una solicitud HTTP, consulte el documento API REST de PubNub.

Para realizar una conexión HTTP a través de su tarjeta SIM enchufada en Wio LTE, primero debe configurar su APN, si no lo sabe, comuníquese con sus operadores móviles.

Y luego, configure su clave de publicación de PubNub, clave de suscripción y canal. El canal aquí, se utiliza para diferenciar editores y suscriptores. Por ejemplo, usamos channel bike aquí, todos los suscriptores en channel bike recibirán los mensajes que publicamos.

La configuración anterior, no la empaquetamos en clase, para que pueda modificarla en bike.ino más fácilmente, puede descargar estos códigos desde el final de este artículo.

Parte 2: PubNub

Mantenga presionada la tecla Boot0 en Wio LTE, conéctelo a su computadora mediante un cable USB, cargue el programa en Arduino IDE, presione la tecla Reset en Wio LTE.

Luego, vaya a PubNub, haga clic en Debug Console en el proyecto de demostración, complete el nombre de su canal en Default Channel, haga clic en Add Client.

Cuando veas [1, "Suscrito", "bicicleta"] en la consola, el suscriptor se agregó correctamente. Espere un momento, verá que los datos de Wio LTE aparecen en la consola.

Parte 3: Mapa de Google

ENO Maps son mapas en tiempo real con PubNub y MapBox, también se puede usar para PubNub y Google Map, puedes descargarlo desde su GitHub.

Simplemente puede usar un ejemplo llamado google-draw-line.html en la carpeta de ejemplos, simplemente modifique la clave de publicación, la clave de suscripción, el canal y la clave de Google en las líneas 29, 30, 33 y 47.

AVISO: Por favor comente la línea 42, o enviará datos de simulación a su PubNub.

Si desea mostrar el gráfico de frecuencia cardíaca en el coener inferior derecho, puede usar Chart.js, puede descargarlo de su sitio web, colocarlo en la carpeta raíz de ENO Maps e incluirlo en el encabezado de google-draw-line.html.

Y agregue un lienzo en un div para mostrar el gráfico:

Luego cree dos matrices para mantener los datos del gráfico

//… var chartLabels = new Array (); var chartData = new Array (); //…

Entre ellos, chartLabels se usa para guardar datos de ubicación, chartData se usa para guardar datos de frecuencia cardíaca. Cuando lleguen los mensajes, envíeles nuevos datos y actualice el gráfico.

//… var map = eon.map ({message: function (message, timetoken, channel) {//… chartLabels.push (obj2string (message [0].latlng)); chartData.push (message [0].data); var ctx = document.getElementById ("gráfico"). getContext ('2d'); var chart = new Chart (ctx, {tipo: 'línea', datos: {etiquetas: chartLabels, conjuntos de datos: [{etiqueta: " Frecuencia cardíaca ", datos: chartData}]}}); //…}});

Todo listo. Intente llevarlo con su bicicleta la próxima vez.

Paso 6: ¿Cómo trabajar con otros sensores Grove?

En el programa de Wio LTE, puede tomar uno o más datos personalizados para mostrarlos en el gráfico o hacer más. El siguiente artículo muestra cómo modificar el programa para lograrlo.

Lo primero que debe saber es que el json que desea publicar en PubNub debe estar codificado en URL. JSON codificado está codificado en la clase BikeTracker, se ve así:

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

Por lo tanto, es fácil tomar un dato personalizado, o puede usar herramientas de codificación de URL para crear su propio json codificado para tomar más datos.

Esta vez intentamos usar I2C High Accracy Temp y Humi Grove para reemplazar Heart Rate Grove. Debido a que el LCD Grove también usa I2C, usamos un concentrador I2C para conectar Temp & Humi Grove y LCD Grove a Wio LTE.

Luego, incluya el archivo head en BickTracker.h, y agregue una variable y un método a la clase BikeTracker para almacenar y medir la temperatura.

/// BikeTracker.h

//… #include la clase "Seeed_SHT35.h" aplicación:: BikeTracker: aplicación:: interfaz:: IApplication {//… protegida: //… SHT35 _sht35; temperatura de flotación; //… void MeasureTemperature (void); } /// BikeTracker.cpp //… // BikeTracker:: BikeTracker (void) //: _ethernet (Ethernet ()), _gnss (GNSS ()) {} // 21 es el número de pin SCL BikeTracker:: BikeTracker (void): _ethernet (Ethernet ()), _gnss (GNSS ()), _sht35 (SHT35 (21)) {} //… void BikeTracker:: meterTemperature (void) {temperatura de flotación, humedad; if (_sht35.read_meas_data_single_shot (HIGH_REP_WITH_STRCH, y temperatura y humedad) == NO_ERROR) {_temperature = temperatura; }} //…

Si lo desea, puede cambiar la pantalla LCD en el método Loop ():

// sprintf (línea2, "Frecuencia cardíaca:% d", _heartRate);

MeasureTemperature (); sprintf (línea2, "Temp:% f", _temperatura);

Pero, ¿cómo publicarlo en PubNub? Necesita cambiar los parámetros codificados de la función json y sprintf () en el método PublishToPubNub (), deje que se vea así:

// 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);

Luego puede ver la temperatura en la consola de depuración de PubNub.