razvoj prototipa spletne aplikacije za prikaz ... · in html5. za prikaz zemljevida bo služila...

Magistrsko delo Organizacija in management informacijskih sistemov

RAZVOJ PROTOTIPA SPLETNE APLIKACIJE ZA PRIKAZ EVAKUACIJSKEGA NAČRTA

Mentor: izr. prof. dr. Andrej Škraba Kandidat: Aleš Sušnik

Somentor: doc. dr. Davorin Kofjač

Kranj, november 2015

ZAHVALA Za pomoč pri izdelavi magistrskega dela, za strokovno usmerjanje in nasvete se zahvaljujem mentorju izr. prof. dr. Andreju Škrabi in somentorju doc. dr. Davorinu Kofjaču. Hvala tudi družini in prijateljem za vso podporo in spodbude v času študija.

Vsebina magistrskega dela je nastala v okviru NATO SfP-projekta »Procesiranje geografskih informacij za zagotavljanje varnosti v primeru okoljskega onesnaženja na nivoju urbanega okolja«, ki ga je financiral »NATO Public Diplomacy Division« v okviru pobude »Science for Peace«. Oznaka projekta je: GEPSUS SfP 983510.

POVZETEK Magistrsko delo obsega izdelavo prototipa aplikacije za simulacijo disperzije škodljivih plinov na podlagi vremenskih razmer. Aplikacija prav tako omogoča oblikovanje in predvidevanje kriznih scenarijev v primeru izpustov nevarnih plinov oziroma podobnih nesreč. Omogočen je tudi izris najkrajše poti od točke nesreče do točke evakuacije. Razvita rešitev temelji na spletnih tehnologijah, kar pomeni, da je njena uporaba mogoča tudi na mobilnih in drugih napravah, ki podpirajo spletne standarde in imajo omogočeno povezavo v svetovni splet. Uporabniški vmesnik je sestavljen iz zemljevida kot osnove za prikaz scenarijev in nekaj dodatnih gumbov, ki omogočajo določanje pozicije nesreče in pozicije evakuacijske točke, kot tudi pregled vremenske napovedi in posledično gibanja nevarnega območja. V magistrskem delu smo podali tudi rezultate testiranja in zapisali ugotovitve ter možnosti za nadaljnji razvoj.

KLJUČNE BESEDE:

- JavaScript - internet - evakuacija - disperzija škodljivih plinov - ogroženo območje - simulacija

ABSTRACT Master thesis describes a prototype application to simulate the dispersion of harmful gases on the basis of weather conditions. The application also enables the creation of anticipative crisis scenarios in case of the release of hazardous gases or similar disasters. The application allows user to plot the shortest route from the point of the accident, to the point of evacuation. The application is based on web technologies, which means that its use is also possible on mobile and other devices that support web standards and are able to connect to the World Wide Web. The user interface consists of a map as a basis to show scenarios and buttons that allow you to specify the position of an accident and position of the evacuation point, as well as an overview of weather forecasts and changes of the danger zone. The results of the tests are presented in the thesis, and some possibilities for further development are discussed.

KEYWORDS:

- JavaScript - internet - evacuation - dispersion of the harmful gases - endangered area - simulation

KAZALO 1. Predstavitev problema.................................................................. 1

1.1. Predpostavke ....................................................................... 2 1.2. Cilji raziskovalnega dela .......................................................... 3

2. Disperzija škodljivih plinov ............................................................ 4 2.1. Gaussov model disperzije ......................................................... 4 2.2. Kaj je GIS ? .......................................................................... 8

3. Razvoj aplikacije ....................................................................... 10 Zasnova rešitve ......................................................................... 10 Kaj je jQuery? ........................................................................... 11 Kaj je AJAX? ............................................................................. 11

3.1. Programski jeziki .................................................................. 12 3.1.1. Javascript ..................................................................... 12 Osnovno delo z JavaScriptom ......................................................... 14 3.1.2. HTML .......................................................................... 18 Atributi................................................................................... 19 Uporaba besedila in komentiranje kode ............................................ 20 3.1.3. Uporaba JavaScript-a znotraj HTML-kode ................................ 23

4. Pregled programske kode aplikacije ................................................. 24 4.1. Osnovna datoteka index.html ................................................... 24 4.2. Pridobivanje podatkov o vremenskih razmerah .............................. 33

4.2.1. Pridobivanje podatkov o trenutnih vremenskih razmerah ............. 34 4.2.2. Pridobivanje podatkov o vremenski napovedi ........................... 37

4.3. Možnosti prikaza podatkov na mapi ............................................ 41 5. Opis funkcionalnosti programske rešitve ............................................ 46 6. Validacija programske rešitve ........................................................ 53 7. Zaključek ................................................................................ 56

7.1. Ocena učinkov ..................................................................... 56 7.2. Možnosti nadaljnega razvoja .................................................... 56

LITERATURA IN VIRI .......................................................................... 57 SPLETNI VIRI .................................................................................. 58 KAZALO SLIK .................................................................................. 59 KAZALO TABEL ............................................................................... 59 KAZALO izsekov kode ........................................................................ 59 KRATICE IN AKRONIMI ....................................................................... 61

Univerza v Mariboru – Fakulteta za organizacijske vede Magistrsko delo

Aleš Sušnik: Razvoj prototipa spletne aplikacije za prikaz evakuacijskega načrta stran 1

1. PREDSTAVITEV PROBLEMA V današnjem času je uporaba nevarnih snovi tako v industriji kot tudi v gospodinjstvih postala nekaj vsakdanjega. Tako se nevarnosti, ki nam lahko preti praktično na vsakem koraku, niti ne zavedamo dobro. Vendar pa je dobra pripravljenost reševalnih ekip za posredovanje v ekstremnih primerih, kot je uhajanje nevarnih plinov v ozračje, ključnega pomena za hitro in učinkovito ukrepanje. Za učinkovito reševanje tovrstnih dogodkov je zelo pomembno, da reševalne ekipe v čim krajšem času pridobijo čim več informacij o področju, kjer je prišlo do nesreče, in si s tem zagotovijo boljše izhodišče za oblikovanje uspešnih načrtov za reševanje nastale situacije. Osredotočili se bomo na nesreče, pri katerih pride do sproščanja nevarnih plinov v ozračje, kar je še posebej zahtevna tema, saj na potek reševanja vpliva večje število dejavnikov, ki so težko predvidljivi. V primeru takšnih izpustov je za reševalce pomembno, da se za bolj učinkovito reševanje zatečejo k pomoči različnih sistemov za podporo odločanju. Za določitev razvoja hipotetičnega incidenta, pri katerem pride do disperzije, bomo uporabili metodologijo modeliranja in simulacije (Kljajić et al., 2000; Škraba et al., 2003; De Amicis et al., 2013). Primeri obstoječih aplikacij, ki jih v takšnih primerih uporabljajo reševalne ekipe, so ALOHA, TRACE, BREEZE, SAMS in druge (Baumann-Stanzer K., Stenzel S., 2011). Vendar pa te aplikacije ne nudijo celostne podpore za odločanje v takšnih primerih, saj se uporabljajo bolj za izris modela onesnaženosti zraka. Poleg tega orodja ne nudijo avtomatskega prikaza trenutnega stanja razmer v določenem okolju (Stojanovič et al., 2012; De Amicis et al., 2013). V magistrski nalogi bomo razvili rešitev, ki bo na podlagi čim več dejavnikov, ki so ključni za uspešno rešitev takšne situacije, prikazala kar najbolj učinkovito rešitev, ki bi bila lahko uporabna tudi v praksi. V rešitvi bomo poskušali v realnem času pridobiti trenutne vremenske podatke na določenem področju in nato bomo s pomočjo izračuna prikazali različne možnosti gibanja onesnažene zračne mase ter drugih dejavnikov v naslednjih nekaj urah, in s tem poskušali reševalnim ekipam zagotoviti možnost simulacije več možnih scenarijev reševanja nastale krizne situacije. Razvoj aplikacije bo temeljil na osnovi programskih jezikov JavaScript (ECMA Script) in HTML5. Za prikaz zemljevida bo služila odprtokodna rešitev OpenStreetMap, podatke o vremenskih razmerah bomo pridobili iz odprtokodnega projekta OpenWeatherMap, vse skupaj bo povezovala knjižnica Leaflet.js skupaj s pripadajočimi vtičniki (Spletni vir 14).



1.1. PREDPOSTAVKE Razvita rešitev bo vsebovala Gaussov model disperzije, implemetniran v predhodnih raziskavah (Stojanović et al., 2013), ki predvideva disperzijo na ravnem terenu. Disperzija bo obravnavana v obsegu 10 x 10 km. Za izračun in izris disperzije bomo uporabili spletni jezik JavaScript, skupaj z vtičnikom Leaflet.js, ki bo model prikazal na zemljevidu. V magistrski nalogi so sicer uporabljeni izsledki predhodnih raziskav:

Integration of System Simulation and Geographical Information Processing for the Air-Pollution Emergency Situations Control and Decision Making (Stojanović idr., 2013).

Emergency Response Applications, Dynamic Plume Modeling and Real-Time Routing (Chitumalla, Harris, Thuraisingham in Khan, 2010).

Rešitev bo zgrajena na osnovi spletnih jezikov HTML5 in JavaScript, za kartografski prikaz terena bomo uporabili odprtokodno knjižnico Leaflet.js, ki omogoča uporabo geografskega informacijskega sistema (GIS) OpenStreetMaps (Spletni vir 13). Podatke o vremenskih razmerah bomo pridobili iz odprtokodnega sistema OpenWeatherMap (Spletni vir 12). Za računanje in prikazovanje poti od ogroženega območja do tako imenovane varne točke pa bo odgovoren vtičnik Leaflet Routing Machine (Spletni vir 11).

Rešitev oziroma spletno aplikacijo bomo testirali na več različnih brskalnikih, kjer bo pomembno vlogo igrala hitrost pridobitve potrebnih podatkov in izrisa podatkov na mapi. Testirali bomo tudi zanesljivost sistema za napoved vremenskih razmer, in sicer v treh korakih (9 ur).

Rezultat razvoja bo delujoč prototip aplikacije, ki bo omogočala upravljavcem reševalnih akcij v čim krajšem času priti do potrebnih podatkov in s tem do kar najbolj učinkovitih rešitev.



1.2. CILJI RAZISKOVALNEGA DELA Pri izdelavi magistrske naloge smo si zastavili cilj, da s pomočjo novih tehnologij razvijemo delujoč prototip aplikacije za pomoč pri odločanju v kriznih situacijah. Aplikacija na podlagi več različnih spremenljivk izriše predvideno ogroženo območje, osnovni namen aplikacije pa je prikaz obsega ogroženosti pri izpustu nevarnih plinov v ozračje in predvideno spreminjanje obsega glede na spremenljive vremenske razmere. Aplikacija bo omogočala tudi prikaz evakuacijske poti iz ogroženega območja do evakuacijske točke. Podatke o vremenskih pogojih za izračun in izris obsega in stopnje ogroženosti bomo pridobili preko spletnega servisa, ki ga zagotavlja rešitev OpenWeatherMap. Rezultat, ki ga servis posreduje, vsebuje podatke o trenutnih vremenskih razmerah kot tudi vremensko napoved za naslednjih nekaj dni. Pridobljeni podatki bodo vplivali na izračun in prikaz disperzije škodljivih snovi, na podlagi katerega bi v primeru krizne situacije pristojni lažje organizirali uspešno reševalno akcijo. Aplikacija se bo izvajala na spletu in za svoje delovanje ne bo potrebovala nikakršnih posebnih vtičnikov, ki bi jih uporabnik moral namestiti za delo z vmesnikom. S tem bomo dosegli cilj, da se lahko aplikacija uporablja na kakršnikoli napravi, ki ima povezavo s svetovnim spletom, hkrati pa bo zaradi uporabe JavaScript spletnega jezika aplikacija tekla na uporabnikovem računalniku, kar pomeni, da število uporabnikov v določenem trenutku ne vpliva na delovanje aplikacije. Z uporabo enostavnih spletnih orodij bomo zagotovili tudi možnost, da se aplikacijo uporablja tako na manjših prenosnih napravah, kot so telefoni in tablice, kot tudi na računalniških ali celo strežniških sistemih. Razlog za tako široko združljivost je v tem, da aplikacija za svoje delovanje potrebuje le spletni brskalnik in povezavo v svetovni splet. Končni izdelek bo omogočal prikaz disperzije škodljivih plinov v ozračju, kot tudi pregled gibanja ogroženega območja glede na vremenske razmere ter možnost prikaza in simulacije evakuacijske poti od žarišča do evakuacijske točke.



2. DISPERZIJA ŠKODLJIVIH PLINOV

V magistrskem delu bomo za prostorsko opredelitev disperzije škodljivih plinov uporabili Geografski informacijski sistem (GIS). Aplikacija bo na osnovi GIS- disperzijo plina prikazala v realnem času, kjer bo za izračun stopnje ogroženosti oz. koncentracije, nevarnosti in pozicije poskrbel izračun na podlagi Gaussovega modela disperzije. Funkcija za izračun disperzije plina je bila prirejena iz predhodnega modela, primarno razvitega v programu MATLAB, v okviru NATO-vega projekta GEPSUS: Simulation Based Decision Making System for Air Pollution Accidents (Stojanović et al., 2012).

2.1. GAUSSOV MODEL DISPERZIJE Podajamo kratek opis Gaussovega modela disperzije strupenih plinov, ki smo ga uporabili za izračun obsega disperzije v magistrskem delu. S spodnjimi formulami pridobimo matriko, ki je potrebna za izračun disperzije plina (Stojanović et al., 2013; Turner, 1970; Tiwary & Colls, 2010):

Ni odboja: A * B *(CC1)

Odboj od zemlje: A * B * (CC1 + CC2)

Odboj od zemlje in inverzija: A * B * (CC1 + CC2 + CC3 + CC4 + CC5) Zgornje neznanke izračunamo z naslednjimi formulami:

𝐶𝐶1 = 1/𝑒

(𝑧−(h+𝑑𝑒𝑙𝑡𝑎h))2

𝑠𝑖𝑔𝑚𝑎𝑧𝑒𝑓𝑓(𝑖)2

2

CC2 = 1/e

(z+h+deltah)2

sigmazeff(i)2

2

CC3 = 1/e

(z −(h+deltah)+2 ∗Hbl)2

sigmazeff(i)2

2

CC4 = 1/e

(z+(h+deltah)+2 ∗Hbl)2

sigmazeff(i)2

2

𝐶𝐶5 = 1/𝑒

(𝑧− 2 ∗𝐻𝑏𝑙 −(h+𝑑𝑒𝑙𝑡𝑎h))2

