SPECIALIZAREA CALCULATOARE SI TEHNOLOGIA INFORMAȚIEI [606293]

UNIVERSITATEA BUCURE ȘTI
FACULTATEA DE MATEMATICĂ INFORMATICĂ
SPECIALIZAREA CALCULATOARE SI TEHNOLOGIA INFORMAȚIEI

LUCRARE DE LICENȚĂ

COORDONATORI ȘTIIN ȚIFICI :
Lect. Universitar dr. Cornel Niculae
Asist. Universitar dr. Alecsandru Chirosca
ABOSOLVENT:
Năvrăpescu Andrei

București
2018

UNIVERSITATEA BUCURE ȘTI
FACULTATEA DE MATEMATICĂ INFORMATICĂ
SPECIALIZAREA CALCULATOARE SI TEHNOLOGIA INFORMA ȚIEI

EHOME CU ANDROID

COORDONATORI ȘTIIN ȚIFICI :
Lect. Universitar dr . Cornel Niculae
Asist. Universitar dr. Alecsandru Chirosca
ABOSOLVENT:
Năvrăpescu Andrei

Bucureș ti 2018

CUPRINS

1. INTRODUCERE – INTERNET OF THINGS ………………………….. ………………………….. ……………………… 5
2. CONCEPT ………………………….. ………………………….. ………………………….. ………………………….. ……….. 7
3. ARDUINO ………………………….. ………………………….. ………………………….. ………………………….. ……… 10
3.1. ARDUINO UNO ………………………….. ………………………….. ………………………….. ………………………….. ….. 10
3.2. ARDUINO ETHERNET SHIELD ………………………….. ………………………….. ………………………….. ……….. 12
3.3. STARTUL DEZVOLT ᾸRII PE ARDUINO ………………………….. ………………………….. ………………………… 13
3.4. APRINDERE LED SIMPLU ………………………….. ………………………….. ………………………….. ………………. 15
3.5. LED PUTERE REGLABIL Ᾰ ………………………….. ………………………….. ………………………….. ………………. 15
3.6. SENZOR TEMPERATUR Ᾰ ………………………….. ………………………….. ………………………….. ……………….. 16
3.7. SENZOR DE MIȘCARE ………………………….. ………………………….. ………………………….. …………………….. 17
3.8. FOLOSIREA MOTORAȘELOR ………………………….. ………………………….. ………………………….. ………….. 18
3.9. CONECTARE INTERNET ………………………….. ………………………….. ………………………….. ………………… 19
4. SERVER ………………………….. ………………………….. ………………………….. ………………………….. ………… 20
4.1. METODA I ………………………….. ………………………….. ………………………….. ………………………….. …………. 20
4.1.1. CREARE DOMENIU ………………………….. ………………………….. ………………………….. ………………….. 20
4.1.2. DUC ………………………….. ………………………….. ………………………….. ………………………….. …………… 20
4.1.3. PORT FOWARDING ………………………….. ………………………….. ………………………….. ………………….. 21
4.1.4. SCRIPTURILE PHP ………………………….. ………………………….. ………………………….. ………………….. 22
4.1.5. CREAREA SCRIPTURILOR ………………………….. ………………………….. ………………………….. ………… 23
a. LED1_ON ………………………….. ………………………….. ………………………….. ………………………….. ……….. 23
b. LED1_OFF ………………………….. ………………………….. ………………………….. ………………………….. ……… 24
c. LED2_ON ………………………….. ………………………….. ………………………….. ………………………….. ……….. 25
d. LED2_OFF ………………………….. ………………………….. ………………………….. ………………………….. ……… 26
e. DOOR1_ON ………………………….. ………………………….. ………………………….. ………………………….. …….. 26
f. DOOR1_OFF ………………………….. ………………………….. ………………………….. ………………………….. …… 27
g. ALARMĂ _ON ………………………….. ………………………….. ………………………….. ………………………….. ….. 28
h. ALARMĂ _OFF ………………………….. ………………………….. ………………………….. ………………………….. …. 28
i. SENZOR _ON ………………………….. ………………………….. ………………………….. ………………………….. …… 29
j. SENZOR _OFF ………………………….. ………………………….. ………………………….. ………………………….. ….. 30
k. STAREUȘĂ _ON ………………………….. ………………………….. ………………………….. ………………………….. .. 30
l. STAREUȘĂ _OFF ………………………….. ………………………….. ………………………….. ………………………….. 31
m. LEDPWM ………………………….. ………………………….. ………………………….. ………………………….. ……. 31

n. TEMPERATURĂ ………………………….. ………………………….. ………………………….. ………………………….. 32
o. RETURN_VALUES ………………………….. ………………………….. ………………………….. ……………………….. 33
4.1.6. CONCLUZII SCRIPTURI ………………………….. ………………………….. ………………………….. …………….. 34
4.2. METODA II ………………………….. ………………………….. ………………………….. ………………………….. ……….. 34
4.3. METODA III ………………………….. ………………………….. ………………………….. ………………………….. ………. 35
5. APLICAȚIA WEB ………………………….. ………………………….. ………………………….. ………………………… 36
5.1. LIMBAJ HTML ………………………….. ………………………….. ………………………….. ………………………….. …. 36
5.2. LIMBAJ CSS ………………………….. ………………………….. ………………………….. ………………………….. …….. 37
5.3. LIMBAJ JAVA SCRIPT ………………………….. ………………………….. ………………………….. ……………………… 38
5.4. COD HTML: ………………………….. ………………………….. ………………………….. ………………………….. ……….. 40
5.5. COD CSS: ………………………….. ………………………….. ………………………….. ………………………….. …………… 42
5.6. COD JAVA SCRIPT SI COMENTARIILE PENTRU LINIILE DE COD : ………………………….. ………………. 45
6. FINISAREA PROIECTULUI ………………………….. ………………………….. ………………………….. …………… 48
6.1. CODUL APLICAȚIEI ARDUINO FINAL ………………………….. ………………………….. ………………………….. 48
6.2. TRIMITEREA INFORMARIEI CATRE APLICAȚIILR WEB ………………………….. ………………………….. . 52
6.2.1. TEMPERATURĂ ………………………….. ………………………….. ………………………….. ………………………. 52
6.3. PRIMIREA INFORMAȚIILOR DE LA SERVER ………………………….. ………………………….. ………………… 53
6.3.1. FIȘIERUL FINAL , INTERPRETAREA DATELOR SI MANIPULAREA OBIECTELOR …………………. 53
6.3.2. TRIMITEREA SARCINILOR ………………………….. ………………………….. ………………………….. ……….. 53
7. CONCLUZII ………………………….. ………………………….. ………………………….. ………………………….. ……. 56
8. BIBLIOGRAFIE ………………………….. ………………………….. ………………………….. ………………………….. . 59

CAPITOLUL 1
1. INTRODUCERE – INTERNET OF THINGS

În anul 1962 un scriitor britanic, Arthur C. Clarke, spunea în cartea s ă, „Profiluri ale
viitorului”, c ă „Orice tehnologie suficient de avansat ă nu poate fi deosebit ă de magie”.
Pornind de la aceast ă zical ă vom încerca s ă dăm via ță obiectel or din jurul nostru, urm ând mai
apoi, cu ajutorul lor, s ă creăm un sistem capabil s ă redea mediului înconjur ător o atmosfer ă
dorit ă de noi, s ă îl securizeze, s ă îl adapteze la cerin țele noastre și să fie oric ând gata s ă se
dezvolte u șor și rapid.
Încă din cele mai vechi timpuri omul a început s ă exploreze, s ă experimenteze, s ă
descopere și să inventeze lucruri. Aceast ă poftă de cunoa ștere și-a pus amprenta asupra
evolu ției noastre. Omul lupta, învăța, descoperea, cucerea, v âna, povestea, tr ăia și voia s ă știe
asta, voia s ă salveze amintirile și învățăturile sale, voia s ă lase ceva și genera țiilor urm ătoare.
Așa a ap ărut prima inven ție a omului: scrisul. Cu ajutorul lui putea s ă noteze, s ă analizeze, s ă
revad ă, să resimt ă momentele prin care a trecut sau cuno ștințele pe care le -a dob ândi,
folosind doar dungi, forme și pete de culoare.
Plecând de la scris și până în prezent, omul a reu șit să dea via ță inven țiilor ce îl ajut ă
să înțeleag ă natura uman ă, biosfera și cosmosul. Acum reu șește să vindece boli, s ă găsească
noi surse de energie, s ă creeze sisteme de ap ărare și de colectare a informa țiilor din jurul
nostru. Omul vrea în continuare s ă cunoasc ă, să descopere, s ă învețe.
La început a observat, apoi și-a creat ustensilele de care s -a folosit ca s ă poată
sustrage informa ția dintr -un eveniment, acum… le automatizeaz ă. Omul a reu șit în ultimele
decenii s ă formeze o p ânză imens ă de dispozitive electronice ce sustrag informa țiile din
mediul înconjur ător și le redau într-o form ă dorit ă de noi. Toate aceste e lemente sunt
conectate la internet și ofer ă în timp real informa țiile pe care ni le dorim furnizate. Acest
concept prin care putem comunica cu obiectele folosind internetul poart ă numele de Internet
of things (IOT).
Deși nu lucr ăm într-un laborator, putem aplica acest concept și în propria cas ă
interconect ând diverse dispozitive. Putem genera un sistem ce poate securiza locuin ța noastr ă
și poate comunica cu noi în timp real.

Subiectul lucrării de licență provine din dorința de a reuși să simplificăm și să
îmbunătățim confortul, întrucât o simplă apăsare a unui buton să fie de ajuns pentru a crea o
atmosferă plăcută. Aprinderea unor becuri cu diferite cul ori și puteri reglabile, controlul unor
aparate pentru muzică de la distanță etc., dar și pentru a economisi timpul și a mări cu
siguranță gradul de confort deschiderea ușilor, controlul ușilor, controlul temperaturii din
casă, armarea unui sistem antiefra cție au la bază un concept numit Internet of things (IOT).
Pentru a înțelege utilitatea acestui sistem îl putem definii ca fiind un concept ce ajută
la conectarea dintre oameni și diverse obiecte de uz practic. Altfel spus Internet of things
(IOT) f ormează o rețea de obiecte inteligente ce interacționează prin infrastructura de Internet
actuală.
Atunci când ne referim la obiecte în Internet of things putem încadra o gamă variată,
cum ar fi: imprimante conectate la Wi -fi, automobile pe senzori, sistem e de iluminat,
implanturi cardiace, toate aceste lucruri fiind deja prezente în mediul înconjurător.
Prin urmare de la Internet of things este de așteptat să ofere o conectivitate între
dispozitive, sisteme și servicii și este de așteptat atât dezvoltarea de aplicații cât și
automatizarea în majoritatea domeniilor active.

CAPITOLUL 2
2. CONCEPT

