Sistem de supraveghere video conectat la o platforma web [307675]

Universitatea “Politehnica” [anonimizat] o platforma web

Proiect de diplomă

prezentat ca cerință parțială pentru obținerea titlului de

Inginer în domeniul Electronică și Telecomunicații

programul de studii de licență Tehnologii și Sisteme de Telecomunicații

Conducător științific Absolvent

Ș. L. Dr. Ing. Șerban OBREJA Cristian AILENEI

2019

Lista Figurilor

Figura 1.1 Internetul lucrurilor…………………………………………………………………….. pagina x

Figura 1.2 Raspberry Pi 3 Model B+……………………………………………………………. pagina x

Figura 1.3. Pinii GPIO de la Raspberry Pi 3 Model B+………………………………….. pagina x

Figura 1.4. Camera termică Panasonic AMG8833 IR ……………………………………. pagina x

Figura 1.5. Modul de camera Pi NoIR ………………………………………………………… pagina x

Figura 1.6. [anonimizat]501 ………………………………………………….. pagina x

Figura 1.7. [anonimizat]501 ………………………… pagina x

Figura 2.1 Schema generală a proiectului ……………………………………………………. pagina x

Figura 2.2 Legăturile dintre blocurile principale ………………………………………….. pagina x

Figura 2.3 Schema electrică ………………………………………………………………………. pagina x

Figura 2.4 Conexiunile fizice ale proiectului ……………………………………………….. pagina x

Figura 2.5. Transmisiunea în direct pe o pagina web ……………………………………. pagina x

Figura 2.6 Pornirea/oprirea camerei și capturarea imaginii ……………………………. pagina x

Figura 2.7 Transmisiunea video senzor AMG8833 – 1 ………………………………. pagina x

Figura 2.8 Transmisiunea video senzor AMG8833 – 2 ………………………………. pagina x

Figura 2.9 Activare setare securitate cont Googl ………………………………………….. pagina x

Figura 2.10 Notificare prin e-mail recepționată ……………………………………………. pagina x

Figura 2.11 Utilizatorii platformei web ………………………………………………………. pagina x

Figura 2.12 Administratorii platformei web ………………………………………………… pagina x

Figura 3.1. Describe users și adminusers …………………………………………………….. pagina x

Figura 3.2. Describe mișcare …………………………………………………………………….. pagina x

Figura 3.3 Manipulare date mișcare …………………………………………………………… pagina x

Figura 3.4 Pagina pentru autentificare ……………………………………………………….. pagina x

Figura 3.5 Butonul fa o poza …………………………………………………………………….. pagina x

Figura 3.6 Vizualizarea pozei în pagina poze.php ……………………………………….. pagina x

Figura 3.7 Butoanele preznete pe pagina home.php …………………………………….. pagina x

Figura 3.8 Grafic avertizare mișcare ………………………………………………………….. pagina x

Figura 3.9 Tabel notificări ………………………………………………………………………… pagina x

Figura 3.10 Criptarea parolei …………………………………………………………………….. pagina x

Figura 3.11 Eroare de înregistrare a unui nou utilizator ………………………………… pagina x

Lista Tabelelor

Tabelul 1.1 Diferențele dintre camerele IP și CCTV ……………………………………………….. pagina x

Tabelul 2.1 Conexiunile fizice ale sistemului …………………………………………………………. pagina x

Lista Acronimelor

BLE – Bluetooth Low Energy (Bluetooth cu energie scăzută)

CCD – Charge Coupled Device (Dispozitiv cu cuplaj de sarcină)

CCTV – Closed Circuit Television (Televiziune cu circuit închis)

CSI – Camera Serial Interface (Interfața seriala a camerei)

CSS – Cascading Style Sheets

DVR – Digital Video Recorder (Înregistrare video digitală)

DSI – Display Serial Interface (Interfața serială a ercanului)

FPS – Frames Per Second (Cadre pe secundă)

GPIO – General Purpose Input-Output ()

IoT – Internet of Things (Internetul lucrurilor)

IP – Internet Protocol. (Protocolul internetului)

IR – Infrared Radiation (Radiatie cu infraroșu)

HD – High-definition (Înaltă definiție)

HDMI – High-Definition Multimedia Interface (Interfața multimedia cu înaltă definiție)

HTML – Hypertext Markup Language

MJPEG – Motion JPEG (JPEG în mișcare)

MP – Megapixel

NVR – Network Video Recorder (Rețea de înregistrare video)

PC – Personal Computer (Computer personal)

PHP – Hypertext Preprocessor

PIR – Passive Infrared Sensor (Senzor pasiv cu infraroșu)

PoE – Power over Ethernet (Alimentare prin Ethernet)

SBC – Single-Board Computer (Computer dintr-o singură placă)

SD – Secure Digital (Securitate digitală)

SQL – Standardized Query Language (Limbaj de interogare standardizat)

SDRAM – Synchronous Dynamic Random-Access Memory (Memorie sincronă dinamică cu acces aleatoriu)

UTP – Unshielded Twisted Pair Cable (Cabluri torsadate neecranate)

Introducere

Camerele de securitate reprezintă una din cele mai utilizate tehnologii moderne, acestea fiind utilizate atât în case, pe străzi sau la birouri. Cerințele ce au ca obiectiv sistemele de supraveghere video cresc din ce în ce mai rapid în ziua de astăzi. Unul dintre cele mai importante lucruri pe care oamenii doresc să le știe legat de sistemele de supraveghere este dacă au sau nu posibilitatea de a se conecta la ele prin intermediul internetului pentru a putea vizualiza de la distanță ce se întâmplă în aria de acoperire a camerei video. Până în urmă cu câțiva ani sistemele de securitate necesitau o persoană ce trebuia să vizioneze în permanență dintr-o încăpere mai multe monitoare în același timp pentru a fi sigur că totul este în regulă în zonele supravegheate. Altă posibilitate era ca în cazul în care s-a întâmplat ceva într-un anumite interval de timp, cineva să reurmărească materialul video, însă această practică putea aduce mai multe pagube, neputând acționa în timp util pentru a remedia situația respectivă și necesită un spațiu de stocare destul de mare întrucât trebuiesc stocate foarte multe ore de filmare de la mai multe camere video, spațiul de stocare putând să varieze în funcție de calitatea video aleasă.

Datorită progreselor tehnologiei de supraveghere video a fost făcută posibilă supravegherea camerelor de securitate de pe orice PC sau telefon inteligent conectat la internet din orice loc al planetei. În ziua de azi există două tipuri destul de comune de sisteme folosite pentru supravegherea video: camerele IP și camerele CCTV. O cameră IP este o cameră video digitală utilizată pentru a supraveghere și în același timp să capteze și să transmită date printr-o conexiune la internet. CCTV reprezintă un sistem în care semnalele sunt monitorizate îndeaproape pentru securitate și supraveghere. În continuare voi prezenta o comparație între cele două sisteme astfel încât oricine să poată lua o decizie în ceea ce privește modul potrivit de protecție a propriei case sau afacere.

Camerele IP spre deosebire de cele CCTV reprezintă următoarea generație de sisteme de supraveghere, acestea având o calitate mai bună a imaginii și o rezoluție mai bună. Ele generează o imagine direct din datele digitale fără a difuza un flux continuu de video analogic. Datorită camerelor IP mai mulți utilizatori se pot conecta la acestea simultan de pe mai diferite dispozitive, în plus utilizatorii au la dispoziție diverse caracteristici avansate de control asupra camerelor. [1]

