Étape 10 : Visualiser le flux de données
Mettons- EON à travailler ! Tout le code dont vous avez besoin est disponible au début du blog.
Le composant graphique et graphique d’EON est basé sur C3.js, un open source bibliothèque graphique. Cela vous permet de créer en temps réel graphiques en ligne, bar, tarte, jauge et donut. Lorsque de nouvelles données sont transmises, les transitions sont animées et les modifications sont répercutées en temps réel. Aucun manuel rafraîchissant exigé !
Nous ne voulions juste afficher les données brutes du capteur comme un numéro de mise à jour en direct. C’est ennuyeux. Si mon partenaire de crime Tomomi construit notre visualisation belle température, que vous pouvez voir ci-dessus ! Il moque de pépinière ou moniteur à effet de serre (un typique, realworld cas d’utilisation pour capteurs de température en temps réel).
L’interface est s’exécute dans le navigateur, et la technologie derrière est assez simple, en utilisant Les API JavaScript PubNub de souscrire les données envoyées par le chip Atmel. Parce que notre interface est simple, léger et construit entièrement en JavaScript, il est accessible depuis n’importe où dans le monde avec tout type de périphérique – les téléphones mobiles, tablettes et n’importe quel appareil intelligent, aussi longtemps que vous avez un navigateur web. L’objectif principal derrière tout cela est de présenter l’information de manière plus efficace sans perdre de sa précision.
Dans ce scénario, l’interface utilisateur indique la température actuelle, également un graphique simple en ligne, mise à jour en temps réel afin que vous puissiez dire les variations relatives de la température, de sensibilisation et de laisser tomber. Ces données particulières sont simples, mais lorsque vous avez plusieurs, plus de données complexes, visualisation de données joue rôle plus crucial.