Ca aplicația să funcționeze avem nevoie de trei componente majore:
– aplicație soft
– aplicație capabilă să gestioneze dorințele noastre și să manipuleze aparatele
electronice după bunul plac
– Un server menit să creeze legătură dintre aplicația soft și necesitățile noastre.
Fiecare componentă menționată mai sus trebuie să lucreze fără probleme, independent
și să comunice permanent între ele. Ele formează o echipă. Dacă se rupe legătura între cel
puțin două dintre aceste componente aplicația nu va mai funcționa, sau, mai rău, va funcționa
greșit ducând chiar la arderea unor sisteme electronice.

Figura 1- Schemă de funcționare de tipul : Client , Internet, Server, Arduino [10]

Aplicația soft a fost concepută să ruleze pe orice dispozitiv, ea este o aplicație web ce
poate fi accesată de oriunde prin intermediul unui link și a fost creată cu ajutorul limbajelor
HTML, CSS (pentru pa rtea de Design) și Java script pentru partea de funcționalitate.

Serverul conține scripturi PHP cu ajutorul cărora vom manipula informațiile trimise
de aplicația soft, iar aplicația Arduino se va folosi de datele generate de server ca să
controleze aparat ura aflată în casa noastră.
Începutul dezvoltării.
Scopul lucrării este acela de a crea o machete a unei case inteligente controlată prin
orice fel de dispozitiv, atât din rețeaua locală cât și de la distanță, o aplicație care să furnizeze
în timp real sta rea și funcționalitatea casei noastre.

Figura 2- Schema Funcționalitate [24]
Aplicația web se află pe client si este menită sa comunice cu dispozitivele electronice
din casă folosind requesturi http.
Serverul este creierul sistem ului prezentat de noi. Acesta preia fiecare informație de
la client sau Arduino si folosind un limbaj de nivel inalt, PHP, face posibilă comunicarea
dintre cele doua.
Plăcuța Arduino este un microcontroller cu ajutorul căruia putem manipula aparatura
electronică din casa noastră.
Motorașele, senzorii și LEDurile sunt instrumentele cu care microcontrollerul
indeplineste sarcinile primate de la aplicația web.
Routerul este componenta ce face posibilă pre eluarea datelor de catre server din
mediul online.

Proiectul nostru va funcționa multilateral. Intre fiecare dou ă componente prezentate
mai sus va exista o legatură bidirecțională ( starea lor va fi stiută de ambele dispositive )
astfel incât sa știm in orice moment starea fiecarui obiect.
Pentru ca dorința noastră este ca aparatura electronică sa execute nevoile noastre
trebuie sa dezvoltăm o aplicație care cere o sarcină si primeste un feedback in urma ei.
Motorașele, senzorii sau LEDurile sunt componentele placuț ei Arduino ce trebuie să
execute comenzile primate de la Clienti și să le comunice indeplinirea lor.
Pentru ca acest lucru să se intample ele trebuie sa comunice cumva. Să presupunem că
atît clienții cât placuța Arduino ar fi doua persoane fizice . Ca cerința clientului să fie
transmisă este nevoie de comunicare, fie ea verbală sau pr in semne. Acesta este requestul http
(limbaj de baza : HTML ) . El este metoda prin care cele două dispozitive sau transmit ceva .
Metoda prin care cele două persoane se ințeleg este rezolvată de creierul lor ( sau al
sistemului in cazul nostrum ) , si anume, Serverul. Acesta are rolul unui translator ce preia
fiecare sunet, il traduce și il trimite catre celălalt utilizator astfel încânt, acesta chiar dacă
foloseste o altă limbă, să inteleagă si să poată urmari nevoile celuilalt.
Dat fiind exemplul de mai sus, aplicația web face un request ( scoate un sunet )
HTTP ce acceseaza scripturile PHP aflate pe server ( vorbește ) , request ce este transmis mai
departe placuței Arduino ( se produce com unicarea ), ce este inteles de ea, urmând să execute
necesitatea noastră. Ea iși folosește mecanismele ( motorașe, senzori, leduri etc) pentru a
duce la capăt acest task. După acest eveniment, ea trebuie sa ii raspundă aplicației web ș i o va
face prin acea și metodă, folosind aceași limbă, adică, se va folosi de server sa ii comunice
aplicație client că sarcina a fost ideplinită.
Pentru dezvoltarea proiectului de licența eu am pornit de la indep linirea sarcinilor si
am mers că tre cererea lor.

CAPITOLUL 3
3. ARDUINO

3.1. ARDUINO UNO

Sarcinile noastre vor pleca din aplica ția web c ătre server de unde vor fi transmise
direct c ătre microcontroller. Microcontrollerul folosit de noi este Arduino Uno. Acesta se
bazeaz ă pe ATmega328 și poate fi foarte u șor programat folosind software -ul Arduino.

Micro controler ATmega328P
Tensiune de operare 5V
Tensiune de intrare (recomandată) 7-12V
Tensiunea de intrare (limită) 6-20V
I/O digitale 14 (din care 6 asigură ieșirea PWM)
Pini digital I/O PWM 6
Pini de intrare analogice 6
Curent continuu pe pin I/O 20 m A
Curentul DC pentru pinul de 3.3V 50 m A
Memorie Flash 32 KB (ATmega328P) din care 0,5 KB folosită de bootloader
SRAM 2 KB (ATmega328P)
EEPROM 1 KB (ATmega328P)
Ceas de viteză 16 MHz
LED_BUILTIN 13
Lungime 68.6 mm
Lățime 53.4 mm
Greutate 25 g
Tabel 1 – Specificații tehnice Arduino Uno [4 ]
Uno poate genera prin pinii s ăi de intrare/ie șire maxim 5V și poate fi
alimenta tă folosind at ât mufa de alimentare c ât și conexiunea USB. Dac ă dorim s ă facem
alimentarea folosind o surs ă extern ă aceasta poate avea între 6 și 20 vol ți, însă este valoarea
maxim ă a tensiunii este bine s ă nu dep ășească 12 V deoarece se poate supra încălzi
regulatorul de tensiune. În cazul în care nu putem folosi mufa de alimentare, pl ăcută se poate
alimenta și cu ajutorul unei baterii acces ând pinii GND (masa) și Vin.

Aceast ă plăcuță ne permite s ă control ăm motora șe, surse de lumin ă, senzori prin
intermed iul pinilor s ăi de intrare/ie șire. Aceasta pune la dispozi ție dou ă zeci de intr ări/ieșiri
dintre care șase sunt analogice (A0 -A5), iar restul sunt digitale (D0 -D13). Pinii digitali D3,
D5, D6, D9, D10 și D11 ne permit s ă folosim func ția de putere reglabil ă, PWM. De și numele
ei sugereaz ă faptul c ă poate genera curen ți de intensit ăți diferite, aceast ă funcție permite
plăcuței să furnizeze valoarea maxim ă, de 5 V, pe pinii digitali într-un interval de timp direct
propor țional cu raportul pe care îl dorim. Dac ă am dori s ă aprindem ni ște becule țe la o
intensitate de 20% din puterea maxim ă, într-un ciclu ce dureaz ă circa dou ă milisecund ă,
plăcuța va scrie 20% din timp 5V pe pinul dorit, urm ând să fie inactive dup ă.
Pinii analogici ofer ă 10 bi ți pentru citirea semn alului. Cu ajutorul lor putem citi 1024
valori diferite, unde 1024 corespunde valorii de 5V, iar 0 îi corespunde valorii de 0V. În
proiectul nostru vom folosi ace ști pini pentru a citi informa țiile transmise de senzorul de
temperatur ă și de mi șcare.
Folosi nd Arduino Uno putem crea o aplica ție ce ne permite controlul locuin ței însă
doar prin folosirea comenzilor trimise prin modulul serial. Pentru a putea conecta pl ăcuța la
internet vom fi nevoi ți să îi adăugăm un port Ethernet. O metod ă de a rezolva aceast ă
necesitate ar fi s ă folosim un shield, Ethernet Shield, ce este tot o pl ăcuță de dezvoltare
conceput ă pe acelea și dimensiuni cu proprietate c ă se poate conecta prin suprapunere cu
prima.

Figure 3- Ethe rnet shield [26]

3.2. ARDUINO ETHERNET SHIELD

Ethernetshield -ul este o plăcută pentru dezvoltare venită ca un modul pentru Arduino
Uno. Acesta beneficiază de un port Ethernet și ne permite conectarea la internet a plăcuței
Arduino prin intermediul unui cablu RJ45. Modulul operează exact ca plăcuța folosind o
tensiune de 5V, oferind o viteză de 10/100 Mb dar și accesul la biblioteca Ethernet. În cadrul
acestui proiect am folosind versiunea a doua a shield -ului ce are la bază cipul Wiznet 5500.
Pe acest modul putem de știnge urm ătoarele LED -uri foarte folositoare:
– ON: indic ă faptul c ă shield -ul și placa sunt al imentate
– LINK: ne indic ă faptul c ă suntem conecta ți la o re țea și
clipe ște atunci c ând se face transferul de date
– FDX: ne arat ă că transferul de pachete se face la ambele
capete ale re țelei noastre
– 100M: indic ă viteza de 100 Mb/s
– ACT: clipe ște atu nci c ând este activ ă activitatea RX (recive –
prime ște informa ții de la server) sau TX (transmitted – trimite
informa ții către server)
În plus, acest shield vine și cu un slot pentru carduri micro SD pentru a putea stoca
diferite fi șiere ce urmeaz ă să fie difuzate în rețea, iar designul s ău și modul de conectare
suprapus ne permite s ă putem lega și alte module/pl ăcute în continuare f ără a împiedica bun ă
funcționare a acestora, ca în exemplul de mai jos.

Figure 4- Ethernet Shield -ul suprapus placuței Arduino Uno [27]

3.3. STARTUL DEZVOLT ᾸRII PE ARDUINO
Pentru început am încercat să controlez fiecare componentă electronică prin intermediul
plăcuței Arduino, fară ca aceasta să fie conectată la internet. Componentele noastre sunt:
– 4 LEDuri menite să lumineze curte a.
– 1 LED pentru bucătări e
– 1 LED cu putere reglabilă
– Ușa unui garaj
– Ușa de la intrarea în curte
– Un senzor de mișcare ce poate fi folosit atât pentru a deschide poarta cât și pentru un
sistem antiefracție.
– Un senzor de temperatură menit să ne ofere temperatura în timp real.
Plăcuța Arduino este prevăzută cu mai mulți pini. Fiecare pin poate transmite sau poate
primi informație (INPUT sau OUTPUT), iar multitudinea pinilor săi ne ajută pe noi să
controlăm, după bunul plac, mai multe componente electronice.

Figura 5- Plăca Arduino Uno [4]

Prima dată am conectat primul LED la pinul DIGITAL 2. LED -ul folosit de noi este
un LED cu rezistență internă (1000 ohmi) și nu necesită crearea unui circuit sup lementar
pentru introducerea ei. După conectarea să, am pornit software -ul Arduino în urmărirea
aprinderii primului LED.
La prima deschidere a software -ului vom vedea următorul lucru:

