Frontend¶
Introductie¶
Het hoofddoel van het weerstation is de gebruiker informeren over het huidige weer op zijn locatie. Zo kan de gebruiker de buitentemperatuur, de binnentemperatuur, de luchtvochtigheid binnen en de kans op regen zien op de website die komt bij het weerstation.
Design¶
Voor ik begon met het schrijven van de code voor de website, ben ik gaan nadenken over het design. Ik heb inspiratie gehaald uit grote weersites als buienradar en weeronline, maar heb ook naar simpelere websites gekeken. Aangezien de functies van het weerstation beperkt zijn, heb ik ervoor gekozen om het webdesign minimalistisch te houden.
Ik ben hierna een paar schetsen gaan maken en heb daaruit gekozen welke ik het beste vond passen bij het concept.
Schetsen¶
Overview¶
Versie 1¶
De website is nog niet af, maar dit is hoe ver ik tot nu toe ben. Links bovenin wil ik een grafiek maken die de gemeten data laat zien, aangezien dit een van de blueprint opdrachten is. In de sectie rechtsonder wil ik de luchtvochtigheid laten zien die gemeten is door de sensor.
Versie 2¶
Dit is de tweede versie van mijn website. Zoals je kan zien is het wel een stukje anders dan het design en de eerste versie van de website. Vanwege het gebrek aan tijd heb ik besloten om het grafiekje achterwege te laten (dit was blijkbaar ook niet nodig voor de blueprint). Hierboven is de website te zien op het moment dat de sensor niet goed aangesloten is, dan krijgt de gebruiker namelijk “error” te zien in plaats van de gemeten data.
Versie 3¶
Dit is de uiteindelijke website geworden. Het grootste verschil met versie twee is de afbeelding. Ik had eerst de icon via de API ingeladen en die erg vergroot, waardoor de afbeelding heel pixelig werd. Ik heb nu alle weerafbeeldingen gedownload en met een omweg de gedownloade afbeeldingen gebruikt in plaats van de icons van de API. Wel werkt het nog dat de afbeelding veranderd afhankelijk van de huidige weeromstandigheden.
Stack/libraries¶
Voor de frontend van de website heb ik geen stack of libraries gebruikt.
Code¶
Klik hier om naar mijn Gitlab te gaan waar alle code terug te vinden is.