razvoj modula za interaktivni prikaz lokacije ...grafičnega prikaza lokacije. rešitev omogoča...

Diplomsko delo univerzitetnega študija Organizacija in management informacijskih sistemov

RAZVOJ MODULA ZA INTERAKTIVNI PRIKAZ LOKACIJE OBJEKTOV NA SVETOVNEM

SPLETU S 3D GRAFIKO Mentor: izr. prof. dr. Andrej Škraba Kandidat: Luka Škerjanec Somentor: doc. dr. Davorin Kofjač

Kranj, junij 2015

ZAHVALA Za pomoč pri izdelavi diplomske naloge ter za strokovno usmerjanje in nasvete se zahvaljujem mentorju, izr. prof. dr. Andreju Škrabi in somentorju, doc. dr Davorinu Kofjaču. Zahvaljujem se tudi družini za spodbudo in podporo.

POVZETEK Tema diplomskega dela je razvoj modula za prikaz in upravljanje 3D objektov preko svetovnega spleta s pomočjo strojnega vmesnika za potrebe interaktivnega grafičnega prikaza lokacije. Rešitev omogoča interaktivni 3D prikaz v spletnem pregledovalniku. Razvoj rešitve je potekal na strežniku z nameščenim operacijskim sistemom Ubuntu 12.04 LTS, na katerega je povezan mikrokontroler Arduino Uno in potenciometri kot manipulatorji lokacije. Mikrokontroler Arduino Uno, na katerega so priključeni ustrezni vhodni elementi, služi za zajem podatkov, ki jih pošilja na strežnik. Na strežniku smo s pomočjo programskega jezika JavaScript ter tehnologije Node.js ter HTML razvili spletno stran, ki služi za izrisovanje 3D predmetov v okolju. Spletna stran omogoča prikaz/izpis podatkov, prejetih s strani mikrokontrolerja ter simulacijo disperzije polutantov, ki jo lahko poljubno manipuliramo.

KLJUČNE BESEDE:

- 3D grafika - Arduino - Node.js - JavaScript - Firmata - Three.js - socket.io - kiberfizični sistem - Internet stvari

ABSTRACT The topic of this thesis is the development of a module for displaying and managing of 3D objects through a hardware interface, which would meet the needs of an interactive graphic location display. The solution enables an interactive 3D visual representation in the web browser. The solution was developed on the Linux Ubuntu 12.04 LTS server, which was connected to a Arduino Uno microcontroller and potentiometers as location manipulators. The Arduino Uno microcontroller, with the suitable hardware elements, captured the data and sent it to the server. With the help of programming language JavaScript and technologies Node.js and HTML, a web site with a 3D environment and objects was developed. This website makes it possible to display data captured with the microcontroller and simulate the pollutants dispersion, which can be manipulated.

KEYWORDS:

- 3D graphics - Arduino - Node.js - JavaScript - Firmata - Three.js - socket.io - Cyber-Phyiscal system - Internet of things

KAZALO 1. UVOD ...................................................................................... 1

2. METODOLOGIJA IN ORODJA ............................................................ 2

2.1. RAZVOJ SISTEMA za prikaz lokacije ............................................. 2

2.2. ARDUINO UNO ...................................................................... 3

2.3. ARDUINO IDE ........................................................................ 5

2.4. NODE.JS ............................................................................. 5

2.5. SOCKET.IO ........................................................................... 6

2.6. FIRMATA ............................................................................. 6

2.7. THREE.JS ............................................................................ 6

2.8. IZRIS DISPERZIJE Z MATRIKO ...................................................... 6

2.9. MATRIKA VRTENJA ................................................................. 7

3. RAZVOJ REŠITVE ......................................................................... 7

3.1. NAMESTITEV NODE.JS.............................................................. 7

3.2. NAMESTITEV FIRMATE ............................................................. 8

4. NASTAVITVE STREŽNIKA NODE.JS ..................................................... 9

4.1. ZAJEM IN POŠILJANJE PODATKOV ................................................ 9

4.2. POSREDOVANJE SPLETNE STRANI ............................................... 11

5. POSTAVITEV SPLETNE STRANI ......................................................... 12

5.1. SPLETNA STRAN ................................................................... 12

5.2. PRIDOBITEV PODATKOV S STREŽNIKA .......................................... 13

5.3. IZRIS 3D OKOLJA .................................................................. 13

5.4. IZRIS SIMULACIJE DISPERZIJE .................................................... 16

5.5. NAVIDEZNI POTENCIOMETRI ..................................................... 19

5.6. GRAFIČNI PRIKAZ VREDNOSTI POTENCIOMETRA ............................... 21

5.7. OBLIKOVANJE SPLETNE STRANI ................................................. 23

6. ZAGON STREŽNIKA IN PRIKAZ SIMULACIJE .......................................... 24

7. UGOTOVITVE ............................................................................ 27

LITERATURA .................................................................................. 28

KAZALO SLIK .................................................................................. 29

POJMOVNIK ................................................................................... 30

KRATICE IN AKRONIMI ....................................................................... 30

PRILOGE ....................................................................................... 31

STREŽNIK ................................................................................... 31

KLIENT ...................................................................................... 33

OBLIKOVANJE SPLETNE STRANI .......................................................... 41

Univerza v Mariboru — Fakulteta za organizacijske vede Diplomsko delo univerzitetnega študija

Luka Škerjanec: Razvoj modula za interaktivni prikaz lokacije objektov na svetovnem spletu s 3D grafiko stran 1

1. UVOD V okviru projekta na področju disperzije škodljivih snovi v ozračju, ki smo ga izvajali v Laboratoriju za kibernetiko in sisteme za podporo odločanju (Škraba in drugi, 2012) se je izkazala potreba za interaktivni prikaz objektov na svetovnem spletu v 3D prostoru. S tovrstnim prikazom želimo omogočiti prikaz simulacije gibanja snovi v zraku (npr. zračnega polutanta), kar nam pomaga pri načrtovanju evakuacijskih poti v primeru disperzije škodljivih snovi v ozračju (Škraba in drugi, 2012). V diplomskem delu smo tako obravnavali zajem podatkov v analogni obliki preko naprav, priključenih na mikrokontroler Arduino Uno ter posredovanih na svetovni splet v obliki 3D grafike. Podatke posredujemo na namenski strežnik z naloženim operacijskim sistemom Ubuntu 12.04 LTS preko platforme Node.js s pomočjo programskega jezika JavaScript. Zajem podatkov je osnova za prikaz gibanja 3D telesa na spletni strani, pri čemer želimo, da so rezultati dostopni večjemu številu klientov sočasno. Analogni vhod bo emuliran s pomočjo potenciometrov (lahko jih sicer nadomesti analogni izhod anemometra), ki določi smer in jakost vetra. Sodobne tehnologije na področju kiberfizičnih sistemov ter interneta stvari (Škraba in drugi, 2014) nam omogočajo razvoj naprednih tehnoloških rešitev ter s tem bolj učinkovitih informacijskih sistemov (Kljajić in drugi, 2000, Škraba in drugi, 2003; Škraba in drugi, 2011), kar je zlasti pomembno pri organizaciji upravljanja s kriznimi situacijami, kot npr. širjenje škodljivih snovi v ozračju. Diplomsko delo je v večjem delu aplikativno. Pri tem je obravnavana simulacija kriznega okolja, ki preko spletne strani prikazuje disperzijo škodljivih snovi glede na določene podatke, kot sta smer in hitrost vetra. Na podlagi prikaza disperzije se lahko določi optimalno evakuacijsko pot. Cilj diplomske naloge je izvedba delujoče različice sistema, ki bo omogočal zbiranje podatkov preko vhodnih elementov (potenciometrov ali senzorjev) in jih preko mikrokontrolerja posredoval na strežnik. Sitem je lahko splošno uporaben pri npr. simulaciji disperzije škodljivih snovi v ozračje, kjer bi na podlagi podatkov priklopljenega anemometra določili smer in hitrost, v katero bi se škodljive snovi lahko širile. Sistem bo deloval v realnem času preko svetovnega spleta.



2. METODOLOGIJA IN ORODJA Pri rešitvi opredeljenega problema smo uporabili popularni mikrokontroler Arduino UNO za zajem analognih podatkov. Rešitev je razvita s programskim jezikom JavaScript, ki s pomočjo knjižnic Node.js, Firmata in socket.io omogoča komunikacijo med mikrokontrolerjem, strežnikom in klientom.

