Programski del je sestavljen iz treh delov: zajema slike, prenosa slik v živo, ter povratne komunikacije, s katero nadzorujemo izhode na RPi. Sistem je zgrajen iz dveh programov, prvi za zajem in prenos slike, ter drugi za prikazovanje uporabniškega vmesnika in nadzor izhodov. Bolj podrobno pa je struktura sistema opisana v nadaljnjih poglavjih.
4.2.1 Struktura sistema
Struktura povezav programske in strojne opreme je prikazana na sliki 4.2.
Programska oprema je sestavljena iz dveh enot (na sliki 4.2 je to vidno znotraj Raspberry Pi pravokotnika).
Prva enota programske opreme je namenjena komunikaciji s kamero, pri-pravi slik za prenos, ter samemu prenosu toka slik preko spleta; na sliki je to levi pravokotnik z naslovomStrežnik za oddajanje toka slik.
Druga enota pa skrbi za dve funkciji, prva je namenjena prikazu spletne
24 Urban Matko aplikacije uporabniku, druga pa je namenjena upravljanju izhodov na podlagi uporabnikovega ukaza; enota je vidna v desnem pravokotniku Strežnik za nadzor vhodno-izhodnih enot in gostovanje aplikacije.
Slika 4.2: Diagram strukture sistema
Diplomska naloga 25
4.2.2 Program za zajem slike
Program za zajem slike je napisan v programskem jeziku Python. Njegova naloga je zajem slik preko priključene kamere ter oddajanje zajetega toka slik preko protokola spletnih vtičnic.
Glavne komponente tega programa so knjižnice za komunikacijo s kamero, vzpostavitev strežnika HTTP in omogočanje komunikacije preko protokola spletnih vtičnic.
Prvi del tega sklopa je zajem slik preko kamere. Zaradi uporabe kamere, ki je namenjena uporabi z RPi, ni bilo težav s komunikacijo. Kamera namreč ima že vgrajeno vso potrebno podporo, treba je le omogočiti komunikacijo do vmesnika. Komunikacija poteka po standardu CSI, ki določa povezavo med kamero in procesorjem slike.
Po vzpostavljeni komunikaciji je bilo potrebno vključiti knjižnico in omo-gočiti zajemanje slike, pri čemer se določi ločljivost zajemanja, število zajetih sličic na sekundo ter format, v katerem kamera zajema; podrobnejše vredno-sti so opisane v nadaljevanju.
Za prenosni format je izbran MJPEG, saj omogoča visoko kakovost pre-nosa slike, kljub temu pa je robusten do te mere, , da tudi kakšna manjkajoča sličica ne vpliva preveč opazno na prikaz.
1 w i t h piC . PiCamera ( r e s o l u t i o n= ’ 800 x450 ’ ,
Zgornja koda prikazuje inicializacijo kamere, pri kateri se je določila op-timalna ločljivost 800 x 450 slikovnih točk. Takšna ločljivost zagotavlja
kva-26 Urban Matko liteto slike, s katere so še vedno razvidni ključni objekti. Zaradi izbrane ločljivosti se lahko prenaša 24 slik na sekundo, kar je dovolj, da človeško oko zazna skupek sličic kot “živo” celoto in ne vsako posebej.
Ko se kamera inicializira v vrstici 1, se v spremenljivko output nastavi razred, ki omogoča predpomnjenje v vrstici 2. Ob nastavitvi vseh parametrov kamera začne z zajemanjem slik, pri čemer se določi še format zajemanja v vrstici 3. Po uspešnem začetku zajemanja začnemo z oddajanjem slik, kot je prikazano v vrstici 4 in 5, ob napaki pa prekinemo zajem slik v vrstici 6 in 7.
Diplomska naloga 27
4.2.3 Programiranje strežnika za oddajanje toka slik
Program za oddajanje toka slik, je vključen v del glavnega programa za zajemanje slike preko kamere. Za svoje delovanje uporablja komunikacijska protokola HTTP ter protokol spletnih vtičnic, ki omogočajo oddajanje toka slik prenosa s čim manjšo zakasnitvijo.
Večji del kode predstavlja vzpostavitev strežnika HTTP, ki oddaja tok slik na določenem naslovu.
Strežniku je bilo potrebno določiti, po katerem naslovu lahko uporabnik oziroma spletna aplikacija dostopa do oddajanega toka slik. Do njega se dostopa preko http://ip:8000/stream.mjpg.
Ob klicu na lokacijo, kjer se oddajajo slike, je najprej potrebno kreiranje glave paketa HTTP. V glavi določimo parametre pošiljanja, kakšen je tip poslane vsebine, spodaj v vrstici 1 ter kakšna je njegova velikost, prikazano spodaj v vrstici 2.
1 s e l f . send_header ( ’ Content−Type ’ , ’ image / j p e g ’ ) 2 s e l f . send_header ( ’ Content−Length ’ , len( frame ) )
Ko je začetna konfiguracija končana, se lahko s pomočjo glav HTTP omo-goči oddajanje toka slik po spletu.
1 a d d r e s s = ( ’ ’ , 8 0 0 0 )
2 s e r v e r = S t r e a m i n g S e r v e r ( a d d r e s s , S t r e a m i n g H a n d l e r )
3 s e r v e r . s e r v e _ f o r e v e r ( )
28 Urban Matko
4.2.4 Prikaz slike uporabniku
Zajete slike preko priključene kamere, se stalno oddajajo preko strežnika. Do samega prenosa toka slik dostopamo preko IP-naslova RPi in dodanih vrat 8000, na primer http://192.168.1.2:8000.
Cilj sistema je poleg prenosa slike omogočiti tudi upravljanje z izhodi na RPi. Prikaz toka slik in upravljanje z izhodi je bilo omogočeno z datoteko HTML. V tej datoteki je definirano ogrodje videza aplikacije, dodatno pa je bila oblikovana s pomočjo predloge CSS.
V img element se vstavi naslov IP, kjer se oddaja tok slik, s tem pa se omogoči njegov prikaz uporabniku.
1 < !DOCTYPE html>
2 <html>
3 <body>
4 <div c l a s s=" c o n t a i n e r ">
5 <img
s r c=" h t t p : / / { i p } : 8 0 0 0 / s t r e a m . mjpg "
id=" s t r e a m ">
6 </div>
7 </body>
8 </html>
Diplomska naloga 29 Ker naslov IP RPi ni nastavljen statično in element potrebuje trenuten naslov strežnika, se to izvede s pomočjo okolja Node.js. V okolju se opravi poizvedba o naslovu IP strežnika, ki se nato vstavi v datoteko HTML. Naslov IP se v kodo vstavi v vrstici 3 v spodnji kodi, s funkcijo replace(), ki najde v kodi oznako {ip}, na mesto katere vstavi naslov IP naprave, pridobljen s funkcijo ip.address().
1 f s . r e a d F i l e ( __dirname+ ’ / a l l . html ’ , f u n c t i o n ( e r r , d a t a ) {
2 r e s . w r i t e H e a d ( 2 0 0 ,
{ ’ Content−Type ’ : ’ t e x t / html ’ } ) ; 3 d a t a = d a t a . t o S t r i n g ( )
. r e p l a c e ( " { i p } " , i p . a d d r e s s ( ) ) ; 4 r e s . w r i t e ( d a t a ) ;
5 return r e s . end ( ) ;
6 } ) ;
30 Urban Matko
4.2.5 Program za izpolnitev uporabnikovega ukaza
Osnovna ideja sistema je prenos toka slik ter omogočanje nadzora izhodov na RPi preko uporabnikovih ukazov. Za slednji del so uporabljeni okolje Node.js ter združljive knjižnice.
Glavni del te implementacije je stalna komunikacija s strežnikom, ki omo-goča upravljanje z izhodi. Taka funkcionalnost je izvedena s pomočjo knjižnic Node.js, ki omogočajo komunikacijo HTTP preko protokola spletnih vtičnic.
Za to nalogo sta primerni knjižnici HTTP in socket.io.
Knjižnica HTTP omogoča vzpostavitev strežnika, ki prikazuje spletno stran, poleg HTTP je bila uporabljena še knjižnica FS (file system), ki omo-goča serviranje datoteke HTML ob uporabnikovem zahtevku.
Knjižnica Socket.io omogoča stalno komunikacijo in “poslušanje” za mo-rebitnimi ukazi, poslanimi s strani uporabnika. Uporabnik morebitni ukaz pošlje s pomočjo gumba in potrditvenega polja. Ko se izvede pritisk na gumb, to uporabniški vmesnik posreduje zalednemu sistemu. Za zagotovitev povezave med uporabnikom in zalednim sistemom prav tako skrbi knjižnica socket.io, ki pa v tem primeru pošilja ukaze. Komunikacija poteka ločeno od toka slik, konkretno strežnik za upravljanje z izhodi “posluša” na vratih 9000.
c l a s s=" buttonMove ">
7 </p>
8 </div>
Diplomska naloga 31 Za spremembo položaja se mora najprej inicializirati povezava do stre-žnika. Inicializacija se aktivira s pomočjo ukazaio(), ki poveže odjemalca do strežnika, s katerega je bila servirana aplikacija.
1 v a r s o c k e t = i o ( ) ;
Ko se vzpostavi povezava, lahko odjemalec čaka na pritisk gumba. V primeru, da se ta izvede, se preko spletnih vtičnic pošlje sporočilo za spre-membo. Vrednost pa se določi ob pritisku gumba; ali je vrednost drži (angl.
true) oziroma ne drži (angl. false).
1 window . a d d E v e n t L i s t e n e r ( " l o a d " , f u n c t i o n ( ) { 2 v a r l i g h t b o x = document
. getElementById ( " l i g h t " ) ; 3
4 l i g h t b o x
. a d d E v e n t L i s t e n e r ( " change " , f u n c t i o n ( ) {
5 s o c k e t
. e m i t ( " l i g h t " , Number ( t h i s . c h e c k e d ) ) ;
6 } ) ;
7 } )
32 Urban Matko
4.2.6 Programiranje uporabniškega vmesnika
Glavni funkcionalnosti uporabniškega vmesnika sta prikaz toka slik ter mo-žnost zajema uporabnikovega vnosa.
Za osnovno delovanje se na uporabniškem vmesniku nahajajo: element za prikaz slike in nadzor izhoda ter dva gumba, ki pošiljata signal premika servomotorja.
Ker mora biti uporabniški vmesnik intuitiven in enostaven za uporabo, je zasnovan na kar se da enostaven način, saj uporabnik določi premik smeri kamere s pritiskom na sliko, za aktivacijo izhoda pa samo pritisne v center slike in ga s tem sproži. Uporabniški vmesnik je prikazan na sliki 4.3.
Za lažjo predstavo položaja servomotorja je na zgornjem delu položaj predstavljen s pomočjo zapolnjenega pravokotnika. Uporabniški vmesnik dobi povratno informacijo o položaju vsakič, ko uporabnik pošlje ukaz. Na podlagi prejete informacije se obarva ustrezna celica.
Slika 4.3: Prikaz grafičnega uporabniškega vmesnika
Diplomska naloga 33 Tovrstno zasnovo vmesnika omogoča uporaba predloge CSS, pri kateri je bilo treba skriti običajne gumbe ter jih raztegniti čez smiselne dele prikaza toka slik.
V aplikaciji se nahajajo trije gumbi. Gumba, ki upravljata smer imata skupni class atribut, ki je opisan zgoraj v vrsticah 5 do 13. V tem atributu class je določena osnovna postavitev gumbov v vrsticah 6 in 7, ter njegovo oblikovanje v vrsticah 9 do 13. Gumba sta prozorna in brez obrobe, ter široka petindvajset odstotkov celotne širine prikazanega območja. Dodano je oblikovan še desni gumb, ki je zamaknjen petinsedemdeset odstotkov v desno, od tam pa sega do konca prikazanega območja aplikacije.
34 Urban Matko Težava, ki se je pojavila, je bila tudi avtomatsko približevanje ob večkra-tnem hitrem pritisku ob uporabi aplikacije na mobilnih napravah. To funkci-onalnost je bilo možno onemogočiti z uporabo meta značke, ki je približevanje izklopila. Koda, ki je onemogočila približevanje je prikazana spodaj.
1 <meta name=’ viewpor ’
content=’width=d e v i c e−width,
Predstavljen sistem je namenjen nemotenemu in samostojnemu delovanju.
Slednje je omogočeno s samodejnim zagonom sistema in potrebnih kompo-nent.
V primeru nenadnega izklopa oziroma ponovnega zagona se sistem sa-mostojno prižge z vsemi potrebnimi komponentami. Samodejni zagon je bil omogočen s spremembo zagonske datotekerc.local v operacijskem sistemu.
Zagonska datoteka se izvede, preden se začnejo izvajati ostali procesi. V tej datoteki je bil dodan ukaz, ki pove, kako naj se program zažene ter kje se programska datoteka nahaja. Za delovanje sistema je bilo potrebno zagnati dve komponenti. Prva komponenta je namenjena oddajanju toka slik, druga pa prikazu spletne aplikacije.
Zagonska datoteka se lahko ureja preko spodnjega ukaza, pri čemer mora imeti uporabnik administratorske pravice.
sudo nano / e t c / r c . l o c a l
V zagonsko datoteko se dodata ukaza, ki zaženeta obe programski kom-ponenti. Posebnost pri ukazih je dodan znak &, ki zažene program v novem
Diplomska naloga 35 procesu. To je nujno, saj obe komponenti ves čas delujeta in se brez uporabe znaka druga komponenta ne bi pričela izvajati.
sudo python3 /home/ p i / s t r e a m . py &
sudo node /home/ p i / page . j s &
36 Urban Matko