I 2006 tænkte jeg, mens jeg arbejdede på et designagentur i Cardiff, Wales, om en ide om at indse de nuværende vejrforhold uden for vores kontor på vores hjemmeside. Jeg ønskede at gøre vores hjemmeside fuldt ud engagerende og vise vores besøgende og kunder, hvad vi oplevede i det virkelige liv hver dag, i realtid.

Efter at have udført en række omfattende undersøgelser, opdagede jeg, at det bedste udgangspunkt for dette er Yahoo! S vejr-API, fordi det giver vejrforhold i et konsistent, brugbart format. På den tid var den eneste måde at virkelig repræsentere vejret på en hjemmeside ved at bruge Flash. Udviklingen tid alene var nok til at skræmme ideen fra sindet i selskabets direktører, og det flyttede aldrig forbi befrugtningsfasen.

Nu, seks år senere, og som teknisk direktør for mit eget firma, reviderede jeg ideen. En søgning rundt på forskellige hjemmesider, blogs og fora afslørede, at selv for seks år siden har ingen faktisk gjort noget som dette, så vi skulle lave koden for at gøre det. Også i de seks år, siden ideen blev opfattet, er mine ambitioner vokset. Jeg vil ikke længere bare have hjemmesiden til at vise vejret uden for vores kontor-jeg vil have det til at vise vejret uden for vinduet på den person, der ser hjemmesiden.

Jeg lavede en ønskeliste med funktioner til live-vejr, solnedgang og solopgangstider og dag og nat og endda månecykler - og gav det til vores udvikler Steven for at gøre det.

Endnu en gang viste Yahoo's Weather API sig at være den mest konsistente og tilbyder meget præcise koder til forskellige vejrtyper. Med disse oplysninger ville vi kunne oprette et array, der kunne styre vores vejrvisning.

Men så godt som Yahoo's data er, var det kun lige så præcist som det sted, vi kunne foder det fra hjemmesiden, og på grund af svaghederne i Microsofts Internet Explorer kunne vi ikke bruge geolocation til at hente en nøjagtig placering for alle at surfe på hjemmesiden. Vi var derfor nødt til at afvikle den næste bedste ting og bruge hjemmesiden IPInfoDB til at hente nærmeste hovedstad eller nærmeste store by baseret på brugerens IP-adresse.

Over USA resulterer dette normalt i hovedstaden i, hvilken tilstand den person, der kigger på hjemmesiden, er bosiddende. Her i Storbritannien er den som standard til London, uanset hvor i Storbritannien personen er baseret; Forhåbentlig vil Microsoft en dag komme i gang med resten af ​​browser verden og tillade os at bruge geolocation.

Ved at bruge brugerens IP-adresse og indtaste det i IPInfoDB kunne vi ekstrapolere landet, staten eller provinsen og byen eller byen på den person, der kigger på hjemmesiden. Feeding dette i Yahoo API gav os det aktuelle vejr for den pågældende placering.

Solnedgangs- og solopgangstiderne er nøjagtige hver dag og beregnes i flyve baseret på længdegrad og breddegrad, også afledt af Yahoo's Weather API.

Endelig er der månens fase, som, selvom den er baseret på bare datoen som en variabel, viste sig at være den mest komplicerede beregning af alle.

Lad det sne, lad sne, lad det sne ...

Det er teorien. Nu, for hvordan det var gjort.

Det første skridt var at splitte vejrtyperne hentet fra Yahoo! ind i en matrix, som vi kunne bruge til at kontrollere effekterne på hjemmesiden. Hver af Yahoos 47 forskellige vejrtyper har sit eget array, som vi opdelte i fire tal. Det første sæt af tal dikterer sky dækningen, lige fra en klar dag til mørke tunge skyer. Det andet tal er for regnen, lige fra ingen regn til voldsom nedbør. Det tredje nummer er til forskellige yderligere vejrtyper, som f.eks. Sne og lyn. Endelig er det fjerde nummer for, hvad vores designer Steven kalder "sauceffekter", såsom tåge, støv og tåge.

