46
SVEUČILIŠTE U ZAGREBU FAKULTET ELEKTROTEHNIKE I RAČUNARSTVA ZAVRŠNI RAD br. 5069 WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA PREDVIĐANJA NALAZIŠTA BILJNIH VRSTA Luka Kraljević Zagreb, svibanj 2017

WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

  • Upload
    others

  • View
    1

  • Download
    0

Embed Size (px)

Citation preview

Page 1: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

SVEUČILIŠTE U ZAGREBU FAKULTET ELEKTROTEHNIKE I RAČUNARSTVA

ZAVRŠNI RAD br. 5069

WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA PREDVIĐANJA NALAZIŠTA

BILJNIH VRSTA

Luka Kraljević

Zagreb, svibanj 2017

Page 2: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon
Page 3: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

Zahvala mentoru doc. dr. sc. Borisu Milašinoviću

na pomoći pri oblikovanju cijelog sustava te savjetima

za implementiranje što uspješnijeg završnog rada.

Page 4: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

Sadržaj

1 UVOD ............................................................................................................................... 1

2 KORIŠTENI MODEL PODATAKA ....................................................................................... 3

3 ZAHTJEVI SUSTAVA ........................................................................................................... 6

3.1 KORISNIČKI I FUNKCIONALNI ZAHTJEVI .................................................................. 6

3.2 NEFUNKCIONALNI ZAHTJEVI ................................................................................... 7

4 ARHTEKTURA SUSTAVA ................................................................................................... 9

4.1 MVC arhitektura ..................................................................................................... 9

4.2 REALIZACIJA ARHITEKTURE U SHINY FRAMEWORKU .......................................... 10

5 KORISNIČKE UPUTE ....................................................................................................... 13

6 IMPLEMENTACIJA SUSTAVA ............................................................................................... 24

6.1 IMPLEMENTACIJA KORISNIČKOG SUČELJA ........................................................... 24

6.2 IMPLEMENTACIJA POSLUŽITELJA .......................................................................... 28

7 ZAKLJUČAK ..................................................................................................................... 35

Literatura ............................................................................................................................... 37

Sažetak ................................................................................................................................... 38

Ključne riječi .......................................................................................................................... 39

Abstract .................................................................................................................................. 40

Key words .............................................................................................................................. 41

Page 5: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

Sadržaj slika

Slika 2.1 Primjer jedne shapefile datoteke s geoprostornim podacima .................................. 3

Slika 2.2 Primjer dobro formirane csv datoteke s podacima o nalazištima ............................. 5

Slika 4.1 Odnos između komponenata MVC modela ............................................................... 9

Slika 4.2 Primjer reaktivnosti u Shinyju .................................................................................. 11

Slika 4.3 Složeniji primjer korištenja reaktivnosti .................................................................. 12

Slika 5.1 Izgled korisničkog sučelja za unos pri odabiru vlastitih podataka ........................... 13

Slika 5.2 Izgled korisničkog sučelja u slučaju odabira gotovih podataka ............................... 14

Slika 5.3 Prikaz prosotra za unos geoprostornih podataka .................................................... 14

Slika 5.4 Prikaz prostora za unos podataka o nalazištima ...................................................... 15

Slika 5.5 Prikaz sučelja za unos uslijed krivog unosa .............................................................. 15

Slika 5.6 Primjer ispravnog unosa podataka .......................................................................... 16

Slika 5.7 Izgled ekrana prilikom generiranja rezultata ........................................................... 16

Slika 5.8 Izgled sučelja za prikaz karte bez odabrane biljke ................................................... 17

Slika 5.9 Prikaz karte za vrstu Ambrosia artemisiifolia L. ....................................................... 18

Slika 5.10 Prikaz karte za vrstu Carpinus betulus L. ............................................................... 18

Slika 5.11 Tablični prikaz za svojstvo nadmorske visine ......................................................... 19

Slika 5.12 Prikaz tablice s promijenjenim parametrima ......................................................... 20

Slika 5.13 Prikaz tablice za svojstvo godišnje temperature ................................................... 20

Slika 5.14 Prikaz tablice za svojstvo sezonska količina padalina ............................................ 21

Slika 5.15 Grafički prikaz odnosa nadmorske visine i vjerojatnosti rasta u početnom stanju 21

Slika 5.16 Grafički prikaz odnosa nadmorske visine i vjerojatnosti rasta kod većeg intervala

................................................................................................................................................ 22

Slika 5.17 Grafički prikaz odnosa prosječne godišnje temperature i vjerojatnosti rasta ....... 22

Slika 5.18 Grafički prikaz odnosa sezonske količine padalina i vjerojatnosti rasta u početnom

stanju ...................................................................................................................................... 23

Slika 5.19 Grafički prikaz odnosa sezonske količine padalina i vjerojatnosti rasta pri

smanjenom intervalu ............................................................................................................. 23

Slika 6.1 Početak koda korisničkog sučelja ............................................................................ 25

Slika 6.2 Kod za unos geoprostornih podataka ...................................................................... 25

Slika 6.3 Kod za prikaz karte ................................................................................................... 26

Slika 6.4 Kod za tablični prikaz podataka ............................................................................... 27

Slika 6.5 Animacija za pokazivanje/skrivanje sučelja za unos podataka ................................ 28

Slika 6.6 Stvaranje korisničkog direktorija ............................................................................. 29

Slika 6.7 Osvježavanje korisničkog sučelja novim poljem za unos ......................................... 29

Slika 6.8 Generiranje rezultata ............................................................................................... 30

Slika 6.9 Generiranje struktura podataka za prikaz karte ...................................................... 32

Slika 6.10 Kod za prikaz karte ................................................................................................. 33

Slika 6.11 Početak funkcije za obradu podataka za prikaz ..................................................... 33

Slika 6.12 Drugi dio funkcije za obradu podataka .................................................................. 34

Page 6: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

1

1 UVOD

U današnjem svijetu, kada smo okruženi brojnim informacijama i tehnologijom koja nam

omogućava da sve te informacije na neki suvisli način posložimo, mogli bismo reći da je

postalo neopodno što više informacija sistematizirati, pohranjivati u velike baze podataka

te obrađivati radi generiranja nekih drugih informacija i pravila koja slijede iz danih

zapažanja. Stoga je u šumi svih tih informacija potrebno napraviti sučelje između običnog

čovjeka koji mora interpretirati sve dane informacije i baze podataka koja se konstantno

nadopunjuje kako izravnim unosom novih informacija koje dolaze iz realnog svijeta, tako i

samokomplementiranjem, tj. generiranjem novih pravila automatskim zaključivanjem. Ako

pogledamo bolje oko sebe, možemo lako primijetiti da svaku pojavu iz realnog svijeta

možemo modelirati i statistički obrađivati kako bismo si olakšali određene procese koji bi

bez pomoći moderne tehnologije zahtijevali ogromnu količinu vremena da završe uspješno

sa zadovoljavajućim rezultatom.

Govoreći o takvim modelima iz realnog života, poseban je naglasak na modelima

predviđanja jer nam takvi modeli olakšavaju svakojake djelatnosti u gotovo svakoj grani

industrije i znanosti. Konkretno, u ovom radu bit će dokumentirana aplikacija za prikaz

rezultata predviđanja rasta biljnih vrsta unutar Republike Hrvatske koja će, omogućavati da

