Share
En mi artículo anterior, te mostré cómo hacer un prototipo de un sistema de Internet de las cosas usando Johnny-Five y PubNub. En ese tutorial, aprendió cómo crear un LED controlado por web, a la Philips HUE.
Esta vez, me gustaría mostrarle cómo leer datos de sensores conectados a un Arduino y trazar un gráfico en la web!
En este ejercicio, vas a:
Necesita un tablero Arduino (Genuino) Uno y conocimientos básicos sobre cómo configurar el Arduino para Johnny-Five. Es una buena idea revisar la Configurando Arduino sección en el tutorial paso a paso, pero no es necesario instalar StandardFirmata Porque vas a instalar algo más esta vez.
Además, asegúrese de que Node.js se esté ejecutando en su computadora.
Project EON es un marco de JavaScript de código abierto para gráficos y mapas, creado por PubNub.
Dado que el componente de gráficos y gráficos de EON se basa en C3.js, que es un envoltorio para D3.js, EON le permite crear gráficos en tiempo real fácilmente sin saber cómo usar la biblioteca D3, que es mucho más complicada..
Los pasos básicos para visualizar los datos del sensor son tan simples como los siguientes:
Publicar datos desde una fuente:
PUBNUB.publish (channel: 'my-graph', mensaje: 'eon': 'My data 1': 39, 'My data 2': 23); 2. Incruste un gráfico en la web: eon.chart (channel: 'my-graph', genere: bindto: '#myGraph');
Repasaré los detalles de cómo usar EON, ya que trabajamos en un ejercicio de hardware y software aquí. Vamos a empezar!
¡Construyamos primero un circuito para el sensor de temperatura! El sensor genérico y las partes deberían ser bastante económicos..
Hardware que necesita:
Un sensor de temperatura digital DS18B20 típico mide de -55 ° C a 125 ° C (centígrados) con una precisión de ± 0.5 ° C en gran parte del rango. Un convertidor analógico a digital (ADC) incorporado convierte esta medida de temperatura analógica en un valor digital con hasta 12 bits de precisión.
El sensor DS18B20 se comunica a través de un bus propietario de 1 cable. Cuando está utilizando dispositivos con el protocolo especial, Johnny-Five requiere el módulo específico de 1-Wire, que utiliza el ConfigurableFirmata bosquejo.
Así que vamos a cargar tu Arduino con ConfigurableFirmata Antes de cablear el sensor:
Ahora, vamos a conectarlos. El circuito es bastante simple, solo asegúrate de usar una resistencia de 4.7 kΩ cuando enciendas el sensor con la fuente de 5 V del Arduino.
Vayamos al lado del software. Leer los valores digitales del sensor es muy fácil cuando usa Johnny-Five.
Asegúrese de que Node.js esté instalado en su computadora. En un directorio dev apropiado, instale Johnny-Five usando el npm gerente de empaquetación.
$ npm instala johnny-five
Cree un archivo, temperature.js y use el código siguiente para imprimir los valores:
Accentsconagua
var five = require ('johnny-five'); five.Board (). on ('ready', function () var temperature = new five.Thermometer (controller: 'DS18B20', pin: 2); temperature.on ('data', function () console .log (this.celsius + '° C', this.fahrenheit + '° F');););Ejecuta el código desde una consola con nodo temperature.js. Una vez que la placa de hardware esté lista, debería ver los valores de temperatura impresos en la consola de esta manera:
Ahora, publiquemos los datos del sensor de temperatura y representemos los valores en un gráfico!
Primero, necesita instalar el módulo pubnub Node.js usando npm:
$ npm instalar pubnub
PubNub Data Stream Network (DSN) proporciona la infraestructura global y le permite crear y escalar aplicaciones en tiempo real y dispositivos IoT con bastante facilidad. En mi artículo anterior, usó PubNub para recibir datos de un navegador web, pero esta vez, está utilizando PubNub para publicar los datos del sensor para que se lean en el navegador.
Una vez que instale el módulo pubnub, debe inicializarlo con sus claves API.
var pubnub = require ('pubnub') (publish_key: 'pub-c-156a ...', subscribe_key: 'sub-c-f762f ...'); También vamos a crear un nombre de canal.
var canal = 'temperatura-ds18b20';
Cuando traza un gráfico, deberá tomar los datos publicados del mismo nombre de canal.
Una vez que obtenga los datos de temperatura en el evento de datos con Johnny-Five que ha creado en la sección anterior del tutorial, mantenga los datos como una variable, en lugar de solo console.log.
temp temp = 0; temperature.on ('data', function () temp = this.celsius;);Puede publicar todos los datos en PubNub, pero el sensor puede activar el evento con demasiada frecuencia. Así que enviemos los datos cada tres segundos..
setInterval (publish, 3000);
En la función de publicación, use el PubNub publicar() Método para enviar los datos en objeto (o JSON).
función publish () var data = 'temperature': temp,; pubnub.publish (channel: channel, message: data,);
El código completo para el Arduino está disponible en este repositorio de GitHub..
Ahora olvídate de Arduino. Ahora creará una página web separada para dibujar un gráfico..
Primero, incluye eon.css en su archivo HTML:
Luego incluye pubnub.js:
Luego crea un elemento vacío con alguna ID:
Aquí es donde se generará el gráfico en tu página. Ahora, necesita inicializar PubNub, tal como lo hizo en el node.js archivo anterior para Arduino:
var pubnub = PUBNUB.init (publish_key: 'pub-c-156a ...', subscribe_key: 'sub-c-f762f ...');
Luego, genere un gráfico de barras simple utilizando EON gráfico(), Tan pronto como reciba los datos de PubNub. Puede recibir los datos enviados desde el sensor de temperatura usando el mismo nombre de canal, temperatura-ds18b20:
eon.chart (pubnub: pubnub, channel: 'temperature-ds18b20', genera: bindto: '#chart', transform: function (m) return eon: temperature: m.temperature );
los transformar() La función adapta los datos sin procesar enviados desde el sensor para que se ajusten al esquema que EON puede entender..
Ejecute el código HTML y el código Node.js para Arduino.
Voilà, tienes una visualización de datos en tiempo real en tu navegador.!
Puede personalizar el gráfico más con los parámetros opcionales de C3.js, como los colores de línea y el ancho.!
Por ejemplo, para cambiar el color de la barra a púrpura como en la animación de gif de arriba, puede agregar el color de la barra. datos parámetro:
… Genere: bindto: '#chart, data: type:' line ', colors: temperature:' # 663399 ',
Puedes usar el eje parámetro para etiquetar y formatear el eje xy el eje y, también.
Si desea un tipo de gráfico diferente, intente cambiar el 'línea', que es un valor predeterminado para el tipo, para 'ranura', y mira lo que pasa.
Para ver el código completo, consulte el repositorio de GitHub. Hay algunos ejemplos más si desea probar diferentes sensores, como un sensor de luz ambiental y diferentes tipos de gráficos..
Espero que hayan disfrutado el tutorial!