Camerele CCTV sunt unele din cele mai clasice aplicații de detecție a intruziunilor. O cameră de acest tip poate produce imagini sau înregistrări pentru supraveghere ori alte scopuri private. Aceste camere de luat vederi pot să fie camere video sau chiar și camere foto digitale. Rolul camerelor CCTV este acela de a capta lumină și să o transforme într-un semnal video. La baza acestor camere stă senzorul CCD care converteste lumină într-un semnal electric, iar semnalul electric îl transformă într-un semnal video care poate să fie afișat pe un ecran dar și înregistrat. [2

Camerele CCTV depind de plasamentul strategic ales pentru poziționarea camerelor și monitorizarea înregistrărilor video de pe monitor. Videoclipurile sunt stocate digital folosindu-se un DVR ce folosește cabluri coaxiale sau comunicații private fără fir. O vizionare de la distanță este posibilă doar atunci când DVR-ul are o conexiune la internet. Camerele IP reprezintă dispozitive ce pot fi utilizate imediat după ce au fost alimentate la curent electric, nefiind necesare alte configurații, de asemenea aceste camere folosesc NVR pntru stocarea conținutului digital.

Principalele diferențe între camerele IP și CCTV sunt prezentate în tabelul 1.1:

Tabelul 1.1 Diferențele dintre camerele IP și CCTV. [1]

Tehnologia din ziua de azi urmărește ca produsele să fie cât mai accesibile, acest lucru referindu-se în prinicpal la costul produsului și ușurința punerii în practică a acestuia. Raspberry Pi reușește să elimine ambele criterii datorită faptului că este un calculator destul de ieftin, eficient dar se și poate interfața cu multe alte module pentru a putea realiza sisteme cu diverse funcționalități. Acest calculator poate crea diverse dispozitive cum ar fi: iluminare automată, seră inteligentă, server VPN, punct de acces, sistem de securitate, etc. Sistemul de securitate face obiectul discuției cu privire la acest proiect deoarece Raspberry Pi este capabil să implementeze un sistem de securitate eficient pentru diverse aplicații.

O aplicație poate fi dezvoltată în mai multe moduri, spre exemplu se pot face sisteme care detectează mișcare datorită unor senzori specifici precum în cazul proiectului mai jos prezentat sau prin procesarea imaginilor care presupune prelucrarea cadrelor imagine sau video ce sunt obținute de la intrare. Scopul acestei procesări de imagine este datorat faptului că poate analiza imaginile astfel încât să se detecteze persoane sau diferite obiecte ce au fost surprinse în respectivele cadre. De asemenea prin acest tip de procesare se pot detecta obiectele/persoanele ce se află în mișcare, acest lucru putându-se detecta prin analizarea unor cadre succesive. Aplicând diverși algoritmi se pot detecta cu ajutorul unei baze de date persoanele ce se află într-o anumită imagine, acest lucru ajutând foarte mult să crească nivelul de securitate.

Una din problemele principale pe care o regăsim când vine vorba de instalarea unei camere video pentru securitate o reprezintă alimentarea cu energie electrică deoarece aceasta poate fi montată în diverse zone în care nu există curent electric. O metodă ecologică și nu foarte costisitoare o poate reprezenta folosirea panourilor solare pentru a capta razele soarelui și a le transforma în curent continuu, urmând ca și acesta să fie transformat în curent alternativ iar mai apoi utilizat de către camerele de supraveghere sau înmagazinat în interiorul unor baterii pentru utilizare ulterioară în cazul în care panourile generează un exces de energie electrică. O altă variantă de alimentare a camerelor în cazul în care nu este furnizată energia electrică în zona respectivă, se pot folosi baterii cu o capacitate îndeajuns de mare încât să poată susține funcționarea în permanență a camerelor de supraveghere pentru o perioadă destul de îndelungată, un dezavantaj îl reprezintă necesitatea înlocuririi sau reîncărcării acestor baterii periodic

În Captiloul 1 voi descrie conceptul reprezentat de internetul lucrurilor și voi face o scurta descriere a componentelor electronice pe care le-am folosit în conceperea proiectului, dar și a instrumentelor software utilizate.

În Capitolul 2 voi prezenta mai în detaliu conceperea fizică a sistemului, conexiunile necesare dintre componente pentru a putea funcționă împreună și voi încheia prezenand fiecare program creat de către mine pentru a putea realiza ceea ce mi-am propus.

În Capitolul 3 voi da detalii legate despre paginile web create și despre baza de date, aceasta având o anumită legatra cu site-ul.

Motivație

Tehnologiile IoT fac schimbări pe scară largă în ceea ce privește modul în care trăiesc și muncesc oamenii. Odată cu evoluția sistemelor inteligente, va fi posibil ca persoanele în viitor să acceseze și să controleze diferite tipuri de roboți și mașini, folosind un singur monitor. În ultimul deceniu având o gamă largă de terminale inteligente, smartphone-urile sunt una din cele mai populare și preferate opțiuni de control la distanță, în comparație cu Pc-urile și laptopurile, acum și în viitorul apropiat. Aceste tehnologii oferă posibilitatea de a conecta, gestiona și controla o mulțime de dispozitive și obiecte care în trecut nu puteau fi conectate, acest lucru fiind posibil datorită gamei largi de platforme și protocoale existente.

Această conectivitate oferă și posibilitatea colectării datelor ce până acum nu erau disponibile. Dispozitivele inteligente îmbunătățesc viața de zi cu zi a oamenilor atât acasă cât și la serviciu sau la birou. În ciuda faptului că multe sectoare de producție devin din ce în ce mai robotizate, dispozitivele IoT nu înlocuiesc munca umană, oamenii fiind în continuare necesari în procesele de producție , dar vor fi ajutați de soluțiile IoT.

Exemple de aplicații unde poate fi util acest sistem

Supravegherea frontierelor

Protejarea frontierelor de pe uscat și de pe coastă este iminentă pentru orice stat și necesită tehnologii de supraveghere permanentă, pentru o durată lungă de timp. Detectarea intrușilor la frontieră în diferite scenarii a reprezentat întotdeauna o provocare pentru orice țară. În sistemele tradiționale de patrulare a frontierei, poliția sau armata păzește zona de frontieră prin rute prestabilite la intervale diferite de timp, în acest caz un impediment îl reprezintă forța de muncă datorită faptului că este nevoie de foarte mulți oameni pentru a proteja o anumită arie. În cazul în care se alege un sistem de supraveghere electronic, problema principală o reprezintă factorul financiar, datorită costurilor ridicate reprezentate de senzori, integrarea mai multor tipuri de senzori într-un singur sistem și adoptarea protocoalelor de comunicare necesare.

De asemenea este nevoie de mai multe tehnologii de supraveghere și detectare, care să se completeze reciproc pentru monitorizarea în timp real a zonelor de frontieră cu o eficiență ridicată, precizie mare și un suport uman minim. Sistemele de supraveghere necesită scanarea unor zone largi și identificatrea obiectivelor în timp real. Revenind la partea financiară, camerele ce deservesc pentru transmiterea video în direct trebuiesc alese și în funcție de zona geografică sau formă de relief, spre exemplu într-o zonă de munte unde există mai multe animale trebuie aleasă o cameră cu IR mai bună, deci mai scumpă pentru a putea diferenția animalele de o persoană, în comparație cu o zonă de câmpie sau zona de litoral ce se află în câmp deschis, în acest caz putând fi aleasă o cameră mai puțin performanță. În funcție de performanțele camelor cu termo-viziune se pot detecta ținte de dimensiuni umane de la mai mulți kilometrii depărtare.

Monitorizarea traficului

Prin utilizarea camerelor de supraveghere se poate monitoriza activitatea unei parcări, a unei gări, pot fi înregistrate numerele de înmatriculare, etc. Un sistem de detectare a traficului poate avertiza oficialii municipali cu privire la posibilele blocaje din trafic și le permite acestora să redirecționeze traficul său să schimbe durata luminilor de stop. O parcare poate fi monitorizată prin utilizarea unui soft care poate detecta cu ajutorul camerelor de supraveghere câte mașini sunt în interiorul respectivei parcări, de asemenea se poate analiza tipul de mașini, dacă au intrat mașini de mare tonaj pentru sau doar mașinile clienților. De asemenea într o parcare ce se intră pe bază de acces autorizat se pot introduce numerele mașinilor ce au permisiunea de a intra în respectiva parcare iar în momentul în care cu ajutorul camerei de supraveghere a fost detectat un număr ce are drept de acces bariera să se ridice automat, fără a fi nevoie de un gardian care să îi permită fizic accesul.

O metodă ce poate fi folosită pentru fluidizarea traficului din orașe este aceea de a supraveghea zonele aglomerate, iar valorile ce se pot detecta cu diverse softuri cum ar fi: distanța ce o păstrează șoferii între ei, perioadele de timp în care zonele supravegheate sunt aglomerate, ce tip de mașini frecventează acea zonă, dacă circulă și persoane cu vehicule sau autovehicule pe două roți. Având la dispoziție aceste date, autoritățile locale pot trage niște concluzii și pot impune anumite restricții pentru decongestionarea traficului.

Prevenirea criminalitatii

Comunitatea locala caută în permanentă cele mai noi tehnologii cu care pot ajuta la îmbunătățirea siguranței persoanelor ce locuiesc în zona respectiva și nu numai, una din principalele probleme fiind reprezentata de rata criminalității care se dorește să fie într-o scădere continua. Unul dintre cele mai noi sisteme de securitate publică îl reprezintă camerele de supraveghere. Teoria ce a dus la montarea acestor sisteme de supraveghere a fost că potențialii infractori vor dori să renunțe la planurile lor în momentul în care vor observa că sunt urmăriți, acest lucru reprezentând un potențial mai scăzut de a săvârși fapta și a rămâne nepedepsiți.

De asemenea în cazul desfășurării unor evenimente ilegale în aria zonei supravegheate, oamenii legii pot identifica mai ușor și mai rapid făptașii sau oamenii ce au fost prezenți la respectivul eveniment, astfel cazurile vor putea fi închise prin folosirea dovezilor video.[3]

Capitolul 1. Descrierea tehnologiilor utilizate în realizarea proiectului

1.1 Internet of Things

Prin IoT ne referim la miliarde de dispozitive fizice din întreagă lume care sunt acum conectate la internet, colectând și partajând date. Datorită procesoarelor ieftine și a rețelelor wireless, este posibil să transformi aproape orice într-o parte a IoT. Acest lucru adaugă un nivel de inteligentă digitală dispozitivelor care altfel nu ar fi la fel de folositoare, permițându-le să comunice date în timp real fără a implica o ființă umană, îmbinând efectiv lumea digitală și cea fizică. În aplicațiile industriale, senzorii pot crește eficiența. Un studiu estimează că 35% dintre producătorii americani folosesc deja date de la senzori inteligenți în cadrul setărilor lor. [4]

„Internetul lucrurilor este o tehnologie în curs de dezvoltare, care tinde spre a face parte din viața cotidiană din ce în ce mai mult. Multiplele aspecte ale IoT, precum și numărul din ce în ce mare de dispozitive, tehnologii și platforme în acest domeniu, au condus că IoT să fie o tehnologie extinsă în multe domenii. Internetul lucrurilor reprezintă o tehnologie ce vă permite intrarea într-o nouă eră economică pentru întregul glob. IoT este un concept care definește o lume în care toate obiectele: mașini, electrocasnice, sisteme de iluminat, dispozitive mobile, portabile, etc. sunt conectate între ele prin intermediul Internetului. IoT nu este rezultatul unei singure tehnologii noi, mai multe progrese tehnice complementare furnizează capabilități care, luate împreună, ajută la eliminarea decalajului dintre lumea virtuală și cea fizică. Aceste capabilități susțîn IoT și perspectivele dezvoltării acestuia. Organizațiile economice vor trebui să înceapă să implementeze tehnologia IoT dacă doresc să supraviețuiască pe termen lung, însă de asemenea vor trebui să pună în aplicare strategii care să răspundă numeroaselor riscuri asociate cu internetul lucrurilor.

Internetul lucrurilor nu se bazează numai pe calculatoare că să existe. Fiecare obiect, chiar și corpul uman, poate deveni o parte din internetul lucrurilor dacă este echipat cu anumite componente electronice. Aceste părți variază cu siguranță, în funcție de ce trebuie să efectueze obiectul, dar se încadrează în două mari categorii:

obiectul trebuie să fie capabil să captureze date, de obicei, prin intermediul senzorilor.

obiectul trebuie să fie în măsură să transmită aceste date în altă parte prin intermediul Internetului.

Un senzor și o conexiune, prin urmare, sunt cele două părți electronice primare ale unui obiect inclus în Internetul lucrurilor.” [5]

În figura 1.1 sunt reprezentate diverse obiecte ce se pot conecta intre ele cu ajutorul internetului lucrurilor.

Figura 1.1 Internetul lucrurilor

„Cele mai importante caracteristici ale Internetului lucrurilor sunt următoarele:

Distributivitatea: Internetul lucrurilor vă evolua într-un mediu extrem de distribuit. Datele vor putea fi colectate din surse diferite și prelucrate de către mai multe entități într-un mod distribuit;

Interoperabilitatea: dispozitivele provenite de la furnizori diferiți vor trebui să coopereze în vederea atingerii obiectivelor comune. Sistemele și protocoalele vor trebui să fie proiectate într-un mod care să permită obiectelor (dispozitivelor) provenite de la diverși producători să facă schimb de date și să lucreze într-un mod interoperabil;

Scalabilitatea: în Internetul lucrurilor se preconizează că miliarde de obiecte vor face parte din rețea. Astfel, sistemele și aplicațiile care rulează în partea de sus a rețelei vor trebui să gestioneze un volum fără precedent de date;

Deficitul de resurse: atât puterea energetică, cât și resursele de calcul vor fi extrem de limitate;

Securitatea: existența unui control extern necunoscut vă genera frustrare în rândul utilizatorilor fapt care ar reprezenta un impediment serios în ceea ce privește implementarea Internetului lucrurilor.” [5]

Pe o scară mai largă, IoT poate fi aplicat unor lucruri precum rețele de transport: „orașe inteligente” care ne pot ajuta să reducem deșeurile și să îmbunătățim eficiența pentru lucruri precum utilizarea energiei; acest lucru ne ajută să înțelegem și să îmbunătățim modul în care lucrăm și trăim.

1.2 Descrierea componentelor hardware

1.2.1 Raspberry Pi

Componenta cea mai importanta a acestui proiect o reprezintă plăcuta Raspberry Pi. Acesta este un dispozitiv remarcabil, un calculator complet funcțional într-un pachet mic și ieftin. Dispozitivul reprezintă de fapt o placa de dezvoltare de tip SBC, sistemul acesta fiind foarte des folosit în mediul universitar pentru că este foarte ușor de utilizat iar studenții pot avea un punct de plecare foarte bun în domeniul electronicii și chiar al automatizării. Sistemul de operare special optimizat pentru aceasta placa de dezvoltare este Raspbian și este o distribuție de Linux. Datorita faptului că Raspberry Pi are niste dimensiuni mici este mai lent decât un PC, dar un avantaj îl reprezintă faptul că are un consum redus de energie, dar cu toate astea poate îndeplini un număr mare de funcții în același timp. Pentru îndeplinirea diverselor funcții pot fi de folosite porturile de intrare/ieșire și pinii GPIO, putandu-se conecta prin intermediul acestora direct la placa diverse componente: senzori, antene.

Pe piață exista mai multe generații de plăcute de tip Raspberry Pi. Primul model a fost lansat pe piață în 2012, Raspberry Pi 1 Model B, acesta fiind urmat de modelul puțin mai ieftin, Modelul A. Mai tărziu a fost prezentat și un model mai performant, Raspberry Pi 1 Model B+ și Modelul A+. Următorul model apărut a fost Raspberry Pi2, acesta având că principal avantaj creșterea memoriei RÂM. În 2016 a apărut Modelul Raspberry Pi Zero acesta având o dimensiune redusa comparativ cu precedentele plăcute dar cu mai puține porturi, însă apar pentru prima pinii GPIO. Primele placi ce a aveau incorporate module Wi-Fi și Bluetooth au fost Raspberry Pi zero WH și Raspberry Pi Zero W. Raspberry Pi 3 Model B a fost lansat în februarie 2016 cu un procesor cu patru nuclee pe 64 de biți de 1.2 GHz iar cel mai performant model la ora actuala îl reprezintă Raspberry pi 3 Model B+. [6]

Raspberry Pi 3 Model B+ are un procesor cu patru coruri Cortex-A53 pe 64 de biți cu o frecventă de 1.4 GHz și cu 1 GB SDRAM. De asemenea mai conține module Bluetooth 4.2, BLE, Wi-Fi 802.11.b/g/n/ac, port Gigabit Ethernet, 4 porturi USB 2.0, port HDMI, ieșire video, ieșire audio, port DSI pentru a se putea conecta un ecran tactil, port CSI pentru a se putea conecta camera Pi NoIR, 40 de pini GPIO și slot pentru un card micro SD. Pentru alimentare mufa este de tip micro USB și este necesara o sursa ce poate oferi 5V și 2,5A. [7]

Modelul pe care l-am ales pentru a-l folosi în proiect este Raspberry Pi 3 Model B+ ce este prezentat în figura 1.2.

Figura 1.2 Raspberry Pi 3 Model B+. Imagine preluată din sursa [7]

Numerotarea, distribuirea și denumirea pinilor de pe Raspberry pi sunt prezentate în figura 1.3.

Figura 1.3. Pinii GPIO de la Raspberry Pi 3 Model B+.

1.2.2 Camera cu termoviziune Panasonic AMG8833 IR

În acest proiect a fost folosita camera termica prezentata în figura 1.4. :

Figura 1.4. Camera termică Panasonic AMG8833 IR. Imagine preluată din sursa [8]

Acest senzor de la Panasonic face parte dintr-o gama de senzori termici IR de 8×8. După cum sugerează și numele, AMG8833 conține 8 rânduri de 8 pixeli. Abundenta de 64 de pixeli permite distribuția temporala și spațială a temperaturii, lucru destul de rar întâlnit în domeniul electronicii cu costuri reduse. Aceasta camera termica are o precizie de aproximativ 2.5 °C. [9]

AMG8833 măsoară pasiv radiația termica de la un corp gri (nu absoarbe sau emite țoață radiația ci doar o parte a ei). Temperatura este calculata aplicând legea Ștefan-Boltzmann [10] :

– reprezintă emisivitate ce poate lua valori intre 0 și 1,

– A reprezintă suprafață acoperita,

– reprezintă constanta Stefan-Boltzmann,

– T reprezintă temperatura termodinamica a corpului,

– P reprezintă puterea radiata de obiect.

După ce se afla puterea radiata mai trebuie aplicata o ecuație pentru a putea aproxima temperatura unui corp gri:

– V reprezintă voltajul măsurat de senzor,

– k reprezintă o constanta empirica care absoarbe zgomotele ce pot exista,

– reprezintă temperatura senzorului,

– reprezintă temperatura obiectului măsurat.

Ecuația finala pentru determinarea temperaturii obiectului este:

. [9]

1.2.3 Modul de cameră Pi NoIR

Tot în acest proiect am utilizat o camera cu infraroșu pentru redundanță și pentru o mai bună vizibilitate asupra detaliilor. Aceasta componenta este prezentată în figura 1.5.

Figura 1.5. Modul de camera Pi NoIR.

Aceasta camera se poate conecta direct prin conectorul CSI de pe Raspberry Pi și dispune de 2 spoturi cu led-uri infraroșii de înalta intensitate pentru înregistrarea pe timp de noapte. Led-urile IR sunt alimentate direct de la portul CSI și sunt capabile să lumineze o zona la o distanta de până la 8 metrii. Testele au demonstrat că cele mai bune imagini se pot captura la o distanta de 3 metri până la 5 metri.

Camera are de asemenea o lentila reglabila de focalizare de 3,66 milimetri și un unghi de vizibilitate de 75,7 grade. Aceasta camera este gândită pentru fotografiatul de zi cu zi și prin urmare este capabila să furnizeze o imagine de rezoluție 5MP sau o înregistrare video de 1080p HD la 30fps. [11]

1.2.4 Modul Senzor PIR HC-SR501 (Senzor de Mișcare)

In acest proiect a fost folosit un senzor de miscare prezentat in figura 1.6. :

Figura 1.6. Modul Senzor PIR HC-SR501.

Toate obiectele cu o temperatura mai mare de zero absolut, emit energie termica sub forma de radiație infraroșie.

Senzorul PIR este special conceput pentru a detecta astfel de niveluri de radiații infraroșii. Se compune în principal din doua parti principale: un senzor piroelectric și un obiectiv special numit lentila Fresnel care focalizează semnalele infraroșii pe senzorul piroelectric.

Figura 1.7. Zonele de detecție ale senzorului PIR HC-SR501. Imagine preluată din sursa [12]

Un senzor piroelectric are de fapt doua sloturi dreptunghiulare realizate dintr-un material care permite radiația infraroșie să treacă. În spatele acestora, sunt doi electrozi separați ai senzorilor infraroșii, unul responsabil pentru producerea unei ieșiri pozitive, iar celalalt o ieșire negativa. Cei doi electrozi sunt conectați astfel încât să se anuleze unul pe celalalt. Daca jumătate vede mai multa sau mai putina radiație decât celalalt, ieșirea se vă mișcă sus, jos.

Când senzorul este inactiv, adică nu exista nicio mișcare în jurul senzorului, ambele sloturi detectează aceeași cantitate de radiație infraroșie, rezultând un semnal de ieșire zero.

Senzorul HC-SR501 PIR are trei ieșiri VCC, ieșire și masă. Acesta dispune de un regulator de tensiune încorporat astfel încât să poată fi alimentat de orice tensiune între 4.5 și 12 volți, de obicei 5V.

Pe placa exista doua potențiometre pentru a ajusta câțiva parametri:

Sensibilitatea: aceasta stabilește distanta maxima la care mișcarea poate fi detectata. Aceasta variază de la 3 metri la aproximativ 7 metri.

Timpul: acesta stabilește cât tim ieșirea vă rămâne sus după detecție. De la minim 3 secunde la maxim 300 de secunde.

Senzorul conține și un jumper ce are doua setări:

H: aceasta este opțiune de repetare, senzorul vă continua să emită un semnal sus atâta timp cât continua să detecteze mișcare.

: aceasta este opțiunea fară repetare, ieșirea rămâne sus pentru perioada de timp stabilita de reglajul potențiometrului pentru timp. [12]

1.3 Descrierea componentelor software

1.3.1 Raspbian

Raspbian este unul dintre sitemele de operare disponibile gratuit ce este bazat pe Debian Linux, însă este optimizat pentru platforma hardware a plăcii de dezvoltare Raspberry Pi. Un sistem de operare reprezintă un set de programe și utilitare de bază care împreună reușesc să pornească și să controleze această placă Raspberry Pi. Totuși Raspbian oferă ceva mai multe față de un sistem de operare normal, acesta venind cu peste 35000 de pachete și un software preinstalat sub un format plăcut, ceea ce oferă o instalare mai ușoară pe Raspberry Pi.

Îmbinarea și optimizarea celor peste 3500 de pachete din Raspbian a fost făcută pentru a obține o performanță crescuta pe Raspberry Pi, acest lucru reușind să fie finalizat în iunie 2012. Având în vedere acest fapt se continuă să se lucreze la dezvoltarea sa, accentul fiind pus pe îmbunătățirea stabilității și performanței pachetelor Debian. [13]

Raspbian include și instrumente de programe python, desktop GUI și navigare. Mediul desktop are o interfață de utilizator atractivă ce a fost construită folosind software-ul Window System Software. [14]

1.3.2 Python

Python este unul dinre cele mai populare limbaje de programare. Acesta are o biblioteca foarte mare ce depășește multe alte limbaje. Biblioteca standard permite alegerea dintr-o gama foarte larga de module în funcție de nevoile fiecărei persoane.

Un aspect foarte important de care te poți folosi în momentul în care utilizezi o plăcuta Raspberry Pi sunt pinii GPIO. Cu ajutorul acestor pini se pot transmite semnale de ieșire către alte dispozitive periferice spre exemplu: led-uri, senzori, antene, motoare, etc. De asemenea aceștia pot fi setați și că pini de intrare astfel încât să putem afla starea diverselor dispozitive sau datele pe care le transmit la ieșire.

Pentru a putea accesa pinii GPIO prin intermediul limbajului de programare Python, poate fi utilizata librăria GPIO Zero, aceasta venind preinstalata cu sistemul de operare Raspbian sau Rpi.GPIO care trebuie instalata din terminalul sistemului de operare utilizând comanda: „pip install Rpi.GPIO”. În interiorul script-urilor trebuie introduse comenzile: from gpiozero import MotionSensor respectiv: import Rpi.GPIO aș GPIO. [15]

1.3.3 MySQL

„MySQL este un sistem de gestionare a bazelor de date relaționale, ce operează într-o arhitectura client-server. Clienții MySQL se pot conecta la server efectuând cereri către acesta.

Pachetul MySQL conține următoarele categorii de software:

Serverul MySQL. Este cel care gestionează bazele de date, stocate pe hard-disk-uri sau în memorie și cel prin intermediul căruia clienții pot efectua operațiile dorite cu bazele de date (creare, ștergere, modificare, etc.). Clienții se pot conecta fie prin rețea folosind protocolul TCP, fie prin alte mijloace care depind de sistemul de operare gazda.

Clienții MySQL. Distribuția MySQL include și programe ce interferează cu serverul, conectandu-se la el și efectuând cereri către acesta. Distingem doua categorii de utilitare:

cele pentru manipulare a structurii bazelor de date și a datelor continue:

mysql, ce oferă utilizatorului o linie de comanda cu serverul SQL

mysqldump, ce realizează un backup al unei tabele

mysqlimport, ce importa date dintr-un fișier într-o tabela a unei baze de date

cele pentru administrarea serverului

mysqladmin, utilitar de monitorizare si administrare a serverului MySQL

Programe utilitare non-client. În aceasta categorie intra softuri care nu se conectează la server, ci își realizează funcțiile prin accesul direct la date.” [16]

MySQL este disponibil atat pentru Windows cat si pentru distributiile de Linux. Interactiunea intre server si clienti se efectueaza prin intermediul unui protocol de retea, care este acelasi indiferent de sistemul de operare al serverului si al clientilor. [17]

1.3.4 HTML

Hypertext Markup Language este limbajul de programare în care sunt scrise cele mai multe site-uri web și poate fi asistat de alte limbaje cum ar fi CSS, JavaScript. Browser-ul web primește documentele HTML de la un server și le transforma în pagini web. Elementele care stau la baza acestui limbaj sunt etichetele și atributele, iar terminația unui fișier de acest tip trebuie să aibă extensia „.html”. Acestea lucrează împreună, dar îndeplinesc funcții diferite. Etichetele sunt folosite pentru a marca începutul unui element HTML și sunt de obicei închise în paranteze unghiulare. Un exemplu poate fi: <h1>.

Majoritatea ethichetelor pentru a funcționă trebuie să fie deschise <h1> și închise </h1>, iar când sunt utilizate mai multe etichete, acestea trebuie să fie închise în ordinea în care au fost deschise. Atributele conțin informații suplimentare, acestea pot lua forma unei etichete de deschidere iar în interiorul lor sunt plasate informații suplimentare. Un exemplu de atribut poate fi: <img src=”poza.jpg” alt=”Am afisat o poza.”>, în acest caz sursa imaginii este „src” și textul „alt” sunt atribute ale etichetei <img>. [18]

1.3.5 PHP

PHP sau Hypertext Preprocessor reprezintă un limbaj de scripting open source, ce este potrivit pentru dezvoltarea de aplicații web și de asemenea poate să fie integrat în pagini HTML. Scripturile PHP pot fi interpretate numai pe un server care are instalat PHP. Calculatoarele clienților care accesează scrip-urile PHP necesita numai un browser web. Un astfel de fișier trebui să aibă extensia „.php”.

În PHP codul sursa este incorporat intre niste instrucțiuni de procesare de început și de sfârșit speciale <?php și ?> care permit să se intre și să se iasă din modul PHP. Când un client accesează o pagina PHP codul este rulat pe server, astfel se generează pagina HTML ce este trimisa înapoi către client. Clientul când vă primi rezultatele execuției acelui script, nu vă putea știi codul sursa ce sta la baza.

Limbajul acesta are mai multe avantaje printre care pot fi enumerate următoarele: poate fi rulat pe majoritatea sistemelor de operare (Linux, Windows, Mac etc.), este gratuit și compatibil cu majoritatea serverelor. Desigur că au fost lansate mai multe versiuni de PHP, însă cea mai noua versiune este 7.3.6. [19]

1.3.6 JavaScript

JavaScript este un limbaj de programare ce e utilizat în principal de browserele web pentru a putea crea o experiență mai dinamica și interactiva pentru toți utilizatorii. Cele mai multe din funcțiile și aplicațiile ce fac internetul să fie indispensabil vieții moderne sunt codificate într-o forma de JavaScript.

În momentul în care au fost dezvoltate primele încărcări ale JavaScript, paginile web erau statice, oferind foarte putina interacțiune cu utilizatorii. Pentru foarte mulți ani, JavaScript a funcționat pe un număr limitat de browsere, Microsoft Internet Explorer refuzând JavaScript pentru o perioada lunga de timp.

Majoritatea aplicațiilor web, spre exemplu un motor de căutare, funcționează folosindu-se de interacțiuni dintre un server de la distanta și dispozitivul utilizatorului (telefon, computer, tableta, etc.). Software-ul de pe serverul de la distanta transmite informații către dispozitivele clienților sai, iar software-ul instalat pe mașinile clienților citește informația și o reda într-o pagina Web pe ecran.

JavaScript este un script de client, asta însemnând că este un limbaj de programare ce își îndeplinește sarcinile pe dispozitivul clientului și nu are nevoie să interacționeze cu un server pentru a funcționă. [20]

1.3.7 CSS

CSS sau Cascading Style Sheets este limbajul de codare care oferă un aspect mai frumos site-ului. Împreună cu HTML, CSS este fundamental pentru designul web. Fară acestea, site-urile web ar avea în continuare text simplu pe fundal alb. Înainte de a fi dezvoltate CSS, paginile web erau foarte limitate atât că forma dar și că funcții. Browserele din trecut aveau o pagina cu text simplu, imagini și câteva link-uri către alte pagini web.

Dezvoltatorii web își folosesc paginile după „modelul cutiei”, o pagina web are o serie de cutii, fiecare conținând cate un element. Aceste cutii sunt îmbinate una în alta. De exemplu, antetul unei apgini este o cutie ce conține mai multe cutii mai mici care cuprind toate elementele ce formează un antet: navigare, logo, butoane pentru mediile sociale, etc. Prin CSS, un dezvoltator poate atribui stiluri pentru acest antet. [21]

1.4 Legăturile dintre componentele sistemului

Se vă descrie modul în care au fost conectate dispozitivele și tehnologiile utilizate în cadrul proiectului:

A fost utilizata o interfață pentru comunicarea în rețea:

Datorita faptului că Raspberry Pi are modulul wi-fi integrat, plăcuta poate stabili o conexiune wireless prin intermediul interfeței SSH în linie de comanda sau VNC printr-o interfață grafica ce utilizează protocolul Remote Frame Buffer (RFB).

Au fost utilizate interfețe hardware:

Interfețele hardware de care dispune proiectul și care au fost folosite sunt CSI și pinii GPIO. Prin interfață camera a fost posibila conectarea unei camere cu IR iar aceasta a trebuit activata din linia de comanda a sistemului de operare executând comanda: „sudo rasp-config”.

De asemenea au fost utilizați pinii GPIO pentru utilizare senzorului PIR HC-SR501 și AMG8833 IR.

Din punct de vedere software sistemul trimite notificare prin e-mail în momentul în care senzorul PIR HC-SR501 detectează mișcare, iar datele provenite de la cele doua camere sunt prelucrate și transmise către servere.

Capitolul 2. Realizarea practica a sistemului

2.1 Descrierea functionalitatii sistemului

Componenta principală ce este utilizată pentru acest sistem o reprezintă placa de dezvoltare Raspberry Pi, cu sistemul de operare Raspbian bazat pe Linux ce reprezintă componenta care îndeplinește funcția de control a întreg sistemului. Obiectivul lucrării a fost acela de a putea supraveghea de la distanta prin intermediul unor camere de supraveghere ce se întâmplă într-o anumită arie. Senzorul de mișcare ajuta că în momentul în care nu este o persoana disponibila pentru a putea urmări transmsinuile, să fie trimis un e-mail de avertizare.

Schema de funcționare generală a proiectului s-a conceput bazându-se pe schema din figura 2.1 :

Figura 2.1 Schema generală a proiectului.

După cum se poate observa în schema generală de funcționare, există în centrul sistemului placa Raspberry Pi, prin intermediul căreia se pot prelucra datele obținute de la senzori și camere pentru a fi posibila alerta în caz de mișcare și transmisiunile în direct.

Figura 2.2 evidențiază într-un mod mai detaliat legăturile ce au fost realizate intre placa Raspberry Pi și restul componentelor utilizate, atât hardware cât și software, pentru realizarea acestui proiect.

Figura 2.2 Legăturile dintre blocurile principale.

Blocul Senzor de mișcare are rolul de a recepționă date de la senzorul PIR HC-SR501 iar în momentul în care acesta detectează mișcare este trimis automat un mesaj de avertizare prin e-mail către o anumită adresa, aceasta din urma reprezentând blocul Client e-mail. Toate acestea fiind posibile printr-un script scris în limbajul de programare python.

Blocul Camera Pi NoIR reprezintă camera Pi NoIR ce poate fi accesata din blocul Browser prin 2 butoane, pentru a efectua o fotografie, acțiune ce se realizează prin intermediul blocului Apache web server iar al 2-lea buton permite realizarea transmisiunii în direct prin intermediul blocului Web server port 8000.

Blocul Camera cu termoviziune reprezintă camera AMG8833 IR ce poate realiza o transmisiune în direct cu ajutorul blocului Web server port 8001 daca se accesează blocul Browser.

Blocul baza de date consta într-un tabel ce ajuta la autentificarea persoanelor autorizate ce au acces la pagina web de pe server.

2.2 Schema electrică

Figura 2.3 Schema electrică.

2.3 Conexiuni fizice

În tabelul 2.1 sunt reprezentate conexiunile fizice pe care le-am realizat între componentele hardware ale sistemului:

Tabelul 2.1 Conexiunile fizice ale sistemului..

Camera Pi NoIR am conectato la Raspberry Pi prin interfață CSI.

În figura 2.4 este prezentat modul prin care au fost conectate camerele și senzorul la placa Raspberry Pi.

Figura 2.4 Conexiunile fizice ale proiectului.

2.4 Realizarea software

Pentru a putea face sistemul functionabil din punct de vedere software a trebuit să se creeze mai multe fișiere python, bash, html, php și javascript.

2.4.1 Pornirea și oprirea transmisiunii video în direct de la camera Pi NoIR

Codul sursă pe care l-am creat in fișierul de tip python a avut că scop crearea unui server HTTP, cu ajutorul modulului http.server prin care se dorește să se facă o transmisiune video în direct. Formatul video ce este folosit se numește MJPEG, un format de comprimare video în care fiecare cadru sau camp intercalat al unei secvențe video digitale este comprimat separat că imagine JPEG. De asemenea este esențială importarea bibliotecii picamera pentru a putea accesa camera Pi NoIR, dar înainte trebuie instalata prin comanda: „sudo apt-get install python-picamera”. Rezoluția aleasa pentru aceasta transmisiune este 640×480 cu o frecventa a cadrelor de 24.

Fișierul bash pe care l-am conceput „kill_pi_surveillance.sh” are scopul de a opri procesul pornit de fișierul din directorul astfel încât să se oprească transmisiunea video. Comanda utilizata pentru execuția acestui fișier este: pkill -f.

În figura 2.5 este reprezentata transmisiunea în direct pe o pagina web.

Figura 2.5. Transmisiunea în direct pe o pagina web.

2.4.2 Fotografierea prin intermediul camerei Pi NoIR

În cazul în care în anumite momente nu este obligatorie transmisiunea video în direct și se dorește economisirea benzii de internet pentru prioritizarea altor servicii, transmisiunea video se poate opri și se pot efectua fotografii la diverse perioade de timp prin intermediul fișierului python creat de mine . Programul consta în importarea bibliotecii specifice camerei și anume PiCamera, urmata de pornirea acesteia. Fotografiile ce vor fi efectuate urmând să fie salvate în directorul de la adresa sub denumirea image.jpg, iar în ultima instanță camera vă fi oprița pentru a se putea efectua și alte acțiuni asupra ei.

Figura 2.6 Pornirea/oprirea camerei și capturarea imaginii. Imagine preluată din script-ul poza.py

2.4.3 Transmisiune video în direct de la camera cu termo-viziune

Fișierul de tip python are că scop crearea uni server pentru senzorul AMG8833 că să poată transmite datele în timp real către utilizator. Acesta are nevoie de temperatura minima și maxima pentru a avea un contrast cât mai bun. De asemenea valorile fiecărui pixel preluate de la senzor sunt prelucrate astfel încât chiar și valorile foarte apropiate să poată avea culori diferite dintr-o gama variata de culori.

De asemenea am creat fișierele și pentru a putea transmite datele prin intermediul unui json către server, urmând ca acestea să fie prelucrate și afișate pe platforma web. Funcția din interiorul fișierului thermal.js ajută la împrospătarea imaginii în timp real cu o intârziere minimă folosind json-ul specificat mai sus. Întarzierea am setat-o în interiorul funcției aceasta având valoarea 1000, reprezentând exact o secundă. În fișierul am creat funcțiile și pentru a putea specifica spectrul de culori ales între care va lua valori gradientul și anume acesta va trece de la albastru la roșu astfel încât, cea mai mica valoare să indice albastru(0000ff) iar cea mai mare valoare să indice roșu(ff0000).

În figura 2.6 și 2.7 se poate observa imagini din transmisiunea în direct.

Figura 2.7 Transmisiunea video senzor AMG8833 – 1.

Figura 2.8 Transmisiunea video senzor AMG8833 – 2.

2.4.4 Avertizarea prin e-mail când se detectează miscare

Fișierul python cu ajutorul căruia transmite notificarea către utilizator se numește . Am creat o buclă infinită în care scriptul primește date de la senzor iar în momentul în care se detectează mișcare in zona acoperită se afișează în linia de comandă mesajul „Miscare…” și se pregatește crearea e-mail-ului cu datele ce vor fi introduse în acesta, urmând ca în partea de final să se afișeze tot in linie de comandă fiecare aspect din e-mail-ul transmis și totodată să se și trimită către serverul de gmail pe portul specificat. Ultima parte a programului constă în introducerea unei noi interogări in interiorul tabeluli din baza de date a datei calendaristice și orei curente. Această ultimă etapă este gândită pentru a putea analiza numărul de notificări în funcție de zi atât din punct de vedere tabelar dar și din punct de vedere grafic.

Pentru a nu se umple inutil căsuța poștala electronică a utilizatorului, am setat o pauză în program de douăzeci de secunde până la retransmiterea următorului e-mail în cazul in care în continuare se detecteaza mișcare. În acest program biblioteca cea mai importanta este „smtplib” deoarece prin intermediul acesteia ne putem conecta la un cont personal pentru a trimite e-mail-uri automat de pe acesta. Însă pentru aceasta trebuiesc introduse în interiorul programului mai multe informații: serverul la care dorim să ne conectam, portul și o metoda de autentificare prin numele utilizatorului și parola. Daca dorim să ne conectam la un cont de Google, este nevoie să fie modificata o setare care permite unor aplicații mai puțin sigure să aibă acces la acest cont. Putem face acest lucru accesând următorul link https://myaccount.google.com/lesssecureapps. În figura 2.9 este afișată pagina și setarea pe care am activato în momentul accesarii link-ului de mai sus.

Figura 2.9 Activare setare securitate cont Google. Imagine preluată din sursa [22].

In figura 2.10 este prezentat un e-mail recepționat imediat după ce a fost detectată mișcare de către senzor.

Figura 2.10 Notificare prin e-mail recepționată.

2.4.5 Realizarea bazei de date pentru utilizatorii site-ului

Utilizând limbajul MySQL am creat o baza de date pentru a putea construi un tabel în care să fie introduși toți utilizatorii care se vor putea conecta la platforma web prin intermediul paginii de login.

Am dorit să îmbunătățesc partea de securitate prin faptul că parola este criptata cu ajutorul algorimtului MD5. Spre exemplu primii doi utilizatori au aceeași parola, aceasta fiind "parola" iar rezultatul criptarii este același desigur pentru amândoi "8287458823facb8ff918dbfabcd22ccb". Acest lucru ajuta în cazul în care o persoana neautorizata vă avea acces la aceasta baza de date și vă putea vedea datele din acest tabel, nu vă înțelege nimic din parola afișată, iar daca vă încercă să o introducă pentru a se conecta vă primi un mesaj de eroare deoarece parola vă fi recriptata și vă avea alt rezultat. În figura 2.11 este prezentat tabelul în care sunt înregistrați untilizatorii din baza de date împreună cu parolele lor criptate.

Figura 2.11 Utilizatorii platformei web.

În figura 2.12 este prezentat tabelul în care sunt înregistrați administratorii ce pot accesa pagina de înregistrare a unor noi utilizatori.

Figura 2.12 Administratorii platformei web.

Capitolul 3. Interacțiunea cu utilizatorul

3.1 Utilizarea bazei de date

În realizarea proiectului am creat o baza de date, denumita „licentadb”. În interiorul acestei baze de date am creat trei tabele cu numele , și . Primele două tabele au fost construite în așa fel încât să conțină trei coloane în care pot fi introduse datele utilizatorilor sau ale administratorilor paginii web: id, username, parola. În coloana id se vă introduce automat sau manual numărul corespunzător înregistrării, în coloana username vă fi introdus numele cu care se vă putea conecta utilizatorul la platfroma web, iar în coloana parola se vă introduce parola corespunzătoare utilizatorului respectiv.

Datorită utilzarii programului MySQL a trebuit să specific pentru fiecare coloană tipul de date ce urmează să fie introdus, prin urmare am ales că pe coloană id să setez tipul de date SMALLINT, reprezentând un număr pe 16 de biți, fară semn, cu constrângerea NOT NULL și clauza AUTO_INCREMENT împreună cu PRIMARY KEY în cazul dezvoltării ulterioare a bezei de date. Pe coloana username am setat tipul de date VARCHAR(25) asta însemnând că am setat o un șir de date cu lungime variabilă, însă cu o limita maximă de 25 de caractere, de asemenea au mai fost specificate constrângerile NOT NULL și UNIQUE, fapt ce impune că toate valorile aflate pe această coloana să fie diferite. Pe ultima coloană și anume parola, tipul de date ales a fost VARCHAR(50), impunând o limită de 50 având în vedere faptului că anumiți utilizatori și-ar putea dori o parolă foarte complexă, în continuare am specificat constrângerea NOT NULL pentru a evita posibile erori umane ce pot apărea în momentul înregistrării noilor utilizatori. Ambele tabele au fost create în aceeași manieră. În figura 3.1 se poate observa structura celor două tabele.

Figura 3.1. Describe users și adminusers.

În al treilea tabel am introdus informații legate de data și ora la care a fost efectuată fiecare avertizare prin e-mail în momentul în care senzorul PIR HC-SR501 detectează mișcare prin intermediul scriptului . Aceste date vor fi prelucrate astfel încât să se contorizeze numărul de avertizări efectuate în funcție de data calendaristică. În figura 3.2 se poate observa structura celui de-al treilea tabel iar în figura 3.3 modalitatea în care datele acestuia sunt prelucrate:

Figura 3.2. Describe mișcare.

Figura 3.3 Manipulare date mișcare.

3.2 Crearea site-ului web prin PHP, HTML, CSS si JS

Site-ul web creat de mine, pentru o mai ușoară interfațare a sistemului cu utilizatorii, conține mai multe pagini și a fost încărcat pe serverul apache instalat pe placa de dezvoltare, împreună cu pachetele PHP ce oferă conectivitate la baza de date. Ținând cont că acest server a fost ales pentru proiectul prezentat și este utilizat doar pentru testarea aplicației, instalarea unui alt server și configurarea acestuia nu este momentan necesară pentru a putea obține performanțe mai ridicate. Acest server vă putea afișă toate paginile web construite cu ajutorul fișierelor de tip php, html, css și JavaScript aflate în directorul var/www/html/test.

Server-ul web pornește în același timp cu placa de dezvoltare, iar în acel moment vă putea fi accesat site-ul. Mai jos voi descrie funcționalitatea fiecărei pagini web create:

. – indiferent de pagina aleasă pentru conectare, utilizatorul va fi redirecționat automat către pagina de login și anume pentru a ne putea autentifica prin intermediul username-ului și parolei furnizate, acestea trebuind neapărat să corespunda cu cele din baza de date, altfel accesul la restul paginilor va fi respins. În momentul în care accesul este permis, utilizatorul va fi redirecționat către pagina . Pagina este reprezentată în figura 3.4

Figura 3.4 Pagina pentru autentificare.

– în interiorul acestei pagini se vă găși un buton logout ce va permite să își încheie sesiunea activă și totodată vă fi redirecționat către pagina . Tot în interiorul paginii vor fi afișate diverse date cum ar fi IP-ul de pe care s-a conectat, ora și data curenta împreună cu username-ul introdus pe pagina accesată precedent. Butoanele ce fac obiectul acestui proiect vor fi afișate accesând butonul home, fapt ce va redirecționa utilizatorul către pagina .

– pe această pagină găsim următoarea inșiruire de butoane ce pot fi accesate:

: acest buton are ca scop apelarea paginii astfel se va rula programul prin intermediul scriptului , după cum se poate observa in figura 3.5:

Figura 3.5 Butonul fa o poza. Imagine preluată din fișierul faopoza.php.

De asemenea pe pagina se regăsesc alte două butoane ce pot fi accesate și anume:

: acest buton rulează din nou scriptul și păstrează utilizatorul pe pagina curentă.

: această opțiune redirecționează utilizatorul către pagina unde poate vizualiza ultima poză efectuată. Această pagină este reprezentată in figura 3.6:

Figura 3.6 Vizualizarea pozei în pagina poze.php.

: acest buton redirecționează utilizatorul către pagina , moment în care se pornește programul și redirecționează pagina automat către serverul proaspăt pornit având ca port de acces portul 8000.

: în momentul alegerii acestei opțiuni pagina este redirecționată către unde se va putea urmări transmisiunea în timp real efectuată cu ajutorul camerei Pi NoIR.

: această opțiune va accesa pagina fapt ce va duce la executarea scriptului killkill.sh, acesta urmând să oprească procesul programului în cazul în care acesta era deja pornit.

: acest buton va avea un rol asemănător cu cel denumit , însă diferența o face link-ul spre care va fi redirecționat utilizatorul după utilizarea acestuia. Link -ul folosit pentru redirecționare este: . Pe ultimul link specificat găsim de asemenea o serie de butoane:

: oprește reîmprospătarea imaginii transmise pe pagina web și o păstrează pe ultima, astfel putând fi analizată în detaliu.

: în cazul în care a fost apăsat butonul în prealabil, va reîncepe reîmprospătraea imaginii iar utilizatorul va putea continua vizionarea transmisiunii în timp real.

: oferă acces către datele din interiorul json-ului ce vor fi convertite în culori pentru a putea crea imaginea pe care utilizatorul o va putea vedea.

Butoanele prezentate mai sus ce se află pe pagina home.php sunt prezentate în figura 3.7:

Figura 3.7 Butoanele preznete pe pagina home.php.

– pagina aceasta are ca scop afișarea unui grafic în funcție de zile și de numărul de avertizări ce au fost efectuate în respectivele date calendaristice. Rezultatul acestei pagini poate fi vizualizat în figura 3.8

Figura 3.8 Grafic avertizare mișcare.

– pagina aceasta este echivalentul paginii însa diferența majoră care exista între ele este făcută de faptul că datele pe această pagină sunt reprezentate sub formă tabelară. Această pagină este reprezentată în figura 3.9:

Figura 3.9 Tabel notificări.

– această pagină aflata în subdirectorul al directorului reprezintă pagina de autentificare a administratorilor paginii, aceștia fiind redirecționati către pagina după autentificare.

– avand posibilitatea de a înregistra noi utillizatori oferind acestora orice ce nu este deja înregistrat în baza de date și o parolă la libera alegere, aceasta urmând să fie criptată prin algorimtul de scriptul din php al paginii . Linia de cod cu care criptez este prezentată în figura 3.9:

Figura 3.10 Criptarea parolei. Imagine preluată din fișierul insertusernou.php.

În cazul în care se va dori înregistrarea unui nou utilizator ce este deja inregistrat, administratorul va primi un mesaj de avertizare în care va fi informat ca acest utilizator există deja în baza de date și trebuie ales un diferit, după cum se poate observa în figura 3.10:

Figura 3.11 Eroare de înregistrare a unui nou utilizator.

3.3 Scenariu de utilizare a sistemului

După momentul în care proiectul a fost finalizat, sistemul poate fi utilizat în diverse moduri. Pentru a fi pornit, sistemul are nevoie să fie alimentat și mai apoi să fie rulate doua programe: și . După acest moment utilizatorul se vă putea folosi de toate funcțiile sistemului, și îl vă putea testa accesând link-ul localhost/test/index.php.

Un dezavantaj îl reprezintă faptul că din cauza senzorului de mișcare, notificarea prin e-mail nu vă putea fi utilizată decât în anumite situații, în care zonele în supravegheate nu ar trebui să se deplaseze oameni sau animale pentra a detecta mișcare, altfel căsuță poștală a utilizatorului vă fi umplută foarte rapid, iar acesta rișcă să nu mai poată distinge o avertizare reală de una falsă.

Locurile ideale unde poate fi amplasat acest sistem sunt:

Spitalele: aici putandu-se amplasa în camerele pacienților deoarece aceștia fiind majoritatea bolnavi au nevoie de odihna și nu se vor mișcă foarte mult. În cazul în care transmisiunea video nu era urmărită, iar un pacient are nevoie de ajutor, datorita notificării prin e-mail, o persoana autorizata din cadrul spitalului vă putea observa daca pacientul respectiv a efectuat o mișcare normala sau are nevoie de ajutor din partea echipei medicale fară să fie nevoie că cineva să se deplaseze până la camera pacientului.

Mijloace de transport în comun: în acest caz este necesară oprirea notificării prin e-mail și adăugarea unei funcții suplimentare de înregistrare a transmisiunii video. Avantajul principal ar fi că toți călătorii ar fi mai în siguranță în cazul în care este comisă o infracțiune, deoarece hoțul poate fi prins cu ușurință de către politie. De asemenea se pot identifica persoanele care încearcă să comită o fraudă prin nevalidarea tichetelor de transport.

În case/apartamente: varianta aceasta este ideală în momentul în care toți membrii sunt plecați de acasă la munca, sunt în vacanță pentru o perioadă mai lungă de timp sau daca părinții doresc să știe când pleacă și când ajunge copilul lor acasă de la scoală.

Concluzii

Sistemul de supraveghere video ce a fost obținut în final poate fi o soluție pentru diverse domenii unde este necesară supravegherea în permanență a unei anumite zone însă nu sunt necesare cele mai performante echipamente. Consider că proiectul a reușit să îndeplinească toate cerințele specificate inițial, însă existând posibilitatea de a fi îmbunătățit atât din punct de vedere hardware dar și software.

Ținând cont de costurile realizării acestui sistem poate fi clasificat ca și unul destul de costisitor având în vedere că plăcuța Raspberry Pi model 3B+ este cea mai performantă dar în același timp și cea mai scumpă din categoria sa, aceasta putând fi înlocuită cu modelul mai ieftin Raspberry Pi Zero. De asemenea camera Pi NoIR cu IR poate fi înlocuită cu un modul de camera fară IR, acest aspect reducând prețul de achiziție. Camera cu termo-viziune are un cost mai ridicat fata de restul componentelor însă ținând cont de caracteristicile sale și comparând cu alte elemente asemănătoare de pe piață se poate constata că prețul este unul bun, în acest caz neputandu-se face o reducere în bugetul total al proiectului.

Consider că din punct de vedere al configurației web și al modului de utilizare sistemul poate fi manipulat cu ușurință de orice utilizator, indiferent de instruirea sau profesia pe cacre acesta o are. Câteva pagini de instrucțiuni pot ajuta utilizatorul să folosească la maxim toate posibilitățile pe care acest sistem le poate oferi.

Avantajele sistemului: este ușor protabil dat fiind faptul că am ales componentele și după acest criteriu, funcționalitatea proiectului poate fi îmbunătățită prin schimbarea camerei cu termo-viziune sau a senzorului de mișcare, cel din urmă nefiind foarte performant. De asemenea pot fi adăugate componente noi deoarece au rămași un număr destul de mare de pini GPIO neutilizați.

Dezavantajele sistemului: prețul conceperii acestui sistem a fost unul ridicat având în vedere functionalitatile pe care am reușit să le obțin, exista limitări fizice în ceea ce privește senzorul PIR HC-SR501 acesta având o raza de acțiune de maxim 7 metri.

Din punctul meu de vedere prin conceperea acestui proiect am reușit să învăț o mulțime de lucruri utile și interesante, dat fiind faptul că am întâlnit o multitudine de concepte: pagini web, baze de date, sistemul de operare Raspbian, diverși senzori, iar în combinarea tuturor acestor lucruri am întâmpinat diverse dificultăți. Problemele cel mai des întâlnite au fost datorate faptului că erau instalate 2 versiuni ale limbajului de programare python: python2.7 și respectiv python3, acest lucru ducând la diverse erori în momentul rulării programelor. Totodată drepturile de citire, scriere și rulare a fișierelor au reprezentat un impediment la începutul proiectului însă pe parcurs am învățat să utilizez comanda , cu aceasta reușind să rezolv problema întâmpinată. Un alt obstacol a fost reprezentat de deținătorii anumitor fișiere, aceștia trebuind să fie schimbați în momentul în care fișierele trebuiau să fie accesate de pe pagina web, de asemenea problema a fost rezolvată prin utilizarea comenzii .

Ca și concluzie finală aș putea spune că proiectul realizat de mine nu a fost unul tocmai ușor deoarece am întâmpinat diverse probleme în diferite stadii ale acestuia. În același timp consider că unul din scopurile acestui proiect a fost de a învață lurcruri benefice pentru dezvoltarea mea profesională, rezultat ce a fost atins.

Contributii personale si dezvoltari ulterioare

In ceea ce priveste contributia personala ideile mele au constat in alegerea proiectului, a componentelor si de a le interconecta in ceea ce priveste partea hardware dar si software.

Avand in vedere partea hardware, implicarea mea a constat in alegerea componentelor, realizarea arhitecturii intrgului sistem si realizarea fizica a conexiunilor dintre componente. Luand in considerare partea software, eu am creat baza de date, am incarcat diverse date in aceasta, am facut legatura dintre baza de date si site-ul web, de asemenea eu am gandit design-ul paginilor web si scripturile din fisierele de tip php. Tot eu am creat in intregime si scripturile de tip python si bash necesare acestui proiect, cu exceptia si , in cazul acestora utilizand diverse resurse de pe internet.

Proiectul conceput de mine a fost gandit in asa fel incat sa ii poata fi aduse tot felul de imbunatatiri pe diverse planuri cum ar fi:

Sa i se ataseze o baterie portabila ce se poate reîncarca cu energie solara si care sa poata frunzia la alimentare 5V cu 2.5 A.

Sa fie inclusa intr-o retea de virtuala privata pentru a securiza traficul de date.

Imbunatatirea paginii web pe care se transmit in timp real imagini provenite de la camera cu termo-viziune.

Achizitionarea unei camere cu termo-viziune mai perofromante.

Renuntarea la senzorul de miscare PIR HC-SR501, putandu-se folosi tehnologia deja existenta pe camera Pi NoIR de a fotografia numai cand este detectata miscare.

Achizitonarea mai multor placute de tip Raspberry Pi Zero deoarece au un cost mai redus fata de Raspberry Pi 3 Model B+ pentru dezvoltarea unui sistem mai complex de camere de supraveghere. Placa de dezvoltare folosita in acest proiect urmand sa sustina doar serverul Apache care va redirectiona utilizatoriul catre orice transmisiune video in direct doreste sa urmareasca.

Notificarea prin e-mail sa contina si o fotografie sau o inregistrare video din momentul in care s-a detectat miscare.

Dezvoltarea unei aplicatii de mobil pentru android/ios avand ca scop usurarea utilizarii acestui sistem pe un telefon mobil sau tableta.

Bibliografie

[1] – Sagar Khillar, Difference Between IP Camera and CCTV: http://www.differencebetween.net/technology/difference-between-ip-camera-and-cctv/ accesat la data de 20.06.2019

[2] – https://www.techcube.co.uk/blog/cctv-cameras-explained/ accesat la data de 20.06.2019

[3] – Nancy G. La Vigne, Samantha S. Lowry, Joshua A. Markman, Allison M. Dwyer, Evaluating the Use of Public Surveillance Cameras for Crime Control and Prevention https://www.urban.org/sites/default/files/publication/27556/412403-evaluating-the-use-of-public-surveillance-cameras-for-crime-control-and-prevention_0.pdf accesat la data de 22.06.2019

[4] – Scott McCulloch, The Internet Of Things: How Tomorrow’s Technology Affects Family Business

http://www.campdenfb.com/article/internet-things-how-tomorrow-s-technology-affects-family-business accesat la data de 22.06.2019

[5] – Daniel Savu , Mihaela Tomescu, Lidia Băjenaru, Internetul lucrurilor – O Nouă Paradigmă A Conectării În Internet

https://rria.ici.ro/wp-content/uploads/2017/03/03-ART1-RRIA-1-2017-Savu-Tomescu-Bajenaru-IoT2017.pdf?fbclid=IwAR3nCoSY1AihrkzoppdvESm9Q0_pE9Fdut_veK2S2XXz2tVCT-Z96LIo0ew accesat la data de 22.06.2019

[6] – Rory Cellan-Jones, A 15 pound computer to inspire young programmers

https://www.bbc.co.uk/blogs/thereporters/rorycellanjones/2011/05/a_15_computer_to_inspire_young.html accesat la data de 07.06.2019

[7] – https://www.raspberrypi.org/products/raspberry-pi-3-model-b-plus/ accesat la data de 07.06.2019

[8] – https://www.adafruit.com/product/3538 accesat la data de 08.06.2019

[9] – Joshua Hrisko, Heat Mapping with a 64-Pixel Infrared Detector (AMG8833), Raspberry Pi, and Python https://makersportal.com/blog/2018/1/25/heat-mapping-with-a-64-pixel-infrared-sensor-and-raspberry-pi accesat la data de 08.06.2019

[10] – https://en.wikipedia.org/wiki/Stefan%E2%80%93Boltzmann_law accesat la data de 09.06.2019

[11] – https://www.kiwi-electronics.nl/raspberry-pi-night-vision-camera accesat la data de 10.06.2019

[12] – https://lastminuteengineers.com/pir-sensor-arduino-tutorial/ accesat la data de 10.06.2019

[13] – https://www.raspbian.org/FrontPage accesat la data de 11.06.2019

[14] – Guruprasad.K.Basavaraju , Introduction to Raspberry Pi with Raspbian OS https://www.codeproject.com/Articles/839230/Introduction-to-Raspberry-Pi-with-Raspbian-OS#Raspberry%20Pi%20with%20Raspian%20OS accesat la data de 11.06.2019

[15] – Mindfire Solutions, Python: 7 Important Reasons Why You Should Use Python https://medium.com/@mindfiresolutions.usa/python-7-important-reasons-why-you-should-use-python-5801a98a0d0b accesat la data de 11.06.2019

[16] – https://www.infoacademy.net/ accesat la data de 22.06.2019

[17] – Margaret Rouse, Lindsay Moore, P. Eng and Rob, MySQL https://searchoracle.techtarget.com/definition/MySQL accesat la data de 11.06.2019

[18] – https://html.com/#What_is_HTML accesat la data de 10.06.2019

[19] – https://www.php.net/manual/ro/intro-whatis.php accesat la data de 10.06.2019

[20] – https://www.bigcommerce.com/ecommerce-answers/what-javascript-and-why-it-important/ accesat lad ata de 18.06.2019

[21] – Contributor Melonfire, Make better Web pages by understanding the CSS box model https://www.techrepublic.com/article/make-better-web-pages-by-understanding-the-css-box-model/ accesat la data de 18.06.2019

[22] – https://myaccount.google.com/lesssecureapps accesat la data de 17.06.2019

[23] – https://github.com/adafruit/Adafruit_AMG88xx_python/blob/master/examples/thermal_cam.py accesat la data de 14.03.2019

[24] – https://picamera.readthedocs.io/en/latest/recipes2.html#web-streaming accesat la data de 21.04.2019

ANEXA 1 – Coduri sursă pentru fișierele Python și Bash

Fișierul [23]

import BaseHTTPServer

import SimpleHTTPServer

import json

import sys, os

from os import curdir, sep

import numpy as np

import math

from scipy.interpolate import griddata

from colour import Color

sys.path.append(os.getcwd() + "/lib")

from Adafruit_AMG88xx import Adafruit_AMG88xx

try:

sensor = Adafruit_AMG88xx()

except TypeError as err:

print("Eroare la includerea unui modul. Senzorul s-ar putea sa nu mearga.")

print(err)

pass

#nivelul maxim al senzorului – va arata albastru pe ecran

MINTEMP = 29

#nivelul maxim al senzorului – va arata rosu pe ecran

MAXTEMP = 32

#numarul total de culori posibile

COLORDEPTH = 1024

points = [(math.floor(ix / 8), (ix % 8)) for ix in range(0, 64)]

grid_x, grid_y = np.mgrid[0:7:32j, 0:7:32j]

PORT = 8001

#functii utile

def constrain(val, min_val, max_val):

return min(max_val, max(min_val, val))

def map(x, in_min, in_max, out_min, out_max):

return (x – in_min) * (out_max – out_min) / (in_max – in_min) + out_min

class ThermalHandler(SimpleHTTPServer.SimpleHTTPRequestHandler):

def do_GET(self):

if self.path == "/camera":

print("Trimit date: ")

data_json = {}

pixels = []

try:

pixels = sensor.readPixels();

pixels = [map(p, MINTEMP, MAXTEMP, 0, COLORDEPTH – 1) for p in pixels]

bicubic = griddata(points, pixels, (grid_x, grid_y), method='cubic')

data = bicubic.tolist()

data_json = {"values" : data };

except NameError:

print("sensor nu a fost definit")

data_json = { "values" : pixels };

self.send_response(200)

self.send_header('Content-Type','application/json')

self.end_headers()

self.wfile.write(data_json)

else:

sendReply = False

if self.path.endswith(".html"):

mimetype='text/html'

sendReply = True

if self.path.endswith(".jpg"):

mimetype='image/jpg'

sendReply = True

if self.path.endswith(".js"):

mimetype='application/javascript'

sendReply = True

read_file = open(curdir + sep + self.path, 'rb')

self.send_response(200)

self.send_header('Content-type',mimetype)

self.end_headers()

self.wfile.write(read_file.read())

read_file.close()

def start_server():

server_address = ("", PORT)

server = BaseHTTPServer.HTTPServer(server_address, ThermalHandler)

server.serve_forever()

if __name__ == "__main__":

start_server()

Fișierul [24]

import io

import picamera

import logging

import socketserver

from threading import Condition

from http import server

PAGE="""\

<!DOCTYPE html>

<html>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<header>

<div class="menu-toggle" id="hamburger">

<i class="fas fa-bars"></i>

</div>

<div class="overlay"></div>

<div class="container">

<nav>

<h1 class="brand"><a href="http://localhost/test/welcome.php">

LIC<span>E</span>NTA<br><br>

<span>Ail</span>enei<br>

Cris<span>tian</span></a></h1>

<ul>

<li><a href="http://localhost/test/home.php">Home</a></li>

<li><a href="http://localhost/test/grafic.php">Grafic</a></li>

<li><a href="http://localhost/test/tabel.php">Tabel</a></li>

</ul>

</nav>

<br>

<nav>

<ul>

<li><a href= "http://localhost/test/kill-livestream.php">Opreste livestream-ul</a></li>

</ul>

</nav>

</div>

<head>

<title>Livestream</title>

</head>

<body>

<center><img src="stream.mjpg" width="640" height="480"></center>

<style>

input[type=text],input[type=password] {

width:96.5%;

padding:10px;

margin-top:8px;

border:1px solid #ccc;

padding-left:5px;

font-size:20px;

}

</style>

</header>

<?php echo date('Y-m-d H:i:s'); ?>

</body>

<style>

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}

html{

font-size: 10px;

font-family: "Roboto Cn", sans-serif;

}

a{

text-decoration: none;

color: #eee;

}

header{

width: 100%;

height: 100vh;

background: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,.5)), url("https://images.unsplash.com/photo-1523374228107-6e44bd2b524e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80") center no-repeat;

background-size: cover;

position: relative;

overflow: hidden;

}

.container{

max-width: 120rem;

width: 90%;

margin: 0 auto;

}

.menu-toggle{

position: fixed;

top: 2.5rem;

right: 2.5rem;

color: #eeeeee;

font-size: 3rem;

cursor: pointer;

z-index: 1000;

display: none;

}

nav{

padding-top: 5rem;

display: flex;

justify-content: space-between;

align-items: center;

text-transform: uppercase;

font-size: 1.6rem;

}

.brand{

font-size: 3rem;

font-weight: 300;

transform: translateX(-100rem);

animation: slideIn .5s forwards;

}

.brand span{

color: crimson;

}

nav ul{

display: flex;

}

nav ul li{

list-style: none;

transform: translateX(100rem);

animation: slideIn .5s forwards;

}

nav ul li:nth-child(1){

animation-delay: 0s;

}

nav ul li:nth-child(2){

animation-delay: .5s;

}

nav ul li:nth-child(3){

animation-delay: 1s;

}

nav ul li:nth-child(4){

animation-delay: 1.5s;

}

nav ul li a{

padding: 1rem 0;

margin: 0 3rem;

position: relative;

letter-spacing: 2px;

}

nav ul li a:last-child{

margin-right: 0;

}

nav ul li a::before,

nav ul li a::after{

content: '';

position: absolute;

width: 100%;

height: 2px;

background-color: crimson;

left: 0;

transform: scaleX(0);

transition: all .5s;

}

nav ul li a::before{

top: 0;

transform-origin: left;

}

nav ul li a::after{

bottom: 0;

transform-origin: right;

}

.overlay{

background-color: rgba(0,0,0,.95);

position: fixed;

right: 0;

left: 0;

top: 0;

bottom: 0;

transition: opacity 650ms;

transform: scale(0);

opacity: 0;

display: none;

}

nav ul li a:hover::before,

nav ul li a:hover::after{

transform: scaleX(1);

}

@keyframes slideIn {

from{

}

to{

transform: translateX(0);

}

}

@media screen and (max-width: 700px){

.menu-toggle{

display: block;

}

nav{

padding-top: 0;

display: none;

flex-direction: column;

justify-content: space-evenly;

align-items: center;

height: 100vh;

text-align: center;

}

nav ul{

flex-direction: column;

}

nav ul li{

margin-top: 5rem;

}

nav ul li a{

margin: 0;

font-size: 2.5rem;

}

.brand{

font-size: 5rem;

}

.overlay.menu-open,

nav.menu-open{

display: flex;

transform: scale(1);

opacity: 1;

}

}

</style>

<script>

var open = document.getElementById('hamburger');

var changeIcon = true;

open.addEventListener("click", function(){

var overlay = document.querySelector('.overlay');

var nav = document.querySelector('nav');

var icon = document.querySelector('.menu-toggle i');

overlay.classList.toggle("menu-open");

nav.classList.toggle("menu-open");

if (changeIcon) {

icon.classList.remove("fa-bars");

icon.classList.add("fa-times");

changeIcon = false;

}

else {

icon.classList.remove("fa-times");

icon.classList.add("fa-bars");

changeIcon = true;

}

});

<script>

</html>

"""

class StreamingOutput(object):

def __init__(self):

self.frame = None

self.buffer = io.BytesIO()

self.condition = Condition()

def write(self, buf):

if buf.startswith(b'\xff\xd8'):

self.buffer.truncate()

with self.condition:

self.frame = self.buffer.getvalue()

self.condition.notify_all()

self.buffer.seek(0)

return self.buffer.write(buf)

class StreamingHandler(server.BaseHTTPRequestHandler):

def do_GET(self):

if self.path == '/':

self.send_response(301)

self.send_header('Location', '/index.html')

self.end_headers()

elif self.path == '/index.html':

content = PAGE.encode('utf-8')

self.send_response(200)

self.send_header('Content-Type', 'text/html')

self.send_header('Content-Length', len(content))

self.end_headers()

self.wfile.write(content)

elif self.path == '/stream.mjpg':

self.send_response(200)

self.send_header('Age', 0)

self.send_header('Cache-Control', 'no-cache, private')

self.send_header('Pragma', 'no-cache')

self.send_header('Content-Type', 'multipart/x-mixed-replace; boundary=FRAME')

self.end_headers()

try:

while True:

with output.condition:

output.condition.wait()

frame = output.frame

self.wfile.write(b'–FRAME\r\n')

self.send_header('Content-Type', 'image/jpeg')

self.send_header('Content-Length', len(frame))

self.end_headers()

self.wfile.write(frame)

self.wfile.write(b'\r\n')

except Exception as e:

logging.warning(

'Removed streaming client %s: %s',

self.client_address, str(e))

else:

self.send_error(404)

self.end_headers()

class StreamingServer(socketserver.ThreadingMixIn, server.HTTPServer):

allow_reuse_address = True

daemon_threads = True

with picamera.PiCamera(resolution='1024×768', framerate=30) as camera:

output = StreamingOutput()

camera.start_recording(output, format='mjpeg')

try:

address = ('', 8000)

server = StreamingServer(address, StreamingHandler)

server.serve_forever()

finally:

camera.stop_recording()

Fișierul

from gpiozero import MotionSensor

from datetime import datetime

import smtplib

import time

from time import sleep

from time import gmtime, strftime

import mysql.connector

mydb = mysql.connector.connect(

host="localhost",

user="cristi",

passwd="licenta",

database="licentadb"

)

pir = MotionSensor(23)

while True:

pir.wait_for_motion()

print("Miscare…")

pir.wait_for_no_motion()

# pregatire e-mail

f_time = datetime.now().strftime("%A %d %B %Y – %H:%M:%S")

smtpUser = 'raspberrylicenta@gmail.com'

smtpPass = 'Licenta2019'

toAdd = 'ailenei.cristian@yahoo.com'

fromAdd = smtpUser

subject = 'ALERTA! ' + f_time

header = 'To: ' + toAdd + '\n' + 'From: ' + fromAdd + '\n' + 'Subject: ' + subject

body = 'Notificare! A fost detectata miscare in zona supravegheata.'

print (header + '\n' +body)

server = smtplib.SMTP('smtp.gmail.com',587)

server.ehlo()

server.starttls()

server.ehlo()

server.login(smtpUser, smtpPass)

server.sendmail(fromAdd, toAdd, header + '\n' +body)

timpulcurent = str(datetime.now())

mycursor = mydb.cursor()

sql = "INSERT INTO miscare (id, timp) VALUES (%s, %s)"

val = ("", timpulcurent)

mycursor.execute(sql, val)

mydb.commit()

print("A fost adaugata o noua inregistrare.")

#asteapta 20 de secunde pana sa vada daca se mai detecteaza miscare

time.sleep(20)

server.quit()

Fișierul

camera = PiCamera()

camera.start_preview()

camera.capture('/var/www/html/test/image.jpg')

camera.stop_preview()

Fișierul

pkill -f /var/www/html/test/pi_surveillance.py

ANEXA 2 – Coduri sursă pentru site-ul web

Fișierul

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

<meta charset="utf-8">

<title>Pagina de autentificare</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<form class="box" action="process.php" method="post">

<h1>Login</h1>

<input type="text" name="username" placeholder=" Username" class="form-control mb-3">

<input type="password" name="parola" placeholder=" Parola" class="form-control mb-3">

<button class="btn btn-success mt-3" name="Login">Login</button>

</form>

</body>

<style>

body{

margin: 0;

padding: 0;

font-family: sans-serif;

background: #34495e;

}

.box{

width: 500px;

padding: 70px;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

background: #191919;

text-align: center;

}

.box h1{

color: white;

text-transform: uppercase;

font-weight: 500;

}

.box input[type = "text"],.box input[type = "password"]{

border:0;

background: none;

display: block;

margin: 20px auto;

text-align: center;

border: 2px solid #3498db;

padding: 20px 10px;

width: 400px;

outline: none;

color: white;

border-radius: 30px;

transition: 0.25s;

}

.box input[type = "text"]:focus,.box input[type = "password"]:focus{

width: 280px;

border-color: #2ecc71;

}

.box input[type = "submit"]{

border:0;

background: none;

display: block;

margin: 20px auto;

text-align: center;

border: 2px solid #2ecc71;

padding: 14px 40px;

outline: none;

color: white;

border-radius: 24px;

transition: 0.25s;

cursor: pointer;

}

.box input[type = "submit"]:hover{

background: #2ecc71;

}

</style>

</html>

Fișierul

<?php

$con=mysqli_connect('localhost','cristi','licenta','licentadb');

if(!$con)

{

die(' Please Check Your Connection'.mysqli_error($con));

}

?>

Fișierul

<?php

require_once('connection.php');

session_start();

if(isset($_POST['Login']))

{

//echo 'a mers';

if(empty($_POST['username']) || empty($_POST['parola']))

{

header("location:index.php?Empty= Completeaza spatiile libere");

}

else

{

$query="select * from users where username='".$_POST['username']."' and parola=MD5('".$_POST['parola']."')";

$result=mysqli_query($con,$query);

if(mysqli_fetch_assoc($result))

{

$_SESSION['username']=$_POST['username'];

header("location:welcome.php");

}

else

{

header("location:index.php?Invalid= Introdu username si parola corecte");

}

}

}

else

{

echo 'Nu a functionat!';

}

?>

Fișierul

<?php

session_start();

if(isset($_GET['logout']))

{

session_destroy();

header("location:index.php");

}

?>

Fișierul

<?php

$username = $_POST['username'];

$parola = $_POST['parola'];

if (!empty($telefon) || !empty($parola)) {

$host = "localhost";

$dbUsername = "cristi";

$dbPassword = "licenta";

$dbname = "licentadb";

//create connection

$conn = new mysqli($host, $dbUsername, $dbPassword, $dbname);

if (mysqli_connect_error()) {

die('Connect Error('. mysqli_connect_errno().')'. mysqli_connect_error());

} else {

$SELECT = "SELECT username From users Where username = ? Limit 1";

$INSERT = "INSERT Into users (username, parola) values(?, ?)";

$stmt = $conn->prepare($SELECT);

$stmt->bind_param("s", $username);

$stmt->execute();

$stmt->bind_result($username);

$stmt->store_result();

$rnum = $stmt->num_rows;

if ($rnum==0) {

$stmt->close();

$stmt = $conn->prepare($INSERT);

$parola = MD5($parola);

$stmt->bind_param("ss",$username, $parola);

$stmt->execute();

echo "New record inserted sucessfully";

header("Location: register.php"); // Redirectionare

} else {

echo "Un utilizator este deja inregistrat cu acest username, va rugam incercati alta varianta !";

}

$stmt->close();

$conn->close();

}

} else {

echo "Toate campurile sunt necesare";

die();

}

?>

Fișierul

<html>

<?php echo date('Y-m-d H:i:s'); ?>

<br><br>

<?php

session_start();

if(isset($_SESSION['admin']))

{

echo 'Bine ai venit ' . $_SESSION['admin'].'<br/>';

echo '<a href="logout.php?logout">Logout</a>';

}

else

{

header("location:index.php");

}

?>

<br><br>

<button onclick="location.href = 'http://localhost/test/login_admin/welcome.php';" id="myButton" class="float-left submit-button" >Go to welcome</button>

<head>

<title> Signup Form Design Tutorial </title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<form action="insertusernou.php" method="POST">

<div id="login-box">

<div class="box">

<h1> Sign Up</h1>

<input type="text" name="username" placeholder="username"/>

<input type="password" name="parola" placeholder="parola"/>

<input type="submit" name="signup-button" value="Sign Up"/>

</div>

</div>

</form>

<style>

body

{

margin: 0;

padding: 0;

background: #efefef;

font-size: 16px;

color: #777;

font-family: sans-serif;

font-weight: 300;

}

#login-box

{

position: relative;

margin: 5% auto;

height: 600px;

width: 300px;

background: #fff;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);

}

.left-box

{

position: absolute;

top: 0;

left: 0;

box-sizing: border-box;

padding: 40px;

width: 300px;

height: 400px;

}

h1

{

margin: 0 0 20px 0;

font-weight: 300;

font-size: 28px;

}

input[type="text"],

input[type="parola"]

{

display: block;

box-sizing: border-box;

margin-bottom: 20px;

padding: 4px;

width: 220px;

height: 32px;

border: none;

outline: none;

border-bottom: 1px solid #aaa;

font-family: sans-serif;

font-weight: 400;

font-size: 15px;

transition: 0.2s ease;

}

input[type="submit"]

{

margin-bottom: 28px;

width: 120px;

height: 32px;

background: #f44336;

border: none;

border-radius: 2px;

color: #fff;

font-family: sans-serif;

font-weight: 500;

text-transform: uppercase;

transition: 0.2s ease;

cursor: pointer;

}

input[type="submit"]:hover,

input[type="submit"]:focus

{

background: #ff5722;

transition: 0.2s ease;

}

</style>

</body>

</html>

Fișierul

<!DOCTYPE html>

<html>

<body>

<header>

<?php

session_start();

if(isset($_SESSION['username']))

{

echo '<a href="logout.php?logout">Logout</a>'.'<br/>'.'<br/>'.'<br/>';

echo '<a href="#"> Bine ai venit – ' . $_SESSION['username'].'<br/>'.'<br/>';

echo date('Y-m-d H:i:s').'<br/>'.'<br/>';

echo 'Aveti IP-ul '.$_SERVER['REMOTE_ADDR'];

}

else

{

header("location:index.php");

}

?>

<div class="menu-toggle" id="hamburger">

<i class="fas fa-bars"></i>

</div>

<div class="overlay"></div>

<div class="container">

<nav>

<h1 class="brand"><a href="welcome.php">

LIC<span>E</span>NTA<br><br>

<span>Ail</span>enei<br>

Cris<span>tian</span><br><br><br>

</a></h1>

<ul>

<li><a href= 'home.php'>Home</a></li>

<li><a href='grafic.php'>Grafic</a></li>

<li><a href="tabel.php">Tabel</a></li>

</ul>

</nav>

</div>

<?php

$conn = mysqli_connect("localhost", "cristi", "licenta", "licentadb");

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);}