korisnik unese sve potrebne podatke koji su prikupljeni s terena te nakon pokretanja

algoritma predviđanja utvrdi na kojim bi se još mjestima mogla naći konkretna vrsta te

kolike su šanse rasta te vrste u različitim klimatološkim uvjetima. Za predviđanje rasta

biljnih vrsta u pojedinim područjima koristit će se algoritam razvijen u prethodnom

istraživanju u kojem je korišten model najveće entropije (MAXENT) koji je pogodan zato

što su za predviđanje potrebni samo podaci o nalazištima gdje ondređene vrste raste, a ne i

podaci gdje ne rastu te biljke (Perović, 2016.).

Najprije će biti opisan model podataka koji se koristi pri generiranju rezultata istraživanja

te prikazivanu rezultata. Zatim će biti opisani osnovni zahtjevi sustava koji će biti temelj za

oblikovanje sustava. U sljedećem poglavlju fokus će biti na opću arhitekturu sustava te na

konkretizaciju takve arhitekture u programskom jeziku R, odnosno, razvojnom okviru

Shinyju u kojem će sustav biti implementiran te na pojam reaktivnosti specifičan za ovu

Page 7: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

2

tehnologiju. Nakon toga slijede korisničke upute u kojima su detaljno objašnjeni svi koraci

pri generiranju i čitanju rezultata, kao i iznimne situacije ukoliko se ne ispoštuju sva

pravila oko ispravnog unosa podataka. U posljednjem poglavlju naveden je opis

implementacije sustava u kojem su objašnjeni neki isječci koda ključni za osnovne

funkcionalnosti sustava.

Page 8: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

3

2 KORIŠTENI MODEL PODATAKA

Podaci koji su potrebni aplikaciji kako bi uopće mogla generirati rezultate predviđanja su

geoprostorni podaci te podaci o nalazištima biljaka. Geoprostorni podaci uglavnom su

zapisani u datotekama shapefile formata (format koji mora sadržavati barem 4 datoteke

ekstenzija .dbf, .prj, .shx i , najvažnija, .shp) te sadrže sve bioklimatske podatke o

prostorima koji su u toj datoteci zapisani. Zapisi u takvoj datoteci predstavljaju poligone

koji zahvaćaju relativno mali prostor (uglavnom veličine 5 km x 5 km), a svaki zapis

predstavlja jedan poligon u kojem su opisani različiti uvjeti koji uvjerljivo prikazuju

bioklimatsko stanje unutar takvog prostora.

Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon se

bilježe prosječna godišnja temperatura, prosječan raspon najviše i najniže temperature,

izotermija, najniža temperatura najhladnijeg mjeseca, godišnja količina padalina,

nadmorska visina, nagib terena i brojne druge značajke. Budući da se u ovakvom skupu

podataka nalaze brojne značajke, koje su čak i naizgled vrlo povezane, velika je šansa da

nam neće sve značajke biti potrebne za generiranje rezultata. Nakon provjere korelacija

između svih atributa, iz modela za predviđanje izbačeni su brojni atributi i ostali su samo

prosječna godišnja temperatura (koji uz sebe ima oznaku BIO1), izotermija (BIO3),

Slika 2.1 Primjer jedne shapefile datoteke s geoprostornim podacima

Page 9: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

4

srednja temperatura najsušeg kvartala (BIO9), količina padalina najsušeg mjeseca

(BIO14), sezonska količina padalina (BIO15), količina padalina najtoplijeg kvartala

(BIO18), ekspozicija (EKSPOZICIJ) i nagib terena (NAGIB_TERE) (detaljnije o ovom

istraživanju pogledati u [1]). Slika 2.1 prikazuje primjer jedne dbf datoteke koja sadrži

opisani model podataka.

U svrhu što zanimljivijeg i jasnijeg prikaza rezultata u obzir se uzimaju tri atributa (ne

moraju nužno biti iz skupa za model za učenje), a to su nadmorska visina, prosječna

godišnja temperatura i sezonska količina padalina te su ovo atributi korišteni za tablični i

grafički prikaz rezultata. Rezultati će se prikazivati tako da se za svaki atribut formiraju

intervali jednakih raspona između minimalne i maksimalne vrijednosti koje određuju

korisnici te će se za svaki interval izračunavati srednja vjerojatnost rasta biljke na

područjima čija je vrijednost između krajnjih vrijednosti određenog intervala. Međutim,

primijetimo da je vjerojatnost rasta neke vrste biljke zapravo funkcija više varijabli,

odnosno svih atributa koji ulaze u obzir pri učenju modela za predikciju. Prema tome,

srednja vjerojatnost koju dobivamo na tom području je aproksimacija stvarne vrijednosti,

što radimo kako bismo rezultate vizualizirali u 2D prostoru kao funkciju jedne varijable, a

ne pomoću hiperploha osmog reda.

Drugi skup podataka koji se koristi pri generiranju rezultata predviđanja su podaci o

nalazištima biljnih vrsta. Ovakvi podaci će se morati unositi u csv formatu, a moraju

sadržavati atribute OznKoord, NazKlase, HTRS96_X i HTRS96_Y koji su detaljno opisani

u radu [1]. Iz tako formiranih datoteka će se pronaći stupac NazKlase i izvući svi nazivi

biljaka koje imaju barem jedno nalazište u takvoj bazi te će se moći pregledavati rezultati

za svaku biljku navedenu unutar ove datoteke. Slika 2.2 prikazuje primjer jedne csv

datoteke s ispravnim atributima i njihovim vrijednostima. Jednom kad su sve datoteke

prenesene na poslužitelj, generiranje rezultata može započeti, što će, ovisno o veličini

datoteka, trajati od nekoliko sekundi do nekoliko minuta. Nakon toga će se moći

promatrati rezultati predviđanja za svaku biljku učitanu iz csv datoteka.

Page 10: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

5

Slika 2.2 Primjer dobro formirane csv datoteke s podacima o nalazištima

Page 11: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

6

3 ZAHTJEVI SUSTAVA

Korisnički i funkcionalni zahtjevi opisuju samo ponašanje sustava koje se očekuje od

strane korisnika, a nefunkcionalni zahtjevi su svi oni koji opisuju određena ograničenja na

performanse, broj korisnika, trajanje sjednice i sl.

3.1 KORISNIČKI I FUNKCIONALNI ZAHTJEVI

a) Sustav mora omogućiti unos korisnikovih podataka o geolokacijskim obilježjima.

Ideja je da korisnik (uglavnom botaničar i stručnjak srodnih područja znanosti u čijoj je

domeni svrha ove aplikacije) može sam unositi vlastite podatke koje je prikupio u strogo

zadanom formatu. Potrebno je unijeti barem dvije datoteke u zip formatu koje mogu

sadržavati dvije vrste datoteka. Shapefile format koji se uglavnom sastoji od 4 vrste

datoteka, a to su datoteke formata: dbf, shp, prj i shx te rds datoteka koja omogućava brže

učitavanje podataka.

b) Korisnik bi trebao moći unijeti i podatke o svim nalazištima vrsta biljaka.

Pored geolokacijskih obilježja, unose se i podaci o nalazištima i to isključivo u csv

formatu. Broj unijetih datoteka može biti proizvoljan, ali, naravno, mora se unijeti barem

jedna takva datoteka.

