Arduino IoT väder klocka (14 / 15 steg)

Steg 14: Ställ in Freeboard.io

Vi snabbt närmar oss ingående av detta projekt! Den sista uppgiften som vi behöver för att slutföra är att inrätta Freeboard.io, tjänsten vi använder för att skapa IoT klocka/väder displayen själv.

Första chef över till webbplatsen Freeboard.io och antingen skapa ett konto som du har förmodligen gjort med dussintals andra webbplatser, eller logga in med Twitter, GitHub eller Facebook. När du loggat in, skapa en ny fribord med knappen i det övre högra hörnet av skärmen. Du kan kalla det vad du vill.

Att lägga till datakällor

Du bör nu se på en tom fribord. Vi kommer att påbörja processen med att starta display genom att lägga till datakällor. Datakällorna är platser där våra olika fribord rutor kommer att dra information. Vi behöver sammanlagt tre datakällor:

Börja med att klicka på knappen Lägg till i det övre högra hörnet av skärmen. I listan typ Välj klocka. När du väljer det här alternativet visas ytterligare två alternativ. I fältet namn ge denna datakälla ett namn som gör att du kan skilja den från andra datakällor som vi kommer att lägga, jag döpte min Datetime. Då, i fältet Uppdatera varje ingång 1 sekund, som bör vara standardvärdet. Klicka slutligen på Spara.

Det är en datakälla ner och två att gå. Klicka på knappen Lägg till igen. Den här gången i typ rullgardinsmenyn, Välj Yahoo! väder. Som visas tidigare, ett antal andra fält när du väljer detta alternativ. Ange i fältet namn på väder. Mata in ditt postnummer i fältet Postnummer . I fältet enheter Välj antingen Imperial eller metriska, beroende på dina önskemål. I det sista fältet, Uppdatera varje, ingång 5 sekunder. Klicka på Spara.

Nu till den sista, och förmodligen viktigaste, datakällan. Vi kommer att lägga till en datakälla för Dweet.io vilket gör att Freeboard.io att dra information skjuts till Dweet.io från Arduino IoT sensor. Klicka igen på knappen Lägg till i det övre högra hörnet. I listan typ väljer du Dweet.io. Mata in Dweet.ioi fältet namn . Då, i fältet Namn på sak ingång sak namnet du använder i din Arduino skiss som beskrivs i föregående steg. Det sista fältet, nyckel, kommer att vara tomt om du har betalat för en privat nyckel på Dweet.io. Senast, klicka på Spara.

Att lägga till fönsterrutor

Nu när vi har ställt upp datakällor, kommer Freeboard.io att kunna komma åt all information vi behöver för att ställa in displayen. Visa sig använder glasen, som är som enskilda fönster insida fribord att var och en visar en bit av data från en av datakällorna.

Lägg till vår första rutan, klicka på Lägg till rutan i det övre vänstra hörnet av skärmen. Du kommer att se en liten tom ruta på fribord displayen. Denna första fönstret kommer att visa våra inomhus ljudnivåer från mikrofonen på Arduino IoT sensorn. Klicka på skiftnyckelikonen i panelen nyligen tillagda. I fältet Rubrik ingång Inomhus ljudnivåoch kolumner i fältet inkommande 3, som kommer att göra här i fönstret spänner över hela displayen. Klicka på Spara för att stänga rutan i fönstret Inställningar.

Nu måste vi lägga till själva sensorn skärmen i fönstret, som kallas en Widget. Gör detta genom att klicka på den + (plus)-ikonen i det övre högra hörnet av rutan bredvid ikonen skiftnyckel. I listan typ väljer du miniatyrdiagram. I fältet Rubrik ingång Inuti ljudnivå. I fältet värde kommer vi att välja våra Dweet.io datakälla, ingång datasources["Dweet.io"]["soundlevel"]. Skjut växla till Jai Inkluderar LEGEND . Slutligen, i fältet MINIATYRDIAGRAM etiketter ingång ljudnivå. Klicka slutligen på Spara.

Det är en glasruta klar. Vi kommer att behöva lägga till totalt fyra mer rutor: väder, time, i villkor, och i ljuset. Lägg till vår nästa ruta, klicka på knappen Lägg till igen. Som innan en tom ruta visas högst upp på sidan. Klicka och dra fönstret under inuti ljud nivå rutan vi just lagt till. Klicka på skiftnyckelikonen och fältet Rubrik indata- väder. Lämna fält kolumner som 1.

Klicka på + (plus) ikonen. I listan typ väljer du Text. I fältet Rubrik ingång Utanför temperatur. Välj storai listan storlek . I fältet värde ingång datasources ["väder"] ["current_temp"]. Ange både Inkluderar MINIATYRDIAGRAM och ANIMERA VÄRDEÄNDRINGAR till Ja. Senaste, ange enheterna att motsvara värdet, Imperial eller metriskt, du för för Yahoo! väder datakälla och klicka på Spara.

Klicka på + (plus) ikonen i vädret fönstret igen och input alla samma värden du bara utom ge denna Widget en titel av Utanför fuktighet, och i fältet värde anger datasources ["väder"] ["fukt"].