$result = $conn->query("SELECT COUNT(*) AS 'nrAvertizarzi', DATE(timp) AS 'dataAvertizare' from miscare GROUP BY DATE(timp)");

$conn->close();

?>

<head>

<title>Tabel notificari</title>

<style>

body{

background:skyblue;

}

table{

width:800px;

margin:auto;

text-align:center;

table-layout:fixed;

}

table, tr, th, td{

padding:20px;

color:white;

border:1px solid#080808;

border-collapse:collapse;

font-size:18px;

font-family:Arial;

background:linear-gradient(top, #3c3c3c 0%, #222222 100%);

background:-webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%);

}

td:hover{

background:red;

}

</style>

</head>

<body>

<table>

<tr>

<th>Numar notificari</th>

<th>Data notificare</th>

</tr>

<?php

if ($result->num_rows > 0) {

while($row = $result->fetch_assoc()) {

echo "<tr><td>" . $row["nrAvertizarzi"] . "</td><td>". $row["dataAvertizare"]. "</td></tr>";

}echo "</table>";

} else { echo "0 results"; }

?>

</table>

</body>

</header>

<style>

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}

html{

font-size: 10px;

font-family: "Roboto Cn", sans-serif;

}

a{

text-decoration: none;

color: #eee;

}

header{

width: 100%;

height: 100vh;

background: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,.5)), url("https://images.unsplash.com/photo-1523374228107-6e44bd2b524e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80") center no-repeat;