𝑠𝑖𝑔𝑚𝑎𝑧𝑒𝑓𝑓(𝑖)2

2

A =Q

π ∗ ν ∗ sigmayeff(i) ∗ sigmazeff(i)



B = e−

y12

sigmazeff(i)2

2

𝑦1 = 𝑦 − 𝑦𝑠𝑡𝑎𝑐𝑘

Za izračun spremenljivk zgoraj, določimo:

sigmayeff = √(𝑧1

3,5)2 + (𝑠𝑖𝑔𝑚𝑎𝑦)

2

sigmazeff = √(z1

3,5)2 + (sigmaz)

2

deltah = 4

s0,375∗ (

g

T∗ (T0 − T) ∗ W0 ∗ R0

2)0,25

Ker pa na gibanje izpustov vplivajo tudi naravni pogoji, kot sta stabilnost ozračja in tip okolja, se formuli za izračun spremenljivk sigmay in sigmaz prilagajata glede na trenutni stabilnostni razred po Pasquill-u (Tiwary in Colls, 2010). Razredi so našteti v Tabeli 1:

Razred stabilnosti ozračja

Tip okolja Formuli spremenljivk sigmay in sigmaz

A

Urbano območje s=1

sigmay

= 0,320 ∗ x ∗ 1

√(1 + 0,0004 ∗ 𝑥)

sigmaz

= 0,022 ∗ x ∗ 1

√(1 + 0,0010 ∗ x)

Odprto območje s=1

sigmay

= 0,220 ∗ x ∗ 1

√(1 + 0,0001 ∗ 𝑥)

sigmaz = 0,200 ∗ x

B Urbano območje s=2

sigmay

= 0,320 ∗ x ∗ 1

√(1 + 0,0004 ∗ 𝑥)

sigmaz

= 0,022 ∗ x ∗ 1

√(1 + 0,0010 ∗ x)



Odprto območje s=2

sigmay

= 0,016 ∗ x ∗ 1

√(1 + 0,0001 ∗ 𝑥)

sigmaz = 0,012 ∗ x

C

Urbano območje s=3

sigmay

= 0,220 ∗ x ∗ 1

√(1 + 0,0004 ∗ 𝑥)

sigmaz = 0,200 ∗ x

Odprto območje s=3

sigmay

= 0,110 ∗ x ∗ 1

√(1 + 0,0001 ∗ 𝑥)

sigmaz

= 0,080 ∗ x ∗ 1

√(1 + 0,0002 ∗ x)

D

Urbano območje s=4

sigmay

= 0,160 ∗ x ∗ 1

√(1 + 0,0004 ∗ 𝑥)

sigmaz

= 0,140 ∗ x ∗ 1

√(1 + 0,0003 ∗ x)

Odprto območje s=4

sigmay

= 0,080 ∗ x ∗ 1

√(1 + 0,0001 ∗ 𝑥)

sigmaz

= 0,060 ∗ x ∗ 1

√(1 + 0,0015 ∗ x)

E

Urbano območje s=5

sigmay

= 0,060 ∗ x ∗ 1

√(1 + 0,0001 ∗ 𝑥)

sigmaz

= 0,030 ∗ x ∗ 1

√(1 + 0,0003 ∗ x)

Odprto območje s=5

sigmay

= 0,110 ∗ x ∗ 1

√(1 + 0,0004 ∗ 𝑥)



sigmaz

= 0,140 ∗ x ∗ 1

√(1 + 0,0003 ∗ x)

F

Urbano območje s=6

sigmay

= 0,110 ∗ x ∗ 1

√(1 + 0,0004 ∗ 𝑥)

sigmaz

= 0,080 ∗ x ∗ 1

√(1 + 0,0015 ∗ x)

Odprto območje s=6

sigmay

= 0,040 ∗ x ∗ 1

√(1 + 0,0001 ∗ 𝑥)

sigmaz

= 0,016 ∗ x ∗ 1

√(1 + 0,0003 ∗ x)

Tabela 1: Izračun spremenljivk sigma_y in sigma_z glede na razred stabilnosti in tip okolja V tabeli 2 je prikazana razporeditev razredov glede na stabilnost vremenskih pogojev. Lestvica sestoji iz razredov A, B, C, D, E in F, kjer razred A predstavlja najmanj stabilno in F najbolj stabilne vremenske pogoje.

Dan Noč

Hitrost vetra (m/s)

Jasno Delno

oblačno Oblačno Jasno Oblačno

< 2 A A - B B E F

2 – 3 A – B B C E F

3 – 5 B B – C C D E

5 – 6 C C – D D D D

> 6 C D D D D

Tabela 2: Razpored razredov stabilnosti po Pasquill-u (Tiwary in Colls, 2009, str. 234) Na Slika 1 lahko razberemo, kako se v primeru, ko se oddaljujemo od žarišča izpusta plinov, zmanjšuje tudi koncentracija le-tega.



Slika 1: Z naraščanjem razdalje v smeri vetra, se spreminja tudi koncentracija plina (Tiwary & Colls, 2010).

2.2. KAJ JE GIS ? Geografski informacijski sistem omogoča vizualizacijo, analizo in interpretacijo podatkov za boljše razumevanje odnosov, vzorcev in trendov. GIS se pogosto uporablja za določanje optimalnih poti, npr. iskanje najkrajše poti od točke A do točke B. Tako je primeren za uporabo na več področjih, kjer so odločitve povezane z določanjem lokacij in poti med različnimi lokacijami. Kot primer bi lahko navedli iskanje optimalne poti, načrtovanje evakuacijskih poti, ohranjanje in pridobivanje naravnih virov itd. Hkrati pa GIS postaja vse pomembnejši za razumevanje, kaj se dogaja in kaj se bo zgodilo v geografskem prostoru (Spletni vir 1). Uporablja se za lociranje :

sredstev (voda, kanalizacijske cevi …),

območij (raba zemljišč),

incidentov (kriminal …),

lastnosti določenega območja (poseljenost, stopnja umrljivosti …). V osnovi je GIS način organiziranja zapisov v bazi podatkov, na način pripenjanja podatkov na geografsko sinhronizirane rezine sveta, tako da lahko odgovorimo na vprašanje »Kje« (Spletni vir 2).



Slika 2: GIS model Zato je GIS tudi zelo pomemben pri načrtovanju naše aplikacije za simulacijski prikaz ogroženega območja in evakuacijske poti, saj nam sistem nudi podatke o obstoječih prometnih poteh kot tudi podatke o poseljenosti in gostoti pozidave določenega območja. Tako nam omogoča prikaz najbolj optimalne poti iz t. i. ogroženega območja do evakuacijske točke kot tudi izris širjenja nevarnih plinov. Model sistema GIS je prikazan na Slika 2.



3. RAZVOJ APLIKACIJE ZASNOVA REŠITVE

Reševanje v primeru naravnih nesreč, ki nastanejo zaradi uhajanja nevarnih plinov oz. snovi, je zelo zapleten postopek. Ker je v določenem trenutku potrebno reagirati v čim krajšem času, je zelo pomembno, da lahko zelo hitro dostopamo do čim več podatkov, saj nas kljub skrbnemu načrtovanju lahko presenetijo nepredvideni dogodki. Zato razvita aplikacija nadzornemu centru kot tudi reševalnim ekipam na terenu ponuja vpogled v simulacijo gibanja ogroženega območja in predviden obseg ogroženosti glede na trenutne vremenske podatke na območju, kjer se je nesreča zgodila. Zasnova razvite rešitve je razvidna iz Slika 3. Za predvideno delovanje aplikacije potrebujemo podatke iz treh različnih virov. Ko uporabnik z vnosom pozicije nesreče določi zemljepisno dolžino in širino lokacije, se ta prikaže na mapi, ki jo zagotavlja sistem openstreetmaps.org. Zemljevid se naloži na zahtevo vključenih knjižnic omenjenega odprtokodnega sistema že takoj ob zagonu aplikacije. Za končni izračun predvidenega ogroženega območja so nekateri podatki, kot je stopnja upadanja, stopnja emisij, višina točke opazovanja, že vključeni v programsko kodo same aplikacije (Stojanović et al., 2011). Za pridobivanje in prikaz vremenskih podatkov poskrbi AJAX klic odprtokodnega sistema OpenWeatherMap.org, ki podatke pridobiva iz več kot 40.000 vremenskih postaj po svetu. Za izvajanje vremenske napovedi skrbijo trije večji sistemi:

- Global Forecast System (GFS) - je globalni numerični sistem za napovedovanje vremenskih sprememb, ki ga vzdržuje National Oceanic and Atmospheric Administration (NOAA).

- Integrated Forecast System (IFS) – je globalni operativni model za meteorološko napoved, ki ga razvija in vzdržuje Evropski center za srednjeročne vremenske napovedi (ECMWF) s sedežem v Readingu v Angliji.

- Global Environmental Multiscale Model (GEM) – je integrirani sistem za napovedovanje in asimilacijo podatkov, razvit s strani Recherche en Prévision Numérique (RPN), Meteorological Research Branch (MRB) in Canadian Meteorological Centre (CMC).

Slika 3: Zasnova rešitve



Aplikacijo za pomoč pri odločanju v kriznih situacijah bomo razvili z uporabo programskega jezika Javascript / ECMA Script in HTML. Za izvajanje klicev na zunanji strežnik in za potrebe pridobivanja podatkov o vremenskih razmerah bomo uporabili tudi Javascript knjižnico Jquery. KAJ JE JQUERY? jQuery je majhna, hitra in s funkcijami bogata knjižnica JavaScript. Uporablja se za poenostavljanje iskanja elementov po HTML-dokumentih, lažje upravljanje z dogodki, kot so kliki, prehod elementa z miško itd. Zelo pomembna funkcija jQuery knjižnice pa je hiter dostop do podatkov, ki se nahajajo na oddaljenem strežniku, ki omogoča AJAX-klice. jQuery za naznanjanje uporabe pričakuje značilen znak »$« ali pa besedno zvezo »jQuery«. Na izseku kode 1 lahko vidimo, kako s knjižnico jQuery izvršimo spremembo napisa na gumbu z imenom »nadaljuj«:

Izsek kode 2 pa prikazuje izvedbo klika na gumb z uporabo jQuery knjižnice:

V primeru, ki je opisan v izseku kode 2,Napaka! Vira sklicevanja ni bilo mogoče najti. najprej definiramo spremenljivko »skritiElement«, ki predstavlja HTML DOM-element (Document Object Model) z unikatnim indikatorjem »sporocilo«. Nato pa definiramo funkcijo, ki se sproži ob kliku na gumb z imenom »button-container«. Funkcija nato sproži prikaz elementa »skritiElement« s klicem funkcije »show()« (Spletni vir 3). KAJ JE AJAX? AJAX je okrajšava za Asynchronous JavaScript and XML, kar v prevodu pomeni: Asinhroni JavaScript in XML. AJAX je nadomestilo za običajne spletne aplikacije, ki uporabljajo sinhrono obdelavo podatkov, kar pomeni, da ga po tem, ko uporabnik izpolni obrazec na spletni strani, preusmerimo na drugo stran s spremenjeno vsebino, ki se obdela na strežniku.

Izsek kode 1: Prikaz spremembe besedila na gumbu (jQuery)

Izsek kode 2: Prikaz spremembe besedila na gumbu (jQuery)

$( "button.nadaljuj" ).html( "Naslednji korak..." )

var skritiElement = $( "#sporocilo" );

$( "#button-container button" ).on( "click", function(

event ) {

hiddenBox.show();

});

https://jquery.com/



Pri uporabi AJAX-tehnike, pa se ob potrditvi vnosa podatki še vedno prenesejo in obdelajo na strežniku, ampak za prikaz rezultata, uporabnika ne preusmerimo na novo stran, ampak mu informacije izpišemo na trenutni strani. Pri tem načinu pošiljanja informacij uporabnik niti ne ve, da so bili podatki poslani in obdelani na strežniku. Prednost AJAX-tehnike je, da ni odvisna od programske opreme, ki teče na strežniku in podpira različne formate odgovorov s strežnika, kot sta XML, golo besedilo in drugi. Pomembno pa je tudi, da lahko uporabnik med tem, ko se izvaja pošiljanje podatkov na strežnik, nadaljuje z uporabo aplikacije (Spletni vir 4). Izsek kode 3 prikazuje primer AJAX-klica na vzorčni naslov »/api/getVreme« s parametrom »posta=4000«, ki vrnjene podatke izpiše znotraj elementa »#vremenski-

podatki«:

3.1. PROGRAMSKI JEZIKI 3.1.1. JAVASCRIPT JavaScript (JS) je vsaj v zadnjem času verjetno eden najpomembnejših programskih jezikov. Jezik je bil ustvarjen za zabavo, saj je bil osnovni namen izvajanje vizualnih učinkov na spletni strani, vendar pa je prerasel v najbolj razširjen programski jezik v zgodovini. Praktično kdorkoli, ki ima računalnik, tablico ali pametni telefon lahko izvaja ali piše aplikacije, ki jih poganja JS. Vsi moderni brskalniki in operacijski sistemi danes že podpirajo izvajanje aplikacije, ki so izdelane na podlagi OWS (Open Web Standards). JS podpira predvsem del aplikacij, ki se izvajajo na strani odjemalca. Pisanje in izvajanje JavaScript aplikacij je zelo enostavno, saj jih lahko napišemo kar v navadni beležki (»Notepad«) in poženemo v spletnem brskalniku. Programski jezik sprva sicer ni podpiral shranjevanja podatkov, vendar se je s časom in z vse bolj masovno uporabo jezika tudi to spremenilo s prihodom AJAX- tehnike.

Izsek kode 3: Prikaz klica podatkov iz oddaljenega strežnika (AJAX)

$.ajax({

url: "/api/ getVreme ",

data: {

zipcode: 4000

},

success: function( data ) {

$( "#vremenski-podatki" ).html( "<strong>" + data +

"</strong> degrees" );

}

});



JavaScript je sicer zelo primeren za začetnike, saj ne potrebuje vnaprejšnjega določanja tipov spremenljivk, vendar pa pri razvoju kompleksnejših aplikacij to lahko hitro pripelje do napak, saj lahko pride no konfliktov med spremenljivkami. JavaScript je eden tistih jezikov, pri katerih se največ napak pojavi zaradi pozabljenega znaka »;«, ki pomeni konec stavka. Seveda pa JavaScript ni zašel med najbolj pomembne programske jezike povsem po naključju. Je eden najbolj naprednih izraznih jezikov, ki so bili razviti do danes. Nekaj prednosti programskega jezika JavaScript (Elliot, 2014, str. 2):