Figura 6- Începerea primei aplicații Arduino
După cum observăm avem două componente soft importante. Setu p-ul și Loop –
ul.Void setup () se apelează o singură dată, iar void loop () se apelează la infinit, pană la
deconectarea plăcuței de la sursă .

3.4. APRINDERE LED SIMPLU
Pentru aprinderea LED ului a fost necesar să introducem în blocul setup -ului
declararea pinului pe care îl folosim, iar în partea de loop vom introduc e codul menit să
aprindă becul.
Cod pentru aprinderea unui led folosind Arduino [11]
Codul de mai sus declară că pe pinul 2 vom transmite semnal (OUTPUT), iar pentru
aprinderea LEDului conectat la pinul 2 am folosit funcția digitalWrite (număr_pin, HIGH).
Urmează apoi o afișarea în ecranul monitorului de serial (Serial Monitor – ce poate fi deschis
apăsând simultan pe CTRL + SHIFT + M) faptul că LEDul este aprins, un delay de o secundă
urmând mai apoi să îl stingem folosind digitalWrite (număr_pin, LOW). Datorită faptului că
loop-ul se execută la infinit, iar după stingerea becului avem un delay de o secundă, LEDul
nostru se va aprinde o secundă, apoi se va stinge și va rămâne stins pentru o secundă, urmând
să fie aprins din nou pană la deconectarea plăcuței de la sursă.
3.5. LED PUTERE REGLABIL Ᾰ
După acest pas simplu am continuat cu aprinderea becului cu putere reglabilă . Acest
LED este prevăzut, la fel, cu o rezistență internă de 1000 ohmi și l -am conectat la pinul 3.

Cod pentru aprinderea unui LED cu putere reglabil ă folosind Arduino [12]

Datele sunt trimise în octeți individuali, fiecare dintre a cestea variind în valoare de la
0 la 255. Schița citește aceste octeți și le folosește pentru a seta luminozitatea LED -ului.
Tocmai de aceea am decis să creez o funcție menită să aprindă LED -ul nostru cu o putere
dorită de noi.
Conversia se face în interiorul funcției void aprinderePWM (int pin, int putere):
PutereConv=2.55*putere ;
Permițând aprinderea becului la un procentaj fix.

3.6. SENZOR TEMPERATUR Ᾰ
După aprinderea ledului cu putere reglabilă am înaintat cu senzorul de temperatură.
Senzorul folosit de mine este un LM50.

Acest senzor este conectat în felul următor:
– Arduino GND la Senzor GND
– Arduino 5V la Senzor VCC
– Arduino A0 la Senzor OUT
Cod pentru citirea temperaturii folosind Arduino [13]

Pentru a citi temperatura am declarat în partea de setup pinul Analog 0 (A0) ca pin de
INPUT, apoi am creat o funcție menită să returneze temperatura folosind ecuația:
VO = 10 mV/°C × T °C + 500 mV unde T este temperatura în ° C și VO este
tensiunea de ieșire dată de senzorul LM50.

3.7. SENZOR DE MIȘCARE
După citirea temperaturii am făcut un mic progrămel ce aprinde un LED dacă în fața
senzorului de mișcare apare ceva. Senzorul folosit de mine este un Sharp GP2Y0D805Z0F de
5cm.

Cod pentru folosirea unui sensor de miscare [14]
Conexiunea seamănă cu cea de la conectarea senzorului de temperatură la plăcuță,
diferența fiind pinul de citire a semnalului.
– Arduino GND la Senzor GND
– Arduino 5V la Senzor VCC
– Arduino A1 la Senzor OUT
Declarăm pinul Analog 1 ca pin de INPUT, iar în cazul în care în fața senzorului se
afla ceva valoarea returnată de el va fi 0. În a cest caz vom aprinde LEDul de pe pinul 2,
atunci când nu avem nimic în față să vom stinge becul.

3.8. FOLOSIREA MOTORAȘELOR
Motorașele mele sunt două servomotoare de tipul MS -6-40. Aceste motorașe
trebuiesc legate în felul următor:
– Arduino GND la MotorGND
– Arduino 5V la Motor VCC
– Arduino Digital_pin la Motor OUT
Aceste servo motoare deși sunt menite să se rotească 180 grade ele funcționează cel
mai bine în range -ul de 10 -15 grade și 165 -170. Încercarea de a mișca motorașul mai mult de
180 grade duce la defe ctarea să.

Cod pentru folosirea unui Servo Motor folosind Arduino [15]

Pentru a putea mișca motorașul avem nevoie de a include o librărie nouă, Servo.H.
Această librărie ne permite crearea unui obiect de tip Servo pe care îl putem manipula
după bunul plac. Pentru a mișca motorașul de pe poziția inițială un număr de grade am folosit
o funcție for cu un număr de grade crescătore pentru rotirea motorașului în sens trigonometric
și o funcție for cu grade descrescătoare pentru rotirea motorașului în sens ceasornic.
Este indicat să nu alimentăm motorașul direct din plăcuța Arduin o deoarece ele
consumă mai mult curent și putem arde atât plăcuța cât și portul usb ce o alimentează.
3.9. CONECTARE INTERNET

Cod pentru conectarea Arduino la internet și folosirea unui apel de tip GET [16]
Codul de mai sus face un HTTP request către ehomeaa. Ddns.net/Final de tipul get.
Pentru a conecta plăcuța Arduino la internet este necesar să îi oferim un mac diferit de
mac-ul oricărui dispozitiv din rețeaua noastră, un ip din aceeași subrețea și un server/lin k la
care să facem un request.

CAPITOLUL 4
4. SERVER

Aplicația soft (web) poate rula în trei moduri:
– Poate fi accesată de oriunde
– Poate fi accesată doar local (din aceeași rețea)
– Poate fi accesată local însă are anumite porțiuni ce sunt urcata pe inte rnet și pot fi
accesate de oriunde.

4.1. METODA I
Pentru ca aplicația să fie accesată de oriunde aveam nevoie de un server și de un
domeniu (ip) static. Cum orice ip își schimbă forma în mediul online este foarte greu să
folosim aplicații care să se conecteze constant la ip -ul pe care -l cunoaștem noi la un moment
dat. Tocmai de aceea am decis să creez un domeniu dinamic (ddns), care, cu ajutorul unei
aplicații, nu îmi modifică ip -ul din mediul online și îmi permite accesul la scripturile PHP
aflate pe server a pelând simplu: numele_domeniului. Ddns.net/scriptul_dorit.
4.1.1. CREARE DOMENIU
Crearea domeniul dinamic a fost făcută cu ajutorul platformei oferită de NOiP, o
companie ce furnizează astfel de servicii. După ce am făcut un profil gratuit, am creat numele
hostname -ului meu ca fiind: ehomeaa. Ddns.net.
4.1.2. DUC
În urma acestui fapt am fost nevoit să descarc o aplicație numită Dynamic Update
Client (DUC) ce îmi permite ca hostname -ul să pointeze mereu către ip -ul dinamic la locația
mea, indiferent de modificările sale. Dacă utilizați un router pentru a vă conecta la Internet
și/sau aveți un firewall instalat pe computer, va trebui să vă asigurați că acesta este
configurat. Aceasta va direcționa traficul adecvat de pe Internet către mașina de destinație din
rețea. Acest lucru se face folosind o funcție router numită Port Forwarding. Porturile comune
care trebuie transmise sunt portul 80 pentru un server web, portul 21 pentru FTP și portul 25
pentru e -mailul SMTP.

4.1.3. PORT FOWARDING
Pentru a face Port Forwarding avem trebuie să ne conectăm la router accesând din
pagina browser -ului 192.168.0.1 sau 192.168.1.1 în funcție de caz.

Figura 7 – Inter fața de logare a unui Router
Ajunși aici trebuie să introducem parola impusă de noi sau oferită de compania
router -ului respectiv, apoi accesăm Port Forwarding. Pentru a crea o nouă regulă avem nevoie
de un port, un protocol (UDP + TCP) și un ip. Ip -ul trebuie să fie ip -ul static oferit de router –
ul nostru pc -ului pe care ținem serverul. Pentru a afla acest ip vom deschide Command
Prompt și în urma accesării comenzii ipconfig vom vedea ce ip avem pe mașina noastră.

Figura 8 – Port Forwarding

După terminarea acestor pași suntem nevoiți să instalăm WampServer. WampServer
se este un pachet software pentru sistemul de operare Windows ce constă în serverul web
Apache, OpenSSL pentru suport SSL, baza de date MySQL și limbajul de programare PHP.
La adresa unde a fost instalat programul Wamp vom găsi un fișier numit www unde
vor sta scripturile noastre PHP. Aceste scripturi vor fi apelate atât de aplicația We b cât și de
aplicația Arduino. Ele sunt menite transforme cerințele clientului nostru, într -o formulă ușor
de înțeles de aplicația Arduino.
În următorii pași vom explica ce scripturi am făcut și cum funcționează fiecare .
4.1.4. SCRIPTURILE PHP

Pentru administrarea serverului vom folosi limbajul de programare PHP (PHP:
Hypertext Preprocessor). Acest limbaj are o istorie larg ă încep ând cu anul 1994 și până astăzi
devenind unul dintre cele mai folosite tehnologii pe partea de backend. A fost creat de
Rasmus Lerdorf și se numea ini țial Personal Home Page. O dat ă cu apari ția Node.js în anul
2009 s -a dezvoltat o concur ență major ă între PHP și JavaScript, cei din urm ă dorind s ă
dezvolte pe l ângă funcționalitatea aplica țiilor web și servicii de backend foarte bune.
Deoarece exist ă o comunitate mult mai mare, suport ă mult mai multe frameworkuri, necesit ă
mai pu țin cod și se pot g ăsi mult mai multe servicii de hosting, am decis s ă folosesc PHP -ul
ca limbaj de scriptare pentru serverul nostru.
Acest limbaj vine cu un pachet de beneficii ce ne vor ajuta s ă dezvolt ăm rapid și ușor
aplica ția noastr ă. Este eficient, simplu și extrem de util în dezvoltarea securit ății serverului.
La scrierea scripturilor PHP nu sunt necesare biblioteci și nici compilatoare, sintaxa este
foarte u șoară, iar codul poate fi introdus și executat într-un singur fi șier aflat pe server.
Am decis ca apli cația noastră Arduino să acceseze mereu un fișier Final aflat pe
server. Acest fișier poate fi accesat atât local cât și de la distanță apelând: eho meaa.
ddns.net/Final.
În fișierul respectiv vom avea un șir de caractere format în funcție de dorințele noas tre
de control al aparatelor în felul următor: pentru LEDuri, senzori și motorașe vom avea 1 dacă
vrem să le pornim, 0 dacă vrem să le oprim, iar pentru temperatură și procentajul cu care
vrem să aprindem ledul cu putere reglabilă vom avea două caractere. Șirul de caractere va fi
modificat în urma altor apeluri ale scripturilor PHP și vor modifica fișierul Final în felul
următor:
Dacă vrem să aprindem Lumi na de afară vom apela ehomeaa. ddns.net/LED1_ON.
Acesta va scrie pe prima poziție a fișierului final 1, dacă vrem să stingem lumi na de afară
vom scrie ehomeaa. ddns.net/LED1_OFF și va pune pe prima poziție valoarea 0.