background-size: cover;

position: relative;

overflow: hidden;

}

.container{

max-width: 120rem;

width: 90%;

margin: 0 auto;

}

.menu-toggle{

position: fixed;

top: 2.5rem;

right: 2.5rem;

color: #eeeeee;

font-size: 3rem;

cursor: pointer;

z-index: 1000;

display: none;

}

nav{

padding-top: 5rem;

display: flex;

justify-content: space-between;

align-items: center;

text-transform: uppercase;

font-size: 1.6rem;

}

.brand{

font-size: 3rem;

font-weight: 300;

transform: translateX(-100rem);

animation: slideIn .5s forwards;

}

.brand span{

color: crimson;

}

nav ul{

display: flex;

}

nav ul li{

list-style: none;

transform: translateX(100rem);

animation: slideIn .5s forwards;

}

nav ul li:nth-child(1){

animation-delay: 0s;

}

nav ul li:nth-child(2){

animation-delay: .5s;

}

nav ul li:nth-child(3){

animation-delay: 1s;

}

nav ul li:nth-child(4){

animation-delay: 1.5s;

}

nav ul li a{

padding: 1rem 0;

margin: 0 3rem;

position: relative;

letter-spacing: 2px;

}

nav ul li a:last-child{

margin-right: 0;

}

nav ul li a::before,

