Työn kirjallinen osa (PDF) - students.tut.fi
TOMI SYVÄJÄRVI SÄÄASEMAJÄRJESTELMÄN VIRTUAALIMALLI Kandidaatintyö Tarkastaja: projektipäällikkö Jari Seppälä Työ jätetty tarkastettavaksi 29. marraskuuta 2013 II TIIVISTELMÄ TAMPEREEN TEKNILLINEN YLIOPISTO Systeemitekniikan laitos SYVÄJÄRVI, TOMI: Sääasemajärjestelmän virtuaalimalli Virtual model of a weather station information system Kandidaatintyö, 34 sivua Marraskuu 2013 Pääaine/painotus: Automaation tietotekniikka Tarkastaja: projektipäällikkö Jari Seppälä Avainsanat: Sääasemajärjestelmä HTML5 3D käyttöliittymä WebGL JavaScript Tässä kandidaatintyössä tutustutaan TTY:n Systeemitekniikan laitoksen sääasemajärjestelmään, ja kehitetään siitä moderneilla, HTML5 ja WebGL-tekniikoita tukevilla, webselaimilla ilman liitännäisiä toimiva virtuaalimalli. Tämä työn kirjallinen osa on jaettu luvuittain kokonaisuuksiin, alkaen yleisestä johdannosta, jossa esitellään työn taustat ja yleiset tavoitteet. Johdannon jälkeen ensimmäisessä luvussa on kuvattuna sääasemajärjestelmän nykytila ja sen osat, toisessa virtuaalimallin ja siihen liittyvän sivuston ohjelmistotekninen vaatimusmäärittely, kolmannessa valitut tekniikat ja JavaScript-kirjastot, neljännessä ohjelmistotekninen suunnittelu arkkitehtuurin ja olioanalyysin osalta, viidennessä selvitetään valmista toteutusta ja sen ratkaisuja, ja lopuksi yhteenvetoon on koottu lyhyesti prosessin aikana kertyneet kokemukset ja tavoitteiden saavuttaminen. Virtuaalimallin ja siihen liittyvän web-sivuton toteutuksessa hyödynnetään vielä melko nuorta WebGL-teknologiaa ja useita JavaScript-kirjastoja. Kullekin JavaScriptkirjastolle esitetään valintaperusteet ja selitetään niiden rooli sivuston toteutuksessa. Merkittävimmiksi kirjastoiksi valitaan Three.js sekä JQuery, joista Three.js:ää käytetään kolmiulotteisen sääaseman virtuaalimallin esittämiseen selaimessa, ja JQueryä kaksiulotteisten HTML-pohjaisten elementtien hallintaan ja AJAX-hakuihin. Sivuston toteutusta kuvataan yksityiskohtaisesti, ja tämä työn kirjallinen osa toimii samalla järjestelmän ohjelmistoteknisenä dokumentaationa. Valmis toteutus sisältää helposti muokattavaa tietosisältöä erillisten HTML-sivujen muodossa, ja visuaalisesti näyttävän, käyttäjän navigoitavissa olevan kolmiulotteisen virtuaalimallin. Yhteenvedossa todetaan, että toteutus täyttää sille asetetut päätavoitteet. Todetaan kuitenkin, että sivuston tietosisältö vaatii kuitenkin vielä laajentamista, jotta siitä olisi todellista hyötyä. Lopuksi esitetään useita toteutuksen jatkokehitysehdotuksia. III SISÄLLYS 1 Johdanto....................................................................................................................... 1 2 Sääasemajärjestelmä .................................................................................................... 2 2.1 Järjestelmän osat ............................................................................................... 2 2.2 Tietojen kulku ja rajapinnat .............................................................................. 4 3 Vaatimusmäärittely...................................................................................................... 6 3.1 Käyttötapaukset ................................................................................................. 6 3.1.1 Käyttötapaus 1: Selaus 2-ulotteisen käyttöliittymän avulla................. 6 3.1.2 Käyttötapaus 2: Selaus 3-ulotteisen käyttöliittymän avulla................. 7 3.1.3 Käyttötapaus 3: Tietosivujen käyttö .................................................... 7 3.2 Tietosisältö ........................................................................................................ 7 3.3 Tekniset rajoitteet .............................................................................................. 8 3.4 Käyttöliittymä ................................................................................................... 8 3.5 Ulkoasu ........................................................................................................... 10 4 Valitut tekniikat ......................................................................................................... 11 4.1 HTML5 ja CSS3 ............................................................................................. 11 4.2 JavaScript ja JQuery........................................................................................ 12 4.3 WebGL ja Three.js .......................................................................................... 13 5 Ohjelmistotekninen suunnittelu ................................................................................. 15 5.1 Sovellusarkkitehtuuri ...................................................................................... 15 5.1.1 HTML ja AJAX ................................................................................. 15 5.1.2 CSS .................................................................................................... 16 5.1.3 JavaScript ........................................................................................... 17 5.2 Olioanalyysi .................................................................................................... 18 5.2.1 JavaScriptin oliomalli ........................................................................ 18 5.2.2 Rajapinnat .......................................................................................... 20 5.2.3 FocusableItem .................................................................................... 21 5.2.4 HTMLBillboard ................................................................................. 22 5.2.5 AnimatedDataLink ............................................................................ 22 6 Toteutus ..................................................................................................................... 24 6.1 Keskeiset ratkaisut .......................................................................................... 24 6.1.1 Visuaalinen ilme ................................................................................ 24 6.1.2 3D-mallit ............................................................................................ 25 6.1.3 Tietosivut ........................................................................................... 25 6.1.4 Tietosisältö ......................................................................................... 26 6.2 Käyttöliittymä ................................................................................................. 27 6.3 Yhteensopivuus ............................................................................................... 29 7 Yhteenveto ja tulokset ............................................................................................... 31 7.1 Vaatimusten ja tavoitteiden saavuttaminen..................................................... 31 7.2 Valittujen tekniikoiden soveltuvuus................................................................ 32 IV 7.3 Jatkokehitysajatuksia ...................................................................................... 33 Lähteet ............................................................................................................................. 35 V LYHENTEET, TERMIT JA NIIDEN MÄÄRITELMÄT Lyhenne API CPU CSS DOM GPRS HTML HTTP OpenGL PC PNG POE ROSA RRD SOAP SVG TTY UML URL W3C WebGL WHATWG WLAN WSDL WWW XML Sanat, joista lyhenne muodostuu Application Interface Central Processing Unit Cascading Style Sheets Document Object Model General Packet Radio Service Hypertext Markup Language Hypertext Transfer Protocol Open Graphics Library Personal Computer Portable Network Graphics Power Over Ethernet Road Surface Analyzer Round Robin Database Simple Object Access Protocol Scalable Vector Graphics Tampereen Teknillinen Yliopisto Unified Modeling Language Uniform Resource Locator World Wide Web Consortium Web Graphics Library Web Hypertext Application Technology Working Group Wireless Local Area Network Web Services Description Language World Wide Web eXtensible Markup Language Termi 3D C Termin selitys 3 Dimensional, kolmiulotteinen Dennis Ritchien 1970-luvun alussa UNIXkäyttöjärjestelmälle kehittämä imperatiivinen ja myöhemmin standardisoitu ohjelmointikieli. Yksi tärkeimmistä kaupallisessa ohjelmistokehityksessä käytettävistä ohjelmointikielistä. Bjarne Stroustrup kehitti C++:n 1980-luvulla C-kielestä lisäämällä siihen muun muassa olio-ohjelmointiin ja geneerisyyteen liittyviä ominaisuuksia C++ VI Java JavaScript Kirjasto MySQL Pt100-vastus Skripti Sulautettu PC Transitio Vaisala ROSA Web WebGL Sun Microsystemsin kehittämä laaja teknologiaperhe ja ohjelmistoalusta, johon kuuluu muun muassa laitteistoriippumaton oliopohjainen ohjelmointikieli Etenkin web-ohjelmoinnissa käytetty skriptityyppinen ohjelmointikieli Ohjelmistotekniikan käsite, jolla tarkoitetaan uudelleenkäytettävää, tiettyyn asiaan keskittyvää ohjelmakoodia joka muodostaa oman kokonaisuutensa MySQL AB:n erittäin suosittu relaatiotietokantaohjelmisto Standardoitu ja yleisesti käytetty platinasta valmistettu vastuslämpötila-anturi Komentosarja. Esimerkiksi skriptikieli eli komentosarjakieli mahdollistaa tietoteknisten tehtävien määrittelyn ja automaattisen suorittamisen ilman varsinaisten ohjelmointikielien käyttöä Tiettyyn tarkoitukseen suunniteltu PC-tietokone. Vähemmän yleiskäyttöinen kuin tavallinen PC Siirtymä tilasta toiseen Vaisala Oyj:n tiesääasematuote WWW, Internet-verkossa toimiva hajautettu hypertekstijärjestelmä JavaScript-rajapinta kolmiulotteisen grafiikan piirtämiseen web-selaimissa Taulukko 1. Dokumentissa käytetyt merkintätavat. Lihavointi Huomiot [Hakasuluissa] Viittaukset (Kaarisuluissa) Avatut lyhenteet ja kommentit 1 1 JOHDANTO Tampereen teknillisen yliopiston (TTY) Systeemitekniikan laitoksella on 2000-luvun alussa tutkimuskäyttöön hankittu Vaisala ROSA (Road Surface Analyzer)-tiesääasema. Sääasema on asennettu siihen liittyvine tietoteknisine järjestelmineen TTY:n Sähkötaloon, kenttälaitteiden ja antureiden sijaitessa talon katolla. Järjestelmän varsinainen käyttötarkoitus ei ole kuitenkaan kerätä tarkkoja mittaustietoja Hervannan säästä, vaan tutkimuksen kohteena on ollut muun muassa sääaseman ohjaus langattoman GPRS (General Packet Radio Service)-yhteyden yli. Nykyään järjestelmää käytetään lähinnä esimerkkinä web-tekniikoita hyödyntävästä tietojärjestelmästä ja harjoituksissa tietyillä laitoksen kursseilla. Järjestelmään liittyen on myös tehty viime vuosina useita kandidaatintöitä. Nämä automaation tietotekniikan aineopintokokonaisuuteen liittyvät kandidaatintyöt ovat käytännössä kaikki olleet eri alustoille toteutettuja käyttöliittymiä sääasemajärjestelmän tarjoamien tietojen lukuun. [1] Järjestelmään on myös 2000-luvun aikana tehty joitakin muutoksia, mutta ne on dokumentoitu valitettavan heikosti. Muutokset ovat tuoneet kenttälaitteiden ja palvelimen väliin WLAN (Wireless Local Area Network)-yhteyden GPRS:n sijaan, ja järjestelmää varten laitoksella itse kehitettyjä ohjelmistoja on päivitetty sekä osin yksinkertaistettu. Tämä opinnäytetyö pyrkii osaltaan parantamaan järjestelmän nykytilan dokumentaatiota, ja luomaan sen rakenteesta helposti lähestyttävän selkeän kuvauksen kolmiulotteisen virtuaalimallin muodossa. Virtuaalimalli toteutetaan web-sivustona, jonka tulee toimia suoraan moderneilla web-selaimilla kuten esimerkiksi Google Chromella ja Mozilla Firefoxilla. Tämä opinnäytetyön kirjallinen osa toimii kyseisen virtuaalimallin ja siihen liittyvän sivuston ohjelmistoteknisenä dokumentaationa, ja kattaa vaatimusmäärittelyn, ohjelmistoteknisen suunnittelun sekä toteutuksen osa-alueet. Näiden lisäksi esitellään valintaperusteineen valitut tekniikat ja lopuksi esitellään valmista toteutusta sekä pohditaan työn onnistumista. 2 2 SÄÄASEMAJÄRJESTELMÄ Sääasemajärjestelmällä tarkoitetaan tässä työssä kokonaisuutta, joka muodostuu sekä fyysisistä laitteista, kuten antureita ja tietokoneista, että niiden yhteistoiminnan mahdollistavista ohjelmistoista. Tämän luvun pääasiallinen tavoite on sekä esittää lukijalle, että dokumentoida järjestelmän fyysinen ja ohjelmistotekninen toiminta nykyisessä muodossaan. Ohjelmistojen osalta kuvaus on kuitenkin pintapuolinen lähinnä niiden monimutkaisuuden, mutta osin myös niiden nykyisen tilan tarkan tiedon hankinnan vaikeuden vuoksi. 2.1 Järjestelmän osat Systeemitekniikan laitoksen sääasemajärjestelmä perustuu Vaisala ROSA tiesääasemaan, ja sen osat voidaan jakaa kolmeen pääryhmään: Antureihin, kenttälaitteisiin ja palvelimeen sekä sen käyttäjiin. Antureihin kuuluu Vaisalan lämpötilaa, ilmankosteutta, tuulen suuntaa ja nopeutta sekä sademäärää mittaavat laitteet, jotka ovat asennettu TTY:n Sähkötalon katolle. Kenttälaitteet koostuvat ROSA-järjestelmän keskusyksiköstä, sulautetusta PC:stä ja sen WLAN-tietolinkistä palvelimelle. Palvelin muodostaa kokonaisuuden tietojen tallentamiseen kahteen eri tietokantaan ja niiden jakamiseen web-palvelurajapinnan kautta erilaisille käyttöliittymätoteutuksille. Kuva 1 esittää nämä pääryhmät, niiden sisältämät laitteet sekä tietolinkit yksinkertaistettuna verkkokaavion muotoon. Kuva 1: Sääasemajärjestelmän verkkokaavio Järjestelmän käytössä olevia Vaisalan valmistamia antureita on: Yhdistetty tuulen nopeus- ja suunta-anturi WM30, lämpötilaa ja ilmankosteutta mittaava HMP45D sekä sademäärämittari QMR101. Nämä yleiskäyttöiset ja hyvin vähän huoltoa vaativat laitteet on asennettu TTY:n Sähkötalon D-siiven katolle. Tuuli- ja sadeanturit on Vaisala ROSA tiesääasema-asennukseen tyypillisesti kuuluvassa mastossa, lämpötila- ja kosteusanturin 3 taas ollessa kattorakenteen luoteispuolen seinässä. Erillisen seinäasennuksen perusteina on vähäisempi suoran auringon säteilyn määrä ja muiden antureiden vieressä oleva ilmastointikoneen lämmönvaihdin, jotka voivat vaikuttaa mittauksiin. Kuva 2 esittää antureiden asennustavan ja ympäristön, tuulianturit ovat maston huipulla ja sademäärämittari poikkivarressa. Kuva 2: Tuuli- ja sademääräantureiden asennustavat sekä ympäristö Kenttälaitteisiin kuuluu Vaisala ROSA-järjestelmän keskusyksikkö, sulautettu teollisuus-PC WStrider 200A, 5GHz WLAN-tukiasema Ubiquiti Networks PicoStation M2HP, sekä näiden oheislaitteet kuten virtalähteet. Termiä kenttälaite käytetään tässä kuvaamaan laitteiden sijaintia mittauspisteiden läheisyydessä. Vaikka nämä laitteet onkin tässä tapauksessa asennettuna sisätiloihin, on ne mahdollista suojauksensa puolesta asentaa myös suoraan ulos jopa ilman erillistä kotelointia. Tyypillisessä asennuksessa järjestelmän kenttälaitteisiin kuuluu vain ROSA keskusyksikkö, joka sisältää yhden tai useampia mittauskortteja DRI521, emolevyn DMB132, optiona sulautetun tietokoneen DMC586M, modeemin DMX50, virtalähteen DPS132 sekä mm. riviliittimet kytkentöjä varten, kaikki koottuna IP 66 suojattuun säänkestävään kaappiin Eldon KGR3215. [2, s. 4] Näistä osista on kuitenkin asennettuna tai käytössä vain virtalähde ja yksi DRI521-tyypin mittauskortti, jota on mahdollista käyttää myös itsenäisesti ilman emolevyä tai järjestelmän omaa sulautettua tietokonetta. Erillinen sulautettu teollisuus-PC WStrider 200A on asennettu seinälle ROSAlaitteiston kaapin viereen ja suorittaa mittaustietojen luvun suoraan Vaisalan mittauskortilta, välittäen ne eteenpäin varsinaiselle mittaustietopalvelimelle Ubiquiti Networks Pi- 4 coStation M2-HP WLAN-tukiasemaa käyttäen. Palvelimen päässä on toinen samanlainen WLAN-tukiasema, jolloin yhteys syntyy näiden kahden välille. Tämä WLANtukiasema toimii yleisellä 2,4 GHz taajuusalueella, mutta käyttää laajempaa 5 MHz kaistaa, jolla saavutetaan häiriösietoisempi yhteys. Muiden samalla taajuusalueella toimivien verkkojen häirintään vaikuttavan lähetystehon tulee olla melko suuri, sillä signaalin matkalla katolta ensimmäiseen kerrokseen on useita teräsbetonirakenteita. Palvelin käsittää tässä tapauksessa Systeemitekniikan laitoksen ylläpitämän webpalvelimen ja samassa yhteydessä toimvat sääasemajärjestelmään liittyvät tietokannat. Tietokantoja on kaksi: MySQL:ään pohjautuva, johon tallennetaan kaikki sääasemalta saadut mittaustulokset, ja RRD (Round Robin Database) joka sisältää vain tietyn verran uusimpia mittauksia, mutta tarjoaa erikoistuneita lisätoimintoja kuten kuvaajien luomisen suoraan kannasta sen omilla komennoilla. [3, s. 14-15] MySQL-kanta on perinteinen relaatiotietokanta, josta voidaan tehdä kyselyjä minkä tahansa tietueiden ominaisuuksien perusteella ja tuloksena saadaan kannan sisältämiä tietoja sellaisenaan. RRD taas on kehitetty erityisesti aikaperustaisen tiedon käsittelyyn ja on rakenteeltaan silmukkamainen, eli sen koko säilyy täyttymisen jälkeen vakiona. [4] Sääasemajärjestelmän RRD sisältää 5 minuutin ja tunnin välein (12 mittauksen) lasketut keskiarvot mittaustiedoista. 5 minuutin välein otettuja keskiarvoja säilytetään kannassa 290 kappaletta, eli noin vuorokauden mittaukset, tunnin välein otettuja mittausten keskiarvoja säilytetään tietokannassa 168 kappaletta, eli noin viikon ajalta. [3, s. 15] 2.2 Tietojen kulku ja rajapinnat Kuva 1 havainnollistaa järjestelmän tietoyhteyksiä sen eri osien välillä ja etenkin niiden muodostamaa ketjua antureilta käyttöliittymille. Rinnakkaisia yhteyksiä on antureiden ja ROSA-mittauskortin, sekä palvelimen ja käyttäjien välillä, mutta muuten tieto kulkee yksittäistä reittiä pitkin. Vaikka käytännössä kaikki yhteydet ovatkin laiteparien välillä kaksisuuntaisia, varsinainen järjestelmän keräämä tieto kulkee kuitenkin kuvan 1 esityksessä vain vasemmalta oikealle, eli antureilta kenttälaitteille, kenttälaitteilta palvelimelle ja lopulta palvelimelta käyttäjille. Käytetyt Vaisalan anturit ovat niin sanotusti tyhmiä, ja tarjoavat vain yksinkertaiset fysikaalisiin suureisiin perustuvat mittaussignaalit. Käytännössä tämä tarkoittaa esimerkiksi resistanssin tai jännitteen muuttumista suhteessa varsinaiseen mitattavaan suureeseen. Lämpötilan mittaukseen käytetään Pt100-vastuksen resistanssin nelijohdinmittausta, ilmankosteudelle jänniteviestiä 0-1V, tuulen suunnalle muuttuvaa vastusta 1-11kΩ ja tuulen nopeudelle jännite-/virtapulssitusta [5, 6]. Sademääräanturin toiminnasta ei löytynyt luotettavaa lähdetietoa, mutta sen voidaan olettaa käyttävän jotakin edellä mainituista tekniikoista. Kukin anturi on kytketty omalla kaapeloinnillaan ROSAkeskusyksikön mittauskorttiin, joka hoitaa muun muassa jännitteensyötön ja signaalien tarkkailun. ROSA-keskusyksikön DRI521-mittauskortti kykenee antureiden signaalien lukemisen ja arvojen mittaustuloksiksi muuntamisen lisäksi etenkin tienpinta-antureiden perus- 5 teella tekemään monimutkaisia laskennallisia päättelyitä vallitsevista olosuhteista. Käytössä olevien ilmakehän antureiden tapauksessa kortin tehtävänä on kuitenkin vain signaalien tulkitseminen halutuiksi fysikaalisiksi suureiksi. Kortti tarjoaa RS-232Cstandardin mukaisen sarjaliikenneväylän, jota käytetään mittaustietojen lukemiseen erilliselle sulautetulle PC:lle. [5] Sulautettu PC WStrider 200A hoitaa mittaustietojen kyselyn mittauskortilta sarjaväylän avulla, sekä niiden välittämisen palvelimelle WLAN-linkin kautta. PC:n ohjelmisto toimii palvelimena, joka vastaa varsinaiselta sääasemapalvelimelta tuleviin HTTP (Hypertext Transfer Protocol) POST -pyyntöihin. PC muokkaa mittaustiedot tietynlaiseen XML (eXtensible Markup Language)-muotoon, joka lähetetään palvelimelle HTTP RESPONSE -viestinä. Uusimmat mittaustiedot haetaan mittauskortilta aina pyynnön saapuessa, eli lukutiheys ja ajoitus riippuvat palvelimesta. [3, s. 28] WLAN-linkki yhdistää sulautetun PC:n ja sääasemapalvelimen. Käytössä on Ubiquiti Networks PicoStation M2-HP, joka tarjoaa 10/100 BASE-TX (Cat. 5, RJ-45)Ethernet liitynnän, ja saa käyttöjännitteensä samasta liittimestä POE (Power Over Ethernet)-tekniikkaa käyttäen. Sulautettu PC ei kuitenkaan tarjoa POE liitäntää, vaan välissä käytetään erillistä POE-sovitinta, joka toimii tukiaseman virtalähteenä. [6] Varsinainen sääasemajärjestelmän palvelin hoitaa mittaustietojen tallentamisen ja tarjoaa julkisen rajapinnan tietojen lukuun. Palvelimella on Web service-rajapinta, jonka kautta on mahdollista muun muassa kysellä mittaustietoja aikaperustaisesti molemmista tietokannoista SOAP (Simple Object Access Protocol)-muotoisilla HTTP-pyynnöillä, joihin palvelin vastaa samaten SOAP-viesteillä. Palvelun WSDL (Web Services Description Language)-kuvaus on saatavilla osoitteesta: http://koni.ain.rd.tut.fi:8080/TelitJava/services/Soapservice?wsdl 6 3 VAATIMUSMÄÄRITTELY Ohjelmistoteknisen suunnittelun yksi keskeisimpiä vaiheita on vaatimusmäärittely, jossa nimensä mukaisesti määritellään (yleensä asiakkaan) sille asettamat toiminnalliset ja ei-toiminnalliset vaatimukset. Vaatimusmäärittelyssä yleisesti käytetty tapa kuvata toiminnallisia vaatimuksia on käyttötapaukset, jotka kuvaavat käyttäjän ja ohjelmiston vuorovaikutusta käyttäjän päämäärien saavuttamiseksi. Käyttötapausten lisäksi tässä luvussa käsitellään tietosisältöä, teknisiä rajoitteita, käyttöliittymää ja ulkoasua. Ohjelmistolle asiakkaan asettamat vaatimukset jättävät kuitenkin paljon vapauksia suunnitteluun, joten suurin osa kuvatuista vaatimuksista ja tavoitteista ovat itse asetettuja. 3.1 Käyttötapaukset Ohjelmiston käyttötapaukset kuvaavat yleisien toimintojen suorituksen vaihe vaiheelta, niiden esiehdot, sekä suorituksen aikana mahdollisesti tapahtuvat virhetilanteet. Ohjelmistolla voi olla erilaisia käyttäjiä, mutta kaikilla on pääsy samoihin toimintoihin, joten varsinaisia käyttäjäryhmiä on vain yksi. Käyttötapauksia esittää Kuva 3, ja niitä on: selaus 2-ulotteisen navigaation avulla, selaus 3-ulotteisen navigaation avulla ja tietojen lukeminen tietosivuilta. Selaus 2-ulotteisen käyttöliittymän avulla Selaus 3-ulotteisen käyttöliittymän avulla Käyttäjä Tietosivujen käyttö Kuva 3: Ohjelmiston käyttötapauskaavio 3.1.1 Käyttötapaus 1: Selaus 2-ulotteisen käyttöliittymän avulla Esiehdot: Ohjelmiston käyttämiä tekniikoita tukeva web-selain ja yhteys palvelimelle. 7 Tapahtumakuvaus: 1. Käyttäjä navigoi ohjelmiston etusivulle ja odottaa että se latautuu kokonaan. 2. Käyttäjä painaa vasemman laidan valikosta joko pääryhmän tai osan nimeä, joka toimii linkkinä. 3. Sivun alaosaan latautuu asynkronisesti valitun pääryhmän tai osan kuvauksen sisältävä dokumentti. Mahdolliset virhetilanteet: Vaihe 3, sivua ei löydy tai asynkroninen lataus ei onnistu, jolloin käyttäjälle näytetään virheilmoitus. 3.1.2 Käyttötapaus 2: Selaus 3-ulotteisen käyttöliittymän avulla Esiehdot: Ohjelmiston käyttämiä tekniikoita tukeva web-selain ja yhteys palvelimelle. Tapahtumakuvaus: 1. Käyttäjä navigoi ohjelmiston etusivulle ja odottaa että se latautuu kokonaan. 2. Käyttäjälle esitetään 3-ulotteinen näkymä sääasemajärjestelmästä, josta hän voi hiirellä valita pääryhmän tai osan, josta haluaa saada lisätietoja. 4. Valitusta osasta tai ryhmästä näytetään 3-ulotteisessa näkymässä perustietokortti. 5. Sivun alaosaan latautuu asynkronisesti valitun pääryhmän tai osan täyden kuvauksen sisältävä dokumentti, ilman että 3-ulotteisen näkymän käyttö häiriintyy. Mahdolliset virhetilanteet: Vaihe 5, sivua ei löydy tai asynkroninen lataus ei onnistu, jolloin käyttäjälle näytetään virheilmoitus. 3.1.3 Käyttötapaus 3: Tietosivujen käyttö Esiehdot: Ohjelmiston käyttämiä tekniikoita tukeva web-selain ja yhteys palvelimelle. Tietosivu valittuna ja ladattuna käyttötapausten 1 ja 2 kuvaamalla tavalla. Tapahtumakuvaus: 1. Käyttäjä vierittää selaimen näkymää alaspäin, jotta haluttu kohta tietosivua tulee näkyviin. 2. Käyttäjä valitsee tietosivulla olevista kuvista yhden kerrallaan katseltavaksi suurempana klikkaamalla. 3. Valitun kuvan täysikokoinen versio ladataan ja näytetään käyttäjälle varsinaisen sivun päällä siten, että alla olevan sivun tila ei muutu. 4. Käyttäjä voi siirtyä kyseisen tietosivun kuvien välillä eteen ja taakse suoraan sulkematta täyden koon kuvankatselutoimintoa. 5. Käyttäjä sulkee kuvankatselutoiminnon klikkaamalla sulkemispainiketta tai taustalla näkyvää sivun osaa. 6. Käyttäjä jatkaa infosivun sisällön tutkimista. 7. Käyttäjän klikatessa ohjelmiston ulkopuolelle viittaavaa linkkiä sivu aukeaa uuteen välilehteen. Mahdolliset virhetilanteet: Vaihe 3, Kuvaa ei löydy tai asynkroninen lataus ei onnistu, jolloin käyttäjälle näytetään virheilmoitus. 3.2 Tietosisältö Ohjelmiston tehtävä on toimia helposti lähestyttävänä ja selkeänä tietopankkina, joka kattaa Systeemitekniikan laitoksen sääasemajärjestelmän kaikki osa-alueet antureista käyttöliittymiin. Pääasiallinen paino on järjestelmän teknisessä toteutuksessa ohjelmistotekniikan näkökulmasta, eli tietolinkit ja niiden rajapinnat tulee olla erotettavissa ja kuvattuna. Kuhunkin järjestelmän osaan liittyvää tietosisältöä tulee olla helppoa muokata ja lisätä esimerkiksi erillisten HTML-sivujen muodossa. 8 Sääasemajärjestelmä koostuu seuraavista osa-alueista, joiden tulee näkyä valmiissa ohjelmistossa: Meteorologiset anturit, Vaisala ROSA järjestelmän keskusyksikkö, sulautettu PC, WLAN-linkki, web-palvelin, tietokannat ja käyttöliittymät. Näiden väliset yhteydet tulee kuvata ja mahdollistaa laajempien tietoaineistojen liittäminen kuhunkin komponenttiin. Käyttäjäkannan laajuuden vuoksi ohjelmiston tulee tarjota myös vähemmän ohjelmistotekniikkaa tunteville käyttäjille ymmärrettävää tietoa siten, että he kykenevät vaivattomasti muodostamaan yleiskuvan sääasemajärjestelmän toteutuksesta ja toiminnoista. Tämä informaatio voi pitää sisällään, mutta ei tarvitse rajoittua seuraaviin: Laitteiden fyysinen olemus, antureiden toimintaperiaate ja ominaisuudet, sääasemajärjestelmän sisäisten tietovirtojen kulkureitit ja järjestelmän tarjoamat palvelut loppukäyttäjille. 3.3 Tekniset rajoitteet Ohjelmisto tulee toteuttaa web-sivuna, joka voidaan asettaa saataville julkisesti. Toteutuksessa tulee käyttää moderneja web-tekniikoita kuten HTML5:tä, ja sen tulee toimia vähintään yhdellä viidestä suosituimmasta internetselaimesta työpöytätietokoneympäristössä, ilman erikseen asennettavia liitännäisiä. Sovelluksen toiminta sekä Google Chromen että Mozilla Firefoxin uusimmilla vakailla versioilla on suotavaa. Ohjelmiston tarjoaman pääasiallisen tietosisällön tulee olla saatavissa myös selaimilla, jotka eivät tue 3-ulotteisen esityksen toteuttamiseen käytettyjä tekniikoita. Käytännössä komponenttien tietosivujen selaus ja luku tulee olla mahdollista HTML5standardin perustoiminnallisuutta ja yleisimpiä siihen liittyviä tekniikoita (CSS3, JavaScript) tukevilla selaimilla. 3.4 Käyttöliittymä Käyttöliittymä on ohjelmiston tärkein kokonaisuus, sillä käyttäjän kannalta ohjelmisto on sen käyttöliittymä. Siksi käyttöliittymän selkeyteen ja toimintojen intuitiivisuuteen tulee kiinnittää erityistä huomiota. Käyttöliittymän tulee muodostua pääosin erillisistä, mutta toistensa kanssa yhteen toimivista, 2-ulotteisista sekä 3-ulotteisista osista. Yhteistoiminnalla tarkoitetaan, että molemmat ovat käytettävissä rinnakkain, ja ne tukevat toisiaan parantaen ohjelmiston yleistä käytettävyyttä verrattuna yhden käyttöliittymän toteutukseen.. Kuva 4 esittää 2-ulotteisen käyttöliittymän rautalankamallin ja ohjelmiston visuaalisen rakenteen yhdessä tietosivujen valinnan perustoiminnallisuuden kanssa. Kuvasta poiketen selainikkuna ei tule olemaan yleisessä käyttötapauksessa yhtä korkea, vaan kerralla näkyy pystysuunnassa huomattavasti rajoitetumpi osa sivua. 9 Kuva 4: Sivun rakenteen ja 2-ulotteisen käyttöliittymän hahmotelma Tietosivujen avaaminen tulee onnistua sekä 2-ulotteisen, että 3-ulotteisen käyttöliittymän kautta. Molemmissa tapauksissa tietosivun lataus tulee suorittaa asynkronisesti siten, että sivun muiden osien käyttö ei häiriinny latauksen aikana. Lisäksi kuhunkin tietosivuun tulee olla mahdollista muodostaa suoraan osoittava URL (Uniform Resource Locator)-osoite, joka saa ohjelmiston samaan tilaan kuin muita navigointikeinoja käyttämällä. 3-ulotteisen käyttöliittymän tulee toimia itsenäisenä kokonaisuutena, jotta sen käyttö on mahdollista erikseen ilman että ohjelmiston muut osat ovat samaan aikaan näkyvillä. 10 Näkymässä tulee tätä varten olla esitettynä riittävä määrä tietoa sääasemajärjestelmän komponenteista, jotta käyttäjä voi muodostaa yleiskuvan sen toiminnoista pelkästään tämän käyttöliittymän kautta. Kustakin komponentista esitettävät tiedot tulee sisältää vähintään seuraavat: Komponentin nimi, valmistaja ja merkki, rooli järjestelmässä (esimerkiksi anturi tai palvelin) ja tietolinkeistä tyyppi, tiedon kulkusuunta sekä minkä komponenttien välillä yhteys on. Lisäksi on tärkeää, että käyttäjällä säilyy koko ajan kuva siitä, miten kulloinkin esitettävä informaatio liittyy järjestelmäkokonaisuuteen, eli esimerkiksi mistä päin mallia nykyinen kuvakulma on. 3.5 Ulkoasu Ulkoasun näyttävyys on tärkeää, sillä ohjelmistoa on tarkoitus käyttää yhtenä laitoksen järjestelmien esittelymateriaaleista. Näyttävän ulkoasun tehtävänä on herättää mielenkiinto aiheeseen satunnaisissa käyttäjissä, ja parantaa yleisesti käyttökokemusta. Ulkoasu ei kuitenkaan ole tärkeydessä käytettävyyttä korkeammalla. Ohjelmiston yleinen tyyli tulee olla yhtenäinen, ja on suotavaa noudattaa pääpirteiltään TTY:n määrittelemää visuaalista ilmettä sekä värimaailmaa. Tällä mahdollistetaan visuaalinen yhteensopivuus olemassa oleviin järjestelmiin ja verkkosivuihin. 2ulotteisen käyttöliittymän ulkoasussa tärkeintä on selkeä, minimalistinen ja moderni vaikutelma. 3-ulotteisen käyttöliittymän tulee olla keskeisessä osassa ohjelmistoa, ja tämän tulee näkyä myös sen visuaalisessa ilmeessä suhteessa muihin ohjelmiston komponentteihin, eli se voi olla rikkaampi ja kiinnittää käyttäjän huomion esimerkiksi animaatioilla. 11 4 VALITUT TEKNIIKAT Asiakkaan vaatimukset toteutettavalle järjestelmälle eivät nimeä toteutuksen ohjelmistoteknisiä yksityiskohtia, kuten käytettäviä web-tekniikoita. Niiden valinta on kuitenkin erittäin keskeinen osa ohjelmiston suunnittelua ja vaikuttavat suoraan, muun muassa rajoitteidensa kautta, toteutuksen sujuvuuteen ja lopputulokseen. Tässä luvussa esitellään toteutukseen valitut keskeiset tekniikat lyhyesti ja kullekin valinnalle perustelut suhteessa muihin harkittuihin vaihtoehtoihin. 4.1 HTML5 ja CSS3 HTML5 on käsitteenä monimuotoinen, ja sillä voidaan tarkoittaa esimerkiksi kaikkia moderneja web-tekniikoita, tai tarkemmin rajattuna HTML-merkintäkielen uutta versiota ilman muita liittyviä tekniikoita, kuten CSS3 tai tiettyjä sovellusrajapintoja. HTML5määrittely ei ole myöskään vielä valmis, vaan sen kehitys jatkuu W3C:n (World Wide web Consortium) ja WHATWG:n (Web Hypertext Application Technology Working Group) yhteistyöprojektina. Määrittelyn eri osat ovat myös kehityksensä hyvin eri vaiheissa, joista lähempänä lopullista olevat on jo nyt tuettuja useimmissa web-selaimissa, mikä mahdollistaa niiden käytön kuluttajillekin suunnatuissa web-sivustoissa ja sovelluksissa. [7] HTML5 tuo joka tapauksessa merkittävän määrän uusia ominaisuuksia web-sivujen kehittämiseen, ja sen tavoitteina on muiden muassa vähentää tarvetta erillisten liitännäisten käytölle, vähentää yleisten toimintojen skriptaustarvetta, toimia laiteriippumattomasti ja perustua olemassa oleviin HTML, CSS, DOM (Document Object Model) ja JavaScript määrittelyihin. Uusiin ominaisuuksiin lukeutuu uudet semanttiset elementit, täysi CSS3-tuki sisällön tyylittelyyn, suora tuki videolle ja äänelle, 2- ja 3-ulotteinen grafiikka (SVG (Scalable Vector Graphics), CSS3), sovellusliittymät kuten Geolocation API ja dokumentin dokumenttioliomallin mukaisen rakenteen (DOM) tarkempi määrittely. [7, 8] CSS3 on CSS-tyylimäärittelyn uusin yhtenäinen versio, mutta määrittelyltään modulaarinen, josta johtuen siitä ei ole olemassa yksittäistä koottua määrittelyä. Eri moduulit (joita on yli 50) ovat myös eri kehitysvaiheissa, ja web-selaimien tuki CSS3:een kuuluville moduuleille ja jopa yksittäisille ominaisuuksille on myös vielä melko hajanaista. Tärkeimpiä ja jo nykyään eniten käytettyjä uusia ominaisuuksia verrattuna CSS 2.1:een on tyylien animointi, laajempi tuki taustakuville ja läpinäkyvyydelle, tuki väriliukumille ja elementtien varjoille, elementtien pyöristetyt nurkat sekä DOM-elementtien ominaisuuksiin kohdistuvat valitsimet. [9, s. 232-235] 12 Virtuaalimallisivuston toteutuksen kannalta HTML5 ja CSS3 ovat luonnollisia valintoja toteutuksen ydintekniikoiksi, sillä tärkeimpiä vaatimuksia on nimenomaan toiminta moderneilla web-selaimilla ilman erillisiä liitännäisiä. Lähes kaikki vaihtoehtoiset tekniikat vaatisivat liitännäisiä 3d-näkymän esittämiseen, mutta HTML5:den canvaselementillä voidaan tehokkaasti esittää mitä vain ajon aikana päivittyvää grafiikkaa osana web-sivua. Esimerkkinä yksi liitännäisiä tarvitsematon vaihtoehto HTML5:den canvasille on 3d-näkymän esittäminen SVG-muodossa, mutta sen heikkoutena ovat merkittävät esitettävään grafiikkaan kohdistuvat tekniset rajoitteet ja selvästi heikompi suorituskyky. Käytännössä HTML5:den canvas elementin käyttö on tällä hetkellä ainut järkevä tapa dynaamisen 3D-grafiikan sisällyttämiseen web-sivulle kun otetaan huomioon esityksen rikkaus- ja suorituskykyvaatimukset. CSS3:n käyttö ei ole toteutuksen kannalta yhtä välttämätöntä, sillä sivuston ulkonäkö ja toiminta on mahdollista toteuttaa myös laajemmin tuettua CSS 2.1 määritystä hyväksikäyttäen. CSS3:n uudet ominaisuudet tekevät kuitenkin tiettyjen ulkoasun elementtien toteutuksesta huomattavasti yksinkertaisempaa ja miellyttävämpää. Esimerkiksi väriliukumien toteutuksessa voidaan käyttää suoraan CSS3:n tyylimäärittelyjä bittikartoista muodostuvien taustojen sijaan. CSS3:n valitseminen toteutuksessa käytettäviin tekniikoihin on toisaalta myös vaikuttanut ulkoasun tyylin muodostumiseen. Vanhemman tyylimäärittelyn valinnan myötä ulkoasustakin olisi todennäköisesti tullut osin erilainen. 4.2 JavaScript ja JQuery JavaScript on käytännössä kaikkien nykyisten web-selaimien tukema ohjelmointikieli, jonka tarkoituksena on mahdollistaa dynaamisten web-sivujen luominen. JavaScriptillä voidaan muun muassa muokata esitettävän web-sivun rakennetta ja ulkoasua tai ladata uutta sisältöä palvelimelta AJAX:illa (Asynchronous JavaScript And XML) ilman että sivua täytyy ladata kokonaisuudessaan uudestaan. Ohjelmointikielenä JavaScript on oliopohjainen, löysästi tyypitetty ja dynaaminen skriptikieli, jonka syntaksi muistuttaa C:tä ja Javaa, mutta on muuten näihin verrattuna konsepteiltaan ja toiminnaltaan hyvin erilainen. JavaScript on myös ainut laajasti webselaimien suoraan tukema skriptikieli, joten sen valinta toteutustekniikaksi on itsestään selvä. Eri selaimien toteutukset niistä osista, jotka eivät ole JavaScriptin määrittelyn piirissä, kuten web-sivun HTML-sisällön dokumenttioliomallikuvauksessa (DOM), ovat kuitenkin etenkin vanhemmissa versioissa erilaisia, mistä johtuen sama JavaScript-koodi ei toimi samoin kaikilla alustoilla. Ratkaisuksi tästä johtuviin yleisiin ongelmiin on kehitetty useita erilaisia JavaScriptillä toteutettuja kirjastoja, jotka pyrkivät tarjoamaan saman toiminnallisuuden mahdollisimman laajalla kentällä web-selaimia ja niiden versioita. Nykyään selvästi suosituin JavaScript-kehyskirjasto on JQuery, jonka keskeisenä ideana on yksinkertaistaa ja nopeuttaa web-sivujen dynaamisten JavaScriptillä toteutettujen ominaisuuksien tuottamista. Se tarjoaa muun muassa lyhennetyt ja yksinkertaiste- 13 tut kutsut yleisille toiminnoille kuten tapahtumankäsittelijöiden rekisteröinnille, tehokkaan tavan valita elementtejä DOM-puusta ja muokata niiden kaikkia ominaisuuksia. [10, s. 196] JQuery ei tuo varsinaisesti mitään uutta mitä pelkällä JavaScriptillä ei voida toteuttaa (mikä olisikin paradoksaalista, sillä se on itsessään toteutettu kokonaan JavaScriptillä), mutta sen tarjoamat toiminnot ovat niin paljon yksinkertaisempia käytettäviä, että käytännössä se löytyy todella monien suosittujen sivustojen taustalta. [10, s. 196] JQueryyn löytyy myös paljon vapaasti saatavilla olevia laajennuksia, ja ”tavallista” JavaScriptiä voi myös käyttää sen rinnalla varsin saumattomasti [10, s. 315-317]. JQueryn valinnassa avustavaksi JavaScript kirjastoksi ei tehty varsinaista vertailua muihin samoja ominaisuuksia tarjoaviin kirjastoihin. Valinta perustui lähinnä henkilökohtaiseen haluun tutustua tähän suurta suosiota saavuttaneeseen ratkaisuun ja luottamukseen siitä, että se tulee täyttämään tämän verrattain yksinkertaisen sivuston tarpeet hyvin. Lisäksi JQueryn käytön osaamisesta voi olla hyötyä jatkossa, mahdollisissa muissa web-kehitysprojekteissa. 4.3 WebGL ja Three.js WebGL (Web Graphics Library) on OpenGL (Open Graphics Library):yn perustuva JavaScriptin kautta käytettävä sovellusliittymä (API) interaktiivisen kolme- ja kaksiulotteisen grafiikan esittämiseen web-selaimessa. Tuki WebGL:älle riippuu selaimesta, mutta on sisäänrakennettu siten, että erillisiä liitännäisiä ei tarvita ja se on tuotu osaksi moderneja web-standardeja, mikä mahdollistaa näytönohjaimella tuotettavan sisällön käytön saumattomasti muiden web-sivun elementtien kanssa. WebGL:n etu onkin juuri sen tarjoamassa rajapinnassa laitteen näytönohjaimen käyttöön, mikä mahdollistaa visuaalisesti rikkaan esityksen käyttäen perinteisistä työpöytäohjelmistoista tuttuja tehosteita ja tekniikoita. Erillisen näytönohjaimen suorituskyky on kolmiulotteisen grafiikan tuottamisessa myös aivan eri luokassa verrattuna pääsuorittimeen (CPU (Central Processing Unit)). WebGL tukeutuu HTML5:den canvas-elementtiin varsinaisen tuotetun grafiikan esittämisessä, joten kaikki WebGL:ää tukevat selaimet tukevat myös canvaselementtejä, mutta ei toisinpäin. Tuki kaikille WebGL:n ominaisuuksille on hieman vaihtelevaa sitä tukevien selainten kesken, mutta merkittävimmät modernit selaimet kuten Mozilla Firefox, Google Chrome (ja muut webkit-pohjaiset kuten Apple Safari) tukevat kaikkia tärkeimpiä ominaisuuksia, joten sovelluskehitys näille alustoille on mahdollista ilman suurempia ongelmia toiminnan eroista selaimien välillä. WebGL on kuitenkin itsessään melko matalan tason rajapinta, joten suoraan sen päälle rakentuvien sovellusten kehittäminen vaatii melko paljon perehtymistä, ja siinä on näin ollen työlästä päästä alkuun. Tätä ongelmaa helpottamaan on kehitetty JavaScript-kirjastoja, jotka pyrkivät hieman samaan tapaan kuin JQueryn kaltaiset kirjastot merkittävästi helpottamaan ja yksinkertaistamaan yleisten toimintojen toteutusta. Yksi tällainen kirjasto on Three.js, joka tarjoaa WebGL:n lisäksi myös muita (mutta rajoit- 14 tuneempia) piirtureita 3D-grafiikalle, mutta ennen kaikkea yksinkertaistetut tavat luoda ja hallita objekteja, maailmaa, materiaaleja, valaistusta, animaatioita ja niin edelleen. Three.js on tällä hetkellä web-käytössä suosituimpia 3D-kirjastoja, ja sen kehitys jatkuu edelleen aktiivisena. Saman kehitysprojektin piirissä on kehitetty varsinaisen ydinkirjaston lisäksi paljon hyödyllisiä lisäkirjastoja ja esimerkkejä, jotka ennestään helpottavat sen käyttöönottoa. Vaikka kirjaston dokumentaatio on varsin puutteellista, lähes kaikista ominaisuuksista löytyy valmiit esimerkit, ja ne ovatkin keskeisessä roolissa toiminnallisten mahdollisuuksien kartoituksessa ja käytön opettelussa. Three.js:än valinta käytettäväksi 3D kirjastoksi perustui sillä toteutettujen esimerkkisovellusten runsauteen ja internetin keskustelupalstoilta löytyneisiin yleisesti positiivisiin kommentteihin. Lisäksi verrattain laaja käyttäjäkanta on jo tuottanut internetiin kattavan määrän keskusteluja yleisistä kehitystyössä vastaan tulevista ongelmista ja ratkaisuista niihin. Muista vastaavista kirjastoista oli vaikeampi löytää selkeästi esitettyjä esimerkkejä tai ne eivät vaikuttaneet visuaalisella ilmeellään ja toiminnallisuudellaan. Harkittuja vaihtoehtoja Three.js:lle olivat muiden muassa Scene.js, X3DOM, CopperLicht ja Kuda. Yhden tämän työn pääasiallisista tavoitteista ollessa visuaalinen näyttävyys, käytettävien tekniikoiden tulee osoittaa soveltuvuutta ja niiden tarjoamia mahdollisuuksia näyttävien olemassa olevien toteutusten muodossa. Muuten saattaa helposti törmätä visuaalista ilmettä latistaviin tekniikoiden rajoitteisiin, jotka eivät välttämättä ole suoraan havaittavissa, ennen kuin kyseisiin tekniikoihin on tutustunut syvällisemmin. 15 5 OHJELMISTOTEKNINEN SUUNNITTELU Ohjelmistotekninen suunnittelu on yksi merkittävimmistä vaiheista ohjelmistoprojektissa. Siinä määritellään ohjelmiston rakenne arkkitehtuurista yksittäisten toiminnallisuuksien toteutukseen asti. Suunnittelu perustuu vaatimusmäärittelyyn ja edeltää varsinaista toteutusvaihetta, joskin usein kehitysprosessi on iteratiivinen. Tämä luku jakautuu kahteen pääosaan: sovellusarkkitehtuuriin ja olioanalyysiin. Sovellusarkkitehtuurissa kuvataan valittujen tekniikoiden soveltamista yleisemmällä tasolla, kun taas olioanalyysi esittelee ohjelmiston rakennetta yksityiskohtaisemmin ja erityisesti luokkajakoisesti. 5.1 Sovellusarkkitehtuuri Sovellusarkkitehtuuri kuvaa ohjelmiston korkeimman tason rakennetta, eli komponentteja mistä se muodostuu ja riippuvuuksia ulkoisiin lähteisiin. Tämä aliluku kuvaa miten keskeisimpiä tekniikoita sovelletaan suunnitteluongelman ratkaisussa. Lisäksi esitellään sivuston rakennetta ja elementtien yhteistoimintaa yleisellä tasolla. 5.1.1 HTML ja AJAX Web-sivut koostuvat perinteisesti useista HTML-sivuista, joiden välillä liikutaan linkkien avulla. Aina linkkiä klikatessa lähetetään web-palvelimelle pyyntö linkin osoittamasta uudesta sivusta ja vastauksena palvelin palauttaa kyseisen sivun. Vähänkin isommat tai monimutkaisemmat sivustot on lähes poikkeuksetta toteutettu palvelinpuolen ohjelmointitekniikoilla, kuten esimerkiksi PHP-skripteillä, siten että selaimelle palautettava sivu luodaan pyynnön ja palvelin tietokannan sisällön perusteella. Näin on mahdollista toteuttaa hyvin monipuolisia sovelluksia ja dynaamisuutta sillä selaimelle lähetettävä sivu ei ole enää vain palvelimen kiintolevylle tallennettu tiedosto, vaan se voi olla joka kutsulla täysin uniikki. Palvelinpuolella toteutetun dynaamisuuden heikoin lenkki on kuitenkin se tosiseikka, että sivu tulee aina ladata kokonaisuudessaan uudestaan, mihin kuluu väistämättä jonkin verran aikaa. Käyttäjän klikkauksen ja uuden näkymän avautumisen välillä on siis selvästi havaittava odotusaika. Esimerkiksi animaatioiden tai muun nopeaa päivitysnopeutta vaativan sisällön toteuttaminen ei ole käytännössä mahdollista käyttämällä pelkästään perinteisiä tekniikoita, jotka ovat vain palvelinpuolella dynaamisia. Selaimessa ajettavilla ohjelmilla, kuten JavaScriptillä, voidaan kuitenkin näitä tuottaa, mutta kaikki tarvittava tieto tulee ladata kerralla tai sivu päivittää kokonaan uudestaan palvelimelta. 16 JavaScript mahdollistaa huikean määrän erilaisia toimintoja, mutta tämän sivuston toteutuksen kannalta keskeisessä roolissa on niinkutsutut AJAX-tekniikat. AJAX:in ideana on luoda JavaScriptillä asynkronisia kutsuja palvelimelle, ja saada vastauksena esimerkiksi XML-muotoista tietoa, jota voidaan edelleen esittää web-sivulla ilman sivun lataamista kokonaan uudelleen. Asynkronisella tarkoitetaan tässä yhteydessä perinteisen synkronisen toiminnan vastakohtaa, jossa asiakas (selain) jää odottamaan palvelimen vastausta. Asynkronisessa toiminnassa sivun käyttö ei siis pysähdy tai esty uuden tiedon hakemisen ajaksi, vaan se tapahtuu käyttäjän näkökulmasta huomaamattomasti taustalla. Virtuaalimallin sivusto muodostuu yksittäisestä HTML5-syntaksia käyttävästä pääsivusta, ja se tukeutuu vahvasti AJAX:iin (käytettynä JQueryn kautta) sisällön lataamisessa. Pääsivu sisältää viitteinä kaikki koko sivustossa käytetyt CSS-tyylimäärittelyt ja JavaScriptit, jotka tuodaan omista tiedostoistaan, mutta ladataan kuitenkin synkronisesti samalla kertaa pääsivun kanssa. Pääsivu toimii siis runkona, jonka rakennetta muokataan selaimessa JavaScriptillä ajon aikana. Sivusto ei käytä mitään palvelinpuolen dynaamisuutta, eli kaikki palvelimelta ladattava sisältö on staattista. Jokainen tietosivu ja 3D-näkymän tietolaatikko on toteutettu omina HTML5syntaksin mukaisina dokumentteinaan. Näitä dokumentteja on siis mahdollista tarkastella myös erikseen, pääsivun ulkopuolella, mutta niiden tyylimäärittelyt on kuitenkin suunniteltu toimimaan vain osana pääsivua. Tietosivut ladataan asynkronisesti sitä mukaa kun käyttäjä navigoi kyseiseen kohtaan virtuaalimallia, ladatusta sivusta suodatetaan pois pääsivun osana turhat elementit kuten header ja body, jonka jälkeen vain haluttu osa sijoitetaan osaksi pääsivua. 3D-näkymän malli ladataan niin ikään asynkronisesti kun pääsivu on latautunut. Se sisältää varsinaisen geometrian, materiaalit ja 3D-asetelman määrittävän Colladatiedoston lisäksi erillisinä kuvatiedostoina olevia tekstuureita. Geometrian sisältämä tiedosto ladataan ensin, jonka jälkeen selain hakee siinä määritellyt tekstuurit erikseen palvelimelta. Mallin latauksen jälkeen ladataan jokaista tietolaatikkoa vastaava HTMLsivu JQueryn asynkronista latausta käyttäen, lisätään pääsivun DOM-puuhun, piirretään tekstuuriksi ja lopuksi poistetaan HTML DOM-puusta. 5.1.2 CSS HTML5:dessä on haluttu siirtyä kokonaan malliin, jossa sisältö ja tyylimäärittelyt ovat erotetut toisistaan. Tätä ajatusta on ollut jo HTML-merkintätavan edellisissä versioissa, mutta ne ovat toisaalta myös sisältäneet tiettyjä attribuutteja ja elementtejä joilla on merkitystä pelkästään dokumentin esityksen kannalta. Esimerkkinä näistä toimivat vaikka lihavoinnin ”<b>”-elementti tai vaakasuuntaisen asettelun ”align”-attribuutti. Tietosisällön ja rakenteen sisältävän dokumentin erottaminen sen esitystavan määrittelystä tarjoaa useita selviä etuja, kuten tyylimäärittelyjen uudelleenkäytettävyyden useilla sivuilla, dokumenttien koon pieneneminen, standardien yksinkertaistuminen ja tietosisällön (koneellisen) tulkinnan helpottuminen. 17 CSS on keino HTML-sivujen esitystavan määrittämiseen, jonka avulla on mahdollista luoda samasta HTML-dokumentista hyvin erilaisia esityksiä. CSS:llä voidaan määrittää kaikkea elementtien koosta ja asettelusta käytettyihin fontteihin, taustoihin ja tehosteisiin kuten animaatioihin tai varjoihin. Se mahdollistaa myös itsessään suoraan rajallisen määrän dynaamisuutta dokumentin ulkoasuun ilman JavaScriptiä, kuten esimerkiksi elementtien ulkoasu voi muuttua kun käyttäjä vie hiiren kursorin niiden päälle. Virtuaalimallin sivusto käyttää CSS3:a lähes kaikkeen asetteluun ja kaikkeen elementtien ulkoasun määrittelyyn. Tietyt elementtien asettelut ja koot lasketaan erikseen JavaScriptillä johtuen kyseisten toteutusten hankaluudesta tai mahdottomuudesta pelkästään CSS:ää käyttämällä. CSS-määrittelyjä voidaan jakaa useaan tiedostoon, joka helpottaa kokonaisuuksien hahmottamista. Eri tiedostoissa olevat määrittelyt voivat kuitenkin olla ristiriidassa toistensa kanssa, joten toivotunlaisesta yhteistoiminnasta on pidettävä erikseen huolta. Itse toteutetut CSS-määrittelyt on sivustossa jaettu kolmeen tiedostoon: ”billboard_style_HD.css” määrittelee 3D-näkymän tietolaatikoiden esityksen, ”infopage_style” vastaavasti kaikille tietosivuille yhteisen ulkoasun ja ”style.css” on pääsivun ja tyylimääritys. Lisäksi ”JQuery UI” ja ”JQuery Lightbox” kirjastoilla on omat tyylimäärittelynsä, jotka ovat myös molemmat omissa tiedostoissaan. 5.1.3 JavaScript JavaScriptiä käytetään sovelluksessa käytännössä kaiken toiminnallisuuden toteuttamiseen. Kaikki sovelluksen sisäiset linkit on kytketty JavaScriptiin siten, että selaimen vakiotoiminto estetään ja sen sijaan ajetaan kyseistä linkkiä vastaava tapahtumankäsittelijä. Tämä toimintamalli on sovelluksen toiminnan kannalta välttämätöntä, sillä käyttöliittymän ulkoasua ja sisältöä halutaan muokata ohjelmallisesti nimenomaan selaimessa AJAX-tekniikoita käyttäen. Perinteisiä HTML-linkkien toimintoja käytetään vain sovelluksen ulkopuolisiin lähteisiin viitatessa, jolloin sivut avataan aina uudessa välilehdessä tai ikkunassa sovelluksen tilan katoamisen tai muuttumisen estämiseksi. JavaScript on käytössä myös kaiken 3-ulotteisen sisällön esittämisessä. Vaikka suurin osa varsinaisesta 3d-sisällöstä on staattista ja ladataan esimääritellystä mallista, sen esittäminen tapahtuu kuitenkin JavaScriptin avulla. Osa 3D-sisällöstä kuten tietokortit kuitenkin myös luodaan JavaScriptillä. Three.js JavaScript-kirjastoa käytetään kaikkiin 3-ulotteisen näkymän esityksen tuottamiseen ja hallintaan liittyviin tarpeisiin. Sovelluksen JavaScript-toteutus on jaettu useaan tiedostoon siten, että ne muodostavat loogisia kokonaisuuksia. Tiedostojako on tehty pelkästään kokonaisuuden selkeyden vuoksi, ja kaikki tiedostot tulee kuitenkin aina ladata sovelluksen pääsivun kanssa. JavaScript ei syntaksin tasolla tue nimiavaruuksia, ja vastaavien rakenteiden toteuttaminen muuten on katsottu tarpeettomaksi sovelluksen verrattain yksinkertaisen rakenteen vuoksi. Käytetyt kirjastot käyttävät kuitenkin omia nimiavaruuksiaan, mikä on nimikonfliktien välttämiseksi tärkeää niiden ollessa yleiskäyttöisiä ja merkittävästi laajempia. Sovellus käyttää JQueryä 2D-käyttöliittymän toimintojen toteutukseen, AJAXhakuihin sekä DOM-puun muokkaamiseen. Lisäksi JQuerylle tehtyjä liitännäisiä käyte- 18 tään seuraavasti: JQuery UI Message käyttäjälle näytettäviin virhe ja varoitusviesteihin, JQuery Hashchange selainriippumattomaan osoiterivin ”hash-osan” muutoksen havaitsemiseen ja JQuery Imagesloaded selainriippumattomaan tietosivujen kuvien latauksen valmistumisen havaitsemiseen. Three.js mukana tulevista skripteistä sovellus käyttää (varsinaisen Three.js kirjaston lisäksi) ColladaLoader.js:ää 3D-mallin lataamiseen ja muuntamiseen esitysmuotoon Collada-tiedostosta sekä muokattua versiota OrbitControls.js:ästä kameran liikuttamisen käyttöliittymään. Näiden kirjastojen lisäksi käytössä on vielä Tween.js joka tuottaa erilaisia käyrämuotoja noudattavia siirtymiä mielivaltaisten arvojen välillä ja HTML2Canvas joka piirtää tietolaatikoiden HTML-sivut bittikartoiksi HTML5 canvaselementtiin. 5.2 Olioanalyysi Olioanalyysin on ohjelmistoteknisen suunnittelun keskeinen työkalu ja –vaihe, jossa sovelletaan olio-ohjelmoinnin periaatteita ohjelmiston rakenteen suunnitteluun. Tosin mikäli toteutuksessa ei käytetä olio-ohjelmointia, korvataan tämä vaihe muilla suunnittelumenetelmillä. Olioanalyysin tavoitteena on hahmottaa ongelma siten, että se on ratkaistavissa olio-ohjelmoinnin periaatteita käyttäen, ja sen lopputuloksena ovat määritykset ohjelmiston luokkajaosta sekä luokkien rajapinnat. Tämä luku esittelee ensin JavaScriptin oliomallia, ja sitten toteutukseen kuuluvat keskeiset luokkamaiset rakenteet. 5.2.1 JavaScriptin oliomalli JavaScript on oliopohjainen ohjelmointikieli, mutta se eroaa oliomallinsa osalta selvästi niin sanotuista perinteisistä luokkaperustaisista ja vahvasti tyypitetyistä olioohjelmointikielistä kuten C++:sta tai Javasta. JavaScriptissä ei ole luokkia, vaan jokainen olio voi olla rakenteeltaan uniikki, minkä lisäksi olioiden tietorakennetta voidaan muokata ajon aikana vapaasti. Lisäksi funktiot ovat myös olioita, ja niinpä niillä on myös tiettyjä jäsenmuuttujia ja -funktioita. [11] JavaScriptissä olioilla on nimettyjä jäsenmuuttujia ja -funktioita joita kutsutaan parametreiksi. Itse olion rakenne on tyypitetty taulukko, josta voidaan hakea parametrien arvoja niiden merkkijono- tai lukuperustaisen nimen perusteella. Olioiden periyttäminen eli määriteltyjen tietorakenteiden uudelleenkäyttö onnistuu helpoiten kopioimalla isäolio ja lisäämällä siihen halutut toiminnallisuudet. Lisäksi on mahdollista käyttää erityistä prototyyppi-parametria, jonka kautta saatavaa oliota muokkaamalla kaikki siitä periytyvät oliot muuttuvat. Tämä vastaa luokkaperustaisessa kielessä jonkin luokan muokkaamista, mutta on mahdollista suorittaa täysin dynaamisesti ajon aikana. [11] Prototyyppiperustaisella ohjelmointikielellä on kuitenkin mahdollista toteuttaa luokkamaisia rakenteita ja niiden perintää, mutta tällöin käyttäjän on itse asetettava itselleen niistä koituvia rajoitteita, sillä ohjelmointikieli ei tue näitä rakenteita suoraan. Luokkarakenteisiin ohjelmointikieliin tottuneena JavaScriptin erittäin joustava rakenne on alkuun hyvin hämmentävä, ja sen tarjoamien uusien mahdollisuuksien hahmottaminen 19 vaatii jonkin verran harjaannusta. Lisäksi dynaamista tyypitystä ja luokatonta oliomallia käyttävän sovelluksen suunnittelu ja esittäminen esimerkiksi tuttujen UML (Unified Modeling Language)-luokkakaavioiden avulla on haastavaa. Sovelluksesta on kuitenkin havaittavissa tiettyjä rakenteita, jotka ovat järkeviä toteuttaa kiinteiden olioluokkien kaltaisesti. On hyvin yleistä käyttää JavaScriptsovelluksissa ainakin osittaista luokkajakoa, jolloin toteutuksesta tulee huomattavasti selkeämmin hahmottuva kuin täysin dynaamisilla olioilla. Vaikka kieli ei pakota tiettyyn rakenteeseen, ovat tietyt toimintatavat hyväksi ja toimiviksi todettuja, ja niinpä niitä näkee käytettävän esimerkiksi monissa JavaScript-kirjastoissa. Tähän sovellukseen toteutettavilla luokilla on kuitenkin tiettyjä samankaltaisia ominaisuuksia (muuttuja ja funktioparametreja) jotka eivät ole suoranaisesti perinnällä toteutettavia, mutta vastaavat lähinnä rajapintojen (interface) toteutusta. JavaScript ei tunne myöskään rajapintojen määrittelyä ja perinteisesti luokkapohjaisissa ohjelmointikielissä rajapintoihin ei sisälly muuttujaparametreja, mutta näiden tiettyjen sovelluksen olioiden yhteisten ominaisuuksien esittämiseen rajapinnat sopivat kuitenkin melko hyvin. 20 Kuva 5: Kolmen pääluokan rajapinnat ja riippuvuudet UML luokkakaaviona Itse toteutettuja luokkamaisia rakenteita on sovelluksessa FocusableItem, HTMlBillboard ja AnimatedDataLink, jotka kaikki liittyvät 3D-näkymän toteutukseen. Näiden lisäksi on nimettömiä, puhtaasti tiedon varastointiin käytettäviä, olioita esimerkiksi kameran kohdekohtaisille asetuksille. FocusableItemeitä käytetään kameran hallintaan ja ne muodostavat 3D-käyttöliittymän perustan, HTMLBillboard sisältää tietokorttien lataamiseen ja hallintaan tarvittavat toiminnot ja AnimatedDatalink on graafinen esitys tietolinkistä kahden laitteen välillä. Näiden luokkien väliset suhteet ja toteuttamat rajapinnat on esitetty kuvassa 5. 5.2.2 Rajapinnat Kolmelle pääluokalle on nähtävissä tarve kahdelle melko yleiselle rajapinnalle. Nämä melko korkean abstraktiotason rajapinnat liittyvät 3D-objektin korostamiseen ja kame- 21 ran ohjaamiseen ja toistuvat samanlaisina, mutta niiden toteutukset vaihtelevat luokkien välillä. Juuri merkittävät erot toteuttavissa luokissa ja varsinaisten toimintojen erilaisuus on syynä rajapinta-rakenteen käyttöön periyttämisen sijaan. IHighligtable-rajapinta on varsin yksinkertainen ja sisältää vain kaksi funktioesittelyä: setHighlight jota käytetään objektin korostuksen kytkemiseen päälle tai pois ja getPickingMeshes, jolla toteuttavalta oliolta saadaan haettua sen korostuksen tarkasteluihin käytettävät varsinaiset 3D-objektit. Objektien korostus on toteutettu siten, että kameran projektiotasosta luodaan kursorin kohdalta säde, jonka osumista 3D-maailman objekteihin tarkastellaan. Tätä varten tarvitaan lista niistä kaikista objekteista joiden kanssa törmäyksiä halutaan tarkastella, eli korostettavat objektit. Tarkastelun nopeuttamiseksi käytetään geometrialtaan merkittävästi yksinkertaisempia objekteja kuin mitä käyttäjälle näytetään, ja nämä objektit saadaan kultakin rajapinnan toteuttavalta oliolta taulukossa getPickingMeshes-funktion paluuarvona. SetHighlight-funktiolla voidaan asettaa toteuttavan olion korostus päälle tai pois riippuen highlight-parametrista. Korostuksen tarkoituksena on antaa käyttäjälle vinkki siitä, että kyseinen objekti on valittavissa tai siihen liittyy jotain muuta toiminnallisuutta. Korostus voidaan toteuttaa esimerkiksi objektin materiaalia muuttamalla, jolloin käyttäjä huomaa muutoksen ja objekti myös erottuu paremmin taustastaan. IFocusable-rajapinta on huomattavasti monimutkaisempi, sillä se sisältää kameran kohdistamiseen ja tietokorttien näyttämiseen tarvittavat funktiot. SetCameraSettingsTofunktio saa toteuttavan olion asettamaan kameran ohjaimen parametrit funktion parametrina annettuun ohjaimeen, focusControl taas asettaa parametrien lisäksi myös kameran paikan ja suunnan. GetCameraTargetPositions-funktion tarkoitus on mahdollistaa laskea kameran tuleva paikka kohdistuksen jälkeen, joka tarvitaan kohdistuksen siirtymäanimaation loppupisteeksi. Lisäksi rajapinnassa on funktiot tietokorttien tai muun lisätiedon näyttämiselle ja piilottamiselle animaation kanssa tai ilman. Lisätiedot on tarkoitus näyttää aina kun objekti on valittuna, mutta erilliset funktiot tuovat tähän lisää joustavuutta. 5.2.3 FocusableItem FocusableItem-luokka täyttää tarpeen esittää useita erikseen valittavia objekteja 3D avaruudessa siten, että kullakin voi olla omat asetuksensa kameran ohjaimelle. Vaatimuksena on, että objektit ovat sekä korostettavia (IHighlightable-rajapinta), että kameralla kohdistettavia (IFocusable-rajapinta). FocusableItemin toiminnot keskittyvät kameraohjaimen asetusten säilömiseen, niiden asettamiseen kameran ohjaimeen kun näkymä halutaan kohdistaa kyseiseen kohteeseen, sekä korostukseen tarvittaviin 3D-objekteihin. Sillä ei ole muita funktioita toteutettujen rajapintojen lisäksi, ja niinpä FocusableItem voidaankin ajatella vain näiden kahden rajapinnan eräänlaisena perustoteutuksena. Käytännössä kuitenkin FocusableItem-oliot ovat sovelluksen toiminnan kannalta keskeisiä, sillä ne muodostavat 3Dkäyttöliittymän perustan. Kamera liikkuu pelkästään näiden olioiden määrittämien kohteiden välillä, ja jokaisella kohteella on omat asetuksensa kameran ohjaimelle. 22 Jokaisella FocusableItem-oliolla on uniikki avainsana, jonka avulla on tehty liitos HTML:ällä toteutetun 2-ulotteisen ja JavaScriptillä tuotetun 3-ulotteisen sovelluksen osan välille. Kutakin tietosivua, siihen liittyvää HTML linkkiä ja 3D-mallin kohdetta yhdistää sama avainsana. Avainsanoja käytetään myös viitteinä ja olioiden järjestelyyn taulukoihin. 5.2.4 HTMLBillboard HTMLBillboard-oliot muodostavat kaikki 3D-näkymän tietolaatikot. Näiden tietolaatikoiden sisältö on määritetty kukin omassa HTML-tiedostossaan ja esitystapa tulee kaikille laatikoille yhteisestä CSS-tiedostosta. Luokan tehtävänä on ladata AJAX:illa kyseinen HTML-sivu ja tyylitiedosto, lisätä se (näkymättömäksi) osaksi pääsivun DOMpuuta, piirtää laatikko html2canvas-kirjastoa käyttäen väliaikaiseen Canvas-elementtiin, ladata tekstuuri Canvasilta ja luoda sille Three.js:n materiaali sekä varsinainen geometria. Lisäksi luokka toteuttaa sekä IHighlightable että IFocusable-rajapinnat, eli tietolaatikko voidaan korostaa ja siihen voidaan kohdistaa kamera. IFocusable-rajapinnan hideInfo ja showInfo-funktiot vaikuttavat tämän luokan toteutuksessa koko tietolaatikon näkyvyyteen toisin kuin FocusableItemissä, jossa niiden toteutus vain välittää kutsun siihen liittyville tämän luokan olioille eli tietolaatikoille. Tietolaatikon piilotuksen ja esiintuonnin animointiin käytetään Tween.js-kirjastoa ja Three.js:n materiaalien läpinäkyvyysparametria. Tietolaatikoiden toteuttaminen HTML-sivuina mahdollistaa yhtä helpon muokattavuuden sekä tietosivuille, että tietolaatikoille. Muokattavuus on tärkeää, sillä täydellistä kuvausta järjestelmän kaikista osista ei ole tarkoitus tuottaa tämän kandidaatintyön aikana, johtuen tiedon saatavuusongelmista. Lisäksi järjestelmään saattaa tulla muutoksia tai tietoja, linkkejä, kuvia ym. halutaan lisätä jälkikäteen. HTML-toteutus on tosin hyvin monimutkainen verrattuna staattisiin kuviin ja vaatii useita AJAX-kyselyitä palvelimelle, mutta ladattavan tiedon määrä on toisaalta pienempi verrattuna esimerkiksi PNG (Portable Network Graphics)-pakattuihin tekstuureihin. CSS-tyylitiedostoa muokkaamalla on myös mahdollista hyvin helposti muuttaa kerralla kaikkien tietolaatikoiden ulkoasua. Tietolaatikoiden tekstuurit piirretään CSS-tyylien määrittämässä koossa, joka on 512 x 1024 pikseliä. Tämä verrattain korkea tarkkuus yhdessä lineaarisen interpoloinnin ja anisotrooppisen suodatuksen kanssa takaa tekstin hyvän luettavuuden mahdollisimman laajalla katselukulma ja esitysresoluutioskaalalla. Tekstuurin resoluution ollessa vakio, on myös tietolaatikon kokosuhde lukittu 1:2, jonka taustalla on WebGL:n vaatimus että kaikkien tekstuurien molemmat mitat tulee olla kahden potensseja. 5.2.5 AnimatedDataLink AnimatedDataLink on kaikkien järjestelmän tietoyhteyksien visualisointiin tarkoitettu luokka, jonka pääasiallisena tehtävänä on luoda riittävästi varioitavissa oleva esitys kuvaamaan erilaisia yhteystyyppejä. Luokan toiminnot liittyvät lähinnä yhteyksien ani- 23 mointiin, mutta se periytyy FocusableItem-luokasta, eli näillä olioilla on ainakin teoriassa myös kaikki tuon luokan ominaisuudet. Käytännössä kuitenkin yhteyksien korostusja valintatoimintoja ei käytetä nykyisessä toteutuksessa hyväksi. Tietoyhteydet esitetään kahden pisteen välillä kulkevilla kolmiulotteisilla objekteilla, toteutuksessa päädyttiin käyttämään vihreitä nuolimaisia tasokuvioita. Näiden objetien liikkeen ja muiden yhteyteen liittyvien asetusten määrittämiseen on yhteensä 20 parametria. Luokan toteutus on tehty siten, että mikäli jotakin parametria ei erikseen määritellä, käytetään sille erikseen määriteltyä vakioarvoa. Tämä helpottaa yhteyksien luomista merkittävästi, kun vakioarvot on määritetty mahdollisimman yleiskäyttöisiksi. Asetusparametrien avulla on mahdollista asettaa muun muassa objektien liikenopeus, suunta, linkin kaksisuuntaisuus, viiveet eri vaiheissa, objektien kierrätys jne. Näiden lisäksi luokka mahdollistaa erikseen yhteyksien ketjuttamisen siten, että objektit näyttävät liikkuvan yhtenäistä pidempää yhteyttä pitkin, sekä objektien automaattisen, purskeisen, luonnin halutulla nopeudella. 24 6 TOTEUTUS Tämä luku kuvaa lopullisen toteutuksen niitä erityisiä ratkaisuja, joita ei ole vielä käsiteltyä aiemmin, sekä käyttöliittymää. Vaatimusmäärittely ja suunnittelu on tässä projektissa tarkoituksella jätetty hieman epätarkoiksi kuvauksiksi ohjelmistosta, jotta esimerkiksi ulkoasussa voidaan kokeilla erilaisia vaihtoehtoja toteutuksen aikana ilman tarvetta muuttaa jo tehtyjä määrittelyjä ja dokumentaatiota. Näiden yksityiskohtien lopputuloksia esitellään siis perusteluineen tässä luvussa. Käyttöliittymää käsitellään erikseen, koska se on hyvin keskeisessä osassa ohjelmiston vaatimusten ja siten projektin onnistumisen kannalta. 6.1 Keskeiset ratkaisut Tämä alaluku kuvaa toteutuksen aikana lopullisen muotonsa saavuttaneita ratkaisuja ja toteutuksen lopullista tilaa. Näitä ratkaisuja on käsitelty visuaalisen ilmeen, 3D-mallien, tietosivujen ja yleisen tietosisällön osalta. 6.1.1 Visuaalinen ilme Sivuston ulkoasu on toteutettu käytännössä kokonaan CSS-tyylimäärittelyillä ja visuaalisen ilmeen pohjana on TTY:n graafinen ohjeisto. Tyylin inspiraationa on käytetty TTY:n julkisia websivuja www.tut.fi yhtenäisen ilmeen luomiseksi. Yhtenäisestä ulkoasusta on etua, sillä käyttäjä tunnistaa TTY:n värimaailman ja elementtien asettelut, ja se myös mahdollistaa sivuston mahdollisen sulauttamisen Systeemitekniikan laitoksen sivuille, jotka käyttävät samaa teemaa. Sivun tyyli muodostuu valkoisen ja sinisen taustavärin sekä mustan tai sinisen tekstin käytöstä, tehosteväreinä on vihreää ja oranssia. Kaikki nämä värit ovat TTY:n graafisesta ohjeistoista ja muodostavat harmonisen kokonaisuuden. Tehostevärejä vihreää ja oranssia käytetään harkiten käyttöliittymän korostuksissa, eikä niitä käytännössä näykkään ennen kuin käyttäjä vie kursorin linkin tai valittavan objektin päälle. Lisäksi sivuston fontit on määritetty graafisen ohjeiston mukaisiksi, mutta ne saattavat korvautua samankaltaisilla käyttäjän laitteella saatavilla olevilla fonteilla mikäli varsinaista fonttia ei löydy. 3D-näkymän tyyli ja värimaailma ovat tarkoituksella selvästi erilaiset verrattuna 2ulotteisen sisältöön. Siinä missä muu sivusto käyttää vaaleita ja kirkkaita värejä, 3Dnäkymän taustat ovat hyvin tummia. Tällä pyritään kiinnittämään käyttäjän huomiota sivuston keskeisimpään elementtiin ja toisaalta 3D-näkymässä varsinaiset kohteet (laitteet) ovat kaikki melko vaaleita jolloin ne erottuvat hyvin tummasta taustasta. 25 Transitioita ja animaatioita käytetään helpottamaan käyttäjää havaitsemaan muutosta, sillä ihmisen on huomattavasti helpompi havaita ja kiinnittää huomio liikkeeseen kuin yhtäkkiseen ulkoasun muutokseen. CSS3:lla on helppo määrittää muutosanimaatiot eli transitiot elementtien tyylien vaihtumiseen. Näitä transitioita käytetään 2D käyttöliittymässä helpottamaan käyttäjää havaitsemaan, että 2D ja 3D käyttöliittymät ovat rinnakkaisia vaihtoehtoja korostamalla 2D-käyttöliittymän linkki kun käyttäjä osoittaa 3D näkymän objektia sekä toisinpäin. 3D-näkymässä transitioita käytetään tietolaatikoiden esiintuomiseen ja piilottamiseen, sekä tietysti kameran liikkeille. Kaikki 3D-näkymän transitiot on toteutettu käyttäen Tween.js-kirjastoa, joka mahdollistaa hyvin vähällä vaivalla useiden eri matemaattisten käyrämuotojen käytön, lineaarisesta vaimennettuun tai hyppivään. Varsinaista animaatiota on tietolinkeissä jotka esittävät tiedon kulkutapaa ja tiheyttä erilaisilla linjaa pitkin kulkevilla objektipulsseilla. 6.1.2 3D-mallit Kaikki 3D-näkymän mallit ovat tätä sovellusta varten itse tuotettuja, ja muodostivat merkittävän osan työstä yhdessä muiden visuaalisten elementtien kanssa. Mallit on toteutettu erillisinä Autodesk 3ds Max 2012-ohjelmalla, koottu asetelmaksi ja viety OpenCollada liitännäistä käyttäen yhteen collada-tiedostoon. Jokaisesta järjestelmän fyysisestä osasta on ulkonäölliseen realismiin pyrkivä polygonipohjainen malli, pääosin itse toteutetut tekstuurit ja 3ds Maxissa määritetyt varjostin (materiaali) parametrit. Jokaiselle valittavissa olevalle objektille on myös erilliset korostus- ja yksinkertaistetut valintageometriat, sekä objektit jotka määräävät kohdistetun kameran kohdepisteen, jotka ovat myös samassa tiedostossa varsinaisten visuaalisten mallien kanssa. Nämä geometriat tunnistetaan mallin latausvaiheessa erityisten nimien perusteella. Valintageometrioiden nimet ovat muotoa ”pick_x”, korostusgeometrioiden ”highlight_x” ja keskipisteiden ”dummy_x_center” jossa x on niitä vastaavan kohdistettavan tai korostettavan objektin uniikki avainsana, eli esimerkiksi ”embeddedpc” joka viittaa sulautettuun tietokoneeseen. 3ds Maxista tuotu malli ei kuitenkaan sisällä lainkaan animaatiota vaan on täysin staattinen, eli kaikki 3D-näkymän animaatiot ja transitiot on toteutettu JavaScriptillä. Lisäksi tietyt visuaaliset tehosteet luodaan vasta selaimessa, koska ne ovat yksinkertaisempia toteuttaa JavaScriptillä kuin mallintamalla. Esimerkiksi mallissa olevan pohjatason ruudukko on toteutettu käyttämällä Three.js:n mukana tulevaa erityistä viivojen piirtämiseen tarkoitettua varjostinta. 6.1.3 Tietosivut Suurin osa sivuston tarjoamasta tietosisällöstä on määrä toteuttaa erillisinä tietosivuina. Tämän kandidaatintyön puitteissa tietosivuista on kuitenkin toteutettu vain tyngät, johtuen osittain kattavan tiedon heikosta saatavuudesta, ja osittain sisällön tuottamisen vaatimasta suuresta työmäärästä. 26 Jokaisella järjestelmän osalla on oma tietosivunsa, ja ne on toteutettu samaa pohjaa hyväksikäyttäen HTML-sivuina. Kaikilla tietosivuilla on yhteinen esitystavan määrittävä CSS tyylitiedosto, mikä mahdollistaa niiden ulkoasun helpon muokkaamisen. Tietosivut koostuvat osan nimen mukaisesta pääotsikosta, kuvaosiosta sivun yläosassa, varsinaisesta sisältöosiosta, sekä linkkiosiosta sivun alalaidassa. Kuva 6 esittää sivuston etusivunakin toimivaa yleiskuvaus-tietosivua. Kuva 6: Yleiskuvaus-tietosivu sellaisena kun se näyttäytyy osana sivustoa Tietosivujen yhteinen pohjatyyli on melko yksinkertainen, mutta HTML ja CSS määrittelyjen avulla niille on mahdollista sisällyttää hyvin monipuolista sisältöä. Varsinaisen sisällön (HTML) ja esitystavan (CSS) erottamisella on myös mahdollistettu samojen tietosivujen käyttö eri ympäristöissä, sillä esitystapa on täysin muokattavissa ottamalla käyttöön eri CSS määrittely. Esimerkiksi samoista sivuista on mahdollista saada mobiililaitteille tai koko ruudun käyttöön paremmin soveltuvat versiot eri tyylimäärittelyillä. 6.1.4 Tietosisältö Sivuston tietosisältö, sellaisena kuin se on tämän kandidaatintyön puitteissa toteutettu, kattaa yleiskuvauksen järjestelmästä ja esittelee lyhyesti kaikki sen komponentit. 3Dnäkymä tarjoaa visuaalisesti kiinnostavan, mutta silti selkeän kuvan järjestelmän kolmesta pääryhmästä ja niiden välisistä tietoyhteyksistä. 3D-maailmaan upotetut tietolaatikot on pyritty laatimaan naseviksi tietoiskuiksi kustakin laitteesta, mahdollistaen 27 yleiskuvan muodostamisen järjestelmän toiminnoista pelkästään tätä mallia tarkastelemalla. Sivusto ei nykyisessä muodossaan kuitenkaan juuri tarjoa ohjelmistoteknisesti relevanttia tietoa muuten kuin linkkien muodossa. Järjestelmässä olevien ohjelmistojen, sekä niiden muodostamien palveluiden ja rajapintojen, kuvaaminen jää tietosivujen sisällön vastuulle. Tätä ratkaisua puoltaa ohjelmistojen abstraktien konseptien vaikea esittäminen kolmiulotteisina, ja tämän kaltaisen tiedon vakiintuneiden esitystapojen kaksiulotteisuus. Sisällön tuottaminen kolmiulotteisena on myös kertaluokkaa työläämpää, eikä sillä saavuteta merkittäviä etuja, pikemminkin käyttäjät yleensä kokevat tällaiset ratkaisut väkisin tehdyiksi ja hankaliksi käyttää. 6.2 Käyttöliittymä Toteutettu käyttöliittymä koostuu määrittelyn mukaisesti kahdesta erilaisesta, mutta yhteenliitetystä osasta: kaksi- ja kolmiulotteisesta käyttöliittymästä. Kaksiulotteinen käyttöliittymä on perinteisempi HTML-sivusto, jonka ulkoasu ja tehosteet on määritelty lähes kokonaan CSS:n avulla. Kolmiulotteinen käyttöliittymä taas on sääasemajärjestelmän 3D-malliin lisättyä toiminnallisuutta ja dynaamisuutta, joka on toteutettu käytännössä kokonaan JavaScriptillä. Nämä käyttöliittymät on yhdistetty JavaScriptin avulla siten, että käyttäjän toiminnot näkyvät molemmissa, ja ne toimivat rinnakkaisina ja siten vaihtoehtoisina tapoina navigoida järjestelmän eri osien välillä. Esimerkiksi hiiren kursorin vieminen 3D näkymässä jonkin järjestelmän osan päälle, toteutetaan korostus sekä 3D näkymässä, että kaksiulotteisen käyttöliittymän navigointilinkeissä. Sama korostus toimii myös toisin päin. Tällä rinnakkaisuudella on haluttu helpottaa sivuston käytön oppimista, sillä kolmiulotteisen käyttöliittymän nopea omaksuminen voi olla vaikeampaa kuin yleisesti web-sivuilla käytettyihin navigointitekniikoihin perustuvan kaksiulotteisen vaihtoehdon. Sivustolle linkittämistä on yksinkertaistettu mahdollistamalla suoraan tietylle tietosivulle siirtyminen sivustolle saavuttaessa. AJAX-pohjaisissa sivustoissa suoraan tiettyyn sisältöön linkkaaminen tuo omat haasteensa, sillä sisällölle ei ole omaa yksikäsitteistä URL-osoitetta, mikäli sitä ei erikseen toteuteta palvelinpuolella. Tässä sivustossa käytetty ratkaisu perustuu URL:in niin sanotusti ”risuaita-merkillä” (#) erotettuun osaan, joka voidaan lukea JavaScriptillä sivun latautumisen jälkeen. Jokaiselle tietosivulle on oma yksilöllinen tunnisteensa, jota voidaan käyttää URL:issa esimerkiksi seuraavasti: http://www.students.tut.fi/~syvajar3/kandi/index.html#windsensor. Tämä esimerkkiosoite esittää käyttäjälle suoraan tuulianturin tietosivun ja kohdistaa myös 3Dnäkymän vastaavasti. 28 Kuva 7: Sivuston etusivu pienellä resoluutiolla Kuva 7 esittää sivuston etusivuna toimivaa yleiskuvaus-näkymää sellaisena kuin se esittäytyy melko pienellä resoluutiolla, kuten esimerkiksi kannettavan tietokoneen näytöllä. Kuvasuhde on tässä kuitenkin epätavallisen korkea, sillä siinä haluttiin näkyvän enemmän myös tietosivua kuin tyypilliselle näytölle mahtuu. 3D-näkymän minimileveys on 960 pikseliä, jolloin se asettuu oikeasta laidasta samaan linjaan tietosivun kanssa. 29 Kuva 8: Käyttöliittymä korkealla resoluutiolla, huomaa 3D-näkymän venyminen suhteessa muihin elementteihin Kuva 8 havainnollistaa sivuston elementtien asettumista suurella resoluutiolla. 3Dnäkymä venyy leveyssuunnassa täyttääkseen paremmin käytettävissä olevan tilan. Näkymän korkeus määräytyy kuitenkin aina siten, että tietosivun ylälaita ei katoa näytöltä. Tällä saadaan käyttäjä havaitsemaan tietosivun olemassaolo ja vaihdos aina valitun kohteen vaihtuessa. Näistä kuvista ei tule kuitenkaan esille tietosivujen selaamista helpottava vasemman laidan kaksiulotteisen menupalkin ominaisuus: sivua vieritettäessä se seuraa näkymän ylälaidan mukana. Tämän ominaisuuden ansiosta tietosivuja lukevan käyttäjän ei tarvitse siirtää näkymää takaisin ylös vaihtaakseen kohdetta, sillä valikko on aina näkyvillä. 6.3 Yhteensopivuus Sivusto on suunniteltu käytettäväksi niin sanotuilla työpöytäselaimilla, ja ensisijaisesti työpöytätietokoneille tyypillisillä resoluutiolla ja laajoilla resursseilla. Nämä suunnittelun lähtökohdat näkyvät valituissa tekniikoissa ja etenkin 3D-näkymän toteutuksessa, sillä sen esittäminen suunnitellulla tavalla käytännössä vaatii että käyttäjän tietokoneessa on moderni erillinen näytönohjain. Kannettavilla tietokoneilla sivusto ja 3D-näkymä ovat edelleen tarkasteltavissa, mutta tietyt tehosteet voivat näkyä huonommin tai jäädä kokonaan pois, minkä lisäksi näkymän päivitysnopeus saattaa pudota niin alhaiseksi, että käyttökokemus kärsii merkittävästi sulaviksi tarkoitettujen animaatioiden muuttuessa diaesityksiksi. Mobiililaitteilla sivustoa on mahdollista käyttää, mikäli käytetty selain tukee HTML5:ttä ja JavaScriptiä. 3D näkymä vaatii lisäksi WebGL-tuen, mikä on vielä harvinainen mobiiliselaimissa. Esimerkkinä kuitenkin Mozilla Firefox Androidilla tukee näitä tekniikoita ja sivusto on katseltavissa kokonaisuudessaan, sekä selattavissa mikäli 30 laitteessa riittää resursseja. 3D-näkymä käyttää verrattain suuria tekstuureja, mitkä vaativat mobiililaitteiden mittakaavassa paljon muistia grafiikkaohjaimelta. Työpöytäselaimista sivusto on todettu kokonaisuutena täysin toimivaksi Mozilla Firefoxin versiolla 22.0 ja Google Chromen versiolla 28.0.1500.72 m. Testeissä käyttöjärjestelmänä toimi 64 bittinen Windows 7. Koko sivuston kehitystyön ajan nämä kaksi selainta toimivat testausalustoina ja yhtenäinen toiminta molemmilla oli myös yksi tavoitteista. On myös hyvin todennäköistä, että sivusto toimii oikein näiden selaimien eri käyttöjärjestelmäversioilla, sekä myös muilla WebKitiin perustuvilla selaimilla kuten Opera 15:sta tai Apple Safarilla, mutta näitä ei erikseen testattu. 31 7 YHTEENVETO JA TULOKSET Tämän luku kokoaa saavutetut tulokset ja peilata niitä asetettuihin tavoitteisiin. Tämän työn ollessa ohjelmistokehitysprojekti, voidaan myös arvioida valittujen tekniikoiden soveltuvuutta ja esittää jatkokehitysajatuksia. Kokonaisuutena työn onnistuminen koostuu sekä itse ohjelmiston, että tämän kirjallisen osan tavoitteiden saavuttamisesta, ja kokonaisuutena asetetussa aikataulussa pysymisestä. 7.1 Vaatimusten ja tavoitteiden saavuttaminen Suurin osa tämän opinnäytetyön toteutukseen liittyvistä tavoitteista on itse asetettuja, sillä kandidaatintyön yleiset vaatimukset ja työn teettäjän, eli Systeemitekniikan laitoksen, toiveet ovat melko suurpiirteisiä. Työlle saatu tehtävänanto olisi mahdollista tiivistää muutamaan lauseeseen, eli käytännössä kaikki yksityiskohtaisemmat tavoitteet ja rajoitteet tuli määrittää itse. Keskeisin toteutuksen päätavoite oli kehittää Systeemitekniikan laitoksen olemassa olevasta sääasemajärjestelmästä web-selaimessa ilman erillisiä liitännäisiä toimiva 3ulotteinen virtuaalimalli. Mallin toteutuksessa tulee panostaa visuaaliseen näyttävyyteen ja kykyyn luoda käyttäjälle yleiskuva järjestelmästä. Voidaan todeta, että nämä tavoitteet on saavutettu hyvin. Toteutettu sivusto käyttää vielä nuoria, mutta jo melko laajasti tuettuja standardoituja web-tekniikoita kuten WebGL:ää ja se on suoraan käytettävissä monille eri alustoille saatavilla olevilla selaimilla, kuten Google Chromella ja Mozilla Firefoxilla. 3D-mallin ja käyttöliittymän ulkoasu on mielenkiintoa herättävä ja värimaailmaltaan sopusointuinen, yksinkertaiset animaatiot tuovat siihen eloa. Toteutukselle itse asetetuista (ja työn ohjaajan tukemista) tavoitteista nousevat esiin kattava tietosisältö, helppokäyttöisyys ja muokattavuus. Tietosisältö jäi valitettavasti vielä melko minimaaliselle tasolle, ja se kykenee lähinnä luomaan yleiskuvan järjestelmästä sellaiselle, joka ei ole siihen ennen tutustunut. Järjestelmän ohjelmistoista kiinnostuneelle käyttäjälle ei sivustosta valitettavasti ole juuri hyötyä. Sisällön muokattavuuteen liittyvät tavoitteet on kuitenkin saavutettu: järjestelmän tietosivut ja 3D-mallin tietolaatikot on toteutettu helposti muokattavassa HTML-formaatissa. Järjestelmän osien lisääminen tai poistaminen vaatii silti kuitenkin JavaScript-toteutukseen syventymistä ja staattisen 3D-mallin muokkaamista, mikä vaatii erityisosaamista ja -työkaluja. Kandidaatintyön kirjallisen osan yleiset vaatimukset on määritelty TTY:n opinnäytetyöohjeessa. Ne määrittelevät varsin tarkasti työn sisällön ja ulkoasun, jolloin työn kirjoittaminen on osaltaan helpompaa, ja ennen kaikkea ne takaavat töille yhtenäisen muodon, ja että tekijä samalla tutustuu tieteellisen kirjoittaminen yleisiin sääntöihin. Tämän työn tutkimusaiheena voidaan pitää sääasemajärjestelmään tutustumista, sen dokumen- 32 tointia, sekä 3-ulotteisen grafiikan mahdollistavien modernien web-tekniikoiden nykytilan ja sovellettavuuden tutkimista. Tämän työn kirjallisessa osassa painoarvo on kuitenkin haluttu pitää toteutuksen dokumentoinnissa, alkaen perustelluista tekniikoiden valinnoista ja päätyen valmiiseen tuotteeseen, ja siinä hyödynnettyihin ratkaisuihin. Lisäksi työ tarjoaa yleiskuvan käytetyistä tekniikoista ja niiden käytännön soveltamisesta avattuna siten, että webtekniikoita tuntematonkin voi hyötyä sen lukemisesta. Syynä toteutukseen painottumisessa on, että ohjelmistojen dokumentointi on niiden ylläpidettävyyden kannalta ensiarvoisen tärkeää, ja tämä opinnäytetyön kirjallinen osa tulee olemaan toteutuksen ainoa kuvaus. Alkuperäinen työn toteutuksen ja kirjallisen osan yhteinen valmistumisaikataulu oli asetettu 2013 toukokuun loppuun. Työn tekeminen aloitettiin varsinaisesti helmikuussa, ja se eteni aikataulun mukaisesti, kunnes huhti- ja toukokuussa muista opinnoista aiheutui niin paljon kiireitä, että kandidaatintyön tekeminen pysähtyi kokonaan useaksi viikoksi. Kandiseminaariesityksen pitämisen aikaan toukokuun loppupuolella työn toteutus oli vielä melko pahasti kesken, ja kirjallisesta osasta puuttui myös useampi luku lähes kokonaan. Toukokuun lopulla seminaariesityksen pitämisen jälkeen, ja etenkin kokopäiväisten kesätöiden alettua 3.6, motivaatio työn tekemiseen oli alhainen ja eteneminen hidasta. Toteutuspuoli valmistui kuitenkin vähitellen kesä- ja heinäkuun aikana ja heinäkuun loppupuolella alkoi myös kirjallisen osan puuttuvien osien kirjoitus. Heinäkuun lopussa, kaksi kuukautta alkuperäistä aikataulua jäljessä, molemmat osat olivat viimein valmiit lähetettäväksi työn ohjaajalle kommentoitaviksi ennen lopullista palautusta arvostelua varten. 7.2 Valittujen tekniikoiden soveltuvuus WebGL:n tuki web-selaimissa on nykyään jo hyvällä tasolla, kaikille yleisimmille alustoille on saatavilla yksi tai useampia sitä tukevia selaimia. Tämä tosin johtuu suurelta osin yksittäisten selainten monien alustojen tuesta. WebGL-standardi on myös jo riittävän kypsä, jotta ainakin perustekniikoita hyödyntävät toteutukset toimivat eri selaimissa samalla tavalla, mikä helpottaa siihen perustuvien sovellusten kehittämistä. Pelkän WebGL:n käyttö suoraan vähänkään monimutkaisemmissa projekteissa ei kuitenkaan vaikuta erityisen järkevältä, sillä se tarjoaa kuitenkin vain melko matalan tason toimintoja. Tästä johtuen sen päälle onkin kehitetty useita JavaScript-kirjastoja, joista tässä työssä käytettiin Three.js:ää. Kokemukset Three.js:n käyttöönotosta ja soveltamisesta ovat hyvät, kirjasto osoittautui helposti omaksuttavaksi ja vakaaksi. Kirjaston nopea kehitystahti voi aiheuttaa kuitenkin ongelmia, sillä versiosta toiseen vaihtaminen aiheuttaa omat ongelmansa, ja internetistä löytyvät esimerkit on toteutettu satunnaisille kirjaston versioille, eivätkä siten välttämättä toimi itse käyttämäsi version kanssa. Jo pelkästään tämän työn toteutusta tehtäessä, noin puolen vuoden aikana, Three.js:stä julkaistiin yhteensä viisi uutta versiota. 33 Muut toteutuksessa käytetyt JavaScript-kirjastot, kuten JQuery, ovat pidempään kehitettyjä tuotteita ja siten niiden voidaan olettaa olevan vakaita ja kehityksessään vähemmän radikaaleja, eli vaikka kehitys saattaa olla edelleen aktiivista, suuren muutokset ydinominaisuuksiin ovat epätodennäköisiä. Näiden kirjastojen käyttö olikin helppoa kattavan dokumentaation ansiosta. Pienien yhden asian apukirjastojen tarkka toiminta on myös mahdollista sisäistää pelkästään niiden lähdekoodia tutkimalla. Suurin osa toteutuksen kehitystyöstä oli JavaScript-ohjelmointia, sillä käytännössä kaikki sivuston toiminnot on toteutettu sen avulla. JavaScript oli minulle projektia aloittaessa täysin uusi ohjelmointikieli, ja sen melko radikaalisti minulle tutuista ohjelmointikielistä kuten C#:sta tai Javasta eroavien konseptien opiskelu vei jonkin verran aikaa, mutta ei ollut varsinaisesti vaikeaa. Opiskelussa auttoi internetistä löytyvä valtava määrä erilaisia esimerkkejä, dokumentaatiota ja itseopiskelumateriaalia. JavaScriptin käytössä suurimmat haasteet johtuvat suoraan sen ominaisuuksista hyvin dynaamisena skriptikielenä. Käytännön ohjelmointityötä useiden laajojen kirjastojen kanssa hankaloittaa merkittävästi JavaScriptin muuttujien dynaaminen tyypitys, sillä parhaatkaan editorit eivät kykene kertomaan oliomuuttujan kautta saatavilla olevia jäsenfunktioita tai kyseisen olion ominaisuuksia (properties), sillä ne määrittyvät vasta ohjelmaa suoritettaessa. Sama ongelma on myös funktiokutsuissa, kaikki funktioiden parametrit ovat kielen puolesta aina vapaaehtoisia ja niiden tyypit sekä arvot voivat olla mitä tahansa. Ohjelmoijan tulee siis aina erikseen selvittää funktion dokumentaatiosta tai lähdekoodista millaisia olioita se todellisuudessa tarvitsee parametreinaan. JavaScriptin ohjelmoinnin hankaluuksien lisäksi sillä toteutettuja ohjelmia on tavallista vaikeampi testata ja korjata (debug). Tämäkin johtuu suoraan kielen ominaisuuksista, dynaamisten olioiden rakenne voi odottamattomasti muuttua esimerkiksi nimiavaruustörmäyksen tai vain olion väärän käyttötavan vuoksi. Moderneista web-selaimista ainakin Google Chromen työpöytäalustaversiossa on hyvät työkalut web-sisällön rakenteen ja toiminnan tutkimiseen, ja ne sisältävät myös JavaScript debuggerin. Näistä työkaluista on kuitenkin tavallista vähemmän hyötyä verrattuna vahvasti tyypitettyihin perinteisempiin ohjelmointikieliin, ja henkilökohtainen kokemus JavaScript ohjelmien vianetsinnästä onkin, että se vie verrattain paljon aikaa ja saattaa siksi väliaikaisesti pysäyttää koko sovelluksen kehitysprosessin, mikäli virheen vaikutukset ovat laajat. 7.3 Jatkokehitysajatuksia Tietosisällön laajentaminen. Sivusto tarjoaa nykyisessä muodossaan hyvän pohjan kattavan tietopaketin luomiselle sääasemajärjestelmästä. Kandidaatintyön puitteissa on sisällöstä toteutettu kuitenkin vain lyhyt yleistason esitys. Käytännössä tietosisällön laajentaminen tarkoittaa tietosivujen laajentamista sanoin, kuvin, taulukoin, linkein ja niin edelleen riittävän kattavalle tasolle. Erityisesti järjestelmän ohjelmistot ja niiden rajapinnat ovat selvittävän sisällön tarpeessa, jotta sivustosta olisi todellista hyötyä. 3D-näkymän ulkoasun parantaminen. Nykyinen 3D-näkymä sisältää tarkat ja teksturoidut mallit fyysisistä komponenteista, mutta etenkin valaistus ja käytetyt tehos- 34 teet kaipasivat vielä jatkokehitystä. Ottamalla käyttöön esimerkiksi, Three.js-kirjaston suoraan tukemat, heittovarjot voisi näkymän yleisilmeestä saada heti mielenkiintoisemman. Lisäksi Three.js:n kanssa on mahdollista käyttää kehittyneempiä tehosteita kuten pikselivarjostimia. Etenkin värikorjaus-, heijastus- ja SSAO (Screen Space Ambient Occlusion)-varjostimet ovat tutkimisen arvoisia. Näiden käyttöönottoa tutkittiin toteutusvaiheessa, mutta päädyttiin versioristiriitoihin käytettyjen kirjastojen kanssa. Vaihtamalla Three.js:n uudempaan versioon, ja korjaamalla vaihdoksesta aiheutuvat ongelmat, on näiden tehosteiden käyttö kuitenkin mahdollista kohtuullisella vaivalla. Tietoyhteyksien parempi kuvaaminen 3D-mallissa. Järjestelmän tietoyhteydet ovat luonteeltaan hyvin erilaisia, mikä olisi hyvä saada kuvattua paremmin myös visuaalisesti. Toteutettu AnimatedDataLink-luokka mahdollistaa monipuoliset objektien liikkeeseen perustuvat animaatiot, mutta myös muita tapoja kuvata tietoyhteyksiä voitaisiin soveltaa. Tiedon kulkutiheydelle, välitettävän tiedon tyypille sekä yhteyden nopeudelle ja kapasiteetille tulisi kehittää paremmin kuvaavat visuaaliset keinot. Sääaseman mittaustietojen reaaliaikainen haku ja esitys. Järjestelmä on toistaiseksi tietosisällöltään staattinen, mutta käyttäjien mielenkiintoa voisi lisätä sen toiminta käyttöliittymänä mittaustietoihin. Kunkin anturin viimeisimmät mittaustiedot voidaan hakea JavaScriptillä AJAX:ia ja järjestelmän tarjoamaa WebServiceä käyttäen, sekä esittää 3D-mallissa antureiden vieressä esimerkiksi tietolaatikon muodossa. Tietojen lataaminen kerran samalla sivuston kanssa olisi myös hyväksyttävää, sillä sääasemajärjestelmän tiedot päivittyvät vain viiden minuutin välein. Sivuston latauskoon optimoiminen. Optimoimattomana sivuston etusivun lataaminen vaatii noin 7 megatavun siirtämistä verkkoyhteyden yli. Tästä suurin osa muodostuu 3D-näkymän staattisen mallin Collada-tiedoston lataamisesta, mikä on käytännössä pakkaamatonta XML:ää. Konfiguroimalla sivustoa tarjoava palvelin lähettämään tiedosto pakattuna ja selaimen purkaessa sen automaattisesti voidaan verkkoyhteyden yli siirrettävää tietomäärää supistaa merkittävästi. Parempi tuki kosketusnäytöllisille laitteille. HTML5 mahdollistaa kosketustapahtumien erottelun hiiritapahtumista (events). Nykyisessä muodossaan sivustoa on mahdollista käyttää kosketusnäytön avulla, mutta etenkin 3D-näkymän käyttöä helpottaisi erillisten käsittelyrutiinien luominen kosketustapahtumille. Käytännössä tämä vaatii joitakin melko yksinkertaisia lisäyksiä ja muutoksia 3D-näkymän kameraohjainluokkaan. Sivuston vaihtoehtoinen koko-näytön asettelu. Erillisen paremmin koko näytön pinta-alaa käyttävän asettelun luominen tukisi sivuston käyttöä esittelykäytössä. Asettelu voisi asettaa 3D-näkymän koko näytön korkuiseksi ja tuoda aktiivisen tietosivun yhtä korkeana, mutta kapeampana, näytön oikeaan laitaan. Tällöin sivustoa käytettäisiin 3Dnäkymän käyttöliittymän avulla ja 2D-linkkipalkki voitaisiin jättää kokonaan pois. Sivuston 2D-elementtien ulkoasun (ja samalla asettelu) ollessa erotettu sisällöstä ja määritettynä CSS:llä, tarvitsee tämän kokoruudun asettelun toteuttamiseen vain luoda uusi CSS-tyylimäärittelytiedosto. 35 LÄHTEET [1] TTY - Systeemitekniikan laitos. ASE - Kandityöt - Automaation tietotekniikka. [WWW]. [viitattu 15.7.2013]. Saatavissa: https://wiki.ase.tut.fi/courseWiki/index.php/ASE_-_Kandityöt__Automaation_tietotekniikka. [2] Vaisala. ROSA Surface analyzer for roads and runways User's Guide. 1998. [3] Salonen M. Vaisala Rosa -sääaseman etäkäyttö Telit GE863-GPS moduulin avulla. Tampere:; 2009. [4] Oetiker T. RRDtool - About RRDtool. [WWW]. [viitattu 9.3.2013]. Saatavissa: http://oss.oetiker.ch/rrdtool/. [5] Vaisala Oyj. HMP45A&HMP45D Humidity and temperature probes Operating manual.; 1997. [6] Vaisala Oyj. WM30 User's guide.; 2002. [7] Vaisala Oyj. DRI521 and DRI511 Intelligent Road/Runway Sensor Interfaces. Helsinki. [8] Ubiquiti networks. PicoStation M2-HP Datasheet. San Jose. [9] W3C World Wide web Consortium. HTML5 Introduction. [WWW]. [viitattu 13.4.2013]. Saatavissa: http://www.w3schools.com/html/html5_intro.asp. [10] W3C World Wide web Consortium. HTML5 differences from HTML4. [WWW].; 2012 [viitattu 13.4.2013]. Saatavissa: http://www.w3.org/TR/html5diff/. [11] Richard Clark OSCMDM. Beginning HTML5 and CSS 3: Apress; 2012. [12] Mike Murach ZR. murach's JavaScript and JQuery Fresno: Mike Murach & Associates, Inc.; 2012. [13] Mozilla Developer Network. JavaScript Guide - JavaScript | MDN. [WWW]. [viitattu 13.5.2013]. Saatavissa: https://developer.mozilla.org/enUS/docs/JavaScript/Guide.
© Copyright 2024