2.1. RAZVOJ SISTEMA ZA PRIKAZ LOKACIJE Celoten sistem je sestavljen iz treh delov: mikrokontroler, strežnik in klient. Na mikrokontroler so priključeni trije potenciometri, sam mikrokontroler pa je priključen na strežnik preko USB vhoda. Za komunikacijo med strežnikom in mikrokontrolerjem potrebujemo knjižnico Firmata. Vzpostavljen Node.js strežnik preko firmate pridobi vrednosti potenciometrov in jih preko socket.io knjižnice pošilja na strežnik. Klient pošilja zahteve preko socket.io knjižnice, le-temu pa se prikaže spletna stran (Slika 1):

Slika 1: Shema sistema za prikaz lokacije v 3D na svetovnem spletu



2.2. ARDUINO UNO Slika 2 prikazuje Arduino UNO mikrokontroler, ki smo ga uporabili pri razvoju sistema. Pri tem gre za DIL (»Dual in Line«) izvedbo.

Slika 2: Arduino UNO mikrokontroler

Arduino Uno je mikrokontroler, ki ima 14 digitalnih vhodnih/izhodnih nožic, 6 analognih vhodnih nožic, USB priključek, napajalni priključek in gumb za ponastavitev (Arduino Uno, 2015). Na mikrokontroler smo priklopili 3 potenciometre, s katerimi bomo simulirali vhodne podatke. Potenciometri imajo upornost 10 kΩ. Potenciometri so povezani na nožice A0, A1 in A3, ki berejo analogno vrednost napetosti s potenciometrov. Razpon vrednosti, ki jo posreduje Arduino kot izhod je od 0 ter do 1023. (Za povezavo glej: Slika 3 in Slika 4). Shema vezave potenciometrov je prikazana na Sliki 3:

Slika 3: Skica povezave potenciometrov z mikrokontrolerjem



Na Slika 4 je prikazana shema priklopa treh potenciometrov na Arduino.

Slika 4: Shema priklopov potenciometrov na Arduino Uno

Glede na shemo povežemo Arduino Uno s potenciometri. V ohišju (Slika 5) je mikrokontroler Arduino Uno s tremi potenciometri. Na desni strani vidimo prikazan priključek USB, ki je priklopljen na strežnik (Slika 5):

Slika 5: Arduino Uno s potenciometri v ohišju z USB priklopom



2.3. ARDUINO IDE Arduino »Integrated Development Environment« (IDE) je odprtokodna rešitev, ki nam omogoča pisanje in prenos kode v jeziku C++ oz. C na mikrokontroler. Rešitev je podprta na več operacijskih sistemih. Za pisanje kode se uporablja tekstovni vmesnik, kjer kreiramo skeče (programska oprema, napisana z uporabo Arduino razvojnega okolja) (Arduino IDE, 2015). Razvojno okolje ima tudi prednaložene skeče, ki jih lahko uporabimo za delo. V diplomski nalogi smo uporabili prednaložen skeč, z imenom StandardFirmata (Slika 6), ki smo ga naložili na mikrokontroler, in nam bo služil za komunikacijo med strežnikom in mikrokontrolerjem.

Slika 6: Arduino razvojno okolje s skečem StandardFirmata

2.4. NODE.JS Node.js je platforma, ki omogoča razvoj mrežnih aplikacij. Za razvoj aplikacije v Node.js platformi se uporablja JavaScript. Node.js platoforma je zgrajena na odprtokodnem JavaScript pogonu. Pogon je sicer napisan v C++ programskem jeziku in se uporablja v spletnem brskalniku Google Chrome. Node.js uporablja dogodkovni vhodno/izhodni model, kar ga naredi lahkega in učinkovitega za izdelavo spletnih aplikacij z veliko podatki, ki delujejo v realnem času med več napravami z različnimi operacijskimi sistemi (Node.js, 2015). V naši rešitvi omogoča povezavo z mikrokontrolerjem Arduino IDE ter pridobivanje in pošiljanje podatkov na strežnik. Omogoča nam dostop do strežnika z več naprav in nam prikazuje simulacijo v realnem času.



2.5. SOCKET.IO Socket.io je knjižnica, napisana v JavaScript jeziku, in omogoča dvosmerno komunikacijo v dejanskem času med klientom in strežnikom. Socket.io deluje na vseh platformah in brskalnikih (Socket.io, 2015). Socket.io je sestavljen iz dveh delov; en del je strežniški in nam omogoča komunikacijo s strežnikom, drugi del pa je na strani klienta. Skupaj omogočata komunikacijo med strežnikom in klientom ter s tem pretok podatkov in datotek.

2.6. FIRMATA Firmata je knjižnica, ki implementira Firmata protokol za komunikacijo med mikrokontrolerjem in strežnikom. Omogoča nam pisanje in ustvarjanje svojih objektov na okolju, s katerimi lahko komuniciramo z mikrokontrolerjem Arduino Uno. (Firmata, 2015). Za uporabo firmate z mikrokontrolerjem Arduino Uno moramo predhodno na mikrokontroler naložiti skeč StandardFirmata, ki omogoča komunikacijo preko protokola Firmata. Knjižnica nam omogoča branje analognih podatkov na nožicah A0, A1 in A2 na mikrokontrolerju ter posredovanje podatkov strežniku.

2.7. THREE.JS Three.js je knjižnica, napisana v JavaScriptu, in nam omogoča ustvarjanje 3D okolja. V 3D okolju lahko ustvarjamo scene, kamere, animacije, osvetlitev, poljubne materiale, poljubne objekte, idr. Three.js knjižnica za svoje delovanje potrebuje le brskalnik, ki podpira WebGl (Three.js, 2015).

2.8. IZRIS DISPERZIJE Z MATRIKO Disperzijo polutantov bomo izrisali s pomočjo točk in daljic. Za mesta izrisa točk bomo uporabili kvadratno matriko (Slika 7). Vrednosti »1« predstavljajo mesta izrisa točk. Vse točke bomo potem med seboj povezali z daljicami, tako bomo dobili lik za simulacijo disperzije.

[ 0 0 0 0 1 0 0 0 0 00 0 0 1 0 1 0 0 0 00 0 1 0 0 0 1 0 0 00 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 00 1 0 0 0 0 0 1 0 00 0 0 0 0 0 0 0 0 00 0 1 0 0 0 1 0 0 00 0 0 1 0 1 0 0 0 00 0 0 0 1 0 0 0 0 0]

Slika 7: Kvadratna matrika



2.9. MATRIKA VRTENJA V simulaciji bomo omogočili vrtenje lika (disperzije) v koordinatam sistemu. Za vrtenje bomo uporabili matriko vrtenja. Matrika vrtenja je matrika, ki v koordinatnem sistemu opisuje vrtenje (Matrika vrtenja, 2015). Za to bomo uporabili enačbo vrtenja (Enačba 1):

𝑅(𝜃) = [cos 𝜃 −sin 𝜃sin 𝜃 cos𝜃

]

Enačba 1: Matrika vrtenja

3. RAZVOJ REŠITVE Za izdelavo aplikacije bomo potrebovali okolje, na katerem bomo sistem razvili, zato namestimo operacijski sistem Ubuntu (pri razvoju smo uporabili verzijo 12.04 LTE). Po uspešni namestitvi je potrebno okolje še posodobiti in namestiti pakete, ki jih bomo kasneje potrebovali za namestitev ostalih knjižnic. Odpremo terminal in poženemo naslednje ukaze (Slika 8): sudo apt-get update sudo apt-get install npm

Slika 8: Posodobitev operacijskega sistema

Z ukazom update pridobimo vse posodobitve, ki so na voljo, z ukazom install npm pa naložimo upravljalca paketov za Node.js (Node.js pacakage manager), ki nam omogoča dodatno nalaganje modulov za Node.js.

3.1. NAMESTITEV NODE.JS Node.js lahko naložimo v projektno mapo in s tem omogočimo večjo prenosljivost rešitve ter se izognemo uporabi različnih verzij platforme Node.js. Za namestitev platforme Node.js odpremo terminal ter se z naslednjimi ukazi pomaknemo v mapo, kamor bomo naložili Node.js (Slika 9): cd /usr/local/src sudo mkdir node cd node

