IoT Coffee Pot Monitor (8 / 9 steg)
Steg 8: Skapa ett webbgränssnitt
Alla denna strömmande data är värdelös utan ett sätt att komma åt det, så jag byggde en riktigt enkel webbsida som visar coffee pot nivå med hjälp av EON, en PubNub JavaScript ram för IoT instrumentpaneler. Webbsidan använder HTML, CSS för styling och JavaScript att hantera PubNub interaktioner. Full källkod kan hittas i gh-sidor gren i project-databasen.
Det första steget är att initiera PubNub och skapa ett EON.
var pubnub = PUBNUB.init ({
publish_key: 'YOUR_PUBLISH_KEY',
subscribe_key: "YOUR_SUBSCRIBE_KEY"
});
var kanal = "javamon";
EON.Chart({
pubnub:pubnub,
kanal: kanal,
meddelande: function(m) {
Gör coola grejer här!
});
Diagrammet uppdateras sedan med nya uppgifter som publicerats av skalan på den valda kanalen. Gränssnittet är också ansvarig för att omsätta den rå vikten i en procentuell nivå från 0 till 100. Först, jag gjorde detta i skala själv, men en förändring i kaffepannan skulle kräva en firmwareuppdatering med nya konverteringsfaktorer. Att sätta denna beräkning i JavaScript innebär ett par variabel uppdateringar tillgängliga webbsida koden tar hand om den.
Dessutom kommer att gränssnittet varna användare om potten är på skalan eller något okänt objekt är på skalan. Detta görs genom att jämföra skala vikt med kända vikten av Tom kaffepannan.
Det fanns en stor brist i min ursprungliga design - det var möjligt för webbsidan att ta upp till två minuter innan visas alla data som väntade på en publicera händelsen att äga rum. Detta löstes med tillägg av PubNub lagring och uppspelning. Denna funktion får mig att titta på historien av meddelanden publicerade till min kanal för att befolka grafen innan någon ny publicera händelser ägde rum. Jag bara tittar på meddelanden publicerade i de sista fem minuterna, och om inget hittas sedan skalan är fel. JavaMon är live på PubNub kontoret just nu - Kolla in sidan!