Zmogljivost Moderni brskalniki v večini primerov JavaScript kodo pred izvajanjem kompresirajo in optimizirajo njeno delovanje, zato se hitrost izvajanja lahko primerja s programi, napisanimi v programskih jezikih C ali C++.

Objekti Jezik je zelo objektno orientiran. JSON-standard (JavaScript Object Notation) je danes uporabljen v večini modernih spletnih aplikacij in se uporablja predvsem za komunikacijo in shranjevanje podatkov. Namesto razredov se v JavaScript-u uporabljajo objekti, ki privzeto dedujejo lastnosti od svojih nadrejenih objektov na način prototipne verige. Zato je Javascript zelo fleksibilen in dinamičen jezik.

Sintaksa Sintaksa programskega jezika je zelo podobna jezikom iz družine C, kot so: C++, Java, C# in PHP, kar je tudi eden od razlogov, da je JavaScript postal tako hitro popularen. Vendar pa je njegovo izvajanje v osnovi povsem drugačno od zgoraj naštetih jezikov.

Funkcije Kot vse ostalo so tudi funkcije praktično definirane kot objekt, kar omogoča uporabo funkcij tudi znotraj spremenljivk, ne glede na parametre, ki jih zahteva.

Dogodki V spletnem brskalniku se vse dogaja v zanki dogodkov, kar hitro pritegne razvijalce k razvoju orodij za nadzor dogodkov (ang. Event handlers). Z JavaScript-om lahko dosežemo tisto, kar si želi praktično vsak uporabnik aplikacij. In to je takojšnja reakcija ob kliku na gumb.

Ponovna raba Zaradi svoje razširjenosti je JavaScript najlažje prenosljiva in najlažje ponovno uporabljena koda. Prednost jezika je predvsem v tem, da omogoča izvajanje povsem enake kode tako na strani uporabnika kot na strani strežnika.

JavaScript razvijalci so vsak dan priča razvoju, ki bi lahko bil revolucija v zgodovini človeštva, saj omogoča prenose podatkov naprej in nazaj po mreži, praktično ob vsakem premiku ali potezi miške. Aplikacije, ki so napisane v tem jeziku, so izredno odzivne in zelo prilagodljive.



OSNOVNO DELO Z JAVASCRIPTOM Spremenljivke Pri definiranju spremenljivk v JavaScript-u nam ni potrebno podati tipa spremenljivke (npr. število, besedilo …), kar omogoča, da v vsakem trenutku spremenimo tip spremenljivke in ji določimo drugačno vrednost. Spremenljivko definiramo tako, da pred ime napišemo besedo »var« (skrajšano za »variable«). Prednost Javascripta je tudi ta, da je v spremenljivko mogoče shraniti tako enostavne vrednosti, kot je besedilo, število ipd., kot tudi objekt. To pomeni, da lahko v spremenljivko shranimo tudi celotno funkcijo ali bolj kompleksno vrednost, ki lahko zajema tudi več različnih enostavnih ali kompleksnih spremenljivk, med katerimi ima vsaka svoje ime in vrednost. Spremenljivka pa ima tudi možnost shranjevanja vrednosti v tipu matrike, kar pomeni zbirko urejenih vrednosti, ki so lahko oštevilčene ali pa poimenovane. Tako kot v večini drugih programskih jezikov tudi tukaj poznamo dve vrsti spremenljivk, in sicer lokalne in globalne spremenljivke, vendar se v JavaScript-u pri deklaraciji med seboj ne ločita. Lokalne spremenljivke Lokalne spremenljivke so vse spremenljivke, ki so določene znotraj funkcij ali objektov. Vse podrejene funkcije ali objekti lahko dedujejo in uporabljajo spremenljivke, ki so definirane v nadrejenih objektih, ne pa obratno (Spletni vir 5). Primer definiranja lokalne spremenljivke je prikazan na izseku kode 4:

Pomembno pa je, da spremenljivko znotraj funkcije definiramo, preden jo uporabimo, saj v nasprotnem primeru ta zavzame globalno pozicijo, kar pomeni, da jo lahko uporabljamo tudi zunaj dotične funkcije. Globalne spremenljivke Globalne spremenljivke so tiste, ki jim dovolimo uporabo v celotnem dokumentu oz. prostoru izvajanja aplikacije. To pomeni, da je spremenljivka definirana izven funkcij, v večini primerov na vrhu dokumenta.

function prikaziIme() {

var ime = "Janez";

console.log (ime); // Janez

}

Izsek kode 4: Definiranje lokalne spremenljivke (javaScript)



Primer definiranja globalne spremenljivke je prikazan na izseku kode 5:

Če izvedemo zgoraj definirano funkcijo »prikaziImeMentorja«, se izpiše ime globalne spremenljivke (Andrej Škraba), saj funkcija ne manipulira z globalno spremenljivko, ampak jo samo izpiše. Če pa izvedemo drugo funkcijo »prikaziImeSomentorja«, pa se nam izpiše ime »Davorin Kofjač«, saj se znotraj funkcije zamenja vrednost spremenljivki »ime«. Vendar pa to vpliva na vrednost globalne funkcije, saj spremenljivke nismo ponovno (lokalno) definirali, kar pomeni, da se nam, če ponovno zaženemo prvo funkcijo »prikaziImeMentorja«, izpiše ime »Davorin Kofjač« (Spletni vir 5). Podobno se zgodi, če znotraj funkcije uporabimo spremenljivko, ki ni predhodno definirana niti na lokalni niti na globalni ravni, torej brez besede »var«, kar pomeni, da lahko to spremenljivko uporabljamo globalno. Primer uporabe nedefinirane spremenljivke je prikazan na izseku kode 6:

Čeprav smo spremenljivko uporabili znotraj funkcije, jo lahko uporabimo tudi izven nje, saj je nismo predhodno definirali. Vendar pa se ta spremenljivka definira globalno, ampak šele po tem, ko zaženemo funkcijo. V konzolo se nam zato na koncu izpiše »Janez Novak«. Kot spremenljivko pa se lahko definira tudi funkcijo, ki je v večini primerov definirana globalno. Funkcija v JavaScript-u pomeni objekt, ki vsebuje izvedljivo kodo, ki lahko le manipulira s podatki, lahko pa tudi vrne določeno vrednost.

var ime = ‘Janez’;

function dobiPriimek() {

priimek = ‘Novak’;

}

dobiPriimek();

console.log(ime + ‘ ‘ + priimek); // Janez Novak

var ime = "Andrej Škraba";

function prikaziImeMentorja() {

console.log (ime);

}

function prikaziImeSomentorja() {

ime = "Davorin Kofjač";

console.log (ime);

}

Izsek kode 5: Definiranje globalne spremenljivke (JavaScript)

Izsek kode 6: Dodeljevanje vrednosti nedeklarirani spremenljivki (javascript)



Funkcije Funkcije so centralni gradniki JavaScript aplikacij. Funkcija predstavlja del kode, ki ga zapišemo le enkrat v celotnem dokumentu in se nato izvede večkrat iz različnih koncev kode, v večini primerov tudi z različnimi vhodnimi parametri. Osnovni namen funkcije je ta, da vhodne parametre ustrezno preračuna, shrani oziroma drugače ustrezno obdela in vrne nek rezultat. Funkcijo deklariramo tako, da zapišemo besedo »function«, ki ji nato sledi ime funkcije in v oklepajih zapisani vhodni parametri funkcije. Funkcijo je mogoče deklarirati tudi brez vhodnih parametrov, kjer pustimo oklepaj prazen. Takšna funkcija služi fiksni obdelavi podatkov oz. dela z globalno deljenimi spremenljivkami. Telo funkcije pa vsebuje kodo, ki skrbi, da na koncu vrne ustrezen rezultat. V izseku kode 7 lahko vidimo primer definiranja in klic enostavne funkcije, ki sprejme parametra »a« in »b« (Spletni vir 6):

V zgoraj opisanem primeru je na dnu prikazan tudi klic funkcije, ki se enostavno zapiše tako, da navedemo ime funkcije in nato v oklepajih navedemo morebitne vhodne vrednosti. Objekti Drugi, zelo pomemben gradnik JavaScripta, so objekti. JavaScript ne podpira deklaracije razredov, ampak vsak gradnik smatra kot objekt. Tudi dedovanje se izvaja iz objekta na objekt, ne iz razreda na razred. Poznamo tri najbolj uporabljene načine deklaracije objekta. Prvi, ki je tudi največkrat uporabljen način, je način, ko objekt definiramo s funkcijo. Definirani objekt lahko kasneje ustvarimo z uporabo besede »new«, ki ji sledi ime objekta. Ko definiramo objekt, mu lastnosti določimo z uporabo besede »this« (Spletni vir 7). Primer lahko vidimo v izseku kode 8:

function primer(a,b) {

stevilo += a;

alert('izbrali ste: ' + b);

}