c) Sustav će nuditi opciju čitanja i prikaza već gotovih rezultata dostupnih na poslužitelju.

U slučaju nedostatka podataka, korisnik može i pregledavati već gotove rezultate koji su

generirani na temelju zadnjeg provedenog istraživanja na poslužitelju.

d) Sustav će prikazivati kartu na kojoj će se vidjeti vjerojatnost rasta neke vrste na

određenom području.

Page 12: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

7

Nakon generiranja rezultata, karta će biti obojana paletom koja će prikazati distribuciju

vjerojatnosti rasta odabrane biljke na području određenom ulaznim podacima. Karta se

može interaktivno mijenjati odabirom neke druge vrste.

e) Sustav omogućava dohvat generiranih rezultata.

Korisnik će moći preuzeti generirane rezultate sa stranice u zip formatu koji sadrži 4

datoteke koje čine shapefile format.

f) Rezultati će se prikazivati tablično i grafički.

Tablično i grafički će se prikazati vjerojatnosti rasta biljaka u područjima određenih

svojstava pa će tako biti po jedan tablični i grafički prikaz za nadmorsku visinu terena,

godišnju prosječnu temperaturu i sezonsku količinu padalina.

3.2 NEFUNKCIONALNI ZAHTJEVI

a) Ulazni skup podataka mora biti u strogo određenom formatu.

Ulazne datoteke s geološkim podacima moraju biti u shapefile ili rds formatu, a datoteke s

podacima o nalazištima biljaka u csv formatu.

b) Generiranje zahtjeva mora biti gotovo unutar 10 minuta u slučaju čitanja iz rds datoteka,

odnosno 20 minuta u slučaju čitanja iz shapefile datoteka.

Generiranje zahtjeva uključuje cijeli proces od potvrde korisnika za početak čitanja

unesenih podataka do trenutka prikaza rezultata generiranih na poslužitelju, dakle, ovisno o

formatu datoteka, čitanje tih unesenih podataka će trajati drugačije.

c) Otvaranjem svake sjednice korisnik otvara na posužitelju direktorije samo za njega i

služe kako bi tamo pohranio podatke potrebne za obradu i generiranje rezultata.

Svaki korisnik dobiva mapu čije će ime biti određeno samim trenutkom slanja datoteke na

poslužitelj i to po jedna mapa za geolokacijske podatke i za podatke o nalazištima. Takva

Page 13: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

8

mapa će nakon završetka sjednice biti obrisana sa poslužitelja da bi se spriječila

preopterećenost.

d) Aplikacija je otvorena za sve korisnike.

Sustav neće tražiti autentikaciju i autorizaciju, stoga će korištenje aplikacije biti slobodno

za sve zainteresirane korisnike.

Page 14: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

9

4 ARHTEKTURA SUSTAVA

Sustav je implementiran kao web-aplikacija sa standardnim poslužiteljskim i klijentskim

dijelom, odnosno, koristi se obrazac MVC (Model – View - Controller). U kontekstu ove

aplikacije, svaki klijent koji pristupa aplikaciji prilaže ili preuzima određene podatke, a

poslužitelj ih potom obrađuje i daje rezultate natrag klijentu. Osnovni protokol

komunikacije između klijenta i poslužitelja je HTTP protokol kojim klijent konstantno

putem GET i POST zahtjeva traži odgovor od poslužitelja koji se najčešće manifestira u

obliku statusnog koda OK kada su svi podaci obrađeni i spremni za prikaz i daljnju obradu.

Najprije ćemo objasniti detaljnije MVC arhitekruru, a potom ćemo vidjeti kako je to

realizirano u programskom jeziku R, odnosno njegovom frameworku za web-aplikacije,

Shinyju te objasniti specifičan pojam vezan uz ovaj programski jezik – pojam reaktivnosti.

4.1 MVC arhitektura

Model – View – Controller je arhitekturni obrazac koji se koristi u oblikovanju softvera

kako bi se omogućila bolja podjela poslova unutar aplikacije te čitljivost samog koda. Ovaj

obrazac dijeli aplikaciju u 3 međusobno povezana dijela kako bi se razdvojio dio koji

Slika 4.1 Odnos između komponenata MVC modela

Page 15: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

10

interno rukuje s podacima s dijelom koji te podatke obrađuje i prezentira korisniku. To je

pogotovo korisno kada je potreban paralelan razvoj i ponovnu iskoristivost koda. Iako

danas postoje brojne inačice MVC obrasca, tradicionalno obuhvaća 3 komponente, kao što

i samo ime kaže, a to su model, pogled i upravljač. Model je centralna komponenta obrasca

i njime se opisuje domena problema aplikacije. U modelu su sadržani podaci koji se

dobavljaju naredbama iz kontrolera i, zapravo, sadrži cjelokupno stanje aplikacije u nekom

trenutku. Pogled (eng. View) je izlazna komponenta koja se izravno prikazuje korisniku te

predstavlja reprezentaciju informacije sadržane u modelu, primjerice, tablični prikaz baze

ili grafička reprezentacija neke varijable. Posljednji dio, upravljač, prihvaća akcije od

korisnika koje obrađuje i čini određene promjene nad modelom i/ili pogledom, ovisno o

akciji koju je korisnik zadao, kao što su klik na gumb ili unos nekog podatka.

U nekim okruženjima se još uvijek koristi paradigma stavljanja čitave logike modela,

pogleda i kontrolera na poslužitelj kao što su Django, Rails i ASP.NET MVC dok se noviji

pristup oslanja na izvođenje dijela komponenata i na klijentu što vidimo kod tehnologija

kao što su AngularJS, EmberJS, Backbone, Ajax i sl.

4.2 REALIZACIJA ARHITEKTURE U SHINY FRAMEWORKU

Shiny framework je okruženje koje nudi podršku za razvoj web-aplikacija u programskom

jeziku R kako bi se što bolje i interaktivnije prikazali statistički podaci. Za uspješno

prevođenje aplikacije potrebno je imati dvije datoteke koje će predstavljati osnovnu

strukturu aplikacije: server.R za logiku servera, i ui.R koji će opisivati korisničko sučelje

aplikacije.

Konkretno, server.R predstavlja upravljač jer upravlja ponašanjem čitave aplikacije te

može direktno utjecati na ono što se prikazuje kao i na model podataka i složene račune

koji se odvijaju pri statističkoj analizi unosa, a ui.R je pogled koji je u direktnoj interakciji

sa korisnikom. Model podataka u Shiny aplikaciji čuva se unutar globalnih varijabli na

poslužitelju, a ovisno o potrebama korisnika, može se definirati poseban model poadataka

Page 16: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

11

za svaku sjednicu ili jedan model za sve korisnike, što se onda sprema unutar datoteke

global.R.

Zanimljivo je spomenuti svojstvo reaktivnosti u Shiny frameworku koje doprinosi velikoj

povezanosti i trenutnoj interaktivnosti između korisničkog sučelja i poslužitelja.

Reaktivnost je, zapravo, ono što ispod haube možemo usporediti sa oblikovnim obrascem

Promatrač (eng. Observer). Naime, uobičajeno je da ulogu Subjekta u tom obrascu

preuzima reaktivna vrijednost koja je uglavnom neka od ulaznih vrijednosti definiranih u

korisničkom sučelju, a ulogu Promatrača preuzimaju sve reaktivne funkcije na poslužitelju