nav ul li a::after{

content: '';

position: absolute;

width: 100%;

height: 2px;

background-color: crimson;

center: 0;

transform: scaleX(0);

transition: all .5s;

}

nav ul li a::before{

top: 0;

transform-origin: center;

nav ul li a::after{

bottom: 0;

transform-origin: right;

}

.overlay{

background-color: rgba(0,0,0,.95);

position: fixed;

right: 0;

center: 0;

top: 0;

bottom: 0;

transition: opacity 650ms;

transform: scale(0);

opacity: 0;

display: none;

nav ul li a:hover::before,

nav ul li a:hover::after{

transform: scaleX(1);

}

@keyframes slideIn {

from{

}

to{

transform: translateX(0);

}

}

@media screen and (max-width: 700px){

.menu-toggle{

display: block;

}

nav{

padding-top: 0;

display: none;

flex-direction: column;

justify-content: space-evenly;

align-items: center;

height: 100vh;

text-align: center;

}

nav ul{

flex-direction: column;

}

nav ul li{

margin-top: 5rem;

}

nav ul li a{

margin: 0;

font-size: 2.5rem;

}

.brand{

font-size: 5rem;

}

.overlay.menu-open,

nav.menu-open{

display: flex;

transform: scale(1);

opacity: 1;

}

}

</style>

Fișierul

<?php

/* Database connection settings */

$host = 'localhost';

$user = 'cristi';

$pass = 'licenta';

$db = 'licentadb';

$mysqli = new mysqli($host,$user,$pass,$db) or die($mysqli->error);

//query to get data from the table

//$sql = "SELECT * FROM `miscare`WHERE timp >= DATE_SUB(NOW( ),INTERVAL 1 HOUR); ";

$sql = "SELECT COUNT(*) AS 'nrAvertizarzi', DATE(timp) AS 'dataAvertizare' from miscare GROUP BY DATE(timp);";

$result = mysqli_query($mysqli, $sql);

//loop through the returned data

while ($row = mysqli_fetch_array($result)) {

$nrAvertizarzi = $nrAvertizarzi . '"'. $row['nrAvertizarzi'].'",';

$dataAvertizare = $dataAvertizare . '"'. $row['dataAvertizare'] .'",';

}

$nrAvertizarzi = trim($nrAvertizarzi,",");

$dataAvertizare = trim($dataAvertizare,",");

?>

<!DOCTYPE html>

<html>

<body>

<header>

<?php

session_start();

if(isset($_SESSION['username']))

{

echo '<a href="logout.php?logout">Logout</a>'.'<br/>'.'<br/>'.'<br/>';

echo '<a href="#"> Bine ai venit – ' . $_SESSION['username'].'<br/>'.'<br/>';

echo date('Y-m-d H:i:s').'<br/>'.'<br/>';

echo 'Aveti IP-ul '.$_SERVER['REMOTE_ADDR'];

}

else

{

header("location:index.php");

}

?>

<div class="menu-toggle" id="hamburger">

<i class="fas fa-bars"></i>

</div>

<div class="overlay"></div>

<div class="container">

<nav>

<h1 class="brand"><a href="welcome.php">

LIC<span>E</span>NTA<br><br>

<span>Ail</span>enei<br>

Cris<span>tian</span><br><br><br>

</a></h1>

<ul>

<li><a href= 'home.php'>Home</a></li>

<li><a href="grafic.php">Grafic</a></li>

<li><a href="tabel.php">Tabel</a></li>

</ul>

</nav>

</div>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>

<title>Grafic</title>

</head>

<div class="container">

<h1>Grafice</h1>

<canvas id="chart" style="width: 100%; height: 80vh; background: #F0FFFA; border: 3px solid #000000; margin-top: 20px;"></canvas>

<script>

var ctx = document.getElementById("chart").getContext('2d');

var myChart = new Chart(ctx, {

type: 'line',

data: {

labels: [<?php echo $dataAvertizare;?>],

datasets:

[{

label: 'Numarul de avertizari/zi',

data: [<?php echo $nrAvertizarzi; ?>],

backgroundColor: 'transparent',

borderColor:'rgba(255,0,100)',

borderWidth: 3

},

]},

options: {

scales: {scales:{yAxes: [{beginAtZero: false}], xAxes: [{autoskip: true, maxTicketsLimit: 20}]}},

tooltips:{mode: 'index'},

legend:{display: true, position: 'top', labels: {fontColor: 'rgb(0,0,0)', fontSize: 16}}

}

});

</script>

</div>

</header>

<style>

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}

html{

font-size: 10px;

font-family: "Roboto Cn", sans-serif;

}

a{

text-decoration: none;

color: #eee;

}

header{

width: 100%;

height: 100vh;

background: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,.5)), url("https://images.unsplash.com/photo-1523374228107-6e44bd2b524e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80") center no-repeat;