primer (1,'hiša’)

Izsek kode 7: Deklariranje funkcije (JavaScript)



V izseku kode 9 pa je prikazana uporaba zgoraj definiranega objekta. Najprej objekt ustvarimo, nato mu spremenimo vrednost atributa »barva« in nazadnje v pojavnem oknu izpišemo informacije, ki jih poseduje.

Objekt pa lahko definiramo tudi z uporabo nizov, ki predstavljajo krajšo obliko deklariranja objektov. Izsek kode 10 prikazuje definiranje objekta na dva načina. Prvi je krajši, drugi nekoliko daljši, vendar oba služita istemu namenu:

Enako pa velja tudi za definiranje matrik. Dva primera sta prikazana v izseku kode 11:

Za razliko od zgoraj opisanega načina, ko objekt definiramo s pomočjo funkcije, kar je bolj podobno definiranju razreda, pa v tem primeru znotraj objekta njegove atribute zapišemo na način »ime atributa«:«vrednost atributa«. V spodnjem primeru (izsek kode 12) je prikazan tak način deklaracije objekta:

var sadje = {

tip: "macintosh",

barva: "rdeča",

dobiInfo: function () {

return this.barva + ' ' + this.tip + ' sadje;

}

}

var a = [];

var a = new Array();

var o = {};

var o = new Object();

var sadje = new Sadje('macintosh');

apple.barva = "rdečkasta";

alert(sadje.dobiInfo());

function Sadje(tip) {

this.tip = tip;

this.barva = "rdeča";

this.dobiInfo = function dobiInfoSadje() {

return this.barva + ' ' + this.tip + ' sadje';

};

}

Izsek kode 8: Deklaracija objekta s pomočjo funkcije (javaScript)

Izsek kode 9: Uporaba objekta (javaScript)

Izsek kode 10: Definiranje objekta brez atributov (JavaScript)

Izsek kode 11: Deklaracija matrike brez atributov (JavaScript)

Izsek kode 12: Deklaracija objekta brez uporabe funkcij (JavaScript)



S tem načinom deklaracije si tudi prihranimo ponovno ustvarjanje instance objekta, saj ga tukaj lahko začnemo takoj uporabljati, ker objekt že obstaja. Primer uporabe je razviden iz izseka kode 13:

Tretji način pa združuje uporabo obeh zgoraj opisanih metod. Tu gre praktično za shranjevanje funkcije znotraj spremenljivke. V tem primeru sama deklaracija poteka na zelo podoben način, kot je definirana pri prvem primeru. Bolj podrobne razlike prikazuje izsek kode 14:

Uporaba definiranega objekta pa je enaka kot pri drugem primeru, torej objekt lahko takoj uporabimo, brez predhodnega ustvarjanja nove instance. Uporabo prikazuje izsek kode 15:

3.1.2. HTML HTML ali Hypertext Markup Language, kar v grobem prevodu pomeni hipertekstovni označevalni jezik, je osnovni jezik, ki se uporablja za spletno programiranje. Uporablja se predvsem za prikaz besedila, ki vsebuje povezave za navigacijo do povezanih dokumentov oziroma zadetkov. V svoji osnovi določa objekte, kot so seznami, tabele, slike in obrazci. Zgodovina jezika seže vse do začetka svetovnega spleta v leto 1989, ko je bila razvita oz. predstavljena prva različica tega programskega jezika. Danes pa uporabljamo že peto različico, ki je bila kot standard potrjena v lanskem letu (2014), s strani pristojne organizacije, ki ureja standarde, ki veljajo na svetovnem spletu, W3C (okrajšava za World Wide Web Consortium) (Coremans, 2015). V nadaljevanju bomo opisali nekaj osnovnih metod za delo z jezikom HTML. Delo z jezikom HTML je dokaj nezahtevno, saj za pisanje aplikacij oz. spletnih strani z omenjenim jezikom, ne potrebujemo nobenega kompleksnega orodja. Vse, kar

sadje.barva = "rdečkasta";


var sadje = new function() {

this.tip = "macintosh";

this.barva = "rdeča";

this.dobiInfo = function () {

return this.barva + ' ' + this.tip + ' sadje';

};

}

sadje.barva = "rdečkasta";


Izsek kode 13: Uporaba objekta brez ustvarjanja nove instance (JavaScript)

Izsek kode 14: Deklaracija objekta na način shranjevanja funkcije znotraj spremenljivke (JavaScript)

Izsek kode 15: Uporaba objekta, definiranega v izseku kode 14 (JavaScript)



potrebujemo, je urejevalnik besedila, ki omogoča shranjevanje datotek v obliki tekstovne datoteke s končnico .html ali .htm. Obstaja več naprednih orodij, kot na primer Notepad++ ter orodja podjetij, kot sta Microsoft in Adobe, ki nam olajšajo delo s tem, da nam pomagajo pri izpisovanju vnaprej določenih oblik, kot so predloge za oblikovanje oz. definiranje objektov (glava, noga …) in ostalih oznak, nekateri pa omogočajo celo vizualno oblikovanje oz. vsaj popravljanje izgleda same spletne aplikacije. V programskem jeziku se vse začne z znakom »<« in zaključi z znakom »/>«. V praksi se v večini primerov sicer uporablja daljša različica, ki vključuje oba znaka, in sicer na način »<>« in se zaključi z »</>«. Konkreten primer lahko vidimo v Izsek kode 16, ki prikazuje osnovni izgled standardnega HTML-dokumenta:

Iz Izsek kode 16 je razvidno, da se dokument začne z oznako »<html>«, zaključi pa z oznako »</html>«. Podobno se zgodi z ostalimi elementi (head, title in body). Element »<head>« služi za opis elementa, ki služi bolj brskalniku kot samemu uporabniku. V tem odseku se definira tudi datoteke, na katere se navezuje osnovni dokument oz. lahko iz njih tudi sestoji. Element »<title>« služi dodajanju naslova dokumentu in je tudi viden uporabniku, in sicer v naslovni vrstici brskalnika. Element »<body>« pa je zelo pomemben del HTML-dokumenta, saj vsebuje glavni del dokumenta, to je vso vsebino, ki je prikazana uporabniku. Znotraj tega elementa lahko zapišemo različne obrazce, prikazujemo slike, tabele in podobne elemente, ki jih podpira HTML. ATRIBUTI Vsak od elementov, ki se nahaja znotraj značke (ang. tag) »<body>«, lahko poleg oznake znotraj značke vsebuje še atribute, kot so:

Id: Enoznačno ime elementa, ki se znotraj enega dokumenta ne ponavlja.

Name: Ime elementa, pri katerem pa je večkratna uporaba dovoljena.

Style: Atribut vsebuje navodila za vizualno oblikovanje elementa in njegove vsebine.

Class: Ime stila, ki je definiran v glavi dokumenta ali v ločeni datoteki in vsebuje seznam vizualnih lastnosti, ki se uporabijo na elementu in njegovi vsebini. Podobno kot style.

<html>

<head>

<title>Naslov dokumenta</title>

</head>

<body> Zelo enostaven HTML element </body>

</html>

Izsek kode 16: Primer osnovne oblike HTML-dokumenta

UPORABA BESEDILA IN KOMENTIRANJE KODE HTML že v osnovi predvideva vnos besedila, zato so predvidene že vgrajene značke kot »<p>« (odstavek – ang. paragraph), »<h1>« do »h6« (naslovi, po velikosti od največjega do najmanjšega – ang. heading), »<b>« (krepka pisava – ang. bold), »<i>« (ležeča pisava – ang. italic) in drugi. Presledke HTML zazna avtomatično in jih izpiše tako, kot jih zapišemo v samem dokumentu. V določenih primerih pa je potrebno presledek nadomestiti z nizom » «, ki se v brskalniku prevede v presledek. Komentarje v HTML dokumentu dodajamo z uporabo znakov »« za konec komentarja. Izsek kode 17 prikazuje primer uporabe komentiranja v kodi:

CSS CSS je okrajšava za Cascading Style Sheets, kar bi v grobem lahko prevedli v slovenščino kot seznami slogov. Uporaba CSS-slogov pri izdelavi spletnih strani je v današnjih časih skoraj nujna. Sloge CSS je možno uporabljati znotraj HTML-kode, v večini primerov pa se sloge zapiše v ločeno datoteko, v HTML-dokumentu pa samo označimo, da naj pri izpisu uporabi tudi v njej zapisane sloge. Sloge v zunanjo datoteko zapišemo zato, ker s tem uredimo kodo in nam to ponuja način za lažjo uporabo enakega sloga na več elementih. Uporaba slogov iz ločene datoteke znotraj HTML-dokumenta pa je sila enostavna. Pri tem velja omeniti, da se slogi osnovnih elementov, ki so specificirani v sami definiciji HTML-jezika (na primer: body, h1, h2, div, a, p …), uporabijo samodejno in ni potrebno dodatno zapisovanje. V ostalih primerih lahko uporabo sloga definiramo z uporabo identifikacijskih imen elementov, ki jih označimo z »#imeElementa« ali pa na strani HTML-elementa zapišemo ime sloga ali večih znotraj atributa »class«. Ime razreda v ločeni CSS-datoteki zapišemo na način ».imeRazreda«.

<!DOCTYPE html>

<html>

<head>



<title>Welcome</title>

</head>

<body>



</body>

</html

Izsek kode 17: Primer komentiranja kode v HTML



Izsek kode 18 nam prikazuje primer najave dveh slogov znotraj ločene datoteke:

Komentar kode v CSS-datoteki začnemo z znakom »/*« in končamo z znakom »*/«. Izsek kode 19 pa nam prikazuje definiranje datoteke s slogi v glavi HTML- dokumenta:

Ko imamo napisan slog in določeno pot do zunanje datoteke v HTML-dokumentu, pa lahko, kot je razvidno iz Izsek kode 20, uporabimo tudi določen slog na izbranih elementih.

Uporaba dogodkov Z uporabo dogodkov v HTML-dokumentu lahko naredimo spletno stran bolj dinamično in zanimivo uporabniku. Funkcionalnost upravljanja dogodkov povežemo s samim elementom. Dogodek se sproži ob določeni interakciji s tem elementom (to je lahko klik, osvežitev, prehod elementa itd.). Dogodki so praktično razširitev HTML-kode z JavaScript kodo. Najpogosteje uporabljeni dogodki so:

<body>

<h1>Samodejno uporabljen slog naslova 1</h1>

<div class="imeSloga">Element z modrim ozadjem in belo

pisavo</div>

</body>

<head>

<link href="slogi.css" rel="stylesheet"

type="text/css">

</head>

h1 {

color: #000 /* črna barva */

font-size: 14px /* velikost pisave 14 pik */

}

.imeSloga {

background-color: #4795ff /* ozadje elementa modre barve

*/

color: #fff; /* bela abrva pisave */

}

Izsek kode 18: Prikaz pisanja CSS-slogov

Izsek kode 19: Definiranje CSS-slogov iz zunanje datoteke "slogi.css"

Izsek kode 20: Uporaba vnaprej določenih slogov znotraj HTML-kode



OnLoad: Dogodek se sproži, ko je celotna vsebina zahtevanega dokumenta prenesena iz strežnika in prikazana na uporabnikovem ekranu.

OnClick: Dogodek sproži klik na določen element.

OnMouseDown: Dogodek sproži klik, vendar se dogodek izvede pred dogodkom »OnClick«, saj se zgodi ob pritisku miškine tipke.

OnMouseUp: Dogodek se zgodi za obema zgornjima dogodkoma, saj ga sproži spust miškine tipke.

OnChange: V večini primerov dogodek sproži sprememba določenega vnosnega polja.

OnMouseOver: Spremembo sproži prehod miškinega kazalca preko določenega elementa.

Za proženje dogodkov skrbi tako imenovana JavaScript dogodkovna zanka (ang. Event Loop), ki ves čas teče v ozadju in se v primeru klika ali drugega določenega dogodka na strani sproži in izvede določeno funkcijo (Spletni vir 8). Delovanje dogodkovne zanke prikazuje Slika 4, na kateri je vidna pot od definicije dogodka do sprožitve.

Slika 4: Delovanje dogodkovne zanke (ang. Event Loop)



3.1.3. UPORABA JAVASCRIPT-A ZNOTRAJ HTML-KODE JavaScript programsko kodo lahko v dokumentu uporabimo na različne načine:

Uporaba HTML-dogodkov: Največkrat uporabljen način za upravljanje z JavaScript kodo je uporaba HTML-dogodkov, ki so bolj podrobno opisani poglavje višje.

Definiranje kode znotraj dokumenta: Znotraj HTML dokumenta lahko JavaScript kodo definiramo z uporabo značke »<script>« za začetek in »</script>« za konec bloka kode.

Uporaba zunanje datoteke: Zunanjo datoteko lahko vključimo znotraj glave HTML-dokumenta z uporabo značke in atributa »<script src="skripta.js">« in zaključimo z značko »</script>«.

Uporaba znotraj URL-naslova: V URL-naslovu lahko uporabimo JavaScript kodo z uporabo za to določenega protokola »javascript:«.

Tako kot pri uporabi ločene datoteke za uporabo sloga je tudi pri uporabi JavaScript kode priporočljiva ločitev kode v svoj dokument s končnico ».js«.



4. PREGLED PROGRAMSKE KODE APLIKACIJE Spletna aplikacija je napisana v programskih jezikih HTML, JavaScript, z uporabo Jquery in AJAX funkcionalnosti, dodanih pa je tudi nekaj CSS-slogov. Strukturo aplikacije sestavlja več datotek, ki so med seboj povezane preko osnovne .html-strani, ki je tudi edina, ki prikazuje vsebino uporabniku. Pri razvoju aplikacije se sicer nismo odločili za popolno izolacijo JavaScript kode od HTML-osnove, ampak so ločene le funkcije, ki skrbijo za preračune pozicije ogroženega območja in s tem povezanih funkcij.

4.1. OSNOVNA DATOTEKA INDEX.HTML Ime datoteke »index.html« predstavlja osnovno stran, ki je v večini strežnikov tudi samodejno zaznana kot privzeta stran, ki se zažene ob dostopu do določenega URL-naslova. V glavi datoteke smo definirali povezave do vseh povezanih datotek, ki skupaj skrbijo za pravilen prikaz mape in rezultatov pri računanju ogroženosti območja pri uhajanju nevarnega plina. Kot je razvidno iz Izsek kode 21, smo za pravilno delovanje zastavljenih funkcij aplikacije vključili 12 JavaScript datotek, ki skupaj skrbijo za pravilen prikaz mape, evakuacijske poti in pravilno označevanje ogroženega območja.

Vključene datoteke predstavljajo že razvite odprtokodne rešitve, so datoteke z lastnimi funkcijami za zagotavljanje povezovanja in delovanja izrisa želenih funkcionalnosti.

<script src="http://cdn.leafletjs.com/leaflet-

0.7.3/leaflet.js" type="text/javascript"></script>

<script src="OSMBuildings-Leaflet.js"

type="text/javascript"></script>

<script src="leaflet-routing-machine.js"


<script src="lib/Control.Geocoder.js"


<script src="lib/leaflet.iconlabel.js"


<script src="lib/L.Control.Sidebar.js"


<script src="lib/prism.js" type="text/javascript"></script>

<script src="l.ellipse.min.js"


<script src="lib/contour.js"


<script src="lib/astar.js" type="text/javascript"></script>

<script src="lib/docontour.js"


<script src="lib/transpose.js"


Izsek kode 21: Vključene JavaScript datoteke



Izsek kode 22 pa prikazuje vključeni .css-datoteki, ki vsebujeta zapise slogov za pravilen prikaz evakuacijske poti in dodatkov na mapi.

Glava dokumenta vsebuje tudi osnovne zapise slogov, ki se nanašajo na definiranje privzete pisave v dokumentu, postavitev mape, definicijo izgleda in postavitve elementov na orodni vrstici. Vključeni slogi so prikazani v Izsek kode 23:

<style>

body { padding: 0px; margin: 0px; font-family: "Segoe UI";

}

#map { height: 100%; width: auto; float: none; overflow:

hidden; z-index: 0;}

#panel {

float: right; height: calc(100% - 20px);

width: 250px;

background-color: #f1f1f1;

border-left: 2px #c1c1c1 solid;

/*padding: 10px 10px;*/

z-index: 10;

}

.up {

background: #c1c1c1; /*#d5d5d5;*/

}

.dn {

background: #89d482;

}

table { padding: 10px 10px; }

table button {

background-color: #c1c1c1;

border: 0px transparent solid;

padding: 10px;

cursor: default;

}

table button:hover {

background-color: #dcdbdb;

cursor: pointer;

}

#content p { padding: 0px; margin: 0px; }

</style>

<link rel="stylesheet"

href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"

/>

<link rel="stylesheet" href="leaflet-routing-machine.css"

/>

Izsek kode 22: Vključene .css-datoteke

Izsek kode 23: CSS-slogi, vključeni v datoteki index.html



Vso ostalo kodo osnovne strani vsebuje razdelek, označen z značko »<body>«. V tem razdelku je najprej zapisana koda, ki srbi za vizualizacijo rešitve. Prikaz rešitve sestavljata dva razdelka, ki sta definirana z značkami »<div>«. Prvi definira desno orodno vrstico s pripadajočimi elementi, kar je razvidno iz izseka kode 24:

Za organiziranje polj v orodni vrstici smo uporabili tabelo »<table>«. Po vrstnem redu si sledijo:

Naslov: definiran z značko »<div>« in dodanim CSS-slogom kar v vrstici.

Polje za vnos besedila, ki se prikaže nad ikono izbruha s privzetim besedilom »Danger zone!«. Za definicijo tekstovnega polja smo uporabili značko »<input>« tipa »text«.

<div id="panel">

<div style="text-align: center; font-weight: bold; width:

100%; padding: 15px 0; background-color: #aad6ff;">Location

settings:</div>

<br>

<table>

<tr>

<td><a>Caption:</a></td>

<td><input id="fireCaption" value="Danger zone!"

type="text" name="fireCaption"></td>

</tr>

<tr>

<td><br/></td>

<td><br/></td>

</tr>

<tr>

<td style="padding: 5px;"><img alt=""

src="icons/fire.png" /></td>

<td style="padding: 5px;"><button id="btnFire"

value="1" type="button" onclick="setFire(this)">Set danger

point!</button> </td>

</tr>

.

.

.

<tr>

<td style="padding: 5px;" colspan="2">

<p id="cf_direction" style="margin: 0px;"></p>

<p id="cf_speed" style="margin: 0px;"></p>

<p id="cf_temp" style="margin: 0px;"></p>

<p id="cf_weather" style="margin: 0px;"></p>

</td>

</tr>

<tr style="visibility: hidden; display: none;">

<td colspan="2" id="windForecast"></td>

</tr>

</table>

</div>

Izsek kode 24: Koda orodne vrstice



Ikona in gumb »Set danger point!«: ikona je definirana z značko »<img>« in potjo do datoteke. Gumb pa je definiran z značko »<button>«. Značka vsebuje tudi dogodek »onclick« s klicem funkcije »setFire()«.

Ikona in gumb »Set safe point!«: tako kot gumb za določanje ogroženega območja je definiran tudi gumb za določanje varnega območja, razlika je le v funkciji, ki jo sproži dogodek »onclick«. Funkcija se imenuje »setSafe()«.

Gumb »Show forecast animation«, »Show full forecast«: Gumba sta definirana z značko »<button>« in skrbita za prikaz ogroženega območja

Gumba naprej, nazaj: gumba sta tudi definirana z značko »<button>«, vendar pa se ob njima nahaja tudi polje za izpis podatkov o trenutno prikazanem stanju izpustov.

Slika 5 prikazuje izgled vmesnika razvite aplikacije:

Slika 5: Slika vmesnika

Drugi razdelek pa definira polje za izris mape in polje za izpis podatkov o lokaciji uhajanja plina. Definicija je razvidna iz Izsek kode 25:



V zadnjem delu značke »<body>« pa je zapisana koda JavaScript, ki skrbi za izvajanje funkcij, ki so potrebne za prikazovanje podatkov in izvajanje dogodkov, ki so zapisani v značkah gumbov. V prvem delu se nahajajo definicije spremenljivk skupaj s privzetimi vrednostmi. Uporabljene spremenljivke so prikazane v Izsek kode 26:

Zgoraj naštete spremenljivke služijo spodaj opisani uporabi:

Danger, safe: Zaznavanje, ali določamo pozicijo ogroženega ali varnega območja. Vrednost se nastavi na »true«, ob kliku na ustrezen gumb.