Slika 9: Ukazi za namestitev platforme Node.js



S spleta prenesemo Node.js datoteko in jo razširimo (Slika 10): sudo wget http://nodejs.org/dist/v0.12.0/node-v0.12.0.tar.gz sudo tar –xzvf node-v0.12.0.tar.gz

Slika 10: Prenos Node.js

Po uspešni razširitvi namestimo Node.js (Slika 11): cd node-v0.12.0 sudo ./configure sudo make sudo make install

Slika 11: Ukazi za namestitev Node.js

Uspešnost namestitve Node.js platforme lahko preverimo z ukazom, ki nam vrne trenutno verzijo nameščene platforme: node -v

3.2. NAMESTITEV FIRMATE Odpremo terminal in poženemo ukaz za namestitev firmate (Slika 12): npm install –g firmata

Slika 12: Namestitev firmate



4. NASTAVITVE STREŽNIKA NODE.JS

4.1. ZAJEM IN POŠILJANJE PODATKOV Za zajem podatkov potrebujemo Node.js strežnik in knjižnico Firmata. Nastavimo nastavitve http strežnika, kjer spremenljivki nodeIP in port predstavljata mrežni naslov in vrata strežnika, na katerem teče strežnik (Slika 13):

var http = require('http').createServer(handler); var nodeIP = '192.168.0.106'; var port = 1111; http.listen(port, nodeIP);

Slika 13: Nastavitev strežnika

Nato nastavimo socket.io in firmato. Spremenljivka board predstavlja mikrokontroler Arduino Uno. Nastavimo ji USB vrata, na katerih je mikrokontroler povezan s strežnikom ter se z njim povežemo (Slika 14):

var io = require(__dirname + '/node_modules/socket.io').listen(http), firmata = require('/usr/local/lib/node_modules/firmata'), board = new firmata.Board('/dev/ttyACM0', arduinoReady); function arduinoReady(err) { if (err) { console.log(err); return; } console.log('Firmware: ' + board.firmware.name + '-' + board.firmware.version.major + '.' + board.firmware.version.minor); }

Slika 14: Priklop Arduina Uno na Node.js

Po povezavi z mikrokontrolerjem nastavimo socket.io, ki se bo primerno odzval na prejeti klientov zahtevek. Z ukazom connection se povežemo na mikrokontroler ter vrnemo vrednosti potenciometrov. Razpon vrednosti potenciometra je med 0 in 1023. Uporabimo funkcijo analogRead(), s katero preberemo vrednost na določeni nožici (Slika 15):

