Stap 8: Creëren van een webinterface
Al deze streaming gegevens is nutteloos zonder een manier om deze te openen, zodat ik een echt eenvoudige webpagina waarin de koffie pot niveau met behulp van EON, een PubNub JavaScript-kader voor IoT dashboards gebouwd. De webpagina maakt gebruik van HTML, CSS voor styling en JavaScript om de interacties van de PubNub. De volledige broncode kan worden gevonden in de tak van de gh-pagina's van het project repository.
De eerste stap is het initialiseren van de PubNub en een EON-grafiek maken.
var pubnub = PUBNUB.init({ publish_key: 'YOUR_PUBLISH_KEY', subscribe_key: 'YOUR_SUBSCRIBE_KEY' }); var channel = "javamon"; eon.chart({ pubnub:pubnub, channel: channel, message: function(m){ // Do cool stuff here! }); De grafiek wordt dan bijgewerkt met nieuwe gegevens gepubliceerd door de schaal op het geselecteerde kanaal. De interface is ook verantwoordelijk voor het vertalen van het ruwe gewicht in een percentage van 0 tot 100. Aanvankelijk, ik deed dit in de schaal zelf, maar een verandering in de koffiepot zou vereisen een firmware-update met nieuwe conversiefactoren. Deze berekening aanbrengend de JavaScript betekent dat een paar variabele updates aan de toegankelijke web paginacode zal verzorgen.
Bovendien zal de interface gebruikers waarschuwen als de pot off van de schaal is of sommige onbekend object op de schaal is. Dit wordt gedaan door het vergelijken van het gewicht van de schaal met het bekende gewicht van de lege koffiepot.
Er was een grote fout in mijn oorspronkelijke ontwerp - was het mogelijk voor de webpagina te maximaal twee minuten duren voordat alle gegevens weer te geven zoals het wachtte op een evenement publiceren plaatsvinden. Dit werd opgelost met de toevoeging van PubNub opslag en weergave. Deze functie stond me toe om te kijken naar de geschiedenis van de berichten gepubliceerd op mijn kanaal om het vullen van de grafiek, voordat een nieuwe gebeurtenissen publiceert plaatsvonden. Ik ben alleen te kijken naar berichten verschenen in de laatste vijf minuten, en als geen zijn gevonden, schaal dan een foutstatus is. JavaMon is in het PubNub Bureau rechts nu live - check out de web-pagina!