map: Osnoven prikaz mape, skupaj z začetno pozicijo prikaza.

osmb: Definiranje plasti, za prikaz 3D-pogleda zgradb. Definira se preko OSMSuildings vtičnika, ki poskrbi za 3D-izris.

windAngle: Spremenljivka za shranjevanje trenutnega kota smeri vetra.

windSpeed: Spremenljivka za shranjevanje vrednosti trenutne moči vetra.

temperature: Spremenljivka za shranjevanje trenutne temperature.

weatherTerms: Spremenljivka za shranjevanje kode trenutnega stabilnostnega razreda po Pasquill-u.

windForecast: Spremenljivka, ki skrbi za beleženje napovedi vremenskih sprememb za naslednjih 24 ur. Spremenljivka je tipa matrike oz. Array.

Sledi dodajanje plasti 3D-zgradb na osnovno plast prikaza mape. Dodatne plasti dodajamo na mapo z ukazom ».addTo(map)«, kjer je »map« vnaprej definirana spremenljivka, ki služi za prikaz mape. Koda, ki izvede opisano funkcijo, je prikazana v Izsek kode 27:

danger = false; safe = false; var map = L.map('map').setView([42.4270, 19.2511], 13); var osmb = new OSMBuildings(map).load(); var windAngle = 0; var windSpeed = 0; var temperature = 15; var weatherTerms = 'A'; var windForecast = [];

<div id="map"></div>

<div id="content" style="position: absolute; padding-left:

10px; padding-right: 5px; padding-top: 5px; padding-bottom:

2px; bottom: 0px!important; left: 0px; background-color:

#c1c1c1;"></div>

Izsek kode 25: Definicija polj za prikaz mape in podatkov o lokaciji

Izsek kode 26: Definiranje osnovnih spremenljivk s privzetimi vrednostmi



Ker želimo na mapi tudi vizualno prikazati pozicije ogroženega in varnega območja, moramo definirati tudi izgled in obnašanje teh točk. Zato moramo, kot je razvidno iz Izsek kode 28, definirati dve spremenljivki, ki vsebujeta nastavitve za prikaz omenjenih ikon.

Ker želimo uporabniku prikazati tudi optimalno pot od točke A do točke B, moramo uporabiti tudi funkcije, ki nam omogočajo izris optimalne poti na podlagi podanih točk. Najavo spremenljivke, ki služi za kasnejšo uporabo omenjene funkcionalnosti, lahko opazimo v Izsek kode 29:

var FireIcon = new L.icon({ iconUrl: 'icons/fire.png', shadowUrl: 'icons/fire_shdw.png', iconSize: [30, 50], shadowSize: [30, 28], iconAnchor: [15, 49], shadowAnchor: [10, 26], popupAnchor: [0, -50] }); var SafeIcon = new L.icon({ iconUrl: 'icons/safe.png', shadowUrl: 'icons/safe_shdw.png', iconSize: [30, 50], shadowSize: [30, 28], iconAnchor: [15, 49], shadowAnchor: [8, 26], popupAnchor: [0, -50] });

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.

png', {

attribution: '© <a

href="http://openstreetmap.org">OpenStreetMap</a>

contributors',

maxZoom: 18,

Buildings: osmb

}).addTo(map);

Izsek kode 27: Dodajanje 3D-plasti zgradb na mapo

Izsek kode 28: Definicija ikon za ogroženo in varno območje



Sledi nekoliko obsežnejša funkcija, ki je tudi zelo pomembna za pravilno delovanje zastavljenih funkcionalnosti prototipa. To je funkcija, ki skrbi za pravilno izvajanje dogodkov, ki se izvršijo na mapi. To so dogodki ob dodajanju lokacij ogroženega in varnega območja na mapo. Dogodek, ki se ob tem izvrši, je »onclick« na elementu »map«. Funkcija, ki se ob tem izvede, je predstavljena v dveh korakih, saj se ob enkratnem kliku na mapo zgodi le eden od njiju. Prvi del, ki je prikazan v Izsek kode 30, se izvede ob dodajanju lokacije ogroženega območja na mapo. Povzemamo, kaj se zgodi ob izvajanju funkcije:

Preverjanje ustreznosti kliknjenega gumba – spremenljivka »danger« se nastavi na »true«.

Preverjanje, če točka že obstaja na mapi: o če da: Klici funkcij removeContour(), clearContours(), pridobivanje

vremenske napovedi za dano lokacijo, nastavljanje nove lokacije markerja. Na dodani marker se pripne še okno z obvestilom, klic funkcije ».openPopup()« pa okno tudi prikaže uporabniku.

o če ne: Pridobimo podatke vremenske napovedi za dano lokacijo, nastavimo marker in ga dodamo na mapo, pripnemo in prikažemo še okno z obvestilom.

V spremenljivko »waypoints« zapišemo lokacijo A.

Spremenljivko »waypointsChanged« nastavimo na »true«, kar pomeni, da je potreben ponoven preračun poti.

V zadnjem koraku se ponastavi še gumb in spremenljivka »danger«. S tem zagotovimo prenehanje izvajanja funkcije.

var router = L.Routing.control({

plan: L.Routing.plan([], {

waypointIcon: new L.Icon({

iconUrl: 'icons/transparent.png',

iconSize: [0, 0],

iconAnchor: [0, 0]

}),

geocoder: L.Control.Geocoder.nominatim()

}),

showMarkers: false,

draggableWaypoints: true,

addWaypoints: true,

routeWhileDragging: true

}).addTo(map);

Izsek kode 29: Spremenljivka za upravljanje prikaza poti



Drugi del pa je razviden iz Izsek kode 31 in podobno kot zgornji služi prikazu markerja za varno območje. Izvajanje funkcije je nekoliko drugačno kot v zgornjem primeru, saj je varno območje nekoliko manj zahtevno za prikaz. Izvajanje funkcije poteka takole:

Preverjanje, če urejamo marker za označitev varnega območja.

Preverjanje, če omenjeni marker že obstaja: o Če da: Obstoječemu nastavimo novo lokacijo. o Če ne: Ustvarimo nov marker z določeno lokacijo.

Markerju dodamo dogodek »onmove«, ki se sproži ob premikanju markerja po mapi. Funkcija določa ponovno nastavljanje lokacije označenemu območju na mapi in tudi ponoven preračun poti od točke A do točke B.

Sledi še dodajanje oz. označevanje varnega območja na mapi, kar pomeni dodajanje kroga, ki označuje varno območje, na mapo.

V spremenljivko »waypoints« dodamo lokacijo točke B in nastavimo vrednost spremenljivke »waypointsChanged« na »true«.

Ponastavimo gumb in vrednost spremenljivke »safe« ter s tem zaključimo izvajanje funkcije.

if (danger) {

if (typeof dangerMarker !== 'undefined' && dangerMarker

!= null) {

removeContour();

clearContours();

getLocationDataForecast(e.latlng.lat, e.latlng.lng);

dangerMarker.setLatLng(e.latlng);

} else {


dangerMarker = new L.marker(e.latlng, {icon: FireIcon,

draggable: true}).addTo(map)

.bindPopup(document.getElementById('fireCaption').value)

.openPopup();

};

dangerMarker.on('move', function(e) {

SetWaypoints(true);


});

waypoints.push({latLng: e.latlng});

waypointsChanged = true;

danger = false;

document.getElementById('btnFire').className = "up";

}

Izsek kode 30: Dodajanje markerja za označitev ogroženega območja na mapo



Sledi definicija pozicije mesta Podgorice v Črni gori, ki označuje naš izhodiščni pogled na mapi. Lokacijo pa nato še nastavimo kot privzeti pogled na mapi. Koda, ki izvede opisano, je razvidna iz Izsek kode 32:

Glede na to, da smo na gumbih, s katerimi upravljamo preko uporabniškega vmesnika, nastavili dogodke, ki se sprožijo ob kliku, moramo definirati tudi funkcije, ki se izvedejo ob sprožitvi. Funkciji sta prikazani v Izsek kode 33:

function setFire(el) {

danger = true;

setState(el);

}

function setSafe(el) {

safe = true;

setState(el);

}

var podgorica = new L.LatLng(42.4270, 19.2511);

map.setView(podgorica, 13);

else if (safe) {

if (typeof safeMarker !== 'undefined' && safeMarker !=

null) {

safeMarker.setLatLng(e.latlng);

} else {

safeMarker = new L.marker(e.latlng, {icon: SafeIcon,

draggable: true}).addTo(map)

.openPopup();

}

safeMarker.on('move', function(e) {

safeZone.setLatLng(e.latlng);

SetWaypoints(true);

});

safeZone = new L.circle(e.latlng, 50, {color:

'#00ff00'}).addTo(map);

waypoints.push({latLng: e.latlng});

waypointsChanged = true;

safe = false;

document.getElementById('btnSafe').className = "up";

}

Izsek kode 31: Dodajanje markerja za označitev varnega območja na mapo

Izsek kode 32: Nastavljanje privzete lokacije na mapi

Izsek kode 33: Funkciji, ki se izvedeta ob kliku na gumb.



Glede na to, da moramo uporabniku prikazati, da je gumb pritisnjen in, da se v ozadju izvaja zahtevana funkcija, je potrebno definirati še funkcijo, ki gumbu nastavi ustrezen status oziroma v našem primeru razred, ki spremeni vizualno podobo gumba. Definicija omenjene funkcije je prikazana v Izsek kode 34:

4.2. PRIDOBIVANJE PODATKOV O VREMENSKIH RAZMERAH Za pridobivanje podatkov o vremenskih razmerah smo si izbrali ponudnika OpenWeatherMap (Slika 6), ki ponuja široko paleto možnosti za uporabo njihovih storitev. Za nas je bila zanimiva predvsem možnost uporabe njihovih API-jev, ki ponujajo brezplačno pridobivanje podatkov o vremenu za katerokoli lokacijo, na podlagi imena mesta, geolokacije, poštne številke ali identifikacijske številke mesta. Možno je pridobiti tudi podatke za več lokacij hkrati, in sicer na tri različne načine, ki so (Spletni vir 9):

mesta znotraj kvadratnega območja,

mesta znotraj krožnega območja,

večje število identifikacijskih številk mest.

Slika 6: Spletna stran ponudnika podatkov o vremenskih razmerah OpenWeatherMap

function setState(el) {

if (el.className == "dn") {

el.className = "up";

} else {

el.className = "dn";

}

}

Izsek kode 34: Nastavljanje izgleda gumba



4.2.1. PRIDOBIVANJE PODATKOV O TRENUTNIH VREMENSKIH RAZMERAH Glede na to, da želimo prikazati obseg izpostavljenega območja v primeru krizne situacije v realnem času, moramo najprej pridobiti podatke o trenutnih vremenskih razmerah. Zato se ob postavljanju točke za določitev območja uhajanja nevarnega plina oz. izpusta izvede klic API-ja, ki ga ponuja OpenWeatherMap. API vrne podatke o trenutnih vremenskih razmerah. Kako izvršimo klic si lahko ogledamo v Izsek kode 35:

Potek izvajanja kode bi lahko opisali takole:

Definiramo osnovo URL-naslova, kateremu kasneje dodamo ustrezne parametre.

Ker želimo, da se funkcija izvede vsakih nekaj sekund, uporabimo funkcijo »setTimeout« in klic izvedemo znotraj te funkcije.

Osnovnemu URL-ju dodamo ustrezne podatke o lokaciji, za katero želimo pridobiti podatke o vremenu. Ker smo se odločili za uporabo metode, ki zahteva pridobitev podatkov zemljepisne dolžine in širine, moramo k URL- naslovu podati podatke »lat« (zemljepisna širina, ang. latitude) in »lon« (zemljepisna dolžina, ang. longitude), določimo pa tudi podatek »units«

var owmSite =

http://api.openweathermap.org/data/2.5/weather?';

var time2 = 0;

setTimeout(function() {

var owmLoc = owmSite + 'lat=' + podgorica.lat + '&lon=' +

podgorica.lng + '&units=metric&callback=?';

document.getElementById('windForecast').innerHTML += '';

$.getJSON(owmLoc, function(data){

$("#content").append('<p>Podgorica | Wind direction: '

+ data.wind.deg +

'°, Wind speed: ' +

data.wind.speed +

' meter/sec, Temperature: ' +

data.main.temp +

'°C, Weather: ' +

data.weather[0].main +

'</p>'

);

windAngle = data.wind.deg;

windSpeed = data.wind.speed;

temperature = data.main.temp;

weatherTerms = data.weather[0].main;

time2 = 30000;

})

}, 1*time2);

Izsek kode 35: Pridobivanje podatkov o vremenskih razmerah



(enote), ki ga v našem primeru nastavimo na »metric«, ki se uporablja za države Evrope. Zaradi potreb nadaljnje obdelave podatkov pa moramo določiti še podatek »callback«, ki pa mu določimo le znak »?«, saj nimamo določene funkcije, ki bi se morala izvesti ob zaključku klica.

Nato izvedemo klic na prej določen URL.

Ko se klic izvede, pa začnemo obdelavo podatkov. Podatki, ki nam jih API vrne, so kodirani v obliki JSON, kar nam omogoča dokaj lahek priklic želenih podatkov. Za branje podatkov se sprehajamo po hierarhiji podatkov na način, da navedemo nadrejen element, dodamo piko (».«) in nato ime podrejenega elementa. Na tak način nadaljujemo, dokler ne pridobimo vrednosti želenega podrejenega elementa (primer: »data.wind.speed«, ki ga uporabimo za pridobivanje podatka o hitrosti vetra).

Pridobljene podatke, skupaj s spremljevalnim besedilom, zapišemo v za to namenjen HTML-element z identifikatorjem »#content«.

Ker pa za nadaljnjo uporabo potrebujemo podatke zapisane tudi v spremenljivkah, nastavimo tudi te. Na koncu še povečamo čas izvajanja osveževanja podatkov iz 0 na 30 sekund, saj pogostejše osvežitve niso smiselne.

Primer odgovora, ki ga prejmemo po klicu API-ja, si lahko ogledamo v Izsek kode 36 (Spletni vir 9):

Pri klicu spletnega API-ja je mogoče določiti tip odgovora. To storimo tako, da k URL-ju dodamo podatek »mode« in mu nastavimo eno od vrednosti: JSON, XML ali HTML. Privzet in največkrat uporabljen tip je JSON. Spodaj dodajamo še opis parametrov, ki nam jih API vrne v odgovoru:

coord o coord.lon Zeljepisna dolžina kraja o coord.lat Zemljepisna širina kraja