$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);

For at beholde den allerede tunge kode og billedbehandling til et minimum valgte vi at genbruge de samme billeder, hvor det er muligt. For eksempel er der kun en regn grafik, og den styres ud fra information fra Yahoo !. Hvis regnskilden skal være lys, er den indstillet med en lavere opacitet for at gøre det lettere:

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;}

Pas på månen

Vi snuble, heldigvis, på beregningerne for månens cyklus på Stephen A. Zarkos 'blog . I overensstemmelse med vores ønske om at holde billeder til et minimum blev månenfasen lavet med et pixelark, der viser 10 forskellige faser af månen. Ved hjælp af Zarkos 'beregninger vælger den følgende kode den rigtige del af pixelarket for at vise, så den korrekte månecyklus altid vises på vores hjemmeside.

background-position: px 0;

Se solnedgangen i realtid

Den sidste del af projektet, og den mest visuelt spændende, er real-time solnedgang og solopgang. Som nævnt bruger dette længden og bredden af ​​den nærmeste hovedstad for den person, der ser på hjemmesiden for at ekstrapolere solnedgangen og solopgangstiderne for dem. Det betyder, at nogen, der kigger på hjemmesiden i Los Angeles, vil se solen stige og sætte tre timer efter at nogen kigger på samme website i New York.

Solnedgangen og solopgangen består af tre separate skylineeffekter, der opløses i hinanden i rækkefølge. Til solnedgangen opløses dagscenen langsomt ind i en orange scene, inden den opløses til en nat scene. Mens dette sker, begynder en solgrafik (som altid er til stede over browseren) at falde ned og "sætte". Hele processen tager præcis 300 sekunder.

Solnedgangstiden (afledt af længdegrad og breddegrad) konverteres til en Unix tidsstempel, som derefter gemmes som en variabel. Den aktuelle tid er også omdannet til en Unix tidsstempel, og forskellen mellem de to gange bruges til en jQuery timeout-funktion. Dette skaber overgangen mellem dag og nat temaer.

jQuery('#daytime').fadeOut(200000, 'linear', function() {jQuery('#sill').fadeOut(100000, 'linear', function() {});jQuery('#sunset').fadeOut(100000, 'linear', function() {});});   

De standard vejrvirkninger, uanset hvad de måtte være, fortsætter med at spille ud, mens solen går ned og stiger. Dette kan føre til nogle ret smukke overgange, især når det regner meget hårdt.

Du kan se koden i aktion på Engage Website .

Vores prognose for i morgen

Da dette er et system, vi har udviklet os, ser vi løbende på måder at forbedre det på, og vi har to funktioner, vi så ud til at tilføje, siden vejrsystemet blev lanceret i august i år.

Den første er noget, vi lige har tilføjet; en cookiebaseret placeringsindstilling, hvorved besøgende på hjemmesiden kan gøre deres vejrvisning mere præcis ved at indtaste deres by, by eller postnummer for at hente specifik vejrinformation for deres område. Dette var faktisk meget nemt at gøre som Yahoo's vejr API accepterer postnumre og byer som input, og det gemmer et opkald til iponfodb.com. Vi har testet dette med forskellige byer fra hele verden, fra så langt som Nord Canada til Antipodesøerne ud for New Zealand kysten - så du kan se, hvordan vejret er som overalt i verden.

Den anden funktion, vi introducerer i nytår, er en kontrolboks, så besøgende kan implementere vejrvirkningerne som de passer, så kombinationerne af forskellige vejrtyper kan ses uanset det egentlige vejr. For eksempel vil besøgende kunne øge intensiteten af ​​regnen fra 0% til 100% i trin på 10%. Dette vil også indeholde en trigger til solnedgangen og solopgangen, så alle kan spille ved at være Ed Harris fra The Truman Show og skabe en solopgang, når de vil.

Har du brugt Yahoo! S vejr-API? Hvad byggede du med det? Lad os vide i kommentarerne nedenfor.

Fremhævet billede / miniaturebillede, vejr billede via Shutterstock.