Nästa kommer att vi skapa klockdisplay fönsterrutan i mitten av fribordet. Än en gång klickar du på Lägg till knappen för att skapa en ny glasruta. Dra den nya rutan till höger om fönstret väder så att den är placerad i mitten av sidan. Som tidigare, klicka på skiftnyckelikonen och namnge den här rutan tid och ge den en kolumnutvidgning 1.

Klicka på + (plus)-ikonen för att skapa en Widget för denna ruta. I listan typ väljer du pekaren. Denna typ av widget har två värden, man bestämmer riktningen av pekaren, andra bestämmer texten inuti cirkulär pekaren displayen. För att få vår klocka fungerar, kommer att vi använda vissa anpassade JavaScript-kod inuti fälten riktning och Värde TEXT . Klicka först på . JS redaktör knapp för fältet riktning . Kopiera och klistra in JavaScript-koden nedan i fönstret.

Anpassade JS för riktning fält
Få aktuell tid
var d = nya Date();
Få de nuvarande timmarna
var h = d.getHours();
Timmen är tillbaka i 24 timmars tid, för att göra klockan Visa 12 timmars tid,
ändra timmar över 12 tillbaka till under 12.
om (h > 12) {
h = h - 12.
}
Få de nuvarande minuterna
var m = d.getMinutes();

Räkna ut vinkeln (i grader) som visar den aktuella tiden som en analog
klockan. Varje timme är 30 grader och varje minut är 0.5 grader.
var a = (30 * h) + (0,5 * m);
Returnera vinkel
returnera en;

Så vad gör denna kod? Tja, kommer att pekaren displayen agera som timvisaren på en analog klocka, med pekaren roterar runt cirkeln var 12 timme. Så, denna kod blir aktuell timme och minut sedan beräknar vinkel runt cirkeln motsvarar denna gång.

Klicka nu på . JS redaktör knapp för fältet Värde . Kopiera och klistra in koden nedan i fönstret.

Anpassade JS för värde textfält
Vi måste ha en datasource här eftersom resten av detta JavaScript kommer endast att utvärderas
varje gång datasource uppdaterar (varje sekund). Om vi inte hade detta, skulle tiden bara
är desamma och aldrig uppdatera.
DataSources ["Datetime"] ["time_string_value"]

var d = nya Date();
Få aktuell timme
var h = d.getHours();
Timmen är tillbaka i 24 timmars tid, för att göra klockan Visa 12 timmars tid,
ändra timmar över 12 tillbaka till under 12.
om (h > 12) {
h = h - 12.
}
Få de nuvarande minuterna
var m = d.getMinutes();

Minuter värde behandlas som ett nummer, så, till exempel vid 8:03, returneras protokollet som
bara 3 och tiden vill att visas som "8:3". Så, om mindre än tio minuter värde, lägga till en
noll till framsidan.
Switch(m) {
fall 0:
m = "00".
bryta;
fall 1:
m = "01".
bryta;
fall 2:
m = "02";
bryta;
fall 3:
m = "03";
bryta;
fall 4:
m = "04";
bryta;
fall 5:
m = "05";
bryta;
fall 6:
m = "06";
bryta;
fall 7:
m = "07";
bryta;
mål 8:
m = "08";
bryta;
mål 9:
m = "09";
bryta;
}

Skapa en sträng om du vill visa hela tiden
var t = h + ":" + m;
Visa tid
returnera t;

Denna kod är enkel. Det får nuvarande timmar och minuter, sedan visar dessa värden som de skulle visas på en vanlig digital klocka.

Vi har bara två rutor kvar för att skapa, och dessa kommer att vara enkel. Nästa ruta kommer vi att göra är den som visar inomhus temperaturen och luftfuktigheten. processen för att skapa den här rutan kommer att vara mycket lik till fönstret väder, vi kommer bara att ändra datakällan. Så Lägg till en annan fönsterruta och placera det till höger om klockan. Klicka på skiftnyckelikonen och namnge rutan med platsen för Arduino sensorn, till exempel Första våningen villkor. Lägga till en Widget i fönstret. I listan typ väljer du Text. Ange < namn > temperaturi rubrikfältet . Storlek rullgardinsmenyn, Välj Big. Då, i fältet värde ingång datasources["Dweet.io"]["temperature"]. Välj Ja för både fältet Innehåller MINIATYRDIAGRAM och ANIMERA-värdet ändras fältet. Slutligen, ange fältet enheter att matcha de enheter som angetts i den Arduino skissen på linje 94.

Sedan upprepa samma förfarande med en annan manick men justera fältet namn som lämpligt att säga "fukt" i stället för "temperatur" och i fältet värde ingång datasources["Dweet.io"]["humidity"].

Okej, nu Låt oss avsluta den Freeboard.io setup med en sista rutan. Lägga till ett annat fönster med hjälp av knappen Lägg till och placera det under rutan väder. Klicka på skiftnyckelikonen och ge fönstret ny titeln, Inuti Light nivå, och ange i fältet kolumn 3.

Sedan lägga till en Widget i fönstret. I listrutan typ väljer du miniatyrdiagram. Ange Inuti Light nivåi rubrikfältet . I fältet värde anger du datasources["Dweet.io"]["lightlevel"]. Ange fältet Inkludera LEGEND till Ja. Slutligen, i fältet MINIATYRDIAGRAM etiketter in ljus nivå.