Dacă vrem să deschidem uș a Garajului vom apela ehomeaa. ddns.net/DOOR1_ON.
Acesta va scrie pe a 3a poziție în șirul aflat în fișierul Final 1 , iar dacă v rem să stingem
apelăm ehomeaa. ddns.net/DOOR1_OFF și vom pune 0 pe a 3a poziție.
Pozițiile aflate în fișierul final sunt:
[0] = Lumină afară LED1
[1] = Lumină bucătărie LED2
[2] = Garaj DOOR1
[3] = LEDPWM LEDPWM
[4] = LEDPWM LEDPWM
[5] = TEMPERATURA TEMPERATURA
[6] = TEMPERATURA TEMPERATURA
[7] = Senzor SENZOR MIȘCARE
[8] = Alarmă ALARMA
[9] = STAREUȘĂ STAREUȘĂ INTRARE
Un bun exemplu ar fi următorul:
1002522101
Analizând stringul de mai sus putem deduce că:
Trebuie să aprindem Lumina de afară, trebuie să stingem lumina din bucătărie, trebuie
să închidem sau este închisă ușa garajului, trebuie să aprinde ledul cu putere reglabilă cu un
procentaj de 25%, temperatura din încăpere este de 22 grade, senzorul de mi șcare este pornit,
alarma este oprită iar ușa de la intrare este sau trebuie deschisă.
4.1.5. CREAREA SCRIPTURILOR
a. LED1_ON

<? Php
Header ('Access -Control -Allow -Origin: *');
$myfile = fopen ("Final.txt", "a+");
$txt = file_get_contents ("Final.txt");

$arr1=str_split ($txt);
If (strlen ($txt) <10)
{
For ($i = strlen ($txt); $i < 10; $i++)
{
$arr1[$i] =1;
}
}
$arr1[0] ='1';
$txt=implode ($arr1);
File_put_contents ("Final.txt", $txt); ? >
Cod pentru scriptul PHP LED1_ON [17]
Pentru a crea scriptul trebuie să: deschide fișierul Final, apoi îi salvăm conținutul într –
un text ($txt = file_get_contents ("Final.txt");) și îl transformăm într -un șir de caractere
($arr1=str_split ($txt);). Următorul IF este pus deoarece, în cazul unor apeluri la ca re serverul
nu răspunde, din fișierul final este posibil să se șteargă date și este bine să îl avem mereu de
lungimea egală cu numărul de poziții menționate mai sus. După verificare, plasăm pe prima
poziție a șirului 1($arr1[0] ='1';), îl refacem text ($tx t=implode ($arr1);) și îl rescriem în
fișierul Final (file_put_contents ("Final.txt", $txt);).
b. LED1_OFF

<? Php
Header ('Access -Control -Allow -Origin: *');
$myfile = fopen ("Final.txt", "a+");
$txt = file_get_contents ("Final.txt");
$arr1=str_split ($txt);
If (strlen ($txt) <10)
{
For ($i = strlen ($txt); $i < 10; $i++)
{

$arr1[$i] =1;
}
}
$arr1[0] ='0';
$txt=implode ($arr1);
File_put_contents ("Final.txt", $txt);?
>
Cod pentru scriptul PHP LED1_O FF [17]
Codul PHP pentru LED1_ON este asemănător cu LED1_OFF, excepție făcând faptul
că în loc de 1 pe prima poziție vom pune 0.

c. LED2_ON

<? Php
Header ('Access -Control -Allow -Origin: *');
$myfile = fopen ("Final.txt", "a+");
$txt = file_get_contents ("Final.txt");
$arr1=str_split ($txt);
If (strlen ($txt) <10)
{
For ($i = strlen ($txt); $i < 10; $i++)
{
$arr1[$i] =1;
}
}
$arr1[1] ='1';
$txt=implode ($arr1);
File_put_contents ("Final.txt", $txt);?

>
Cod pentru scriptul PHP LED 2_ON [17]

d. LED2_OFF

<? Php
Header ('Access -Control -Allow -Origin: *');
$myfile = fopen ("Final.txt", "a+");
$txt = file_get_contents ("Final.txt");
$arr1=str_split ($txt);
If (strlen ($txt) <10)
{
For ($i = strlen ($txt); $i < 10; $i++)
{
$arr1[$i] =1;
}
}
$arr1[1] ='0';
$txt=implode ($arr1);
File_put_contents ("Final.txt", $txt);?
>
Cod pentru scriptul PHP LED2_OFF [17]

e. DOOR1_ON

<? Php
Header ('Access -Control -Allow -Origin: *');
$myfile = fopen ("Final.txt", "a+");

$txt = file_get_contents ("Final.txt");
$arr1=str_split ($txt);
If (strlen ($txt) <10)
{ For ($i = strlen ($txt); $i < 10; $i++)
{
$arr1[$i] =1;
}}
$arr1[2] ='1';
$txt=implode ($arr1);
File_put_contents ("Final.txt", $txt) ; ?>
Cod pentru scriptul PHP DOOR 1_ON [17]

f. DOOR1_OFF

<? Php
Header ('Access -Control -Allow -Origin: *');
$myfile = fopen ("Final.txt", "a+");
$txt = file_get_contents ("Final.txt");
$arr1=str_split ($txt);
If (strlen ($txt) <10)
{
For ($i = strlen ($txt); $i < 10; $i++)
{
$arr1[$i] =1;
}
}
$arr1[2] ='0';

$txt=implode ($arr1);
File_put_contents ("Final.txt", $ txt);?
>
Cod pentru scriptul PHP DOOR1_OFF [17]

g. ALARMA _ON

<? Php
Header ('Access -Control -Allow -Origin: *');
$myfile = fopen ("Final.txt", "a+");
$txt = file_get_contents ("Final.txt");
$arr1=str_split ($txt);
If (strlen ($txt) <10)
{
For ($i = strlen ($txt); $i < 10; $i++)
{
$arr1[$i] =1;
}
}
$arr1[8] ='1';
$txt=implode ($arr1);
File_put_contents ("Final.txt", $txt);?
>
Cod pentru scriptul PHP ALARMA _ON [17]

h. ALARM A_OFF

<? Php

Header ('Access -Control -Allow -Origin: *');
$myfile = fopen ("Final.txt", "a+");
$txt = file_get_contents ("Final.txt");
$arr1=str_split ($txt);
If (strlen ($txt) <10)
{
For ($i = strlen ($txt); $i < 10; $i++)
{
$arr1[$i] =1;
}
}
$arr1[8] ='0';
$txt=implode ($arr1);
File_put_contents ("Final.txt", $txt) ;
?>
Cod pentru scriptul PHP ALARMA_OFF [17]

i. SENZOR _ON

<? Php
Header ('Access -Control -Allow -Origin: *');
$myfile = fopen ("Final.txt", "a+");
$txt = file_get_contents ("Final.txt");
$arr1=str_split ($txt);
$arr1[7] ='1';
$txt=implode ($arr1);
File_put_contents ("Final.txt", $txt);?
>

Cod pentru scriptul PHP SENZOR _ON [17]

j. SENZOR _OFF

<? Php
Header ('Access -Control -Allow -Origin: *') ; $myfile = fopen ("Final.txt", "a+");
$txt = file_get_contents ("Final.txt") ; $arr1=str_split ($txt);
$arr1[7] ='0';
$txt=implode ($arr1); File_put_contents ("Final.txt", $txt); ?>

Cod pentru scriptul PHP SENZOR_OFF [17]

k. STAREUSA _ON

<? Php
Header ('Access -Control -Allow -Origin: *');
$myfile = fopen ("Final.txt", "a+");
$txt = file_get_contents ("Final.txt");
$arr1=str_split ($txt);
If (strlen ($txt) <10)
{
For ($i = strlen ($txt); $i < 10; $i++)
{
$arr1[$i] =1;
}}
$arr1[9] ='1';

$txt=implode ($arr1);
File_put_contents ("Final.txt", $txt);?>
Cod pentru scriptul PHP STAREUSA _ON [17]

l. STAREUȘĂ _OFF

<? Php
Header ('Access -Control -Allow -Origin: *');
$myfile = fopen ("Final.txt", "a+");
$txt = file_get_contents ("Final.txt");
$arr1=str_split ($txt);
If (strlen ($txt) <10)
{
For ($i = strlen ($txt); $i < 10; $i++)
{
$arr1[$i] =1;
}
}
$arr1[9] ='0';
$txt=implode ($arr1);
File_put_contents ("Final.txt", $txt);?
>
Cod pentru scriptul PHP STAREUSA_OFF [17]

m. LEDPWM

<? Php
Header ('Access -Control -Allow -Origin: *');
$myfile = fopen ("Final.txt", "a+");
$putere;
If (isset ($_GET ['putere']))
{
$putere = $_GET ['putere'];
}
$txt = file_get_contents ("Final.txt");
$arr1=str_split ($txt);
If (strlen ($txt) <10)
{
For ($i = strlen ($txt); $i < 10; $i++)
{
$arr1[$i] =1;
}
}
$arr1[3] =$putere [0];
$arr1[4] =$putere [1];
$txt=implode ($arr1);
File_put_contents ("Final.txt", $txt);?
>
Cod pentru scriptul PHP LEDPWM [17]

n. TEMPERATURĂ

<? Php
Header ('Access -Control -Allow -Origin: *');

$myfile = fopen ("Final.txt", "a+");
$putere;
If (isset ($_GET ['temperatura']))
{
$putere = $_GET ['temperatura'];
}
$txt = file_get_contents ("Final.txt");
$arr1=str_split ($txt);
If (strlen ($txt) <10)
{
For ($i = strlen ($txt); $i < 10; $i++)
{
$arr1[$i] =1;
}
}
$arr1[5] =$putere [0];
$arr1[6] =$putere [1];
$txt=implode ( $arr1);
File_put_contents ("Final.txt", $txt);?
>
Cod pentru scriptul PHP TEMPERATURA [17]

o. RETURN_VALUES
<? Php
Header ('Access -Control -Allow -Origin: *');
$myfile = fopen ("Final.txt", "a+");
$txt = file_get_contents ("Final.txt");
Echo $txt;?

>
Cod pentru scriptul PHP RETURN_VALUES [17]

4.1.6. CONCLUZII SCRIPTURI