board.analogRead(0, function(value)

Slika 15: Branje analogne nožice 0



Prebrane vrednosti shranimo v zbirko, iz katere nato izračunamo povprečno vrednost 5 prebranih vrednosti. S tem zmanjšamo napako branja vrednosti potenciometra (Slika 16). Za izračun povprečja bomo uporabili enačbo (Enačba 2):

𝐴 =∑ 𝑥𝑖

𝑁𝑖=1

𝑁

Enačba 2: Izračun povprečja

Pri tem predstavlja N število vrednosti, ki jih upoštevamo v povprečju. Večje število vrednosti zagotavlja bolj stabilno izhodno vrednost vendar pa več vrednosti hkrati prinaša tudi slabšo odzivnost sistema.

if (valueArray0.length < 5) { valueArray0.push(parseInt(value));

} else { valueArray0.shift(); valueArray0.push(parseInt(value)); for (var i = 0; i < valueArray0.length; i++) { vsota += valueArray0[i]



4.2. POSREDOVANJE SPLETNE STRANI Ko se klient povezuje na strežnik, strežniku pošlje zahtevo. Na podlagi zahteve klientu pošljemo zahtevane datoteke. Za ustrezno pošiljanje datotek glede na zahtevo klienta preverimo, katero datoteko klient potrebuje, za kar poskrbi funkcija handler(), ki pošlje klientu zahtevano datoteko. Funkcija handler(req, res) se izvede vsakič, ko klient pošlje zahtevo strežniku. Spremenljivka req je objekt z vhodnim sporočilom, ki ga uporabimo za dostop do podakov. Spremenljivka res pa je objekt, ki ga ustvari Node.js HTPP strežnik in ga uporabimo za vračanje podatkov s strežnika h klientu (HTTP dogodki, 2015). Pri razvoju rešitve potrebujemo na spletni strani več datotek za pravilno delovanje. V funkciji pravo datoteko izberemo glede na datotečni tip, ki ga klient pošlje preko zahteve. Nato zahtevano datoteko poiščemo in jo vrnemo klientu (Slika 18).

function handler(req, res) { if (req.url.indexOf('.html') != -1) { fs.readFile(__dirname + '/../index.html', function (err, data) { if (err) console.log(err); res.writeHead(200, { 'Content-Type': 'text/html' }); res.write(data); res.end(); }); } else if (req.url.indexOf('.css') != -1) { var cssFileName = req.url.substring(req.url.indexOf('/')); fs.readFile(__dirname + '/../css/' + cssFileName, function (err, data) { if (err) console.log(err); res.writeHead(200, { 'Content-Type': 'text/css' }); res.write(data); res.end(); }); } else if (req.url.indexOf('.js') != -1) { var jsFileName = req.url.substring(req.url.indexOf('/')); fs.readFile(__dirname + '/' + jsFileName, function (err, data) { if (err) console.log(err); res.writeHead(200, { 'Content-Type': 'text/css' }); res.write(data); res.end(); }); } else if (req.url.substring(req.url.indexOf('/')) == '/bg4use.png') { fs.readFile(__dirname + '/../bg4use.png', function(err, data) { if (err) console.log(err); res.writeHead(200, { 'Content-Type': 'text/css' }); res.write(data); res.end(); }); } else { res.writeHead(200); res.end(); } }

Slika 18: Funkcija za prenos datotek na spletno stran



5. POSTAVITEV SPLETNE STRANI Za prikaz podatkov bomo potrebovali spletno stran, na kateri bomo obdelali in prikazali podatke, zajete z mikrokontrolerjem v 3D okolju. Na spletni strani bomo hkrati omogočili simulacijo potenciometrov, za kar bomo uporabili knjižnici jQuery in jQuery-UI ter gradnik slider.

5.1. SPLETNA STRAN Za delovanje spletne strani potrebujemo dodatne knjižnice. Vse knjižnice shranimo v projektno mapo. S tem omogočimo lažjo prenosljivost rešitve ter uporabo enake verzije knjižnic.

Socket.io.js Knjižnica omogoča komunikacijo med klientom in strežnikom. Knjižnico pridobimo v mapi, kjer smo naložili knjižnico Socket.io.

jQuery.js jQuery je knjižnica, napisana v programskem jeziku JavaScript, in ima širok nabor funkcij za lažji in hitrejši razvoj spletnih aplikacij. Knjižnico prenesemo z njihove uradne spletne strani (jQuery, 2015).

jQuery-ui.js jQuery-UI je knjižnica, ki vsebuje razne gradnike, efekte in teme, ki jih uporabimo pri razvoju spletnih aplikacij. jQuery-UI knjižnico prenesemo z njihove uradne spletne strani (jQuery-UI, 2015).

Three.js Three.js knjižnico prenesemo z njihove uradne spletne strani (Three.js, 2015).

orbitControls.js OrbitControls.js je knjižnica, ki nam omogoča premikanje kamere (našega vidnega polja) v 3D sceni s pomočjo računalniške miške. Prenesemo jo s spletne strani (orbitCotrols, 2015).

THREEx.WindowsResize.js WindowsResize knjižnica je dodatek za Three.js knjižnico in omogoča dinamično širjenje 3D scene glede na velikost klientovega vidnega polja. Prenesemo jo lahko s spletne strani (WindowsResize, 2015).



5.2. PRIDOBITEV PODATKOV S STREŽNIKA Za pridobitev podatkov s strežnika kličemo anonimno funkcijo, ki se preko socket.io poveže na strežnik in pridobi vrednosti potenciometrov. Povežemo se na strežnik (Slika 19):

var socket = io.connect("http://192.168.0.106:1111");

Slika 19: Povezava s strežnikom

Strežniku pošljemo zahtevo, da potrebujemo vrednost potenciometra, ki jo nato shranimo v globalno spremenljivko. Zahtevek za branje prvega potenciometra je poimenovan klientBeri0. Vrednost potenciometra nastavimo tudi navideznemu potenciometru (Slika 20):

socket.on("klientBeri0", function (value) { potVrednost0 = value; $(function () { //potenciometer X - izpisovanje vrednosti potenciometra var outputPotenciometer1 = $("#output_potenciometer1"); outputPotenciometer1.html(potVrednost0); $(potVrednost0).on("change", function () { outputPotenciometer1.html(this.value); }); }); if (!(potVrednost0 < (vrednostx + 3) && potVrednost0 > (vrednostx - 3))) { vrednostx = potVrednost0; } });

Slika 20: Branje vrednosti potenciometra in prikaz vrednosti v navideznemu potenciometru

5.3. IZRIS 3D OKOLJA Za izris 3D objektov bomo uporabili knjižnico three.js, ki nam omogoča enostavni izris objektov v 3D okolju glede na vrednosti potenciometrov. Najprej ustvarimo 3D prikazovalnik in mu določimo, naj zavzame celotni vidni prostor brskalnika. 3D prikazovalnik nato vstavimo v element ThreeJS (Slika 21):

var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); var container = document.getElementById("ThreeJS"); container.appendChild(renderer.domElement); renderer.setClearColor(0xEEEEEE, 1.0); renderer.clear();

Slika 21: 3D prikazovalnik

Za prikaz objektov potrebujemo objekt scene, na katerega bomo dodali vse naše objekte (kamera, tla, daljice...) (Slika 22):



Za dejanski izris okolja in izris sprememb na okolju potrebujemo funkciji render() in animate(). Funkcija animate() pridobi vrednost potenciometrov in jih shrani v globalne spremenljivke, hkrati pa tudi posodobi vrednosti na virtualnih potenciometrih. Tu uporabimo tudi funkcijo drawDotsLines()(glej točko 5.4 IZRIS SIMULACIJE DISPERZIJE), ki na podlagi vrednosti potenciometrov izriše simulacijo disperzije (Slika 26). Na koncu kličemo še funkcijo render(), ki posodobi kamero in sceno ter spremembe osvežimo (Slika 27: Funkcija render():

//x-os if (vrednostx != vrednostx1) { vrednostx1 = vrednostx; valSliderX = vrednostx; $("#sliderx").slider("value", valSliderX); } else { $(function() { vrednostSliderx = $("#vrednostSliderx"); vrednostSliderx.html(valSliderX); $(valSliderX).on("change", function() { vrednostSliderx.html(this.value); }); }); } drawDotsLines(valSliderX, valSliderY, valSliderZ); renderer.clear(); render(); window.requestAnimationFrame(animate, renderer.domElement);

Slika 26: Funkcija animate()

Funkcija render():

function render() { renderer.render(scene, camera); controls.update(); }

Slika 27: Funkcija render()



5.4. IZRIS SIMULACIJE DISPERZIJE Za simulacijo disperzije bomo uporabili funkcijo drawDotsLines(), kjer bomo vrednosti potenciometrov ustrezno obdelali. Disperzijo bomo narisali s pomočjo točk in daljic med točkami. Daljice in točke se bodo medsebojno povezovale v obliki poligona, ki predstavlja izpostavljeno območje. Poligon bomo lahko vrteli, mu nastavili višino ter ga povečali ali pomanjšali. Za načrt izrisa točk bomo uporabili matriko, kjer vrednosti 1 predstavljajo mesto izrisa točke (Slika 28):

var array = [ [0, 0, 0, 0, 1, 0, 0, 0, 0, 0], [0, 0, 0, 1, 0, 1, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 1, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 1, 0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 1, 0, 0, 0], [0, 0, 0, 1, 0, 1, 0, 0, 0, 0], [0, 0, 0, 0, 1, 0, 0, 0, 0, 0] ];

Slika 28: Matrika za izris točk

Nastavimo velikost ter barvo točk (Slika 29):

var material = new THREE.MeshBasicMaterial({ color: 0x000000 }); material.side = THREE.DoubleSide; var radius = 0.25; var segments = 32; var circleGeometry = new THREE.CircleGeometry(radius, segments);

Slika 29: Nastavitve točk



Uporabimo zanko s katero gremo čez celotno matriko, da pridobimo mesta, na katerih želimo izrisati točke v koordinatnem sistemu. Pred shranjevanjem vrednosti v zbirko uporabimo metodo vrtenja matrike, kjer vrednosti ustrezno preračunamo glede na željeno vrtenje našega poligona, ki nam služi kot primer simulacije izpostavljenega območja (Slika 30):

Koda:

for (var i = array.length - 1; i >= 0; i = i - 1) { for (var j = array.length - 1; j >= 0; j = j - 1) { if (array[i][j] !== 0) { var point1 = ((j * scaleX) - tranPointX) - offsetPointX * scaleX; var point2 = ((i * scaleY) - tranPointY) - offsetPointY * scaleY; var point1t = ((point1 * Math.cos(theta)) + (point2 * -Math.sin(theta))); var point2t = ((point1 * Math.sin(theta)) + (point2 * Math.cos(theta))); point1 = Math.round((point1t + tranPointX) * 100) / 100; point2 = Math.round((point2t + tranPointY) * 100) / 100; xPoints.push(point1); zPoints.push(point2); } } }

Slika 30: Zanka za izris pik

Nato gremo z zanko čez zbirko preračunanih vrednosti, točkam nastavimo koordinate v 3D okolju, kjer želimo, da so izrisane. Vrednost drugega potenciometra uporabimo za izris višine (Slika 31):

for (i = 0; i < xPoints.length; i = i + 1) { var circle = new THREE.Mesh(circleGeometry, material); circle.position.set(xPoints[i], slidervalueY, zPoints[i]); circle.rotation.x = -Math.PI / 2; scene.add(circle); circleId.push(circle.id); }

Slika 31: Zanka za izris točk



Z naslednjim korakom bomo točke povezali z daljicami. Izrisa točk se bomo lotili v smeri urinega kazalca, tako da začnemo pri čisto spodnji točki. Ponovno gremo čez zbirko točk, le da tokrat izberemo vsako drugo točko v zbirki (vsaka druga točka predstavlja levo polovico lika), med katerima bomo izrisali daljico (Slika 32):

for (var i = 0; i < zPoints.length; i = i + 2) { lineGeometry.vertices.push(new THREE.Vector3(xPoints[i], slidervalueY, zPoints[i])); scene.add(line); lineId.push(line.id); }

Slika 32: Izris leve polovice lika

V naslednji zanki gremo ponovno čez zbirko točk z začetkom na koncu zbirke ter ponovno izberemo vsako drugo točko (vsaka druga točka v nasprotnem vrstnem redu predstavlja desno polovico lika), med katerima bomo izrisali daljico (Slika 33):

for (var i = zPoints.length - 1; i > 0; i = i - 2) { lineGeometry.vertices.push(new THREE.Vector3(xPoints[i], slidervalueY, zPoints[i])); scene.add(line); lineId.push(line.id); }

Slika 33: Izris desne polovice lika

Na koncu povežemo z daljico še predzadnjo in zadnjo točko (Slika 34):

lineGeometry.vertices.push(new THREE.Vector3(xPoints[0], slidervalueY, zPoints[0])); scene.add(line); lineId.push(line.id); Slika 34: Izris črte med predzanjo in zadnjo piko



5.5. NAVIDEZNI POTENCIOMETRI Ustvarimo element fieldset, kjer bomo s pomočjo jQuery.js in jQuery-ui.js knjižnice izrisali navidezne potenciometre. Navidezni potenciometri bodo prikazovali trenutno vrednost potenciometrov, priključenih na mikrokontroler ter hkrati omogočali simulacijo pravih potenciometrov (Slika 35):

Vrednost X slider-ja: 512 Vrednost X potenciometra:
Vrednost Y slider-ja: 512 Vrednost Y potenciometra:
Vrednost Z slider-ja: 512 Vrednost Z potenciometra:

X:
Y:
Z:

Slika 35: Navidezni potenciometri



Za vsak navidezni potenciometer bomo potrebovali svojo funkcijo. Vsaka funkcija je anonimna in samoizvajajoča. Navidezni potenciometri bodo prvotno prikazovali trenutno vrednost pravih potenciometrov, v primeru spremembe vrednosti na navideznem potenciometru pa bodo prikazovali trenutno vrednost navideznega potenciometra in ta vrednost se bo uporabila tudi pri simulaciji disperzije (Slika 36):

$(function() { $("#sliderx").slider({ min: 0, max: 1023, value: valSliderX, slide: function(event, ui) { $("#vrednostSliderx").text(ui.value); valSliderX = ui.value; } }); }); $(function() { $("#slidery").slider({ min: 0, max: 1023, value: valSliderY, slide: function(event, ui) { $("#vrednostSlidery").text(ui.value); valSliderY = ui.value; } }); }); $(function() { $("#sliderz").slider({ min: 0, max: 1023, value: valSliderZ, slide: function(event, ui) { $("#vrednostSliderz").text(ui.value); valSliderZ = ui.value; } }); });

Slika 36: Nastavitve navideznih potenciometrov



5.6. GRAFIČNI PRIKAZ VREDNOSTI POTENCIOMETRA Na spletno stran bomo dodali grafični prikaz vrednosti potenciometrov. Za vsak graf bomo ustvarili nov html element canvas, ki ga tudi oblikujemo (Slika 37):

Slika 37: Nastavitve grafov

Nato nastavimo klic funkcije load(), ki se bo sprožila ob nalaganje spletne strani:

V funkciji load() nastavimo graf in pripadajoče stile črt, ki jih bomo izrisovali. Nastavimo tudi začetne vrednosti ter kličemo funkcijo loop() (Slika 38):

canvas = document.getElementById("cv"); canvas1 = document.getElementById("cv1"); canvas2 = document.getElementById("cv2"); ctx = canvas.getContext("2d"); ctx.lineWidth = "2"; ctx.strokeStyle = "red"; ctx.moveTo(0, 0); ctx1 = canvas1.getContext("2d"); ctx1.lineWidth = "2"; ctx1.strokeStyle = "green"; ctx1.moveTo(0, 0); ctx2 = canvas2.getContext("2d"); ctx2.lineWidth = "2"; ctx2.strokeStyle = "blue"; ctx2.moveTo(0, 0); for (i = 0; i < 100; i++) { x[i] = i; x1[i] = i; x2[i] = i; ctx.lineTo(x, y[i]); ctx1.lineTo(x1, y1[i]); ctx2.lineTo(x2, y2[i]); } ctx.stroke(); ctx1.stroke(); ctx2.stroke(); loop();

Slika 38: Funkcija load()



Funkcija loop() skrbi za izrisovanje grafa s trenutnimi vrednostimi potenciometrov (Slika 39):

ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); y.splice(0, 1); y[99] = potVrednost0; ctx1.clearRect(0, 0, canvas1.width, canvas1.height); ctx1.beginPath(); y1.splice(0, 1); y1[99] = potVrednost1; ctx2.clearRect(0, 0, canvas2.width, canvas2.height); ctx2.beginPath(); y2.splice(0, 1); y2[99] = potVrednost2; ctx.moveTo(x[0], y[0]); ctx1.moveTo(x1[0], y1[0]); ctx2.moveTo(x2[0], y2[0]); for (i = 0; i < 100; i++) { ctx.lineTo(x[i], (y[i] / 1023) * 100); ctx1.lineTo(x1[i], (y1[i] / 1023) * 100); ctx2.lineTo(x2[i], (y2[i] / 1023) * 100); }

Slika 39: Funkcija loop()

Na graf izpišemo še trenutno numerično vrednost potenciometra ter najvišjo in najnižjo vrednost, ki jo lahko zavzame (Slika 40):

ctx.stroke(); ctx.fillText(potVrednost0, 1, 10); ctx.fillText("0", 93, 10); ctx.fillText("1023", 73, 97); ctx1.stroke(); ctx1.fillText(potVrednost1, 1, 10); ctx1.fillText("0", 93, 10); ctx1.fillText("1023", 73, 97); ctx2.stroke(); ctx2.fillText(potVrednost2, 1, 10); ctx2.fillText("0", 93, 10); ctx2.fillText("1023", 73, 97);

Slika 40: Izpis vrednosti na grafu

Funkcija je rekurzivna, kar pomeni, da kliče samo sebe ter dodali časovni interval, da se izvaja vsakih 100 milisekund (Slika 41):

setTimeout(loop, 100);

Slika 41: Rekurzivna funkcija loop



5.7. OBLIKOVANJE SPLETNE STRANI Za oblikovanje spletne strani bomo uporabili CSS, ki je predloga za izgled strani. Stran oblikujemo tako, da bo element ThreeJS, ki predstavlja našo 3D sceno, zavzel celotno stran, nad njim v levem zgornjem kotu vidnega polja bodo grafi za grafični prikaz vrednosti potenciometrov, v levem spodnjem kotu pa bodo navidezni potenciometri (Slika 42):

body { overflow: hidden; } #ThreeJS { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #ThreeJS { z-index: 0; } #cv, #cv1, #cv2 { position: relative; z-index: 1; } fieldset { background-color: rgba(255, 255, 255, 0.5); position: absolute; z-index: 1; bottom: 5px; left: 5px; width: 430px; min-height: 200px; height: 200px; box-shadow: 2px 10px 10px #888888; } #sliderx, #slidery, #sliderz { margin-left: 37px; margin-right: auto; margin-top: -16px; width: 86%; } .PotValue { text-align: center; width: 40px; border: solid 1px #888888; border: solid 1px rgba(136, 136, 136, 0.3); } .ui-slider-handle { background-color: #EEEEEE; }

Slika 42: Oblikovanje spletne strani s CSS



6. ZAGON STREŽNIKA IN PRIKAZ SIMULACIJE Za prikaz simulacije moramo najprej pognati Node.js strežnik z ukazom v terminalu (Slika 43):

sudo node server.js

Slika 43: Zagon strežnika

Pri uspešnem zagonu strežnika in povezavi strežnika z mikrokontrolerjem se nam izpiše mrežni naslov, do katerega klient lahko dostopa (Slika 44).

Slika 44: Zaslonska slika zagona strežnika

Nato odpremo spletni brskalnik in vnesemo mrežni naslov računalnika, na katerem teče naš strežnik (primer: http:\\192.1.168.106:1111\index.html), kjer bomo videli simulacijo disperzije v 3D okolju. Simulacija je neodvisna od operacijskega sistema ali naprave, za svoje delovanje potrebuje le podporo OpenGL vmesnika. (Slika 45, Slika 46, Slika 47):



Slika 45 prikazuje primer delovanja rešitve. Na sredini slike se prikaže rdeče obarvan poligon, ki nam prikazuje disperzijo polutanta. V središču 3D scene imamo tri osi, ki služijo lažji predstavi 3D okolja. Celoten 3D prikaz, scena in objekti so razviti s pomočjo knjižnice Three.js. Področje, ki je prikazano, je bližnja okolica UM Fakultete za organizacijske vede. V zgornjem levem kotu so prikazani trije grafi; prvi graf prikazuje vrednosti prvega potenciometra, drugi graf drugega potenciometra, tretji pa prikazuje vrednosti tretjega potenciometra. V spodnjem levem kotu imamo navidezne potenciometre, ustvarjene s knjižnico jQuery.js in jQuery-UI.js. Nad navideznimi potenciometri imamo tabelo, kjer se izpisujejo trenutno uporabljene vrednosti v simulaciji (tako navideznih kot pravih potenciometrov). Po simulaciji se je mogoče po prostoru premikati s pomočjo računalniške miške.

Slika 45: Zaslonska slika brskalnika v Microsoft Windows okolju



Slika 46 je zaslonska slika, narejena v Linux Ubuntu 12.04 LTS okolju, kjer lahko vidimo, da se izrisuje popolnoma enako kot v Windows okolju:

Slika 46: Zaslonska slika v Linux Ubuntu okolju

Slika 47 prikazuje zaslonsko sliko, narejeno na Windows Phone 8.1 okolju. Izris 3D okolja je popolnoma enak, pomanjkljive so le kontrole nad premiki v 3D sceni, ker niso pripravljene za zaslone na dotik:

Slika 47: Zaslonska slika na Windows Phone 8.1 okolju



7. UGOTOVITVE Rešitev, ki smo jo razvili v sklopu diplomske naloge, je bila uspešno izvedena s pomočjo Node.js strežnika ter knjižnic Firmata in Socket.io ter programskega jezika JavaScript. Pri tem je pomembna ugotovitev, da nam omenjena tehnologija omogoča enostaven razvoj na področju kiberfizičnih sistemov ter interneta stvari, saj lahko s programskim jezikom JavaScript upravljamo mikrokontroler, izvajamo kodo na strani strežnika, kakor tudi razvijemo uporabniški vmesnik in zagotovimo 3D prikaz. S pomočjo orodij smo prikazali možnost izrisa objektov v 3D okolju, ki deluje na vseh napravah in operacijskih sistemih, ki imajo spletne brskalnike, ki podpirajo WebGL, kar omogoča interaktivni prikaz v skoraj realnem času na več klientih. Z rešitvijo smo prikazali simulacijo disperzije škodljivih snovi v ozračju v 3D okolju. Simulirani poligon, ki predstavlja področje, izpostavljeno višjim koncentracijam škodljivih snovi, lahko poljubno manipuliramo s potenciometri, ki so priključeni na mikrokontroler Arduino Uno. Potenciometri, priključeni na mikrokontroler, in navidezni potenciometri nam omogočajo spremembo višine, velikosti in smer disperzije. V simulaciji prikazujemo tudi grafe, ki nam izrisujejo trenutno vrednost potenciometrov ter hkrati omogočajo pregled spremembe vrednosti v krajšem časovnem obdobju. Omenjena rešitev omogoča priklop na anemometer z analognim izhodom in je pripravljena za nadaljnji razvoj (Popović in drugi, 2012). Sama rešitev nam tako dopušča nadaljnji razvoj. Namesto potenciometrov lahko priključimo anemometer, ki bo meril trenutno smer in moč vetra. Glede na to lahko v naši rešitvi izrišemo smer in velikost disperzije. V času razvoja je bil za prenos datotek na spletno stran uporabljen Apache HTTP strežnik, ki je na začetku razvoja rešitve omogočal lažji potek, vendar se je zaradi svojih omejitev kasneje izkazal za odvečnega, zato je bil za prenos datotek prav tako uporabljen Node.js strežnik. S tem smo omogočili lažjo modifikacijo za delovanje rešitve ter hkrati tudi povečal prenosljivost, ker se je sprostila potreba po dodatnem nalaganju Apache HTTP strežnika. Prednost rešitve je v uporabi odprtokodnih in dobro podprtih orodij. Na spletu je veliko primerov uporabe za potrebe nadaljnjega razvoja. Za razvoj naše reštive potrebujemo osnovno znanje programskega jezika JavaScript in HTML. Rešitev je prijazna tudi uporabnikom, saj z neodvisnostjo od operacijskega sistema in naprave omogoča široko uporabnost.



LITERATURA

Arduino IDE, http://www.arduino.cc/en/Main/Software (10.5.2015)

Arduino Uno, http://www.arduino.cc/en/Main/ArduinoBoardUno (10.5.2015)

Firmata, http://www.arduino.cc/en/Reference/Firmata (16.5.2015)

Google Maps, https://www.google.si/maps/place/Fakulteta+za+Organizacijske+Vede/@46.2516142,14.3484,424m/data=!3m1!1e3!4m2!3m1!1s0x477ab83d3b46b129:0x4c8999ad6edd8828?hl=sl (16.5.2015)

HTTP dogodki, https://nodejs.org/api/http.html#http_event_request (29.5.2015)

jQuery, https://jquery.com (29.5.2015)

jQuery-UI, https://jqueryui.com (29.5.2015)

Kljajić, M.; Bernik, I.; Škraba, A. (2000). Simulation approach to decision assesment in enterprises. Simulation, Vol. 75 No. 4, strani 79-210.

Matrika Vrtenja, http://www.mathpages.com/home/kmath593/kmath593.htm (24.5.2015)

Node.js, https://nodejs.org (16.5.2015)

orbitCotrols, https://gist.github.com/mrflix/8351020 (29.5.2015)

Popović, V.; Stojanović, R.; Dragović, M.; Kovačević, J.; Škraba, A.; Berkowicz, S.; De Amicis, R.; Cerović, M. (2012). Hardware-software system for simulation of hazardous gas releases. V: [1st] Mediterranean Conference on Embedded Computing (MECO), June 19th-20st, 2012, Bar,

Montenegro, strani 6265.

Socket.io, http://socket.io (16.5.2015)

Three.js, https://github.com/mrdoob/three.js/ (16.5.2015)

Three.js, http://threejs.org (29.5.2015)

WindowsResize, https://github.com/jeromeetienne/threex.windowresize (29.5.2015)

Š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, Vol. 19 No. 3, strani 24363.

Škraba, A.; Kljajić, M.; Papler, P.; Kofjač, D.; Obed, M. (2011). Determination of recruitment and transition strategies. Kybernetes, Vol.

40, No. 9/10, strani 15031522.

Škraba, A.; Stojanović, R.; De Amicis, R.; Berkowicz, S.; Conti, G.; Elhanani, D.; Lekić, N.; Dragović, M.; Kofjač, D. (2012). Integrating air-pollution dispersion simulation models and GIS for urban air-pollution emergency management: Elektronski vir. V: 7th Vienna Conference on Mathematical Modelling, February 15-17, 2012, Vienna University of Technology, Austria, stran 4.

Škraba, A.; Koložvari, A.; Kofjač, D.; Stojanović, R. (2014). Prototype of speech controlled cloud based wheelchair platform for disabled persons. V: 3rd Mediterranean Conference on Embedded Computing (MECO), June

15th-19th, 2014, Budva, Montenegro, strani 162165.

http://www.arduino.cc/en/Main/ArduinoBoardUnohttps://nodejs.org/http://socket.io/https://github.com/mrdoob/three.js/http://threejs.org/https://github.com/jeromeetienne/threex.windowresize



KAZALO SLIK SLIKA 1: SHEMA SISTEMA ZA PRIKAZ LOKACIJE V 3D NA SVETOVNEM SPLETU .................................... 2 SLIKA 2: ARDUINO UNO MIKROKONTROLER .................................................................... 3 SLIKA 3: SKICA POVEZAVE POTENCIOMETROV Z MIKROKONTROLERJEM .......................................... 3 SLIKA 4: SHEMA PRIKLOPOV POTENCIOMETROV NA ARDUINO UNO .............................................. 4 SLIKA 5: ARDUINO UNO S POTENCIOMETRI V OHIŠJU Z USB PRIKLOPOM ........................................ 4 SLIKA 6: ARDUINO RAZVOJNO OKOLJE S SKEČEM STANDARDFIRMATA ........................................... 5 SLIKA 7: KVADRATNA MATRIKA ................................................................................. 6 SLIKA 8: POSODOBITEV OPERACIJSKEGA SISTEMA ............................................................... 7 SLIKA 9: UKAZI ZA NAMESTITEV PLATFORME NODE.JS .......................................................... 7 SLIKA 10: PRENOS NODE.JS ................................................................................... 8 SLIKA 11: UKAZI ZA NAMESTITEV NODE.JS ..................................................................... 8 SLIKA 12: NAMESTITEV FIRMATE ............................................................................... 8 SLIKA 13: NASTAVITEV STREŽNIKA ............................................................................. 9 SLIKA 14: PRIKLOP ARDUINA UNO NA NODE.JS ................................................................ 9 SLIKA 15: BRANJE ANALOGNE NOŽICE 0 ........................................................................ 9 SLIKA 16: SHRANJEVANJE VREDNOSTI V ZBIRKO .............................................................. 10 SLIKA 17: POŠILJANJE VREDNOSTI POTENCIOMETRA KLIENTU ................................................. 10 SLIKA 18: FUNKCIJA ZA PRENOS DATOTEK NA SPLETNO STRAN ................................................ 11 SLIKA 19: POVEZAVA S STREŽNIKOM ......................................................................... 13 SLIKA 20: BRANJE VREDNOSTI POTENCIOMETRA IN PRIKAZ VREDNOSTI V NAVIDEZNEMU POTENCIOMETRU ...... 13 SLIKA 21: 3D PRIKAZOVALNIK ................................................................................ 13 SLIKA 22: DEFINICIJA NOVE SCENE ........................................................................... 14 SLIKA 23: USTVARJANJE KAMERE ............................................................................ 14 SLIKA 24: USTVARJANJE TAL................................................................................. 14 SLIKA 25: KOORDINATNE OSI IN MREŽA ....................................................................... 14 SLIKA 26: FUNKCIJA ANIMATE() .............................................................................. 15 SLIKA 27: FUNKCIJA RENDER() ............................................................................... 15 SLIKA 28: MATRIKA ZA IZRIS TOČK ........................................................................... 16 SLIKA 29: NASTAVITVE TOČK ................................................................................ 16 SLIKA 30: ZANKA ZA IZRIS PIK ................................................................................ 17 SLIKA 31: ZANKA ZA IZRIS TOČK ............................................................................. 17 SLIKA 32: IZRIS LEVE POLOVICE LIKA ......................................................................... 18 SLIKA 33: IZRIS DESNE POLOVICE LIKA ........................................................................ 18 SLIKA 34: IZRIS ČRTE MED PREDZANJO IN ZADNJO PIKO ....................................................... 18 SLIKA 35: NAVIDEZNI POTENCIOMETRI ....................................................................... 19 SLIKA 36: NASTAVITVE NAVIDEZNIH POTENCIOMETROV ....................................................... 20 SLIKA 37: NASTAVITVE GRAFOV .............................................................................. 21 SLIKA 38: FUNKCIJA LOAD() ................................................................................. 21 SLIKA 39: FUNKCIJA LOOP() ................................................................................. 22 SLIKA 40: IZPIS VREDNOSTI NA GRAFU ........................................................................ 22 SLIKA 41: REKURZIVNA FUNKCIJA LOOP ...................................................................... 22 SLIKA 42: OBLIKOVANJE SPLETNE STRANI S CSS ............................................................. 23 SLIKA 43: ZAGON STREŽNIKA ................................................................................ 24 SLIKA 44: ZASLONSKA SLIKA ZAGONA STREŽNIKA ............................................................. 24 SLIKA 45: ZASLONSKA SLIKA BRSKALNIKA V MICROSOFT WINDOWS OKOLJU ................................... 25 SLIKA 46: ZASLONSKA SLIKA V LINUX UBUNTU OKOLJU ....................................................... 26 SLIKA 47: ZASLONSKA SLIKA NA WINDOWS PHONE 8.1 OKOLJU .............................................. 26



POJMOVNIK JavaScript: Programski jezik HTML: Programski jezik CSS: Programski jezik jQuery: JavaScript knjižnica z dodatnimi funkcijami jQuery-UI: JavaScript knjižnica z gradniki OpenGL: Knjižnica za renediranje grafike Apache HTTP strežnik: Odprtokodni strežnik, ki omogoča HTTP servise

KRATICE IN AKRONIMI CSS: Cascading Style Sheets: Jezik za oblikovanje spletnih strani HTML: Hyper Text Markup Language: Jezik za označevanje besedila



PRILOGE Priloge vsebujejo celotno programsko kodo končne različice sistema.

STREŽNIK Programska koda z nastavitvami strežnika, razvita v programskem jeziku JavaScript: var http = require('http').createServer(handler); var io = require(__dirname + '/node_modules/socket.io').listen(http), fs = require('fs'), firmata = require('/usr/local/lib/node_modules/firmata'), board = new firmata.Board('/dev/ttyACM0', arduinoReady); var nodeIP = '192.168.0.106'; var port = 1111; console.log('Please wait before connecting to site...'); var valueArray0= new Array(); var valueArray1= new Array(); var valueArray2= new Array(); function arduinoReady(err) { if (err) { console.log(err); return; } console.log('Firmware: ' + board.firmware.name + '-' + board.firmware.version.major + '.' + board.firmware.version.minor); console.log('Website is avaliable at ' + nodeIP + ':' + port +' ...'); } http.listen(port, nodeIP); console.log("Listening on http://" + nodeIP + ":" + port); function handler(req, res) { if (req.url.indexOf('.html') != -1) { fs.readFile(__dirname + '/../index.html', function (err, data) { if (err) console.log(err); res.writeHead(200, { 'Content-Type': 'text/html' }); res.write(data); res.end(); }); } else if (req.url.indexOf('.css') != -1) { var cssFileName = req.url.substring(req.url.indexOf('/')); fs.readFile(__dirname + '/../css/' + cssFileName, function (err, data) { if (err) console.log(err); res.writeHead(200, { 'Content-Type': 'text/css' }); res.write(data); res.end(); }); } else if (req.url.indexOf('.js') != -1) { var jsFileName = req.url.substring(req.url.indexOf('/')); fs.readFile(__dirname + '/' + jsFileName, function (err, data) { if (err) console.log(err); res.writeHead(200, { 'Content-Type': 'text/css' }); res.write(data); res.end(); }); } else if (req.url.substring(req.url.indexOf('/')) == '/bg4use.png') { fs.readFile(__dirname + '/../bg4use.png', function(err, data) { if (err) console.log(err);



res.writeHead(200, { 'Content-Type': 'text/css' }); res.write(data); res.end(); }); } else { res.writeHead(200); res.end(); } } io.sockets.on('connection', function(socket) { board.analogRead(0, function(value) { var vsota = 0; if (valueArray0.length < 5) { valueArray0.push(parseInt(value)); } else { valueArray0.shift(); valueArray0.push(parseInt(value)); for (var i = 0; i < valueArray0.length; i++) { vsota += valueArray0[i]



} }); socket.send('connected...'); socket.on('disconnect', function() { socket.send('disconnected...'); }); });

KLIENT Programska koda za prikaz spletne strani, razvita v programskih jezikih HTML in JavaScript: Diplomska naloga - Luka Škerjanec Vrednost X slider-ja: 512 Vrednost X potenciometra:



Vrednost Y slider-ja: 512 Vrednost Y potenciometra:
Vrednost Z slider-ja: 512 Vrednost Z potenciometra:

X:
Y:
Z: var potVrednost0 = 0, potVrednost1 = 0, potVrednost2 = 0; var vrednostx = 0, vrednosty = 0, vrednostz = 0; var vrednostx1 = 0, vrednosty1 = 0, vrednostz1 = 0; var valSliderX = 0, valSliderY = 0, valSliderZ = 0; var textureImg = "null"; var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); var container = document.getElementById("ThreeJS"); container.appendChild(renderer.domElement); renderer.setClearColor(0xEEEEEE, 1.0); renderer.clear(); var scene = new THREE.Scene(); var fov = 60; var width = renderer.domElement.width; var height = renderer.domElement.height; var aspect = width / height; var near = 1; var far = 2500; var camera = new THREE.PerspectiveCamera(fov, aspect, near, far); camera.position.x = 0; camera.position.y = 40; camera.position.z = 0; var controls = new THREE.OrbitControls(camera, container); scene.add(camera);



THREEx.WindowResize(renderer, camera); camera.lookAt(scene.position); camera.rotation.z = 0 * Math.PI / 180; //plane s sliko (VIR: Google Maps) var material = new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture("http://192.168.0.106:1111/bg4use.png", {}, function () { renderer.render(scene, camera); }) }); material.needsUpdate = true; var geometry = new THREE.PlaneGeometry(400, 400, 0); var plane = new THREE.Mesh(geometry, material); plane.rotation.x = 90 * Math.PI / 180; plane.material.side = THREE.DoubleSide; scene.add(plane); var axes = new THREE.AxisHelper(750); scene.add(axes); var gridHelper = new THREE.GridHelper(200, 20); scene.add(gridHelper); var oldValueX = 1; var oldValueZ = 1; var oldValueY = 0; var circleId = []; var lineId = []; function drawDotsLines(slidervalueX, slidervalueY, slidervalueZ) { if (oldValueX == slidervalueX && slidervalueZ === oldValueZ && slidervalueY === oldValueY) { return; } oldValueX = slidervalueX; oldValueZ = slidervalueZ; oldValueY = slidervalueY; if (slidervalueY == 0) slidervalueY = 1; if (slidervalueZ == 0) { slidervalueZ = 1; } slidervalueY = slidervalueY / 30; var alphaKot = Math.round((slidervalueX === 0 ? 0 : slidervalueX / 2.845)); var theta = Math.round(((alphaKot * Math.PI / 180) * 1000)) / 1000; var array = [ [0, 0, 0, 0, 1, 0, 0, 0, 0, 0], [0, 0, 0, 1, 0, 1, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 1, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 1, 0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 1, 0, 0, 0], [0, 0, 0, 1, 0, 1, 0, 0, 0, 0], [0, 0, 0, 0, 1, 0, 0, 0, 0, 0] ]; var material = new THREE.MeshBasicMaterial({ color: 0x000000 });



material.side = THREE.DoubleSide; var radius = 0.25; var segments = 32; var circleGeometry = new THREE.CircleGeometry(radius, segments); var xPoints = []; var zPoints = []; var tranPointX = 0; var tranPointY = 0; var offsetPointX = 4; var offsetPointY = 0; var scaleValue = 1 + ((slidervalueZ / 68)); var scaleX = scaleValue; var scaleY = scaleValue; for (var i = array.length - 1; i >= 0; i = i - 1) { for (var j = array.length - 1; j >= 0; j = j - 1) { if (array[i][j] !== 0) { var point1 = ((j * scaleX) - tranPointX) - offsetPointX * scaleX; var point2 = ((i * scaleY) - tranPointY) - offsetPointY * scaleY; var point1t = ((point1 * Math.cos(theta)) + (point2 * -Math.sin(theta))); var point2t = ((point1 * Math.sin(theta)) + (point2 * Math.cos(theta))); point1 = Math.round((point1t + tranPointX) * 100) / 100; point2 = Math.round((point2t + tranPointY) * 100) / 100; xPoints.push(point1); zPoints.push(point2); } } } clearObjects(); for (i = 0; i < xPoints.length; i = i + 1) { var circle = new THREE.Mesh(circleGeometry, material); circle.position.set(xPoints[i], slidervalueY, zPoints[i]); circle.rotation.x = -Math.PI / 2; scene.add(circle); circleId.push(circle.id); } var lineGeometry = new THREE.Geometry(); var lineMaterial = new THREE.LineBasicMaterial({ color: 0xF600FF }); var line = new THREE.Line(lineGeometry, lineMaterial); for (var i = 0; i < zPoints.length; i = i + 2) { lineGeometry.vertices.push(new THREE.Vector3(xPoints[i], slidervalueY, zPoints[i])); scene.add(line); lineId.push(line.id); } for (var i = zPoints.length - 1; i > 0; i = i - 2) { lineGeometry.vertices.push(new THREE.Vector3(xPoints[i], slidervalueY, zPoints[i])); scene.add(line); lineId.push(line.id); }



lineGeometry.vertices.push(new THREE.Vector3(xPoints[0], slidervalueY, zPoints[0])); scene.add(line); lineId.push(line.id); } function clearObjects() { for (var i = 0; i < circleId.length; i++) { scene.remove(scene.getObjectById(circleId[i])); } for (var i = 0; i < lineId.length; i++) { scene.remove(scene.getObjectById(lineId[i])); } circleId = []; lineId = []; } function animate() { //x-os if (vrednostx != vrednostx1) { vrednostx1 = vrednostx; valSliderX = vrednostx; $("#sliderx").slider("value", valSliderX); } else { $(function() { vrednostSliderx = $("#vrednostSliderx"); vrednostSliderx.html(valSliderX); $(valSliderX).on("change", function() { vrednostSliderx.html(this.value); }); }); } //Y-os if (vrednosty != vrednosty1) { vrednosty1 = vrednosty; valSliderY = vrednosty; $("#slidery").slider("value", valSliderY); } else { $(function() { vrednostSlidery = $("#vrednostSlidery"); vrednostSlidery.html(valSliderY); $(valSliderY).on("change", function() { vrednostSlidery.html(this.value); }); }); } //Z-os if (vrednostz != vrednostz1) { vrednostz1 = vrednostz; valSliderZ = vrednostz; $("#sliderz").slider("value", valSliderZ); } else { $(function() { vrednostSliderz = $("#vrednostSliderz"); vrednostSliderz.html(valSliderZ); $(valSliderZ).on("change", function() { vrednostSliderz.html(this.value); }); }); } drawDotsLines(valSliderX, valSliderY, valSliderZ); renderer.clear(); render();



var canvas1, ctx1; var canvas2, ctx2; var x = new Array(); var y = new Array(); var x1 = new Array(); var y1 = new Array(); var x2 = new Array(); var y2 = new Array(); function load() { canvas = document.getElementById("cv"); canvas1 = document.getElementById("cv1"); canvas2 = document.getElementById("cv2"); ctx = canvas.getContext("2d"); ctx.lineWidth = "2"; ctx.strokeStyle = "red"; ctx.moveTo(0, 0); ctx1 = canvas1.getContext("2d"); ctx1.lineWidth = "2"; ctx1.strokeStyle = "green"; ctx1.moveTo(0, 0); ctx2 = canvas2.getContext("2d"); ctx2.lineWidth = "2"; ctx2.strokeStyle = "blue"; ctx2.moveTo(0, 0); for (i = 0; i < 100; i++) { x[i] = i; x1[i] = i; x2[i] = i; ctx.lineTo(x, y[i]); ctx1.lineTo(x1, y1[i]); ctx2.lineTo(x2, y2[i]); } ctx.stroke(); ctx1.stroke(); ctx2.stroke(); loop(); } function loop() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); y.splice(0, 1); y[99] = potVrednost0; ctx1.clearRect(0, 0, canvas1.width, canvas1.height); ctx1.beginPath(); y1.splice(0, 1); y1[99] = potVrednost1; ctx2.clearRect(0, 0, canvas2.width, canvas2.height); ctx2.beginPath(); y2.splice(0, 1); y2[99] = potVrednost2; ctx.moveTo(x[0], y[0]); ctx1.moveTo(x1[0], y1[0]); ctx2.moveTo(x2[0], y2[0]);



for (i = 0; i < 100; i++) { ctx.lineTo(x[i], (y[i] / 1023) * 100); ctx1.lineTo(x1[i], (y1[i] / 1023) * 100); ctx2.lineTo(x2[i], (y2[i] / 1023) * 100); } ctx.stroke(); ctx.fillText(potVrednost0, 1, 10); ctx.fillText("0", 93, 10); ctx.fillText("1023", 73, 97); ctx1.stroke(); ctx1.fillText(potVrednost1, 1, 10); ctx1.fillText("0", 93, 10); ctx1.fillText("1023", 73, 97); ctx2.stroke(); ctx2.fillText(potVrednost2, 1, 10); ctx2.fillText("0", 93, 10); ctx2.fillText("1023", 73, 97); setTimeout(loop, 100); } $(function() { $("#sliderx").slider({ min: 0, max: 1023, value: valSliderX, slide: function(event, ui) { $("#vrednostSliderx").text(ui.value); valSliderX = ui.value; } }); }); $(function() { $("#slidery").slider({ min: 0, max: 1023, value: valSliderY, slide: function(event, ui) { $("#vrednostSlidery").text(ui.value); valSliderY = ui.value; } }); }); $(function() { $("#sliderz").slider({ min: 0, max: 1023, value: valSliderZ, slide: function(event, ui) { $("#vrednostSliderz").text(ui.value); valSliderZ = ui.value; } }); });



OBLIKOVANJE SPLETNE STRANI Programska koda za oblikovanje spletne strani v programskem jeziku CSS: body { overflow: hidden; } #ThreeJS { width: 100%; height: 100%; position: absolute; top: 0; left: 0; /*visibility: hidden;*/ } #ThreeJS { z-index: 0; } #cv, #cv1, #cv2 { position: relative; z-index: 1; } fieldset { background-color: rgba(255, 255, 255, 0.5); position: absolute; z-index: 1; bottom: 5px; left: 5px; width: 430px; min-height: 200px; height: 200px; box-shadow: 2px 10px 10px #888888; } #sliderx, #slidery, #sliderz { margin-left: 37px; margin-right: auto; margin-top: -16px; width: 86%; } .PotValue { text-align: center; width: 40px; border: solid 1px #888888; border: solid 1px rgba(136, 136, 136, 0.3); } .ui-slider-handle { background-color: #EEEEEE; }

razvoj modula za interaktivni prikaz lokacije ...grafičnega prikaza lokacije. rešitev omogoča...

Documents