Stap 14: Instellen van Freeboard.io
We naderen snel de conclusie van dit project! De laatste taak die we nodig hebben om te voltooien is het opzetten van Freeboard.io, de service die we gebruiken zullen voor het maken van het IoT klok/weather display zelf.
Eerste hoofd naar de site van Freeboard.io en hetzij maken een account, zoals u waarschijnlijk hebt gedaan met tientallen andere websites, of Meld u aan met Facebook, Twitter en GitHub. Eenmaal ingelogd, maak een nieuwe vrijboord met behulp van de knop in de rechterbovenhoek van het scherm; u kunt het noemen wat je wilt.
Het toevoegen van gegevensbronnen
U moet nu kijken naar een lege Vrijboord. Wij zal beginnen met het proces van de weergave instellen door gegevensbronnen toe te voegen. Gegevensbronnen zijn locaties waaruit onze verschillende deelvensters van het vrijboord informatie zal trekken. Zullen we een totaal van drie gegevensbronnen:
Begin door te klikken op de knop toevoegen in de rechterbovenhoek van het scherm. Kies in de vervolgkeuzelijst TYPE klok. Zodra u deze optie selecteert, verschijnt de volgende twee extra opties. Geef deze gegevensbron een naam die zal toestaan u om het te onderscheiden van de andere gegevensbronnen die wij zullen toevoegen, ik noemde mij Datetimein het veld naam . Vervolgens in het veld Vernieuwen elke ingang 1 seconde, die moet de standaardwaarde. Tot slot, klik op Opslaan.
Dat is één gegevensbron naar beneden en twee te gaan. Klik nogmaals op de knop toevoegen . Ditmaal in de vervolgkeuzelijst TYPE , selecteer Yahoo! weer. Als wordt voorheen, een aantal andere gebieden weergegeven zodra u deze optie selecteert. Voer in het veld naam Weather. Voer uw postcode in het veld Postcode . In het veld eenheden door Imperial of metrieke, afhankelijk van uw voorkeur te kiezen. In het laatste veld, Elke vernieuwen, ingang 5 seconden. Klik vervolgens op Opslaan.
Nu voor de laatste, en waarschijnlijk meest belangrijke, gegevensbron. We zullen het toevoegen van een Dweet.io-gegevensbron waarmee Freeboard.io te trekken van de gegevens geduwd om de Dweet.io van onze Arduino IoT-sensor. Klik opnieuw op de knop toevoegen in de rechterbovenhoek. Selecteer in de vervolgkeuzelijst TYPE , Dweet.io. Voer in het veld naam in Dweet.io. Vervolgens in het veld Naam ding invoergegevens naar de naamwoord van de ding die u in uw Arduino schets gebruikt zoals beschreven in de vorige stap. Het laatste veld, sleutel, blijven leeg tenzij je hebt betaald voor een persoonlijke sleutel op Dweet.io. Laatst, klikt u op Opslaan.
Het toevoegen van deelvensters
Nu dat we hebben opgezet gegevensbronnen, zal Freeboard.io zitten kundig voor toegang tot alle informatie die we nodig om in te stellen op het display. Het scherm zelf maakt gebruik van deelvensters, die als afzonderlijke vensters binnen de pagina van het vrijboord dat elk een stukje van de gegevens van één van de gegevensbronnen weergegeven.
Toevoegen onze eerste deelvenster, klik op ADD DEELVENSTER in de linkerbovenhoek van het scherm. Hier ziet u een leeg doosje verschijnt op het display van het Vrijboord. Deze eerste deelvenster gaat om weer te geven van onze indoor sterkte van het geluid van de microfoon op de Arduino IoT-sensor. Klik op de moersleutelpictogram toegevoegde vensterruit. In het veld titel Indoor Sound Levelinput en invoeren in het veld kolommen 3, waardoor dit deelvenster span over het gehele scherm. Klik vervolgens op Opslaan om het instellingen venster te sluiten.
Nu moeten we de werkelijke sensor-weergave toevoegen aan het deelvenster, dat een Widget heet. Doe dit door te klikken op de + (plus) pictogram in de rechterbovenhoek van het deelvenster naast de moersleutelpictogram. Selecteer in de vervolgkeuzelijst TYPE Sparkline. In het veld titel ingangsniveau binnen geluid. In het veld waarde zullen we selecteren onze gegevensbron Dweet.io input datasources["Dweet.io"]["soundlevel"]. Schuif de knevel op Jain de Legenda opnemen . Tot slot, in het veld SPARKLINE etiketten input geluidsniveau. Tot slot, klik op Opslaan.
Dat is een deelvenster klaar. We zullen moeten een totaal van vier meer deelvensters toevoegen: weer, tijd, binnen de voorwaarden en binnen lichtniveau. Klik opnieuw op de knop Toevoegen om onze volgende deelvenster. Als voor een leeg venster aan de bovenkant van de pagina verschijnen zal. Klik en sleep het deelvenster onder het binnen geluid niveau deelvenster we zojuist hebt toegevoegd. Klik op de moersleutelpictogram en in het titelveld invoervelden weer. Laat het veld van kolommen als 1.
Klik op de + (plus) pictogram. Selecteer in de vervolgkeuzelijst TYPE , tekst. Voer in het veld titel Buiten temperatuur. Selecteer in de vervolgkeuzelijst grootte , Big. Voer in het veld waarde datasources ['weer'] ['current_temp']. De SPARKLINE omvatten zowel de Waardeveranderingen animatie ingesteld op Ja. Laatste, set de eenheden om te corresponderen met de waarde, de Imperial of metrieke, u kunt instellen voor de Yahoo! weer gegevensbron en klik op Opslaan.
Klik op de + (plus) pictogram op het weer deelvenster opnieuw en input alle je gewoon dezelfde waarden behalve geven deze Widget een titel van Buiten vochtigheid, en in het veld waarde , Voer datasources ['weer'] ["vochtigheid"].
Vervolgens maken we de klokvertoning deelvenster in het midden van het Vrijboord. Klik nogmaals op de knop Toevoegen als u wilt maken van een nieuwe ruit. Sleep het nieuwe deelvenster rechts van het deelvenster weer zodat deze wordt geplaatst in het midden van de pagina. Als voorheen, klik op de moersleutelpictogram en naam van dit deelvenster tijd en geef het een colspan van 1.
Klik op de + (plus) pictogram om een Widget voor dit deelvenster. Selecteer in de vervolgkeuzelijst TYPE aanwijzer. Dit soort widget heeft twee waarden, een bepaalt de richting van de aanwijzer, anderzijds bepaalt de tekst in het display van de ronde aanwijzer. Om onze weergave van de klok goed werkt, zullen we enkele aangepaste JavaScript-code gebruiken in de richting en Waarde tekst velden. Klik eerst op de . JS EDITOR knop voor het veld van richting . Kopieer en plak de JavaScript-code onder in het venster.
Dus wat doet deze code doen? Nou, zal de pointer weergave fungeren als de uurwijzer op een analoge klok, met de aanwijzer draaien rond de cirkel om de 12 uur. Dus, deze code krijgt het huidige uur en minuut dan berekent de hoek rond de cirkel die overeenkomt met deze keer.
Klik nu op de . JS EDITOR knop voor de Waarde TEXT -veld. Kopieer en plak de onderstaande code in het venster.
Deze code is eenvoudig. Het krijgen van het huidige aantal uren en minuten, dan worden deze waarden weergegeven zoals ze op een normale digitale klok zou verschijnen.
We hebben slechts twee deelvensters om goed te maken, en deze zullen eenvoudig. Het volgende deelvenster dat zullen we is enerzijds dat de binnentemperatuur en luchtvochtigheid weergegeven. het proces voor het maken van dit deelvenster zal zeer vergelijkbaar met het deelvenster weer, wij zal alleen de gegevensbron wijzigen. Dus, voeg een ander deelvenster en positie rechts van de klok. Klik op de moersleutelpictogram en de naam van het deelvenster met de locatie van de Arduino sensor, bijvoorbeeld de Voorwaarden van de eerste verdieping. Een Widget toevoegen aan het deelvenster. Selecteer in de vervolgkeuzelijst TYPE tekst. Voer in het veld functie < naam > temperatuur. Kies in de vervolgkeuzelijst grootte , Big. Vervolgens in het veld waarde , ingang datasources["Dweet.io"]["temperature"]. Kies Ja voor zowel het Omvatten SPARKLINE -veld en het veld Waardeveranderingen van animatie voorzien . Tot slot, stel het veld eenheden aan de eenheden die zijn opgegeven in de Arduino schets op regel 94.
Vervolgens Herhaal deze procedure met een andere Widget maar aanpassen van het veld naam om te zeggen "vochtigheid" in plaats van "temperatuur" en in het veld waarde , ingang datasources["Dweet.io"]["humidity"].
Oke, nu laten we eindigen de Freeboard.io opstelling met een laatste deelvenster. Voeg een ander deelvenster met behulp van de knop Toevoegen en plaats deze onder het deelvenster weer. Klik op de moersleutelpictogram en geef het nieuwe deelvenster de titel, Binnen licht niveau, en voer in de kolom veld 3.
Voeg dan een Widget aan het deelvenster. Selecteer in de vervolgkeuzelijst TYPE Sparkline. Voer in het veld titel Binnen licht niveau. Voer in het veld waarde datasources["Dweet.io"]["lightlevel"]. De Legende omvatten veld instellen op Ja. Geef tenslotte in het veld SPARKLINE etiketten , licht niveau.