koje na neki način koriste te reaktivne vrijednosti. Dakle, broj pretplata na različite

subjekte direktno ovisi o broju različitih reaktivnih vrijednosti koje se koriste u funkciji.

Mehanizam funkcionira tako da kada se neka reaktivna vrijednost promijeni, ona se

proglasi invalidiranom i taj signal pošalje svim funkcijama koje koriste tu vrijednost.

Nakon što funkcija primi taj signal, cijeli dio koda koji se nalazi u funkciji se ponovno

izvodi, budući da su podaci koji se prosljeđuju na izlaz sada nevaljani. Odnos opisanih

elemenata vidi se na primjeru na slici 4.2.

Slika 4.2 Primjer odnosa elemenata koji sudjeluju u reaktivnom ponašanju u Shinyju

Page 17: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

12

Postoji inačica ovakvog obrasca u Shiny frameworku, a to je da se koriste tzv. reaktivni

izrazi koji su istovremeno i subjekti i promatrači pa se na taj način može generirati lanac

reaktivnosti kao na slici 4.3. Dakle, ako se neka početna ulazna vrijednost proglasi

nevaljanom, signal koji dojavljuje o nevaljanosti podataka propagira se najprije na

reaktivni izraz, a onda i na sve promatrače funkcije koje koriste dotični reaktivni izraz.

Ovaj se postupak pokazao vrlo korisnim u programiranju u Shinyju zato što uvelike može

reducirati ponavljanje koda i pokretanje nepotrebnih velikih izračuna nekoliko puta, s

obzirom da se jednom izračunata vrijednost može samo spremiti kao rezultat reaktivnog

izraza.

Slika 4.3 Složeniji primjer korištenja reaktivnosti

Page 18: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

13

5 KORISNIČKE UPUTE

Aplikacija za prikaz rezultata predviđanja rasta biljnih vrsta koncipirana je u dva dijela:

prvi dio služi za odabir izvora podataka koji će se prikazivati (tj. hoće li se generirati novi

rezultati ili će se čitati postojeći) te unos podataka i generiranje rezultata, a drugi za sam

prikaz rezultata.

Pri samom pokretanju aplikacije prikazuje se naslovna stranica na kojoj možemo odabrati

način rada aplikacije. Na slici 5.1 možemo vidjeti izgled sučelja pri odabiru korisnika

opcije unošenja vlastitih podataka u sustav, a na sljedećoj slici 5.2 ako se odaberu već

generirani rezultati na temelju prethodnih istraživanja.

Slika 5.1 Izgled korisničkog sučelja za unos pri odabiru vlastitih podataka

Page 19: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

14

U slučaju odabira čitanja gotovih podataka, dovoljno je samo kliknuti na gumb „Generiraj

rezultate“ i pričekati da se učitaju svi podaci. Ako se pak odabere način unosa vlastitih

podataka tada je potrebno obratiti pažnju na dva različita formata unosa podataka. U prvom

stupcu je potrebno unijeti 2 datoteke zip formata koje unutar sebe mogu uklučivati ili

shapefile datoteke sa podacima o biološko-klimatološkim uvjetima na svakom poligonu ili

rds datoteku koja sadrži iste takve podatke, samo u zapisima koji se mogu pročitati daleko

brže od shapefile formata. Kao što je vidljivo na slici 5.3, prilikom unosa jedne zip

datoteke, automatski se generira novo polje za unos nove datoteke, a isto tako je i dostupan

ogledni primjer kako bi trebala izgledati datoteka koja se prenosi na poslužitelj.

Slika 5.3 Prikaz prosotra za unos geoprostornih podataka

Slika 5.2 Izgled korisničkog sučelja u slučaju odabira gotovih podataka

Page 20: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

15

Slično, potrebno je u drugom stupcu unijeti barem jednu datoteku csv formata koja sadrži

podatke o nalazištima vrsta biljaka na pojedinim prostorima. Također se pri svakom unosu

generira novo polje za unos (slika 5.4) te se može preuzeti primjer jedne dobro oblikovane

csv datoteke.

Slika 5.4 Prikaz prostora za unos podataka o nalazištima

Ako se ne zadovolje svi potrebni uvjeti, a klikne se na gumb za generiranje rezultate,

ispisat će se poruka o grešci koju vidimo na slici 5.5 te će ta poruka nestati tek onog trena

kad se prenese minimalan potreban broj datoteka na poslužitelj.

Slika 5.5 Prikaz sučelja za unos uslijed krivog unosa

Page 21: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

16

Na sljedećoj slici, 5.6, vidimo da upozorenje nestaje kada se prenesu dvije zip datoteke i

jedna csv datoteka te onda možemo krenuti sa generiranjem rezultata. Kada se krene s

generiranjem rezultata, prosječno vrijeme trajanja je oko 5 minuta, a svo to vrijeme bit će

prikazan ekran koji vidimo na slici 5.7. Kada taj ekran nestane, znamo da je istraživanje

gotovo te možemo pregledati sve rezultate.

Slika 5.6 Primjer ispravnog unosa podataka

Slika 5.7 Izgled ekrana prilikom generiranja rezultata

Kao što smo i ranije rekli, za pregled rezultata podržana su tri načina pregleda:

kartografski, tablični i grafički. Ako kliknemo na karticu „Karta“, dobivamo početni ekran

Page 22: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

17

kao na slici 5.8. Na lijevoj strani nalaze se padajuća lista za odabir vrste biljke čiji se

rezultati žele analizirati, klizač koji određuje broj zapisa koji će se prikazati na karti, a

uveden je radi performansi zbog mogućeg prevelikog broja zapisa za prikazivanje u

razumnom vremenu. Na kraju je navedena i poveznica za preuzimanje sumarnih rezultata

istraživanja generiranih na temelju korisničkih podataka ili pak na podacima sa

poslužitelja, u slučaju odabira takvog načina rada na početku. Sa desne strane je

rezervirano mjesto za prikaz karte.

Slika 5.8 Izgled sučelja za prikaz karte bez odabrane biljke

Ukoliko odaberemo određenu biljku iz padajuće liste, konkretno u primjeru na slici, vrstu

Ambrosiu artemisiifoliu L., te povećamo broj zapisa koji će se prikazati na maksimum,

dobijemo prikaz karte kao što je priloženo na slici 5.9. Karta je obojana distribucijom

nijansi plave boje koje određuju kolika je vjerojatnost na pojedinom prostoru za rast ove

vrste. Na legendi karte možemo točno vidjeti koja se nijansa odnosi na koji interval

vjerojatnosti (vjerojatnosti idu od 0 do 1).

Page 23: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

18

Slika 5.9 Prikaz karte za vrstu Ambrosia artemisiifolia L.

U isto vrijeme možemo i promijeniti vrstu biljke čiji se rezultati prikazuju pa tako, nakon

nekoliko minuta, dobijemo iscrtanu kartu za vrstu Carpinus betulus L. (pogledati sliku

5.10), dakako, uz sve zapise.

Slika 5.10 Prikaz karte za vrstu Carpinus betulus L.

Page 24: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

19

Sljedeća cjelina prikaza rezultata istraživanja je tablični prikaz. Kliknemo li na karticu

„Tablični prikaz“, dobit ćemo tablice u kojima prvi stupac predstavlja početnu vrijednost

