Realtime temperaturgivare och Dashboard (10 / 10 steg)
Steg 10: Visualisera dataströmmen
Låt oss sätta EON att arbeta! All kod som du behöver finns i början av blogginlägg.
Den kartläggning och grafritande komponent i EON bygger på C3.js, en öppen källkod kartläggning bibliotek. Detta gör att du kan bygga realtime linje, bar, paj, mätare och donut diagram. När nya data direktuppspelas, övergångar animeras och ändringarna i realtid. Ingen manuell uppfriskande krävs!
Vi ville bara visa rådata från sensorn som flera live-uppdatering. Det är tråkigt. Så byggt min partner i brott Tomomi våra vackra temperatur visualisering, som du kan se ovan! Det är ett hån mot plantskola eller växthusgaser monitor (en typisk, realworld användningsfall för realtime temperatursensorer).
Gränssnittet är körs i webbläsaren, och tekniken bakom är ganska enkelt, med hjälp PubNub JavaScript API: er för att prenumerera data som skickas från Atmel chip. Eftersom vårt gränssnitt är enkelt, lätt och byggd helt i JavaScript, det är tillgängliga från var som helst i världen med någon form av anordning-mobiltelefoner, tabletter och någon smart enhet, så länge du har en webbläsare. Det huvudsakliga syftet bakom detta är att presentera information på mest effektivt sätt utan att förlora dess riktighet.
I det här scenariot visar UI aktuell temperatur, också en enkel linje graf, uppdateras i realtid så att du kan berätta de relativa förändringarna av temperaturen, höja och släppa. Denna särskilda data är enkel, men när du har flera, mer komplicerade uppgifter, datavisualisering spelar mer avgörande roll.