Prosjektrapport Gruppe 23
Prosjektrapport Forord Hensikten med denne rapporten er å gi en introduksjon til oppgaven. Her vil det bli forklart hensikten med oppgaven og applikasjonens funksjonalitet. Brukergrensesnittet og mulige utvidelser av applikasjonen er også kort diskutert. I tillegg til denne innledningen består oppgaven av en produktrapport og prosessrapport. Førstnevnte inneholder dokumentasjon til produktet og i sistnevnte diskuteres det hvordan gruppen har arbeidet. Prosjektrapport Side 3
Oppgaven Oppgavebeskrivelsen fra ABB ABB ønsket en applikasjon som kunne gjøre tilgjengeligheten av P&ID diagrammer elektronisk og mer effektiv. Vi fikk i oppgave å lage en applikasjon som kunne vise disse diagrammene på en ryddig og oversiktlig måte. Brukeren skal ha mulighet til å skalere og panorere diagrammer for å se detaljer. Dette skal gjøre det enklere for flere operatører å samarbeide på et eller flere diagram. Applikasjonen skulle fungere på en horisontal flerbruker- og flerberøringsskjerm. Applikasjonen skulle utvikles i C# og Windows Presentation Foundation i.net rammeverket. Figur 1 P&ID diagram Hensikt med oppgaven På en oljeplattform går oljen igjennom mange prosesser før den kan brukes eller skal sendes videre. Prosesser blir visualisert ved hjelp av diagrammer et slikt diagram kalles et P&ID diagram, se figur 1. Et P&ID diagram beskriver mange detaljer om prosess- og instrumenteringsutstyret. De brukes for å dokumentere funksjonalitet til anlegg og utstyr. En plattform kan bestå av +/-1000 slike diagrammer, og hvert diagram inneholder henvisninger til andre diagrammer den henger sammen med. Hvis en operatør vil se på et utvalg av P&ID diagrammer må hun lete etter disse i et papirbasert permsystem. Hensikten med applikasjonen er at operatørene skal kunne finne frem til P&ID diagrammer elektronisk ved hjelp av en visuell oversikt over alle diagrammene. Gjennom den visuelle oversikten skal operatørene kunne bruke sin kunnskap og erfaring fra plattformen til å finne frem til et eller flere spesifikke diagram. Den visuelle oversikten gir anledning til å bruke erfaring gjennom at diagrammene er plassert etter tilnærmet geografisk plassering på plattformområdet og operatøren har gjerne kunnskap om hvor på plattformen de ulike prosessene foregår. Figur 2 viser tanken bak oppbygningen av oversikten over alle diagrammene, hvor operatører kan benytte sin erfaring fra oljeplattform. Prosjektrapport Side 4
Figur 2 Hvordan P&ID diagram kan plasseres i tilnærmet geografisk posisjon på en oljeplattform Figurer fremstilt i denne rapporten viser et eksempelkart over P&ID diagrammer for å vise hvordan et kart kan være oppbygd. Kartet består av ett eksempeldiagram, der all sensitiv informasjon er fjernet. Grunnen til dette er at vi ikke skal gi ut sensitiv informasjon fra ABB sine kunder. DiamondTouch berøringsskjerm Applikasjonen er utviklet for berøringsskjermen DiamondTouch. Figur 3 viser DiamondTouch skjermen, som har tilhørende matter for å registrere ulike brukere. Skjermen viser ikke skjermbildet selv, men er avhengig av at en projektor viser bildet på skjermen, se figur 4. Skjermen registrerer berøringer ved at en strømkrets sluttes i det brukeren tar på skjermen. Det vil si at det går en spenning ifra skjermen, igjennom brukeren, igjennom matten brukeren står på og tilbake til berøringsskjermen igjen. På denne måten kan berøringsskjermen bestemme hvilken bruker som berører hvor. Figur 3 DiamondTouch skjermen med matter Figur 4 DiamondTouch skjermen med projektor i taket Mer om hvordan skjermen registrerer berøringer lenger ned i denne rapporten under Utfordringer. Prosjektrapport Side 5
Applikasjonsoppbygning Skjermbildet skal vise et Radardisplay skal vise et Kart over P&ID diagrammer inneholder mange P&ID diagram Figur 5 Oppbygning av applikasjonen Figur 5 viser en enkel fremstilling av hvordan applikasjonens ulike komponenter er bygd opp og henger sammen. Figur 6 under viser hvordan skjermbildet, som består av et hovedkart med alle P&ID diagrammene, og et radardisplay ser ut ved oppstart i applikasjonen. Figur 6 Hele P&ID diagramkartet med radardisplay slik applikasjonen ser ut ved oppstart Radardisplayet, oppe til høyre i figur 6, er en nøyaktig kopi av hovedkartet. Radardisplayet har en grønn firkant som viser hva brukeren ser av hovedkartet. Prosjektrapport Side 6
For mer informasjon om applikasjonsstrukturen, se Produktrapporten Vedlegg Applikasjonsstruktur. Funksjonalitet Skalering og panorering Brukeren kan skalere (zoome) i hovedkartet ved hjelp av to fingre. Drar brukeren to fingre fra hverandre vil hovedkartet bli større og brukeren kan se flere detaljer. Drar brukeren to fingre i mot hverandre vil hovedkartet bli mindre og færre detaljer synes. Brukeren kan også panorere, flytte, hovedkartet ved hjelp av en finger. Ved å sette fingeren ned på hovedkartet og flytte det kan brukeren panorere hovedkartet dit hun vil. Hver gang det skaleres vil radardisplayet oppdateres slik at brukeren alltid ser hva som vises av hovedkartet. Se figur 7. Figur 7 Hovedkartet helt utskalert og hovedkartet litt innskalert. Radardisplay navigering Brukeren kan også navigere direkte i radardisplayet. Brukeren kan da klikke i miniatyrkartet eller dra den grønne markeringsfirkanten i radardisplayet dit hvor hun vil se. Hovedkartet vil da oppdatere seg i forhold til radardisplayet og brukeren vil få se den delen av hovedkartet som den grønne markeringsfirkanten representerer. Tegning Berøringsskjermen er både en flerberøringsskjerm og en flerbrukerskjerm. Det vil si at når applikasjonen plukker opp en berøringshendelse så finnes det informasjon om hvem som trykker. Derfor var både vi og oppdragsgiver opptatt av å skape funksjonalitet for at brukerne kunne samarbeide. En slik funksjonalitet er tegning. Det vil si at brukerne kan tegne på P&ID diagrammene og på den måten kan de dele tanker på berøringsskjermen. Derfor kan det legges et tegnelag over P&ID diagrammene. Der kan brukerne tegne på diagrammet, se figur 8. Prosjektrapport Side 7
Figur 8 Tegning i tegnelaget på et P&ID diagram Hver bruker tegner med hver sin farge og ved trykk på angre-kappen,, vil kun den siste tegningen til den brukeren som trykker på knappen bli borte. Det kan også opprettes flere tegnelag ved trykk på plussknappen,, og tegnelaget kan slettes ved trykk på slett-knappen,. Alle tegnelag lagres og kan ved en senere anledning blas igjennom og tegnes på igjen. Prosjektrapport Side 8
Linking De fleste P&ID diagrammer har linker som peker til andre P&ID diagrammer, se figur 9. P&ID link Figur 9 Linker på et P&ID diagram I applikasjonen er det mulig å trykke på disse for enkelt kunne navigere mellom diagrammene. Når det trykkes på en slik link vil applikasjonen først skalere ut, ifra det P&ID diagrammet linken ligger på, helt til hele hovedkartet vises på skjermen. Deretter skaleres det inn på det P&ID diagrammet linken peker til. Dette skjer fordi brukeren alltid skal vite hvor i hovedkartet hun befinner seg. Objektinformasjon P&ID diagrammer viser hvordan forskjellige objekter, komponenter, henger sammen. For å få opp informasjon om disse objektene trykkes det en gang på objektet og objektet blir markert og informasjon om objektet kommer til syne, se figur 10. Objektinformasjonen er synlig i noen sekunder før den forsvinner igjen. Den kan også fjernes ved å trykke på objektet mens informasjonen syns. Prosjektrapport Side 9
Figur 10 Visning av objektinformasjon i et P&ID diagram For mer utfyllende informasjon om hvordan applikasjonen kan brukes se Produktrapporten Vedlegg Brukerveiledning. Brukergrensesnittsdesign Fra begynnelsen av prosjektet var oppdragsgiver tydelige på at brukervennlighet og intuitive løsninger skulle ha høyeste prioritet under utvikling. For å sikre at disse egenskapene ble innfridd benyttet vi oss av hjelpemidler fra menneske-maskin interaksjon studiet og etablerte konvensjoner på berøringsoverflater. Et av de viktigste hjelpemidlene var modellen Handlings og evalueringssyklusen. Modellen var til stor hjelp ved utarbeidelse av berøringslogikk. Den hjalp oss å undersøke hva som ville falle naturlig for bruker å gjøre i de ulike brukerhistoriene ut i fra det som var beskrevet som funksjon. Mer detaljer om denne modellen kan leses i Prosessrapporten avsnitt 2.5 om brukergrensesnitt. Vi benyttet metaforer for visning av funksjonalitet ved grafiske ikoner. Disse metaforer skal vise knappens affordance. Affordance er hva en bruker oppfatter som knappens funksjon. Noen av knappenes metaforer er etablerte konvensjoner innenfor grafisk design, som for eksempel piler for navigering. Vi synes også det er viktig at brukere får tilbakemelding når de trykker på en knapp, derfor har vi laget en animasjon som gjør knapper litt større for så mindre igjen når en bruker trykker på dem. Vi har valgt nøytrale farger som bakgrunnsfarge mot kontrastfarger i elementer som skal være lett å skille fra bakgrunn, som knapper og markeringsfirkanten i radardisplayet. Figur 11 viser noen av de grafiske ikonene, her ved funksjonaliteten til å bla mellom ulike diagramversjoner. Den illustrerer hvordan knappene står i kontrast til diagrammet, og er synlige for brukeren. Videre viser også figuren hvordan radardisplay blir fremstilt i applikasjonen. Her litt gjennomsiktig slik at bruker skal ha mulighet til å se hva som er bak radardisplayet og med den grønne markeringsfirkanten i radardisplayet. Prosjektrapport Side 10
For mer informasjon om brukergrensesnitt, se Prosessrapporten avsnitt 2.5. Figur 11 Design av grafiske ikoner Testing Vi benyttet oss av to forskjellige tester. Det ene formen var akseptansetesting som, i Extrem Programming, skal foregå etter hver iterasjon. Denne type testing var til for at oppdragsgiver skulle kunne se om funksjonaliteten hadde blitt implementert som ønsket. Den andre typen testing er brukertesting. Denne formen for testing er til for å sikre at applikasjonen var brukervennlig og ble utført av forskjellige testpersoner. Berøringsskjermen var ikke klar til bruk før ganske sent i prosjektet. I tiden før vi fikk tilgang på skjermen programmerte vi applikasjonen for kun PC bruk med mus. Funksjonaliteten til denne foreløpige applikasjonen reagerte på hendelser fra mus, og vi håpte at det skulle være samme struktur ved berøringsskjermen. Derfor utførte vi i tiden før berøringsskjermen ble tilgjengelig foreløpig kun akseptansetester for oppdragsgiver. Vi gjorde dette for å kunne teste funksjonaliteten slik vi ville at den skulle fungere på berøringsskjermen. Brukertester ble utført etter skjermen var klar til bruk. Da ble de tidligere implementasjonene integrert med berøringshendelser og vi utførte brukertester og nye akseptansetester av alle brukerhistoriene. Fordelen med å få tilbakemeldinger fra både oppdragsgiver og tilfeldige brukere er at ønsket funksjonalitet blir dekket samtidig som design og brukervennlighet optimaliseres. For mer informasjon om resultatene av testingen vi utførte, se Produktrapporten Vedlegg Testdokumentasjon. For mer informasjon om testprosessen, se Prosessrapporten avsnitt 2.6 Utfordringer I løpet av utviklingen av applikasjonen har vi møtt på mange utfordringer. En av de første utfordringene var Prosjektrapport Side 11
plassering av berøringsskjermen, hvor ABB ikke fant et sted å installere den før midtveis i prosjektet. Da skjermen var klar til bruk, dukket det opp et kompabilitetsproblem med å utvikle i WPF og bruke programvaren til DiamondTouch. Etter lang tid og med litt hjelp fra ABB, fant vi en løsning som gjorde det mulig for oss å programmere med DiamondTouch sine biblioteker og ressurser tilgjengelig. En annen utfordring var at berøringsskjermen kun registrerer rektangler av berøringer, se figur 12. Figuren viser at den blå brukeren har alle fem fingre nede på skjermen, men skjermen registrer kun ytterpunktene i form av et rektangel. Rektangelet registres ved punktkoordinater til øvre venstre hjørne og nedre høyre hjørne i forhold til skjermbildet. Dette gjorde at vi måtte gjøre mange beregninger på hvordan en bruker kunne bruke berøring for å kommunisere med applikasjonen. Blå brukers fingre Grønn brukers fingre Oransje brukers fingre Skjermens registrering av blå bruker Skjermens registrering av grønn bruker Skjermens registrering av oransje bruker Figur 12 DTDiagnostics - DiamondTouch sitt program for å visualisere berøring på skjermen Prikkene er lagt til for å vise hvor fingrene til brukerne er plassert En annen utfordring hadde mer et estetisk preg, hvor bakgrunnen var at WPF har sine egne algoritmer og teknologi for å skalere bildeformater. Denne egenheten resulterte i at fremvisning av P&ID diagrammer i applikasjonen ble enten fine og klare, men da på bekostning av hastigheten i applikasjonen. Eller at P&ID diagrammene var klare ved innskalering og uklare ved utskalering, men at applikasjonen da var raskere. Se figur 13 for illustrasjon av de ulike visningene av diagrammene i applikasjonen, hvor høy kvalitet på skalering er til høyre og lav kvalitet til venstre. Vi mener vi har funnet et kompromiss, som hverken går på bekostning av detaljene i diagrammene eller hurtigheten i applikasjonen ved å justere den faktiske høyden og bredden på enkelt diagrammene. Prosjektrapport Side 12
Figur Figur 13 13 viser de ulike mulighetene for kvalitet på P&ID diagrammer i applikasjonen. Skjermbildet til høyre Forskjellige visninger av P&ID diagrammene i applikasjonen viser valget av klare diagrammer, men treg applikasjon. Skjermbildet til venstre er raskere applikasjon, men For mer informasjon om utfordringene i prosjektet, se Avsnitt 2.3 i Prosessrapporten. 9 Videreutvikling Innenfor tidsrammen vi hadde på prosjektet fikk vi ikke implementert alle brukerhistoriene som oppdragsgiver hadde satt opp. De resterende brukerhistoriene har vi da satt som videreutviklingsmuligheter. Under testing ble det foreslått mange utvidelser i applikasjonen fra testbrukerne, noen av disse fikk vi implementert fordi de var enkle og gode tillegg i applikasjonen. Resten er ført opp som mulig videreutvikling. For mer informasjon om mulighetene til videreutvikling se Produktrapporten Vedlegg Videreutvikling. Prosjektrapport Side 13