intervala koji obuhvaća vrijednosti veličine za koju se prikazuje tablica, a drugi stupac

vjerojatnost za skup područja koja se nalaze u intervalu određene veličine. Za tablični

prikaz podržane su veličine nadmorska visina, godišnja prosječna temperatura i sezonska

količina padalina. Kako bismo bolje objasnili o čemu se radi, pogledajmo primjer na slici

5.11.

Slika 5.11 Tablični prikaz za svojstvo nadmorske visine

S lijeve strane možemo odabrati raspon nadmorskih visina kojim možemo filtrirati

područja samo s odabranim nadmorskim visinama te možemo odabrati veličine intervala

za koje će se izračunavati vjerojatnost rasta biljke u zadanim granicama. Kako mijenjamo

raspon područja i veličine intervala, tako se interaktivno mijenja tablica i izračunavaju

vjerojatnosti za svaki interval. Vrijednosti vjerojatnosti nisu ništa drugo nego srednja

vrijednost vjerojatnosti rasta biljke u svim područjima koji upadaju u pojedini interval

veličine.

Page 25: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

20

Na slikama 5.12, 5.13 i 5.14 su prikazani rezultati za nadmorsku visinu za istu biljku kada

se promijene parametri od strane korisnika, zatim primjer rezultata za godišnju temperaturu

i za sezonsku količinu padalina.

Slika 5.12 Prikaz tablice s promijenjenim parametrima

Slika 5.13 Prikaz tablice za svojstvo godišnje temperature

Page 26: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

21

Na kraju, za svaku biljku i jednaka tri svojstva za koja su prikazani i tablični rezultati

mogu se prikazati i grafički rezultati kako bi se dobio bolji i prirodniji uvid u rezultate

istraživanja. Jednako kao i kod tabličnog prikaza, možemo definirati minimalnu i

maksimalnu vrijednost neke veličine te veličinu svakog intervala za koju će se iscrtati

vrijednost na grafu. Iscrtavanjem vjerojatnosti za svaki interval neke veličine dobiva se

graf funkcije vjerojatnosti koja ovisi o zadanoj veličini. Na sljedećim slikama možemo

vidjeti primjere grafičkih prikaza za sve tri odabrane veličine (slike 5.15, 5.17 i 5.18), s tim

da primijetimo kod nadmorske visine da se povećanjem veličina intervala dobiva

aproksimacija grafa funkcije s manje uzoraka (slike 5.15 i 5.16), a kod sezonske količine

padalina smanjenjem veličine graf funkcije se sve više izoštrava (slike 5.18 i 5.19).

Slika 5.14 Prikaz tablice za svojstvo sezonska količina padalina

Slika 5.15 Grafički prikaz odnosa nadmorske visine i vjerojatnosti rasta u početnom stanju

Page 27: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

22

Slika 5.17 Grafički prikaz odnosa prosječne godišnje temperature i vjerojatnosti rasta

Slika 5.16 Grafički prikaz odnosa nadmorske visine i vjerojatnosti rasta kod većeg intervala

Page 28: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

23

Slika 5.18 Grafički prikaz odnosa sezonske količine padalina i vjerojatnosti rasta u

početnom stanju

Slika 5.19 Grafički prikaz odnosa sezonske količine padalina i vjerojatnosti rasta pri

smanjenom intervalu

Page 29: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

24

6 IMPLEMENTACIJA SUSTAVA

Kao što je ranije navedeno, sustav za prikaz rezultata predviđanja rasta biljnih vrsta je

implementiran u programskom jeziku R uz framework za web-aplikacije Shiny. U Shinyju,

kod koji opisuje izgled korisničkog sučelja mora se nalaziti u datoteci ui.R , dok se kod

koji opisuje logiku aplikacije i rukovanje svim podacima i korisničkim sučeljem smješta u

datoteku server.R . U nastavku će biti točno objašnjeno kako je implementiran čitav sustav

te koje su dodatne knjižnice korištene prilikom implementacije ovih dvaju dijela aplikacije.

6.1 IMPLEMENTACIJA KORISNIČKOG SUČELJA

Korisničko sučelje implementirano je u datoteci ui.R koja sadrži sve komponente koje se

nalaze u cijeloj aplikaciji. Osnovna prednost oblikovanja sučelja u Shiny frameworku je

iznimna jednostavnost zbog velikog niza gotovih komponenti, što potiče jedno od glavnih

načela programiranja, a to je korištenje već implementiranog. Sve se komponente mogu

dodati bez umetanja HTML ili Javascript dijelova koda, a ako nam i zatrebaju eksplicitno

takve komponente, Shiny ima podršku i za umetanje HTML primitiva (kao što su odlomak

teksta, link ili div element) preko Shiny sučelja pozivom vrijednosti tags$OZNAKA, gdje

na mjesto oznake dolazi neki od HTML elemenata.

U izradi korisničkog sučelja korištene su vanjske knjižnice:

shiny[2] – knjižnica bez koje cijela web-aplikacija ne bi mogla biti implementirana,

sve primitive vezane za komponente, reaktivnost sa poslužiteljem

leaflet[3] – korisna za prikazivanje geografskih karata na različite načine (satelitska

snimka, slijepa karta, ...) i ubacivanje različitih poligona, linija i sličnih oblika

kojima se manifestira prikaz geografskih podataka

ggplot2[4] – knjižnica za prikaz različith vrsta grafova za puno veću izražajnost kod

prikaza podataka

shinyjs[5] – plug-in koji ispod haube generira običan Javascript, a koristi se preko

sučelja Shiny frameworka kako bi se zadržala čitljivost koda

Page 30: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

25

Pogledajmo najzanimljivije isječke implementacije korisničkog sučelja.

Najprije je potrebno spomenuti da sav kod koji opisuje sučelje se piše unutar funkcije

shinyUI koja kao argument prima razmještaj čitave aplikacije. U ovoj aplikaciji je izabran

navbar page layout zbog bolje preglednosti svih dijelova analize podataka. Prva kartica

služi za odabir podataka koji će se koristiti pri generiranju rezultata istraživanja. U tu

karticu se uključuje plugin shinyjs, dodaje se css za uređivanje prikaza ekrana koji će biti

aktivan dok se podaci učitavaju, a na početku je taj prikaz skriven, što se vidi na slici 6.1.

