Thursday, 28 January 2010

Slider-kontroll på web


Jeg har testet ut Scriptaculous, som er et javascript bibliotek myntet på gui og effekter i gui. Det har blant annet en slider kontroll, som jeg har laget et testprosjekt for. Slideren ser meget elegant ut og er vel så god som den som
Silverlight kan tilby. Best av alt er at man har tilgang til HTML DOM-treet og lett kan lese ut og sette verdier til Slideren.

For å laste ned testprosjektet, last ned her [ZIP-fil,101kB].

Start prosjektet på følgende måte:
* Pakk ut Zip-filen TestSliderScriptaculous.zip i en midlertidig mappe.
* Åpne denne mappen og dobbeltklikk på .sln filen.
* Når Visual Studio er lastet (Jeg har anvendt Visual Web Developer 2008 Express):
* Trykk på F5 for å snurre film.
* Standard nettleser skal så åpne og man presenteres siden Default.aspx hvor jeg har
implementert testprosjektet.

Øverst i denne artikkelen ser du et skjermbilde hvordan slideren ser ut. Like elegant som den du ser i Mac OS X, eller hva? Slideren er selvsagt interaktiv. Klikk og dra på slider handelen (håndtaket) og slipp for å sette en verdi for slideren. For dette testprosjektet har jeg satt 0 og 100 som verdiintervallet og alle titallsverdier som diskrete verdier. Hvis man ikke setter noen verdier her vil man med slideren spesifisere en verdi mellom 0 og 1 som et flyttall.

Dette er en meget kraftig måte å presentere en slider på i web. Man benytte denne kontrollen i for eksempel en Ajax-aktivert Web 2.0. applikasjon, for eksempel for å sette en tallverdi, e.g. 0 til 100 prosent gjennomsiktighet i en bilde-applikasjon eller parametere inn til et filter i en bilde-applikasjon.

Script.aculo.us inneholder nok mange andre godbiter, jeg har ikke fått testet ut rammeverket noe mye enda. Sliderkontrollen var meget lett å få til å virke, det tok meg kun 2-3 timer å få ferdigstilt testprosjektet. Om noen kjenner andre gode demoer av Script.aculo.us, si i fra. Litt kjapt nettsøk viser at det er tonnevis av demoer der ute.

Dette testprosjektet inneholder Script.aculo.us i Script mappen, som er rett og slett noen få .js filer.

Script.aculo.us nettside (inkluderer nedlasting):

Friday, 8 January 2010

Stor suksess med tidligere prosjekt hos NOIS!

Jeg søkte nettopp på nettet etter 'NOIS' og 'WORM' som er et akronym for 'Web Office Resource Management'. Jeg kom over en artikkel skrevet av Thor Hestnes i InnoDesign med tittel "Hull i veien? Klag på nettet!". Den tar for seg Samferdselsetaten i Oslo sin webløsning WORM, som er skrevet av meg når jeg jobbet som konsulent i NOIS i 10 måneder. Nå viser det seg at Samferdselsetaten har hatt stor glede av denne webløsningen! Ikke verst!

Løsningen er publisert her:
http://melding.samferdselsetaten.oslo.kommune.no/

Artikkelen er så rosende og full av lovord om webapplikasjonen jeg laget at jeg nesten datt av stolen :-)

Løsningen er laget med ASP.NET, programmert i VB.NET og Javascript er anvendt en god del.

Litt skryt kan man bare se her!

"Hull i veien? Klag på nettet!
Thor Hestnes
02.09.2009 20:11


Noe i veien der du ferdes i Oslo?
Meld fra til samferdselsetaten på nettet!


Samferdsels-etaten i Oslos satsing på en tettere kommunikasjon med byens borgere, er online. Etatens kundetorg på nettet er i ferd med å bli en suksess etter bare noen måneders drift.



Ved hjelp av Norconsult Informasjonssystemers WinMap-baserte, skreddersydde meldingssystem kan Oslos innbyggere nå på en enkel måte gå inn på nettet og melde fra om kommunale samferdselsproblemer som opptar dem.



Ekstraservice, det er samferdselsetaten det

Men ikke bare det, forteller etatens prosjektleder Stein Arild Sandnes: ― Folk kan også følge med om noe fysisk blir gjort med «klagen». Det være seg reparasjoner av hull i veien, gatelys, signalanlegg, eller brøyting, strøing, salting osv. Denne ekstraservicen er vi ganske alene om på kommunalt plan. Selvbetjeningen innfører en mye tettere brukerdialog og fremmer bedre tilfredshet med kommunens tjenester.



