-
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.
-
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 2
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
-
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 3
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
-
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 4
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
-
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 5
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.
-
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 6
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
-
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 7
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
-
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 8
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
-
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 9
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
-
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 10
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]
-
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 11
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
-
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 12
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).
-
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 13
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):
-
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 14
var scene = new THREE.Scene();
Slika 22: Definicija nove scene
V naslednjem koraku ustvarimo kamero, nastavimo pozicijo in
pogled na naše vidno polje in na koncu dodamo kamero na sceno
(Slika 23):
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; scene.add(camera);
Slika 23: Ustvarjanje kamere
Na sceni potrebujemo tla, zato jih dodamo z uporabo objekta
plane. Tla bodo predstavljala del karte (Google Maps, 16.5.2015).
Nastavimo velikost, jih ustrezno zavrtimo ter nastavimo teksturo,
ki jo pridobimo s strežnika. Ustvarjena tla na koncu dodamo na
sceno (Slika 24):
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);
Slika 24: Ustvarjanje tal
Za lažjo orientacijo v 3D prostoru bomo dodali še grafični
prikaz koordinatnih osi (X, Y, Z), za boljšo preglednost nad
prostorom pa bomo dodali še mrežo (Slika 25):
var axes = new THREE.AxisHelper(750); scene.add(axes); var
gridHelper = new THREE.GridHelper(200, 20);
scene.add(gridHelper);
Slika 25: Koordinatne osi in mreža
-
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 15
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()
-
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 16
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
-
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 17
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
-
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 18
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
-
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 19
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
-
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 20
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
-
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 21
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()
-
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 22
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
-
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 23
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
-
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 24
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):
-
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 25
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
-
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 26
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
-
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 27
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.
-
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 28
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
-
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 29
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
-
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 30
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
-
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 31
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);
-
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 32
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]
-
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 33
} }); 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:
-
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 34
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);
-
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 35
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 });
-
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 36
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);
}
-
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 37
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();
-
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 38
window.requestAnimationFrame(animate, renderer.domElement); };
function render() { renderer.render(scene, camera);
controls.update(); } animate(); $(function () { var socket =
io.connect("http://192.168.0.106:1111"); socket.on("klientBeri0",
function (value) { potVrednost0 = value; $(function () { var
outputPotenciometer1 = $("#output_potenciometer1");
outputPotenciometer1.html(potVrednost0);
$(potVrednost0).on("change", function () {
outputPotenciometer1.html(this.value); }); }); if (!(potVrednost0
< (vrednostx + 3) && potVrednost0 > (vrednostx - 3)))
{ vrednostx = potVrednost0; } }); socket.on("klientBeri1", function
(value) { potVrednost1 = value; $(function () { var
outputPotenciometer2 = $("#output_potenciometer2");
outputPotenciometer2.html(potVrednost1);
$(potVrednost1).on("change", function () {
outputPotenciometer2.html(this.value); }); }); if (!(potVrednost1
< (vrednosty + 3) && potVrednost1 > (vrednosty - 3)))
{ vrednosty = potVrednost1; } }); socket.on("klientBeri2", function
(value) { potVrednost2 = value; $(function () { var
outputPotenciometer3 = $("#output_potenciometer3");
outputPotenciometer3.html(potVrednost2);
$(potVrednost2).on("change", function () {
outputPotenciometer3.html(this.value); }); }); if (!(potVrednost2
< (vrednostz + 3) && potVrednost2 > (vrednostz - 3)))
{ vrednostz = potVrednost2; } }); }); //graf var canvas, ctx;
-
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 39
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]);
-
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 40
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; } });
});
-
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 41
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; }