După cum putem vedea, scripturile de mai sus sunt din punct de vedere al codului
aproape identice, diferența făcând pozițiile pe care scriem în Fișierul final . Scripturile
LEDPWM, TEMPERATURA și return_values funcționează diferit.
Aceste scripturi funcționează în felul următor:
La HTTP re questul ehomeaa. ddns.net/LEDPWM? Putere=36 el preia valoare de după
egal și o punem în Final pe pozițiile respective. La fel funcționează și scriptul pentru
TEMPERATURA.
Scriptul return_values are ca menire afișarea pe o pagină web a conținutului din
fișierul Final pentru a fi folosit în popularea componentelor aplicației web.
Am ales aceast ă metodă de creare a scripturilor deoarece îmi permite s ă dezvolt foarte
ușor aplica ția Arduino. Cu ajutorul lor eu pot crea un vector de stare al aplica ției mele pe care
îl interoghez mereu și acționez în consecin ță. Făcând mereu citirea din fi șierul Final nu voi
avea delay la primirea datelor, iar citirea informa țiilor se va face la un ciclu al pl ăcuței (o dat ă
la 2 milisecunde). Fiind nevoie s ă manipul ăm un singur șir de numere, dac ă am vrea s ă
adaug ăm un alt obiect electronic pe care dorim s ă îl control ăm tot ce trebuie s ă facem este s ă
mărim dimensiunea vectorului, s ă refacem unul din pa șii de mai sus și să modific ăm pu țin
aplica ția Arduino astfel încât să îndeplineasc ă și noile sarcini pentru valoarea nou ap ărută.
În cazul în care avem un dispozitiv defect, putem modifica aplica ția pentru a omite
indicele obiectului din vectorul de stare.
Un alt avantaj al dezvolt ării de mai sus este verificarea în timp real, prin intermediul
browser -ului, a st ării aplica ției web, dar și al aplica ției Arduino acces ând la vo ia noastr ă
ehome. Ddns.net/final sau ehome. Ddns.net/return_values.

4.2. METODA II
Metoda II permite aplicație să fie accesată numai și numai din rețeaua locală. Această
conexiune presupune modificarea link -urilor la care vor face request -uri atât aplicația
Arduino cât și cea Web. Modificările aduse pot fi făcute strict pe co dul aplicațiilor (înlocuirea
domeniului dinamic cu ip -ul static al computerului pe care ținem serverul) sau pot fi aduse
prin intermediul scripturilor PHP. Folosind această metodă putem controla căsuța noastră fară
a avea acces la internet.

Ca aplica ția Arduino s ă poată funcționa într-o rețea local ă aceasta nu mai poate accesa
domeniul dinamic prezentat mai sus, însă poate accesa fi șierele aflate pe hostul local. Ca s ă
pot de zvolta în aceast ă direc ție am fost nevoit s ă mă loghez pe Router și să acord ip -uri
statice în func ție de MAC pentru host și plăcuța Arduino.
Hostului i -am acordat ip -ul 192.168.100.2/24, pl ăcuței i -am acordat ip -ul
192.168.100.254/24, iar restul dispozit ivelor conectate sunt la libera alegere a router -ului.
Făcând aceast ă modificare am fost nevoit s ă modific în interiorul aplica ției Arduino linkul la
care f ăcea request pentru fi șierul final.
Deși aceast ă metod ă este foarte sigur ă din punct de vedere al securit ății dac ă am dori
să colect ăm date despre starea c ăsuței noastre din afara re țelei nu vom avea acces la ele. Tot
un dezavantaj l -ar reprezenta și delimitarea zonei de acces la re țea. Dac ă nu avem un router
suficient de puternic care s ă ofere o raz ă mare de propagare a p ânzei Wi -fi, nu putem accesa
diferite dispozitive nefiind în spa țiul re țelei noastre. Tot un dezavantaj îl reprezint ă și faptul
că hostul trebuie s ă fie mereu deschis pentru a men ține leg ătura permanent ă între cele dou ă
aplica ții, comp arativ cu metoda 1 la care îi putem ad ăuga un mic serviciu de hosting.

4.3. METODA III
Din punct de vedere al securității este cea mai utilă deoarece permite comunicarea cu
mediul extern acolo unde este nevoie, blochează pe alocuri accesul la obiectele electronice
din casa limitând accesul asupra lor.
Aceast ă metod ă poate fi implementat ă folosind tehnicile de mai sus și se poate
extinde folosind și un serviciu de hosting. Este o metod ă ce ne ofer ă acces la dispozi ție
oricând, de oriu nde, cu restric țiile dorite. Putem acorda și tăia accesul oricui dore ște să
colecteze informa ții de la anumite dispozitive și costurile sunt reduse.

CAPITOLUL 5
5. APLICAȚIA WEB

Aplicația web va fi dezvoltată folosind limbajele de programare HTML, CSS și
JAVA SCRIPT. Ea are ca scop trimiterea unor request -uri HTTP, primite de către server,
înțelese de el, urmând ca în urmarea acestor request -uri HTTP să se modifice fișierul Final
din care citește date în mod continuu plăcuța Arduino.

5.1. LIMBAJ HTML
Limbajul folosit pentru scrierea paginilor web este HTML (HyperText Markup
Language). Acesta nu este un limbaj de programare, ci de "formatare" a textului.
HTML este una di n cele mai importante tehnologii din componen ța World Wide
Web -ului. Creatorul HTML este Tim Berners -Lee, un programator englez. În 1980, Berners –
Lee era un contractor la CERN și a propus un predecesor al HTML -ului, proiectul
ENQUIRE, un program hipertext prin care cercet ătorii CERN puteau s ă redacteze și să
distribuie documente.
În 1989. Berners -Lee a propus un sistem de hipertext pentru Internet, iar pe parcursul
anilor 1990 și 1991, el a dezvoltat software -ul de server și browser pentru HTML, de și CERN
nu a aprobat proiectul în mod formal. Documentul "HTML Tags", scris de Berners -Lee în
octombrie 1991, a reprezentat prima descriere public ă a HTML -ului, însum ând primele 18
elemente din design -ul HTML. Cea mai recent ă versiune a HTML este 5.2, publicat ă pe 16
decembrie 2017.
Pentru a reprezenta și delimita elementele unei pagini web, HTML folose ște așa
numitele marcaje, numite TAG -uri în limba englez ă, care sunt scrise cu semnele de bracket:
„< și >”. Ele reprezint ă comenzi ce spun navigatorului cum s ă interpreteze textul dintre tag –
uri (bold, italic, dac ă se define ște un tabel, o list ă, inserarea unei imagini, etc.) și astfel poate
afișa corespunz ător o pagin ă web.
Majoritatea tag -urilor au dou ă parți: tag -ul de deschidere ce indic ă unde începe textul
și tag-ul de închidere ce spune navigatorului unde se termin ă textul ce trebuie formatat
conform tag -ului respectiv. Tag -urile de închidere încep cu semnul/ (slash) chiar dup ă
simbolul <. De exemplu:

Tag-ul <BODY> indic ă unde începe con ținutul paginii web ,
Iar tag -ul </BODY> indic ă sfârșitul con ținutului paginii web.

În acest fel navigatorul știe că tot ce se afl ă între aceste tag -uri este con ținutul paginii
web și îl va afi șa în fereastra browser -ului.
Cele mai importante tag -uri sunt : <html> (sugereaz ă că este un fi șier HTML) , <head>
(conține informa țiile despre fi șierul nostru și nu sunt f ăcute publice pe pagin ă) <title>
(conține titlul fi șierului) , <body >, <h1> (s ubliniaz ă o rubric ă important ă) <p> (un paragraf).
Limbajul HTML este probabil primul pas pe care îl face fiecare copil în domeniul
program ării, acesta fiind foarte u șor de folosit și de înțeles, a fost introdus în clasele primare
ca suport pentru cursur ile de Tic.
Cu ajutorul lui vom reu și să structur ăm păgânia în mai multe diviziuni ce vor fi
personalizate/stilizate ceva mai t ârziu și vor deveni func ționale cu ajutorul JavaScript.
Majoritatea butoanelor noastre sunt de tipul Switch, checkbox, ce trimit informa ții
către server atunci c ând sunt accesate.

5.2. LIMBAJ CSS
CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui
document HTML ap ărut în anul 1996. Acesta ne permite s ă personaliz ăm fiecare element din
structura unei pagini web cu stilul s ău propriu. Aceste stiluri, fie ele și din documente
separate, pot fi introduse în fișierul HTML folosind tag -urile <style >.
Acest limbaj este foarte u șor de utilizat deoarece pentru remodelarea componentelor
este necesar s ă folosim câteva cuvinte în limba englez ă și să le ad ăugăm propriet ăți. Dac ă
dorim ca elementele unui paragraf s ă fie delimitate de restul p ăgânii cu o bordur ă de o
anumit ă culoare am putea folosi urm ătorul cod:
Bordura {
Border -style: solid ;
Border -color: culoare ;
}
Aceast ă culoare poate fi scris ă folosind cuvinte (red , white, blue etc), dar și folosind
tabelul de culori hexazecimal ce ne ofer ă o gam ă variat ă de culori.
După cum am v ăzut mai sus, codul CSS este foarte u șor de structurat faptul c ă putem lucra cu
fișiere diferite ne ofer ă posibilitatea de a diviza aplica ția în trei par ți importante: structur ă, stil
și func ționalitate.

5.3. LIMBAJ JAVA SCRIPT

JavaScript este un limbaj de programare la baza func ționalit ății paginilor web. Acest
limbaj de programare a ap ărut în anul 1995, creatorul s ău fiind Brendan Eich. Brendan Eich
lucra la Netscape Co mmunications Corporation unde dup ă îmbun ătățirea limbajului de
programare Scheme, ajuns s ă formeze prima versiune JS numit ă inițial Mocha și redenumit ă
în septembrie JavaScript.
JavaScript este un limbaj orientat obiect. În prezent pentru dezvoltarea pag inilor web
se folose ște o tehnic ă numit ă Ajax ce dore ște să facă paginile web s ă comunice cu serverul
fără ca utilizatorii s ă fie nevoi ți să reîncarce paginile.
Limbajul Java script are o mul țime de avantaje. Printre acestea se num ără:
– Flexibilitatea Lim bajului: putem lucra cu variabile ce sunt sau nu declarate de un
anumit tip (spre deosebire de limbajele C ++/Java unde fiecare variabil ă trebuie s ă
aibă un anume tip).
– Poate fi i ntrodus în HTML: codul se afl ă în interiorul documentelor HTML.
– Se bazeaz ă pe obiecte: se bazeaz ă pe instan ță nu pe mo ștenire.
– Este multifunc țional
Acoper ă diferite contexte: putem folosi limbajul at ât pentru partea de Server c ât și
pentru partea de cl ient, aria pentru care a fost conceput.
Java script prezint ă o mul țime de tipuri diferite de date. Exist ă variabile ce pot con ține
valori ce sunt de tipul: Number, String, Boolean, Object, Function, 3 tipuri de obiecte:
Object, Date, Array și dou ă tipuri d e dat ă ce nu necesit ă valori: Undefened, Null.
Codul JavaScript va fi situat în fișierul controller.js, codul Css în design.css, iar codul
HTML în index.html sau home.html.
Codul pe care îl vom scrie în javascript ne va asigura c ă vom putea comunica cu
serverul f ăcând http request -uri far ă echo (far ă să fim direc ționați pe fi șierele serverului). Tot
el ne va permite citirea și actualizarea informa țiilor stocate pe server, astfel încât aplica ție
web s ă fie la curent cu tot ce se întâmplă în spatele ei.