background-size: cover;

position: relative;

overflow: hidden;

}

.container{

max-width: 120rem;

width: 90%;

margin: 0 auto;

}

.menu-toggle{

position: fixed;

top: 2.5rem;

right: 2.5rem;

color: #eeeeee;

font-size: 3rem;

cursor: pointer;

z-index: 1000;

display: none;

}

nav{

padding-top: 5rem;

display: flex;

justify-content: space-between;

align-items: center;

text-transform: uppercase;

font-size: 1.6rem;

}

.brand{

font-size: 3rem;

font-weight: 300;

transform: translateX(-100rem);

animation: slideIn .5s forwards;

}

.brand span{

color: crimson;

}

nav ul{

display: flex;

}

nav ul li{

list-style: none;

transform: translateX(100rem);

animation: slideIn .5s forwards;

}

nav ul li:nth-child(1){

animation-delay: 0s;

}

nav ul li:nth-child(2){

animation-delay: .5s;

}

nav ul li:nth-child(3){

animation-delay: 1s;

}

nav ul li:nth-child(4){

animation-delay: 1.5s;

}

nav ul li a{

padding: 1rem 0;

margin: 0 3rem;

position: relative;

letter-spacing: 2px;

}

nav ul li a:last-child{

margin-right: 0;

}

nav ul li a::before,