{"coord":

{"lon":145.77,"lat":-16.92},

"weather":[{"id":803,"main":"Clouds","description":"broken

clouds","icon":"04n"}],

"base":"cmc stations",

"main":{"temp":293.25,"pressure":1019,"humidity":83,"temp_m

in":289.82,"temp_max":295.37},

"wind":{"speed":5.1,"deg":150},

"clouds":{"all":75},

"rain":{"3h":3},

"dt":1435658272,

"sys":{"type":1,"id":8166,"message":0.0166,"country":"AU","

sunrise":1435610796,"sunset":1435650870},

"id":2172797,

"name":"Cairns",

"cod":200}

Izsek kode 36: API-odgovor, kodiran v formatu JSON



weather o weather.id Identifikator vremenskih razmer o weather.main Skupina vremenskih podatkov (dež, sneg itd.) o weather.description Vremenske razmere znotraj skupine o weather.icon Identifikator ikone

base Interni podatek

main o main.temp Temperatura. Privzeta enota: Kelvin, Metrično: Celzije,

Imperialno: Fahrenheit o main.pressure Zračni tlak (na nadmorski višini), enota: hPa o main.humidity Vlažnost zraka, v procentih (%) o main.temp_min Najnižja trenutna temperatura. Privzeta enota:

Kelvin, Metrično: Celzija, Imperialno: Fahrenheit o main.temp_max Najvišja trenutna temperatura. Privzeta enota:

Kelvin, Metrično: Celzija, Imperialno: Fahrenheit o main.sea_level Zračni tlak na nadmorski višini, hPa o main.grnd_level Zračni tlak na ravni tal, hPa

wind o wind.speed Hitrost vetra. Privzeta enota: meter/sec, Metrično:

meter/sec, Imperialno: milje/uro o wind.deg Smer vetra, v stopinjah (°) (meteorološko)

clouds o clouds.all Oblačnost, v procentih (%)

rain o rain.3h Količina dežja v zadnjih 3 urah

snow o snow.3h Količina snega v zadnjih 3 urah

dt Čas izračuna podatkov

sys o sys.type Interni podatek o sys.id Interni podatek o sys.message Interni podatek o sys.country Oznaka države o sys.sunrise Čas sončnega vzhoda o sys.sunset Čas sončnega zahoda

id Identifikator kraja

name Ime kraja

cod Interni podatek Omenjeni API omogoča iskanje podatkov o vremenu v več kot 200.000 krajih po vsem svetu in črpa podatke iz več kot 40.000 vremenskih postaj. V poglavju Validacije podatkov bomo predstavili tudi teste zanesljivosti podatkov ponudnika in ustreznost teh za uporabo v dotičnem sistemu.



4.2.2. PRIDOBIVANJE PODATKOV O VREMENSKI NAPOVEDI Ker je namen naše aplikacije pomoč pri reševanju nevarne situacije ob uhajanju plina, za predvidevanje sprememb situacije potrebujemo dodatne podatke o napovedi spremembe vremenskih razmer. Zato se tako kot podatki o trenutnih vremenskih razmerah tudi podatki za napoved sprememb prenesejo ob določitvi ogrožene točke. Za pridobivanje podatkov za napoved gibanja ogrožene cone smo uporabili drugo API-povezavo istega ponudnika OpenWeatherMaps. Povezava nam ponuja prenos podatkov za napoved vremenskih sprememb v naslednjih petih dneh. Napoved predvideva spremembe vsake 3 ure. Ker je smiselno uporabiti le napoved za krajši čas, iz pridobljenih podatkov izluščimo le napoved za nadaljnjih 24 ur. Omenjeni API-klic nam omogoča priklic podatkov na podlagi imena kraja, identifikacijske številke kraja ali geolokacije kraja (Spletni vir 10). Izsek kode 37 nam prikazuje kodo za pridobivanje in obdelavo podatkov za napoved sprememb. Ker želimo najprej prikazati podatke o trenutnem stanju in ogrožanju območja, moramo najprej pridobiti trenutne podatke, zato najprej izvedemo klic zgoraj opisanega API-ja, vendar pa tukaj izvedemo nekoliko drugačno obdelavo podatkov. Klic in obdelava podatkov potekata znotraj funkcije »getLocationDataForecast«. Obdelava poteka na način, da najprej nastavimo nekaj osnovnih spremenljivk, ki se kasneje uporabijo za prikaz podatkov in izris trenutnega ogroženega območja. Nato v matriko, ki se uporablja za izris predvidevanja sprememb, dodamo podatke o smeri vetra, hitrosti vetra, trenutni temperaturi, trenutnem vremenskem stanju, na koncu pa dodamo še datum in uro, ki se kasneje uporabita za prikaz podatkov o trenutnem prikazu na mapi. Ker zaradi izravnave prikaza kota za smer vetra pridobljenemu podatku dodamo 90 stopinj, moramo izvesti še preverjanje, ali vrednost presega 360 stopinj, kar predstavlja krog. Zadnje dejanje pri tem delu funkcije je klic funkcije »doContour«, ki prikaže ustrezno trenutno stanje tudi na zemljevidu.



Drugi del funkcije služi pridobivanju podatkov o napovedi vremenskih sprememb za naslednjih 24 ur in pripravi podatkov za izris predvidevanj gibanja ogroženega območja glede na pridobljene podatke. Klic in obdelavo podatkov si lahko ogledamo v Izsek kode 38. Obdelava podatkov se začne s pridobivanjem podatkov iz naslova

»http://api.openweathermap.org/data/2.5/forecast?«, ki mu dodamo še parametre, na podlagi katerih nato pridobimo ustrezne podatke. Pri obdelavi podatkov se pomikamo po seznamu in ustrezne podatke zapišemo v matriko, ki jo kasneje uporabimo za generiranje prikaza sprememb pozicije in ogroženosti izpostavljenega območja.

Ob zaključevanju izvajanja funkcije kličemo še funkcijo »saveWindForecast«, ki

pripravi podatke za pregled gibanja in sprememb v izpostavljenem območju.

function getLocationDataForecast(lat, lng) {

…

windAngle = data.wind.deg;

//$(this).find('wind_dir').text();

windSpeed = data.wind.speed;

//$(this).find('wind_speed').text();

temperature = data.main.temp;

weatherTerms = data.weather[0].main;

windForecast = [];

windForecast[0] = [];

windForecast[0][0] = data.wind.deg; // WIND degrees

windForecast[0][1] = data.wind.speed; // WIND speed

windForecast[0][2] = data.main.temp; // temperature

windForecast[0][3] = data.weather[0].main; // weather

date = new Date(data.dt * 1000);

windForecast[0][4] = ('0' + date.getDate()).slice(-2) +

'.' + ('0' + (date.getMonth() + 1)).slice(-2) + '.' +

date.getFullYear(); // date

windForecast[0][5] = ('0' + date.getHours()).slice(-2)

+ ':' + ('0' + date.getMinutes()).slice(-2); // time

var windAngle1 = 0;

if (windAngle + 90 > 360){

windAngle1 = 90 - (360 - windAngle)

} else {

windAngle1 = windAngle;

}

if (typeof windAngle == 'undefined') { windAngle = 0; }

doContour(dangerMarker._latlng.lat,

dangerMarker._latlng.lng, windAngle, windSpeed, false,

temperature, 'A');

})

…

}

Izsek kode 37: Obdelava podatkov za prikaz trenutnega stanja



Podatki, ki jih pridobimo s strani spletnega API-ja, vsebujejo naslednja polja s podatki (Spletni vir 10):

code Interni podatek

message Interni podatek

city o city.id Identifikator kraja o city.name Ime kraja o city.coord

city.coord.lat Zemljepisna širina kraja city.coord.lon Zemljepisna dolžina kraja

o city.country Oznaka države

cnt Število vrnjenih vrstic v tem API-klicu

list o list.dt Čas izračuna podatkov o list.main

list.main.temp Temperatura. Privzeta enota: Kelvin, Metrično: Celzije, Imperialno: Fahrenheit.

list.main.temp_min Najnižja trenutna temperatura. Privzeta enota: Kelvin, Metrično: Celzija, Imperialno: Fahrenheit.

list.main.temp_max Najvišja trenutna temperatura. Privzeta enota: Kelvin, Metrično: Celzija, Imperialno: Fahrenheit.

list.main.pressure Zračni tlak (na nadmorski višini), enota: hPa

list.main.sea_level Zračni tlak na nadmorski višini, hPa list.main.grnd_level Zračni tlak na ravni tal, hPa list.main.humidity Vlažnost zraka v procentih (%) list.main.temp_kf Interni podatek

o list.weather (več podatkov o vremenu) list.weather.id Identifikator vremenskih razmer list.weather.main Skupina vremenskih podatkov (dež, sneg

itd.) list.weather.description Vremenske razmere znotraj skupine list.weather.icon Identifikator ikone

o list.clouds list.clouds.all Oblačnost, v procentih (%)

o list.wind list.wind.speed Hitrost vetra. Privzeta enota: meter/sec,

Metrično: meter/sec, Imperialno: milje/uro. list.wind.deg Smer vetra, v stopinjah (°) (meteorološko)

o list.rain list.rain.3h Količina dežja v zadnjih 3 urah

o list.snow list.snow.3h Količina snega v zadnjih 3 urah

o list.dt_txt Datum in čas preračuna podatkov



4.3. MOŽNOSTI PRIKAZA PODATKOV NA MAPI Ker je za načrtovanje reševalne akcije zelo pomembno, da pridobimo čim več podatkov, smo v aplikaciji predvideli 3 dodatne funkcije, ki nam omogočajo različne prikaze sprememb, ki naj bi se dogajale v roku 24 ur. Prva možnost prikaza omogoča samodejni prikaz vseh sprememb izpostavljenega območja. Koda, ki poganja samodejni prikaz, je zapisana v Izsek kode 39:

Zgornja funkcija se po zagonu zažene vsake 3 sekunde in med tem izvede izbris

prikaza trenutnega koraka s klicem funkcije »removeContour()« in prikaže

naslednji korak s klicem funkcije »nextWindForecast()«.

Izsek kode 40 prikazuje funkcijo za izbris trenutno prikazanega koraka:

Zgoraj prikazana funkcija izvaja dve zanki, eno znotraj druge, in s tem brska po podatkih, ki so pripravljeni za prikaz slike na mapi. S tem si zagotovimo, da so vsi podatki, ki so bili prej dodani na mapo, sedaj odstranjeni iz nje. Drugo funkcijo, ki pa zagotavlja prikaz korakov na mapi, pa prikazuje Izsek kode 41. Funkcija ob svojem delovanju v prvem delu skrbi za prikaz podatkov o vremenskih razmerah trenutno prikazanega koraka in s klicem funkcije »showMultiContour()«, ki za pravilno delovanje zahteva podatek o številki želenega koraka, zagotovi prikaz le-tega.

function removeContour() {

for (var value=0; value<contourPolys.length; value++) {

for (var i=0; i<contourPolys[value].length; i++) {

map.removeLayer(contourPolys[value][i]);

}

}

contourPolys = [];

}

var timer;

function showForecast() {

document.getElementById('btnForecast').className =

"dn";

removeContour();

i = 0;

nextWindForecast();

timer = setInterval(function() { nextWindForecast() },

3000);

}

Izsek kode 39: Koda, ki izvrši samodejni prikaz napovedi sprememb.

Izsek kode 40: Funkcija za izbris prikaza trenutnega koraka



V drugem delu funkcija izvede preverjanje, če smo prikazali zadnji korak prikaza, in v tem primeru prikaže prvo pozicijo, torej trenutne razmere na ogroženem območju skupaj z ustreznimi podatki, ki se izpišejo na desni strani, v orodni vrstici. Koda funkcije »showMultiContour()«, ki izvede izris ogroženega območja pa je prikazana v izseku kode 42:

Druga možnost predvideva prikaz vseh korakov sprememb naenkrat, kar pomeni prikaz gibanja ogroženega območja v naslednjih 24 urah. Za ta prikaz se uporablja funkcija »fullForecast()«. Prikaz kode omenjene metode si lahko ogledamo v Izsek kode 43:

Zgoraj opisana metoda med svojim delovanjem za izris vsakega koraka posebej pokliče funkcijo »showFullMultiContour()«, ki kot parameter zahteva zaporedno številko trenutnega koraka in na podlagi tega podatka izriše ustrezno prizadeto območje. Metoda se izvaja na podoben način kot metoda za samodejni izris korakov, vendar ta metoda med izvajanjem ne briše predhodnih korakov. Koda funkcije je razvidna iz Izsek kode 44.

function fullForecast() { removeContour(); for (i=0; i<10; i++) { showFullMultiContour(i); } }

function showMultiContour(value) {

if (!(value >= contourPolysMulti.length) &&

contourPolysMulti.length != 0) {

var j = 0;

removeContour();

contourPolys[contourPolys.length] = [];

for (var i=0; i < contourPolysMulti[value].length;

i++) {

contourPolys[contourPolys.length-1][j] =

contourPolysMulti[value][i].addTo(map);

j++;

}

}

}

Izsek kode 42: Koda, ki poskrbi za izris koraka na mapi.

Izsek kode 43: Koda, ki izvrši prikaz vseh korakov za naslednjih 24 ur.



Za ponastavitev mape uporabljamo prilagojeno funkcijo »removeFullContour()«, ki izbriše vse korake naenkrat ( Izsek kode 45).

Tretja možnost pa za prikaz korakov predvideva ročno spreminjanje koraka. Za to sta namenjena dva gumba, ki delujeta po principu »naprej/nazaj«. Zato smo definirali dve funkciji, in sicer »nextForecast()«, ki se izvede ob kliku na gumb naprej [>], ter funkcijo »prevForecast()«, ki pa se izvede ob kliku na gumb nazaj [<]. Obe funkciji delujeta po istem principu, razlika je le v tem, da ena povečuje trenutno število koraka, druga pa to število zmanjšuje. Primer funkcije, ki se izvede na gumbu nazaj [<], je prikazan v Izsek kode 46:

function removeFullContour() {

for (var value=0; value < contourPolysMulti.length; i++)

{


i++) {

map.removeLayer(contourPolysMulti[value][i]);

}

}

contourPolys = [];

}

function showFullMultiContour(value) {

if (!(value >= contourPolysMulti.length) &&

contourPolysMulti.length != 0) {

var j = 0;

contourPolys[contourPolys.length] = [];


i++) {

contourPolys[contourPolys.length-1][j] =

contourPolysMulti[value][i].addTo(map);

j++;

}

}

}

Izsek kode 44: Funkcija za izris vseh korakov naenkrat

Izsek kode 45: Izbris korakov za prikaz 24-urne napovedi