shinyUI(navbarPage("Predviđanje rasta biljnih vrsta",

tabPanel("Odabir podataka",

shinyjs::useShinyjs(),

inlineCSS(appCSS),

hidden(div(

id = "loading-content",

h2("Generiranje rezultata...")

))

tags$div(id = "userData",

fluidRow(

column(6,

tags$h3("Unos geoprostornih podataka"),

tags$p("Unesite barem dvije zip datoteke koje

sadrže

geoprostorne podatke u obliku shapefile

formata ili

rds formata!"),

downloadButton("geospaceExample", "Primjer dobrog

unosa"),

tags$div(id = "geoSpace",

fileInput("geoSpaceData1",

"",

accept=c(".zip"))

)

),

Slika 6.1 Početak koda korisničkog sučelja

Slika 6.2 Kod za unos geoprostornih podataka

Page 31: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

26

U prikazanom isječku na slici 6.2 je prikazan prvi dio unosa podataka za istraživanje –

geoprostornih podataka. U stupcu za unos podataka nalaze se upute za prijenos podataka,

primjer dobro oblikovane datoteke i forma za unos vlastitih podataka. Sve komponente

vezane za unos su spremljene unutar funkcije fluidRow koja označava novi redak u

razmještaju stranice, a unutar tog retka možemo definirati stupce koji ukupno u jednom

retku zauzimaju veličinu 12.

Prva kartica koja se koristi za prikaz rezultata je kartica za prikaz karte na kojoj se koristi

jednostavan razmještaj sa jednim dijelom koji je postrance i glavnim dijelom, što je

vidljivo na slici 6.3. Sa strane sa selectInput definiramo padajuću listu za odabir biljke čiji

če se rezultati prikazivati, prostor za buduću komponentu za odabir broja zapisa koji će se

iscrtavati na karti te gumb za preuzimanje rezultata istraživanja, a u glavnom dijelu

definiramo kartu i prostor koji će zauzimati naredbom leafletOutput. Uočimo da tako

definiramo objekt output$mymap koji će nam kasnije koristiti pri iscrtavanju karte (vidjeti

poglavlje 4.2.).

tabPanel("Karta",

sidebarLayout(

sidebarPanel(

selectInput("firstSpecies", "Odabir vrste:",

choices = c("Nema vrsta" = "N/A"), selected = 1),

tags$div(id = "mapSelection"),

downloadButton("downloadData", "Download rezultata")

),

mainPanel(

leafletOutput("mymap", width = 550, height = 550)

)

)

),

Slika 6.3 Kod za prikaz karte

Page 32: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

27

Sljedeća kartica za prikaz rezultata je kartica za tablični prikaz (slika 6.4). Ovdje imamo

sličan raspored komponenti kao i kod priaza karte, samo što ovdje postrance definiramo

unos raspona nadmorske visine za koji se žele prikazati rezultati te rezolucija prikaza

rezultata, odnosno veličina intervala koji će predstavaljati jedan redak u tablici. Tablicu

definiramo naredbom tableOutput i na taj način dobivamo objekt tablice preko kojeg ćemo

tablicu popunjavati konkretnim podacima.

Vrlo slično je oblikovana i posljednja kartica za grafički prikaz rezultata, što je, zapravo,

samo grafička reprezentacija informacija prikazanih u tablici, a jedina zamjetna razlika je u

glavnom panelu gdje umjesto definiranja tablice stoji definicija grafa

plotOutput("elevHist").

tabPanel("Tablični prikaz",

fluidRow(

sidebarLayout(

sidebarPanel(

sliderInput("tableElev",

"Odabir nadmorske visine:",

min = -10,

max = 2000,

value = c(300, 1000),

step = 50),

sliderInput("tableElevStep",

"Razmak između visina:",

min = 10,

max = 150,

value = 50 ,

step = 10)

),

mainPanel(

tableOutput("elevTable")

)

)

),

Slika 6.4 Kod za tablični prikaz podataka

Page 33: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

28

6.2 IMPLEMENTACIJA POSLUŽITELJA

Cijeli kontrolni dio aplikacije gdje je smještena potpuna logika nalazi se u datoteci

server.R. Poslužiteljski dio aplikacije u Shiny-ju je organiziran na način da svaka

funkcionalnost je omotana određenom reaktivnom funkcijom koja sluša reaktivne

vrijednosti koje se invalidiraju svaki put kada korisnik napravi neku ulaznu akciju (više o

reaktivnosti pročitati u poglavlju 3.2.). Knjižnice koje su korištene u poslužiteljskom

dijelu, a nisu navedene u prošlom poglavlju su:

gsubfn[6] – knjižnica koja služi za naprednije baratanje stringovima unutar R-a

rgdal[7] – služi za manipuliranje podacima shapefile formata, odnosno za njihovo

čitanje i pisanje

Prvi blok na slici 6.5 se odnosi na odabir podataka koje korisnik želi analizirati: gotove

podatke ili podatke koji se generiraju na temelju ulaza, a ovdje se to konkretno postiže

pokazivanjem ili skrivanjem panela za unos vlastitih podataka kako bi bilo jasnije što se od

korisnika traži.

observeEvent(input$dataSource, {

if (input$dataSource == "user") {

shinyjs::show("userData", anim = TRUE)

} else {

shinyjs::hide("userData", anim = TRUE)

}

})

Slika 6.5 Animacija za pokazivanje/skrivanje sučelja za unos podataka

Page 34: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

29

Sljedeća reaktivna funkcija na slici 6.6 služi za čitanje geoprostornih podataka koje

korisnik zadaje u zip formatu. Najprije se pročita objekt koji se generira uslijed

korisnikovog postavljanja datoteke na server te ako je zbilja nešto unešeno onda tu

datoteku kopiramo na poslužitelja i, ako već ne postoji, izgeneriramo korisnički direktorij

koji je specifičan za svakog korisnika koji otvori aplikaciju, a to osiguramo tako da se

naziv direktorija formira od trenutnog vremena, što bi trebalo biti sasvim dovoljno da svaki

korisnik ima svoj vlastiti direktorij.

observe( {

geospace <- input[[paste0("geoSpaceData", geoSpaceId)]]

if (!is.null(geospace)) {

file.copy(geospace$datapath, file.path("geospace",

geospace$name))

if (is.null(userShapefileDir)) {

now <- Sys.time()

date <- Sys.Date()

form <- paste(format(date, format = "%d_%m_%Y"), "_",

as.integer(now), sep = "")

userShapefileDir <<- paste("geospace/shapefiles", form,

sep="/")

dir.create(userShapefileDir, showWarnings = TRUE)

}

unzip(file.path("geospace", geospace$name),

exdir=userShapefileDir, unzip=getOption("unzip"))

geoSpaceId <<- geoSpaceId + 1

input[[paste0("geoSpaceData", geoSpaceId)]]

insertUI(

selector = "#geoSpace",

ui = fileInput(paste0("geoSpaceData", geoSpaceId),

label="", accept=c(".zip"))

)

}

})

Slika 6.6 Stvaranje korisničkog direktorija

Slika 6.7 Osvježavanje korisničkog sučelja novim poljem za unos

Page 35: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

30

observeEvent(input$generateResults, {

if (input$dataSource == "user") {

if (is.null(input$plantsData1) ||

is.null(input$geoSpaceData1) || is.null(input$geoSpaceData2))

{

return(NULL)

}

shinyjs::show(id = "loading-content", anim = TRUE,

animType = "fade")

shinyjs::hide("app-content")

shapesList = list.files(path=userShapefileDir, pattern

= "*.rds")

if (length(shapesList) == 0) {

shapesList = list.files(path=userShapefileDir,

pattern = "*.shp")

}

csvsList = list.files(path=userCsvfileDir, pattern =

"*.csv")

results <<- maxent_test(csvsList, shapesList,

plantNames, userShapefileDir, userCsvfileDir)

rdsFileName <- paste("results", strsplit(results,

"[.]")[[1]][1], sep="/")

print(rdsFileName)

prediction <<- readRDS(paste(rdsFileName, "rds",

sep="."))

}

shinyjs::hide(id = "loading-content", anim = TRUE,

animType = "fade")

shinyjs::show("app-content")

})

Slika 6.8 Generiranje rezultata

Page 36: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

31

Nakon toga raspakiramo sadržaj zip datoteke te povećamo brojač koji služi za generiranje

novog polja za unos nove zip datoteke, što vidimo na slici 6.7. Kako bi se ostvarila

reaktivnost i kako bi osigurali da će se pri sljedećem unosu podataka ovaj blok koda

sigurno okinuti, jednostvano pozovemo reaktivnu vrijednost

input[[paste0("geoSpaceData", geoSpaceId)]] kako bismo Shinyju dali do znanja

da želimo da se ovaj kod ponovno izvede kad se desi promjena na novom polju za unos.

Nakon toga nam samo preostaje stvoriti to novo polje.

Vrlo slično je i za unos nalazišta vrsta biljaka, samo što izgeneriramo drugačiji direktorij i

kopiramo drugačije datoteke te ne radimo raspakiravanje budući da prenosimo datoteke

csv formata.

Nadalje, kada se svi potrebni podaci učitaju, potrebno ih je i obraditi i generirate rezultate

predviđanja. Taj postupak možemo vidjeti u sljedećem isječku koda na slici 6.8. Prilikom

obrade rezultata, razlikujemo dva slučaja: kada korisnik stavlja svoje podatke ili korisnik

želi pročitati već postojeće rezultate na poslužitelju.

U prvom slučaju moramo provjeriti jesu li svi potrebni podaci preneseni na poslužitelj i,

ako je tako, postavlja se privremeni prikaz na ekranu za učitavanje i generiranje podataka i

tako stoji dok se generiranje ne obavi do kraja. Najprije tražimo potencijalne rds datoteke

koje je korisnik možda učitao, a imaju prioritet budući da se njihovo učitavanje odvija

puno brže nego učitavanje datoteke shapefile formata. Ako ne nađemo rds datoteke, čitamo

postojeće shapefile datoteke te isto napravimo i sa csv datotekama, odnosno podacima o

nalazištima.

Nakon što smo pronašli sve datoteke, možemo pokrenuti algoritam predviđanja koji je već

prethodno razvijen u prethodnom istraživanju te ime zip datoteke rezultata spremiti u

globalnu varijablu koja se vidi unutar sjednice. Također u varijablu takvog tipa spremamo

rezultat čitanja rds datoteke u kojoj su pohranjeni konačni rezultati istraživanja i njih

koristimo u cijelom prikazu.

Page 37: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

32

Drugi slučaj je kod čitanja već generiranih rezultata gdje najprije ponovno stavimo ekran

za čitanje rezultata, potom odaberemo zadnje generirane rezultate na poslužitelju te ih

pročitamo i na kraju, budući da nismo primili od korisnika nikakve podatke o nalazištima,

osvježimo padajuću listu imena biljaka čiji se rezultati mogu prikazati csv datotekom

kojom se raspolaže na poslužitelju.

Sada prelazimo na dio u kojem se prikazuju rezultati istraživanja. Najprije se prikazuje

karta na kojoj se može vidjeti kolika je vjerojatnost da biljka raste na pojedinom poligonu.

Da bismo to mogli, najprije izdvojimo iz matrice rezultata stupce koji predstavljaju

identitet poligona i vjerojatnost rasta odabrane biljke, kao u kodu na sl. 6.9. Nakon toga

izdvojimo one retke u kojima nema prisutnih rezultata te napravimo potrebnu konverziju

brojeva u tip double. Prije prikazivanja karte preostalo nam je još napraviti transformaciju

koordinata u standardni oblik (stupnjevi geografske dužine, stupnjevi geografske širine) te

napraviti paletu boja kojom će se obojati svaki poligon ovisno o vrijdnosti varijable

vjerojatnosti rasta biljke.

Sada nam je preostalo samo prikazivanje karte, što radimo funkcijom leaflet. Uočimo pipe

operator u R-u (%>%) na slici 6.10 koji prosljeđuje rezultat prošle naredbe sljedećoj. Tako

možemo napraviti lanac naredbi kako bismo izgradili našu kartu. Tako na praznu sliku

dodajemo pretpostavljenu kartu, postavljamo pogled na željeni teritorij i dodajemo

res <- predictionPart()[c("ID", substr(selectedPlant,1,7))]

res <- res[!is.na(res[[paste0(substr(selectedPlant,1,7))]]), ]

res[[paste0(substr(selectedPlant,1,7))]] <-

as.double(as.character(res[[paste0(substr(selectedPlant,1,7))]]))

res <- spTransform(res, CRS("+proj=longlat +datum=WGS84 +no_defs

+ellps=WGS84 +towgs84=0,0,0"))

palette <- colorNumeric("Blues",

domain = res[[paste0(substr(selectedPlant,1,7))]])

Slika 6.9 Generiranje struktura podataka za prikaz karte

Page 38: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

33

poligone koji su zapisani u rezultatima koje smo prethodno obradili, a za boje stavljamo

paletu boja koju smo također unaprijed pripremili. Na kraju još samo dodajemo legendu

kako bismo točno vidjeli koja vjerojatnost označava koju nijansu boje na karti.

Prikazi rezultata tabličnim i grafičkim putem realiziraju se poprilično slično za sva

odabrana svojstva, a svi promatrači koji iscrtavaju ovakve prikaze oslanjaju se na važnu

funkciju koja omogućava ovakve prikaze, a to je funkcija renderXYMeanValues čija je

implementacija prikazana na slikama 6.11 i 6.12.

leaflet() %>% addTiles() %>%

setView(lng = 16.5257556, lat = 44.5360282, zoom = 7) %>%

addPolygons(data = res,

color =

~palette(res[[paste0(substr(selectedPlant,1,7))]]),

weight = 1,

smoothFactor = 1,

opacity = 1.0,

fillOpacity = 0.6,

layerId = res$ID,

fillColor =

~palette(res[[paste0(substr(selectedPlant,1,7))]])

) %>%

addLegend("bottomright",

pal = palette,

values = res[[paste0(substr(selectedPlant,1,7))]],

title = "Raspodjela vjerojatnosti",

opacity = 1

)

renderXYMeanValues <- function(dataset, attribute, selPlant, min, max,

step) {

dataset <- dataset[c(attribute, substr(selPlant,1,7))]

dataset@data <- dataset@data[complete.cases(dataset@data), ]

dataset <- dataset[ dataset[[paste0(attribute)]] >= min

& dataset[[paste0(attribute)]] <= max, ]

xTable <- c()

yTable <- c()

Slika 6.10 Kod za prikaz karte

Slika 6.11 Početak funkcije za obradu podataka za prikaz

Page 39: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

34

Funckija prima skup podataka koji se analizira, geoprostorni atribut nalazišta po kojem se

želi uzorkovati, odabrana biljka za prikaz rezultata, minimalna i maksimalna vrijednost

uzorkovanja te korak uzorkovanja. Glavna ideja ove funkcije jest osigurati interaktivnost

sa korisnikom tako da on određuje intervale nekog atributa za koje će se prikazivati

vjerojatnost, a sve u svrhu pojednostavljivanja skupa podataka koji se prikazuje korisniku.

Na početku, na slici 6.11, se skup podataka reducira na ono što nam je stvarno potrebno,

izbacuju se retci bez podataka o vjerojatnosti te se tablica svodi samo na vrijednosti

između minimalne i maksimalne zadane za neko svojstvo. Potom se inicijaliziraju liste

koje će predstavljati domenu i kodomenu funkcije koja će na kraju biti generirana i

prikazana na prikladan način.

Nakon početnih postavki kreće se u petlju prikazanu na slici 6.12 koja formira funkciju

koja svakom intervalu atributa pridružuje vjerojatnost rasta biljke na područjima čija je

vrijednost svojstva između početka i kraja tog intervala, a jednaka je srednjoj vrijednosti

svih vjerojatnosti na svim tim područjima. Uočimo da vrijednosti za jedan interval

prikupljamo iz matrice importantValues, a ako nema nikakvih podataka za taj

interval, stavljamo vjerojatnost 0 i sve spremamo u liste argumenata (x) i vrijednosti

funkcija (y) koje na kraju i vraćamo.

for (i in seq(min, max, by = step)) {

importantValues <- dataset[ dataset[[paste0(attribute)]] >= i

& dataset[[paste0(attribute)]] <= i +

step, ]

prob <- mean(as.numeric(as.character(

importantValues[[paste0(substr(selPlant,1,7))]]))) * 100

if (is.nan(prob) || is.na(prob)) {

prob <- 0

}

xTable <- c(xTable, as.integer(i))

yTable <- c(yTable, prob)

}

return(list(xTable, yTable))

}

Slika 6.12 Drugi dio funkcije za obradu podataka

Page 40: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

35

7 ZAKLJUČAK

U namjeri da se prikupi i analizira što više podataka iz vanjskog svijeta korisno je imati

programsku podršku koja će nam dati snažan alat za rukovanje takvim podacima te njihovu

brzu obradu i pohranjivanje rezultata obrade koji bi nam kasnije poslužili za daljnje

postupke. Danas i postoje mnoge takve aplikacije koje se, kad govorimo o velikim

količinama podataka iz stvarnog svijeta, prvenstveno koriste u znanstvene svrhe, no sve

više ovakvih vrsta aplikacija žele se približiti i običnom korisniku koji sam može

pregledavati svakojake rezultate istraživanja na temelju već pripremljenih podataka kao što

su, primjerice, aplikacije za predviđanje vremenske prognoze (Meteoalarm, Accuweather i

sl.), za pregledavanje područja pogođena potresima ili za različite projekcije populacija

zemalja u budućnosti.

Ovaj rad je kao glavnu svrhu imao razviti aplikaciju koja će na što suvisliji i korisniku što

ugodniji način prikazati rezultate predviđanja rasta biljnih vrsta na temelju danih podataka

ili na temelju već dostupnih rezultata. Sam model i algoritam predviđanja već je prethodno

bio razvijen[1], no, s obzirom na određene nedostatke, bio je podložen manjim izmjenama,

poput generalizacije direktorija iz kojih se čitaju i u koje se pišu podaci te dodavanja još

značajki u matricu rezultata koje su bile potrebne radi zanimljivijeg prikaza rezultata.

Unutar same aplikacije možemo naći dvije osnovne funkcionalnosti, a to su generiranje

rezultata istraživanja na temelju korisničkih podataka te prikaz rezultata u različitim

oblicima.

Inicijalno je aplikacija zamišljena za prikazivanje područja samo na teritoriju Republike

Hrvatske, međutim, lako je proširiva i za širu uporabu, čemu dodatno u prilog ide činjenica

da se rezultati generiraju na temelju podataka koje korisnik prenosi na poslužitelj, a za

prikaz rezultata aplikacija ne zna o kojem se teritoriju radi. Dodatna proširenja i

poboljšanja se definitivno vide u brzini prikazivanja karte, za što se trenutno čeka i po

nekoliko minuta ako odaberemo prikazivanje svih zapisa, brzini generiranja rezultata te u

proširenju funkcionalnosti u vidu mogućnosti prikaza usporedbi rezultata dviju vrsta te

daljnjeg proširenja na praćenje faune kako bi se bolje pratile ugrožene životinjske vrste.

Page 41: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

36

__________________________

Luka Kraljević, 0036484370

Page 42: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

37

Literatura

[1] Perović, V. Primjena statističkih modela u predviđanju nalazišta biljnih vrsta.

Diplomski rad, Fakultet elektrotehnike i računarstva, 2016.

[2] Shiny, https://shiny.rstudio.com/tutorial/, 20.5.2017.

[3] Leaflet (plug-in za Shiny), https://rstudio.github.io/leaflet/shiny.html, 13.5.2017.

[4] Ggplot2, http://ggplot2.tidyverse.org/reference/, 5.5.2017.

[5] Shinyjs, http://deanattali.com/2015/04/23/shinyjs-r-package/, 10.5.2017.

[6] Gsubfn, https://cran.r-project.org/web/packages/gsubfn/index.html, 8.5.2017.

[7] Rgdal, https://cran.r-project.org/web/packages/rgdal/index.html, 20.4.2017.

Page 43: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

38

Sažetak

Ovaj rad dokumentira razvoj web-aplikacije za prikaz rezultata predviđanja rasta biljnih

vrsta. Aplikacija je zamišljena kao cjeloviti proizvod koji obuhvaća početak istraživanja

(unos podataka zadanih formata od strane znanstvenika ili bilo koje druge osobe koja

posjeduje takve podatke), proces istraživanja (generiranje rezultata na temelju danog ulaza)

te prikaz rezultata (glavni centar okupacije unutar rada). Prikaz rezultata podrazumijeva,

konkretno, kartografsku projekciju rezultata, tablični i grafički prikaz podataka uz

podržavanje interaktivnosti s korisnikom i generiranje novih prikaza na temelju

korisnikovih preferencija.

Rješenje je razvijeno u jednom od najmodernijih proširenja koji podržavaju razvoj web-

aplikacija, odnosno u Shinyju kao proširenje statistički orijentiranog jezika R koje

omogućava takav razvoj. Kroz rad se osvrće na statističku analizu odgovornu za

generiranje rezultata, na jedan od najpoznatijih koncepata u razvoju aplikacija MVC-u te

njegovu realizaciju u Shinyju, a potom i na korištenje same aplikacije te, na kraju,

pojašnjenje dijelova implementacije sustava.

Page 44: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

39

Ključne riječi

MAXENT

Shiny

MVC

Shapefile

predviđanje

GIS

R

Page 45: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

40

Abstract

This paper documents the development of a web application which shows prediction of

plant species growth. The application is conceived as a complete product that includes the

beginning of a research (input of data formats by a scientist or any other person possessing

such data), a research process (generating results based on a given input), and displaying

results (the main occupation center within the work). Display results implies, in particular,

generating interactive map showing research results, tabular and graphical data display,

supporting user interaction and generating new views based on user preferences.

The solution has been developed in one of the most up-to-date frameworks that support the

development of web applications, Shiny, as an extension of the statistically-oriented R

language that enables such development. This paper mentions the statistical analysis

responsible for generating results, one of the most well-known concepts in developing

MVC applications and its implementation in the Shiny framework, and then using the

application itself and, ultimately, clarifying parts of system implementation.

Page 46: WEB-APLIKACIJA ZA VIZUALIZACIJU REZULTATA ......bioklimatsko stanje unutar takvog prostora. Svojstva koja se opisuju unutar jednog poligona su brojna, primjerice, za svaki poligon

41

Key words

MAXENT

Shiny

MVC

Shapefile

prediction

GIS

R