nav ul li a::after{

content: '';

position: absolute;

width: 100%;

height: 2px;

background-color: crimson;

left: 0;

transform: scaleX(0);

transition: all .5s;

}

nav ul li a::before{

top: 0;

transform-origin: left;

}

nav ul li a::after{

bottom: 0;

transform-origin: right;

}

.overlay{

background-color: rgba(0,0,0,.95);

position: fixed;

right: 0;

left: 0;

top: 0;

bottom: 0;

transition: opacity 650ms;

transform: scale(0);

opacity: 0;

display: none;

}

nav ul li a:hover::before,

nav ul li a:hover::after{

transform: scaleX(1);

}

@keyframes slideIn {

from{

}

to{

transform: translateX(0);

}

}

@media screen and (max-width: 700px){

.menu-toggle{

display: block;

}

nav{

padding-top: 0;

display: none;

flex-direction: column;

justify-content: space-evenly;

align-items: center;

height: 100vh;

text-align: center;

}

nav ul{

flex-direction: column;

}

nav ul li{

margin-top: 5rem;

}

nav ul li a{

margin: 0;

font-size: 2.5rem;

}

.brand{

font-size: 5rem;

}

.overlay.menu-open,

nav.menu-open{

display: flex;

transform: scale(1);

opacity: 1;

}

}

