HTML-visualisointi

Erno Haapasalo ja Juhana Simula 2018

Rakensimme FOR254-kurssin sisällön ja lopputuotteet HTML-verkkopohjaiseksi (HTML eli HyperText Markup Language) sivustoksi, jossa kaikki kurssin materiaali on kätevästi saatavilla. Verkkosivujen HTML-koodi on myös vapaasti nähtävissä, joten kuka vain voi käydä tarkastelemassa sitä.

Verkkosivut perustuvat kuuteen pääsivuun, jotka ovat etusivu, tausta, tekijät, aineisto, menetelmät ja lopputuotteet. Sivuilta toisille pääsee yhtenäisen navigointipalkin kautta, ja sivut toimivat hyperlinkkeinä toisille sivuille.

HTML-tiedosto voidaan luoda yksinkertaisesti esimerkiksi Notepadilla tai jollain erityisellä editorilla, kuten RJ TextEd-ohjelmalla. Notepadilla tiedosto tallennetaan aina .html-päätteellä. Tällöin tiedosto voidaan avata verkkoselaimella tarkasteltavaksi. Pääsivu tallennetaan nimellä index.html.

Käytimme verkkosivujen teossa RJ TextEd -editoria (Saatavissa osoitteesta: https://www.rj-texted.se). Kuusi pääsivua on luotu itse. CSS-tyylitiedosto (style.css) ja verkkosivujen pohjan mallina on käytetty Bryant Smithin luomaa mallipohjaa. Alkuperäinen pohja on saatavilla osoitteessa: http://www.html.am/templates/downloads/bryantsmith/greenmountain/. Sivuston pääkuvan on tehnyt Juhana Simula.

Sivuston tausta, jossa on liukuvärjäys, on luotu verkkopohjaisella CSS-Matic -generaattorilla (Saatavissa osoitteesta: https://www.cssmatic.com/gradient-generator). Se luo valmiin CSS-style -koodin, jonka voi siirtää vapaasti omille verkkosivuille.

HTML-animaatioiden javascript-koodi on muokattu lähteestä http://www.helsinki.fi/~korpela/Hyytiala/Rytovuori_animaatio.html. Html-animaatioiden javascript pyörittää automaattisesti useita eri kuvia ja mahdollistaa myös kuvien välillä liikkumisen. Animaatioiden kuvat ovat skaalattuja visualisointia varten, mutta löytyvät alkuperäisessä koossaan Onedrive-kansiosta.

SVG

SVG on lyhenne sanoista Scalable Vector Graphics. SVG on vektorigrafiikkaan tarkoitettu tallennusmuoto. Teknisesti SVG-kuvatiedostot on tehty XML-merkintäkielellä. Kuvissa on mahdollista esittää myös liikettä.

SVG tukee kolmea erilaista graafista objektia:

- Vektorikuvia (suorista viivoista ja kaarista muodostuvat reitit sekä niiden rajaamat alueet)

- Rasteri- / digitaalisia kuvia

- Tekstiä

SVG-kuvat ovat vektorigrafiikkaa, eli zoomatessa tekninen laatu ei huonone vaan kuva skaalautuu.

Projektissamme hyödynsimme SVG -animaatioita muun muassa kuviokohtaisten puustotietojen visualisoinnissa ja Hyytiälän metsäaseman lähialueiden puuston esittämisessä. SVG -formaatti mahdollisti useiden kerättyjen tietojen visualisoinnin eri karttapohjilla. Koska puustotiedot esitettiin vektorimuodossa, tuli suuri määrä aineistoa saada muutettua oikeaan formaattiin.

Sitä varten hyödynsimme Tuomas Yrttimaan tekemää R-koodia (Pistedata2SVG), joka muuttaa rasterikartan pistemuotoiseksi säilyttäen kunkin pisteen koordinaatti ja rasteriarvonsa. Rasterikartat rajattiin R-koodin avulla siten, että rajat muutettiin tekstimuotoon x- ja y-pisteiksi. Kuviorajat ja Tilarajat kuvattiin SVG -animaatiossa viivagrafiikoin.

R-koodin avulla saatiin myös muutettua rasteripisteiden koordinaattitiedot vastaamaan kuvakoordinaatistoa ts. SVG-esityksen pikseleiden sijaintia. Lopuksi kunkin rasteripisteen ominaisuusarvoa visualisoitiin tietyn värisillä ympyrägrafiikoilla. R-koodin avulla saatiin kirjoitettua jokaisen rasteripistettä vastaava vektorigrafiikka valmiiksi SVG-muotoon.

Itse SVG-pohjana käytimme http://www.helsinki.fi/%7Ekorpela/Hyytiala/Koealapisteet.svg -linkin SVG-animaatiota, jota lähdimme vapaasti muokkaamaan.