Figura 9 – User Interface -ul aplica ției noastre [25]
Explicația este prevăzută cu mai multe butoane de tip checkbox, care, la acționarea lor
fac niște http request -uri.
Fiecărui buton îi corespunde un id ce va fi folosit la scrierea codului java script.

5.4 COD HTML
6. <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="design.css" >
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" ></script>
<script src="controller.js" type="application/javascript" ></script>
</head>
<body style="background -color:#eaeae1">
<!–########################################### –>
<h1 align="center" ><img src="logo.png" >CASA MEA </h1>
<div style="background -color:#ffffff"><img src="Garaj.png" > <font size="8">
Garaj </font>
<label class="switch" >
<input id="DOOR1" type="checkbox" >
<span class="slider round" ></span>
</label>
</div>

<div style="background -color:#ffffff"><img src="led.png" > <font size="8"> Lumina
afara </font>
<label class="switch" >
<input id="LED1" type="checkbox" >
<span class="slider round"></span>
</label>
</div>

<div style="background -color:#ffffff"><img src="led.png" > <font size="8"> Lumina
bucatarie </font>
<label class="switch" >
<input id="LED2" type="checkbox" >
<span class="slider round" ></span>
</label>
</div>
<!–########################################### –>
<div style="background -color:#ffffff"><img src="Casa.png" > <font size="8"> Usa
intrare </font>
<div align="center" style="background -color:#ffffff"><img
src="senzor.png" ><font size="8">Senzor </font>
<label class="switch" >
<input id="Senzor" type="checkbox" >
<span class="slider round" ></span>
</label>
</div>
<div align="center" style="background -color:#ffffff"><img
src="exclamation.png" ><font size="8">Alarma </font>
<label class="switch" >
<input id="alarma" type="checkbox" >
<span class="slider round" ></span>
</label>
</div>
<div align="center" style="background -color:#ffffff"><img
src="Incuietoare.png" ><font size="8">Stare Usa </font>
<label class="switch" >
<input id="stareUsa" type="checkbox" >
<span class="slider round" ></span>
</label>
</div>
</div>
<!–###################################### ##### –>

<div class=""
"baracontainer" style="background -color:#ffffff" > <img src="led.png" ><font
size="8"> Lumina Camera </font>

<input type="range" min="1" max="100" value="50" class="bara" id="myRange" >
<p>Putere: <span id="demo">50</span> % </p>

</div>

<div style="background -color:#ffffff"><font size="8"> Temperatura </font>
<label class="switch" >
<p><span id="temperatura" ></span></p>
</label>
</div>

<!–########################################### –>
<div style="background -color:#ffffff"><img src="alarm.png" ><font
size="8">Alarma</font>
<!–Aici trebuie JS sa afiseze numai un buton daca alarma e sau nu
declansata : –>
<button class="buttongri buttonalarma" ></button>
<button class="buttonrosu buttonalarma" ></button>
</div>

</body>
</html>
Codul HTML pentru aplicația Web [18]

Acesta este codul final HTML pentru aplicația Web. Fișierele Css, Js au fost introdus e
în secțiunea <head> .

5.5 COD CSS:
Div {
Resize : both;
Overflow : auto;
Border : 2px solid #f0f5f5 ;
Border -bottom : 0px;
Box-sizing : border -box;
Vertical -align : middle ;
}

. Switch {
Position : relative ;
Display : inline -block ;
Width : 57px;
Height : 31px;
Float : right ;
Top: 10px;

}

. Switch input {
/*display: none; */
}

. butonas {
Top: 0;
Left: 0;
Right : 0;
Bottom : 0;
Vertical -align : middle ;
Position : absolute ;
Cursor : pointer ;
Background -color : #8a8a5c ;
Webkit -transition : .3s;
Transition : .3s;

}

. butonas : before {
Position : absolute ;
Content : "";
Height : 19px;
Width : 19px;
Left: 3px;
Bottom : 3px;
Background -color : #f2f2f2 ;
– Webkit -transition : .2s;
Transition : .2s;

}

Input : checked +. butonas {
Background -color : #32CD32 ;
}

Input : focus +. butonas {
Box-shadow : 0 0 1 px #000102 ;
}

Input : checked +. butonas : before {
– Webkit -transform : translateX (38px);
– Ms-transform : translateX (38px);
Transform : translateX (38px);
}

/* Rounded sliders */
. Slider . Round {
Border -radius : 38px;
}

. Slider . Round : before {
Border -radius : 50%;
}

/*<><><><><><><><><><> <><><><><><><><><>*/

/*–––––––––––––––––––––––––––- */

. Barăcontainer {
Width : 100%;
}

. Bară {
– Webkit -appearance : none ;
Width : 30%;
Height : 20px;
Border -radius : 4px;
Background : #f0f5f5 ;
Outline : none ;
Opacity : 0.7;
– Webkit -transition : .1s;
Transition : opacity .1s;
Float : right ;
Position : relative ;
Vertical -align : middle ;
}

. Bară : hover {
Opacity : 1;

}

. Bară : -webkit -slider -thumb {
– Webkit -appearance : none ;
Appearance : none ;
Width : 20px;
Height : 20px;
Border -radius : 50%;
Background : #32CD32 ;
Cursor : pointer ;
}

. Bară : -moz-range -thumb {
Width : 20px;
Height : 20px;
Border -radius : 50%;
Background : #4CAF50 ;
Cursor : pointer ;
}

/*<><><><><><><><><><><><><><><><><><><>*/

/*–––––––––––––––––––––––––––- */

. Buttongri {
Background -color : #f0f5f5 ; /* Gri */
Border : none ;
Color : white ;
Padding : 20px;
Text-align : center ;
Text-decoration : none ;
Display : inline -block ;
Font-size: 16px;
Margin : 4px 2px;
Cursor : pointer ;
Float : right ; }

. Buttonroșu {
Background -color : #f44336 ; /*Roșu*/
Border : none ;
Color : #f2f2f2 ;
Padding : 20px;
Text-align : center ;
Text-decoration : none ;
Display : inline -block ;
Font-size: 16px;
Margin : 4px 2px;
Cursor : pointer ;
Float : right ; }

. Buttonalarma { Border -radius : 50%;
}
Codul CSS pentru aplicația Web [18]

5.6 COD JAVA SCRIPT SI COMENTARIILE PENTRU LINIILE DE COD :
$ (() => {
Const baseUrl = "http://ehomeaa.ddns.net/" ;
//init setup
Function fetchResults () {

$. Ajax ({
Type : "GET" ,
Url: baseUrl + "return_values" ,
Headers : {
'Content -Type' : 'application/x -www -form -urlencoded'
},
Origin : "*",
Success : function (d) {
PopulateComponents (d);
}
});

}/* In Java Script putem av ea prescurtări pentru funcții. În cazul nostru, funcția de pe linia 1
nu are parametrii
Și poate fii prescurtată FAT arrow () => {
Blocul funcției respective.

}
Folosind $ apelăm librăria J Quarey ce se apelează după încărcarea html -ului. Este
necesară așteptarea încărcării
Codului HTML deoarece ne interesează componentele sale.
La fiecare apel al semnului $ facem referință la J Quaerey, iar apelând funcția ajax
putem manipula tipul de
Request către server (în cazul nost ru aveam GET).
După ce apelul Ajax -ului se termină cu succes (primește răspuns de la server) se poate
apela o funcție pe care
O putem crea pe loc (populateComponents (d). Această funcție conține datele primite
din partea serverului.
*/

FetchResults ();

Function populateComponents (results) {
//results = results. ToString ();
$ ("#LED1" ). Prop ( 'checked' , results [ 0] == 1);
$ ("#LED2" ). Prop ( 'checked' , results [ 1] == 1);
$ ("#DOOR1" ). Prop ( 'checked' , results [ 2] == 1);

Var pow = results. Substring (3, 5);
Var temp = results. Substring (5, 7);
$ ("#temperatura" ).html (temp) ;
$ ("#demo" ).html (pow) ;
$ ("#Senzor" ). Prop ( 'checked' , results [ 7] == 1);
$ ("#alarmă" ). Prop ( 'checked' , results [ 8] == 1);
$ ("#stareUsa" ). Prop ( 'checked' , results [ 9] == 1);
}
/* când apelăm $ (#id). ne returnează elementul html ce conține id -ul respectiv și îi putem
modifica valoarea). */
/* funcția de la linia 33 populează elementele cu valori primite după ce serverul returnează cu
succes datele. */
//populateComponents ();

$ ("#LED1" ). On ( 'click' , function () {
SetLed ("LED1" , $ (this). Prop ( 'checked' ));
});

$ ("#LED2" ). On ( 'click' , function () {
SetLed ("LED2" , $ (this). Prop ( 'checked' ));
});

$ ("#DOOR1" ). On ( 'click' , function () {
SetLed ("DOOR1" , $ (this). Prop ( 'checked' ));
});
$ ("#Senzor" ). On ( 'click' , function () {
SetLed ("Senzor" , $ (this). Prop ( 'checked' ));
});
$ ("#alarmă" ). On ( 'click' , function () {
SetLed ("alarmă" , $ (this). Prop ( 'checked' ));
});
$ ("#stareUsa" ). On ( 'click' , function () {
SetLed ("stareUsa" , $ (this). Prop ( 'checked' ));
});
$ ("#myRange" ). On ( 'click' , function () {
Const rangeVal = $ ( this). Val () ;
$ ("#demo" ).html (rangeVal) ;
SetLetPower ("LEDPWM" , rangeVal) ;
});

/*pe fiecare click trimitem un request către server $ (alarmă). On click, () => */
Function setLed (ledNumber , value) {
Const finalUrl = baseUrl + ledNumber + "_" + (value === true? "ON" : "OFF" );

Req_sender (finalUrl , "POST" );
}
//req_sender trimite un request către server de tipul post.
Function setLetPower (ledNumber , value) {
Const finalUrl = baseUrl + ledNumber ;
Req_sender (finalUrl + "? Putere=" + (value == 100? 99: value) , "POST" );

}

Function req_sender (path , method) {
$. Ajax ({
Type : method ,
Url: path ,
Headers : {
'Content -Type' : 'application/x -www -form -urlencoded'
},
Origin : "*"
})
}

});
Codul JavaScript pentru aplica ția Web [19]

