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.

NKSilverlight - Mashup

NKSilverlight er en mashup som kombinerer Google Maps, Statens kartverkdata, Silverlight og Javascript for å presentere kartdata for Norge med flere lag samtidig i en nettleser.

NKSilverlight står for Norgeskart Silverlight. Mashupen over er dog ikke bare en Silverlight applikasjon, til venstre ser man et tradisjonell HTML Div element som viser Google Maps. Google Maps er her en viewer for Statens Kartverk sine data. Man kunne forsåvidt bruke Microsoft Virtual Earth også for samme effekt. Vha. IsWindowLess satt til true i silverlight og css absolutt posisjonering klarer man å vise HTML og Silverlight side ved side. Kommunikasjonen mellom de to gjøres med standard HTML Bridge i Silverlight, HtmlWindow.Page.Invoke.

Jeg har laget en mashup som baserer seg på data fra Statens Kartverk og har en kort omtale
av tilgjengelige data her: http://www.statkart.no/?module=Articles;action=Article.publicShow;ID=14165module=Articles;action=Article.publicShow;ID=14165
Mashupen bruker Google Maps på web som Viewer og kartdataene fra Statens Kartverk lastes inn i Mashupen som GTileLayerOverlay objekter i GMap2 objektet, mye av koden er i Javascript og kan leses hvis man velger View Source i Mashupen. Jeg anbefaler for teknisk interesserte å lese om GTileLayerOverlay her: http://code.google.com/intl/no/apis/maps/documentation/overlays.html#Tile_Layer_Overlays
I tillegg har Mashupen brukt Silverlight 3 for å gi et interessant GUI som lar en mikse de ulike lagene som Statens Kartverk tilbyr for de ulike Cache-tjenestene sine. Man kan med en Slider kontroll styre opacity, altså gjennomsiktighet fra 0 til 100 prosent for de ulike lagene. Ønsker man å vise f.eks. to lag så kan man slå på 50 prosent på begge. Dermed er det mulig å kombinere
sjøkart og topografiske kart for Norge i Google Maps. Dette er mye bedre kart enn standardkartet til Google Maps som man fort vil synes er nakent i forhold. Statens kartverk dekker kun Norge, med unntak av det siste laget som er et europakartlag. Bruk avkrysningsboksene for kjapt å sette opacity til 0 eller 100 (skru lag av og på). Jeg har zippet hele prosjektet, som jeg har laget i Visual Web Developer Express 2008 som et Silverlight Application 3 prosjekt for de av dere som vil se på koden. Dette er en mashup som kun er et demoprosjekt, det er ikke optimert eller testet ut nøye. Det er morsomt å se at man kan slå sammen kartdata fra Statens Kartverk på en så grei måte, det tok meg kun noen få timers arbeid å lage Mashupen. Jeg vil også gjerne kombinere mashupen med data fra andre leverandører som Yr.no, f.eks. snødybde m.m. Er du interessert i disse temaene som meg er det kjempefint å få litt tilbakemelding, kanskje vi kan samarbeide om mashuper og mulige prosjekter rundt dette?

Til slutt er det kanskje interessant å laste ned prosjektet også som en zippet fil for Visual Studio 2008 Express Silverlight application prosjektet og se en live demo av mashupen.

Nedlasting av NKSilverlight prosjektet [ZIP, 253 kb]:

http://tore.aurstad.net/NKSilverMashup/NKSilverMashup.zip

Instruksjoner: Pakk ut filene, åpne NKSilverMashup.sln Solution filen, høyreklikk på NKSilverMashupTestpage.html filen i NKSilverMashup.web og velg Set as Start Page.
Trykk så på F5 for å snurre film. Du vil få opp NKSilverMashup omtrent som i skjermbildet over, man starter på lokalisering Steinkjer og viser 50% Topografisk Norgeskart 2 WMS og
50% Sjøkart Hoveserien 2 WMS data i Google maps utsnittet man ser.

Har du ønsker om å videreutvikle prosjektet er det fint om du kan kreditere meg i tillegg. Jeg vil også gjerne ha beskjed om dette først. Hvis du ønsker å stille spørsmål om prosjektet, gi gjerne tilbakemelding, gjerne nedenfor eller en e-post til: tore.aurstad@ntebb.no .

En genial ting med denne mashupen er at den består kun av en .HTML fil og en .XAP fil for Silverlight prosjektet, altså kun to filer. Data hentes som sagt av Statens Kartverk og vieweren er Google maps. Dermed er dette prosjektet en mashup, altså benytter seg av eksterne tjenester. Det blir spennende å se om det går an å teste og videreutvikle mashupen til også vise andre ting. Google maps har en spennende og rik API som er interessant å eksperimentere med.

Til slutt og ikke minst, LIVE DEMO! Klikk på lenken nedenfor:
http://tore.aurstad.net/NKSilverMashup/NKSilverMashupTestPage.html

Hva skal bloggen inneholde?

Bloggen vil inneholde informasjon primært om teknologi, mer spesifikt .NET prosjekter og web-teknologi som jeg har gjennomført og gjerne ønsker diskusjon rundt. I tillegg kan det bli litt personlig informasjon om meg selv og noen bilder, men fokus på bloggen er primært teknologi.