V sistemu je bil največji del programske opreme izveden s programskim je-zikom Python in skriptnim jeje-zikom JavaScript. S pomočjo teh jezikov je bil napisan strežniški del sistema, ki prenaša sliko in nadzoruje delovanje izhodov.
Podporno sta bila uporabljena še označevalni jezik HTML za izdelavo strukture uporabniškega vmesnika ter kaskadni jezik CSS za dodajanje obli-kovanja.
3.3.1 Programski jezik Python
Python je univerzalni programski jezik, ki ga je leta 1990 ustvaril Guido van Rossum. Python odlikujejo mnoge vgrajene funkcionalnosti, za katere programerju ni treba skrbeti, prav zato je zelo popularen med začetniki v programiranju. V svojem jedru ima že vgrajene dinamične podatkovne tipe, sam upravlja pomnilnik ter ima omogočeno podporo za objektno programi-ranje. Python je zelo univerzalen programski jezik, saj se uporablja za reše-vanje široke skupine problemov, od najenostavnejših, na primer učenja novih programerjev, do analiziranja velike količine podatkov in strojnega učenja.
Uporablja se tudi na področjih programiranja grafičnih vmesnikov, razvoja spletnih aplikacij in avtomatizacije delovnih procesov.
V našem sistemu se je Python uporabil za sprejemanje zajetih slik preko priključene kamere in njihovo pošiljanje preko spleta. Izbran je bil na podlagi njegove preproste uporabe ter podpore s strani velikega števila knjižnic, ki omogočajo hitrejši razvoj. V nadaljevanju bosta opisani glavni knjižnici, ki sta omogočili zajem ter prenos slik preko spleta.
Knjižnica picamera[3] v sistemu omogoča zajem slike s kamero, ki je pri-ključena na RPi. S knjižnico v programu stalno zajemamo slike, ki se nato pošiljajo preko spleta. Lahko tudi določimo koliko slik bomo zajeli na se-kundo, s kakšno kakovostjo in v katerem formatu.
Za prenos slik po protokolu spletnih vtičnic (angl. websocket protocol)
Diplomska naloga 13 je bila uporabljena knjižnica socketserver[4]. S knjižnico se vzpostavi spletni strežnik, ki oddaja zajete slike s priključene kamere. Tok slik lahko pregle-dujemo preko IP naslova RPi.
3.3.2 Označevalni jezik HTML
HTML je jezik namenjen označevanju besedila, ki se uporablja predvsem v razvoju spletnih strani in spletnih aplikacij. Uporabljen pa je tudi v razvoju univerzalnih aplikacij, ki se lahko prevedejo v program, namenjen za različne platforme.
HTML gradi strukturo spletne aplikacije, ki ji nato dodamo funkcional-nost in oblikovanje. Za oblikovanje strukture se uporablja predloga CSS, funkcionalnost pa dodamo s pomočjo jezika JavaScript in drugih program-skih jezikov.
Dokument HTML je zasnovan iz treh glavnih delov, značke <html>, ki vsebuje celotno strukturo, ter značk <head >in <body>.
1 < !DOCTYPE html>
V značko <head>se zapiše naslov strani, ki se prikaže v zavihku, doda se sklic na druge datoteke ter meta značke s posebnimi parametri. V iz-rednih primerih se lahko doda celotno oblikovanje v značke <style>. Same značke se zapisujejo v obliki imena in lomljenega oklepaja na začetku in koncu
14 Urban Matko imena, na primer <div>. Elementom se lahko dodajo različni parametri in identifikacije. Element se lahko tudi do neke mere oblikuje neposredno v znački,vendar to ni priporočljivo in se raje celotna datoteka globalno ureja v predlogi CSS, na katero se sklicuje v glavi HTML datoteke.
Primer sklicevanja na predlogo CSS lahko vidimo spodaj, pri čemer v znački link dodamo atribute rel, v katerem povemo kakšno povezavo imata datoteki, type, kjer povemo na kakšno datoteko se sklicujemo, ter href, ki pove, kje se predloga nahaja in njeno ime.
1 <l i n k r e l=" s t y l e s h e e t " type=" t e x t / c s s "
href=" s t i l . c s s ">
Elementi se lahko identificirajo s pomočjoid atributa, ki enolično identi-ficira en element.
1 <input type=" checkbox " id=" l i g h t ">
Identifikacijo elementov lahko opravimo tudi skupinsko s pomočjo atri-butaclass, ki ga lahko določimo več elementom in se kasneje skupno spremi-njajo.
1 <input type=" b u t t o n " id=" s e r v o "
c l a s s=" buttonMove ">
2 <input type=" b u t t o n " id=" s e r v o d e s n o "
c l a s s=" buttonMove ">
3.3.3 Slogovni jezik CSS
CSS je stilska predloga, s katero se lahko dodatno in preglednejše oblikuje videz strukture HTML na spletni strani. Lastnosti elementov se določijo preko slogovnega jezika. V datoteki CSS definiramo, kateri element oziroma skupino elementov bi radi oblikovali, nato pa se v zavitih oklepajih definira oblikovanje. Oblikovanje se razlikuje po posameznih tipih elementa. Vsak element ima svoje posebne lastnosti, ki jih definiramo v datoteki CSS.
Element na spletni strani lahko enolično identificiramo z id atributom v HTML datoteki.
Diplomska naloga 15 1 <div id=" i d E l e m e n t a ">Primer uporabe i d</div>
Preko dodanega id atributa pa v datoteki CSS enolično oblikujemo.
1 #i d E l e m e n t a { 2 c o l o r : r e d ;
3 }
V primeru da želimo oblikovati skupino elementov na enak način, upora-bimo atribut class. Ta atribut se uporablja podobno kot id, s to razliko, da se lahkoclass imenuje enako na več elementih.
V HTML datoteki dodamo class atribut z imenom.
1 <div c l a s s=" c l a s s E l e m e n t a ">
Preko imena dodeljenega class atributu lahko nato oblikujemo elemente v CSS datoteki.
1 . c l a s s E l e m e n t a { 2 c o l o r : r e d ;
3 }
Standardne elemente se lahko oblikuje preko njihovega imena brez kakr-šnegakoli predpisovanja znakov.
1 <p>Primer uporabe o b l i k o v a n j a p r e k o HTML z n a c k e</p>
V CSS datoteki se nanje sklicujemo preko imena elementa.
1 p {
2 c o l o r : r e d ;
3 }
16 Urban Matko
3.3.4 Skriptni jezik JavaScript
JavaScript je skriptni jezik, ki je bil primarno razvit za dodajanje interak-tivnosti na spletni strani. Je objektni jezik, ki je tesno povezan s strukturo spletne strani HTML in jo dopolnjuje z dodatnimi funkcionalnostmi: od dodajanja in skrivanja elementov do odpiranja oken ter vključevanja inte-raktivnih animacij.
JavaScript se v večini namenov uporablja kot programski jezik na strani odjemalca, kjer omogoča interakcijo z DOM preko elementov, ki so definirani kot objekti. V DOM objektu so zapisani vsi parametri elementa v HTML strukturi. Na strani odjemalca brskalnik zagotovi pogon za izvajanje kode v napravi.
V izdelanem sistemu se je JavaScript uporabil na strežniški strani z upo-rabo okolja Node.js, kot tudi na strani uporabnika, kjer je skrbel za pošiljanje ukazov uporabnika na strežnik.
V nadaljevanju je opisano razvojno okolje in uporabljene knjižnice za JavaScript.
Okolje node.js omogoča izvajanje JavaScript kode izven brskalnika, kar omogoča uporabo JavaScripta v strežniške namene. Knjižnici socket.io in HTTP pa sta omogočili komunikacijo med odjemalcem in strežnikom.
Okolje node.js
Node.js omogoča izvajanje kode JavaScript izven brskalnika. Programerjem omogoča dinamično sestavo spletne strani, še preden se ta prenese k uporab-niku.
Node.js je dogodkovno naravnan z možnostjo asinhronega izvajanja, kar omogoča učinkovito izvajanje več procesov v samo eni niti. Njegova zasnova omogoča tudi veliko stopnjo nadgrajevanja aplikacije.
Zaradi svoje popularnosti ima Node.js že vgrajeno upravljanje s program-skimi paketi, kar omogoča preprosto vključevanje knjižnic, ki so jih napisali drugi programerji. S tem se olajša implementacijo rešitve, saj ni potrebno programirati vseh delov kode.
Diplomska naloga 17 S svojim pojavom je Node.js omogočil uporabo programskega jezika Ja-vaScript na vseh področjih razvoja spletne aplikacije; vse od programiranja strežnika do prikaza uporabniku [5].
Knjižnica socket.io
Knjižnica socket.io omogoča vzpostavitev protokola spletnih vtičnic med stre-žnikom in odjemalcem. Knjižnica po vzpostavitvi začetne povezave oddaja in sprejema podatke, ki jih odjemalec in strežnik pošiljata oziroma spreje-mata. Namenjena je stalnemu pošiljanju podatkov, kot so oddajanje videa ali vzpostavitev spletne klepetalnice.
Knjižnica omogoča funkcionalnost na zalednem kot tudi na sprednjem delu, pri čemer se razlikujeta le v tem, da se v zaledju izvaja v okolju Node.js, na sprednjem delu pa znotraj brskalnika.
Knjižnica HTTP
Knjižnica HTTP je že vgrajena v osnovno okolje Node.js. Omogoča krei-ranje preprostega spletnega strežnika, ki omogoča gostovanje spletne strani oziroma serviranje vrednosti, ki so bile generirane v zalednem sistemu npr. s poizvedbo v podatkovni zbirki.
Strežnik se preprosto kreira z uvozom knjižnice v program ter določitvijo, kaj naj servira in na katerih vratih [5].
1 v a r h t t p = r e q u i r e ( ’ h t t p ’ ) ; // uvoz k n j i z n i c e
18 Urban Matko