In 2006, tijdens mijn werk bij een ontwerpbureau in Cardiff, Wales, bedacht ik een idee om op onze website de huidige weersomstandigheden buiten ons kantoor weer te geven. Ik wilde onze website volledig boeiend maken en onze bezoekers en klanten elke dag laten zien wat we in het echte leven ervoeren, in realtime.
Na uitgebreid onderzoek te hebben gedaan, ontdekte ik dat het beste startpunt hiervoor de Yahoo! Weather-API is, omdat het weersomstandigheden weergeeft in een consistent, bruikbaar formaat. De enige manier om het weer op een website echt weer te geven, was echter met behulp van Flash. De ontwikkelingstijd alleen was al genoeg om het idee uit de hoofden van de directeurs van het bedrijf te schrikken en het is nooit voorbij de conceptfase gekomen.
Nu, zes jaar later, en als technisch directeur van mijn eigen bedrijf, heb ik het idee opnieuw bekeken. Een zoektocht rond verschillende websites, blogs en fora onthulde dat zelfs na zes jaar niemand iets dergelijks heeft gedaan, dus we zouden de code moeten maken om het te doen. Ook in de zes jaar sinds het idee werd bedacht, zijn mijn ambities gegroeid. Ik wil niet langer alleen dat de website het weer buiten ons kantoor weergeeft - ik wil dat het weer buiten het venster van de persoon die de website bekijkt, wordt weergegeven.
Ik heb een verlanglijstje met functies gemaakt met updates voor live weer, zonsondergang en zonsopgang, en dag en nacht en zelfs maancycli, en heb deze aan onze ontwikkelaar Steven gegeven om het zo te maken.
Nogmaals, Yahoo's Weather API bleek de meest consistente en biedt zeer nauwkeurige codes voor verschillende weersoorten. Met deze informatie zouden we een array kunnen maken die onze weerweergave kan besturen.
Hoe goed de gegevens van Yahoo ook waren, deze was echter net zo nauwkeurig als de locatie die we van de website konden krijgen en vanwege de zwakheden van Microsoft's Internet Explorer konden we geolocatie niet gebruiken om een nauwkeurige locatie op te halen. voor iedereen die op de website surft. We moesten daarom genoegen nemen met het beste ding en de website IPInfoDB gebruiken om het dichtstbijzijnde kapitaal of de dichtstbijzijnde grote stad op te halen op basis van het IP-adres van de gebruiker.
In de Verenigde Staten resulteert dit meestal in het kapitaal van de persoon naar wie de persoon die de website bekijkt zich bevindt. Hier in het Verenigd Koninkrijk is het standaard in Londen, ongeacht waar in de VK de persoon is gevestigd; hopelijk zal Microsoft op een dag de rest van de browserwereld inhalen en ons toestaan geolocatie te gebruiken.
Door het IP-adres van de gebruiker te gebruiken en in IPInfoDB in te voeren, konden we het land, de staat of provincie en de stad of stad van de persoon die de website bekijkt, extrapoleren. Door dit in de Yahoo API in te voeren, kregen we het huidige weer voor die specifieke locatie.
De tijden voor zonsondergang en zonsopgang zijn elke dag nauwkeurig en worden direct berekend op basis van lengtegraad en breedtegraad, ook afgeleid van de Weer-API van Yahoo.
Ten slotte is er de maanfase, die, hoewel hij gebaseerd is op alleen de datum als variabele, de meest gecompliceerde berekening van alles bleek te zijn.
Dat is de theorie. Nu, voor hoe het was gedaan.
De eerste stap was om de weertypen opgesplitst van Yahoo! in een array die we zouden kunnen gebruiken om de effecten op de website te beheersen. Elk van de 47 verschillende weertypes van Yahoo heeft zijn eigen array, die we in vier nummers hebben verdeeld. De eerste reeks cijfers dicteert de bewolking, gaande van een heldere dag tot donkere zware bewolking. Het tweede cijfer is voor de regen, variërend van geen regen tot zware regenval. Het derde cijfer is voor verschillende extra weersoorten, zoals sneeuw en bliksem. Ten slotte is het vierde cijfer voor wat onze ontwerper Steven de 'juseffecten' noemt, zoals mist, stof en mist.
$weatherarray[0]=array('tornado',3,3,5,3);$weatherarray[1]=array('tropical storm',3,3,5,3);$weatherarray[2]=array('hurricane',3,2,4,3);$weatherarray[3]=array('severe thunderstorms',3,3,5,3);$weatherarray[4]=array('thunderstorms',3,2,5,2);$weatherarray[5]=array('mixed rain and snow',2,1,1,0);$weatherarray[6]=array('mixed rain and sleet',2,1,1,0);$weatherarray[7]=array('mixed snow and sleet',2,1,2,0);$weatherarray[8]=array('freezing drizzle',1,1,1,0);$weatherarray[9]=array('drizzle',1,1,0,0);$weatherarray[10]=array('freezing rain',1,2,1,0);$weatherarray[11]=array('showers',2,2,0,0);$weatherarray[12]=array('showers',2,2,0,0);$weatherarray[13]=array('snow flurries',1,0,2,1);$weatherarray[14]=array('light snow showers',1,0,2,1);$weatherarray[15]=array('blowing snow',1,0,2,2);$weatherarray[16]=array('snow',1,0,2,0);$weatherarray[17]=array('hail',1,0,4,0);$weatherarray[18]=array('sleet',1,1,4,0);$weatherarray[19]=array('dust',0,0,0,5);$weatherarray[20]=array('foggy',0,0,0,4);$weatherarray[21]=array('haze',0,0,0,5);$weatherarray[22]=array('smoky',0,0,0,5);$weatherarray[23]=array('blustery',1,0,0,2);$weatherarray[24]=array('windy',1,0,0,2);$weatherarray[25]=array('cold',1,0,0,0);$weatherarray[26]=array('cloudy',2,0,0,0);$weatherarray[27]=array('mostly cloudy (night)',1,0,0,0);$weatherarray[28]=array('mostly cloudy (day)',1,0,0,0);$weatherarray[29]=array('partly cloudy (night)',1,0,0,0);$weatherarray[30]=array('partly cloudy (day)',1,0,0,0);$weatherarray[31]=array('clear (night)',0,0,0,0);$weatherarray[32]=array('sunny',0,0,0,0);$weatherarray[33]=array('fair (night)',0,0,0,0);$weatherarray[34]=array('fair (day)',0,0,0,0);$weatherarray[35]=array('mixed rain and hail',1,1,4,1);$weatherarray[36]=array('hot',0,0,0,0);$weatherarray[37]=array('isolated thunderstorms',3,2,5,2);$weatherarray[38]=array('scattered thunderstorms',3,2,5,2);$weatherarray[39]=array('scattered thunderstorms',3,2,5,2);$weatherarray[40]=array('scattered showers',3,2,0,2);$weatherarray[41]=array('heavy snow',1,0,3,0);$weatherarray[42]=array('scattered snow showers',1,0,2,0);$weatherarray[43]=array('heavy snow',1,0,3,0);$weatherarray[44]=array('partly cloudy',1,0,0,0);$weatherarray[45]=array('thundershowers',3,2,5,2);$weatherarray[46]=array('snow showers',1,0,2,0);$weatherarray[47]=array('isolated thundershowers',3,2,5,2);$weatherarray[3200]=array('not available',0,0,0,0);Om de toch al zware code en beelden tot een minimum te beperken, kozen we ervoor om dezelfde afbeeldingen waar mogelijk te recyclen. Er is bijvoorbeeld slechts één grafische regengrafiek en deze wordt beheerd op basis van de informatie van Yahoo !. Als de grafische afbeelding van de regen licht moet zijn, wordt deze ingesteld met een lagere dekking om hem lichter te maken:
switch ( $effect1) {case 0:$weathercode.= 'jQuery('#rain').css("opacity", "0.0");';break;case 1:$weathercode.= 'jQuery('#rain').css("opacity", "0.10");';break;case 2:$weathercode.= 'jQuery('#rain').css("opacity", "0.30");';break;case 3:$weathercode.= 'jQuery('#rain').css("opacity", "0.50");';break;}We struikelden, gelukkig, over de berekeningen voor de maancyclus Het blog van Stephen A. Zarkos . In overeenstemming met onze wens om beelden tot een minimum te beperken, werd de maanfase voltooid met een pixeldiagram met 10 verschillende fasen van de maan. Met behulp van de berekeningen van Zarkos selecteert de volgende code het juiste deel van het pixeldiagram dat moet worden weergegeven, zodat de juiste maancyclus altijd op onze website wordt weergegeven.
background-position: px 0;Het laatste deel van het project, en het meest visueel opwindend, is de real-time zonsondergang en zonsopgang. Zoals vermeld gebruikt dit de lengte- en breedtegraad van de dichtstbijzijnde hoofdstad van de persoon die de website bekijkt om de zonsondergang en zonsopgangstijden voor hen te extrapoleren. Dit betekent dat iemand die naar de website in Los Angeles kijkt, de zon ziet opkomen en drie uur nadat iemand naar dezelfde website in New York kijkt plaatst.
De zonsondergang en zonsopgang bestaan uit drie afzonderlijke skylineeffecten die opeenvolgend in elkaar oplossen. Voor de zonsondergang lost de dagscène langzaam op in een oranje scène, voordat hij oplost in een nachtscène. Terwijl dit gebeurt, begint een zonafbeelding (die altijd aanwezig is boven de vouw van de browser) af te dalen en "in te stellen". Dit hele proces duurt precies 300 seconden.
De zonsondergangtijd (afgeleid van de lengte- en breedtegraad) wordt geconverteerd naar een Unix-tijdstempel, die vervolgens wordt opgeslagen als een variabele. De huidige tijd wordt ook omgezet in een Unix-tijdstempel en het verschil tussen de twee tijden wordt gebruikt voor een jQuery-time-outfunctie. Dit is wat de overgang creëert tussen de dag- en nachtthema's.
jQuery('#daytime').fadeOut(200000, 'linear', function() {jQuery('#sill').fadeOut(100000, 'linear', function() {});jQuery('#sunset').fadeOut(100000, 'linear', function() {});}); De standaard weerseffecten, wat ze ook zijn, blijven spelen terwijl de zon ondergaat en stijgt. Dit kan tot behoorlijk mooie overgangen leiden, vooral als het heel hard regent.
U kunt de code in actie zien op de Betrek website .
Omdat dit een systeem is dat we zelf hebben ontwikkeld, kijken we voortdurend naar manieren om het te verbeteren en we hebben twee functies die we hebben toegevoegd omdat het weersysteem in augustus van dit jaar werd gelanceerd.
De eerste is iets dat we zojuist hebben toegevoegd; een op cookies gebaseerde locatie-instelling, waarbij de bezoeker van de website zijn weerweergave nauwkeuriger kan maken door hun stad, stad of postcode in te voeren om specifieke weersinformatie voor hun gebied op te halen. Dit was eigenlijk heel gemakkelijk om te doen, omdat Yahoo's weer-API postcode's en steden als invoer accepteert, en het een oproep naar iponfodb.com opslaat. We hebben dit getest met verschillende steden over de hele wereld, van Noord-Canada tot de Antipoden-eilanden voor de kust van Nieuw-Zeeland, dus je kunt zien hoe het weer is overal ter wereld.
De tweede functie die we in het nieuwe jaar introduceren, is een controlebox, zodat bezoekers de weerseffecten naar eigen inzicht kunnen implementeren, zodat de combinaties van verschillende weersoorten ongeacht het actuele weer kunnen worden bekeken. Bezoekers kunnen bijvoorbeeld de intensiteit van de regen met 10% verhogen van 0% tot 100%. Dit omvat ook een trigger voor de zonsondergang en zonsopgang, dus iedereen kan spelen als Ed Harris van The Truman Show en een zonsopgang creëren wanneer ze maar willen.
Heb je de Weather-API van Yahoo! gebruikt? Wat heb je ermee gebouwd? Laat het ons weten in de comments hieronder.
Uitgelichte afbeelding / thumbnail, weer afbeelding via Shutterstock.