Brukermanual Prosjekt nr Det Norske Veritas

Transkript

1 Prosjekt nr Brukermanual Hovedprosjektets tittel Implementering av plugin og utvikling av wizard for Det Norske Veritas Prosjektdeltakere Magnus Strand Nekstad s Jørgen Rønbeck s Dato 27. Mai 2011 Antall sider 21 Intern veileder Steinar Johannesen Oppdragsgiver Det Norske Veritas DNV Software ( Kontaktperson Ole Jan Nekstad 1

2 1. Brukermanual 1.1 Forord Denne brukerdokumentasjonen er ment som et hjelpemiddel for ansatte som skal drifte nettsiden hos DNV. I tillegg vil vi gi en veiledning til brukere om bruken av nettsiden, men selve dokumentasjonen er rettet mot de som skal drifte nettsiden etter oss. Denne manualen vil derfor kun gi en generell instruks i bruk av nettsiden. Man skal ikke trenge noen stor kompetanse innen IT for å kunne lese denne manualen, men for å kunne gjøre endringer og drifte siden er det nødvendig med kunnskap innen for CSS, PHP og HTML. Siden er laget med utgangspunkt i at de ansatte og kundene til DNV skal ha et verktøy de kan bruke til visning av 3D modeller (3D Plugin lever av Ceetron). Det kan være så mange brukere på siden som serveren klarer, vi har ikke satt noen form for begrensning på antall unike brukere. Endringer på nettsiden blir gjort direkte i editor (Notepad++) og ikke på siden, det er derfor ikke noe problem at en driftsansvarlig sitter og gjør endringer mens en vanlig bruker jobber på nettsiden. For tilgang til kildekode og live visning av Sesam Showroom vennligst gå til linken: 2

3 2. Innholdsliste 1. Brukermanual Forord Innholdsliste Instruksjon Bruk av Sesam Showroom Generelt Felles for alle sider... 4 Forsiden: D Gallery Predefined Models Selfdefined Models Navigasjon i plugin Vtfx-filer Instruksjon Drift av Sesam Showroom Generelt Menyer Oppbygning og funksjonalitet Feil og løsninger for drift Figurliste

4 3. Instruksjon Bruk av Sesam Showroom 3.1 Generelt Denne delen vil ta seg av hvordan hver enkelt side ser ut og hvordan de forskjellige funksjonene på hver siden fungerer. Vi har designet sidene så enkelt og behagelig som vi føler er oppnåelig, hver side har en forklaring på hva man finner der og hva man kan bruke de enkelte funksjonene til. 3.2 Felles for alle sider Alle sider er bygd opp av det samme skallet, så alle har samme design og layout. I siden for Selfdefined Models vil man finne en ekstra meny hvor man kan velge mellom de forskjellige modellene. Forsiden: Når man først kommer inn på finner man øverst på siden en meny som fungerer som en navigasjon til de forskjellige sidene. Trykker man på de forskjellige linkene vil man bli videresendt til de andre sidene på nettsiden. Innholdet på forsiden er hovedsakelig ment for å gi informasjon om nettsiden og hva dens formål er. Figur 1 Figur Toppmeny, navigasjonsverktøy. 4

5 3.3 3D Gallery Når brukeren først kommer inn i Sesam Showroom vil han/hun finne en meny helt øverst på siden som henviser til de forskjellige sidene. Dette er sidens navigasjons verktøy og det er den som blir brukt til å navigere rundt på nettsiden og viser også hvilken side brukeren er inne i. Når brukeren trykker på linken 3D Gallery blir han/hun sendt til siden gallery.html. Inne på denne siden har brukeren samme toppmeny som på førstesiden, men i tillegg er det en ny meny midt på siden. Denne menyen er en dropdownmeny. I denne menyen kan man velge hvilke type modeller man vil se på. Trykker man på et av menyvalgene vil et dropdownvindu vises. Inne i dropdownvinduet er det flere ulike cases for den modelltypen man har valgt. Når man har funnet den case man vil se på trykker man på casenavnet, da vil Plug-inen oppdatere seg og vise den modellen og det caset du har valgt. 3D galleriet viser brukeren eksempler på modeller av Jackets & Topsides, Ships & Offshore Floaters og SURF(Subsea, Umbilicals, Risers, Flowlines). Dropdown lukket, trykk for å åpne Figur Legg merke til at enkelte eksempler(case) har flere visningsvalg, brukeren kan bytte mellom disse ved å benytte deg av verktøylinjen nederst i selve pluginen. Under er bildet av hvordan dropdownmenyen åpner seg vist. Visning av case, trykk på navnet til det caset man vil se på. Dropdown åpnet Figur

6 3.4 Predefined Models Predefined Models har som hensikt å vise hvordan variable parametere kan brukes til å lage varianter av parametriske modeller. På denne siden er det mulig å se et utvalg av modeller med ulike parametere. Hvis man trykker på linken Predefined Models i toppmenyen på første siden kommer man til siden predefined.html. På toppen av denne siden finner man samme meny som på første siden. Midt på siden finner man 6 forskjellige menyer. Dette er dropdown menyer med tabellinnhold. Når brukeren trykker på en av de for første gang vil et dropdown vindu vises, i dette vinduet er det forskjellige case (eksempler). For å lukke vinduet trykker man bare på menyvalget igjen og vinduet vil lukke seg. Bildet under viser hvordan menyen ser ut før åpning. Trykk på et av modellnavnene for å se de ulike casene. Figur Her velger man hvilken case man vil se. Figur Hvis man navigerer seg ned til midten av dette vinduet finner man et sett med radioknapper som representerer hver case. Når man har valgt den case man vil se trykker man på den tilhørende radioknappen. Siden vil da oppdatere seg og modellen med det valgte caset vil da åpne seg i 3D pluginet. Inne i pluginen kan brukeren nå, zoome, rotere og dra bildet, i tillegg kan man endre visningen. Se egen guide for hvordan man bruker plugin for informasjon om bruk av 3D visningen. Alle de 6 dropdown menyene fungerer på samme måte. 6

7 3.5 Selfdefined Models Selfdefined Models har som hensikt å vise hvordan variable parametere er brukt i GeniE script files. Siden har 6 forskjellige modeller for å vise hvordan modellene ser ut med egenvalgte parametere. Meny til Selfdefined Models Figur Bruk av Selfdefined Models Hvis brukeren trykker på Selfdefined Models linken på førstesiden vil ahn/hun bli henvist til selfdefined.html. Som på førstesiden er det en toppmeny her også som man kan bruke til å navigere seg til de andre sidene med. I tillegg til toppmenyen er det en ny meny rett under banneret på toppen av siden. Disse menyene er velgbare og når de blir trykket på vil man bli henvist til en ny nettside med innhold som representerer de forskjellige modellene. Hvert menyvalg representerer en modell. Når man har valgt den modellen man ønsker blir man henvist til den modellens nettside. Inne på modellens side er det en kort forklaring om modellen. Midt på siden finner man et skjema for input av verdier. Hvis man klikker på ruten etter verdinavnet har man muligheten til å skrive inn en verdi i form av tall. Hver enkelt modell har egne rammer med verdier man må holde seg innenfor og de er beskrevet etter hvert inputfelt. Skriv inn verdien man ønsker og trykk på neste felt. Hvis verdien man har skrevet inn ikke er godkjent vil et vindu åpne seg i nettleseren, her blir det gitt beskjed om at inntastet verdi ikke er innenfor de gitte rammene og man må velge verdier innen for gitte rammer. Trykker man på ok i dette vinduet kan man trykke i det felte hvor den ugyldige verdien ble tastet inn. Fjern så den gamle verdien og skriv inn en ny verdi. Skriver man feil verdi igjen vil samme feilmelding komme opp og man må prøve igjen. Når man har skrevet inn riktige verdier trykker man på Run values. Siden vil da sjekke opp verdiene man har tastet inn og finne ut hvilken case av den modellen man har valgt den skal vise i 3D plugin. 7

8 Inputfelt for inntasting av egne verdier Figur Trykk her når ønskede verdier er valgt. Ønsker man å resette siden og de valgte verdiene trykker man bare på Reset page knappen. Før man får se modellen i 3D visningen vil siden gi brukeren en ny meny. Denne menyen inneholder 3 knapper. De 3 knappene representerer henholdsvis view, denne knappen gjør at nettsiden finner frem riktig modell og case, og implementerer denne inn i 3D visningen. Knapp 2 er read js-file, trykker man på denne knappen vil nettleseren laste ned js-filen til det caset som er valgt, og brukeren kan åpne og lese denne på sin egen datamaskin. Knapp nr 3 er read vtfx-file, denne gjør det samme som knapp 2, men denne laster ned vtfx filen til det valgte caset. Bildet under viser menyen som kommer opp når man har skrevet inn egne verdier som er innenfor de gitte rammene. Figur Trykk her for å se på modellen i plugin. På sidene for Jacket og Topside er det ikke mulig å velge egne verdier, men det er lagt ut eksempler av begge modellene med forskjellige parametere. 8

9 3.6 Navigasjon i plugin Hver av de forskjellige hovedsidene (3D Gallery, Predefined Models og Selfdefined Models) har et avsnitt under innholdet, om navigasjon i 3D Plugin. Dette er informasjon om hva en bruker kan gjøre og interagere med i plugin vinduet. Dette avsnittet er her for at brukeren lettest mulig skal kunne begynne å studere og interagere med modellene med en gang, i motsetning til å måtte lære seg hvordan man bruker pluginen før interaktiv bruk. Figur Funksjonene man kan interagere med i plugin vinduet er; Pan (flytte modellen rundt), Rotate (rotere modellen for å kunne se den fra ulike vinkler) og Zoom (se nærme på detaljer eller se modellen på lang avstand for oversikt). Figur Vi ser at vi har en navigasjons kube (figur ) som viser hvilken vinkel vi ser modellen fra. Kuben kan vi interagere med og velge andre mulige vinkler for å se modellen fra forskjellige sider, dette kan være på skrå, ovenfra og ned eller omvendt. Dette er bare noen muligheter av mange. 9

10 I tillegg til denne instruksjonen, ser vi også at det er en linje som viser brukeren hvor han/hun kan laste ned pluginen for at siden skal fungere. Linken fører rett til en.exe-fil vi kan laste ned. Det er viktig at man har riktig versjon av pluginen, dette kan gjelde for ansatte som allerede har en versjon av denne eller de som ikke har installert pluginen. Det er viktig med riktig versjon, grunnen til dette er at den plugin som vi linker til, kan lese vtf-filer og vtfx-filer, eldre versjoner kan kun lese vtf-filer. Figur Figur

11 3.7 Vtfx-filer Her skal vi ta for oss fremgangsmåten for å lage en modellfil (vtfx) steg for steg, fra journalfil til endt modell. Vi starter med å lage/bruke en eksisterende journalfil som vi laster inn i DNV s programvare (i dette tilfellet GeniE) og ut i fra dette skal vi få en vist en modell: Figur Deretter velger vi å kjøre analyse (ALT+D eller Tools-Analysis-Activity Monitor): Figur Som vi så velger å åpne i Xtract for mer avanserte resultater: Figur

12 Vi vil da bli møtt av et program som ser slik ut: Figur Her må brukeren dobbeltklikke der det står R1 for å velge modellen. For å få like modeller med de som er opprettet i Sesam Showroom vil : Steg 1 - Gå inn i Display-Information å fjerne avkrysning for Info Box og Legend: Figur Steg 2 - Gå inn i Display-Part Attributes og her huke av for Visible, Smooth, Mesh, Expanded og Transparent og velge Apply. Steg 3 - Gå inn i color som finnes på høyre side av Part Attributes-vinduet og velge en gråfarge for modellen: Figur

13 Steg 4 Klikk ok og deretter close, modellen og vinduet brukeren har valgt vil da se slik ut: Figur Steg 5 File-Export to vtfx hvor brukeren så må velge filnavn og filbane hvor modellen skal lagres, deretter er det anbefalt at brukeren skriver inn Case name og Case Info for modellen. Det er dette som er synlig for modellen ved valg i 3D-plugin. Figur

14 Steg 6 Nå kan vi se om filen er blitt korrekt opprettet ved å finne frem til DNV s programvare(i dette tilfellet XtractViewer) og åpne modellfilen, forhåpentligvis er alt gjort riktig og brukeren vil få et vindu som ser slik ut: Figur Bildet er tatt fra Kjoint i Selfdefined Models og er et godt eksempel på hvordan vi kan få opprettet ulike typer modeller hvor man kan ha forskjellige views. Dette kan være model view eller mesh view: Figur

15 4. Instruksjon Drift av Sesam Showroom 4.1 Generelt Denne delen er beregnet på personer med god kunnskap innenfor HTML og PHP. Hensikt med denne delen er å gi et innblikk i hvordan de forskjellige delene er bygd opp og hvilken kode som ligger bak alle funksjonene på siden. Det kommer ikke til å bli forklart hvordan ting er brukt og det blir heller ikke gitt en begrunnelse på hvorfor vi har valgt den koden vi har valgt i denne manualen. Det forventes at de som skal drifte Sesam Showroom har høy nok kompetanse til å forstå og videreutvikle koden. 4.2 Menyer Figur Menyene er laget i HTML og i CSS. I CSS-koden blir det definert hvordan hvert av menyvalgene skal reagere ved mouse-over o.l. På bildet ser vi hvordan den valgte menyen har endret utseende. 4.3 Oppbygning og funksjonalitet D Gallery Her er siden bygd rundt dropdown menyene og innholdet i dem. Når brukeren velger en modelltype åpner dropdown menyen seg og brukeren får se de forskjellige casene. De forskjellige casene er satt inn i tabeller for å gi en penere layout. Endring av bilder og tekst er enkelt og trenger ingen spesiell kompetanse Predefined Models Her er siden basert på et htmlskjema med radioknapper. Siden er bygd opp rundt dropdown menyer som inneholder eksempler på cases innenfor den valgte kategorien. De forskjellige verdiene velger man med radioknapper, når man velger en av casene vil 3D pluginet automatisk oppdatere seg og vise riktig modell med de gitte verdiene. Det er ingen validering av radioknappene siden verdiene til hver enkelt er definert av oss bak siden Selfdefined Models Her er sidene basert på et vanlig HTML-skjema hvor man skriver inn de ønskede verdiene. Alle skjemaene har validering av input som sjekker om verdiene som blir skrevet inn er innenfor gitte rammer. Om man skriver inn verdier som ikke er godkjente vil man få opp en feilmelding. Det er brukt JavaScript til validering av input. Når brukeren skriver inn en verdi og trykker på run values vil scriptet for den siden sjekke verdiene og if-setningen som har de verdiene i seg vil slå inn og den riktige displayboksen vil bli synlig på siden. Alle displaybokser er skjulte før noen verdier blir tastet inn. 15

16 4.3.4 Visning av toppmeny i html <li class= current_page_item > a href= index.html >Home</a></li> <li><a href= gallery.html>3d Gallery</a></li> Denne koden vil vise de to første menyvalgene i menyen. Hvis man ønsker å legge til menyer eller endre menyvalgnavn så kan det gjøres enkelt her Toppmeny i css: #menu { width: 980px; height: 60px; margin: 0 auto; padding: 0; } #menu li { float: left; text-indent: 5px; } #menu a { display: block; width: 140px; height: 30px; margin-right: 1px; padding: 8px 0px 0px 0px; background: url(images/graphics/img022ny.jpg) no-repeat left top; text-decoration: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; color: #FFFFFF; border: none; } #menu a:hover, #menu.current_page_item a { text-decoration: none; background: url(images/graphics/img022hover.jpg) no-repeat left top; } - I #menu defineres størrelsen på selve menyen. - #menu a, her defineres størrelsen på hver knapp i menyen og hvordan hver knapp skal se ut. - I #menu a:hover definerer vi hvordan knappen endrer utseende når man holder musepekeren over en av knappene i menyen. - #menu.current_page_item a her defineres hvordan knappen skal se ut etter at man har trykket på den. 16

17 4.3.6 Dropdown meny Det blir gitt en felles generell forklaring på hvordan de fungerer og koden bak dropdown menyene. Senere i manualen vil det være forklaringer på hvordan valgene og innholdet i de forskjellige menyene fungerer. Figur Kode for visning <div class= section_w940 > <div class= container > <img src= images/pictures/jackettopsidedrop.png width= 500 height= 32 class= dropdable_head_gallery /> <ul class= droptable_body_gallery > <li> <table border= 0 width= 700px cellspacing= 0 cellpadding= 2 > Åpning av dropdown(javascript) $(document).ready(function () { $("ul.droptable_body li:even").addclass("alt"); $('img.droptable_head').click(function () { $('ul.droptable_body').slidetoggle('medium'); }); $('ul.droptable_body li a').mouseover(function () { $(this).animate({ fontsize: "14px", paddingleft: "5px" }, 50 ); }); $('ul.droptable_body li a').mouseout(function () { $(this).animate({ fontsize: "14px", paddingleft: "5px" }, 50 ); }); }); Denne koden åpner menyen man har klikket på, alle de forskjellige menyene på de forskjellige sidene må ha sin egen kode for åpning av dropdown Innhold i dropdown - 3D Gallery <td width="150px"> <h2>case:<br/> <a href="" onclick="parent.location='#top'; GLview3DPlugIn.Open('3dgallery/Jacket.vtfx');return false";> Jacket Inplace</a></h2> <p>file size: 3.52 MB</p> <p>deformations and bending moments for 3 different incoming wave directions</p><br/> </td> 17

18 Innhold i dropdown - Predefined Models <tr> <th rowspan="4"><img src="images/pictures/kjointimgvalues.png" align="left" height="100" width="150" alt="k-joint" /></th> <td><input id="radcasek1" type="radio" onclick="parent.location='#top'; GLview3DPlugIn.Open('predefined/kjoint/kjoint1.vtfx');return false";/>1</td> <td>30</td> <td>30</td> <td>3</td> <td>3</td> </tr> Under ser vi et eksempel av menyen som kommer opp når brukeren har tastet inn egne verdier på Selfdefined Models siden. Koden har en knapp for visning av modell, en for nedlastning av js og en for nedlastning av vtfx-filer. <a href="javascript:show_stuff(display4)"><img src="images/pictures/choice2.png"/></a> <span ID="display1" style="display: none" > <table border="0"> <tr><td width=300> <input type="submit" value="view" onclick="parent.location='#middle'; GLview3DPlugIn.Open('selfdefined_files/vtfx/kjoint/kjointA30B30.vtfx');return false;"/> <input type="submit" value="read js" onclick="document.location='selfdefined_files/js/kjoint/kjointa30b30.js'"/> <input type="submit" value="download vtfx" onclick="document.location='selfdefined_files/zip/kjoint/kjointa30b30.zip'"/> </td> </tr> </table> </span> Figur

19 Inputbokser Under er koden for HTML form som brukes til å skrive inn selvvalgte verdier gitt. <form method="post" action="kjoint.php" name="skjema"> Alpha:<br/> <input type="text" name="alpha" onchange="return sjekk()" class="sjekk" size="2" /><br />(values has to be between 30 og 60)<br/> Beta:<br/> <input type="text" name="beta" onchange="return sjekk2()" class="sjekk" size="2" /><br />(values has to be between 30 og 60)<br/> <input type="submit" name="regk" value="set verdier" /><br /> </form> Figur Validering av inputfelter <script type="text/javascript"> function sjekk(){ if (document.skjema.alpha.value <=29) { alert("values has to be between 30 and 60"); return false; } else if (document.skjema.alpha.value >=61) { alert("values has to be between 30 and 60"); return false; } return true; } </script> Her sjekker JavaScriptet om verdien brukeren har skrevet inn er mellom 30 og 60. Hvis ikke verdiene er innenfor de gitte rammene vil en feilmelding vises. Feilmelding, velg verdier innenfor de rammene som er gitt. Figur

20 Sjekk av egendefinerte verdier Her er det et eksempel på hvordan if-setningene som er brukt for å vise riktig modell ved egendefinerte verdier. Når man har trykket på knappet Run values vil scriptet sjekke hvilken if-setning som slår inn for å vise en display boks som inneholder en meny. Koden som sjekker dette er: <?php if(isset($_request["regk"])) { $kjoint1 = $_REQUEST["alpha"]; $kjoint2 = $_REQUEST["beta"]; if($kjoint1<=34 && $kjoint2>=30 && $kjoint2<=34) { echo '<a href="javascript:show_stuff(display1)"> <img src="images/pictures/choice.png"/></a>'; }?> Kort forklart: Når brukeren trykker på knappen blir man sendt inn i koden til regk, inne i regk er det alt fra if-setninger avhengig av hvilken modell som er valgt. Hvis brukeren har valgt verdi for alpha under 34 og for beta mellom 30 og 34 vil den første if-setningen slå inn og den viser da display1 som er skjult helt til de verdiene som er bestemt i if-setningen blir valgt Plugin kode <table cellspacing="0" cellpadding="2" width="100%" > <tbody> <tr> <td colspan="4">    Over er koden for visningen av selve 3D pluginen. 20

21 4.4 Feil og løsninger for drift Feil Plugin oppdateres ikke Dropdown meny fungere ikke Feil modell vises etter valg (radioknapp) Feil modell vises etter valg(inputboks) Flere menyer vises (inputboks) Løsning Sjekk at filen eksisterer og at filbanen er riktig Sjekk at menynavnet stemmer med navnet som står i jquery filen. Sjekk koden for radioknappene, sannsynelig at det blir henvist til feil fil. Sjekk if-setningen, muligens er det feil verdier i en if-setning. Sjekk if-setningene, det kan vœre et <> tegn som er feil. 4.5 Figurliste Figur Figur Figur Figur Figur Figur Figur Figur Figur Figur Figur Figur Figur Figur Info Topp meny Dropdown lukket 3D Dropdown åpen 3D Dropdown lukket Predefined Models Dropdown åpen Predefined Models Meny Selfdefined Models Eksempel inputskjema Eksempel meny etter input Toppmeny Dropdown meny Eksempel meny etter input Inputskjema Feilmelding 21