Funcționalitate și legătura unilaterală
Pentru ca aplicația să funcționeze corect ea trebuie să:
– Facă http request -uri
– Să primească date în timp real de la server
– Să se updateze în mod constant
Funcția populateComponents primește prin intermediul funcției mai sus implementate
parametrii primiți de la ehomeaa. Ddns.net/return_values. Această funcție este foarte
importantă deoarece ea verifică dacă fiecare buton este în starea în care ar trebui să fie.
Pentru o înțelegere mai bună, trebuie să ne imaginăm că deschidem ușa garajului
nostru. Dacă nu am avea această funcție, în cazul în care repornim aplic ația web butonul din
dreptul garajului ar putea indica faptul că acesta este închisă, iar noi, din neștire, să lăsăm ușa
garajului deschisă fără a acționa asupra să. Funcția populateComponents rezolvă problema
aceasta, deoarece, comunicând cu serverul, ea știe că ușa garajului este deschisă și marchează
ca deschis checkbox -ul din dreptul garajului.
Http request -urile se fac folosind funcția setLED ce accesează base_url
(http://ehomeaa.ddns.net/) + numele componentei dorite + ON (dacă bifăm butonul respecit v)
sau OFF dacă îl debifăm. Dacă vrem să deschidem LED2 se va face un http request de tipul
POST în felul următor: http://ehomeaa.ddns.net/LED2_ON, iar accesând acest link serverul
va reuși să scrie pe poziția a două din Fișierul final 1.

CAPITOLUL 6
6 FINI SAREA PROIECTULUI
Pentru ca proiectul să funcționeze trebuie să facem apeluri GET cu ajutorul plăcuței
Arduino la fișierul Final aflat pe server -ul nostru, să adaugăm funcțiile create la început de
noi și să condiționăm folosirea lor în funcție de necesit ățile noastre.

6.4 CODUL APLICAȚIEI ARDUINO FINAL
// Biblioteci folosite :
#include <SPI.h>
#include <Ethernet.h>
#include <Stepper.h>
#include "Servo.h"

/*#############################################################################*
/
/*#############################################################################*
/

// Variabile globale :

#define RBUFFSIZE 600
/* pentru ETHERNET SHIELD : */

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
const char server[] = "ehomeaa.ddns.net" ;
char link[]= "GET /TEMPERATURA?temperatura=" ;
char link2[]= "GET /TEMPERATURA?temperatura=" ;
IPAddress ip( 192, 168, 0, 236 );
EthernetClient client ;

Servo myservo1 ;
Servo myservo2 ;
int pos = 0;
/* ***************************************** */

// Set the static IP address to use if the DHCP fails to assign
/* Pentru Motorase : */

int index= 0;
char txt[ 50];
int f[10];
int PWM;
bool deschis1 ;
bool deschis2 ;
int temp_global= 0;
/*#############################################################################*
/
/*#############################################################################*
/
/* Functii pe care le apelez : */

// Imi aprinde Ledul de pe PINUL pin cu PUTEREA putere
void aprinderePWM (int pin , int putere) //aprindere cu putere variabilă
{

float pConversie ;
pConversie= 2.55 * putere ;
Serial. Print ( "Se aprinde LEDPW cu puterea:" );
Serial. Print (pConversie) ;
Serial. Println () ;
analogWrite (pin , pConversie) ;
}

// Imi misca motorul ceasornic sau trigonometric in functie de Directie.

// Imi aprinde un LEDul de pe PINUL pin daca VALOAREA ESTE 1 sau 0
void aprinde_led ( int pin , char valoare)
{
if(valoare == '1')
{
digitalWrite(pin , HIGH);
Serial.print( "LEDUL de pe pinul " );
Serial.print(pin) ;
Serial.print( " este aprins " );
Serial.println() ;
}
else if(valoare== '0')
{
digitalWrite(pin , LOW);

Serial.print( "LEDUL de pe pinul " );
Serial.print(pin) ;
Serial.print( " este stins " );
Serial.println() ;
}
}

// Imi calculeaza Temperatura
Int citesteTemperaturaInCelsius (int count , int pin)
{
float tMed = 0;
float sTemp = 0;
for (int i = 0; i < count ; i++) {
int citire = analogRead (pin) ;
float voltage = citire * 5.0;
voltage/=1024.0;
float temperatureCelsius = (voltage – 0.5) * 100;
sTemp += sTemp + temperatureCelsius ;
}
return int (sTemp/ (float) count) ;
}

//Imi face un http request pentru a face update la temperatura in aplicatie
void temprq(char t[ 100])
{
while (!client.connect(server , 80)) {
Serial.println( "Incercam sa ne conectam" );
}
Serial.println( "connected" );
// Make a HTTP request:
client.println(t) ;
client.println() ;
client.stop() ;
}

void rotire_servo1(int directie)
{
if (direcție== 1)
{

for (p = 10; p < 150; p += 1)
{
myservo1.Write(p) ;

}

}
else
for (p = 150; p>=10; p-=1)
{
myservo1.Write (p) ;

}

}
void rotire_servo2(int dire ctie)
{
if (direcție== 1)
{

for (p = 10; p < 150; p += 1)
{
myservo2.Write(p) ;

}

}
else
for (p = 150; p>=10; p-=1)
{
myservo2.Write(p) ;

}

}

/*#############################################################################*
/
/*#############################################################################*
/
void setup() {

pinMode(A1 , INPUT );
pinMode(A0 , INPUT); // Temperatura
pinMode( 2, OUTPUT); // Lumina afara
pinMode( 3, OUTPUT); // Lumina PWM
pinMode( 4, OUTPUT); // Lumina Bucatarie
Ethernet.begin(mac , ip);
myservo1.attach( 8);
myservo2.attach( 9);
Serial.begin( 9600);
deschis1=false;
deschis2= false;
delay(1000);
Serial.println( "connecting…" );

temp_global= readTempInCelsius( 10,0);
char temp[ 16];
itoa(temp_global , temp, 10);

strcat(link2 ,temp);
temprq(link2) ;
strcpy(link2 ,link);

while(!client.connect(server , 80)) {
Serial.println( "try…." );
}
Serial.println( "connected" );
client.println( "GET /Final" );
Serial.println( "SETUP###" );
client.println() ;

}
/*#################################################### #########################*
/
/*#############################################################################*
/

void loop() {

/* citirea rezultatelor din Final : */
index=0;
while (client.available()> 0) {
char c = client.read() ;
txt[index++]=c ;
}
Serial.println( "Textul este :" );
Serial.println(txt) ;
Serial.println( "############################" );
/*……………………………….. */
aprinde_led( 2,txt[0]);
aprinde_led( 4,txt[1]);
/* Deschiderea usii de la intrare : */
if( (txt[2] =='1') && (deschis== false))
{
rotire_servo1( 1);
deschis1= true;
delay(100);
//deschid usa si semnalez ca e deschisa
}

if( (txt[2] =='0') && (deschis== true))
{
rotire_servo1( 0);
deschis1= false;

// inchid usa si semnalez ca e inchisa
}
/*……………………………….. */
/* Aprinderea becului cu putere reglabila : */

PWM= (txt[ 3]-'0')*10 + (txt[4]-'0');
aprinderePWM( 3,PWM);
Serial.println() ;Serial.println() ;Serial.println() ;
/*……………………………….. */
int valSenzor=digitalRead (A1) ;
if (valSenzor== 0)
{
if( (txt[9] =='1') && (deschis2== false))
{
rotire_servo2( 1);
deschis= true;
delay(100);
//deschid usa si semnalez ca e deschisa
}

}
else
if( (txt[9] =='0') && (deschis2== true))
{
rotire_servo2( 0);
deschis= false;

// inchid usa si semnalez ca e inchisa
}
delay (200);

int tlocal ;
tlocal= readTempInCelsius( 10,0);
if( (tlocal >= (temp_global + 1 )) || (tlocal<=temp_global -1 ))
{
client.stop() ;
char temp[ 16];
itoa(tlocal , temp, 10);
strcat(link2 ,tlocal);
temprq(link2) ;
strcpy(link2 ,link);
temp_global=tlocal ;

}

if (!client.connected()) {
Serial.println( "Mergem mai departe " );

client.stop() ;
while(!client.connect(server , 80)) {
Serial.println( "try…." );
}
Serial.println( "connected" );
client.println( "GET /Final" );
Serial.println( "LOOP###" );
client.println() ;

}
// put your main code here, to run repeatedly:

}
Codul final al aplica ției Arduino
După cum se observă aplicația Arduino conține toate funcțiile folosite de noi fără să
comunicăm cu serverul.

6.5 TRIMITEREA INFORMARIEI CATRE APLICAȚIILR WEB
6.5.1 TEMPERATURĂ
Înainte de a manipula componentele electronice aflate în căsuța noastră suntem
nevoiți să afișam în aplicația web valoare temperaturii citită de senzorul nostru. Pentru a face
acest lucru apelăm funcția de citire a temperaturii (readTempInCelsius) și face m un HTTP
request folosind funcția temprq. Funcția respectivă va apela ehomeaa. Ddns.net/Temperatura?
Temperatura=temperatura_citita_de_senzor, care va fi analizată de server folosind scriptul
PHP TEMPERATURA, iar în urma acestui apel valoarea citită de se nzorul nostru va fi
ridicată în fișierul Final. Aplicația web prin intermediul funcției populateComponents preia
din acest fișier valoarea temperaturii și îi face upload în căsuța destinată valorii sale. Acest

proces de trimitere a temperaturii îl facem la startul aplicației Arduino deoarece în aplicația
web nu este postată nici o temperatură momentan. După acest eveniment salvăm valoarea
temperaturii citită de Arduino într -o variabilă numită temp_global (temperatura globală)
deoarece vom fi nevoiți să arăt am mereu temperatura corectă citită în timp real. Ca să nu
facem foarte multe request -uri HTTP, am decis să facem le facem cu temperatura citită curent
numai în cazul în care aceasta depășește cu un grad temperatura globală. În acest caz reluăm
pașii de ma i sus, iar noua temperatură va deveni temperatura globală (temp_global).
6.6 PRIMIREA INFORMAȚIILOR DE LA SERVER

