Under 2006, under arbetet vid en designbyrå i Cardiff, Wales, tänkte jag på en idé att presentera de nuvarande väderförhållandena utanför vårt kontor på vår hemsida. Jag ville göra vår hemsida fullt engagerande och visa våra besökare och kunder vad vi upplevde i verkliga livet varje dag, i realtid.
Efter att ha gjort en del omfattande forskning upptäckte jag att den bästa utgångspunkten för detta är Yahoo! S Väder-API, eftersom det ger väderleksförhållanden i ett konsekvent, användbart format. Vid den tiden var det enda sättet att verkligen representera vädret på en webbplats med hjälp av Flash. Utvecklingstiden ensam var tillräcklig för att skrämma idén från företagets regissörer, och det rörde sig aldrig förbi konceptet.
Nu, sex år senare, och som teknisk chef för mitt eget företag, reviderade jag idén. En sökning runt olika webbplatser, bloggar och forum avslöjade att, även sex år sedan, har ingen faktiskt gjort något så här, så vi skulle behöva skapa koden för att göra det. Även under de sex år som tanken var tänkt har mina ambitioner ökat. Jag vill inte längre att webbplatsen ska visa vädret utanför vårt kontor - jag vill att det ska visa vädret utanför fönstret för personen som tittar på webbplatsen.
Jag skapade en önskelista med funktioner som innehåller live väder uppdateringar, solnedgång och soluppgångstider, dag och natt och jämn månecykler-och gav det till vår utvecklare Steven för att göra det så.
Återigen visade sig Yahoos Väder API vara den mest konsekventa och erbjuder mycket korrekta koder för olika vädertyper. Med denna information skulle vi kunna skapa en matris som skulle kunna styra vår vädervisning.
Men lika bra som Yahoos data är, var det bara lika exakt som den plats vi kunde mata den från webbplatsen, och på grund av felaktigheter i Microsofts Internet Explorer kunde vi inte använda geolocation för att hämta en exakt plats för alla som surfar på webbplatsen. Vi var därför tvungna att avgöra för nästa bästa sak och använda webbplatsen IPInfoDB för att hämta närmaste huvudstad, eller närmaste storstad, baserat på användarens IP-adress.
Över hela USA resulterar det vanligtvis i huvudstaden i vilken stat personen som tittar på webbplatsen bor i. Här i Storbritannien är den som standard till London, oavsett var i Storbritannien personen är baserad. Förhoppningsvis kommer Microsoft en dag att komma ikapp med resten av webbläsarvärlden och tillåta oss att använda geolocation.
Genom att använda användarens IP-adress och ange det i IPInfoDB kunde vi extrapolera landet, staten eller provinsen och staden eller staden på den person som tittar på webbplatsen. Att mata detta till Yahoo API gav oss det aktuella vädret för den specifika platsen.
Solnedgången och soluppgångstiderna är korrekta varje dag och beräknas på flygningen baserat på longitud och latitud, som också härrör från Yahoos Väder API.
Slutligen finns månfasen, som trots att den är baserad på just datumet som en variabel, visade sig vara den mest komplicerade beräkningen av alla.
Det är teorin. Nu, för hur det var gjort.
Det första steget var att dela upp de vädertyper som hämtats från Yahoo! in i en array som vi kunde använda för att kontrollera effekterna på webbplatsen. Var och en av Yahoos 47 olika vädertyper har sin egen array, som vi delade in i fyra nummer. Den första uppsättningen siffror dikterar molntäckningen, allt från en klar dag till mörka tunga moln. Det andra talet är för regnet, allt från inget regn till kraftigt nederbörd. Det tredje numret är för olika ytterligare vädertyper, till exempel snö och blixt. Slutligen är det fjärde numret för vad vår designare Steven kallar "gravyffekter", som dimma, damm och dimma.
$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);För att behålla den redan tunga koden och bilderna till ett minimum valde vi att återvinna samma bilder om möjligt. Till exempel finns det bara en regn grafik, och den styrs utifrån informationen från Yahoo !. Om regnskiktet behöver vara ljust, ställs det med en lägre opacitet för att göra det lättare:
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;}Vi snubblade, lyckligtvis, med beräkningarna för måncykeln på Stephen A. Zarkos blogg . I enlighet med vår önskan om att hålla bilder till ett minimum, gjordes månfasen med ett pixelark som visar 10 olika faser av månen. Med Zarkos beräkningar väljer följande kod den rätta delen av pixelarket som ska visas, så att rätt månecykel alltid visas på vår hemsida.
background-position: px 0;Den sista delen av projektet, och den mest visuellt spännande, är realtidssolnedgången och soluppgången. Som nämnts använder detta längden och bredden av närmaste huvudstad för den person som tittar på webbplatsen för att extrapolera solnedgången och soluppgångstiderna för dem. Det betyder att någon tittar på webbplatsen i Los Angeles kommer att se solen stiga och ställa tre timmar efter att någon tittat på samma webbplats i New York.
Solnedgången och soluppgången består av tre separata skylineeffekter som upplöses i varandra i följd. För solnedgången löser dagen scenen långsamt in i en orange scen, innan den löses in i en nattscene. Medan detta händer, börjar en solgrafik (som alltid är närvarande ovanför webbläsaren) att sjunka och "sätta". Hela processen tar exakt 300 sekunder.
Solnedgångstiden (härledd från longitud och latitud) omvandlas till en Unix tidsstämpel, som sedan lagras som en variabel. Den aktuella tiden ändras också till en Unix tidsstämpel, och skillnaden mellan de två gångerna används för en jQuery timeout-funktion. Det här skapar övergången mellan dag och natt teman.
jQuery('#daytime').fadeOut(200000, 'linear', function() {jQuery('#sill').fadeOut(100000, 'linear', function() {});jQuery('#sunset').fadeOut(100000, 'linear', function() {});}); De normala väderförhållandena, oavsett vad de kan vara, fortsätter att leka ut medan solen stannar och stiger. Detta kan leda till några ganska vackra övergångar, särskilt när det regnar mycket hårt.
Du kan se koden i aktion på Engagera webbplats .
Eftersom det här är ett system vi har utvecklat, tittar vi kontinuerligt på sätt att förbättra det och vi har två funktioner som vi såg att lägga till sedan väder systemet lanserades i augusti i år.
Det första är något vi just har lagt till; en cookiebaserad platsinställning, varigenom besökaren på webbplatsen kan göra deras vädervisning mer korrekt genom att ange deras stad, ort eller postnummer för att hämta specifik väderinformation för deras område. Detta var faktiskt väldigt lätt att göra som Yahoos väder API accepterar postnummer och städer som ingångar, och det sparar ett samtal till iponfodb.com. Vi har testat detta med olika städer från hela världen, från så långt bort som norra Kanada till Antipodes öarna utanför Nya Zeelands kust - så du kan se hur vädret är som överallt i världen.
Den andra funktionen som vi kommer att introducera i det nya året är en kontrolllåda så att besökare kan genomföra vädereffekterna som de passar, så kombinationerna av olika vädertyper kan ses oberoende av det faktiska vädret. Till exempel kommer besökare att kunna öka intensiteten av regnet från 0% till 100% i steg om 10%. Detta kommer också att inkludera en trigger för solnedgången och soluppgången, så alla kan spela på att vara Ed Harris från The Truman Show och skapa en soluppgång när som helst.
Har du använt Yahoo! S Väder-API? Vad byggde du med det? Låt oss veta i kommentarerna nedan.