Ambisiøs orm

WORM heter programnyvinningen. Web Office Resource Management står det for og beskriver egentlig godt ambisjonen med kommunens satsing. Systemet er nemlig ment å være mye mer enn bare et meldingssystem. I WORM ligger også moduler for planlegging av graving, asfaltering, mindre byggearbeider osv. Det er med andre ord et oppfølgings-, kontroll- og beslutningsstøttesystem for kommunen. Et system som de kan bruke til å styre og utnytte ressursene bedre med.





Kartbasert nettløsning

― Det hele startet i 2005, forteller Sandnes. ― Etaten ønsket et nytt meldingssystem for å kunne forbedre kommunikasjonen med publikum og entreprenørene som utfører arbeidet på vegne av kommunen. Etaten bestemte seg for å bruke et kartsystem som informasjonsbærer for å gjøre brukerdialogen og oppfølgingen enklest mulig.



Valget falt på NOIS (Norconsult Informasjonssystemer) som utviklingspartner og WinMap som kartmotor i løsningen.



― Ved å klikke deg inn på den veiviserbaserte kartapplikasjonen på etatens nettside velger du først meldingstypen fra en meny, forklarer Sandnes og prøver å tegne et bilde av hvordan systemet fungerer. ― Dernest spesifiserer du nøyaktig hvor på kartet problemet ligger, gir en kort beskrivelse av hva saken dreier seg om, og klikker til slutt meldingen direkte til etatens kundetorg. Her blir de løpende behandlet i henhold til gitte behandlingsregler og formidlet til rette ansvarlige i etaten, som til slutt utsteder arbeidsordre til avtalefestet entreprenør som utfører oppdraget. Alt er helt dynamisk.



Genialt enkelt, helt enkelt

― Når jobben så er gjort er det entreprenørens plikt å gå inn på det samme systemet og endre status slik at det røde merket på kartet endres til grønn, som beskriver at jobben er utført. Noe også publikum kan se, poengterer Sandnes.



Og alle hjerter gleder seg… Ja, for dette har i følge Sandnes ført til mange konstruktive tilbakemeldinger fra publikum i løpet av vinteren og våren. Og samtidig positive erfaringer for samferdselsetaten.



Synliggjør arbeidet

Nesten 2800 meldinger ble registrert i løpet av 3 ½ måned i vinter. Mye snøfall voldte selvsagt mange henvendelser. Nesten 1800 dreide seg om brøyting, ca 600 rapporterte om hull i veien…

― Systemet gir oss mye mer korrekt innrapportering og det synliggjør jobben som gjøres av entreprenørene, fortsetter Stein Arild Sandnes. ― Med oversiktlig statistikk kan vi enkelt sammenstille og kontrollere arbeidsområder og tiltak.



Lønnsom pionervirksomhet

― Systemet er ganske komplisert med avansert filtreringslogikk, fortsetter han. ― Det ligger en stor applikasjon rundt kartmotoren. Systemet er unikt. Det er rett og slett pionervirksomhet det vi gjør.



― Men det fungerer utmerket. Vi har nesten ikke hatt nedetid siden oppstarten. Og publikumstilbakemeldingen er veldig bra. De er imponert over ekstraservicen vi gir dem.



― For kommunens del får vi nå en mye bedre totaloversikt og sparer ressurser både på den ene og andre måten, mener Sandnes. ― Effektiviteten og kontrollen er bedret betraktelig. Ikke minst ved enkel gjenfinning av informasjon og gjennom verdifull statistikk. For kontrollseksjonen, som er en hyppig bruker av systemet, er det betydelig enklere å følge opp og kontrollere at tingene utføres i henhold til kontrakt.



Enklere hverdag

― Kundetorget som til daglig jobber mest med meldingssystemet, har for øvrig fått fordelen av kun én applikasjon å forholde seg til. Et stort pluss og en drastisk bedring av situasjonen, slutter Stein Arild Sandnes og ser frem til å tilfredsstille enda flere, nye behov som underveis har dukket opp.



Mandatet er nemlig utviklet ytterligere etter de gode resultatene. Oslos ansatte og borgere kan forhåpentlig vente seg en stadig enklere hverdag…"


Må si meg fornøyd med en slik omtale.

Og det er visst mer skryt i vente, les bare Aftenposten...

http://www.aftenposten.no/nyheter/oslo/article3317321.ece

Det har visst blitt bedre veger i Oslo, blant annet pga. meg.

Monday, 28 December 2009

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

}