6.6.1 FIȘIERUL FINAL , INTERPRETAREA DATELOR SI MANIPULAREA
OBIECTELOR
După popularea temperaturii în aplicația web suntem nevoiți să vedem ce fel de
activități trebuie să le dăm obiectelor noastre electronice. Spuneam mai sus că în fișierul
Final avem un șir de caractere construit astfel încât să știm cum să acționam asupra fiecărei
componente aflate în casa noastră. Pentru a avea acces la fișierul Final trebuie să facem un
request HTTP de tipul GET asupra să, iar conținutul său să îl salvăm într -o variabilă (în cazul
nostru variabila unde salvăm conținutul acestui fișier se numește txt). După citirea acestui
text putem trece la controlul aparaturii electr onice.
6.6.2 TRIMITEREA SARCINILOR
Pentru a trimite sarcini obiectelor noastre ne vom folosi într -un mod constructiv de
mai multe IF -uri. Aceste interogări sunt făcute pentru a vedea ce fel de acțiuni trebuie să
producă plăcuța Arduino în funcție de informațiile primite de la server. Pentru a a aprinde
LEDurile de afară interogăm textul txt încercând să aflăm dacă pe prima să poziție se afla
valoarea 1. Pentru a vedea dacă trebuie să aprindem becurile din bucătărie interogăm textul
ca să vedem dacă pe poziția a d oua a să se afla 1 și așa mai departe.
O mică problemă intervine în cazul motorașelor destinate să deschidă ușile casei
noastre. Aceste motorașe, controlate greșit după tipul de interogare, se pot roti la infinit.
Tocmai de aceea este bine să înțelegem f aptul că ușa trebuie deschisă numai dacă primesc
această comandă de la server și ea este închisă. Serverul nostru arată ce comenzi a făcut
aplicația web însă nu a fost creat un script care să ne spună starea ușilor. Pentru a salva starea
lor trebuie să dăm naștere unei variabile noi, de tip boolean, menită să fie TRUE dacă ușa
este deschisă și FALSE dacă ea este închisă. Această variabilă se numește deschis în codul de
mai sus. Dacă vrem să deschide ușa garajului vor fi necesare două interogări:
– Dacă pe poziția a treia se află 1
– Dacă variabila deschis este FALSE
În cazul de față aplicația web ne furnizează dorința de a deschide ușa garajului noi
trebuie să acționam motorașele numai în cazul în care ușa este închisă. În caz contrar,
motorașele ar face numă rul de pași destinate deschiderii ușii până când în aplicația noastră
vom face un al request pentru includerea lor, iar apoi ele se vor mișca la infinit până la

deconectarea de la sursă sau la un alt request. Folosind variabila salvată de aplicația Arduino
scăpam de această problemă.
La terminarea analizei șirului de caractere va fi necesar un nou HTTP request pentru
obținerea valorilor salvate pe server în timp real. Aplicația noastră citește constant din fișierul
Final și așteaptă modificare pe care să l e execute.
Implementarea fizic ă a acestui proiect este reprezentat ă de o machet ă construit ă din
Lego prev ăzută cu o u șă de garaj, o u șă de intrare, o gradin ă cu becule țe, un bec cu putere
reglabil ă pentru buc ătărie, un senzor de temperatur ă pentru citirea informa țiilor din mediul
extern și un senzor de mi șcare capabil s ă recunoasc ă dacă cineva s -a apropiat de u șa de la
intrare.
Aceast ă machet ă are o podea pe dou ă nivele astfel încât să poată încăpea to ate
dispozitivele electronice sub ea. Toate componentele machetei sunt conectate la un
breadboard, iar controlul machetei se poate face at ât din laptop c ât și de pe mobil acces ând
aplica ția web.

Figure 10- Macheta

Figure 11- Functionarea led-urilor

Figure 12 – Functionarea senzorului de miscare

Figure 13- Macheta in functiune

CAPITOLUL 7
7. CONCLUZII

În perioada dezvolt ării aplica ției am întâmpinat mai multe p robleme ce țin at ât de
partea software c ât și din domeniul electronic. Imediat dup ă configurarea serverului am
constatat c ă atât plăcută Arduino c ât și alte dispozitive client diferite de host nu se puteau
conecta la server.
Pentru a rezolva aceast ă proble mă am fost nevoit s ă modific din WAMP fi șierul
httpd -vhost. Conf modific ând sec țiunea:

<VirtualHost *:80>
ServerName localhost
DocumentRoot c:/wamp/www
<Directory "c:/wamp/www/">
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Require local
</Directory>
</VirtualHost>
Parte a fișierului httpd -vhost.conf WAMP Apache [20]
Cu :
# Virtual Hosts
#
<VirtualHost *: 80>
ServerName localhost
ServerAlias localhost
DocumentRoot "${INSTALL_DIR}/www"
<Directory "${INSTALL_DIR}/www/" >
Options +Indexes +Includes +FollowSymLinks +MultiViews
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
Parte a fișierului httpd -vhost.conf WAMP Apache [20]
. După rezolvarea acestui aspect am putut conecta orice dispozitv at ât din re țeaua
local ă cât si din afara re țelei la serverul meu.
O alta problem ă soft a fost întampinat ă atunci cand placu ța Arduino nu se putea face
nici un fel de HTTP request. Dup ă diferite teste am observat ca exist ă anumite momente c ând
nu este online. Aceasta problema apare atunci cand Ip -ul setat de noi in interiorul codului este
diferit fa ță de Ip -ul generat de router. Pentru a rezolva problema am fost nevoit sa ii ofer un
ip static din dhcp in func ție de MAC -ul plăcuței Arduino.

În timpul testelor aplica ției finale am constatat că senzorii și motora șele nu
funcționeaz ă corect. Aceste dispozitive electronice sunt conectat mereu la pinul de 5V al
plăcii Arduino. Din cauza faptului c ă motora șele consum ă foarte mult curent am fost nevoit
să folosesc o surs ă extern ă pentru a alimenta atât motora șele cât și senzorul de mi șcare.
Pentru a putea transporta și folosi pl ăcuța cu aplica ția Arduino oriunde în afara re țelei
locale am fost nevoit s ă achizi ționez un router ce serve ște ca furnizor de Internet și aloc ă
mereu Ip static pl ăcuței no astre.
Din punct de vedere al costurilor, c ăsuța poate fi automatizat ă la costuri relative
reduse. În func ție de locul cump ărării produselor aceasta poate fi mai scump ă sau mai ieftin ă.
Voi prezenta în tabelul urm ător cea mai ieftin ă variant ă cât și varian ta implementat ă de mine.

Table 2 – Tabel ilustrând varianta mea
Produs Furnizor Cost / RON Nr.Obiecte Total
Arduino Uno Robofun 146 1 146
Arduino
Ethernet Shield Robofun 135 1 135
LED cu
rezistență
internă Robofun 4 12 48
Servo Motor Robofun 69 2 138
Cabluri Mama –
Mama/Tata –
tata Robofun 0.40 70 28
Senzor
Temperatură Robofun 14 1 14
Breadboard Robofun 5 1 5
Sursă
Alimentare
Externă TehnoElectric 5 1 20
Senzor Mișcare Robofun 36 1 36
570

Produs Furnizor Cost / RON Nr.Obiecte Total
Arduino Uno Arduino Store 92 1 92
Arduino
Wifi – Shield Arduino Store 74 1 74
LED cu
rezistență
internă Robofun 4 12 48
Servo Motor Olimex 35 2 70
Cabluri Mama –
Mama/Tata –
tata Robofun 0.40 70 28
Senzor
Temperatură Robofun 14 1 14
Breadboard Robofun 5 1 5
Sursă
Alimentare
Externă TehnoElectric 5 1 20
Senzor Mișcare Robofun 36 1 36
387

CAPITOLUL 8
8. BIBLIOGRAFIE

1. Crearea paginilor web -limbaj HTML – http://vega.unitbv.ro/~jipa/ui/web/html.html
2. Cascading style sheets – https://ro.wikipedia.org/wiki/Cascading_Style_Sheets
3. Servo motor – https://www.olimex.com/Products/RobotParts/ServoMotors/MS -6-40/
4. Arduino uno rev 3 – https://store.arduino.cc/arduino -uno-rev3
5. Arduino ethernet shield – https://store.arduino.cc/arduino -ethernet -shield -2
6. Internet of things – https://en.wikipedia.org/wiki /Internet_of_things
7. Java Script – https://en.wikipedia.org/wiki/JavaScript
8. NoIp/DynamicDNS – https://www.noip.com/
9. Arduino – https://www.robofun.ro/
10. Model Client , Internet , Server –
https://en.wikipedia.org/wiki/Client%E2%80%93server_model#/media/File:Client –
server -model.svg
11. Cod pentru aprinderea unui LED folosind Arduino –
https://www.robofun.ro/electronice/led/led -brick -albastru
12. Cod pentru aprinderea unui LED cu putere reglabila folosind Arduino –
https://blog.robofun. ro/2014/08/02/tutorial -arduino -3-proiecte -simple -cu-arduino/
13. Cod pentru citirea temperaturii folosind Arduino – https://www.robofun.ro/senzor –
temperatura -brick?s earch=senzor%20temperatura
14. Cod pentru folosirea unui sensor de mișcare –
https://www.robofun.ro/senzor_distanta_sharp_GP2Y0D805Z0F_5cm?search=senzor
%20d istanta
15. Cod pentru folosirea unui Servo Motor folosind Arduino –
https://www.robofun.ro/servomotor_9g?search=servo%20motor
16. Cod pentru conectarea Arduino la internet și folosirea unui apel de tip GET –
https://www.arduino.cc/en/Tutorial/WebClient
17. ”PHP Objects, Patterns and Practice ” , Matt Zandstra
18. Codurile pentru CSS si HTML – https://www.w3schools.com/
19. “JavaScript and JQuery : Interactive Front -End Web Development Hardcover ”, Jon
Duckett, Gilles Ruppert, Jack Moore

20. Rezolvare Acces Dispozitive : http://www.betterhostreview.com/access -wamp -server –
local -network.html
21. “Cascadin Style Sheets: The Definitive Guide ” , Eric Meyer
22. “JavaScript: The Definitive Guide, 6th Edition ” , David Flanagan
23. “Exploring Arduino:Tools and Techniques for Engineering Wizardry 1st Edition ” ,
Jeremy Blum
24. Iconi ță server : https://www.iconfinder.com/icons/298866/server_icon#size=256 ,
Iconiță mobil :
https://www.iconfinder.com/icons/259286/client_copy_mobile_non_service_specific_
icon#size=256 ,
Iconiță computer :
https://www.iconfinder.com/icons/259291/client_copy_non_service_specific_icon#si
ze=256 ,
Iconiță router : https://www.iconfinder.com/icons/173090/router_icon#size=256 ,
Iconiță motoraș : https://www.iconfinder.com/icons/85227/wheel_icon#size=48 ,
Iconiță senzor : https://www.iconfinder.com/icons/430077/fi_wi_wifi_icon#size=256
25. Iconițele aplicației web :
GARAJ: Icon made by [Freepik] from www .flaticon.com
CASA: Icon made by [ Freepik] from www.flaticon.com
Exclamatie: Icon made by [Smashicons] from www.flaticon.com
Led: Icon made by [ Dave Gandy] from www.flaticon.com
Termometru : Icon made by [ Yannick] from www.flaticon.com
26. Poză plăcuță Arduino Ethernetshield : https://qph.ec.quoracdn.net/main -qimg –
3f0456093c48df2b33e6628030c6436f -c
27. Poză Arduino Uno + EthernetShield : http://www.geeetech.com/blog/wp –
content/uploads/2012/04/Ethernet01.jpg