Funkcija med delovanjem preverja trenutni korak in se v primeru prikaza zadnjega koraka vrne na prvega. Za izris koraka uporablja funkcijo »showMultiContour()«, ki je prikazana v Izsek kode 42. Pred zaključkom izvajanja pa zapiše še podatke o vremenskih razmerah ob času prikazanega koraka v desni stolpec.

function prevForecast() {

currentForecast--;

if (currentForecast < 0) {

currentForecast = 9;

removeContour();

}

showMultiContour(currentForecast);


windForecast[currentForecast][4].toString() + ' ' +

windForecast[currentForecast][5].toString();


'Wind direction: <b>' +

windForecast[currentForecast][0].toString() + '°</b>';


speed: <b>' + windForecast[currentForecast][1].toString() +

' meters/sec</b>';


'Temperature: <b>' +

windForecast[currentForecast][2].toString() + '°C</b>';


'Weather: <b>' +

windForecast[currentForecast][3].toString() + '</b>';

}

Izsek kode 46: Prikaz sprememb po korakih



5. OPIS FUNKCIONALNOSTI PROGRAMSKE REŠITVE Namen aplikacije je olajšanje dela tistim, ki skrbijo za načrtovanje reševalnih akcij v primeru naravnih nesreč, ter hkratna uporaba najnovejših tehnologij, ki jih ponuja svetovni splet (v našem primeru predvsem dostopnost podatkov o stanju vremena ter vremenske napovedi). Sama aplikacija je zasnovana na način, da na podlagi pridobljenih podatkov o vremenskih razmerah izriše območje, ki je zaradi nesreče najbolj prizadeto. Prototip je razvit do te mere, da omogoča izris prizadetega območja za primer uhajanja plina klora. Reakcijski čas je pri načrtovanju reševalnih akcij ključnega pomena, zato smo poskušali pripraviti kar najbolj prilagodljivo aplikacijo, ki tudi ni prezahtevna. Pri razvoju prototipa smo upoštevali, da aplikacija ne sme porabiti preveč sistemskih virov in mora biti čim bolj prilagodljiva za uporabo na računalnikih. Zato nam je uspelo izdelati spletno rešitev, ki omogoča delovanje na katerikoli napravi, ki ima dostop do svetovnega spleta. Pomembno je tudi, da aplikacija za svoje delovanje ne potrebuje nikakršne dodatne namestitve komponent na računalnik. Podpira delovanje v več različnih brskalnikih, na mobilnih napravah, kot so mobiteli, tablice in prenosni računalniki, kot tudi na klasičnih računalnikih in strežnikih. Vse, kar je potrebno za delovanje, je povezava v svetovni splet. Razvita aplikacija je bila testirana na brskalnikih Internet Explorer (verziji 10 in 11), Microsoft Edge, Google Chrome, Opera in Mozilla Firefox. Testiranje je bilo izvedeno na napravah:

- Namizni računalnik (specifikacije: Intel i7-procesor, 16Gb RAM, AMD Radeon R9 280x grafična kartica)

- Prenosni računalnik HP Envy TouchSmart 15 (specifikacije: Intel i7- procesor, 16Gb RAM, NVIDIA GeForce GT 750M grafična kartica)

- Prenosni računalnik HP Compaq 8710p (specifikacije: Intel Core2Duo procesor, 2Gb RAM, Nvidia Quatro grafična kartica)

- Prenosni hibridni računalnik HP Envy x2 (Specifikacije: Intel atom procesor, 2Gb RAM, integrirana grafična kartica)

- Mobilni telefon Nokia Lumia 925 - Mobilni telefon Nokia Lumia 635 - Mobilni telefon Google Nexus 5

Seveda je hitrost delovanja odvisna od same zmogljivosti naprave, na kateri jo uporabljamo, vendar je aplikacija tudi na telefonih dovolj odzivna za hiter pregled situacije. Uporabniški vmesnik aplikacije, ki smo jo pripravili, je razdeljen na dva dela. Na levi strani se nahaja mapa za prikaz ključnih rešitev, na desni strani pa se nahaja polje z orodji za urejanje prikaza prizadetega območja.



Slika 7: Uporabniški vmesnik aplikacije Uporabniški vmesnik aplikacije nam prikazuje Slika 7. Kot je razvidno iz slike, je aplikacija sestavljena iz dveh ključnih gumbov, ki sta pomembna za prikaz ogrožene cone in evakuacijske poti iz ogroženega območja do varne točke.

Slika 8: Gumb za nastavljanje točke izbruha nevarnih plinov

Prvi gumb »Set danger point!« (Slika 8) je namenjen določitvi natančne pozicije točke, kjer se nahaja izbruh nevarnega plina. Točka, ki jo določimo, služi tudi kot izhodiščna točka za začetek navigacije do varne točke. Ob postavitvi točke se samodejno sproži pridobivanje vremenskih podatkov s strežnikov ponudnika OpenWeatherMaps, ki služijo za izračun ogroženega območja. Na podlagi podatkov za trenutne razmere na tej točki se izriše tudi trenutna ogroženost področja.



Slika 9: Izris ogroženega območja ob določitvi točke uhajanja nevarnega plina Slika 9 prikazuje prvi izris ogroženega območja, kar omogoča lažje odločanje pri načrtovanju postavitve varne cone. Podatki, na podlagi katerih je bil izveden izris nevarnega območja:

Kraj: Podgorica, Črna gora

Smer vetra: 220°

Moč vetra: 4,6 metra/sec

Temperatura: 33,92°C

Vremenske razmere: oblačno Prikazano je izračun pri predvidevanju, da je plin, ki uhaja, klor in je izhodna hitrost plina enaka 1, ter velikost izhodne odprtine enaka 1 enoti, pri stopnji emisij 100 g/s.

Slika 10: Gumb za nastavljanje področja varne cone Drugi gumb »Set safe point!« (Slika 10) se uporabi za nastavitev področja, ki velja za varno območje in kamor se je mogoče evakuirati v primeru takšne nesreče. Ob



nastavitvi točke se samodejno zažene preračun in izris najkrajše poti iz ogroženega področja do varne cone.

Slika 11: Izris poti od prizadetega območja do varne točke Na Slika 11 vidimo primer izrisa evakuacijske poti iz nevarne točke do varne cone. Za izračun in izris poti skrbi Liedman-ov vtičnik Leaflet Routing Machine, ki je izredno prilagodljiv in enostaven za uporabo. Za uporabo njegovih funkcij moramo na strani dodati reference do datotek, ki omogočajo izris. To so (Spletni vir 11):

http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css

leaflet-routing-machine.css

http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js

leaflet-routing-machine.js

Za osnovno uporabo pa v JavaScript kodi vključimo kodo, prikazano na Izsek kode

46, kjer podatka »L.latLng« zamenjamo z želenimi točkami, predvidenimi za navigacijo. V primeru, če želimo določiti vmesno točko, le med prikazani dve

dodamo še eno postavko z imenom »L.latLng«.

Izsek kode 47: Koda za uporabo preračuna in prikaza najkrajše poti iz točke a do točke B Ker pa po večini primerov reševalne akcije, predvsem pri uhajanju plina, trajajo dalj časa, smo uporabniku omogočili prikaz gibanja ogroženega področja v naslednjih 24-ih urah.

L.Routing.control({

waypoints: [

L.latLng(57.74, 11.94),

L.latLng(57.6792, 11.949)

]

}).addTo(map);

http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css



Slika 12: Gumb za prikaz gibanja nevarnega plina v naslednjih 24 urah Gumb na sliki 12 omogoča prikaz ogroženosti območja za naslednjih 24 ur na podlagi podatkov, ki jih dobimo s klicem spletnega API-ja, ponudnika OpenWeatherMaps. Animacija prikazuje korake v razmaku 3 ur, pogled pa se spremeni vsake 3 sekunde. Animacija se izvede samo enkrat in jo lahko kadarkoli znova poženemo. Ob prikazu podatkov se na desni strani prikazujejo tudi datum in čas ter podatki o trenutno izrisanem koraku. Med animacijo je trenutna situacija ves čas vidna. Na podlagi prikazanega se načrtovalec lažje odloči, kam postaviti evakuacijsko točko. Primer prikaza je viden na Slika 13:

Slika 13: Prikaz koraka animacije za naslednjih 24 ur Naslednji, četrti gumb, omogoča prikaz vseh korakov, ki jih prikaže tudi animacija, le da ta funkcija prikaže vse korake naenkrat. Pri tem koraku je najbolje vidno prosto območje, preko katerega bi bila evakuacija najbolj varna, zato lahko točko evakuacije prilagodimo napovedanim razmeram. Gumb je prikazan na Slika 14.

Slika 14: Gumb za prikaz razmer v nasledjih 24 urah



Zgoraj prikazani gumb izvede funkcijo, ki prikaže vse korake v naslednjih 24 urah. Kot je razvidno iz slike 14, je na ta način izvedena simulacija gibanja disperzije, kar je pomembno pri načrtovanju reševalne akcije:

Slika 15: Prikaz vseh korakov v naslednjih 24 urah Na Slika 15 je rdeče označena najkrajša pot evakuacije glede na simulacijo dispezrije v naslednjih 24 urah. Na dnu orodne vrstice se nahajata gumba »[<]« in »[>]«, ki omogočata ročno spreminjanje prikazanega koraka za 3 ure nazaj oziroma 3 ure naprej. Funkcija deluje podobno kot animacija, ki prikazuje gibanje nevarnosti, le da gre v tem primeru za ročno prilagajanje. Gumba sta skupaj s primerom izpisa podatkov o prikazanem koraku vidna na Slika 16:



Slika 16: Ročna izbira prikazanega koraka v naslednji 24 urah

Tudi prikaz je praktično enak tistemu, ki se izvede pri animaciji korakov ( Slika 17).

Slika 17: Rezultat prikaza določenega koraka



6. VALIDACIJA PROGRAMSKE REŠITVE Izdelana aplikacija je le prototip rešitve, ki smo si jo zastavili. Ne glede na to smo izvedli tudi validacijo ustreznosti simulacijskih rezultatov. Validacijo smo izvedli v treh korakih. Prvič smo preverili situacijo ob 9.00, si zapisali vremensko napoved za naslednja koraka (12.00 in 15.00), nato preverili podatke ob 12.00 in si zapisali podatke za naslednji korak ob 15.00. Nato smo znova preverili ujemanje napovedi s trenutnimi podatki. Na tak način smo prišli do ugotovitve, ali simulacija, izvedena na podlagi vremenskih podatkov, pridobljenih s spleta, ustreza dejanskemu stanju in kakšna je zanesljivost podatkov. Kot lahko razberemo iz tabel na straneh 50 in 51, je odstopanje vremenskih razmer v primerjavi z napovedjo dokaj majhna. Ob primerjavi podatkov z dne 15. 8. 2015 lahko vidimo, da se vremenska napoved za 12. uro le malenkost razlikuje od dejanskih razmer ob tej uri, ki so razvidne iz Tabela 3. Napoved za 15. uro, pa se spremeni ob 12. uri in v primerjavi s podatki ob 15. uri, tudi ni opaziti večjega odstopanja. Podatke za 16. 8. 2015 lahko vidimo na strani 52. Izsledki kažejo na to, da je bilo vreme nekoliko bolj nestanovitno, saj je predvsem ob 12. uri prišlo do nekoliko večjih razhajanj, saj je napovedana temperatura kar za slabih 6 stopinj nižja kot dejanska. Razlikujejo pa se tudi podatki o moči in smeri vetra, prav tako pa vreme ni bilo deževno, kot je bilo napovedano. Glede na to, da je prišlo do spremembe hitrosti in smeri vetra, lahko predvidevamo, da je napovedana nevihta obšla območje Podgorice in se zato podatki tudi razlikujejo. Podobna situacija pa je sledila tudi ob 15. uri, vendar so tukaj odstopanja nekoliko manjša. Do večjega odstopanja je prišlo le pri smeri vetra, ker je namesto jugovzhodnik, pihal severozahodnik. Tabela 3 prikazuje podatke o vremenskih razmerah ob 9. uri, 12. uri in 15. uri na dan 15. 8. 2015. Tabela 4 prikazuje vremensko napoved za 12. in 15. uro, na dan 15. 8. 2015 ob 9. uri.. Tabela 5 prikazuje vremensko napoved za 15. uro, na dan 15. 8. 2015 ob 12. uri. Tabela 6 prikazuje podatke o vremenskih razmerah ob 9. uri, 12. uri in 15. uri na dan 16. 8. 2015. Tabela 7 prikazuje vremensko napoved za 12. in 15. uro, na dan 16. 8. 2015 ob 9. uri.. Tabela 8 prikazuje vremensko napoved za 15. uro, na dan 16. 8. 2015 ob 12. uri.



Podgorica, 15. 8. 2015 9.00 12.00 15.00

Temperatura 26,36 °C 36,01 °C 31,71 °C

Hitrost vetra 2,6 m/s 1,21 m/s 1,02 m/s

Smer vetra 360° 213° 211,5°

Vremenske razmere Oblačno Oblačno Dež

Tabela 3: Validacija podatkov o vremenskih razmerah

Tabela 4: Podatki o napovedi z dne 15. 8. 2015 ob 9. uri


Podgorica, 15. 8. 2015 ob 9. uri

Napoved 12.00 Napoved 15.00

Temperatura 36,09 °C 30,5 °C

Hitrost vetra 1,20 m/s 1,02 m/s

Smer vetra 213° 210,5°

Vremenske razmere Oblačno Oblačno


Napoved 15.00

Temperatura 31,5 °C

Hitrost vetra 1,00 m/s

Smer vetra 211,0°

Vremenske razmere Dež



Podgorica, 16. 8. 2015 9.00 12.00 15.00

Temperatura 24,45 °C 30,50 °C 24,45 °C

Hitrost vetra 1,5 m/s 2,6 m/s 1,5 m/s

Smer vetra 350° 140° 350°

Vremenske razmere Oblačno Oblačno Oblačno

Tabela 6: Dejanski podatki za dan 16. 8. 2015




Napoved 12.00 Napoved 15.00

Temperatura 24,88 °C 21,23 °C

Hitrost vetra 1,16 m/s 1,17 m/s

Smer vetra 171° 161,5°

Vremenske razmere Dež Oblačno


Napoved 15.00

Temperatura 28,55 °C

Hitrost vetra 1,17 m/s

Smer vetra 161,5°

Vremenske razmere Dež



7. ZAKLJUČEK