</style>

Fișierul

<!DOCTYPE html>

<html lang="en">

<body>

<header>

<?php echo date('Y-m-d H:i:s'); ?>

<?php

session_start();

if(isset($_SESSION['username']))

{

echo ' Well Come ' . $_SESSION['username'].'<br/>';

echo '<a href="logout.php?logout">Logout</a>';

}

else

{

header("location:index.php");

}

?>

<?php

echo shell_exec("bash /var/www/html/test/poza.sh")

?>

<div class="menu-toggle" id="hamburger">

<i class="fas fa-bars"></i>

</div>

<div class="overlay"></div>

<div class="container">

<nav>

<h1 class="brand"><a href="welcome.php">

LIC<span>E</span>NTA<br><br>

<span>Ail</span>enei<br>

Cris<span>tian</span></a></h1>

<ul>

<li><a href='/test/home.php'>Home</a></li>

<li><a href='grafic.php'>Grafic</a></li>

<li><a href="tabel.php">Tabel</a></li>

</ul>

</nav>

<br>

<nav>

<h1 class="brand"></h1>

<ul>

<li><a href= '/test/fapoza.php'>Mai fa o poza</a></li>

<li><a href="/test/poze.php">Vezi poza</a></li>

</ul>

</nav>

</div>

</header>

<style>

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}

html{

font-size: 10px;

font-family: "Roboto Cn", sans-serif;

}

a{

text-decoration: none;

color: #eee;

}

header{

width: 100%;

height: 100vh;

background: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,.5)), url("https://images.unsplash.com/photo-1523374228107-6e44bd2b524e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80") center no-repeat;

background-size: cover;

position: relative;

overflow: hidden;

}

.container{

max-width: 120rem;

width: 90%;

margin: 0 auto;

}

.menu-toggle{

position: fixed;

top: 2.5rem;

right: 2.5rem;

color: #eeeeee;

font-size: 3rem;

cursor: pointer;

z-index: 1000;

display: none;

}

nav{

padding-top: 5rem;

display: flex;

justify-content: space-between;

align-items: center;

text-transform: uppercase;

font-size: 1.6rem;

}

.brand{

font-size: 3rem;

font-weight: 300;

transform: translateX(-100rem);

animation: slideIn .5s forwards;

}

.brand span{

color: crimson;

}

nav ul{

display: flex;

}

nav ul li{

list-style: none;

transform: translateX(100rem);

animation: slideIn .5s forwards;

}

nav ul li:nth-child(1){

animation-delay: 0s;

}

nav ul li:nth-child(2){

animation-delay: .5s;

}

nav ul li:nth-child(3){

animation-delay: 1s;

}

nav ul li:nth-child(4){

animation-delay: 1.5s;

}

nav ul li a{

padding: 1rem 0;

margin: 0 3rem;

position: relative;

letter-spacing: 2px;

}

nav ul li a:last-child{

margin-right: 0;

}

nav ul li a::before,

nav ul li a::after{

content: '';

position: absolute;

width: 100%;

height: 2px;

background-color: crimson;

left: 0;

transform: scaleX(0);

transition: all .5s;

}

nav ul li a::before{

top: 0;

transform-origin: left;

}

nav ul li a::after{

bottom: 0;

transform-origin: right;

}

.overlay{

background-color: rgba(0,0,0,.95);

position: fixed;

right: 0;

left: 0;

top: 0;

bottom: 0;

transition: opacity 650ms;

transform: scale(0);

opacity: 0;

display: none;

}

nav ul li a:hover::before,

nav ul li a:hover::after{

transform: scaleX(1);

}

@keyframes slideIn {

from{

}

to{

transform: translateX(0);

}

}

@media screen and (max-width: 700px){

.menu-toggle{

display: block;

}

nav{

padding-top: 0;

display: none;

flex-direction: column;

justify-content: space-evenly;

align-items: center;

height: 100vh;

text-align: center;

}

nav ul{

flex-direction: column;

}

nav ul li{

margin-top: 5rem;

}

nav ul li a{

margin: 0;

font-size: 2.5rem;

}

.brand{

font-size: 5rem;

}

.overlay.menu-open,

nav.menu-open{

display: flex;

transform: scale(1);

opacity: 1;

}

}

</style>

<script>

var open = document.getElementById('hamburger');

var changeIcon = true;

open.addEventListener("click", function(){

var overlay = document.querySelector('.overlay');

var nav = document.querySelector('nav');

var icon = document.querySelector('.menu-toggle i');

overlay.classList.toggle("menu-open");

nav.classList.toggle("menu-open");

if (changeIcon) {

icon.classList.remove("fa-bars");

icon.classList.add("fa-times");

changeIcon = false;

}

else {

icon.classList.remove("fa-times");

icon.classList.add("fa-bars");

changeIcon = true;

}

});

</script>

Fișierul

<?php

echo shell_exec("bash /var/www/html/test/killkill.sh")

?>

<?php

header( "refresh:1;url=http://localhost/test/home.php" );

?>

Fișierul

function Rainbow()

{

"use strict";

var gradients = null;

var minNum = 0;

var maxNum = 100;

var colours = ['ff0000', 'ffff00', '00ff00', '0000ff'];

setColours(colours);

function setColours (spectrum)

{

if (spectrum.length < 2) {

throw new Error('Rainbow must have two or more colours.');

} else {

var increment = (maxNum – minNum)/(spectrum.length – 1);

var firstGradient = new ColourGradient();

firstGradient.setGradient(spectrum[0], spectrum[1]);

firstGradient.setNumberRange(minNum, minNum + increment);

gradients = [ firstGradient ];

for (var i = 1; i < spectrum.length – 1; i++) {

var colourGradient = new ColourGradient();

colourGradient.setGradient(spectrum[i], spectrum[i + 1]);

colourGradient.setNumberRange(minNum + increment * i, minNum + increment * (i + 1));

gradients[i] = colourGradient;

}

colours = spectrum;

}

}

this.setSpectrum = function ()

{

setColours(arguments);

return this;

}

this.setSpectrumByArray = function (array)

{

setColours(array);

return this;

}

this.colourAt = function (number)

{

if (isNaN(number)) {

throw new TypeError(number + ' is not a number');

} else if (gradients.length === 1) {

return gradients[0].colourAt(number);

} else {

var segment = (maxNum – minNum)/(gradients.length);

var index = Math.min(Math.floor((Math.max(number, minNum) – minNum)/segment), gradients.length – 1);

return gradients[index].colourAt(number);

}

}

this.colorAt = this.colourAt;

this.setNumberRange = function (minNumber, maxNumber)

{

if (maxNumber > minNumber) {

minNum = minNumber;

maxNum = maxNumber;

setColours(colours);

} else {

throw new RangeError('maxNumber (' + maxNumber + ') is not greater than minNumber (' + minNumber + ')');

}

return this;

}

}

function ColourGradient()

{

"use strict";

var startColour = 'ff0000';

var endColour = '0000ff';

var minNum = 0;

var maxNum = 100;

this.setGradient = function (colourStart, colourEnd)

{

startColour = getHexColour(colourStart);

endColour = getHexColour(colourEnd);

}

this.setNumberRange = function (minNumber, maxNumber)

{

if (maxNumber > minNumber) {

minNum = minNumber;

maxNum = maxNumber;

} else {

throw new RangeError('maxNumber (' + maxNumber + ') is not greater than minNumber (' + minNumber + ')');

}

}

this.colourAt = function (number)

{

return calcHex(number, startColour.substring(0,2), endColour.substring(0,2))

+ calcHex(number, startColour.substring(2,4), endColour.substring(2,4))

+ calcHex(number, startColour.substring(4,6), endColour.substring(4,6));

}

function calcHex(number, channelStart_Base16, channelEnd_Base16)

{

var num = number;

if (num < minNum) {

num = minNum;

}

if (num > maxNum) {

num = maxNum;

}

var numRange = maxNum – minNum;

var cStart_Base10 = parseInt(channelStart_Base16, 16);

var cEnd_Base10 = parseInt(channelEnd_Base16, 16);

var cPerUnit = (cEnd_Base10 – cStart_Base10)/numRange;

var c_Base10 = Math.round(cPerUnit * (num – minNum) + cStart_Base10);

return formatHex(c_Base10.toString(16));

}

function formatHex(hex)

{

if (hex.length === 1) {

return '0' + hex;

} else {

return hex;

}

}

function isHexColour(string)

{

var regex = /^#?[0-9a-fA-F]{6}$/i;

return regex.test(string);

}

function getHexColour(string)

{

if (isHexColour(string)) {

return string.substring(string.length – 6, string.length);

} else {

var name = string.toLowerCase();

if (colourNames.hasOwnProperty(name)) {

return colourNames[name];

}

throw new Error(string + ' is not a valid colour.');

}

}

var colourNames = {

purple: "800080",

red: "FF0000",

}

}

if (typeof module !== 'undefined') {

module.exports = Rainbow;

}

Fișierul

function constrain(val, min_val, max_val) {

return Math.min(max_val, Math.max(min_val, val));

}

function map(x, in_min, in_max, out_min, out_max) {

return (x – in_min) * (out_max – out_min) / (in_max – in_min) + out_min;

}

function drawRectangle(ix, jx, pixel)

{

var c = document.getElementById("thermalCanvas");

var ctx = c.getContext("2d");

var colour = rainbow.colourAt(Math.floor(pixel));

colour = "#" + colour;

ctx.fillStyle = colour;

ctx.fillRect(displayPixelHeight * ix, displayPixelWidth * jx, displayPixelHeight * ix + displayPixelHeight, displayPixelWidth * jx + displayPixelWidth);

}

function updateCanvas()

{

$.ajax(

{

type: "GET",

url : "/camera",

dataType: "text",

success: function(data) {

console.log("Am intrat un functia pentru succes.");

data = data.replace(/'/g, '"');

newData = JSON.parse(data);

bicubicData = newData.values;

console.log(bicubicData.length);

//interpretez valorile si modific #termalCanvas

for(var i = 0; i < bicubicData.length; i++) {

for(var j = 0; j < bicubicData[i].length; j++) {

//desenez un dreptunghi

drawRectangle(i, j, bicubicData[i][j]);

}

}

//daca e nevoie, updatez canvas-ul

var c = document.getElementById("thermalCanvas");

var ctx = c.getContext("2d");

},

error: function(err) {

console.log("Eroare. Serverul nu a raspuns la cerere. Status: " + err.status + " " + err.statusText);

}

});

}

function startReading()

{

readingInterval = setInterval(updateCanvas, 1000);

}

function stopReading()

{

if(typeof readingInterval !== undefined) {

clearInterval(readingInterval);

delete readingInterval;

}

}

ANEXA 3 – Cod sursă pentru crearea bazei de date și a tabelelor

DROP DATABASE licentadb;

CREATE DATABASE IF NOT EXISTS licentadb;

USE licentadb;

CREATE TABLE users(

id SMALLINT UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT,

username VARCHAR(25) UNIQUE NOT NULL,

parola VARCHAR(50) NOT NULL

);

INSERT INTO users VALUES(NULL, "cristi", md5("parola"));

INSERT INTO users VALUES(NULL, "marius", md5("parola"));

INSERT INTO users VALUES(NULL, "andrei", md5("parola"));

INSERT INTO users VALUES(NULL, "admin", md5("admin"));

CREATE TABLE adminusers(

id SMALLINT UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT,

username VARCHAR(25) UNIQUE NOT NULL,

parola VARCHAR(50) NOT NULL

);

INSERT INTO adminusers VALUES(NULL, "admin1", md5("admin1"));

INSERT INTO adminusers VALUES(NULL, "admin2", md5("admin2"));

INSERT INTO adminusers VALUES(NULL, "admin3", md5("admin3"));

CREATE TABLE miscare(

id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,

timp DATETIME UNIQUE NOT NULL

);

DESCRIBE users;

DESCRIBE adminusers;

DESCRIBE miscare;

SELECT * FROM users;

SELECT * FROM adminusers;