Univerza v Ljubljani
Fakulteta za računalništvo in informatiko
Urban Matko
Sistem za vizualno spremljanje in upravljanje procesov na daljavo
DIPLOMSKO DELO
VISOKOŠOLSKI ŠTUDIJSKI PROGRAM PRVE STOPNJE
RAČUNALNIŠTVO IN INFORMATIKA
Mentor : viš. pred. dr. Robert Rozman
Ljubljana, 2021
Copyright. Rezultati diplomske naloge so intelektualna lastnina avtorja in matične fakultete Univerze v Ljubljani. Za objavo in koriščenje rezul- tatov diplomske naloge je potrebno pisno privoljenje avtorja, fakultete ter mentorja.
Besedilo je oblikovano z urejevalnikom besedil LATEX.
Kandidat: Urban Matko
Naslov: Sistem za vizualno spremljanje in upravljanje procesov na daljavo Vrsta naloge: Diplomska naloga na visokošolskem programu prve stopnje Računalništvo in informatika
Mentor: viš. pred. dr. Robert Rozman
Opis:
Izdelajte zasnovo sistema za učinkovito spremljanje oddaljenih procesov s pomočjo žive slike in možnosti upravljanja izhodnih priključkov, s katerimi lahko vplivamo na potek procesa. Sistem tudi realizirajte z vso potrebno strojno in programsko opremo ter prototipnim ohišjem. Poskušajte zagotoviti čimbolj enostavno upravljanje in nadgradljivost sistema.
Title: System for visual monitoring and management of remote processes Description:
Design a system to effectively monitor remote processes using live images and the ability to control output ports to affect the process. Implement the system with the necessary hardware, software and a prototype enclosure. Try to make the system as easy to use and upgradeable as possible.
Rad bi se zahvalil svojemu mentorju, viš. pred. dr. Robertu Rozmanu, za strokovno pomoč pri izdelavi diplomskega dela. Zahvalil bi se tudi družini in prijateljem, ki so me spodbujali pri študiju.
Kazalo
Povzetek Abstract
1 Uvod 1
2 Strojna oprema 3
2.1 Mikroračunalnik RPi . . . 3
2.1.1 Družina mikroračunalnikov RPi . . . 3
2.1.2 Kamera RPi . . . 5
2.2 Tiskalnik 3D . . . 6
2.2.1 Opis tiskalnikov 3D . . . 6
2.2.2 Oblikovanje sestavnih delov 3D . . . 6
3 Programska oprema 9 3.1 Programska orodja . . . 9
3.1.1 Urejevalnik besedila Nano . . . 9
3.1.2 Terminalski program Putty . . . 10
3.1.3 Oddaljeno namizje VNC . . . 10
3.1.4 Upravljanje z različicami . . . 10
3.2 Operacijski sistem . . . 11
3.3 Razvojna okolja in jeziki . . . 12
3.3.1 Programski jezik Python . . . 12
3.3.2 Označevalni jezik HTML . . . 13
3.3.3 Slogovni jezik CSS . . . 14
3.3.4 Skriptni jezik JavaScript . . . 16
3.4 Tehnologije za zajem in prenos slike . . . 18
3.4.1 Kodiranje slike . . . 18
3.4.2 Protokol spletnih vtičnic . . . 19
4 Realizacija sistema 21 4.1 Izvedba strojnega dela . . . 21
4.1.1 Konfiguracija strojne opreme . . . 22
4.1.2 Priklop strojne opreme . . . 22
4.2 Izvedba programskega dela . . . 23
4.2.1 Struktura sistema . . . 23
4.2.2 Program za zajem slike . . . 25
4.2.3 Programiranje strežnika za oddajanje toka slik . . . . 27
4.2.4 Prikaz slike uporabniku . . . 28
4.2.5 Program za izpolnitev uporabnikovega ukaza . . . 30
4.2.6 Programiranje uporabniškega vmesnika . . . 32
4.2.7 Stalno izvajanje programa . . . 34
4.3 Dodatni procesi razvoja programskega dela . . . 36
4.4 Izdelava ohišja . . . 37
4.5 Preizkus sistema . . . 38
5 Sklepne ugotovitve 41
Literatura 43
Seznam uporabljenih kratic
kratica angleško slovensko
HTML Hypertext Markup Language Jezik za označevanje besedila VNC Virtual Network Computing Virtualno mrežno računalni-
štvo
IoT Internet of things Internet stvari
CSS Cascading Style Sheets Kaskadne stilske predloge DOM Document Object Model Objektni model dokumenta HTTP HyperText Transfer Protocol Protokol za prenos besedila LED Light-emitting diode Svetleča dioda
GPIO General-purpose input/output Splošno namenski vhodi/iz- hodi
PLA Polylactic acid Polilaktična kislina IP Internet Protocol Protokol interneta
CSI Camera Serial Interface Serijski vmesnik za kamero
Povzetek
Naslov: Sistem za vizualno spremljanje in upravljanje procesov na daljavo Avtor: Urban Matko
V diplomski nalogi je bil izdelan sistem, ki omogoča prenos in prikaz toka slik v spletni aplikaciji, s katero lahko uporabniki vizualno spremljajo proces in nadzorujejo izhode na mikroračunalniku na daljavo. Sistem temelji na mi- kroračunalniku Raspberry Pi 4, ki skrbi za izvajanje vse programske opreme kot tudi za nadzor vhodno-izhodnih naprav. Vhodno-izhodne naprave so po- vezane s programsko opremo preko vhodno-izhodnih priključkov, kamera pa preko posebnega komunikacijskega vmesnika.
Programska oprema za prenos slike je napisana v programskem jeziku Python. Uporabniški vmesnik za prikaz toka slik in nadzor vhodno-izhodnih priključkov pa je programiran v skriptnem jeziku JavaScript, ki se izvaja v okolju Node.js.
Rezultat naloge je sistem, ki se lahko uporabi na mnogih področjih, kjer želi uporabnik nadzorovati naprave oziroma procese na daljavo. Sistem se lahko vgradi v preproste naprave kot je domofon, kot tudi v kompleksnejše naprave oziroma povsod, kjer bi želeli vizualni nadzor ter možnost upravlja- nja preko vhodno-izhodnih priključkov mikroračunalnika.
Ključne besede: Python, Node.js, RPi, Web Sockets, video prenos, servo- motorji, izhodi.
Abstract
Title: System for visual monitoring and managment of remote processes Author: Urban Matko
In this thesis, a system has been developed that allows the transmission and display of a stream of images in a web application, allowing users to visually monitor the process and control the outputs on a microcomputer remotely.
The system is based on a Raspberry Pi 4 microcomputer that runs all the software and controls the input-output devices. Input-output devices are connected to the software through input-output connectors and the camera through a dedicated communication interface.
The image transmission software is written in the Python programming language. The user interface for displaying the image stream and controlling the input-output connectors is programmed in JavaScript, which runs in the Node.js environment.
The presented system can be used in many fields where the user wants to control devices or processes remotely. The system can be integrated into simple devices such as intercom systems, as well as more complex devices, or anywhere where visual feedback and the ability to control through the microcomputer’s input-output connections are desired.
Keywords: Python, Node.js, RPi, Web Sockets, video stream, servomotors, outputs.
Poglavje 1 Uvod
Pogosto želimo imeti nadzor nad vsemi napravami in s katerekoli lokacije.
V ta namen vgrajujemo kamere v vsakdanje naprave, ki nam omogočajo vizualni pregled nad dogajanjem. Poleg spremljanja video prenosa pa želimo upravljati naprave na daljavo.
Motivacija za izdelavo takega sistema temelji v želji centralnega nad- zora nad različnimi procesi. Razvit sistem demonstrira praktično uporabo IoT rešitve za nadgradnjo obstoječih naprav. Sistem je mogoče uporabiti za vsakdanjo uporabo, kot je npr. peka v pečici. Preko video prenosa lahko nad- zorujemo potek peke, na koncu pa pečico ugasnemo s pomočjo upravljanja izhodnega priključka.
Cilj sistema je izdelava prototipa sistema z možnostjo prenosa toka slik preko spleta ter nadzora izhodov, ki omogočajo upravljanje druge naprave.
Glavni prispevek te naloge pa je možnost vgradnje sistema v množico naprav, kjer napravo upravljamo na daljavo, hkrati pa vizualno nadzorujemo delovanje.
Osnovne funkcije sistema, prenos slike ter upravljanje z izhodi se upora- blja na mnogih področjih. Najosnovnejša uporaba takega sistema je domo- fon, ki uporabniku na podlagi video prenosa omogoča oddaljeno upravljanje z vrati.
Pred razvojem je bila največja ovira izbira ustreznih tehnologij. Potrebno 1
2 Urban Matko je bilo izbrati ustrezno strojno opremo, zasnovati strežnik in ugotoviti, kako bo uporabnik upravljal s sistemom. Izbira je bila problematična, ker je na voljo veliko različnih tehnologij, ki lahko opravljajo isto nalogo, zato je bilo potrebno ugotoviti, na kakšen način bo sistem najpreprostejše in najučinko- vitejše zaživel.
Jedro sistema je mikroračunalnik RPi 4, ki poganja vso programsko opremo ter jo povezuje s priključeno strojno opremo. RPi 4 je bil izbran na podlagi njegove zmogljivosti, preprostosti razvoja in cene. Glavna lastnost za izbiro je omogočanje hitrega razvoja, saj veliko ljudi dela s tem mikroračunalni- kom in je na voljo veliko virov znanja. RPi omogoča tudi preprost priklop vhodno izhodnih enot, ki so bile potrebne za razvoj sistema, kot so kamera, servomotor in diode LED.
Programski del sistema je bil zgrajen s pomočjo programskega okolja Node, ki omogoča izvajanje JavaScript kode na strežniku ter Python apli- kacije. JavaScript in Python sta bila izbrana zaradi svoje preprostosti in podpore različnih knjižnic, ki omogočajo še hitrejši razvoj. Programski del sistema je sestavljen iz dveh delov. Prvi del zagotavlja prenos toka slik s priključene kamere. Tok slik se preko spleta prenaša v formatu MJPEG s protokolom spletnih vtičnic (angl. websocket protocol). Drugi del pa je na- menjen predstavitvi video prenosa uporabniku preko spletne aplikacije ter mu omogočiti nadzor nad izhodi, vgrajenimi na Raspberry Pi (RPi).
Sistem je bil na koncu vgrajen v ohišje, ki je bilo izdelano s tiskalnikom 3D. Ohišje izboljša podobo samega sistema, prav tako pa komponente ščiti pred poškodbami.
V naslednjih poglavjih so opisane uporabljene tehnologije in programski jeziki ter potek izdelave sistema. V 2. poglavju je predstavljena strojna oprema, ki je bila uporabljena za izgradnjo sistema, nato v 3. poglavju sledi opis uporabljenih tehnologij. V 4. poglavju je predstavljen potek izdelave sistema, na koncu pa sledi 5. poglavje z zaključkom.
Poglavje 2
Strojna oprema
Za izvedbo sistema je bila uporabljena kombinacija različne strojne opreme.
Jedro sistema je mikroračunalnik RPi, ki je namenjen zajemu slike preko povezane kamere ter gostovanju strežnika za prenos slike preko spleta. Drugi del strojne opreme pa predstavlja tiskalnik 3D, ki je bil namenjen tiskanju ohišja ter izdelavi pomožnih komponent sistema.
2.1 Mikroračunalnik RPi
RPi na sliki 2.1 je mikroračunalnik, ki vsebuje vse osnovne komponente za delovanje na enem vezju (angl. single board computer). Računalnik je razvilo istoimensko angleško podjetje. Sprva je bil namenjen izobraževanju v šolah in drugih ustanovah, kmalu pa se je izkazalo, da je lahko uporabljen v mnoge druge namene, ki jih izdelovalci niso predvideli.
Izbran mikroračunalnik v sistemu je RPi 4, saj ima zadostno procesorsko moč za kodiranje in prenos toka slik preko spleta [8].
2.1.1 Družina mikroračunalnikov RPi
Do današnjega dne obstaja 5 glavnih različic računalnika, ki imajo enako zasnovo, vendar so se z vsako generacijo nadgradile.
3
4 Urban Matko
Slika 2.1: Mikroračunalnik RPi 4
Prvi dve različici RPi sta imeli vgrajenih bodisi 256 MiB delovnega po- mnilnika za Model A oziroma 512 MiB za model B. Ti različici sta edini v družini, ki nimata 40 priključkov GPIO, vendar le 26. Razlikovali sta se tudi v priključkih, saj model A ni imel vgrajenega priključka za mrežno povezavo, model B pa ga je imel.
Naslednja večja sprememba je prišla z različico RPi 2 B, ki je imela vgra- jen štirijedrni procesor za razliko od prve različice z enojedrnim procesorjem, povečala se je tudi kapaciteta delovnega pomnilnika na velikost 1 GiB.
Različica 3 je prinesla že vgrajen brezžični mrežni vmesnik, ki je omogočal delovanje RPi brez katerekoli druge žične povezave razen napajanja.
Kasneje je prišla v ponudbo nova različica RPi Zero, ki se je najbolj raz- likovala od drugih in je bila izdelana na zelo kompakten način. RPi Zero je omogočil vgradnjo v mnoge druge projekte. Kmalu pa je bila ta različica nadgrajena še z brezžično mrežno povezavo in vmesnikom Bluetooth. Glavna lastnost zadnje verzije je možnost nakupa z delovnim pomnilnikom do kapa- citete 8 GiB in je namenjena predvsem za uporabo pri projektih, kot sta na primer umetna inteligenca in strojno učenje.
V sistemu je bil uporabljen RPi 4 z 2 GiB delovnega pomnilnika. Ta različica je bila izbrana na podlagi cene ter zmogljivosti. Različica z 1 GiB pomnilnika bi zadostovala, vendar je bila zaradi širitve sistema ter njegovih funkcionalnosti primernejša izbira večjega pomnilnika.
Diplomska naloga 5
2.1.2 Kamera RPi
V osnovi so z RPi združljive vse kamere, ki jih je možno priključiti preko USB priključka ali fleksibilnega kabla s petnajstimi priključki. Večina kamer, ki so namenjene za uporabo z RPi, uporablja fleksibilni kabel s petnajstimi priključki, kot kamera na sliki 2.2.
Na trgu je veliko različnih izvedenk kamer, ki omogočajo vse vrste funk- cionalnosti. Obstajajo kamere, ki so visoko-kvalitetne in so primerne za opazovanje oddaljenih objektov.
Popularne pa so tudi kamere, s katerimi lahko vidimo ponoči, saj imajo odstranjen infrardeč (IR) filter. Filter v normalnih različicah blokira IR žarke, tukaj pa lahko s pomočjo posebne žarnice osvetlimo prostor s svetlobo, ki ni vidna človeškim očem [2].
Uporabljena je kamera Raspberry Pi Camera V1, ki je priključena preko kabla s petnajstimi priključki. Kamera z RPi komunicira preko serijske pove- zave s protokolom CSI, pri čemer pošilja zaporedje zajetih slik. Uporabljena kamera ima največjo možno ločljivost zajema slike 3280×2464 slikovnih pik.
V sistemu je uporabljena nižja ločljivost in sicer 800× 450 slikovnih pik, saj s tem omogočimo prenos večih slik na sekundo, konkretno 24.
Slika 2.2: Kamera Raspberry Pi Camera V1
6 Urban Matko
2.2 Tiskalnik 3D
Dandanes se v manjših produkcijah ter prototipnih izdelkih vse pogosteje uporablja tiskanje 3D za izdelavo različnih delov naprav kot tudi celotnih ohišij. Pri izgradnji sistema se je tiskanje 3D uporabilo v namen izdelave ohišja. S tiskanim 3D ohišjem se je izboljšala podoba samega izdelka, prav tako pa komponente ščiti pred poškodbami.
2.2.1 Opis tiskalnikov 3D
Tiskalnik 3D je naprava, ki za razliko od tradicionalnega tiskalnika, ki je na- menjen tiskanju na ploskev, tiska v 3D prostoru na dva načina: s pomočjo plastičnega polnila ali s posebno smolo. Tiskalnik 3D tiska tako, da v pro- gramu za 3D oblikovanje ustvarimo izdelek in ga pretvorimo v G-kodo, ki jo lahko nato tiskalnik izvaja in natisne 3D izdelek.
Popularnejša metoda je tiskanje s plastičnim polnilom, ki je navito na ko- lut. Slednjega tiskalnik na sliki 2.3 odvija in sproti segreva ter v posameznih plasteh nanaša na prej naneseno plast.
Alternativna metoda je tiskanje s smolo, ki jo laser prav tako segreva po plasteh. Tiskanje s smolo omogoča izdelavo natančnejših tiskovin, vendar je smola strupena in je treba zagotoviti dobro prezračen prostor ter opraviti dodatne postopke izpiranja po končanem tiskanju.
Za izdelavo ohišja sistema je bilo uporabljeno tiskanje s plastičnim polni- lom, ker omogoča zadostno kakovost tiska in ne potrebuje dodatne obdelave.
2.2.2 Oblikovanje sestavnih delov 3D
Za načrtovanje 3D delov je bil uporabljen brezplačni program Fusion 360 podjetja AutoDesk. Program omogoča tako oblikovanje enostavnih elemen- tov kot tudi kompleksnih strojev. Fusion 360 je bil uporabljen zaradi svoje enostavnosti za osnovno rabo, kar omogoča hitre začetne rezultate. Program je bil izbran tudi zaradi predhodnega poznavanja in brezplačne dostopnosti.
Diplomska naloga 7
Slika 2.3: Tiskalnik 3D Prusa Mk3
8 Urban Matko
Poglavje 3
Programska oprema
Za izvedbo programskega dela sistema je bila izbrana kombinacija različnih programskih jezikov ter podpornih programskih orodij.
Največji del programske opreme je izveden s pomočjo programskega jezika Python in skriptnega jezika JavaScript. S pomočjo teh jezikov je napisan strežniški del sistema, ki prenaša sliko in nadzoruje delovanje izhodov.
K lažjemu delu so pripomogla tudi programska orodja Git za upravljanje z različicami, Putty in VNC za oddaljen dostop do računalnika ter “nano” za urejanje besedila.
3.1 Programska orodja
3.1.1 Urejevalnik besedila Nano
Nano je tekstovni urejevalnik za okolje Unix, ki se uporablja v ukazni vr- stici. Uporaba Nano urejevalnika je zelo preprosta, saj lahko z enim ukazom kreiramo datoteko, ki jo nato urejamo.
nano t e s t . t x t
Urejamo lahko tudi že kreirane datoteke v veliko različnih formatih.
Uporabljen je bil predvsem pri manjših spremembah kode, da za konfigu- racijo ni bilo treba vzpostaviti oddaljene povezave preko grafičnega vmesnika
9
10 Urban Matko oziroma priključiti miške, tipkovnice ter zaslona.
3.1.2 Terminalski program Putty
Putty je brezplačna odprto-kodna programska oprema, ki omogoča funkcio- nalnost terminala, serijske konzole in mrežnega prenosa. Omogoča komuni- kacijo z napravami preko različnih protokolov, med drugim tudi preko SCP in SSH. V izdelavi diplomske naloge je pripomogel k hitrejšemu spreminjanju dela kode, saj je bila lahko spremenjena preko oddaljenega terminala, ne pa preko grafičnega vmesnika.
3.1.3 Oddaljeno namizje VNC
Programska oprema VNC omogoča oddaljen dostop preko grafičnega vme- snika. Omogoča prenos ukazov s tipkovnice in miške, hkrati pa prikazuje sliko v živo z oddaljenega računalnika. Deluje po principu strežnika in odjemalca, pri čemer odjemalec upravlja strežnik.
Uporaben je bil predvsem v začetnih fazah konfiguracije RPi ter ob spre- minjanju večjih blokov kode, saj omogoča vse funkcionalnosti fizično pri- ključenih vhodno-izhodnih naprav na RPi. Na ta način je bilo kopiranje in lepljenje s pomočjo miške hitrejše, kot če bi enako želeli narediti s pomočjo terminala.
3.1.4 Upravljanje z različicami
Že nekaj časa se pri programiranju v veliki meri uporablja upravljanje z raz- ličicami. Uporablja se za varnostno kopiranje in spremljanje sprememb v kodi. V večji meri pa se uporablja na kompleksnejših projektih, kjer se delo razdeli na manjše, bolj obvladljive dele z namenom neodvisnega razvijanja funkcionalnosti na že obstoječi kodi brez strahu pred izgubo kode. Pri kom- pleksnih projektih uporabnik naredi novo vejo iz glavnega projekta in na njej razvija funkcionalnost. Ko se neka funkcionalnost na določeni veji razvije, se ta združi v glavno vejo.
Diplomska naloga 11 Poznamo več vrst upravljanja z različicami, vendar se v največji meri upo- rablja brezplačno programsko orodje GIT, ki je lahko gostovano na lokalnem strežniku ali pri ponudniku storitve, kot sta GitHub ali BitBucket. Zgrajen je tako, da na vsakem računalniku omogoča poln vpogled v zgodovino in sledenje kodi.
V sistemu je bil GIT uporabljen za varnostno kopiranje kode ter sledenje spremembam; tako se lahko v primeru pojava težje odpravljive napake vedno vrnemo v prejšnje stanje.
3.2 Operacijski sistem
V sistemu je uporabljen tudi operacijski sistem RPi OS, ki je posebej name- njen uporabi na mikroračunalnikih RPi.
Operacijski sistem (OS) Raspberry Pi OS je zgrajen iz optimizirane LXDE različice operacijskega sistema Linux z dodanimi deli za različne funkcional- nosti.
Osnovna verzija OS vsebuje grafični vmesnik in deluje podobno kot drugi OS, na primer Windows. V sistemih z manj procesorske moči oziroma kjer ni potrebno imeti grafičnega vmesnika se lahko uporabi enostavnejša verzija RPi OS.
OS se prenese na pomnilniško kartico preko programa NOOBS, ki omo- goča enostavno namestitev. NOOBS omogoča izbiro različice RPi OS in ni potreben poseben prenos IMG datoteke za samo namestitev OS. Za delo z NOOBS programom potrebujemo pomnilniško kartico s kapaciteto vsaj 16 GB. OS lahko namestimo tudi tako, da “zapečemo” preneseno IMG dato- teko neposredno na pomnilniško kartico s pomočjo programov za kreiranje zagonskih pogonov.
12 Urban Matko
3.3 Razvojna okolja in jeziki
V sistemu je bil največji del programske opreme izveden s programskim je- zikom Python in skriptnim jezikom 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>
2 <html>
3 <head>
4 <t i t l e>N a s l o v s t r a n i</t i t l e>
5 </head>
6 <body>
7 <div>
8 <p>G e n e r i c n i t e k s t</p>
9 </div>
10 </body>
11 </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 ">
2 Primer uporabe c l a s s a t r i b u t a 1 3 </div>
4
5 <div c l a s s=" c l a s s E l e m e n t a ">
6 Primer uporabe c l a s s a t r i b u t a 2 7 </div>
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 2 h t t p . c r e a t e S e r v e r ( f u n c t i o n ( req , r e s ) {
3 r e s . w r i t e ( ’ V r e d n o s t ’ ) ; // s e r v i r a n j e v r e d n o s t i 4 r e s . end ( ) ;
5 } ) . l i s t e n ( 8 0 8 0 ) ;
// d o l o c i t e v v r a t za k o m u n i k a c i j o
18 Urban Matko
3.4 Tehnologije za zajem in prenos slike
Zajem in prenos slike sta ključna dela sistema, implementirana sta s pomočjo programskih jezikov JavaScript in Python. Za prenos slike je poskrbel proto- kol spletnih vtičnic. Zajete slike so kodirane v formatu MJPEG, ki omogoča zanesljiv in kakovosten zajem ter prenos slike preko spleta v živo.
3.4.1 Kodiranje slike
Za prenos in pregled video signala je v uporabi veliko različnih formatov. Ko zajamemo posamezne slike v video prenosu, se lahko sproti kodirajo v različne formate, ki nam omogočajo lažji in hitrejši prenos z manjšo velikostjo in čim manjšo izgubo kakovosti.
Večina modernih naprav pri svojem delovanju uporablja kodiranje H.264, ki ima veliko prednosti, saj omogoča sprotno stiskanje na strani kamere, kar omogoča manjšo uporabo povezave, ki je potem na voljo ostali komunika- ciji. H.264 omogoča tudi prilagodljivo kakovost slike glede na pasovno širino povezave, v primeru, če želimo posnetek tudi shranjevati, nam to kodiranje omogoča nižjo porabo pomnilnika.
Drugo kodiranje, ki bi v primeru pošiljanja toka slik prišlo v poštev, je format MJPEG, ki pa za razliko od H.264 omogoča pošiljanje vsake zajete slike posebej, kar nam omogoča zajem kakovostnejših posnetkov in zagotovi robustnejše oddajanje toka slik, saj se lahko ob napaki slika izgubi, kar pa ne vpliva na prenos toka slik [7]. Glavni slabosti tega formata pa sta velika poraba pasovne širine povezave, kar lahko ob omejeni povezavi vpliva na kakovost prenosa toka slik oziroma delovanje drugih porabnikov te povezave.
Druga slabost je shranjevanje, saj ta format zelo težko shranjujemo oziroma je to v nekaterih primerih nemogoče, saj bi morala biti vsaka slika shranjena posebej.
V sistemu se je za prenos slike izbral format MJPEG. Ta format je bil iz- bran na podlagi svoje zanesljivosti, saj se lahko med prenosom slike izgubijo, kar pa ne vpliva na samo delovanje. Problem shranjevanja pri tem formatu
Diplomska naloga 19 v trenutnem sistemu ni težaven, saj se slike ne hranijo.
3.4.2 Protokol spletnih vtičnic
Komunikacijski protokoli na internetu v večini primerov komunicirajo s po- vezavo brez stanj (angl. stateless), kar pomeni, da se vsaka zahteva pošlje posebej, vendar tako pošiljanje ni ugodno za komunikacijo, kjer želimo po- datke prenašati v živo.
Kadar želimo neprestano pošiljati podatke med odjemalcem in strežni- kom, lahko v ta namen uporabimo povezavo s stanji (angl. stateful) [9].
Najbolj uporabljen predstavnik povezave s stanji je protokol spletnih vtičnic (angl. Web Sockets). Spletne vtičnice omogočajo stalno dvosmerno povezavo (angl. Full-duplex) med odjemalcem in strežnikom. Nastavitev za način pre- nosa preko vtičnic se opravi med začetno vzpostavitvijo komunikacije med povezanima napravama. Privzeta vrednost za komunikacijo so vrata 80 in 443, kar omogoča delovanje brez blokiranja na ravni požarnega zidu [6].
Predhodnika komunikacije preko spletnih vtičnikov sta bila pozivni prenos (angl. Polling) in prenos preko stalne povezave HTTP.
Pozivni način [1] je deloval tako, da je za vsak poslan paket vzpostavil novo povezavo. Stalno vzpostavljanje nove povezave za prenos enega paketa je zelo neučinkovita izraba mrežne povezave.
Učinkovitejši način prenosa je bila uporaba prenosa HTTP, pri čemer je bila povezava ves čas odprta. V tem načinu se preko že vzpostavljene povezave kadarkoli pošlje nov paket. Problem takšnega načina delovanja pa je nezanesljivost zaradi morebitnih napak v predpomnjenju zaradi nezaključene povezave.
V sistemu je protokol spletnih vtičnic izbran zato, da se lahko tok slik prenaša ves čas. Zaradi komunikacije z dvosmerno povezavo lahko med pre- nosom toka slik uporabnik hkrati nadzoruje izhode na RPi.
20 Urban Matko
Poglavje 4
Realizacija sistema
V naslednjih podpoglavjih je opisana izvedba sistema. V prvem delu je pred- stavljena izvedba strojnega dela. Opisana je konfiguracija RPi, priklopi vho- dno/izhodnih naprav. V drugem delu sledi opis izvedbe programskega dela.
Predstavljena je struktura sistema in zgradba posameznih programskih kom- ponent. Zadnji del opisuje dodatne procese, ki omogočajo hitrejšo ter ličnejšo izvedbo sistema. Sistem je bil razvit hitreje z uporabo upravljanja različic ker smo bili brez skrbi glede izgube napredka v primeru napake. Sistem je lično zapakiran v zaključeno celoto s pomočjo izdelanega ohišja, ki skrbi tako za zaščito komponent, kot tudi za končni videz.
4.1 Izvedba strojnega dela
Strojna oprema končnega izdelka je sestavljena iz dveh pomembnejših ele- mentov. Jedro sistema je mikroračunalnik RPi4, na katerega je priključena združljiva kamera preko namenskega priključka.
S pomočjo kamere in programa se zajema tok slik, ki se nato pošilja v prikaz uporabniku. RPi poganja tudi spletni strežnik, ki servira uporabniški vmesnik in nadzoruje izhode na podlagi uporabnikovega vnosa.
21
22 Urban Matko
4.1.1 Konfiguracija strojne opreme
RPi je celovit računalnik in za svoje delovanje potrebuje operacijski sistem, imenovan Raspberry Pi OS. Prva naloga je bila instalacija operacijskega sis- tema. RPi za sekundarni pomnilnik uporablja pomnilniško kartico mikro SD, na katero se zapiše operacijski sistem.
Za začetno konfiguracijo je bilo treba priključiti zaslon, preko povezave Bluetooth povezati miško in tipkovnico ter vzpostaviti povezavo do spleta preko vmesnika WIFI. Sprva je bilo treba omogočiti vmesnike, preko katerih je lahko RPi komuniciral. Obvezno je bilo treba vključiti komunikacijo preko priključka za kamero ter omogočiti protokol SSH za možnost konfiguracije in spreminjanja datotek preko oddaljenega računalnika. Zaradi praktičnosti uporabe grafičnega vmesnika je bil omogočen še VNC strežnik, ki omogoča oddaljen dostop preko grafičnega vmesnika.
4.1.2 Priklop strojne opreme
Za osnovno demonstracijo uporabe sistema sta bila na RPi v uporabi le dva izhodna priključka. Uporabljena sta bila priključka: GPIO 4 za upravljanje izhoda in GPIO 17 za upravljanje servomotorja. Servomotor za delovanje potrebuje dodatno napajanje, ki je bilo pridobljeno s priključka VCC, ki omogoča napajanje s 5 V. Prikaz priključitve je prikazan na sliki 4.1.
Diplomska naloga 23
Slika 4.1: Povezava strojne opreme
4.2 Izvedba programskega dela
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 ’ , f r a m e r a t e =24) a s camera :
2 o u t p u t = StreamingOutput ( ) 3 camera . s t a r t _ r e c o r d i n g ( output ,
format= ’ mjpeg ’ )
4 try:
5 #o d d a j a n j e v i d e a 6 f i n a l l y :
7 camera . s t o p _ r e c o r d i n g ( )
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.
1 <s c r i p t
2 s r c=" l i b s / s o c k e t . i o / 2 . 0 . 3 / s o c k e t . i o . j s ">
3 </s c r i p t>
4 <div c l a s s=" c o n t a i n e r ">
5 <p>
6 <input
type=" b u t t o n "
id=" s e r v o "
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.
1 #s t r e a m { width : 1 0 0 % ; } 2
3 . c o n t a i n e r { p o s i t i o n : r e l a t i v e ; } 4
5 . buttonMove {
6 p o s i t i o n : a b s o l u t e ;
7 top : 0%;
8 z−i n d e x : 1 0 0 0 0 ;
9 background−c o l o r : t r a n s p a r e n t ; 10 o u t l i n e : none ;
11 b o r d e r : none ; 12 h e i g h t : 99%;
13 width : 25%; }
14
15 #s e r v o d e s n o { l e f t : 7 5 % ; }
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,
i n i t i a l−s c a l e = 1 . 0 , maximum−s c a l e = 1 . 0 , u s e r−s c a l a b l e=no ’ />
2 <meta content=’width=d e v i c e−width, i n i t i a l−s c a l e = 1 . 0 , maximum−s c a l e = 1 . 0 , u s e r−s c a l a b l e=no ’ name=’ v i e w p o r t ’ />
4.2.7 Stalno izvajanje programa
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
4.3 Dodatni procesi razvoja programskega dela
Med delom sta se uporabila podporna procesa razvoja: preizkušanje in upra- vljanje z različicami.
Ključnega pomena je bilo sprotno preizkušanje vsakega dela kode pose- bej, saj je bila naknadna združitev vseh delov zato lažja. Ker so bili vsi deli posebej testirani, bi se lahko težava na koncu pojavila le v povezavi med posameznimi deli in ne v sami funkcionalnosti. Test je bil izveden na vsakem delu kode posebej. Ob testiranju prenosa slik je bilo pomembno, da se slike prenašajo zanesljivo in tako hitro, da delujejo kot video. Za potrditev upra- vljanja izhodov je bilo potrebno pravilno obračanje servomotorja, ter njegove omejitve končnih položajev ter prižig LED diode.
Drugi pomembni del je bil upravljanje z različicami kode in varnostnimi kopijami. V primeru porušitve sistema ali nenamerne napake v kodi bi se izgubil ves napredek, zato se je ob zaključku vsakega dela kode ta prenesla na GitHub z GIT ukazi, ki so se izvedli v GIT Bash ukazni vrstici.
Diplomska naloga 37
4.4 Izdelava ohišja
Ohišje je bilo oblikovano na kar se da robusten in preprost način. Ohišje, prikazano na sliki 4.4, je bilo oblikovano v orodju Fusion 360, kjer je bil ločeno oblikovan vsak del ohišja, za preverjanje združljivosti pa je bilo tudi navidezno sestavljeno.
Ker je morala biti glava s kamero priključena na servomotor, je bilo po- trebno posebej natančno oblikovati povezani del glave in roke servomotorja.
Slika 4.4: Model ohišja 3D
Ohišje je bilo natisnjeno v tehniki 3D iz plastike PLA, ki je preprosta za uporabo ter ne potrebuje nadaljnjega popravljanja in obdelovanja.
38 Urban Matko
4.5 Preizkus sistema
Pred integracijo vseh delov v celoto sta bila za pravilno delovanje najprej preverjena programa za zajem in pošiljanje slik ter program za prikaz upo- rabniku ter nadzor izhodov. Program, namenjen prikazu slike, je z minimal- nim zamikom posredoval sliko uporabniku, program za nadzorovanje izhodov pa je pravilno upravljal izhode na podlagi uporabnikovega vnosa.
Po končani izdelavi ohišja in testiranju programske opreme je bila po- trebna le še integracija vseh delov skupaj. V natiskano ohišje je bil dodan RPi, na katerega je bil priključen servomotor ter demonstracijska dioda LED.
Ob vstavitvi nosilca za servomotor se je priključil še kabel za kamero, ki se je vgradila v obračajočo se glavo.
Sistem se je po vstavitvi vseh komponent še enkrat končno preizkusil in se je na ta način potrdilo pravilno delovanje. Končni izdelek je prikazan na sliki 4.5.
Sistem je zasnovan tako, da deluje ves čas. Zaustavi se samo v primeru iz- gube napajanja, v tem primeru se samodejno zažene nazaj skupaj s potrebno programsko opremo. Sistem med testiranjem ni pokazal nobenih nestabilnih stanj ali drugih problemov.
Diplomska naloga 39
Slika 4.5: Končan prototip sistema
40 Urban Matko
Poglavje 5
Sklepne ugotovitve
V diplomskem delu je bil izdelan sistem, ki omogoča prenos toka slik v živo z možnostjo povratnega upravljanja. Jedro sistema predstavlja RPi 4. Na RPi so priklopljeni: kamera, servomotor in dioda LED, ki jih uporabnik nadzira.
Ključni del vhodno-izhodnih naprav je kamera, ki je združljiva z RPi.
Programska oprema sistema je sestavljena iz dveh delov. Prvi del skrbi za prikaz slike uporabniku, drugi pa za gostovanje spletne aplikacije in izvajanje uporabnikovega ukaza, ki se prenese na izhode. Za zajem slike je uporabljen programski jezik Python. Za uporabniški vmesnik ter nadzor nad vhodno- izhodnimi napravami je uporabljen programski jezik JavaScript, ki se izvaja v okolju Node.js.
Uporabniški vmesnik je zgrajen na uporabniku preprost način. Čez celo- ten vmesnik je viden tok slik, pri čemer so čez sliko dodani gumbi. Gumbi omogočajo premik servomotorja levo in desno, v primeru pritiska leve ali desne strani prenosa ter upravljanje z izhodom ob pritisku sredine. Za lažji pregled položaja servomotorja, je dodan prikaz s tabelo, ki obarva celico v odvisnosti od položaja servomotorja.
Izdelan sistem omogoča preprosto vgradnjo v naprave, hkrati pa je zgra- jen tako, da ga je mogoče nadgraditi. Možno je omogočiti priključitev več servomotorjev oziroma upravljanje večjega števila izhodov, hkrati pa se lahko podatki pridobivajo na vhode preko priključenih tipal.
41
42 Urban Matko Sistem je zelo preprost za uporabo. Ko sistem priključimo v napajanje, se avtomatsko požene vsa programska oprema. Po zagonu sistema lahko do spletne aplikacije dostopamo preko IP naslova RPi in vrat 9000.
Komercialni produkti, kjer bi lahko poljubne naprave priključili na vme- snik, ki bi omogočil upravljanje naprave preko interneta z video prenosom obstajajo. Nekatere bolj napredne nadzorne kamere imajo vgrajene tudi vhodno-izhodne priključke, ki lahko sprejemajo signal ob sprožitvi detektorja gibanja oziroma upravljajo s priključenim alarmom [10].
Izdelan sistem ima prednost pred komercialnimi produkti v tem, da ga je mogoče enostavno nadgraditi in vgraditi v končen produkt. Mogoče ga je uporabiti pri gospodinjskih napravah, kot je hladilnik za vpogled v notra- njost, kot tudi pri kompleksnejših sistemih za nadzor proizvodnje.
Ena izmed možnih nadgradenj je šifriranje videa in dodajanje preverja- nja uporabnika, s katerim bi lahko le pooblaščeni uporabniki dostopali do oddajanega toka slik.
Sistem omogoča tudi nadgradnjo na strani vhodov, na katere lahko preje- mamo podatke s tipal. Doda se lahko na primer detektor gibanja, ki bi sprožil ob zaznanem premiku pošiljanje obvestila uporabniku ter začetek pošiljanja toka slik.
Literatura
[1] Long polling - concepts and considerations. Dosegljivo: https://www.
ably.io/concepts/long-polling. [Dostopano: 15. 08. 2021].
[2] Camera module. https://www.raspberrypi.org/documentation/hardware/camera/.
[3] picamera. https://picamera.readthedocs.io/en/release-1.13/.
[4] socketserver — a framework for network servers. ht- tps://docs.python.org/3/library/socketserver.html.
[5] About documentation. Openjs foundation. Dosegljivo: https://
nodejs.org/en/docs/guides/anatomy-of-an-http-transaction/.
[Dostopano: 15. 08. 2021].
[6] Qigang Liu and Xiangyang Sun. Research of web real-time commu- nication based on web socket. International Journal of Communi- cations, Network and System Sciences, 05(12):797––801, 2012. URL http://dx.doi.org/10.4236/ijcns.2012.512083.
[7] WHAT IS THE DIFFERENCE BETWEEN MJPEG and H.264?
Angelcam. Dosegljivo: https://blog.angelcam.com/what-is-the- difference-between-mjpeg-and-h-264/, 2015. [Dostopano: 15. 08.
2021].
[8] Raspberry Pi. Wikipedia contributors. Dosegljivo: https:
//en.wikipedia.org/w/index.php?title=Raspberry_Pi&oldid=
975703226, 2020. [Dostopano: 15. 08. 2021].
43
44 Urban Matko [9] V. Pimentel and B. G. Nickerson. Communicating and displaying real- time data with websocket.IEEE Internet Computing, 16(4):45–53, 2012.
[10] Network IP Camera Digital IO Alarm Input / Output Setup.
Mike haldas. https://videos.cctvcamerapros.com/digital-io-alarm-in- out/network-ip-camera-digital-io-setup.html.
