Programarea ESP32 pentru IoT 9786062809041

Citation preview

---

Colecţia ŞTIINŢE

EXACTE

Redactor: Gheorghe Iovan Tehnoredactor. Ameluţa Vişan Coperta: Monica Balaban

de Consiliul Naţional al Cercetării Ştiinţifice (C.N.C.S.) şi inclusă de Consiliul de Atestare a Titlurilor, Diplomelor şi Certificatelor Universitare (C.N.A.T.D.C.U.) în categoria editurilor de prestigiu recunoscut Editură recunoscută

Naţional

::{~~;~,\~~~tecii

Naţionale a Rominiei

Programarea ESP32 pentru IoT / Sever Spânulescu. - Bucureşti : Editura Universitară, 2019 Conţine bibliografie ISBN 978-606-28-0904-1

004

DOI: (Digital Object Identifier): I0.5682/9786062809041

© Toate drepturile asupra acestei

lucrări

sunt rezervate autorului

Copyright © 2019 Editura Universitară Editor: Vasile Muscalu B-dul. N. Bălcescu nr. 27-33, Sector I, Bucureşti Tel.: 021.315.32.47 www.editurauniversitara.ro e-mail: [email protected]

Distribuţie:

tel.: 021.315.32.47 / 07217 CARTE/ 0745.200.357 [email protected] O.P. 15, C.P. 35, Bucureşti www.editurauniversitara.ro

( -n11.f"'•1i..; V L_\._l

__

INTRODUCERE...................................................................................

9

PARTEA I. Comunicaţii IOT folosind tehnologii HT\'IL/JavaScript clasice .............................................................................................

11

I.

2.

3.

4.

PREZENTAREA GEl'iERALÂ A C\RŢII ŞI A MODI.:LELOR HARDWARE...................................................... I.I. Obiectinle generale ale lucrării.......................................... 1.2. Structura şi metodica utilizării lucrării.............................. 1.3. Implementarea hardware. Cuplarea intrărilor şi ieşirilor modulului ESP32.................................................... 1.4. Exemple de plăci cu microcontrolere ESP ......................... DEZYOLTAREA APLICAŢIILOR IOT CU ESP32 / ESP8266 I.:TILIZÂ1'D HT:\IL ......................... 2.l. Instalarea mediului Arduino pentru microcontrolere ESP ................... - .............................................................. 2.2. Realizarea unuiţserver simplu cu microcontroler ESP32. 2.3. Alocarea unei adrese statice pentru accesul din exterior.. 2.4. Aplicaţie pentru Android folosind MIT App Inventor..... COMA"!DA l',UJ PORT GPIO PRI', \YIFI ............................ 3.1. Realizarea unei pagini web pentru transmitere de comenzi dintr-un bro\\'·ser.................................................... 3.2. Realizarea unei aplicatii mobile pentru comanda ESP32 folosind l\.IJT App Inventor................................................. 3.3. Ltilizarea unui port diferit de 80 ........................................ TRA:S-SMITEREA COME:S-ZILOR ANALOGICE ŞI DIGITALE CÂTRE U:S- SERVER ESP32 D11'TR-O APLICAŢIE MIT APP 11'YEl'iTOR........................................... 4.1. Principiile generale ale transmisiilor analogice prin canale digitale........................................................................ 4.2. Realizarea com:ersiei digital-analogice prin P\V\1 în .!\.rduino ID,........................................................................... 4.3. Comanda analogică în aplicaţia l\HT App Inventor......... 5

12 13 18 19 20 26 26 27 29 34 37 37 40 43

47 47 48 52

5.

CO\1UNICAŢIE BIDIRECŢIONALÂ Î"'ITRE CLIENT ŞI

SERVER UTILIZÂN D MIT APP INVENTOR......................... bidirecţionale comunicaţiile privind 5.1. Cerinţe 5.2.

client-server........................................................................... Retmprospătarea periodică a paginii web prin MIT App Inventor.........................................................................

pentru comunicaţii bidirecţionale folosind MIT App Inventor ................................................. 5.4. Programu l complet ESP32 pentru comunicar ea bidirecţională cu un client MIT App Inventor... ............... PRIN BIDIRECŢIONALÂ 6. TRANSM ITERE . AJAX....... OGIA INTERME DIUL PAGINII WEB. TEHNOL 6.1. :\ietode şi obiecte ale tehnologiei AJAX............................. 6.2. Exemplu de program pentru comanda unei ieşiri digitale cu transmisie prin AJAX........................................ 6.3. Exemplu de program pentru controlul a două ieşiri digitale cu transmisie AJAX................................................ 7. REÎMPRO SP.,\TARE A AUTOMA TÂ A PAGINII \VEB PRIN AJAX.................................................................................... 7.1. Principiile reâmprospătării automate ................................ 7.2. Exemplu de program cu reîmprospătare automată prin AJAX..................................................................................... 7.3. Controlul stării digitale şi citirea valorilor digitale şi analogice prin AJAX, cu reîmprospătare........................... 7.4. Program pentru controlul a două stări logice şi citirea a două valori logice şi o valoare analogică, folosind AJAX, cu reîmprospătare ................................................................ 8. MO:"!ITORIZAREA ŞI CO:\IAND A HT'.\IL/JS/CSS A VALORIL OR ANALOG ICE ....................................................... 8.1. Elemente de tip Progressb ar proiectate prin CSS............. 8.2. Exemplu de program pentru monitoriza rea a două intrări digitale şi a uneia analogice şi controlul a două ieşiri digitale.......................................................................... 9. COMENZ I DE LA CLIE"'IT LA SERVER. CU CONFIRM ARE DE PRIMIRE.................................................... 9.1. Asigurare a coerenţei în reţelele perturbate....................... 9.2. Program cu confirmar e/retransm itere a comenzilo r pentru două ieşiri digitale şi monitoriza rea a patru intrări digitale şi o intrare analogică.................................. 9.3. Elementel e analogice de comandă de tip range ................. 5.3.

Aplicaţie

55 55

56

completă

6

58

61 64 64 69 73 78 78 79 82

87 94 94

96 100 100

102 109

10. PROGRAMAREA ESP8266/t:WlJ. FOLOSIND MEDIUL DE DEZVOLTARE ESP-IDF +ECLIPSE...................................... 10.1. Instalarea mediului de dezvoltare ESP-IDF şi setarea Toolchain ............................................................................... 10.2. Testarea unui proiect exemplu............................................ 10.3. Instalarea şi configurarea Eclipse...................................... PARTEA 11.

Comunicaţiile

loT utilizând tehnologia .:\IQTT .........

11. UTILIZAREA TEHNOLOGIEI MQTT:\IESSAGE QUEUl'.'.G TELEMETRY TRAl'iSPORT .................................. I 1.1. Prezentare generală a tehnologiei MQTT .......................... 11.2. Instalarea şi testarea bibliotecii PubSubClient.................. 12. EXEMPLE DE APLICAŢII DEDICATE TEHNOLOGIEI MQTT ............................................................................................. 12.1. Instalarea şi utilizarea aplicaţiei HelloloT ......................... 12.2. Comenzi ale unor ieşiri digitale ale modulului ESP32 ...... 12.3. Comanda analogică prin P\Y.'.\1........................................... 12.4. Citire intrări digitale şi analogice....................................... 13. PROG~MAREA co,1U:\"ICAŢIILOR MQTT LTILIZAND l\lEDILL DE DEZVOLTARE :\ODE-RED ........ 13.1. Instalarea :\ode-Red în \Vindows ....................................... 13.2. Instalare mosquitto în windows .......................................... 13.3. Realizarea de comunicaţii ~IQTT prin ~ode-Red............ 13.4. Programare in ~ode-Red..................................................... 14. co,1ANDA U:\"OR IEŞIRI UTILIZÂND l'iODE-RED ŞI MOSQt;ITTO PE Ul'i CO:\IPUTER \VII\DOWS...................... 14.1. Comanda ieşirilor digitale................................................... 14.2. Controlul unei ieşiri analogice folosind Node-Red............ 15. MONITORIZAREA U'\OR ll'iTRÂRI FOLOSl'.'.D !\ODE-RED ŞI MOSQUITTO PE Ul'i CALCULATOR Wl'iDO\VS..................................................................................... 15.1. .\1onitorizarea intrărilor analogice folosind I\ode-Red..... 15.2. :\1onitorizarea unor intrări digitale folosind ~ode-Red.... :\"ODE-RED ŞI A BROKERULUI 16. LTILIZAREA MOSQLITTO PE RASPBERRY PI............................................ 16.J. Instalare Raspbian pe Raspberry Pi................................... 16.2. Instalare broker .\fosquitto.................................................. 16.3. Instalarea :'\"ode-Red............................................................. 16.4. Accesul brokerului prin Internet........................................ 16.5. Instalarea .'iode-Red Dashboard pe Raspberry Pi............ 7

119 119 121 123 127 128 129 135 138 138 139 143 147 155 156 157 158 158 160 160 170

173 174 178 188 188 189 190 190 193

PARTEA lll. Comunicaţii prin Internet folosind tehnolog ia WebSockets............................................................................................ 199 17. UTILIZA REA TEHNO LOGIEI WEBSO CKETS PE ESP32 .. 17. I. Caracter istici generale ale tehnologiei WebSock ets .......... 17.2. Transmi sia unei comenzi către o ieşire digitală................. 17.3. Comenzi pentru trei ieşiri digitale...................................... 17.4. Comenzi analogice ale ieşirilor, utilizând tehnica PWM .. 18. MONITO RIZARE A UNOR INTRĂRI PRIN TEHNO LOGIA WEBSO CKETS ............................................................................. 18.1. Monitori zarea unor intrări digitale prin \\-'ebSockets...... 18.2. Monitori zarea unei intrări analogice prin \Vebsockets .... 18.3. Afişarea unei valori anal°'\~c-t prin text şi progress bar ..... 18.4. Afişarea unei valori analogice prin text, progress bar şi gauge ...................................................................................... 18.5. Afişarea unei valori analogice prin text, progress bar, Gauge şi Line Chart ............................................................. 8

200 202 205 212 216 224 224 231 234 237 242

Introducere

În ultimele decenii, din ce în cc mai multe obiecte din industrie, chiar de larg consum au fost dotate cu diverse aplicaţii de automatizare, electronică şi informatică. Multe dintre hotspoturile acestor sisteme includ deja inteligenţă artificială locală şi numeroase facilităţi pentru a ajuta inteligenţa umană. Treptat, în fabricile moderne, tot mai multe subsisteme au fost interconectate, schimbând informaţiile şi îmbunătăţind considerabil productivitatea prin astfel de comunicaţii de la maşină la maşină (M2M). În acelaşi timp, reţeaua globală de comunicaţii - Internetul - a crescut şi s-a dezvoltat, conectând dispozitive desktop, laptop, tablete, dispozitive srnartphone, în special utilizatori umani. Deci, pe de o parte, au existat maşini care comunicau la nivel local şi, pe de altă parte, oameni care comunicau la nivel global. Următorul pas a fost, desigur, fuziunea tuturor acestor schimburi de informaţii într-un nou nivel - Internetul Lucrurilor - IoT. Prin aceasta, dispozitivele asistate de calculator au câştigat accesul global prin intennediul internetului. iar utilizatorii umani au avut acces la monitorizarea şi comandarea acestora la orice distanţă. Analiza celor două tipuri de capete ale canalelor de transmisie a infonnaţiilor prc7.intă diferenţe de viteză foarte mari: dispozitivele informatice sunt cu multe ordine de viteză mai rapide decât operatorii umani. Cu toate acestea, se pare că numai începând cu anul 2009 raportul numeric a devenit favorabil primei categorii, astfel încât un domeniu foarte larg de conexiune la Internet este încă deschis. Se estimează că numărul componentelor loT va ajunge la 12 trilioane în 2030, ceea ce va genera probabil o a patra revoluţie industrială, numită deja „Industry 4.0". O sarcină uriaşă, care necesită specialişti cu înaltă calificare şi soluţii simple şi cât mai puţin costisitoare. Un pas important în această direcţie a fost apariţia unor microcontrolere cu conexiuni Wifi foarte ieftine, produse de Espressif Systems, care pennit calificarea rapidă independentă a celor care au deja cunoştinţe clasice despre IT şi doresc să facă parte din acest proces. comerţ, infrastructură şi

9

=.,.

__ce·c

-

",~-;._

Mechanization, water power, steam power

Mass production, assembly line, electricity

Compute r and

Cyber Physical

automati on

Systems

figura 1.1. Ilustrarea conceptului „Industr y 4.0", industriale

arătând

cele 4

revoluţii

carte nu are intenţia de a trata compreh ensiv teoria, ci de a oferi soluţii practice şi pe deplin funcţionale, sub forma unor program e complete. O mare parte din teorie este deja cunoscută de unii dintre cititori, sau poate fi găsită în multe alte manuale. Dar program ele prezenta te aici includ un mare efort şi au multe soluţii originale urmărind una dintre paradigm ele de bază ale programării: _,Kecp i(o)t simple" . toate Şi - cel mai importa nt lucru pentru o astfel de carte program ele au fost deja verificate de către terţi, în cazul de faţă studenţi de la lJnîvesi tatea Hyperio n. 10 Această

Partea I. Comunicati' i loT folosind t tehnologii HTML/JavaScrip clasice

I. Prezentarea hardware

generală

a

cărţii şi

i .1. Obiecti,·ele generale aie Această

lucrării

mai multe soluţii simple şi practice pentru implementarea comunicaţiilor automate de date între dispozitivele conectate la Internet. Acestea sunt plasate în categoria Internet of Thîngs (JoT) şi Machine to Machine (M2M), a căror sferă de aplicare se extinde continuu şi ridică un interes crescând atât pentru bunurile industriale, cât şi pentru cele de consum. Lucrarea intenţionează să detalieze astfel de aplicaţii complete, pornind de la cunoştinţe de nivel intermediar, cum ar fi programarea C (pc medii precum Arduino IDE şi ESP-IDF), HTML / CSS şi JavaScript, care sunt completate de tehnologii modeme precum Ajax, MQTT, Node.js, AngularJS şi WebSockets, prezentate corespunzător pentru aceste aplicaţii. Comunicaţiile dintre dispozitivele cuplate la Internet exemplificate mai jos vor fi realizate între un dispozitiv de interfaţă de proces şi un dispozitiv de comandă/monitor. Dispozitivul de Interfaţă primeşte date de intrare de la senzorii traductoare~ şi generează date de ieşire către elementele de execuţie/ actoatoare. In acest scop, vor fi utilizate module cu posibilităţi de conectare WiFi, de tip ESP8266 sau ESP32, care au mai multe avantaje: • volum redus (Figura I. L Figura 1.4, Figura 1.7); • consum redus, cu posibilităţi de "sleep" şi funcţionare pe baterie; • nu necesită cabluri Ethernet; • preţ scăzut; • număr suficient de canale digitale şi analogice de intrare şi ieşire; • opţiuni simple de programare, care utilizează mediul IDE Arduino. Evident, pot fi folosite şi alte module, care rulează programe cu algoritmi identici cu cei prezentaţi aici. În prima parte a lucrării, utilizând tehnologiile web clasice, dispo7itivul de interfaţă acţionează în general ca un server, astfel că este cel care ger:erează pagina web şi răspunde cererilor de la aplicaţii client. Jn partea a doua a lucrării, folosind tehnologiile MQTT, un server dedicat rulează un program de recepţie şi distribuire a mesajelor cu diverse subiecte şi conţinut (,,payload"), astfel încât să poată crea o reţea mult mai carte

prezintă

a 1nodulclor

13

complexă, cu clienţi echivalenţi, fiecare cu funcţii flexibile, cu sau fără

interventie umană. Î~ ultima parte a lucrării sunt prezentate exemple de implementare a tehnologiei WebSockets care oferă legături bidirecţionale de mare viteză client-server. Dispozitivul de comandă/monitor poate fi un PC, o tabletă sau chiar un smartphone, care rulează o aplicaţie dedicată sau pagina web creată de server. Exemple de interfeţe grafice realizate în timpul lucrării sunt prezentate în imaginile următoare, cu diverse complexităţi şi tehnologii (Figurile 1.1-1.6). o

192.168.1.240

.

o

C

6i)

192.168.1.240.-

X

*

ESP32 servei· cu transfer AJA_X

L

L_glgîtel 1 ONÎ O;g,tol_l OFF

!

Dig11:al_J transmis : NA

Figura 1.1. Pagina web de comandă a unei ieşiri digitale (HTML) I

X

5554: Examples-> ESP32 DEVKIT Vl->WiFi->Simple WiFi Server; 2. Se copiază instrucţiunile standard din minimul necesar ca în exemplul din Figura 2.1;

porţiunea

de

iniţializare,

cu

3. În loop () se introduc instrucţiunile pentru căutarea clientului şi instrucţiunile pentru scrierea textului HTML Aceasta se transmite cu linii folosind instrucţiunea client.println (" .... "). Un exemplu de bucla principală pentru o pagină web creată de server este în Figura 2.1; Prin încărcarea programului în Esp32 şi executarea acestuia, modulul se va conecta la router cu SSID-ul şi parola specificată în program. Sistemul DHCP va aloca o adresă IP disponibilă, care este afişată pe Serial Monitor in Arduino IDE (utilizând viteza specificată în program, 115200 bps).

27

o

-·G slcetch_ncvOSa I Arduinc 1.8.5

X

tile fdrt: âlc1:tch Iools .!:!cip

,., , ::-:=-~=-= ::•:.!":.Et.

cJ";~~ • S3id--Eţ!J .. ; pa3:~= "as:1: .. z3i+ ... :

::~-.1=•

;;i:1:--c::-.·;;r server (i:0); !i

, S --.-c-:.ct

,:,,::::Ot..ţ- ()

{

St!rial.r,~"~='-(11S200!;

:! ... );

2:=

4

2j

c ! :~n~ . ~=i~=l~(-~/dlV)");

::.; 30

c.l.:.f!:1:: .;=:r~::ln(-

< ~

OOJT ESP3:2 oev r:iT Vt. BOMH:!. 02,eoo. Nvn~ on •JOM4 . ~-

Figura 2.1. Programul ESP32 pentru o pagină web minimală utili zând DHCP

28

Pnn accesarea paginii web de la adresa routerului la care este ~ se ob ţ i11e o in1agine ca în figura 2. 2. Este posibil sfi fie necesa re anumite se tări a le router-ului pentru redirecţionarea ponurilor, a ş a

cum va fi prezentat în cont inuare, Ca a ltern ativă. pagina se poate accesa din reţ.e au a local{,, la adresa a tribu i tă de route r, de obicei sub fonna de 192.168 1

&) /\cu~ ~il'I h-trw,,et

•

:...:.:

::

:--

.

C Q ·:,) , 2 · -.,:

0

0

®A)~ ptJ.(1 ;V\ttll~

~i~~

Figura 2.2. Pagin ă web creatf1de se n e rul ESP32

,

-.

__ _:i_

A

1

,

.

.

l

1

A,Ocarea uPet .iur\..'.',e -..,atice pentru acC;._'~lil om

D acă doriri să a l ocaţi intotclcau na aceeaş i IP, pu teţi seta o ad resfi IP sau puteţi face o rezervare DH CP. A perrn it~;ca routeru l să trim i tă o cerere din afara re\e k i, prin ponul pe.care este localizat serverul. la adresa rr atribuit[! acesmia. Pentru a aloca o adresă stati că . panea i n i ţiala a programului va fi cea din Figura 2.3. stat i c ă

19

e S_Slider_ON_OFF I Arduino 1.8.5

o

X

file f,dit ~ketch Iools tfelp

2

3

~c::~~ cflct=-.1; ssid

4

,:.:::E;.

"E.?;..aJ" ;

c~a= ; paSS\;.'Crd

=

"~e:jf!23-i:"' ;

8 -:.~,:,i~ setu; () { 5crial . b~g1~ {ll5200); d~lay{50}; I?Arldress local_IP(lS2, 1€8, l, 244); //!P !ta~ic lU 11 IPJ...,id.ress ga~cwa~' {lS2, 16$, 11 l); / / ţ:.~raz-:t::::ii r-etr:le1. ,.., I?.!.d-:ire;;;. subnet{25S, 255, 255, O): B Wifi . ,: :,n~1-= (local_IP, gateway, subnet:); ~4 «i:·1. C-'=g:;_r, (ssid, password) ; Î

o

!.5 ioG

-,;hil~ {ni.t·.1. • .: -"'~::;= O

~=

iiL_CCNUEC'IED) {

d=lc.,-(500); l:;, 20 21

..,., l Y.:p O { v


Export selected project (.aia) to my computer.

~~~ţp \I\\J(MlW' >f>v.i~~ >1iff (p~ ~R ™4 ~ . ~v..)

•t+ >

":M~ ~p Uf~e;_ ~ ~~ °'R. ( IIX. ~ IT lrfp \"\~ ~ w . ~ ) Se....~

1 \

CS!.\f /

. ·. iJ,l~ ! il1~ ţ~tj'

cJJi

.S ,11\\~..

ct~J ~~ - ~ţ'1J1J~ ~~~~~ ~ n .; r ~ I j \ . o_ 1+ '1P 2o.t,~? K\î Ar(' 1"-'le~~ ~ţ_ u ~ a\Ja~ "t\'ll'll.elt u.. \ ~ a\M 6Ao\ r-•-r ,~ > 36

3. Comanda unui port GPIO prin WiFi ~ - ,t,.;.-A ~;I

(§~,2.)

"" '\,

'"""'

"'

·,.t

Diferite comenzi pot fi trimise, prin intenncdiul paginii web creată de serverul ESP32, la porturile GPIO (General Port Input/ Output) ale plăcii respective. Calculatorul sau dispozitivul mobil pe care rulează pagina web (este un client o.l Sc1'1t(~t1,?3.,.~") poate fi citit cu inst1;1cţiunile client.read periodic apelate în bucla principală a plăcii ESP32. ln funcţie de datele trimise de client, programul server poate executa diverse comenzi prin instrucţiunile standard C.

3 .1. Realizarea unei pagini weh pentru transmitere de comenzi dintr-un brmvser @.J""~ În cele ce urmează, vom exemplifica comand~Fi a stării unui pin ESP32 GPIO. Mai întâi, va fi creată o pagină web cu două hiperlink-uri pentru a activa/dezactiva LED_BUILTIN (GPl02 al plăcii DOIT ESP32 DEVII Vl). Pentru aceasta, se va pomi de la programul anterior, unde VOil"I in....e unele modificări şi completări. În secţiunea de declaraţii, este declarată variabila de solicitare a şirului, iar în secţiunea de configurare se utilizează instrucţiunea de programare pinMode (LED_BUILTIN, OUTPUT). Prelucrarea datelor primite de la client se face cu secvenţa: reques~=cl ient _ readStri:-,.gUn ::il ( ' \ r' ) ; Serial.print:n(request);

if digita]Write(LED_BUILTIN,HIGH); if digitalWrite(LED BUILTIN,LOW);

(request.indexOf("Ol\") !--1) {request.indexOf("OtT") !=-1)

Putem observa că un şir este citit de la client (settrMihă ri"11\f)şi apoi este căutat în el un substring ("ON") sau altul ("OFF"). În funcţie de substring-ul găsit, instrucţiunile de scriere respective modifică starea pinului de ieşire. Dacă şirul nu este găsit, instrucţiunea request.indexOf (" ... ") returnează valoarea - I. 37

În partea de generare a pagmii web se folosesc două instrucţiuni pentru înserarea hyperlink-utilor: client .p.:::i:it ("Click here to ::.urn LED on.
"l; client .pri:it ( "Click he.:::e to turn LED off.");

Lhe the

Observc..ii. că instrucţiunile HTML standard sunt trimise utilizând instrucţiunea clie~ t. print () ca în programul anterior. Deci, programul complet în IDE Arduino va fi la fel ca în Figura 3.1 #include const char* ssid="Etaj "; //''r'OC..&airr..~~.gp

~253 i? ~ b , c u - ~ ~

Figura 3.7. Exemplu de selectare în DHCP-ul routerului pentru IP-ul dorit al ESP32

44

O •·

X

X

* ...

co

Figura 3.8. Exemplu de redirecţionare (forwarding) a pmtului serverului pc router (iele"" -x1q;g ~~ r./9.Z., ;Fig /6.8 p1'3$ În astfel de cazuri. valoarea portului de intrare extern trebuie inclusă prin introducerea \aiorii sale precedată de caracterul ":". ca în Figura 3.9.

şi

în

aplicaţia mobilă.

45

=

o

*.

X

f'll! t-t.--"":"!c,.--:~;l.:.Jra,.·..;~~r!5 ~;,.1,;i,+,\f;,,...,-:Pr-t

;t A.:.~._!J,.,,......e...

o

Oo

Figura 3.9. Aplicaţia MIT App inventor pentru o digitală - blocurile programului

comandă 46

4. Transmiterea comenzilor analogice şi digitale către un server ESP32 dintr-o aplicaţie l\1IT App Inventor

4.1. Principiile generale ale transmisiilor analogice prin canale digitale Un exemplu de program care rulează pe un server ESP32 şi poate primi atât valori digitale (prin butoane) cât şi analogice (prin intermediul ~ cursorului) de la un client este descris mai jos. , Ieşirile analogice pot fi obţinute prin tehnica Pulse Width ~ Modulation - PWM. lnstructiunea analogWri te () existentă în IDE "';- Arduino este implementată până acum numai pentru microcontrolerul j ESP8266 (cu rezoluţie de 1O biţi), astfel că pentru ESP32 va trebui să -33. folosim instrucţiunile ledcAttachPin (), ledcWrite () şi

.

~

j_

ledcDetachPin ().

;:s

Ca şi în cazul altor microcontrolere, unii pini GPIO ai trnicrocontroleruluî ESP32 pot genera impulsuri PWM rectangulare. După o _... integrare (filtrarea componentelor alternative şi păstrarea doar a .~ ~ompon~ntei C_?ntinue), aceste impulsuri ~unt ~convertite_in nivele continue ~ mtre O ŞI 3V cand factorul de umplere vanază mtre 0% ş1 100%. Acest mod de operare este echivalent cu conversia digital-analogică (DAC), fără a fi nevoie de un astfel de convertor integrat. Rezoluţia tensiunii de rezultate din conversie este dată de numărul de paşi utilizaţi de generatorul de impulsuri, de obicei între 8 şi 16 biţi (rezoluţie în biţi), în conformitate cu următoarele relaţii generale. Pentru o rezoluţie n-biţi a contorului, numărul de paşi este:

'!J

lV Rezoluţia

în tensiune

~V

= 2"

I 1I

este: 6. V=

y-;nax 2"

47

121

Frecvenţa maximă f rmx a impulsurilor, pentru o frecvenţă de intrare a

ceasului fcK va fi: (3)

Pentru a facilita integrarea, este recomandată o frecvenţă mai mare a impulsurilor, dar aceasta poate necesita o rezoluţie mai mică, conform formulelor. În comparaţie cu DAC integrat, această tehnică are avantajul că amplificatoarele de semnal pot funcţiona în clasa D, deci cu randament de 80-95%, în timp ce DAC necesită amplificatoare de clasă A cu un randament mediu mai mic de 50%, implicând radiatoare mari şi consum mare de energie. Cu toate acestea, conversia DAC integrată are avantajul că frecvenţa generată este teoretic independentă de rezoluţie.

4.2. Realizarea conversiei digital-analogice prin PWM in Arduino ID În

mediul

ledcAttachPin ()

de şi

programare

IDE

ledcDetachPin (}

Arduino, instrucţiunile respectiv detaşează

ataşează

un canal PWM la/de la un pin, în timp ce instrucţiunea ledcWri te () scrie numărul de impulsuri de numărare, care, împărţit la numărul maxim de impulsuri, stabileşte factorul de umplere. De exemplu, pentru o rezoluţie de 10 biţi, numărul total de paşi este de 1024 şi o instrucţiune ledcWrite (300) va da un factor de umplere de aproximativ 30%, deci o tensiune analogică de aproximativ 1V. În următorul program, mai întâi sunt declarate constantele şi variabilele, dintre care unele sunt necesare pentru ieşirea PWM. Apoi, serverul este conectat la un router cu ssid şi parola cunoscute folosind o adresă IP statică. În exemplu, adresa 192.168.1.240 a fost utilizată, cu portul 85 (car~ a fost redirecţionat de la WAN la această adresă LAN). In acest program ilustrăm şi modul de configurare a unei adrese IP statice pentru server. Pentru a realiza acest lucru, se poate utiliza instrucţiunea WiFi.config(local_IP,gateway,subnet), precedată de instrucţiuni IP, gateway şi subnet IPAddress local IP(l92,

168,

48

1, 240);

//IP static

IPAddress ga-::eway(192, 168, 1, 1) ; parameters IPAddress subnet (255, 255, 255, O); WiFi.config(local_I?, gateway, subnet); WiFi.begin(ssid, password);

II

Pentru a lucra în PWM, trebuie să definim un canal parametrii cu instrucţiuni de tipul următor:

şi să-i declarăm

::-ietwor k

int ledChannel=O;//Canalul PWM pentru LE~ int frecv=5000;//Parametrii PWM ai Timer-ului int rezolutie=8;

De observat că atunci când se transmite o comandă digitală ON/OFF, este obligatorie rularea instrucţiunii ledcDetachPin {), de detaşare a pinului respectiv de la canalul PWM, pentru eventualitatea că anterior se făcuse o comandă analogică prin PWM asupra acestuia. Clientul este programat ca o cerere GET să fie compusă dintr-un şir de caractere de tipul: GET GET GET GET

/ON HTTP/1.1 \r dacă

s-a atins butonul ON

/OFF HTTP /1 .1 \r dacă s-a atins butonul OFF / 67 HTTP/ 1. 1 \ r dacă s-a poziţionat sliderul la valoarea 67 / 111 HTTP/ 1 . 1 \ r dacă s-a poziţionat sliderul la valoarea 111 etc.

Prin urmare, informaţiile utile sunt cuprinse între primul caracter "/" şi caracterul "H", fiind şirul "ON", "OFF" sau o valoare numerică. Când un şir terminat cu "\ r" este primit de la server, acesta separă sub-şirul care conţine informaţiile şi încearcă să-l transforme într-un număr. Dacă se obţine un număr pozitiv, înseamnă că este o valoare de la cursor, deci un pin este ataşat unui canal PWM şi valoarea este comunicată instrucţiunii ledcWri te (). Dacă nu se obţine un număr pozitiv, trebuie să comparăm şirul cu ON şi apoi cu OFF, să detaşăm canalul PWM de pin şi să îl scriem digital cu 1 sau O. Apoi putem genera instrucţiuni HTML pentru o pagină WEB care permite controlul pinilor digitali, ca în programele anterioare. Sursa completă a programului pentru IDE Arduino este prezentată în Figura 4.1. Aceasta poate fi realizată prin completarea / modificarea programului anterior (Figura 3.1 ).

49

#include const char* ssid = "Etaj"; const char* password= "asdf1234"; WiFiServer server(85) ;//Service Port int num=O; int ledChannel=O;//Canalul PWM pentru LED int frecv=5000;//Pararnetrii PWM ai Timer-ului int rezolutie=B; String led="OFF"; void setup () Serial.begin(115200); delay(250); ledcSetup(ledChannel,frecv, rezolutie) ;//pornire PWM pinMode(LED BUILTIN, OUTPUT); // Connect to WiFi cu IP static IPAddress local IP(192, 168, 1, 240); //IP static IPAddress gateway(192, 168, 1, 1); // parametrii retelei IPAddress subnet (255, 255, 255, O); WiFi.config(local IP, gateway, subnet); WiFi.begin(ssid, password); while (WiFi. status () delay(500); Serial.print(''.");

!= WL CONNECTED)

// Start server server.begin(); Serial.println(WiFi.localIP()); }

void loop () WiFiClient client= server.available(); // Check if a client has connected if (!client) { re turn; } // Wait until the client sends some data while(!client.available()) { delay(l);

50

)

li Cere un raspuns (o linie) de la server String request = client.readStringUntil('\r'); Serial.println(request); // Prelucrare a cererii de la client int indexl = request.indexOf("/"); int index2 = request.indexOf("H"); led=request.substring{indexl+l,index2); num=led.toint() ;//Transforma restul in numar //Serial.println(led); if (num>O) {

ledcAttachPin(LED BUILTIN,ledChannel); PWM O la pinul 2

//

Ataseaza

ledcWrite(ledChannel,num~l); )

//Raspunde la butoanele ON/OFF if (led=="OFF ") { ledcDetachPin(LED BUILTIN); digitalWrite(LED BUILTIN, LOW);

//Pentru ON se va insera un spatiu, pentru a fi tot 3 caractere if (led=="ON ") ledcDetachPin(LED BUILTIN); digitalWrite(LED BUILTIN,HIGH);

// Return the response client.println("HTTP/1.1 200 OK"); client.println("Content-type:text/html"); client.println(); // obligatoriu client.println("") client. println ( "
") ; client. println ( "Click aici pentru aprindere
"); client. println ( "Click aici pentru stingere
"); client.println(''''); client.flush(); delay (1); )

Figura 4.1. Programul pentru controlul digital 51

şi

controlul analogic al unei ieşiri

4.3. Comanda analogică în

aplicaţia

MIT App Inventor

Transmiterea unei valori analogice de la client poate fi făcută cu un potenţiometru virtual care poate lua valori întregi într-un anumit interval. Valoarea curentă poate fi transformată într-un şir, transmisă şi apoi convertită de către server din nou într-un număr. Principala problemă constă în faptul că acţionarea cursorului poate avea ca rezultat o succesiune foarte rapidă de date care supraîncărcă sau chiar blochează comunicarea. O soluţie pentru a evita acest fenomen este de a transmite valorile potenţiometrului numai la anumite intervale de timp (de preferinţă între O, 1 şi 2 secunde). Un exemplu de implementare a acestei tehnici în aplicaţia MIT App Inventor este descris mai jos (Figura 4.2). 8

(-

C O ©

••

..,,

a i2.app1nventor.rrut.edv

Nesecuriut

.

,,,.ll'AL..

..,,,_.,,.,

v--

·-·~l· ·-.......... !!Jon.~

ct,rM•UWWW1fl•-http:t15215310:851

•

it®·«❖fWonMfaJse

O

a.

-

.

-

X

*

'. j

·I

• 1,-.1

• .-,

. '-v\ principală

S~ring buton=St~icq(d~gita1Read(l3)); Strir:g a= Stric;_g(analo-gRead(AO) /41);

Deoarece convertorul analog-digital al ESP32 este de 12 biţi, rcwltatul maxim al conversiei este 4095. Pentru scalarea in intervalul 0-100, rezultatul a fost împărţit la 41. Acest lucru încarcă oarecum microcontrolerul ESP32, alternativa fiind de a face scalarea în aplicaţia de pc dispozitivul mobiL dar aceasta ar creşte cu 2 numărul de caractere din blocul trimis de server. Pentru a afişa valorile respective pe pagină, în secvenţa transmisă vom introduce un marcator pentru fiecare infom1aţie de stare unnată de şirul care conţine informaţiile. În următorul exemplu, marcajele sunt "But", respectiv "Pot", primul fiind unnat de un caracter (O sau I) şi cel de-al doilea cu trei caractere (0-100). Astfel de instrucţiuni pot fi introduse în secţiunea HTML:

!/ P"s~b.\ls-v.

client.p~i~tln(''3Lt''); client.p~i~tln{b~ton); c!ient.pric~ln(''?ct''); client.p~ictln(a};

// p•te~-li•,-,ete,

Evident, pot fi introduse şi stările altor intrări analogice sau digitale folosind aceeaşi metodă, în funcţie de aplicaţie. În interfaţa grafică a aplicaţiei MIT, elementele de afi~are a stării serverului ar trebui adăugate. În exemplul următor, a fost adăugată o valoare logică Labei pentru GPIO13, un buton de schimbare a culorii (galben albastru) în funcţie de această stare şi un glisor Thumbnail pentru a afişa valoarea analogică pe A0. Acestea vor fi setate în interfaţa grafică a aplicaţiei \1 IT în funcţie de preferinţele dvs. În aplicaţia MIT, trebuie adăugat un bloc pentru a identifica infonnaţiilc despre starea de intrare a serverului şi pentru a executa instrucţiunile de afişare la client. Mai întâi_ două variabile globale vor fi iniţializate: "global raspuns" pentru a afişa starea intrărilor digitale şi "global răspunsAna'' pentrn a afişa infonna~ile analogice. 57

După cum se poate observa în Figura 5.3, din textul complet "responseContent" trimis de către server este căutat indicele şirului "But" şi un caracter "global răspuns" este separat pornind de la poziţia 5 a acestui index ( există două caractere interpretate ca spaţiu în şir întreg) - elipsă roşie. Apoi, modificaţi textul pentru Labei I uţilizând conţinutul acestui sub-şir şi, în final, comparând-1 cu "l ", setaţi culoarea pentru Buttonl - elipsă galbenă. În mod similar, separaţi şi apoi afişaţi pe cursorul 2 sub-şirul indicând valoarea analogică - elipsa albastră.. -;,.:;;.

e o

,f,, ;;: ~

©~pp...11.-.tl!Nh•!t.,.:I,..,_-;._~:.-.':~

~ ~, Q

'..:,,.,T~ ~ 151 ~~'~----·

"

$

n

❖

)1'

!,!:T4:~ll";';.trW

-

(1. ~,..,..~ ;

W

:i9('.'l;.,r.r1~•'-

,:.: 'IC.'~.•c,e)•-:-:,:.

) =====";

Practic, această secvenţă va stoca descrierea html a paginii în memoria flash şi va transmite tot ceea cc este între "====("şi '')===="sub fomia unui şir, care va crea F.if§l"'G ·.l.t w~6 o.. d!tt>nt..Jl.{.I.·, Celelalte funcţii vor conţine o instrucţiune "tcxt/plain": ser\er.send(2CO,''tex~/plain",s~r~ng corarda) Observaţie. Instrucţiunile

server. o~- (), server. ser,d () şi server.a:::-g() necesită antetul ESP8266~'Je:0Server.;, (pentru plăcile care folosesc microcontrolerul ESP8266) ş1. respectiv, ES?32'iJe;)Server. h (pentru plăcile utilizând microcontrolerul ESP32). Acesta din urmă nu exist[l în pachetul standard (in prezent, 2018), dar poate

67

fi instalat manual, aşa cum se specifică în instrucţiunile de instalare a sistemului ESP32 pentru Arduino. Proprietăţile obiectului XMLHttpRequest sunt următoarele:.

Descriere

Proprietate

Permite definirea unei funcţii care să fie onreadystatechange executată atunci când se schimbă readyState.

readySta--.:.e

Indică

O: 1: 2: 3: 4:

starea obiectului XMLHttpRequest. request not initialized server connection established request rcceived processîng request request finished and response is ready

status

200: "OK" 403: "F orbîdden" 404: "Page not found" For a complete list go to the Http Messagcs Rdcrence

statusText

Retums the status-text (e.g. "OK" or "Not Found' 1)

Funcţia definită de on:::::-eadystatec:1arrge se cheamă de fiecare când se schi:obă readyState. Când devine 4 şi starea este 200, răspunsul este gata şi poate fi preluat ca un şir cu instrucţiunea ~his.:::::-esponseText. Aceste considerente pot fi exemplificate de unnătoarea secvenţă de program care afişează în elementul browserului i starea portului digital şi a serverului cerut de comandai: dată

68



[:

PROG~EM

?."==(

ESP32 server cu t:::ansfer l\Jl\X Digi"'.:al 01\ DI g i ta 1 O?F

72

transmis id-"DiglTransm">NA


NA Digital_2 transmis id="Dig2Transm">NA


1) ">Digital 1

O) ">D L9 l '::.al 1 l) "> Digi ::.al 2 O} ">Digital 2

tat.:::.c IPAddress gate·..iay(l92, 168, 1, 1); / / parametrii Yetelei IPAddress subr.et (255, 255, 255, O); WiFi.cor_fig(local_IP, gateway, su'cnet}; WiFi. begin (ss.: d, password); Scrial.println(''''); pir:Moci.e (LED, OUTPUT); / I 'Nai t for co,rnection while {WiFi. status () ! = WL CONNECTED) delay{500); Serial.?rint(".");

//Tf cor.nection sc:ccessful mo:1i::or Serlal.prir:tln("''};

show

IP

address

server.an("/", handlePagina);//Afisa~e pagi:ia browse;:serve:::. on (" /c::_ ToSe", :tand:..eservRecep::ie); server.on("/SeToCl", handleServTransmisie);

i:i

sc::.::.al

web

pe

server.begin{); //Start server Serial.printlr: ("l!T'i'P server si=arted");

I li------------------------------------------------------//

LOOP

11-------------- --------------------------------------------

void loop(void) [ server. hard l ec::. icnt {} ;

//Handle c::.ient requcsts

Figura 7.1. Programul ESP32 cu

reîmprospătare automată

AJRefrlod 80

AJAX-

Fişierul

index.h al paginii web

corespunzătoare

este prezentat în

Figura 7.2. const char ::1AIN_page:



R"===~= (

PROG'.'--lE~

ESP32 server el:. ac:::ual i zare pagir_a web prin AJAXEl

~

j El --j;

192.168.1240

o

G}

X

.,.._ ~

!i +

•

V

192.168.1.240.ServcrToC:.. ient, () ->Se'::':JCl->f'.ar..j le.Serv':'ra:, srr::._sie

85

Primele două funcţii sunt în partea HTML/JavaScript rulată de client şi pre7cntate în fişierul index. h (Figura 7.6). const c:har MA:::N ;:iage [] Digital 1 ON Digital 1

OF~'

ADC Value Ls : O Digita_ 2 DN Diqi_ta:_ 2

OFF< /bu t tor.>


ADC Val1:e is

0


Analogic l

Digi::al lransmis : NA
Digi·~al 1 recep-::-.ionat. :

Digita~ 1 ON Diqital 2 CK

~DC Value is

O

Analcgic l

I2">NA

'::'l ':72

cx="250"

cy="lOO"

r=" 3·:}"

cx="SQ"

cy=" 100"

:?::="3;)"

103

; var xl=O; var x2=0; var url; var b;_1tl=docurr.ent. getElementByld { "bt:") var but2=cdocurnen t. ge !...r: l emen LHy Id ( "bl)") var trimis.,..-:_; function ComToServer(out) if (out==l) switch (xl) { xl=l; case o' url=''C:CToSe?DiglTransm=";,l; break; case Y7=n; 'ur l="C- ToSe?Digl Tra:-.sm="+O; break; _i_f

butl. style. background~' Yellow'; h;it-1 _ st"yl

p

_

hnr.lcgrnund='

1 ;

(out==2) switch (x2}{

x2=l; case O: u:::::C="Cl ToSe?Dig2-:'ransm="+ l; break; x2=0; case 1: ur: ="Cl ToSe?Dig2'.'.'ransm="+O; break;

but2.style.background~'Yellow'; but2. style. bac:kg::::ound=' ';

TrimToServer{};

function ~rimToServer() { var xhttp ~ new XMLHttpRequest(); xhttp.open("GET", url, true}; xhttp.se:1d(); xhttp.onreadystatechange function{) if (this.readyState 4 && this.status else trimis=O;

?,00)

trimis=l;

};

fc1:'ctior. ServerToC1 i ent () var xhttp = new XMLHt-;::pRequest(); xhttp.onreadystatechange = functicn () if (20) disc.sty:e.fill='#?FO'; else disc.stylc.fiL:_=' '; var disc = document. getE:emer. LEyT d ( 'Cerc?' ) ; if (bloc'.4]>20) disc.scy:e.fill='#FFO'; e 1 se disc. sty:e. fi:l=' ';

I ) ;

xhttp.open("GET'', xhttp. se::-id {) ;

''SeToCl'',

true);

set Interval. (funct.ion () { I I Cheama o Lmctie periodic, la 1..::::1 .:nterval de 2 secunde if (trimis==O) TrimToServer(); ServerToClienL(); }, 2000); //xxxx mSeconds update rate

) =====";

Figura 9.1. .Fişierul de generare a paginilor web cu confirmare/retransmitere a comenzilor pentru două ieşiri digitale şi monitorizarea a patru intrări digitale şi o intrare analogică - AJRefConfinn2od2idl iaSlider Pagina web corespunzătoare aplicaţiei este prezentată în Figura 9.2. Există două butoane de tip toggle care pot fi utilizate pentru a controla cele două ieşiri digitale ale serverului, care sunt galbene atunci când este dată comanda I şi gri când este dată comanda O. Apoi, starea intrării analogice ADCO este afişată atât prin text, cât şi prin progressbar. Pagina web arată, de asemenea, starea curentă a ieşirilor digitale ale serverului, care poate fi diferită de comenzile transmise dacă un alt client le-a schimbat intre timp sau când comanda nu a putut fi transmisă din cauza unei erori de comunicaţie. În ultimul caz, după cum s-a explicat, eroarea este înregistrată de client, care va încerca să retransmită comanda la o reîmprospătare ulterioară a paginii. In final, se afişează starea celor două intrări digitale ale serverului şi intrările Touch. Acestea sunt, de asemenea, afişate grafic prin intermediul a două discuri care schimbă culoarea dacă este atinsă intrarea Touch corespunzătoare.

105

X ;c

C

A LJ

r!

o 86.i2-t86.145:85

X

X

'

r--.gr•24or14r --.~ \!,I O. I .oO. :l.C·=·

ESP32 serYer cu actualizare pagina web p1in AJA.X Digital 1

0N !

Digital_2 ON

ADC Value is : 1862

Stare iesire 1 : OX Stare ie.sire 2 : OFF

Stare Toucbl: -29 Stare Touch2: -48

Stare intra1-e 1: OFF Stare intrare 2: OFF

Figura 9.2.

Pagină web

cu butoane toggle pentru comenzi şi semnalizări ale stărilor

106

Programul .ino corespunzător acestui protocol de confirmare/ retransmisie este obţinut prin adăugarea a două instrucţiuni de citire digitală la programul .ino din figura 7.8 şi adaptarea corespunzătoare a funcţiilor de transmisie/recepţie. Cu aceste modificări, programul .îno pentru ESP32 devine cel prezentat în Figura 9.3. #include #include #i:-iclude #include "index.h" //HTML webpage cu javascr.:::.pts #define LEDl 4 -tl-define LED) .5 / /SSID si l-'assword pentru Wi?i ro1:ter co:-ist char* ssid = "Etaj''; co:-ist char* password= ''asdfl234''; StrL1g Starel="OFF"; Stri:-ig St.are2="0F:s""; St!:"ir.g Stare3="0F:"'"; Stririg Stare4="0FF"; i::-it a; int outl,out2; ES?32WebServer se::-ver (85);

/ /Server on po:::-': 85

//cccccccc--ccccccccccccccccccccccccccccccccccccccccccc--c---

//InCarCare pagina web //-------ccccccc--cccccccc-----------------------------------

void handlePagl:-ia() server. se:1d ( 20 O, "':ext,/ht:nl", ca-ere browser pagina web

String (MAIN _page) ) ; //":':::::imite

void handleServ:rl.eceptie() String t'._statc se::-ver.arg("Dig1'."::-ansm"); //di:1 xhttp. open ( "GlCT", "Cl ToSe?:::Jigl ":'ra:-isl'l="+s :-_, t.::-ue) ; Serial .println(tl_statc); if (~: stale=="l") {Starel="ON '';digitalWrite(L~Dl,l); if (t: s-::.ate=="O") { Starel="OFF"; digi ta:Write (L~Dl, O) ; ; SLri:-.g tZ state server.arg("Dig2Trar.srr"); / /din xhtt:p.oper. ("GET", "ClioSe?DigZ'::'ra::ism="• st, -:::rue); Seria:.pri~Lln(t2 state); if (-c2 stat.e~="l") {Sta~e.?="OIJ ";dig1La1Write(L":ll.?, 7 );_1 if (t2 s-:::ate=="O'') {Sta:::::e2="0FF'';digita:Write(LED2,0);; scrver.send(200,"Lext/p1air.'',Starel+",''+Staro2+'',"+String(a)+ ","-String(ou-::::)+",''+St.ring(out.2)~'',"+ SLa re3+", "+Sla re4); //Trirr-ite sLarca servcr~:ui

107

vo.id ':1and2 -eServT ransmis ;_e() a= analog Read(A C); oc,tl = (5Cl - touchR ead(14 )); out2 - (50 - touchR ead(27 )); if {digi talRea d (:'._3)) Stare3 ="0FF "; else Stare3 ="0N "; if (digita 1Read (12)) Stare4 ="0FF "; else Stare4 ="0N "; +Strl~ g(a)+ serve: :::.sen d(200, ''~ext/ p~ain' ',sc.a:: ::el+'', n+star e2+''," ii 4) +Stare e3~"," "+Star t2)+'', ng(ou ,''-Stri ut:)+" ••,••~s tring(o Tri:a.i :.e starea serveru:'._-__ii_

-====-= =====- ~===== ====

/ / -- ====- ====~= ====== ==--=== ====== ~===== SE'l'UP //

!!~~- --~~- ---~-- ---- --~- --~--- -~~-- ------ ----~- ------ ------

void se-:::up (void) { Se::::ial .beg.in (11520 0); lPAdd ress local_l P(2-9Z , 168, 1, 240); //:? slatic i IP/\dd ress galewa y(192, 168, -- ' :_) ; / / ?a::::arr .e:.rii retele ; o) 255, 2:SS, (2SS, subnet .ss 1 PAddre WiF 1 .con.'i g(loca :__IP, gatewa y, subne t); ½'iFi.b egin(ss .:::.d, ?asswo cd); Serial .?rinL ln("") ; pinMod e ( LE Dl, OUTP"JT) ; pinMod e(LSD2 ,0GTPU ~); pinMod e ('-4, INPUT PUJ,l..UP) pin~od e(27,:N P~7_?C LLUP} ; pinMod e ( 12, INPUT_ PULUJP ) ; pi:::iMo de (13, INPUT PULLU P); / / i'i'ait for conne ction w:::,_c)N::.:JEcn·,::,) wh2.lc (Wifi .statu s() de2-ay (500); Seria2 -.prin t(''."); 1 -

succes sful conne ction //I= monito r Seria l.prin tlc{''' ');

show

1P

addres s

pa.gir.a ;'la'ld'_ _ePagin a); //Afis a::e sec,er .or_(" /", browse r server. on("/C '__ToS e", handle ServR ecepti e); server . on (" / SeToC l", hand :_eS8rv Transm Ls i8) ; server .begin () ;

//S-':.ar-; :: server

108

in

serial

web

pe

Seria::_ .println {"HTTP server started"); //eeeeee--eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

// LOOP /!--------------- ---------------- -void loo9(void) { server.~andlcClicnt();

----

--- ---- -------

I /Hanct:_e el ier:': rcq·Jcsts

Figura 9.3. Program cu confirmare/retransmitere a comenzilor pentru două ieşiri digitale şi monitorizarea a patru intrări digitale şi a unei intrări analogice - AJRefConfinn2od4id I iaSlider

9.3. Elementele analogice de

comandă

de tip range

Obiectul HTML care poate fi folosit ca potenţiometru este "range", iar declararea sa este într-o diviziune "sl_:_decor.tainer". La declararea acestora, pot fi specificaţi parametrii iniţiali şi pot fi invocate funcţii de răspuns la evenimente. Unnătorul exemplu declară o diviziune care conţine un slider cu o funcţie care răspunde evenimentului "oni:1.put" cu următorii parametri actuali: ,,thi s" (obligatoriu), ,,s l ij_'.." (identificator de declaraţie) şi ,,va::_ ue 1" (identificatorul declarat în diviziune pentru afişarea numerică).

Value: l

Iesire analogica:

ADC Valuc is

'ct-

-'-

11 ~ ·

• ,, o.LlG.L

..

! I

'

0


O

Analogic l.



Stare iesire 1 : G
Sta re iesire ) O

Stare Stare Slane Stare

Touchl : Touch2: ir."'.::::-are i n:..:::-are

;~:c;

§li ,.,, , p

..j.

DGffft.!.::-30~

J

Mu~) & ~ ..~1,.;.;,;1e.eo:.•CP~.,:.•.;i.c.n

• :iff-t""Port ThT~~:l-!S.~e.'T'~SOt'..,_,. i ' ~ ~ ""•N»f~n-vr-t ~:z: ~~= tt :cmce WfS ttt,t, b-.ill: ISC IJ:.Y. -tYY• .X.X.X. ~ S!:srt~l',.._v.,,~~t,•.

.~....

• FActdie,ss - Th,.,=40!!,,o,r,l!ft!ro,,?C:CD!lrON ,:,~_.,[....,. • k'l~l'Ml1Poo1 - ~ ~ ~ • ' 3 ~ p o - , . ~ ~ ~ l"C ~ tt.;, w ..;.:~ ~•bol". ·•11",1 Q:"I "'-li•~: r:,;..,;:. C"~lnlo!ol"MI Pool ~~1

Figura 16.4. Pagina de forwardare a porturilor 1880 si 1883 intern 192

către

un IP

16.3. Instalarea Node-Red Dashboard pe Raspberry Pi

~

Node-Red Dashboard este un pachet care permite introducerea unei varietăţi de widget-uri direct pc pagina web a clientului, evitând astfel necesitatea de a instala o aplicaţie specializată, cum ar fi HelloloT etc. suio apt-get install nprn suio ::-ipm i -g npm~2. x

Se

instalează

Dashboard folosind comenzile:

cd ~/.noC':'-red s·..do npm ir.stall node-red-dashboard După reboot, în pagina node-red accesată de pe un brov,/ser extern

apar în campul din stanga elementele Dashboard.

Rezumat al metodelor de conectare Trebuie luate în considerare următoarele reguli pentru utilizarea Node-Red: . 1~ Atât dez~noJl~re'la.un~i- aplicaţii Node-Red dit şi utilizarea acesteia trebme sa se facă.fY un aÎspoz1t1v care rulează Node-Red. 2. Pentru a dezvolta o aplicaţie în Node-Red, introduceţi adresa dispozitivului care rulează Node-Red, urmată de portul 1880. 3. Pentru a rula o aplicaţie pe pagina web, introduceţi adresa dispozitivului care rulează Node-Red, urmată de portul 1880. 4. Programul de pe dispozitivul ESP32 trebuie să specifice adresa brokerului utilizat (public sau privat) şi portul standard pentru brokcrul respectiv. 5. Dacă utilizaţi un server propriu care rulează programul broker, acesta trebuie pornit pe durata sesiunii MQTT şi, pentru accesul extern, porturile 1880 şi 1883 trebuie redirecţionate pe routerul la care este cuplat, către adresa IP locală a serverului. 6. În aplicaţia Node-Red, în nodurile unde este necesară cuplarea la serverul de broker, trebuie introdusă aceeaşi a d r e s ~ utilizată de ~ programul rulat de ESP32.

Exemplul 1. Broker pe server public, broker. hi vemq. corn şi Node-red care rulează pe un PC la adresa IP publică 86.124.86.145 şi adresa IP locală 192.168.1.151. Aceleaşi reguli se pot aplica şi altor brokeri publici, cum ar fi broker. mqt t-dashboard. corn.

'!

i

Bi

(1 9~

86 ;2, 86.1\>

','!(-~--'""-"'-

~!,,--~".[~.

M&.TT b/\l¼l"huvtr

Programu l ESP32 va avea preambulul din Figura 16.5. 0

Mqtt_3cd1-"dl l• j Ardu,no 1.85

foi•

[ dit ~krtc h Ioo!s J:!olp

o

X

fll O~i11 D~ ~-~~~~~-~~~~:f---1-~ l"e' :~ •~~ay.ft•;:ţ~

"/ Ort 13:18:13 °

limQ) U!.tt, ~ t ~ y : ·\'tl$~\S$\ihod!!-,nct _

Oct 13:16:13 - [ ~

-

.

1>.-Qja,;5, ·l,llsable.i : eq,itll;'~ ..,p.--Qjede"~\R.ow.._0$KT@-M."atllR.,SOO u:u:u - tt~J.~ no,;,_ftml>ii,g ll't: t1~//'U1.e.e.1:~ ·

Oct

, .Oct I .Oct 13:1~13 - {warn~ :

.

,

Ii' the systa,,..g~d hy ls li)st ~ , a.~.y l"eSQ!I., Y®l' c~i-als 'Ue "111 not he rttm1el'e?lle, you will 1live 't() !!.el,~'te !t arut r e - ~·

c:redentials.

ycmr OMl, key ~Sil!B

··

ţlre

·qili . . · •. , - -•. optim) iii . settings i'i)e. •~Rffl .,.>jll ttţ~n ~~ J:~" ~ i i . b

'icu should slrt

.,

f!,l~ using y,,~:tm>Sf!IJ; '!f_ey1f.,{ '' · •· ~

',yq'ii.~to,f,ii· ~ . ., •-, · _

.. --.:. .,. --::. .: ~ ---~~: :-~ . ._"""' -:,,_..:.::..~~{'."':t.;;. 7"-~-+-ţ~~~,_,:0..1-;:l:..'.:::;...>~..-~-..: .::~:_• - -

ţ. ~

~-:~;!""~r--

Figura 16.7. Verificarea conectării Node-Red la broker Editarea şi rularea aplicaţiei >.'ode-Red se face la adresa publică a computerului care rulează :\ode-Red. 86.124.86.145: 1880. Pentru aceasta. po11uri Ic 1880 şi 1883 trebuie forwardatc către adresa locală 192.168.1. 151. după cum se arată în Figura 16.8. o

~

-

Figura 16.8. Forwardarea po1turilor 1880 şi 1883 router TP-LII\K 195

către

un IP intern pe un

Exemplul 2. Broker pe server propriu, m~s-q~itto, si Node-red~~ pe un Raspberry Pi aflat la adresa IP public 86.124.86.145 si adresa IP local 192.168.1.21 O. Aceleaşi reguli se pot aplica şi pentru alte mini PC cum ar fi Banana Pi, Beaglebone Black etc. Programul ESP32 va avea preambulul din figura 16.9. $

o

Mqtt._~cd1oat4:dli.:i [ Aro:uinc 1..e.;

X

bfe ,E.d!t S:lt.d:d\ !c:ck !:::it:lp

~~~~H~ -

- --

~

- - - - - --------~--------------------~--=::----------~~ ---- --------

/Jo::;~r;. .;;ta•· =-~~"":-.·rr • -~.,,_3".,. ----•.!'·JJ!.t~,;,• .;.:•:-:f/?:-o;.•l~.:. ~..±ile 11"' r.i.,".l::.:ct e:.;; ye=~ :.ee.: :."'-=' ~~:--:oe':- • '"t-.,;-,·.;;.ar. r,:_·,-!" 1- •'.•_-!r\-; /j~!'-.·1--=.:: ţ-:.!l::!!e: 7,.:-, .=l.-:..:J,j c-.:: -pc=--:. _;:;_~ ~~=· ::;:~.!.e:--.·c= a ~v.c::.."\.U1-....:,:-:: ,::,.·-l'l!-"';//:\r•:·"o.:~1: i-~~i::: :.:: ~!c:;:: C'..! ;:--=:-1: ~:.:3-

li-:.-::::::.:=':. ~

_:,:.:,,:.e,t

~~::·:~~~·=:~~:~i:~~\.:;:~~~-~:l I ;; j~~~.: :s~~-~r.;~;:::~,·:;~3~:~:;_:-~; --L•:: : :~:~._~j ,~r.-,... ~11~ ~ i :~~::.;~-~~-,:~:i.7::~~~::;: :~~~~~~ ~~~: ~~~~~ ~;~:,;~:~~~;

1.

_r:.-:--"r-_,.,:- .:t:~.t• mctt'.::!~::ve=. - ~5.1.lS:3.lC:-: J, S:-~re= r:,e

!1-e-:'4..... r

t:·:t•:~~i.J ,;;~

~=•; .-

•~

-:-.-::.::. :;.!~:- l e d.l •

!2 t,.....,;,,.~;:,

i,,l.L~U,,)

~

•. : .. : ••..

~ ✓ .-.:.....::i

:").- . ·",.

...

Figura 16.10. Pagina aplicaţiei Node-Red cu specificarea brokerului propriu şi

portului 196

În aplicaţie, adresa ser,crului este adresa publică a Raspbcrry Pi (Figura 16.1 O). iar adresa brokerului este aceeaşi. aşa cum este specificată de ESP32. Pentru editarea şi rularea aplicaţiei Node- Red, utilizaţi adresa publicâ a Raspberry Pi care rulează Node-Red şi rnosquitto, adică 86.124.86.145:1880. Pentru aceasta, pornirile 1880 şi 1883 trebuie forwardate la adresa locală a Raspbcny Pi, 192. I 68.1 .21 O. aşa cum se arată în Figura 16.11.

Figura 16.11

Redirecţionarea

porturilor 1880 şi 1883 la o internă pc un router Asus

197

adresă internă

Partea III. Comunicaţii prin Internet folosind

tehnologia WebSockets

17.

Utilizarea tehnologiei \VcbSockcts pc ESP32

Prezentăm aici câteva aplicaţii client-server care utilizează microcontrolerul ESP32 şi tehnologiile WebSockets (WS). Desigur, performanţele obţinute pe un microcontroler ce rulează la 80-210 MHz nu pot fi comparate cu cele ale serverelor mainframe; totuşi, aplicaţiile prezentate mai jos pot fi, în principiu, de zeci de ori mai rapide decât cele

descrise anterior. Partea atractivă a acestui capitol este

că, deşi tehnologia WebSockets este considerabil mai complexă şi mai dificil de asimilat decât cele anterioare, exemplele de mai jos pot părea foarte accesibile, deoarece au fost făcute prin simpla grefare a instrucţiunilor specifice, în programele dezvoltate anterior. În plus, intenţionrim să pre2trl~ soluţiile în paşi simpli pentru trecerea de la programele de complexitate redusă la cele mai sofisticate, insistând asupra unor paradigme specifice unui curs introductiv. Cu toate acestea, trebuie remarcat încă de la început că soluţia WcbSocke1$rămâne mai dificilă decât cele anterioare şi că merită adoptată numai dacă aplicaţia respectivă are o nevoie reală de viteză. Astfel. dacă viteza nu este un factor decisiv, variantele AJAX sau MQTT permit dezvoltarea mai uşoară a aplicaţiilor complexe şi beneficiază de numeroasele clemente "prefabricate" care scurtează timpul de implementare, deci nu recomandăm să fie neglijate a priori ca alegere. Începând cu anul 2015, Markus Sattler a dezvoltat o bibliotecă WebSockets pentru IDE Arduino, capabilă să lucreze cu microcontrolerele ATMega, ESP8266 şi mai recent cu ESP32. Acest lucru a făcut tehnologia WS extrem de accesibilă şi permite implementarea rapidă a aplicaţiilor client-server prin adăugarea unor porţiuni de coduri minime la cele mai simple programe realizate anterior. De fapt, acestea urmează exemplele din biblioteca WebSockets, dar am făcut unele modificări, cu mai multe scopuri: simplificări folosind tehnici mai eficiente deja prezentate, similitudini cu programele anterioare şi realizarea de sarcini concrete de tipul celui cerut de astfel de aplicaţii.

201

17, l. Caracteristici generale ale tehnologici \:VcbSockcts Cele mai multe tehnologii web au adoptat protocoale de conectivitate transfer foarte complexe şi consumatoare de timp, în primul rând pentru a asigura stabilitatea şi securitatea comunicaţiilor prin canalul universal accesibil - Internetul. Aceste măsuri măresc destul de mult timpul necesar pentru transmiterea informaţiilor utile, generând ţntârzieri a căror limită superioară este dată de media exigenţelor umane. 1n plus, diferitele soluţii de polling adoptate de majoritatea tehnologiilor web introduc întârzieri importante care pot sau nu pot fi tolerate, în funcţie de specificitatea şi

aplicaţiei.

Pe măsură ce standardele de promptitudine ale răspunsului au crescut, tehnologiile web au evoluat, folosind soluţii mai mult sau mai puţin revoluţionare. De exemplu, aşa cum ilJYl văzut în capitolele anterioare, AJAX poate fi utilizat pentru actualizarea elementelor separate ale unei pagini, iar structurile MQTT sunt recomandate pentru distribuirea eficientă a mesajelor în reţele complexe. Deşi vitezele acestora sunt semnificativ mai mari decât cele ale soluţiilor clasice HTML / JS, există cazuri în care sunt necesare perioade de comunicare mult mai scurte şi fluxuri de informaţii mult mai mari. Diferitele aplicaţii de streaming devin din ce în ce mai răspândite, necesitând eliminarea factorilor care limitează software viteza: media streaming, tracking în timp real, comenzi cu decalaj (fag) redus etc. După cum o.m arătat în capitolele anterioare, protocolul HTTP urmează un model de rcqucst / responsc, în care cererea de comunicare este iniţiată de client. Problema cu acest model este că serverul nu poate iniţia comunicarea atunci când apare un eveniment la nivelul său (de exemplu, o schimbare de stare a uneia dintre intrările sale). Serverul trebuie să aştepte până când acesta este solicitat de client şi îi trimite informaţiile de schimbare prin mesajul de răspuns. În aceste condiţii, clientul este obligat să solicite periodic informaţii de la server, prin JavaScript asincron şi XML / AJAX (prin intermediul funcţiilor setinterval), o procedură numită ''long polling" (Figura 17 .1 ). Pe lângă lipsa de promptitudine, comunicarea prin această procedură este destul de ineficientă, deoarece legătura trebuie mereu să fie restaurată. Creşterea frecvenţei de polling, deşi creşte gradul de promptitudine al răspunsului. creşte proporţional şi fluxul de mesaje, care poate supraîncărca diverse zone ale lanţului de comunicare / procesare. Prin urmare, perioadele de polling recomandate sunt de cel puţin O, 1 secunde, ceea ce are ca rezultat caracteristici acceptabile în unele aplicaţii, dar care sunt complet inadecvate pentru altele. 202

Long polling AJAX Browser

Server ,...,

Process,r,Q _eart

Web part

' Request URL

..

• HHAL page

_f:i.Ţ!0!-: page

AJAX request

..

•

Any new data?• ._No ne·N data

•

Any new data?_. No new data

No ne·,\ data

... __ AJAX request

..

Handle reque~t

•

No new data

•

~

Constant long polltng

Figura 17.1. Modelul comunicaţiei client-server prin long polling via AJAX \VebSoekets (\VS) este o soluţie modernă pentru a rczol\'a astfel de probleme. Filozofia acestui model, prezentată în RFC6455, este de a menţine o legătură duplex permanentă care să pcnnită transmiterea mesajelor oricând de la oricare dintre corespondenţi (Figura 17.2).

WebSockets Browser

Server Neb part

Reqliest URL

„

•

H,rnd!e req1.est ... HTMLpaqe

HTML page

\Ncbsockets conicct,on

•

Conr.ection establisr,ed •

Create V.!S C0'1necti~l1 ~on'1eCt!Ofl

estabiisned

„

Client data

Cl,erit pushes data •

C!,ent data

Client Pi!_sh':!~ data

-•

•

•

• Server pushcs aata Client pushes data Server ,..,, shPs d11ta

Figura 17.2. Ylodelul

comunicaţiei

203

client-server prin WebSockets

Astfel, principala funcţie API prin care clientul poate comunica callback, fără polling. În serverului este webSocketEvent, de tip acelaşi timp, serverul poate trimite mesaje clientului, de exemplu prin intermediul funcţiilor se:1dTXT, recepţionate asincron de către client prin intermediul funcţiei API ws. onrr.essage pentrn variabila declarată ws, aşa cum se va vedea în partea de script. Desigur, continuitatea procesului implică în majoritatea algoritmilor existenţa unor instrucţiuni polling în bucla principală, cum ar fi webSocket. loop (), dar aici perioada este dictată în primul rând de server şi nu de lanţul de transmisie a informaţiilor. care este deja setat la parametrii nominali. S-a constatat că tehnologia WebSockcts bazată pe acest model are avantaje foarte mari pentru o gamă largă de aplicaţii. Astfel, printre principalele caracteristici care evidenţiază această tehnologie, se pot enumera unnătoarele: • Canalul de comunicare, odată stabilit, nu trebuie să fie reiniţializat după fiecare mesaj, fiind echivalenţa infomrnţională a cablului între două puncte corespondente, caracteristică de la care vine şi numele; • Comunicarea este bidirecţională. fără a favoriza niciuna dintre părţile implicate; • Înlătură nevoia de polling de la clienv • Comunicaţia este complet duplex, astfel încât ambele părţi pot trimite şi primi mesaje simultan; • Utilizarea unui singur port pentru ambele moduri de comunicare. Aceste caracteristici şi multe altele atractive conduc la o eficienţă foarte mare a comunicaţiilor WS, caracterizată printr-o viteză mult mai marc decât alte tehnologii, ceea ce a dus la proliferarea sa şi apariţia unei literaturi extinse în domeniu. WS este folosită în special pentru aplicaţii în timp real, care necesită promptitudine înaltă şi timpi morţi minimali. Cu toate acestea, există unele limitări la generalizarea tehnologiei WS, care ar putea chiar să pună la îndoială viitorul său. Dintre acestea, am putea enumera unnătoarele: • Implementarea \VS este mai dificilă decât alte tehnologii şi necesită o curbă de învăţare mai abrnptă; • încă mai există soft\vare şi chiar componente hardware care nu sunt pregătite pentru WS şi care nu pot fi înlocuite în viitornl apropiat: • Dezvoltarea şi proliferarea continuă a tehnologiilor concurente, a căror evoluţie viitoare le-ar putea pune într-o poziţie dominantă.

'\f

204

!7.2. Transmisia unei comenzi

către

o ie~ire

digitală

Prezentăm

aici un program care rulează pe ESP32, ş1 generează o pagină web simplă, ca în Figura 17.3, cu o casetă de selectare prin care clienţii pot comuta starea unei ieşiri digitale - pinul 2 conectat la LED-ul albastru de pe modul. ,

O

+ a_

*

X

e ;

Pagina web realizata p1·in WebSockets pe ESP32 Digital Out 2

Figura 17.3. Exemplu de pagină web utilizând WebSockets pentru comanda unei ieşiri digitale Prin rularea acestui program, se pot vedea, pe monitorul serial Arduino, sau alt terminal, mesaje text trimise de clienţi, ca în figura 17.4. După resetare, ESP32 încearcă conectarea Wifi la routerul specificat de SSID şi parola, iar când reuşeşte, afişează mesajul "Wi-Fi connected" şi adresa IP locală, fixată static pe router. Când un computer desktop sau un dispozitiv mobil accesează pagina la acea adresă, pe serial apare un mesaj care specifică numărul clientului (începând cu O) şi uri său. Desigur, pagina poate fi apelată din intranet utilizând adresa locală atribuită ESP, sau Internet, ca în figura 17.3, dacă porturile 80 (specifice TCP) şi 81 (pentru WebSockets) sunt redirecţionate de către router aşa cum se arată, de exemplu, în paragraful 2.3. Dând click pe butonul de pc pagina web, clientul trimite un mesaj către server, conţinând numărul socketului, textul informaţiilor şi payload. 205

După

cum se poate vedea în figura 17.4, au fost alese variantele "d21" sau "d20", cu următoarele semnificaţii: • payload[0] este caracterul "d", identificând o ieşire digitală. Această codificare a fost introdusă pentru a distinge mesaje de tip digital de cele de tip analogic care vor avea prefixul "a"; • payload[l], este caracterul "2", indicând numărul pinului GPIO comandat. Această codificare a fost introdusă pentru a distinge comenzile care se adresează diferiţi.tor pini; • sarcina utilă [2], este" I" sau "O", indicând starea acestui pin. 2,_

•

T~rrninal vl.9b • 200412.26 - by Br@y+ ,._

r

r

! t

r

14400 19200

r.

57500115200

t

56000

r

eu&:om

:: ~ ~ !~ , ~= , =

C

r-

HEX

Dd:~ bit: --Pa,rily

Stop ~-' ;:. 1

s

r.

r

6 7

,- odei r-r. ~k

r.

8

("'"~ ~

r"'"

c-

I ASCII î

none

,,_

Dec

r

: t

1.5

X

-Hand:shaikrlg - ~ none :~ RTS/CTS

,-

r

XON.❖Diqi ~al Pin 2
onclick= 'Led2 () type---c"ch eckbox" id-'BlueL ed'
gin: 26px;mar 6px; 2 width: style=" height: Digital Pin 5



Digital Pin 4: type="bu ttor."

id="RedL ed">Dl40 0) { x=O; cont ext.s troke Style ="#d 3d3d 3"; canv as.w idth, O, cont ext.c learR ect(O , canv as.he ight) ; grid () ; cont ext.b egin Path (); conte xt.m oveT o(O, Math .roun d(lSO -adc/ 30))

1) I if {blo c[l] I~~cu ment . getE :.. emen tByid ( "SWl") . style . back grou nd=' Ye:C:iow =~

'

245

else document. getElementByid ( "SWl") . atyle. background=' '; if (bloc[2] == 1) document. getElementByld ( "SW2") . style. background=' Yellow

'. '

else document. getElementByld ( "SW2") . style. background=' '; )

function :...ed2 () if (document.getElement3yid( 'BlueLed') .checked true) msg='d21'; else msg='d20'; connection.send(msg)

==-;

function Led.:J {) if {document .getElementByid 'YellowLed') . c:1ecked true) msg='d51'; else rr.sg='d50'; connection.send(msg}; 1:

function Led4 {) switch (xl) { case O: xl=l; document. getElementByid ( "RedLed") . style. background=' Yel low'; msg='d41'; break; case 1: xl=O; document. getElementByld ( "RedLed") . style. backgroundc-' '; msg='d40';break; connection.send(msg);

function sendRGB(c) switch {c) { case 4: msq = parseint (document. getE:ementByid ( 'r'). value) . toString (1 6) ;

246

msg='O' +

if(msg. length< 2) msq;bre ak g='a4'T msg;ms case 5: msg =

parsein t (docume nt. get.Elem entBy:d ,: 'y') . value) . toStrin g ( l 6) ;

msg~'O'- '-

if(msg. length< 2) msg;ms q='aS'+ msg;bre ak case 2: msg =

parsein t (docume nt. qetElem entByid ( 'b') . value) . toStrin g ( 1

6I ;

msg='O' ~

if(msg. length< 2) msg;ms g='a2'+m sg;break

I connect ion,send (msg};

) ==";

Figura 18.9.

Fişierul

WS _ 3od3oa2idl ia _meter_gauge _ chart.h

În funcţia de recepţie a unui mesaj nou, după afişarea valorii analogice sub fonnă de text, meter şi gauge, pe canvas se trasează o linie între punctul anterior şi cel curent. Abscisa acestuia este incrementată cu un număr de puncte (aici 5) şi se testează dacă marginea din extrema dreaptă a diagramei a fost depăşită. În acest caz, întreaga zonă este ştearsă cu or. instrucţiunea context .. clea:::R ect urmată de redesenarea diviziunil este linie noua şi inserată este Apoi, o instrucţiune begi:1P a tl', () desenată, având o valoare terminală bazată pc valoarea curentă analogică. Pentru aceasta, valoarea maximă a rezultatului conversiei (4095) trebuie scalată printr-o împarţire aleasă în mod corespunzător (aici cu 30, care dă un maxim de 136,5). Apoi, ţinând seama de faptul că un O pentru y este în partea de sus a diagramei, se face o inversiune prin scăderea rezultatului din înălţimea diagramei, 150. Rezultatul este rotunjit cu instrucţiunea Ma th. ::cound şi utilizat pentru a deplasa cursorul pe pânză cu instrucţiunea move':i:o ( J, Ma th. round (:_ SC-AOC / 30) ) . Dacă nu se ajunge la marginea din dreapta a diagramei, noua linie este pur şi simplu trasată cu instrucţiunile . Line'Io şi . sL.roke. Această structură efectuează afişarea periodică a informaţiilor analogice ca pe o diagramă de scanare de tip osciloscop.

247

Se poate observa că. folosind instrucţiunile de canvas, se pot face diferite ajustări pentru a afişa informaţiile analogice, în funcţie de tate, cu preferinţele programatorului, astfel încât să existe o mare flexibili costul unui efort de programare mai mare. Pagina web generată de acest fişier este prezentată în Figura 18.10. iar fişierul Deşi aspectul său nu este superior celui obţinut cu alte tehnologii, ets sunt websoek iei tehnolog ale este mai complex, performanţele de viteză în sabilă în mod clar superioare soluţiilor anterioare, făcând-o indispen aplicaţiile exigente. '

. , te.1.:.::..$1)

-ou

C

1or::tur-

~ t-::. ?~..i..eg.i.i~:i

OlliU.1 Plu l

., 011!1"'1 Pm S

LEO R control:

I l.O Y

< nnrtol.

LEO B COPll'OI: ADC' \ 'aluc ls: 2332

0.-1 0 •.>J>C

Fig ura 18.10. Pagina web creată de fişierul WS_3od3oa2id 1ia_mete r_gauge_chart.h

248