TOMI SYVÄJÄRVI SÄÄASEMAJÄRJESTELMÄN VIRTUAALIMALLI. Kandidaatintyö

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

7.3 Jatkokehitysajatuksia... 33 Lähteet... 35 IV

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 Termin selitys 3D 3 Dimensional, kolmiulotteinen C Dennis Ritchien 1970-luvun alussa UNIXkäyttöjärjestelmälle kehittämä imperatiivinen ja myöhemmin standardisoitu ohjelmointikieli. C++ 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

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 M2- HP, 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-

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 5

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 HTML5- standardin 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. 2- ulotteisen 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. HTML5- mää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-

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, Copper- Licht 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. 14

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 HTML5- syntaksin 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

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. 19

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-