Værradar-gadget for Vista og Windows 7

Siste oppdatering:
Fant endelig ut hvordan man får unngått at IE 8 cacher s.a. XmlHttpRequest ikke oppdateres for GET-kall, med følgende triks:


xmlhttp.open("GET", url, true);
now.setFullYear(2009, 1, 1);
xmlhttp.setRequestHeader("If-Modified-Since", now);


Dette sørger for at caching nå endelig unngås i gadgeten. Nå er det kun to bilder som stadig overskrives med nyeste data fra Yr.no og man får alltid nyeste tilgjengelige data pga caching endelig er slått av! Trikset over sender en request header i XmlHttpRequest kallet. Kravet til verdien for If-Modified-Since er at det er en dato som er tidligere enn nå. Jeg har satt denne til 1. januar 2009 (litt random, så lenge den er historisk så fungerer cachingen med at den endelig SLÅS AV.

Dermed får man oppdaterte værradar-data, slik som ungdommen liker..

Jeg har oppdatert gadgeten WeatherGadgetYr til versjon 1.2 som dere nå kan laste ned
under. Dermed så er gadgeten ferdig laget, men er det ønsker om videreutvikling av den, si i fra!

Mvh Tore Aurstad

Last ned WeatherGadgetYr som jeg har laget fra direkte link her:

Værradar gadget versjon 1.2..



Installasjonsprosedyre:

1. Last ned filen fra lenken over (høyreklikk og lagre mål som i IE8).
   
2. Gå til mappen du lastet ned filen, som er en zip fil.
   
3. Døp om filen til en fil som har filetternavn .gadget
   
4. Dobbeltklikk på .gadget filen for å starte installasjonsprosedyren av gadget.
   

Et alternativ er å heller gjør dette:

1. Last ned filen fra lenken over (høyreklikk og lagre mål som i IE8).
   
2. Gå til mappen du lastet ned filen, som er en zip fil.
   
3. Pakk ut innholdet til mappen: %userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets\WeatherRadarYr.gadget
   

Etter å ha installert, klikk på "+"-knappen i Windows Sidebar i Vista (Windows 7 har en annen måte å gjøre dette på, men støtter også gadgets!) og velg så gadgeten.

Gadgeten kan lett velges blant alle gadgeter på systemet. Dette er testet i Windows Vista.
For å legge den til, velg Værradar Yr.no gadgeten. Ikonet som vises er av radardomen
til værradaren Radar Rissa i Midt-Norge.



Værradardata vises som i Gadget i Windows Vista Sidebar. Flyout vises til venstre,
som aktiveres når man klikker på Gadgeten. Klikker man på flyout igjen så lukkes
flyout. For å redigere innstillinger klikker man på skiftenøkkel ikonet som for alle
andre Gadgets.


Det er mulig å velge blant mange værradarstasjoner og om man
vil hente en animasjon eller et stillbilde som viser nyeste værradardata.


Gadgeten docker inn i sidebar sømløst.


Last ned WeatherGadgetYr som jeg har laget fra direkte link her:

Værradar gadget versjon 1.1..
Lisensen er GPL Open Source. Gi meg gjerne
beskjed om når du bruker Gadgeten og tilbakemeldinger om evt. feil og forslag
til forbedringer. Filen .gadget i lenken over er rett og slett en .zip fil
med et spesielt fil etternavn og inneholder all HTML og Javascript som inngår.
Du kan gjerne se innholdet til gadgeten hvis du går til filmappen:

%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets\WeatherRadarYr.gadget\radarImages

Jeg har benyttet Visual Web Developer 2008 Express til å utvikle. Det er mulig å hente ned templates for å utvikle gadgets, men jeg utviklet gadgeten stegvis. Det er sikkert slik at når man har laget en gadget så blir den neste mye enklere å lage. Det er lite som må til av kode for å lage en HTML/Javascript gadget og eneste kravet er at man er noenlunde stø i Javascript og forstår litt om HTML og HTML Document Object Model (DOM).

Jeg har laget en Gadget som kan benyttes i Windows Sidebar som viser værradar data fra web-servicen The Weather API som benyttes på http://www.yr.no/ . Gadgeten er testet i Windows Vista, men skal også virke i Windows 7. Med denne gadgeten kan man på en enkel måte få vist værradar data fra Yr.no i Windows Sidebar.

Du kan lese om The Weather API sin dokumentasjon av funksjonaliteten for å hente ut
bilde eller animert bilde av nyeste værradardata fra DNMI og NRK her:
WeatherAPI Radar 1.2

Gadget.xml, manifestfilen ser slik ut:


<?xml version="1.0" encoding="utf-8" ?>

<gadget>

<name>Værradar Yr.no</name>

<namespace>tore.aurstad.net</namespace>

<version>1.1.0.0</version>

<author name="Tore Aurstad">

<info url="http://tore.aurstad.net" />

</author>

<copyright>© 2007</copyright>

<description>Viser værradar-data for alle regioner av Norge som dekkes helt eller delvis

av vær-radarer. Klikk på minatyrbildet for å vise siste oppdaterte værbilde for din

region i Norge. Det er også mulig å vise animasjoner og værradar for hele Norden.

</description>

<hosts>

<host name="sidebar">

<base type="HTML" apiVersion="1.0.0" src="weatherradar_yr.html" />

<platform minPlatformVersion="1.0" />

<permissions>Full</permissions>

</host>

</hosts>

<icons>

<icon width="32" height="32" src="weatherradar.jpg" />

</icons>

<defaultImage src="weatherradar.jpg" />

</gadget>




I manifest filen over spesifiserer man en host av type HTML i sidebar (name) og
setter src lik en hmtl fil weathergadget_yr.html. Dette er hoved html-filen i gadgeten. Denne filen vil
sette opp gadgeten vha. Javascript og linke opp til to html filer settings.html og
flyout.html. En settings fil viser GUI-et for å konfigurere gadgeten, altså det som vises når man velger skiftenøkkelen på en gadget. En flyout fil vises når man klikker på et element i gadgeten.

Dette settes altså opp i javascript slik:

System.Gadget.settingsUI = "settings.html";
System.Gadget.Flyout.file = "flyout.html";


Denne koden skal inn i en script blokk for javascript og kalles når hoved html-filen
er lastet.

I denne gadgeten oppstod det et behov for å lagre bildefilene som returneres fra web services. Det er to bildefiler som lagres, en som viser et stillbilde som vises i sidebar og et bilde som viser et stillbilde eller et animert bilde i større størrelse i flyout visningen når man klikker på gadgeten. Opplever du at gadgeten ikke oppdaterer likevel værradardataene, må du tømme cachen for nettleseren. Dette skal nå dog være håndtert.

For å skrive data i samme mappe som gadgeten, dvs. lagre bildene benyttes ADODB.Stream ActiveXObject. I tillegg benyttes et annet ActiveXObject, XmlHttpRequest eller Ajax om du vil. Funksjonen som henter opp værdataene er skrevet helt i Javascript og ser slik ut:



function displayWeatherRadarData() {
var xmlhttp = false;
var now = new Date();
try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
var url =
"http://api.yr.no/weatherapi/radar/1.2/?radarsite=" + selectedRadarSite + ";type=" +"Image" + ";width=174";
//xmlhttp.setRequestHeader("Content-type", "image/gif");
xmlhttp.open("GET", url, true);
var ret;
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
try {
var path = "radarData_small.gif";
var stream = new ActiveXObject("ADODB.Stream");
stream.type = 1; //Binary
stream.open();
stream.write(xmlhttp.responseBody);
//Create if needed and overwrite if necessary

stream.SaveToFile(System.Gadget.path + "\\" + path, 2);
stream.close();
} catch (e) {
// Handle error here
document.write("Error occurred: " + e);
}
radarImg.src = "radarData_small.gif";
} //if
}
}
xmlhttp.send(null);
}
</script>



Javascript koden over demonstrerer både hvordan man skriver til fil i mappen til en gadget vha. ADODB.Stream objektet og hvordan man gjør et grunnleggende XmlHttpRequest
for å hente asynkront data over internett. Dette kan nok benyttes til mer generelt å hente opp data asynkront fra ulike REST-baserte providere. Best av alt det virker.

Oppdatert informasjon:
Cachingen ser ut som den ikke er mulig å slå av for bildene i gadget, uten at
man lagrer hvert minutt et nytt navn på radarbildet til flyouten. Alle bilder
blir nå lagret i undermappen radarImages hver gang man aksesserer den for å se
radardata. Hvis man ofte bruker gadgeten kan man med andre ord slette bildene i mappen:

%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets\WeatherRadarYr.gadget\radarImages

Hvert bilde tar litt plass, er det en animasjon tar et bilde rundt ca. 1 MB. Dermed kan man greit slette radarbildene etterhvert. Jeg skal legge inn funksjonalitet for å slette cachen (alle .gif filene som er i radarImages mappen) etterhvert i innstillingene for gadgeten.