Share
Dans mon article précédent, je vous ai montré comment prototyper un système Internet des objets à l'aide de Johnny-Five et de PubNub. Dans ce didacticiel, vous avez appris à créer une LED contrôlée par le Web, à la manière de Philips HUE..
Cette fois, je voudrais vous montrer comment lire les données de capteurs attachés à un Arduino et tracer un graphique sur le Web.!
Dans cet exercice, vous allez:
Vous avez besoin d’une carte Arduino (Genuino) Uno et de connaissances de base pour installer Arduino sur Johnny-Five. C’est une bonne idée de revoir la Configurer Arduino section du didacticiel pas à pas, mais vous n'avez pas besoin d'installer StandardFirmata parce que vous allez installer autre chose cette fois-ci.
Assurez-vous également que Node.js est en cours d'exécution sur votre ordinateur..
Project EON est un framework JavaScript open-source pour la création de graphiques et de cartes, créé par PubNub..
Etant donné que le composant graphique et graphique d'EON est basé sur C3.js, qui encapsule D3.js, EON vous permet de créer facilement des graphiques en temps réel sans savoir comment utiliser la bibliothèque beaucoup plus complexe D3..
Les étapes de base pour visualiser les données du capteur sont aussi simples que ce qui suit:
Publier des données à partir d'une source:
PUBNUB.publish (channel: 'my-graph', message: 'eon':: 'My data 1': 39, 'My data 2': 23); 2. Intégrez un graphique sur le Web: eon.chart (channel: 'my-graph', générez: bindto: '#myGraph');
Je vais vous expliquer en détail comment utiliser EON, car nous travaillons ici à la fois sur un matériel et sur un logiciel. Alors commençons!
Construisons d'abord un circuit pour le capteur de température! Le capteur générique et les pièces devraient être assez bon marché.
Le matériel dont vous avez besoin:
Un capteur de température numérique DS18B20 typique mesure de -55 ° C à 125 ° C avec une précision de ± 0,5 ° C sur une grande partie de la plage. Un convertisseur analogique-numérique (ADC) intégré convertit cette mesure de température analogique en une valeur numérique avec une précision pouvant aller jusqu'à 12 bits.
Le capteur DS18B20 communique sur un bus propriétaire à 1 fil. Lorsque vous utilisez des périphériques avec le protocole spécial, Johnny-Five requiert le module spécifique 1-Wire, qui utilise le Firmata configurable esquisser.
Alors chargeons ton Arduino avec Firmata configurable avant de câbler le capteur:
Maintenant, connectons-les. Le circuit est assez simple. Assurez-vous d’utiliser une résistance de 4,7 kΩ lorsque vous alimentez le capteur avec la source 5V de l’Arduino..
Passons au logiciel. La lecture des valeurs numériques du capteur est extrêmement facile lorsque vous utilisez Johnny-Five.
Assurez-vous que Node.js est installé sur votre ordinateur. Dans un répertoire de développement approprié, installez Johnny-Five à l’aide de la npm directeur chargé d'emballage.
$ npm installer johnny-five
Créez un fichier, temperature.js, et utilisez le code ci-dessous pour imprimer les valeurs:
Accentsconagua
var five = require ('johnny-five'); five.Board (). on ('prêt', fonction () var température = neuf cinq.Thermomètre (contrôleur: 'DS18B20', broche: 2); temperature.on ('données', fonction () console .log (this.celsius + '° C', this.fahrenheit + '° F');););Exécutez le code depuis une console avec noeud temperature.js. Une fois la carte matérielle prête, les valeurs de température imprimées sur la console doivent s'afficher comme suit:
Maintenant, publions les données du capteur de température et traçons les valeurs dans un graphique!
Tout d’abord, vous devez installer le module pubnub Node.js à l’aide de npm:
$ npm install pubnub
PubNub Data Stream Network (DSN) fournit l'infrastructure globale et vous permet de créer et d'adapter facilement les applications en temps réel et les périphériques IoT. Dans mon article précédent, vous avez utilisé PubNub pour recevoir des données d'un navigateur Web, mais cette fois-ci, vous utilisez PubNub pour publier les données de capteur à lire dans le navigateur..
Une fois le module pubnub installé, vous devez l’initialiser avec vos clés d’API..
var pubnub = require ('pubnub') (publish_key: 'pub-c-156a…', subscribe_key: 'sub-c-f762f…'); Aussi, créons un nom de chaîne.
var channel = 'temperature-ds18b20';
Lorsque vous tracez un graphique, vous devez récupérer les données publiées du même nom de canal..
Une fois que vous avez créé les données de température sur l'événement de données créé avec Johnny-Five dans la section précédente du didacticiel, conservez les données sous forme de variable, au lieu de console.log.
var temp = 0; temperature.on ('data', function () temp = this.celsius;);Vous pouvez publier chaque donnée sur PubNub, mais le capteur peut déclencher l'événement trop souvent. Alors envoyons les données toutes les trois secondes.
setInterval (publish, 3000);
Dans la fonction de publication, utilisez le PubNub publier() méthode d'envoi des données en objet (ou JSON).
function publish () var data = 'temperature': temp,; pubnub.publish (channel: channel, message: data,);
Le code complet de l’Arduino est disponible dans ce dépôt GitHub.
Maintenant, oubliez Arduino. Vous allez maintenant créer une page Web séparée pour dessiner un graphique.
Tout d'abord, inclure eon.css dans votre fichier HTML:
Puis inclure pubnub.js:
Créez ensuite un élément vide avec un identifiant:
C'est ici que le graphique sera généré dans votre page. Maintenant, vous devez initialiser PubNub, comme vous l’avez fait dans le node.js déposer plus tôt pour Arduino:
var pubnub = PUBNUB.init (publish_key: 'pub-c-156a…', subscribe_key: 'sub-c-f762f…');
Ensuite, générer un graphique à barres simple en utilisant EON graphique(), dès qu'il reçoit les données de PubNub. Vous pouvez recevoir les données envoyées par le capteur de température en utilisant le même nom de canal, temperature-ds18b20:
eon.chart (pubnub: pubnub, canal: 'temperature-ds18b20', générer: bindto: '#chart', transformation: function (m) return eon: température: m.température );
le transformer() la fonction adapte les données brutes envoyées par le capteur pour s’inscrire dans le schéma compréhensible par EON.
Exécutez le code HTML et le code Node.js pour Arduino.
Voilà, vous avez une visualisation de données en temps réel dans votre navigateur!
Vous pouvez personnaliser davantage le graphique avec des paramètres facultatifs C3.js, tels que les couleurs et la largeur des lignes.!
Par exemple, pour changer la couleur de la barre en violet comme dans l'animation gif ci-dessus, vous pouvez ajouter la couleur du Les données paramètre:
… Générer: bindto: '#chart, données: type:' ligne ', couleurs: température:' # 663399 ',
Vous pouvez utiliser le axe paramètre pour étiqueter et formater les axes x et y aussi.
Si vous voulez un autre type de graphique, essayez de changer le 'ligne', qui est une valeur par défaut pour le type, à 'spline', et voir ce qui se passe.
Pour obtenir le code complet, veuillez vous reporter au rapport GitHub. Il existe quelques exemples supplémentaires si vous souhaitez essayer différents capteurs tels qu'un capteur de lumière ambiante et différents types de graphiques..
J'espère que vous avez apprécié le tutoriel!
