Étape 8: Création d’une Interface Web
Toutes ces données de transmission en continu est inutile sans un moyen d’y accéder, alors j’ai construit une page web très simple qui affiche le niveau de pot de café à l’aide d' EON, un cadre PubNub JavaScript pour tableaux de bord de l’ITO. La page Web utilise HTML, CSS pour le style et JavaScript gérer les interactions PubNub. Le code source complet se trouvent dans la branche de gh-pages du référentiel de projet.
La première étape consiste à initialiser PubNub et créer un graphique EON.
Le graphique met à jour ensuite avec de nouvelles données publiées par l’échelle sur le canal sélectionné. L’interface est également responsable de traduire le poids brut en un niveau de pourcentage de 0 à 100. Dans un premier temps, je faisais cela dans la balance elle-même, mais un changement dans le pot de café nécessiterait une mise à jour avec les nouveaux facteurs de conversion. Mettre ce calcul dans le code JavaScript signifie qu'un couple de variables mises à jour du code de la page web accessible prendra soin de lui.
En outre, l’interface vous alertera les utilisateurs si le pot est hors de l’échelle ou un objet inconnu est à l’échelle. Ceci est fait en comparant le poids de l’échelle au poids connu du pot de café vide.
Il y avait un défaut majeur dans mon dessin original - il était possible pour la page Web de prendre jusqu'à deux minutes avant d’afficher toutes les données qu’elle attendait sur un événement de publication doit avoir lieu. Ceci a été résolu avec l’ajout de stockage PubNub et la lecture. Cette fonction m’a permis d’examiner l’historique des messages publiés sur ma chaîne pour remplir le graphique avant tout nouveau publier des événements ont eu lieu. Je cherche seulement à des messages publiés dans les cinq dernières minutes, et si aucune n’est trouvée, puis échelle est dans un état d’erreur. JavaMon est direct au bureau de le PubNub en ce moment - consultez aussi les pages web!