Sol Måne : Windows Vista Sidebar gadget

v1.3 tilgjengelig.



Versjon 1.3:
Hei, da er fiks laget hvor tallet 0 paddes foran dager og måneder med verdi mindre enn 10 mot SunRise metoden. Fikset også en feil i switch for visning av ikon for månefase, case "Waning gibbous".


Sol Måne gadget v 1.3.
Last ned versjon 1.3 nå over. Samme installasjonsmetode som for v1.2.


Versjon 1.2:
Hei, da er fiks laget for automatisk oppdatering av data for gadget og ny versjon laget.
Gadget vil hente nye data fra Yr.no sin Sunrise web service metode en gang i timen!
Last ned versjon 1.2 nå.

Installasjonen er på samme måte som for versjon 1.1., velg 'Erstatt' eller 'Oppgrader' når installasjonen av gadget spør deg om du vil oppgradere, i tilfelle du har lastet ned v1.1. tidligere.

Last ned Sol Måne v1.2. gadget for Windows Vista Sidebar!

Sol Måne gadget v 1.2.

Last ned Sol Måne v1.1. gadget for Windows Vista Sidebar!

Sol Måne gadget v 1.1.


Installasjonsprosedyre:

1. Last ned filen over ved å høyreklikke og velge 'Lagre mål som...'
   
2. Åpne mappen til filen du nettopp lastet ned (SunMoonGadgetv11.zip)
   
3. Endre filnavnet til å et etternavn (file extension) som ender på .gadget
   
4. Dobbeltklikk på filen i Windows Explorer for å starte installasjonsprogrammet
   for å legge til gadget.
   
5. I Windows Vista / Windows 7 Sidebar, klikk på pluss symbolet.
   
6. Velg den nylig installerte gadget blant øvrige gadgets med teksten 'Sol Måne' .
   

Etter installasjonen har gjort seg ferdig er filene installert som en undermappe til mappen:
%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets

Gadget skal nå være valgbar i gadget-utvalgssiden:



Det første man må gjøre etter å ha installert, er å sette opp lokalisering for å få vist riktig informasjon. Klikk på skiftenøkkel symbolet for å åpne innstillingene og skriv så inn lokaliseringen du befinner deg på og ønsker å vise informasjon for. Dette vil se slik ut på siden for innstillinger av gadget (settings.html):



I eksempelet vist på bildet over er Oslo satt opp som lokalisering for gadget. Breddegrad og lengdegrad hentes med web service kall mot Google Maps, som søker opp stedsnavnet og viser samtidig i et kart lokalisering som er skrevet inn.

Måten dette hentes ut på i Javascript vises i følgende javascript-kode:


function geoCodeAddress(address) {
var geocoder = new GClientGeocoder();
geocoder.getLatLng(address, function(point) {
if (!point) {
alert("Lokaliseringsøk returnerte tomt resultat!");
}
else {
map.setCenter(point, 10, G_NORMAL_MAP);
lblLatitude.innerHTML = map.getCenter().lat().toFixed(2);
lblLongitude.innerHTML = map.getCenter().lng().toFixed(2);
return point;
} //if-else
});
}

(Syntax coloring: Google Prettify http://code.google.com/p/google-code-prettify/downloads/list).

I koden over anvendes metoden getLatLng i klassen GClientGeocoder i Google Maps
API-et og address parameteret til funksjonen er en enkel tekststreng som er den
teksten man skriver inn i tekstboksen. Man søker så opp lokaliseringen vha. getLatLng kallet og setter point objektet i den anonyme delegatfunksjonen til sentrum av Google Maps kartet (GMap2) objekt. Dette er en meget brukervennlig funksjonalitet for en bruker for å skrive inn sin lokalisering og samtidig se kjapt at programmet har oppfattet hvor man befinner seg. I tillegg slipper man spesialtilfeller hvor man setter en beliggenhet som ikke har et unikt stedsnavn, ved at man ser at kartet tar feil, da anbefaler jeg å skrive inn et annet stedsnavn som er rett i nærheten som er unikt. Det som gjøres i innstillingssiden for gadget er å sette lengdegrad og breddegrad for denne gadgeten. Klokkeslettet som gadget benytter er alltid satt til nå (new Date() i Javascript med andre ord).

I versjon 1.2. vil en fix komme som setter opp en timeout på en time s.a. man får oppdatert gadgeten en gang i timen.

Jeg har implementert gadget så den benytter data basert på web services fra Yr.no og Google Maps. Gadgeten heter Sol Måne og viser et ikon for månefase for gjeldende dag for en gitt beliggenhet, som brukeren setter opp ved å gå på innstillingene for gadgeten.
I tillegg vises klokkeslettet for tiden månen og solen går opp og ned. Programmet håndterer midnattsol og mørketid for soloppgang og solnedgang. Man kan når man vil endre sin beliggenhet s.a. man får oppdaterte klokkeslett tider for sol opp og ned og måne opp og ned. Dette er en nyttig gadget som alltid gir deg tilgang til disse tidene. Det kan godt hende jeg legger inn enda mer informasjon som Sunrise metoden tilbyr i versjon 1.3 og evt. fixer som trengs.

Google Maps API nøkkel - justering trengs?
I tillegg så er det satt en fast Google Maps API nøkkel i gadget (for localhost). Opplever du at du ikke får satt beliggenheten riktig pga. feil Google Maps, så må duendre API-nøkkel ved å gå til installasjonsmappen (Astropage.gadget for meg):

%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets\Astropage.gadget

Endre så api nøkkelen i settings.html, søk etter 'key' i denne filen. Google Maps API nøkkel får du tak i her:

http://code.google.com/intl/no/apis/maps/signup.html

Merk dog at testing har vist at dette ikke er nødvendig å gjøre dog, utvikling og testing er gjort i Windows Vista.

ActiveX teknologi i gadget

1. Når man lager gadget i Windows sidebar må man ofte ta i bruk ActiveX. XmlHttpRequest kall benytter ActiveX objektet MsXml2.XMLHTTP. Dette lar en gadget foreta Ajax kall.

2. Når man lagrer en fil for gadget i Windows sidebar benyttes ADODB.Stream som også er et ActiveX objekt .

3. Når man skal parse Xml filen som resultatet SunRise metoden returnerer er lagret i benyttes ActiveX objektet Microsoft.XMLDOM.

Følgende javascript kode i gadgeten viser alle disse tre ActiveX objektene i bruk:



function displayWeatherDataSunrise(selectedLatitude, selectedLongitude) {
var xmlhttp = false;
var now = new Date();
try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
var dateString = now.getFullYear().toString() + "-" + (now.getMonth() + 1).toString() + "-" +
now.getDate().toString();

var url =
"http://api.yr.no/weatherapi/sunrise/1.0/?lat=" + selectedLatitude + ";lon=" +
selectedLongitude + ";date=" + dateString;

//lblMoonphase.innerHTML = dateString;

//xmlhttp.setRequestHeader("Content-type", "image/gif");
xmlhttp.open("GET", url, true);
now.setFullYear(2009, 1, 1);
xmlhttp.setRequestHeader("If-Modified-Since", now);
var ret;
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
//Display the results.
ret = xmlhttp.responseText;
//document.body.style.backgroundColor = 'yellow';
try {
var path = "astrodata.xml";
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();
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.onreadystatechange = readAstroData;
xmlDoc.load(System.Gadget.path + "\\" + path);
} catch (e) {
// Handle error here
document.write("Error occurred: " + e);
}
//document.body.style.backgroundColor = 'green';
} //if
}
}
xmlhttp.send(null);

}



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