7.1. OCENA UČINKOV Menimo, da bi bila razvita rešitev primerna za pomoč pri odločanju v primeru kriznih situacij in bi pripomogla k hitrejšemu in bolj natančnemu odločanju v primeru takšnih situacij. Rešitev smo uspešno implementirali na najsodobnejši tehnologiji, ki jo je zaradi načina razvoja s programskim jezikom JavaScript mogoče uporabljati na širokem spektru naprav različnih velikosti. Razvita rešitev bi bila za reševalne ekipe mogoča tudi na terenu in celo na sami lokaciji. Za uporabo aplikacije je potrebna le elektronska naprava, ki omogoča povezavo v svetovni splet. S tem smo dosegli široko uporabnost rešitve ter omogočili, da je s predhodno pridobitvijo podatkov o vremenskih razmerah aplikacijo mogoče uporabljati tudi lokalno, torej brez internetne povezave. Potrdimo lahko, da smo uspeli realizirati zastavljene cilje, ki so bili prikaz in simulacija sprememb, glede na spremembe vremenskih razmer, in uspešna realizacija prototipa rešitve, ki bi bila v primeru nadaljnjega razvoja in nekaj dodatnih možnostih lahko primerna za uporabo v takšnih situacijah.

7.2. MOŽNOSTI NADALJNEGA RAZVOJA Predstavljena rešitev je zgolj prototip, s katerim smo dokazali, da bi se z nadaljnjim razvojem rešitev lahko uporabilo tudi v praksi. Nadaljnji razvoj bi bil mogoč na več področjih, in sicer bi bila možna še dodelava na področju izračuna najkrajše poti, kjer bi omogočili iskanje, najprej najkrajše poti izven ogroženega območja in nato najkrajše poti do varne točke. Nadgradnja bi bila mogoča tudi na strani vremenskih podatkov, kjer bi za večjo natančnost lahko pridobili podatke iz lokalnih naprav, ki bi zamenjali podatke, ki jih zdaj pridobimo iz spletne strani OpenWeatherMap. Ker pa živimo v času, ko so vse bolj popularne brezpilotne naprave, bi bilo zanimivo uporabiti tudi senzorje, ki bi jih lahko pritrdili na takšne naprave in z njimi izmerili dodatne parametre o moči izpustov oziroma o kontaminaciji območja, kjer se je nesreča zgodila. Možna bi bila tudi nadgradnja, ki bi omogočala predvidevanja več evakuacijskih poti, glede na obseg ogroženega območja in gostoto prebivalstva, kot tudi najkrajše poti od reševalnih središč do kraja nesreče in obratno. S tem bi še povečali učinkovitost reševalnih akcij in olajšali del naloge tistemu, ki je za reševanje odgovoren.



LITERATURA IN VIRI

Amicis, R. D., Conti, G., Prandi, F., Piffer, S., Magliocchetti, D., Debiasi, A., Taglioni, D., Škraba, A., Stojanović, R. (2013). Effective Surveillance for Homeland Security: Balancing Technology and Social Issues, CRC Press, Boca Raton.

Baumann-Stanzer, K., Stenzel, S. (2011). Uncertainties in modeling hazardous gas releases for emergency response, Meteorologische Zeitschrift, Vol. 20, No. 1, strani 19-27.

Chitumalla, P. K., Harris, D., Thuraisingham, B., Khan, L. (2008). Emergency Response Applications: Dynamic Plume Modeling and Real-Time Routing, IEEE Internet Computing, 1089-7801/08, strani 38-44.

Coremans, C. (2015). HTML: A Beginner's Tutorial, Brainy Software, Quebec.

Elliot, E. (2014). Programming JavaScript Applications: Robust Web Architecture with Node, HTML5, and Modern JS Libraries, O'Reilly Media, Sebastopol.

Haverbeke, M. (2015). Eloquent JavaScript, Second Edition, No Starch Press, San Francisco.

Kljajić M., Bernik I., Škraba A. (2000) Simulation approach to decision assessment in enterprises. Simulation 75(4), strani 199-210.

Stojanović, R., Škraba, A., Berkowicz, S., Amicis, R. D., Elhanani, D., Conti, G., & Nikolić, G. (2012). Gepsus: simulation-based decision making system for air pollution accidents. Organizacija, 45(5), strani 200-210.

Stojanović, R., Škraba, A, Amicis, R. D., Conti, G., Elhanani, D., Berkowicz, S. M. (2011). Integration of system simulation and geographical information processing for the air-pollution emergency situations control and decision making. Advances in simulation-based decision support, Volume II, strani 31-35.

Stojanović, R., Škraba, A., Amicis, R., Conti, G., Elhanani, D., Berkowicz, S. (2014). Integration if System Simulation and Geographical Information Processing fort he Air-Pollution Emergency Situations Control and Decision Making.

Škraba A., Kljajić M., Leskovar R. (2003) Group exploration of system dynamics models - is there a place for a feedback loop in the decision process?. System Dynamics Review., 2003, Vol. 19, No. 3, str. 243-263.

Tiwary A., Colls (2010) Air Pollution – Measurement, modelling and mitigation. Routledge, London.

Turner, D.B. (1970) Workbook of atmospheric dispersion estimates. Environmental Protection Agency, Environmental Health Series, Air Pollution. U.S. Government Printing Office, Washington.



SPLETNI VIRI

Spletni vir 1: http://www.esri.com/what-is-gis (18. 7. 2015)

Spletni vir 2: http://www.in.gov/gis/gis101.htm (18. 7. 2015)

Spletni vir 3: https://jquery.com/ (19. 7. 2015)

Spletni vir 4: http://www.tutorialspoint.com/ajax/what_is_ajax.htm (19. 7. 2015)

Spletni vir 5: http://javascriptissexy.com/javascript-variable-scope-and-hoisting-explained/ (19. 7. 2015)

Spletni vir 6: http://www.quirksmode.org/js/function.html (20. 7. 2015)

Spletni vir 7: http://www.phpied.com/3-ways-to-define-a-javascript-class/ (20. 7. 2015)

Spletni vir 8: http://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/ (25. 7. 2015)

Spletni vir 9: http://openweathermap.org/current (26. 7. 2015)

Spletni vir 10: http://openweathermap.org/forecast5 (26. 7. 2015)

Spletni vir 11: http://www.liedman.net/leaflet-routing-machine/ (28. 7. 2015)

Spletni vir 12: http://openweathermap.org (17. 8. 2015)

Spletni vir 13: https://www.openstreetmap.org (17. 8. 2015)

Spletni vir 14: http://leafletjs.com/ (27. 8. 2015)

Spletni vir 15: http://openweathermap.org/models (10. 9. 2015)

http://www.esri.com/what-is-gis

http://www.in.gov/gis/gis101.htm

https://jquery.com/

http://www.tutorialspoint.com/ajax/what_is_ajax.htm

http://javascriptissexy.com/javascript-variable-scope-and-hoisting-explained/

http://javascriptissexy.com/javascript-variable-scope-and-hoisting-explained/

http://www.quirksmode.org/js/function.html

http://www.phpied.com/3-ways-to-define-a-javascript-class/

http://www.phpied.com/3-ways-to-define-a-javascript-class/

http://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/

http://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/

http://openweathermap.org/current

http://openweathermap.org/forecast5

http://www.liedman.net/leaflet-routing-machine/

http://openweathermap.org/

http://leafletjs.com/



KAZALO SLIK

Slika 1: Z naraščanjem razdalje v smeri vetra, se spreminja tudi koncentracija plina (Tiwary & Colls, 2010) ........................................................................ 8 Slika 2: GIS model ............................................................................ 9 Slika 3: Zasnova rešitve .................................................................... 10 Slika 4: Delovanje dogodkovne zanke ( ang. Event Loop ) ............................ 22 Slika 5: Slika vmesnika ..................................................................... 27 Slika 6: Spletna stran ponudnika podatkov o vremenskih razmerah OpenWeatherMap ................................................................................................. 33 Slika 7: Uporabniški vmesnik aplikacije .................................................. 47 Slika 8: Gumb za nastavljanje točke izbruha nevarnih plinov ......................... 47 Slika 9: Izris ogroženega območja ob določitvi točke uhajanja nevarnega plina .... 48 Slika 10: Gumb za nastavljanje področja varne cone .................................. 48 Slika 11: Izris poti od prizadetega območja do varne točke ............................ 49 Slika 12: Gumb za prikaz gibanja nevarnega plina v naslednjih 24-ih urah ......... 50 Slika 13: Prikaz koraka animacije za naslednjih 24 ur .................................. 50 Slika 14: Gumb za prikaz razmer v nasledjih 24 urah .................................. 50 Slika 15: Prikaz vseh korakov v naslednjih 24 urah ..................................... 51 Slika 16: Ročna izbira prikazanega koraka v naslednji 24-ih urah .................... 52 Slika 17: Rezultat prikaza določenega koraka ........................................... 52

KAZALO TABEL Tabela 1: Izračun spremenljivk sigma_y in sigma_z glede na razred stabilnosti in tip okolja ........................................................................................... 7 Tabela 2: Razpored razredov stabilnosti po Pasquill-u (Tiwary in Colls, 2009, str. 234) ............................................................................................. 7 Tabela 3: Validacija podatkov o vremenskih razmerah ................................ 54 Tabela 4: Podatki o napovedi z dne 15.8.2015 ob 9 uri ............................... 54 Tabela 5: Podatki o napovedi z dne 15.8.2015 ob 12 uri .............................. 54 Tabela 6: Dejanski podatki za dan 16. 8. 2015 ......................................... 55 Tabela 7: Podatki o napovedi z dne 16. 8. 2015 ob 9 uri .............................. 55 Tabela 8: Podatki o napovedi z dne 16. 8. 2015 ob 12 uri ............................ 55

KAZALO IZSEKOV KODE Izsek kode 1: Prikaz spremembe besedila na gumbu (jQuery) ........................ 11 Izsek kode 2: Prikaz spremembe besedila na gumbu (jQuery) ........................ 11 Izsek kode 3: Prikaz klica podatkov iz oddaljenega strežnika (AJAX) ............... 12 Izsek kode 4: Definiranje lokalne spremenljivke (javaScript) ........................ 14 Izsek kode 5: Definiranje globalne spremenljivke (JavaScript) ...................... 15 Izsek kode 6: Dodeljevanje vrednosti nedeklarirani spremenljivki (javascript) ... 15 Izsek kode 7: Deklariranje funkcije (JavaScript) ....................................... 16 Izsek kode 8: Deklaracija objekta s pomočjo funkcije (javaScript) .................. 17 Izsek kode 9: Uporaba objekta (javaScript) ............................................. 17 Izsek kode 10: Definiranje objekta brez atributov (JavaScript) ...................... 17



Izsek kode 11: Deklaracija matrike brez atributov (JavaScript) ...................... 17 Izsek kode 12: Deklaracija objekta brez uporabe funkcij (JavaScript) .............. 17 Izsek kode 13: Uporaba objekta brez ustvarjanja nove instance (JavaScript) ..... 18 Izsek kode 14: Deklaracija objekta na način shranjevanja funkcije znotraj spremenljivke (JavaScript) ................................................................ 18 Izsek kode 15: Uporaba objekta, definiranega v izseku kode 14 (JavaScript) ...... 18 Izsek kode 16: Primer osnovne oblike HTML-dokumenta .............................. 19 Izsek kode 17: Primer komentiranja kode v HTML ..................................... 20 Izsek kode 18: Prikaz pisanja CSS-slogov ................................................ 21 Izsek kode 19: Definiranje CSS-slogov iz zunanje datoteke "slogi.css" .............. 21 Izsek kode 20: Uporaba vnaprej določenih slogov znotraj HTML-kode .............. 21 Izsek kode 21: Vključene JavaScript datoteke .......................................... 24 Izsek kode 22: Vključene .css-datoteke .................................................. 25 Izsek kode 23: CSS-slogi, vključeni v datoteki index.html ............................ 25 Izsek kode 24: Koda orodne vrstice ....................................................... 26 Izsek kode 25: Definicija polj za prikaz mape in podatkov o lokaciji ............... 28 Izsek kode 26: Definiranje osnovnih spremenljivk s privzetimi vrednostmi ........ 28 Izsek kode 27: Dodajanje 3D-plasti zgradb na mapo ................................... 29 Izsek kode 28: Definicija ikon za ogroženo in varno območje ........................ 29 Izsek kode 29: Spremenljivka za upravljanje prikaza poti ............................ 30 Izsek kode 30: Dodajanje markerja za označitev ogroženega območja na mapo .. 31 Izsek kode 31: Dodajanje markerja za označitev varnega območja na mapo ...... 32 Izsek kode 32: Nastavljanje privzete lokacije na mapi ................................ 32 Izsek kode 33: Funkciji, ki se izvedeta ob kliku na gumb. ............................ 32 Izsek kode 34: Nastavljanje izgleda gumba ............................................. 33 Izsek kode 35: Pridobivanje podatkov o vremenskih razmerah ....................... 34 Izsek kode 36: API-odgovor, kodiran v formatu JSON .................................. 35 Izsek kode 37: Obdelava podatkov za prikaz trenutnega stanja ..................... 38 Izsek kode 38: Klic in obdelava podatkov za prikaz predvidenih sprememb v vremenu ................................................................................................. 39 Izsek kode 39: Koda, ki izvrši samodejni prikaz napovedi sprememb. .............. 41 Izsek kode 40: Funkcija za izbris prikaza trenutnega koraka ......................... 41 Izsek kode 41: Koda samodejnega prikaza korakov .................................... 42 Izsek kode 42: Koda, ki poskrbi za izris koraka na mapi. .............................. 43 Izsek kode 43: Koda, ki izvrši prikaz vseh korakov za naslednjih 24 ur. ............ 43 Izsek kode 44: Funkcija za izris vseh korakov naenkrat ............................... 44 Izsek kode 45: Izbris korakov za prikaz 24-urne napovedi............................. 44 Izsek kode 46: Prikaz sprememb po korakih ............................................ 45 Izsek kode 47: Koda za uporabo preračuna in prikaza najkrajše poti iz točke a do točke B ........................................................................................ 49



KRATICE IN AKRONIMI HTML: Hyper Text Markup Language: jezik za označevanje nadbesedila PHP: HP Hypertext Preprocessor / Personal Home Page Tools: orodja

za osebno spletno stran CSS: Cascading Style Sheets: kaskadne stilske predloge AJAX: Asynchronous Javascript in XML: Asinhroni JavaScript in XML XML: Extensible Markup Language: razširljiv označevalni jezik GIS: Geographic Information System: geografski informacijski sistem DOM: Document Object Model: dokumentni objektni model OWS: Open Web Standards: odprti spletni standardi JSON: JavaScript Object Notation: zapis JavaScript objekta W3C: World Wide Web Consortium: Konzorcij za svetovni splet API: Application Programming Interface: Vmesnik za programiranje

aplikacij

razvoj prototipa spletne aplikacije za prikaz ... · in html5. za prikaz zemljevida bo služila...

Documents