Specializarea: Calculatoare [307222]

Universitatea Petroșani

Facultatea de Inginerie Mecanică și Electrică

Specializarea: Calculatoare

PROIECT DE DIPLOMĂ

Coordonator: Șef lucrări dr.ing.SÎRB VALI

Conf.univ.dr.ing. EGRI ANGELA

Absolvent: [anonimizat]

2019

Universitatea Petroșani

Facultatea de Inginerie Mecanică și Electrică

Specializarea: Calculatoare

SOFTWARE PENTRU COMANDA OGLINZII INTELIGENTE

Coordonator: Șef lucrări dr.ing.SÎRB VALI

Conf.univ.dr.ing. EGRI ANGELA

Absolvent: [anonimizat]

2019

INTRODUCERE

Trăim într-o perioadă în care thehnologia pătrunde tot mai mult în viața noastră. Exemplele sunt numeroase: telefoane, mașini, roboți în producție și multe altele. Majoritatea oamenilor trăiesc cu impresia că undeva în viitor oameni o [anonimizat] a fost născut. Cu alte cuvinte oricât de mult ar face roboți munca oamenilor aceștia nu pot evolua fără ajutorul omului.

Ceea ce o să realizez în acest proiect este un sistem care să fie folosit la un sistem aflat în dezvoltare și anume un sistem pentru o oglindă inteligentă. Am ales această temă pentru a elimina dezavantajele identificate la o [anonimizat]. [anonimizat]-[anonimizat]. Pe scurt deși proiectul funcționează acum poate peste o [anonimizat]. În acest proiect am realizat un sistem hardware prin care omul să poată comunica vocal cu oglinda inteligentă. [anonimizat]. Inițial oglinda a fost dezvoltată pentru raspberry pi 2/3, [anonimizat]-source se poate observa că în momentul instalări o să primiți erori de la sistem datorită faptului că debian( sistemul pentru raspberry pi 2/3) [anonimizat]-source caută să folosească ceva ce nu mai este disponibil. Software-ul pentru oglindă pe care am să îl realizez o [anonimizat], se poate folosi calculatoare vechi pe care omul le aruncă dacă observă că calculatorul nu mai face față la cerințele normale pe care el le foloește. Este o metodă bună de a refolosi ceva vechi pentru a face ceva nou.

Tot acest proiect poate fi realizat cu componente disponibiele în comerț și cu o investiție destul de mică financiar. [anonimizat].Capitolul trei a fost dedicat strict oglinzii inteligente iar capitolul patru pentru comanda vocală a oglinzi inteligente.

CAPITOLUL 1

HTML CSS și JavaScript

Html

HTML l-am folosit in cadrul lucrarii mele pentru a realiza oglinda inteligentă. HTML este un limbaj standard pentru crearea paginilor web sau aplicațiilor web. Acesta vine însoțit mereu de coduri java și css pentru funcționalitate și aspectul plăcut al pagini. Doresc ca oglinda pe care o [anonimizat]. De aceea în această parte o să realizez exemple cu html pentru a vedea cum se comportă anumite elemente ce le voi folosi mai târziu.

Primul pas este să creez o pagină html care este alcătuită din două elemente și anume zona head și zona body. Aceste două zone pot fi însoțite alte elemente cum ar fi detali despre modul cum ar trebui să arate și să funcționeze pagina, imagini, text, sunete și multe altele. În continuare o să realizez pagini html. Mediul de dezvoltare poate fi orice editor de text, eu o să folosec Notepade++. Am ales notepade++ deoarece pot să scriu cod pur, alte medii de dezvoltare pot să aibe setări prestabilite pentru paginile html de care eu să nu fiu conștient. Ca browser o să folosesc Google Chrome, acesta vine instalat cu toate elementele nevesare pentru dezvoltarea de pagini html.

Pentru început am creat un folder pe ecran și l-am denumit ”html text”. Am deschis mediul de dezvoltare și am scris codul din fig.1.1.

Fig.1.1.Prima pagina html

Fig.1.2.Salvarea pagini html

În continuare am navigat la File Save As (fig.1.2.) după ce am dat click o să apară o fereastră în care cere să introduc numele fișierului, poate fi orice nume urmat de ”.html” eu i-am dat denumirea de index și am pus la final ”.html” astfel am creat prima pagină html(fig.1.3.). Am salvat în folderul creat mai devreme, ”html test”. Acum pot intra în folderul respective și daca execut dublu-click pe pagină aceasta se va deschide în browser (fig.1.4.).

Fig.1.3 Salvarea ca paină html

Fig.1.4 Rezultatul codului scris

Acum am creat prima pagină html. O să adăugăm text de diferite mărimi, imagini, videoclipuri și multe altele. Este important să țin cont că în html orice tag/diviziune începe cu <”numele diviziuni”> și acelasți tag/diviziune urmată de </”numele diviziuni”> diferența fiind că la început nu aveam acest simbol: ”/”. Ca și exemplu dacă mergeți la fig.1.1, avem pagina html și tot ceea ce curpinde ea este între cele două taguri <html></html>. La fel este pentru zona body, tot ceea ce cuprinde este între <body></body>.

În fig.1.5. putem vedea că titlul pagini este denumirea pe care i-am dat-o la început, iconița websitului nostru este doar un simbol oferit de google chrom pentru websiturile care nu au icoiță. În fig.1.6. puteți vedea că am adăugat iconță la websitul și i-am setat și un nume, pentru a face așa ceva am scris codul din fig.1.7. și am salvat modificările cu: CTRL+S(File-> Save).

Fig.1.5 Pagina fără titlu și iconiță

Fig.1.6 Pagină cu titlu și iconiță

Fig.1.7 Codul pentru adăugarea de titlu și iconiță

După cum am precizat fiecare tag începe cu <”numele tagului”></”numele tagului”>, putem vedea așa ceva la tagul de titlu iar la tagul de link pot să îl lăsăm așa cum este. Există anumite excepții asta este una din ele. Important este că acestă excepție nu este datorită mediului de dezvoltare.

În fig.1.8. am realizat editări de text specifice documentațiilor pe care le scriem la referate sau proiecte stiințifice cum ar fi textul: italic, subliniat, tăiat, bolduit și centrat. Tagul <br> este folosit pentru a trece la o linie nouă.

Fig.1.8. Exemplu de editaree de text

În continuare o să prezint un exemplu cu mărimile de text disponibile în html( fig.1.9.).

Fig.1.9. Exemple de mărime de text

Din câte se poate vedea am mărimi de la 1 la 6. Ceea ce am mai remarcat la acest exemplu este că deși nu am folosit comanda <br> acesta a trecut la linie nouă în mod automat.

În continuare o să adăuga un buton, un link și o imagine.

Mai jos este fig.1.10 cu codul pentru un buton, link și o imagine. Imaginea am luato de pe google.

Fig.1.10 Buton, imagine și link

După cum se poate vedea pentru buton am pus numele acestuia între cele două taguri iar pe ecran se vede efectul la fel și pentru link, textul care doresc să apară este între taguri iar linkul la care suntem direcționați este de la youtube(YT). Imaginea are un tag special care se încheie cu ”/” înainte de a închide primul tag, „alt” este pentru denumirea imagini, „src” este locul unde se află imaginea iar width și height este mărimea cu care va apărea pe pagina html imaginea. Dacă imaginea se află în același folder cu pagina html este în regulă să las numele acesteia urmat de formatul imagini, în cazul meu imagine are formatul png.

Până acum am realizat exemple practice cu html, acum o să combinăm exemplele la ceea ce am realizat mai sus. Aici este partea mai importantă, în momentul în care elementele se unesc acestea pot să își influențeze setările de implicite.

În fig.1.11. am prezentat un exemplu de combinare a ceea ce avem mai sus.

Fig.1.11 Combinarea el

ementelor html

La linia nr.9 putem vedea că am realizat un text bolduit, italic, subliniat și centrat în același timp.

Între liniile 13 și 17 este codul pentru a crea un buton care atuncea când este apăsat să ne ducă la pagina de YT. Butonul este centrat iar textul din el este italic și bolduit. Dacă tagurile de <center></center> se aflau între tagurile de buton atuncea doar ceea ce era în buton era centrat iar butonul se afla în partea stângă.

Între liniile 20 și 22 am un link care conține un text bolduit, italic, centrat și subliniat. Tagul de center poate fi pus să cuprindă tagul de link sau linkul să cuprindă tagul de center ca în cazul meu, efectul va fi aceși.

Între liniile 26 și 28 avem un exemplu de imagine centrată. Când dăm click pe imagine aceasta ne va duce la pagina dorită. Eu am ales linkul de la YT dar poate să fie orice link.

O să mai realizez un exemplu pentru a vedea cum pot lua un videoclip de pe YT și să îl implementez în pagina mea.

Pentru început am navigat la YT și dat click pe un videoclip. Lângă butonul de like și dislike am un buton denumit ”Trimite”.

Fig.1.12 Implementare unui videoclip de pe TY pe propria pagină web partea 1.

După ce am executat click pe buton o să apară o nouă fereastră ca în fig.1.13. Am executat click pe butonul încorporează.

Fig.1.13 Implementare unui videoclip de pe TY pe propria pagină web partea 2.

O nouă fereastră a fost deschisă ce arată ca în fig.1.14.

Fig.1.14 Implementare unui videoclip de pe TY pe propria pagină web partea 3.

Aici am preluat linkul marcat cu roșu în pagina html, după care am salvat și am încărcat iară pagina. Rezultatul este cel din figura fig.1.15.

Fig.1.15 Implementare unui videoclip de pe TY pe propria pagină web partea 4.

CSS

CSS sau Cascading Style Sheets este un standard folosit de documentele html pentru realizarea unui aspect plăcut al pagini. Acest standard poate fi folosit în fișierul html în zona head iar comenzile se pun între tagurile <style></style> sau comenzile de css se pot pune în diviziunile în care dorim să modificăm aspectul normal sau standard al unui element sau creem un fișier separate cu extensia ”.css” și îl implementăm în pagina noastră. Am văzut deja exemple de așa ceva doar că acestea au fost realizate cu HTML. Acum o să realizăm o editare de text, imagine și butoane folosind CSS.

Pentru început deschid o filă nouă în notepade++ și o să o salvez cu extensia ”.css” exact ca în figurile 1.2 și 1.3 doar că de data aceasta nu scriu nimica în fișier ca în fig.1.16.

Fig.1.16.Creerea unui fișier css

Am salvat fișierul în același folder cu pagina html. În continuare se afișează codul din fig.1.17.

Fig.1.17 Legătura către un fișier css

Aici am adăugt un fișier css în pagina html. Calea către fișier trebuie specificată dar daca fișiereul css este în același director cu pagina html este suficient să las numele acestuia urmat de extensia sa. Efectul de la ce am scris în fișierul css este că zona body va fi albastră, rezultatul este în fig.1.18.

Fig.1.18 rezultatul codului din fig1.17

In continuare o să creez diviziuni în pagina html. Fiecare diviziune o să aibe dimensiunile specificate în css. Vedeți codul din fig.1.19.

Fig.1.19.Creerea diviziunilor

Din câte se poate vedea am creat 4 diviziuni 3 dintre ele avânt dimensiunea de 100px pe 100px(px=pixeli) la diviziunea 1 am specificat faptul că culoare de background trebuie să fie galbenă iar codul de pe linia 8 spune că următoare fiviziune din pagină trebuie să înceapă din partea stângă a divziuni 1. La diviziunea 2, aceasta are speficicată dimensiunile, culoare de backgorund și marginile, marginile reprezintă distanța dintre marginea pagini html și diviziunea noastră, acolo este un exemplu prescurtat pentru margini, primul 0 reprezintă topul, partea de sus, a pagini html, al doilea 0 reprezintă partea dreaptă a pagini html, al treila reprezintă partea de bottom, partea de jos, iar ultimul reprezintă partea de stânga. Această comandă alături de comanda de la linia 8 relizează urmatorele: următoare diviziune este ce-a cu numarul doi după diviziunea 1, daca nu puneam marginea de stânga atuncea cele două diviziuni rămâneau suprapuse, cu linia de margini însă diviziunea noastră merge în zona de stânga a pagini noastre web( tot de acolo începe și divizunea nr.1), numără 100px și după afișează a doua diviziune. A treia diviziune are și ea 100px pe 100px, culoarea roșu iar pozitia este setată pe absolute. Poziția setată pe absolut înseamnă că nu ține cont de nici o setare de la alte diviziuni, ca și exemplu diviziunea 2 tine cont de setarea făcută la diviziunea 1 de pe linia 8. De asemenea aceasta va ține cont doar de limita pagini html astfel i-am setat marginile de top și left să mute diviziunea cu 200px ca să poată vedea efectul. Ceea de-a patra diviziune are doar dimensiunea de 300px pe 300px și în loc de culoare i-am lăsat o imagine ca fundal. Imaginea este de pe internet. Dacă imaginea este în același folder cu fișierul css nu este nevoie să specific calea către imagine( ”C:/MyComputer/***/Desktop/html teste/test.jpg”) și specific formatul imagini, în cazul meu se vede că este un JPG. Rezultatul la acest cod poate fi văzut în fig.1.20.

Fig.1.20 Rezultatul codluri din fig1.19.

În continuare am realizat tipuri de text, utilizând css, fig.1.21.

Fig.1.21 Editarea de text utilizând css

În figură putem vedea că am modificat aspectele inițiale ale tipurilor de scris h1, h2 și h3.

Pentru h1 am setat culoarea albastră, textul să fie centrat, mărimea să fie de 150px, i-am pus și umbra textului, am setat ca toate literele să devină din litere mici în litere mari și textul să fie subliniat. În pagina html doar am pus tagul de h1 fără a fi nevoie să mai pun alte modificări.

Pentru h2 am setat culoarea verde a textului, textul să fie aliniat de la dreapta, fontul/mărimea textului să fie de 150px, primul cuvânt să înceapă cu literă mare și să fie subliniat deasupra.

Pentru textul h3 am setat culoarea verde, am aliniat textul de la stanga( textul vine normal aliniat de la stanga doar că alinierea de texte poate fi făcută și în diviziune o să vedem mai tarziu de ce am făcut așa ceva), am mai setat ca toate literele mari să fie litere mici și la final am tăiat textul cu o linie( același effect îl realizam cu tagul de strike în html). Aceste text pot fi însoțite de setări de margini dacă dorim.

Mai jos în fig.1.22. se poate vedea rezultatul codului scris.

Fig.1.22 Rezultatul codului din fig.1.21

În următorul exemplu de css am combinat diviziunile cu tagurile ca să pot vedea ce efecte există între ele.

Fig.1.23.Exemplu de css pentru odinea efectelor

În acest exemplu am realizat doua diviziuni ca și înainte unde am specificat culoarea de funal, dimenziunea diviziuni, modul de aliniere al textului și culoarea textului cu marimea sa. Am mai editat două tipui de text h1 și h3. Se poate vedea că în prima diviziune am culoarea la text setată pe alb, marimea la text setată pe 10 dar mai jos am specificat că h1 va avea mărimea 40 iar h3 va avea mărimea 50. În diviziunea respectivă dacă o să pun textul h1 acesta va respecta setarea făcute în diviziunea h1 din fișierul CSS la fel și pentru textul care se află între tagurile h3.Dacă nu exită detali legate de text atuncea orice text folosesc h2/4/5/6 va avea setările implicite asupra cărora se aplică setările pentru divizune. La fel se întâmplă și pentru divizunea numărul 2.Textul va respecta ceea ce am setat pentru divizune doar dacă nu am făcut setări la un anumit tag și am pus text între tagurile respective. Rezultatul codului de deasupra poate fi văzut în fig.1.24.:

Fig.1.24 Rezultatul codului din fig.1.23

Alt lucru important la css este noțiunea de padding, reprezintă distanța dintre maginea diviziuni și conținutul diviziuni. În fig.1.25 se poate vedea codul pentru exemplu de padding. În fig.1.26. se poate vedea rezultatul codului.

Fig.1.25 Exemplu de cod pentru padding.

Fig.1.26 Rezultatul codului din fig.1.25

În toate exemple date se poate vedea că am margini pentru anumite zone, deși eu nu am specificat în CSS mărimea la margini. Acest lucru se întmplă în mod automat deoarece când am legat fișierul html la css am sciris rel="stylesheet", această comandă ne dă o margine de 8px și este necesară ca să legăm fișierul html de fișierul css. Pentru a modifica așa ceva tot ce am de făcut este ca la zona body în css să spefic margin:0 ca în fig.1.27. În fig.1.26 se poate vedea cum se vedea înainte și în partea stângă din fig.1.27 se poate vedea efectul după ce am setat margini pe 0.

Fig.1.27 Setarea pentru margini.

1.3. JavaScript

JavaScript prescuratat și JS este un limbaj de programare de nivel înalt.

În cadrul acestui limbaj o să realizez mai multe exemple pentru a putea întelege modul de lucru într-un browser al acestui limbaj, o să fac programe deoarece acesta este cel ce asigură funcționalitatea. CSS se ocupă de dizain alături de html iar js se ocupă de funcționalitate alături de html.

Deschid prima pagină realizată înainte și șterg tot ceea ce conține ca în fig.1.28., am las tagul de titlu și de inconiță la pagina web.

Fig.1.28 Pregătrirea pentru lucrul cu js partea 1

Execut click pe pagina web pe fundal și am apăsat F12 sau CTRL+ SHIFT+I sau se poate merge la Customize and control Google Chrome->More tools->Developer Tools ca în fig1.29.

Fig.1.29 Pregătrirea pentru lucru cu js partea 2

O să apară o fereastră ca ce-a din fig.1.30.

Fig.1.30 Pregătirea pentru lucru cu js partea 3

De aici încolo începe programul pentru lucru cu js. Primul program care se face în orice limbaj de programare este cel cu ”Hello Word”. Pentru a face așa ceva am merg în pagina html și scris codul ca în fig.1.31.

Fig.1.31 Programul ”Hello World” în js

Din câte se poate vedea acum sunt pe Elements în setările de develop, o să selectez consolă pentru a vedea rezultatul ca în fig.1.32.

Fig.1.32 Schimbați de la Elements la Console

Rămân în consolă pentru moment, programele de consolă sunt mai bune în momentul în care se dorește întelegerea de elemente ale unui limbaj nou în special când urmează să lucrul cu elemente mai complexe.

În continuare realizez programe pentru lucru cu date numerice. În figura de mai jos este prezentată suma a două numere întregi și numere care nu sunt întregi.Din câte se poate vedea am folosit ”var” pentru a declara numerele pe care urmează să le folosesc, fig.1.33. Așa declar o variabliă în cadrul lui JavaScript.

Fig.1.33 Lucrul cu variabile partea 1

În figura 1.34, se poate vedea că am folosit tot ”var” pentru a declara string-uri după care am adunat cele două rezultate, acesta este un avantaj pentru mine deoarece pot lucra intuitive cu js.

Fig.1.34 Lucrul cu variabile partea 2

În figura 1.35. am adunat trei string-uri cu un integer. Nu am primit nici o eroare. La final am mai declarant o variabile e și f la care i-am dat o valoare destul de ciudată.

Fig.1. 35 Lucrul cu variabiliele partea 3

În prima parte variabiele a b și c sunt identificate ca string și integer iar pentru e, variablia începe cu un string deci tot ce este după primul string va fi tratat ca un string. Pentru variabila f începem cu un număr întreg, aceasta va fi tratată ca un număr până ajunge la Ana, acolo o să devină string.

O mare greșeală este ce-a din fig.1.36

Fig.1. 36 Greșeală de logică întâlnită

Se poate vedea că am început cu adunarea unui număr la un string, rezultatul este un string, am adunat același număr la o variabilă care începe numeric dar se termină ca string, rezultatul este același adunarea unui număr cu un string nu o să se efectueze 10+50 și va afișa ”60 text”, iar la adunarea celor două variabile b și c o să am două stringuri. Rezultatul se poate vedea în fig.1.36.

Am trecut la structurile ”while”, ”for” și ”if”.

Fig.1.37 Instrucțiunea ”if” și ”while”

În fig.1.37 se poate vedea un exemplu de ”if” și ”while”. Condițiile pentru ”while” și ”if” sunt aceleași, „while” execută ceva câtă vreme este îndeplintă o condiție, iar ”if” dacă condiția este adevărată,”a” este mai mare ca ”b”, atuncea afișăm b. Diferența este că ”while” se execută de până condiția nu mai este adevărată iar în ”if” doar o singură dată. În while adunăm la valoarea lui ”b” câte 1 până acesta va deveni mai mare ca ”a”. Rezultatul poate fi văzut în partea stângă a fig.1.37.

Alte condiții pot fi:

”<” – mai mic și mai mare;

”==” – egalitate;

”!= ” –diferit;

”<= ”-mai mic sau egal;

”>=” -mai mare sau egal.

Acestea sunt cele standard pe care le pot recunoaște din alte limbaje cum ar fi python sau c++. Limbajele de programare sunt foarte asemănătoare doar sintaxa diferă de aceea realizez ceva exemple, să văd diferențele pentru ca mai târziu să trec la problemele mai complexe.

În figura1.38 se poate vedea un exemplu al instrucțiuni ”for”, putem vedea că ”i” este declarat în interiorul instrucțiuni for. Acesta putea fi declarat și în afară ca și ”var i” sau ”var i=1” iar în ”for” nu trebuia să mai pun ”i=1”.

Fig.1.38 Instrucțiunea ”for”

Am prezentat cum pot afișa mesaj în consolă, cum putem declara o variabilă și un șir de caractere. Acum o să văd cum pot afișa mesaje în pagina html. Pentru început o să refac programul de ”Hello Word” de la fig.1.31. În fig.1.39 se poate vedea că ”console.log();” a devenit ” document.getElementById("…").innerHTML = …;”. Pe lângă așa ceva am mai adăugat și o comandă de funcție ”window.onload”, această comandă încarcă pagina cu tot ceea ce are ea: css, javascrip, imagini și multe altele.În partea de ”body” am realizat o diviziune și am setat un id. Id-ul trebuie specificat și în noul nostru ”console.log” din câte se poate vedea.Pot să specific ce doresc ca și înainte cu ”console.log”. Important este de reținut că orice aș avea între cele două taguri, acel conținut nu va fi văzut.

Fig.1.39 Programul ”Hello Word” în pagina html

Am modificat exemplul de la programul anterior și am utilizat o instrucțiune ”for”.

Fig.1.40 Afișarea în consolă vs afișarea în pagină

Se poate observa că în consolă îmi este afișat ”i” de la valoarea 1 până la valoarea 10 dar în prgină doar valoarea 10. Acest comportament este normal, instrucțiunea ”for” este parcursă doar că eu văd doar rezultatul final. Mai precis la început este afișată valoarea 1, acestă valoare va fi înlocuită de valoarea 2 și tot așa până se termină instrucțiunea. Este la fel ca la program ”Hello Word” unde textul din diviziune este înlocuit de cel din comanda pentru afișare.

Am văzut că pt avea și JavaScript în pagina html dar la fel ca la CSS pot avea scripturi de js. Creez un js unde codul de js este spearat de cel ce html exact ca al css.

Deschid o filă nouă în notepad++ și o să îl salvez cu extensia ”.js”. L-am denumit ”sc.js” fig.1.41.

Fig.1.41.Creeerea unui script java separat de html

Am salvat scriptul în același dosar/forlder/director cu pagina html pe care am lucrat până acum.

După ce am salvat, am navigat la pagina HTML și am adăugat următoarea linie de cod: ”<script src="sc.js"></script>”. În src este numele scriptului meu și extensia acestuia, dacă este în alt director decât cel cu pagina atunci trebuia să specific calea către el. O să iau coul din fig.1.40, cel care aflat între tagurile de script și o să îl pun în noul fișier js creat. Fișierul va arăta ca în fig.1.42 iar pagina html și rezultatul se poate vedea în fig.1.43.

Fig.1.42.Interirorul primul js creat

Fig.1.43.Cum arată pagina html după ce am mutat codul de script

Din câte se poate vedea nu este nici o diferență între rezultatul de dininate și ceea ce avem acum. În continuare merg în fișierul js și scriu codul din fig.1.44.

Fig.1.44.Afișare data și ora curentă.

Tot ce este nevoie să fac este să schimb ”i” de la comanda pentru afișare cu ”Data()” acesta vă va oferi data și ora curentă.

Fig.1.45.Eroare apărută la pornirea pagini.

În cadrul ferestrei pentru ”developer tools”, aceasta este utilă când programaez pentru că pot vedea mesaje de eroare apărute în caz că codul scris nu este bun sau are errori, exemplu în fig1.45. Din câte se poate vedea în pagina html nu am nici o eroare doar în modul pentru dezvoltator pot să văd erorile. Din ceea ce am făcut până acum se poate vedea că în aceea fereastră de dezvoltare am destul de multe detali despre pagina realizată, se pot vedea și setarile implicite pentru css și html în cadrul pagini html. Dacă vă întoarceți la fig1.26 puteți vedea că aceea distantă de margini implicită era de 8px, după ce am setat margini pe 0 aceasta arăta ca în fig.1.27. Ca să văd așa ceva am verificat pagina de dezvoltator și am văzut setarea implicită.

În acest capitol am realizat exemple pentru a putea vedea modul de lucru al setarilor implicite pentru pagini la CSS, schimbarea automată pentru anumite variabile din integer în string și cea mai importantă separarea fișierelor de HTML, CSS și JavaScript.

CAPITOLUL 2

Ptyhon

2.1. Informații generale

Python este unul dintre puținele limbaje de programare de nivel înalt care a început să fie predat și în anumite centre universitare din România. Acest limbaj a fost creat în 1991 de către Guido van Rossum. Python este limbaj de programare dinamic, asta înseamnă că în timpul de execuție a unui program acesta execută mai multe comportamente comune de programare pe care limbajele de programare statice le efectuează în timpul compilări. Acest comportament ar putea include extinderea programului, adăugarea unui nou cod, exsinderea obiectelor create și a definișiilor sau modificarea tipului de sistem. Python mai este și un limbaj GC( garbage collection). GC este o formă de gestionare automată a memoriei. Prin GC se încearcă recuperarea memoriei ocupată de un obiect care nu mai este utilizat de program. Acest tip de colecție a fost creat în 1959 pentru a simplifica gestionarea manuală a memoriei în Lisp.

Fig.2.1.Logo python

În continuare o să instalez python 3. Versiunea pe care o să folosesc este 3.7.3, ultima apărută pe websitul oficial( https://www.python.org/). Python este gratis.

Fig.2.2.Pagina oficiala pentru a descărca python

Porgramul se intalează ușor, după instalare o să merg butonul de start și caut python. Ceea ce doresc să deschid este ”IDLE( python …)” ca în fig.2.3.

Fig.2.3.IDLE(Python)

Se deschide o fereastră nouă ca cea din fig.2.4. În fig.2.5 am realizat deja un program de adunare a două numere. Tot ce am scris a fost ”2+3” și am apăsat ENTER iar python a afișat rezultatul.

Fig.2.4.Interfața IDLE

Fig.2.5. Suma a două numere.

În continuare am prezentat o listă cu toate instrucțiunile cunoscute din python, majoritatea o să mă ajute pentru programul ce urmează să îl realizez. La fel ca la capitolul 1 o să realizez exemple practice cu python pentru a putea vedea cum se comportă acesta.

Lista cu instrucțiuni:

-instrucțiunea ”if” este folosită pentru o condiție, aceasta vine și cu ”else” și ”elif”;

-instrucțiunea ”for” aceasta iterează în funcție de un obiect, estecută un cod de instrucțiuni de atâtea ori cât specifică ofiecutl după care se iterează;

-instrucțiunea ”while” execută un cod câtă vreme o condiție este adevărata;

-instrucțiunea ”try” aceasta este folosită pentru a ridica excepți, se încearcă realizarea unui bloc de instrucțiuni dacă nu se poate se aruncă o excepție;

-instrucțiunea ”rise” este utilizată pentru a ridica o excepție;

-instrucțiunea ”class” execută un bloc de instrucțiuni și poate fi atașat la un namespace de clasă, aceasta este utilizată mai mult pentru programarea orientată pe obiecte;

-instrucțiunea ”assert” este utilizată în timpul ”debugging”, acest termen se referă la depanarea programului pentru a verifica condiția care ar trebui să fie aplicată în timpul programului;

-instrucțiunea ”yield” returnează o valuare de la generarea unei funcții, acesta este și operator de la verisunea de python 2.5 în sus, mai este folosit pentru a implementa corutinele;

-instrucțiunea ”import” este folosită pentru a implementa module care au funcții sau variabile ce pot fi folosite în programul curent, există mai multe modalități de a folosi ”import” o să le vedem curând.

-instrucțiunea ”print” aceasta este folosită pentru a afișa un rezultat, începând cu python 3 aceasta sa schimbat în ”print()”.

Acestea au fost instrucțiunile pe care eu le-am considerat mai importante și pe care consider că poate să îmi fie utile să le folosesc.

În python avem următoarele tipuri de variabile:

-”bool” valori booleene, valorile pot fi ”Frue” sau ”False”;

-”bytearray” secventă de octeți, exemplu: bytearray([119, 255, 70, 29]);

-”bytes” tot secventă de biți, se folosește la fel ca la ”bytearray”;

-”complex” numere complexe: 1+2.9j;

-”dict” vectori asociativi, poate conține valori diferite, exemplu: { ’ val’: 9.99, 50: False};

-”float” are valori cu precizie ridicată, exemplu: 1.2012141;

-”frozenset” set neordonat de date care nu conține valori duplicate, exemplu: frozenset([1.0,’string’,True]);

-”int” valori de numere intregi, exemplu: 1, 2, 3, 4, 5;

-”list” listele sunt variabile ca pot conține valori diferite, mixe, exemplu: [10‚’exemplu’,False];

-”tuple” acesta poate conține valori diferite ca ”lista” sau ”frozenset”, exemplu: (10, ’exemplu’, True).

Acestea au fost tipurile de date care întâlnite în python, la fel ca și la instrucțiuni acestea o să mă ajute mai târziu.

Una dintre cele mai bune avantaje ale lui python o reprezintă librăriile, bibliotecile cu care vine. În cadrul aplicațiilor pentru internet sunt acceptate multe protocoale cum ar fi MIME și HTTP. Acesta include module pentru creerea interfețelor graficie cu utilizatorul, conectarea la baze de date relaționale, generearea numerelor de tip pseudorandomului, aritmetică cu zecimale arbitrare de precizie, manipularea expresiilor regulate și testarea unitățiilor. Unele părți din librăriile standard conțin specificații, dar majoritatea modulelor nu au așa ceva. Acestea sunt specificate prin codul, documentația internă și seturile de testare. Cu toate că cea mai mare parte a bibliotecii standard este codul Python Cross-Platform( PCP) doar câteva module necesită modificări sau rescrieri pentru implementări variate. În luna martie din anul 2018, Ptyhon Package Index(PyPI), depozitul pentru software-ul Python, conținea peste 130000 de pachete cu un grad ridicat de funcționalitate, aceste pachete includ:

-Interfețe grafice cu utilizatorul

-Frameworks pentru pagini web

-Multimedia

-Baze de date

-Rețele

-Teste pentru frameworks

-Automatizare

-”Scraping” pentru paginile web

-Documentație

-Administrarea sistemului

-Procesarea textului

-Procesarea imaginilor.

[Debilla, Erik. Modulele contează. ModuleCounts. Adus 20 septembrie 2017]

Alt aspec al limbajului python despre care doresc să vorbesc este ”cross-compilers” către alte limbaje de programare. Acest lucru, se referă că python poate fi compilat către alte limbaje de programare de nivel înalt. Mai jos am specificat exemple în acest sens:

Jython compilează în cod binar Java, codul va putea fi executat de orice implementare a unei mașini virtuale Java;

IronPython are o formă asemănătoare dar care ajută la rularea programelor Python în .NET Common Language Runtime( NCLR);

Limbajul RPython poate compila în C, cod binar Java sau Common Intermediate Language(CIL) și este utilizat pentru a construi o interpretare PyPy a limbajului Python;

Pyjs compilează Python la JavaScript;

Cython compilează Python la C și C++;

Numba folosește LLVM pentru a compila Python în cod mașină;

Pythran compilează Python la C++;

Pyrex compilează la C;

Shed Skin compilează la C++;

Google’s Grumpy compilează la Python la GO;

MyHDL compilează Python la VHDL;

Nuitka compilează Python la C++.

Am dat mai mult de zece exemple de compilare de la python către alte limbaje de programare. Acestea fiind zise se poate vedea ce înseamnă”limbaj de programare de nivel înalt” termenul în engleză fiind ”high-level programming language” prin posibilitățile cu care acesta vine.

2.2. Proramare în python

Am realizat o serie de exemple practice. Primul progam realizat este programul clasic cu ”Hello word” doar că eu l-am realizat în limba română. În fig.2.6. am accesat consola python. Aceasta se accesează la fel ca IDLE. Se poate vedea în fig.2.7.

Fig.2.6.Consola python

Fig.2.7.Accesarea consolei python

Același exemplu l-am realizat accesând python din comand prompt. În fig.2.8 și 2.9 se poate vedea că am deschis command prompt și am scirs cuvântul ”python” am apăsat ”Enter” și am intrat în consola python unde am scris ”pint(’Salutare lume!’)” după care am apăsat din nou”Enter”.

Fig.2.8. Deschidere Command Prompt

Fig.2.9. Programul ”Salutare lume” în consola python deschisă prin Command Prompt

Fig.2.10. Programul ”Salutare lume” folosind IDLE Python

În fig.2.10. am deschis IDLE Python unde am scris aceeași linie de cod și am apăsat ”ENTER” pe tastatură. Rezultatul este același.

În continuare creez un fișier de tipul ”.py” și îi dau un ”Run” codului din interior. Pentru aceasta am folosit ”File->New File” ca în fig.2.11.

Fig.2.11. Creerea unui fișier de tipul ”.py” partea unu

După ce am executat click pe ”New file” sa deschis o fereastră nouă ca în fig.2.12. În aceea fereastră am scris aceeași linie de cod.

Fig.2.12. Creerea unui fișier de tipul ”.py” partea doi

Am navigat la ”Run”>”Run Module” ca în fig.2.13.

Fig.2.13. Creerea unui fișier de tipul ”.py” partea 3

În continuare calculatorul o să afișeze următoarea fereastră( fig.2.14.), unde am dat click pe ”OK”.

Fig.2.14. Creerea unui fișier de tipul ”.py” partea 4

Python cere salvarea fișierelor de tipul ”new file”, după salvare acesta va continua să execute ”Run Module” în fig.2.15. se poate vedea rezultaul după ce am salvat.

Fig.2.15. Rezultatul de la ”rularea” programului din fișierul ”.py”

Se poate observa că am revenit la fereastra de IDLE unde a fost afișat direct rezultatul de la programul creat. Până acum am văzut că am trei moduri de a accesa și a scrie cod în python. Destul de util întrucât pot să am un mediu asemănător altor limbaje. Ultimul lucru pe care doresc să îl adaug este cum ies din python în cazul în care am deschis python în command prompt fără a fi nevoie să închid command prompt. Acest lucru poate fi realizat prin comanda ”quit()” după care am apăsat ”ENTER” pe tastatură. Exemplu în fig.2.16.

Fig.2.16. Închiderea programul python în command prompt

În continuare lucrez în fișierul .py pe care l-am creat și am realizat suma a două numere fără a speficia tipul de date. Eexemplu în fig.2.17.

Fig.2.17. Suma a două numere fără să specific tipul de date

Se poate vedea că nu am specificat faptul că am două numere de tipul ”int” la fel am făcut și la JavaScript doar că acolo am pus ”var” în fața variabilelor, aici nu mai este nevoie să scriu așa ceva. De asemena aici nu pot să realizez ca la js adunarea unui int la un string și să rezulte un string, pot ”aduna” un string la un string sau un int la un float sau un int la un număr complex, rezultatul poate fi văzut în fig.2.18.

Fig.2.18. Lucrul cu variabilele în python

Se poate vedea că python returnează o eroare în momentul când doresc să adun un int la un string dar în restul cazurilor nu există o problemă.

În fig.2.19. este un exemplu al instrucțiuni ”if” alături de ”else” și ”elif”.

Fig.2.19. Instrucțiunea ”if”, ”elif” și ”else”.

În fig.2.20. se poate vedea un exemplu al instrucțiuni for.

Fig.2.20. Instrucțiunea ”for”.

Se poate vedea că am afișat numerele din invervalul unu-trei. În următorul exemplu, fig.2.21. se poate vedea cum afișez numerele dintr-un interval specificat.

Fig.2.21. Afișare numerelor dintr-un interval specificat folosind instrucțiunea for.

Se poate observa că am specificat intervarul între parantezele rotunde. O să realizez și exemple cu șiruri de caractere. Se poate vedea un exemplu în fig.2.22.

Fig.2.22. Șiruri de caractere.

Se poate vedea că pentru fiecare ”x” din șirul de caractere am cerut să fie afișat. În exemplu din fig.2.23. am un vector care conține șiruri de caractere. Am afișat fiecare element din vector cu instrucțiunea for.

Fig.2.23. Afișarea unui vector.

Fig.2.24. ”break” în for

Se poate vedea că am pus o condiție aceasta când devine adevărată bucla for este spartă. Acest comportament este întâlnit mai mult în C, C++ în buclele while. Un alt exemplu este cel din fig.2.24.

Fig.2.25. ”else” în for

Acum am adăugat ”else”. ”else” este folosit de regulă în orice limbaj de programare doar în ”if” acum am o excepție. Pot folosi else și în ”for”, ceea ce nu am mai văzut la alte limbaje de programare. Cred că acum iar se mai conturează aceea idee cu ”limbaj de nivel înalt”.

Mai jos am realizat un exemplu al instrucțiuni ”while”. Instrucțiunea while lucrează în același mod ca și ”for” doar că trebuie să incrementăm manual spre deosebire de ”for” care face așa ceva pentru mine. Tot ceea ce am realizat la ”for” se poate realiza și la while, acest lucru în cadrul numerelor, la șirurile de caractere este o altă poveste. Pentru ceea ce urmează să realizez mai târziu este deajuns exemplu din fig.2.26.

Fig.2.26. Instrucțiunea ”while”.

O instrucțiune pe care am folosit-o și este foarte importantă este ”try”. Este importantă deoarece pot vedea erorile apărute și pot să îmi setez proprile excepții pe care le pot aborda într-un anumit mod pentru a le rezolva. În fig.2.27. se poate vedea un exemplu de ”try” care aruncă o excepție. Excepția este aruncată pe motiv că x nu a fost definit. Pentru a vedea așa ceva am realizat exemplu din fig.2.28. Am folosit ”NameError” pentru a afișa un mesaj de eroare și un mesaj pentru alte erori.

Fig.2.27. Instrucțiunea ”try”

Fig.2.28. Instrucțiunea ”try” +”NameError”

Acum o să folosesc ”else” pentru try. În exemplu din fig.2.29 se poate vedea un astfel de exemplu. Dacă totul merge bine o să afișez un mesaj.

Fig.2.29. Instrucțiunea ”try” + ”else”

Următorul exemplu este în fig.2.30., unde se poate vedea că am adăugat ”finally” la instrucțiunea ”try”. Acest lucru este util în momentul când lucrez cu un cod mai complex deoarece pot să văd când ies din ”try”.

Fig.2.30. Instrucțiunea ”try” + finalul acesteia.

În continuare am implementat o bibliotecă. În exemplu din fig.2.31. se poate vedea că am implementat ”webbrowser”. Această bibliotecă vine instalată o data cu python și este folosită pentru a lucra cu browserul implicit al calculatorului, în cazul meu google chorme.

Fig.2.31.Importul unei biblioteci

Dacă dau un ”Run” la exemplu din fig.2.31. borwserul implicit se va deschide și va naviga la adresa specificată. Rezultatul este în fig.2.32.

Fig.2.32. Rezultatul codului din fig.2.31.

Creez și apelez o funcție. Am scris un nou cod, fig.2.33, la care i-am dat ”Run”.

Fig.2.34. Exemplu de funcție

Cuvântul cheie pentru a crea o funcție este ”def” din câte se poate vedea din exemplu de mai sus.

Același exemplu îl modific ca să accepte o variabilă. Exemplul și rezultatul poate fi văzut în fig.2.35.

Fig.2.35. O funcție care acceptă o variabilă.

Fig.2.36. Valoare implicită

În continuare o să creez două funcții. Prima conține un ”for” pentru a parcurge elementele unui vector și pentru a le afișa. A doua funcție acceptă un parametru și returnează o valoare(fig.2.37).

Fig.2.37. Modul de lucru cu funcții

Se poate observa că am creat un vector și l-am oferit primei funcții. Elementele acestuia sunt afișate. Funcția a doua primește ”1” ca parametru și îl înmulțește cu 10 după care îl returnează. Am folosit funcția 2 într-un print pentru a putea vedea rezultatul. Am apelat funcția 2 pe vectorul creat mai devereme. Nu am un ”for” care parcurge elementele deci rezultatul nu va fi: ”10 20 30 40 50 60”. Rezultatul va fi vectorul înmulțit de 10 ori după care este afișat, rezultatul este în fig.2.37.

Ca și concluzie am acoperit tot ceea ce doream în cadrul limbajului de programare python. Am realizat exemple cu instrucțiunile cele mai cunoscute și ce urmează să le folosesc în acest proiect. Cu acest capitol consider că am încheiat partea de învățare a limbajelor de programare.

CAPITOLUL 3

Oglinda Inteligentă

3.1. Generalități

Oglinda inteligentă este un dispozitiv care se caracterizează prin faptul că are o suprafață reflectantă iar pe acea suprafață reflectantă sunt afișate anumite date cum ar fi ziua, ora, locația, vremea din orașul în care se află. Există oglinzi inteligente ce pot controla anumite dispozitive din casă cum ar fi să controleze lumina, jaluzelele de la fereastră și multe altele. Acest dispozitiv este o idee ce vine ca accesoriu la o casă inteligentă. Denumirea în limba engleză este de ”Smart mirror” dar care cu timpul a devenit ”magic mirror” datorită faptului că aduce aminte de povestea ”Albă ca zăpada” unde personajul negativ comunica cu oglinda sa magică pentru a afla informații. Deci putem spune că idee de oglindă magică este destul de vechee ca și povestea de unde a început să își tragă numele. Din acest moment ”Oglinda magică”(OM) va fi echivalenta cu ”Oglinda inteligentă”(OI) în cadrul a ceea ce urmează să zic. În urmă cu ceva vreme, 2016 o echipă de tineri a creat un proiect denumit MagicMirror2(MM2). Acesta este un software pentru raspberry pi 2/3(rpi). În urma instalări MM2, rpi putea fi folosit ca și computer pentru MM2. MM2 a venit cu o gamă variata de funcții pentru a realiza o OM. Dezavantajul de la proiectul acestor baieți este că adăugare de module noi pentru OM este destul de grea deoarece în prezent software-ul acestora nu ține pasul cu update-urile lui rpi astfel în timpul instalări sunt primite diverse errori iar la finalizarea instalări deși acest software pentru MM2 este ”open-source” nu funcționează corespunzător. Eu personal am achiziționat un rpi 3 model b+ pentru a îl folosi în scopul de a învăța, după o vreme am ajuns și eu la MM2 și am observat că anumite module nu funcționează, unul din ele fiind cel de control vocal. Controlul vocal poate fi realizat în prezent cu ajutorul lui Google-Assistent(GA) sau Alex oferită de Amazon. În ambele cazuri este necesară achiziționarea unui dispozitiv suplimentar deoarece rpi nu mai face față la prelucrarea sunetelor. De aici a pornit și ideea să realizez o recunoaștere vocală pentru acest proiect MM2. Rezultatul a fost că nu puteam să realizez un program separat de MM2 care să realizeze ceea ce realizează GA sau Alexa. Softwareul curent consumă resurse destul de multe iar rpi achiziționat de mine( în perioada în care a fost proaspăt scos pe piață fiind cea mai bună versiune, acuma se vorbește de rpi 4) nu am reușit nici să pot executa un program realizat de mine dar nici să instalez modulele de comandă vocală disponibile pe websitul de la MM2. Am încercat să instalez MM2 pe o mașină virtuală și aceea mașină virtuală să ”ruleze” pe laptopul meu, eu având unul destul de performant. Nu am putut instala soft-ul datorită faptului că nu utilizam un rpi 2/3. Astfel am decis să creez propriul meu software de OM. Soft-ul MM2 a fost creat folosind: HTML, CSS și JavaScript. Eu cunosc destul de bine aceste limbaje am început munca la propriul soft-ul OM. Ceea ce am decis din start este ca acest soft să poată fi folosit pe orice tip de sistem fie el: linux sau windows. Pentru a realiza OM o să am o parte hardware și una software. O să încep prin a crea partea hard deoarece este extrem de simplă după care o să realizez soft-ul pas cu pas.

3.2. Hardware

Pentru a vorbi despre OM partea hardware(OMpH) folosesc figura 3.1. Din câte se poate vedea în fig.3.1, OM este alcătuită dintr-un ecran, o suprafață reflectorizantă și o ramă. Cu alte cuvinte o să avem nevoie de un ecran, eu am ales să folosesc propriul meu televizor. Suprafața reflectorizantă este un material de plastic care în partea care se suprapune peste ecran reflectă 20% din lumină iar în partea cealaltă 80% din lumină. Astfel dacă în partea care reflectă 20% din lumină este întuneric, un fundal negru, partea care reflectă 80% va avea efectul de oglindă. Așa ceva mai este folosit în filme, atuncea când cineva este adus la poliție pus într-o cameră de regulă cu pereții gri iar în fața sa este o oglindă mare. Aceea nu este o oglindă este această suprafață reflectantă doar că în partea în care stă persoana adusă de poliție este becul aprins iar în partea cealaltă becul este stins. Astfel polițiști pot să vadă persoana respectivă dar persoana respectivă se vede pe ea însuși. Această suprafață este din plastic, se găsește destul de ușor în America dar destul de greu la noi în România, iar prețul este unul destul de ridicat. O alternativă pentru așa ceva la un preț acceptabil este un geam reflectorizant. Diferența de preț este destul de mare. Bucata de plastic reflectorizant pentru dimensiunile televizorului meu avea un preț de 225 ron iar geamul reflectorizant a costat 28 ron. Deși diferența de preț este foarte mare efectul este același.

Fig.3.1. Partea hard recomandată pentru MM2

În fig.3.2. și 3.3. se pot vedea geamul reflectorizant pe care l-am achiziționat iar în fig.3.4. este televizorul pe care o să îl folosesc. Am conectat televizorul la laptopul meu cu ajutorul unui cablu HDMI.

Fig.3.2. Partea ce va fi suprapusă peste ecran

Fig.3.3. Partea ce va fi văzută de noi

Fig.3.4. Televizorul pe care îl voi folosi/ Ecranul pentru OM

Următoarea etapă este să prind geamul reflectant de ecran, în cazul meu de televizor. Tot ceea ce este negru pe ecran va avea ca efect reflectarea iar tot ceea ce este de altă culoarea va putea fi observat clar. Aceasta este OMpH.

3.3. Software

Partea software a OM(OMpS) l-am realizat cu ajutorul celor prezentate în capitolul 1.

Pentru început am creat un nou director pe desktop și l-am denumit OM. Am deschis notepad++ și am creat un nou fișier de tipul HTML. L-am salvat în folderul creat cu denumirea ”index.html”. Am mai creat un fișier de tipul CSS cu denumirea ”index.css” în același director. În pagina html și în fișierul css am pus codurile ce pot fi văzute în fig.3.5.

Fig.3.5. Primul cod scris pentru OMpS

Rezultatul codului poate fi văzut în fig.3.6. Eu folosesc Google Chrom, am apăsat F11 și apare efectul din fig.3.7. Am scăpat de bara de titlu a browserului și am obținut un fundal negru.

Fig.3.6. Fundalul pentru OM

Fig.3.7. Modul full-screen pentru pagina web

Ceea ce am realizat acum este fundalul pentru OM care daca este negru în spate atuncea se poate creat efectul de oglindă.

În continuare creez o diviziune ce va afișa data în care mă aflu și ora în colțul din stânga sus al ecranului. Primul pas pentru a face acest lucru este să creez o nouă diviziune în zona ”head” a pagini html, unde o să scriu o funcție Js(JavaScript), fig.3.8.

Fig.3.8. Creerea unui ceas cu dată I

Pun codul Js complet, fig.3.9, după care îl explic.

Fig.3.9. Codul js pentru dată și timp

Pentru început am creat o variabilă de tipul Date(), denumită ”d”, în ea am pus data curentă, linile 10 și 11.

La fel ca la data am creat o variabilă pentru lună și am luat luna curentă, după care am creat un vector de elemente unde am pus denumirile în limba Română de la lunile anului, linile 13-18 de cod. Pe linia 20 am speficiat că luna curentă va avea valoarea luni din vector, ”.getMonth()”dă luna curentă eu va trebui să pun în vector lunile anului în ordinea corectă, astfel dacă getMonth() returnează luna a cincea, pe poziția a cincea din vector trebuie să fie luna mai.

La linia 22 de cod, se poate vedea că am creat o variabilă ”year” în care am pus anul complet. am mai creat o variabilă ”day” și un vector la fel ca în cazul lunilor. Se poate vedea că nu am început de luni ci am început de ”Duminică” să pun zilele săptămâni. Motivul fiind că funcția o sa ia data curentă, ca să văd ordinea corectă a zilelor am dat click în colțul din dreapta jos pe ceas și dată, fig.3.10. Se poate observa că la mine săpămâna începe cu duminică, după care vin restul de zile. Astfel am putut identifica ordinea corectă a elementelor în vector.

Fig.3.10. Calendarul calculatorului.

În continuare am mai creat trei variabile care o să reprezinte ora minutele și secundele, linile de cod 29, 30 și respectiv 31.

Ultimele patru linii de cod sunt destul de importante, acestea pun împreună variabilele create în două elemente cu denumirea ”date” și ”time”.

Acesta a fost codul JS pentru crearea unei diviziuni care să afișeze ora și date din calendar.

În zona body al pagini html în care am scris codul js am pus următorul cod din fig.3.11.:

Fig.3.11. Codul din zona body

Se poate observa că am pus două id-uri corespunzătoare cu în liniile de cod 33 și 35. În fișiereul css pe care l-am realizat mai devreme am pus următorul cod din fig.3.12.

Fig.3.12. Codul de aspect pentru zona de ceas

Se poate observa că în fig.3.11. că cele două paragrafe se află într-o diviziune unde clasa este denumită ”clock”. Deschid pagina șapăs pe F11 pentru a intra în modul full-screen. Rezultatul pe calculator poate fi văzut în fig.3.13 iar în fig.3.14 se poate vedea ce văd eu în realitate.

Fig.3.13. Ce vedem pe calculator

Fig.3.14. Ce vedem în realitate

Se remarcă faptul că eu văd doar un ceas și reflexia mea. În fig.3.15. este o altă fotografie în care am lasat două ferestre deschis ce nu sunt de culoarea neagră, astfel se poate vedea că nu se mai vede reflexia mea.

Fig.3.15. OM când fundalul nu este negru.

În figură se poate vedea că am lăsat cele două coduri pentru ceas și dată.

În continuare o să mai adaug un cod la pagină pentru a afișa diverse mesaj la un anumit interval de timp.

Pentru început am creat un fișier Js și am pus în el codul din fig.3.16.

Fig.3.16. Cod pentru afișare de mesaje.

În pagina HTML am scris codul din fig.3.17. partea stângă iar în partea dreaptă codul css.

Timpul de schimbare a mesajului este de 5 secunde acesta poate fi schimbat, este specificat pe linia 8, Js folosește milisecunde de aceea se vede 5000. Eu am setat 3 mesaje dar pot să adaug mai mult, tot ce am de realizat pentru este schimbrea din valoarea ”3” de pe linia 6 cu numărul de elemente din variabila ”msg”, am 10 elemente în ”msg”, atuncea jos pe linia 6 trebuie să am ”*10”.

Fig.3.17.Codul HTML și CSS pentru afișarea de mesaje

Tot ce am adăugat aici nou este linia 46 în fișiereul HTML și linile 29-38 în CSS. Rezultatul poate fi observant în fig.3.18 și 3.19.

Fig.3.18. Afișarea unor mesaje pozitive I

Fig.3.19. Afișarea unor mesaje pozitive II

În capitolul 1, am realizat implementarea unui videoclip în pagina html. Același lucru o să îl realizez și acum pentru a implementa condițiile meteo din orașul meu. Aici nu o să mai scriu codul pentru a afla vremea ci o să îl iau gata făcut, un astfel de cod este extrem de complex și mi-ar mai trebui încă un capitol doar pentru un singur element în OM. Drept urmare am navigat la adress următoare: https://weatherwidget.io/.

Fig.3.20. Implementarea datelor meteo

La linkul respectiv am selectat locația mea și limba Română, fig.3.21.

Fig.3.21. Selectarea limbi dorite

Fig.3.22. Slectarea temei

Am ales ”Flat->Dark” după care am navigat la ”CUSTOMIZE”

Fig.3.23. ”Customize” tema

Aici m-am asigurat că toate elementele sunt alb și negru.

După ce am terminat am dat click pe ”GET CODE” și mi-a aparut o fereastră ca în fig.3.24.

Fig.3.24. Codul ce trebuie implementat în pagina HTML

În fig.3.25 se poate vedea cu roșu înconjurat ce am adăugat nou la OM. iar rezultate pot fi văzute în fig. 3.26 și 3.27.

Fig.3.25. Implementarea codului pentru vreme

Fig.3.26. Rezultatul pe calculator

Fig.3.27. Rezultatul în realitate

Codul de la pagina principală pentru oglinda inteligentă:

index.html:

<!DOCTYPE html>

<html>

<head>

<title>Oglinda Inteligentă</title>

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

<script src="msg.js"></script>

<script type="text/javascript">

window.onload = setInterval(clock,1000);

function clock()

{

var d = new Date();

var date = d.getDate();

var month = d.getMonth();

var montharr =["Ianuarie","Februarie",

"Martie","Aprile","Mai",

"Iunie","Iulie","August",

"Septembrie","Octombrie",

"Noiembrie","Decembrie"];

month=montharr[month];

var year = d.getFullYear();

var day = d.getDay();

var dayarr =["Duminică","Luni","Marți",

"Miercuri","Joi","Vineri","Sâmbătă"];

day=dayarr[day];

var hour =d.getHours();

var min = d.getMinutes();

var sec = d.getSeconds();

document.getElementById("date")

.innerHTML=day+" "+date+" "+month+" "+year;

document.getElementById("time")

.innerHTML=hour+":"+min+":"+sec;

}

</script>

<script>

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)

[0];if(!d.getElementById(id)){js=d.createElement(s);

js.id=id;js.

src='https://weatherwidget.io/js/widget.min.js';fjs.

parentNode.insertBefore(js,fjs);}}(document,'script',

'weatherwidget-io-js');

</script>

</head>

<body>

<div class="clock">

<p id="date"></p>

<p id="time"></p>

</div>

<div class="weather">

<a class="weatherwidget-io"

href="https://forecast7.com/ro/45d4123d38/petrosani/"

data-label_1="PETROȘANI" data-label_2="WEATHER"

data-theme="dark" data-suncolor="#ffffff"

data-raincolor="#ffffff" >PETROȘANI WEATHER</a>

</div>

<div class="Mesaj" id="msg">test</div>

</body>

</html>

În acest capitol am realizat o oglindă inteligentă cu ajutorul lui CSS,HTML și JavaScript. Rezultul final poate fi observat în fig. 3.26 și 3.27.

CAPITOLUL 4

Realizarea comenzii vocale

Pentru a realiza o comunicare vocală cu oglinda o să mă folosesc de limbajul pyhon. Bibliotecile din python o să fie o unealtă utilă. Ceea ce o să doresc de la oglindă pentru început este ca aceasta să îmi recunoască vocea, să știe să răspundă corespunzător la ceea ce zic eu și să ia acțiuni diverse, acțiuni în funcție de ceea ce zic eu.

4.1. Instalarea dependențelor

O să intalez dependențele necesare pentru ca programul de recunoaștere vocală ca în a doua parte a acestui capitol să pot să lucrez doar cu codul fără să am parte de erori. Bibliotecile pe care o să le folosesc au un aspect mai ”ciudat”, după ce o să intalez unele din ele o să primesc mesaje de eroare cum că am nevoie de alte biblioteci pentru a putea folosi biblioteca pe care am instalato.

Primul pas este să verific dacă bibliotecile pe care le am sunt instalate sau trebuie să le instalez. Cel mai simplu mod este acela de a intrat in IDLE și a folosi comanda import pe biblioteca pe care doresc să o folosesc, în general eroare care apare atuncea când lipsește o bibliotecă este ”ModuleNotFoundError: No Module named ”….” ”. Prima bibliotecă pe care am să o instalez este ”gtts”, în figura 4.1 se poate vedea că nu am instalată biblioteca respectivă:

Fig.4.1. Eroarea generală

Pentru a putea instala biblioteca o să deschid ”Command Prompt” și o să scriu ”pip install gTTS”, aceasta este comanda pentru python3. După ce am scris o să apăs ”ENTER”, în acest moment se va descărca biblioteca și instala, figura 4.2:

Fig.4.2. Instalare gTTS

Instalarea durează aproximativ 5 minute, am să revin în IDLE python și am să încerc să folosesc import iară. Dacă nu primesc eroare înseamnă ca biblioteca a fost instalată cu succes și o pot folosi. Din figura 4.3 se poate vedea că nu mai primesc eroarea cu ”No module named….”

Fig.4.3. Instalarea gtts cu succes

Mai jos este un exemplu cu biblioteca gTTS ca să pot să explic ceea ce face și la ce doresc să o folosesc.

Fig.4.4. Exemplu folosind gTTS

gTTS este o biblotecă care transformă textul în sunet vocal. Din figura 4.4 se poate vedea că am creat o isntantă ”tts” care primește biblioteca gtts și un parametru. Parametru este un string. Pe aceeași instanță am chemat funcția save, aceasta îmi salvează sunetul într-un fișier de tipul mp3, unde pot să îi pune ce denumire doresc. De regulă se salvează în același director unde am salvat programul .py în care am scris codul dar pot speficica și calea către o locație anume în calculator.

Următoarea bibliotecă va fi ”speech_recognition”. Aceasta va face posibilă comversia voci în text. O să încerc iară comanda import pentru biblioteca respectivă dar din nou am primit eroarea cu ”No module named…..”, figura 4.5:

Fig.4.5. Biblioteca speech_recognition nu este instalată

O să mă duc iară în ”Command prompt” și o să folosesc ”pip” pentru a instala biblioteca.

Fig.4.6. Instalarea cu succes a biblioteci.

Biblioteca a fost instalată cu succces dar din câte se poate vedea am primit și cu galben un mesj, acesta nu este decât o avertizare care spune că ar trebui să realizez un update pentru versiunea de pip. Din câte se poate vedea primesc și comanda pentru a face update-ul.

În contiunuare o să încerc să realizez un exemplu pentru recunoașterea vocală cu biblioteca instalată. O să folosesc un exemplu disponibil pe pagina web de la python.

Fig.4.7. Testarea biblioteci speech_recognition

Dacă o să dau un ”Run” pe acest cod o să primesc următoarea eroare:

Fig.4.8 Eroare cu o bibliotecă instalată cu succes

Din câte se poate vedea biblioteca instalată depinde de o alta bibliotecă și anume ”pyaudio”, va trebui să o instalez și pe aceasta. Din nou în ”Command Prompt” o să scriu o comanda pentru a instala biblioteca ca în figura 4.9:

Fig.4.9. Instalarea biblioteci ”pyaudio”

De data aceasta am primit o eroare mai greu de rezolvat, nu pot instala biblioteca în mod normal ca restul. Primul pas este acela de a identifica ce vresiune de python am pe calculator pentru asta void folosi în ”Command Prompt” :”python – version”.

Fig.4.10 Versiunea de python de pe calculator.

O să mă duc la următoarea adresă: https://www.lfd.uci.edu/~gohlke/pythonlibs/

Ceea ce o să caut este ”PyAudio providers bindings”, figura 4.11:

Fig.4.11. PyAudio.whl

Descarc o versiune a fișierului .whl, versiunea corespunzătoare versiune mele de python, am versiunea de 32 bit. Descarc toate versiunile de 32 de bit și le instalez cu următoarea comandă: ”pip install”+ numele fișierului whl descărcat în direcotrul unde a fost salvat de browser, la mine fiind folderul de ”Downloads”. Am nevoie doar de una singura din cele 4 versiuni dacă o să încercă să instalez o versiune de 32 și aceasta nu corespunde versiuni mele de python o să primesc eroare cum că nu este suportat fișierul .whl care doresc să îl instalez. Am descărcat toate versiunile și în figura 4.12 se poate vedea că doar 1 a fost bună din cele 4 restul au dat o eroare la instalare:

Fig. 4.12. Instalarea PyAudio

Acum pot să încerc să folosi iară programul din figura 4.7, acesta o să afișeze ceea ce spun. Acum nu ar trebui să mai primesc alte errori.

Fig.4.13. Funcționarea cu succes a recunoașteri vocale.

Am bibliotecile de care am nevoie în realizarea programului de recunoaștere vocală. Am putut să văd și un exemplu de instalare ușoară și de instalarea cu dificultăți pentru biblioteca ”speech_recognition” unde am reușit să tratez și erorile apărute.

4.2. Realizarea aplicație

Creez un nou fișier denumit ”sr.py”. În acest fișier pun coudul pentru programul de comunicare vocală. ”Definițile” și ”funcțile” o sunt două cuvinte sinonime în cadrul acestui capitol. Prima parte este să folosesc import pentru a adăuga bibliotecile ce le voi folosi, codul este următorul:

>>import speech_recognition as sr

>>from time import ctime

>>import time

>>from gtts import gTTS

>>import webbrowser

>>import os

>>import smtplib

Se pot recunoaște deja bibliotecile gTTS și speech_recontition( sr, o să îmi fie mai ușor să scriu două litere decât numele întreg în program). Alte biblioteci sunt sunt time și ctime, acestea vin preinstalate cu python. Biblioteca ”os” se referă la sistemul de operare, o să o folosesc să accesez programele implicite de la calculator. webbrowser este pentru a putea lucra cu browserul implicit de la calculator. smtplib este o bibliotecă care o să mă ajute să lucrez cu mail-urile.

Îmi propun să realizez o recunoaștere vocala pentru limba română, asta înseamnă că trebuie să primesc răspunsuri în limba română. Din nefericire există probleme în ceea ce privește pronuncția diacriticilor în limba română de aceea o să realizez comunicarea pe limba engleză dar o să fac posibilă să fie și în limba română.

Creez o definiție care primește ca parametru un string. Afișez stringul după care o să folosesc gTTS pentru a transforma textul în sunet. Salvez sunetul într-un fișier .mp3, după care folosesc linia de cod: os.system(”audrio.mp3”) pentru a reda sunetul audio cu player-ul implicit al calculatorului. Codul poate vi văzut în figura 4.14:

Fig. 4.14 Codul pentru definiția de transformare a unui string în audio

Când am apelat gTTS am specificat și o proprietate ”lang” care a primit valoarea ”ro”. Prin așa ceva gTTS știe că trebuie să folosesasca pronunția din limba Română pentru a realiza sunetul respectiv.

Am să scriu o definiție pentru recunoaștere audio, codul poate vi văzut în figura 4.15:

Fig.4.15 Codul pentru funcția de recunoaștere a sunetelor

Am denumit această definiție ”recaudio”. Am creat o variabilă r care apelează funcția ”Recognizer” din biblioteca sr( speech_recognizer). r reprezint obiectul nostru de recunoaștere. Am folosit microfonul ca sursă pentru a înregistra ceea ce eu zic după care am pus ceea ce am înregistrat într-o variabilă denumită ”audio”. Am mai creat o variabilă data care la început are o un string, este important ca stringul să nu fie null. Am atribuit lui data ceea ce am înregistrat cu cu ajutorul obiectului pentru recunoaștere vocală folosind funcția ”recognize_google” care primește ca parametru sunetul înregistrat și pot specifica și limba. În cazul meu am ales limba română pentru asta ”language” are valoarea ”ro-RO”. Valoarea implicita este ”en” de la limba engleză. Tot ceea ce face această setare pentru limbă este să mă ajute să recunosc anumite litere cu diacritice din limba română. Dacă am să spun și cuvinte în limba engleză, chiar dacă limba este română, acestea vor fi recunoscute. Astfel programul nostru înțelege și limba română dar și limba engleză. Am afișat pe ecran și ceea ce am spus. Am pus totul într-un block ”try” deoarece există două erori care apar de cele mai multe ori. Prima este ”UnknowValueError”, aceasta se referă că serviciul google nu poate înțelege ceea ce eu am spus. O să fac ca programul meu să asculte fără oprire. Dacă nu zic nimica atuncea va returna această eroare. A doua erroare este ”RequestError” aceasta se referă că nu putem primi răspuns de la serviciul google pentru recunoaștere vocală. Biblioteca sr folosește servicii google pentru recunoaștere vocală. Ultimul lucru pe care l-am realizat este să returnez datele. Aceasta a fost funcția de recunoaștere vocală.

Acum o să creez o nouă definiție, aceasta poate să aibe orice nume eu am denumit această funcție ”EVE”. O să primească ca și parametru ”data”, data este ceea ce se returnează la funcția ”recaudrio()”. În interioriul definiției o să pun două instrucțiuni de tipul ”if”. După ce pun cele două ”if”-uri o să mai pun while, acestea pot fi vazute în figura 4.16:

Fig.4.16 Codul pentru ”EVE” și funcția de rulare constant.

Ceea ce am realizat cu while este o buclă infinită astfel programul o să funcționeze fără pauză. Va înregistra constant ceea ce spun. În definiția ”EVE” programul va primi ca ”data” ceea ce eu înregistrez cu funcția ”recaudio()”, eu la final primind un text. Acest text îl dau la funcția ”EVE”, unde se face o comparare de stringuri. Dacă rezultatul este adevărat atuncea se va apela funcția ”spune” care primește un text și ne răspunde cu un sunet. În acest exemplu se poate vedea că daca o să dau un ”Run” programului și o să spun ”Salut”/”salut” atuncea calculatorul va spune ”Buna ziua”, În cazul în care nu zic nimica o să returnez eroarea din ”recaudio()” unde am zis că să primesc ca rezultat un mesaj text în care îmi este afișat ” Google nu poate înțelege audio.”, figura 4.17:

Fig.4.17 Rezultatul codului scris pentru programul de recunoaștere vocală.

Pot adăuga cât de multe ”if”-uri doresc pentru a face o interacțiune cât mai plăcută. Am adăugat două instrucțiuni ”if” deoarece în funcție de tonul voci programul poate înțelege că trebuie să înceapă cu literă mare sau cu literă mică.

Ceea am mai realizat în cadrul acestui proiect este transmiterea un mesaj de la g-mailul meu catre un alt e-mail, totul o să fie realizat vocal. Primul pas este să intru pe contul meu de g-mail să mă duc la securtate și să caut ”Accesul aplicațiilor mai puțin sigure”. În general această setare este dezactivată dar eu o să o activez, figura 4.18:

Fig.4.18. Permitem programului nostru să foloseasca contul nostru de g-mail.

Programul nu este unul de care să știe și cei de la google astfel o să blocheze accesul dacă doresc să îl folosesc din programul scris în python. O să primesc ceva mail-uri legate că am primit această setare și o să mai primesc și mailuri că cineva cu adresa de IP de la calculatorul meu a accesat gmailul meu. Nu sunt motive de îngrijorare, aplicația va fi acceptată ca un dispozitiv în lista pe care deja o am. În aceea lista se mai află în general telefonul personal, calculatorul la care lucrez acum.

Scriu următoarea secvență de program:

Fig.4.19 Trimiterea unui email

Se poate vedea că dacă o să spun cuvântul ”Mail” atunci calculatorul o să mă întrebe cine va primi acest e-mail, va folosi funcția de înregistrare pentru așa ceva. Dacă răspunsul meu este ”Dan” acesta va mai înregistra iară și o să îmi spună ”Ce sa zic?” mai exact ce să pună în acel e-mail. Va înregistra iară ceea ce zic, rezultatul l-am pus într-o variabilă ”content”. Voi realiza o cerere TLS/STARTTLS. Aceast pote vi văzut în linia de cod: mtplib.SMTP('smtp.gmail.com', 587). Cifra 587 reprezintă portul. O să mă identific la serverul ESMTP folosin comanda mail.ehlo(). Cu linia de cod mail.ehlo(), pun conexinuea SMTP în modul TLS. O să mai apelez o dată funcția echo(). În mail.login(”….”,”….”) am două variabile, prima este numele de utilizator, reprezentată cu negru iar a doua parola. Astfel python se va loga la contul meu de gmail. Nu ar trebui să fie probleme deja am permis accesul altor aplicați pentru contul meu de gmail. Următoarea instrucțiune va trimite mailul. Codul mail.sendmail(”…”,”….”,”….”) are trei parametri. Primul este adresa de pe care trimitem mailul, trebuie să fie același cu cel ce l-am dat la linia de cod precedentă. Al doilea trebuie să fie mailul la care doresc să trimit. Al treilea reprezintă ceea ce vrem să trimit, în cazul meu este mesajul înregistrat mai devreme. După ce am trimis e-mail o să închid conexiunea cu ”.close()”. Am să mai spun calculatorului să îmi spună ”Email a fost trimis” ca să șitu că a ajuns cu succes la finalul bucate de cod pe care l-am scris. Rezultatul codului poate fi văzut în figurile 4.20 și 4.21:

Fig.4.20 Trimiterea unui email

Fig.4.21 Verificarea e-mail-ului

Ultimul pas pe care o să îl realizez este să pornesc oglinda realizată la capitolul 3 și să pornesc și programul de recunoaștere vocală. Proiectul a fost realizat cu succes.

CONCLUZII ȘI PROPUNERI

Concluzii

În cadrul acestei lucrări am avut ocazia de a îmi reactualiza cunoștințele despre HTML, CSS și JavaScript dar și de a învăța limbajul python. Ideea unei oglinzi inteligente nu este ceva apărut de curând daca este să mă gândesc bine este o idee apărută cu 400 de ani în urmă și locul de apariție este cel mai bine descris în povestea ”Albă ca zăpada și cei șapte pitici”. Ca și o concluzie pot spune că am ajuns să creem tehnologi ce pot să aducă la viață așa zisa ”magie” din trecut, tot ceea ce avem de făcut și ce am avut eu de făcut a fost să combin ideea din trecut cu tehnologia actuală și astfel am reușit să creez o ”oglindă magică” în termeni din trecut sau ”oglindă inteligentă” cu termeni din prezent. Prin acest proiect am încercat să mai dau și o șansă vechilor sisteme de calculatoare de a fi reutilizate deoarece un astfel de program nu neccesită resurse mari și un calculator de acum 10 ani ar suporta fără probleme să ”ruleze” soft-ul creat, ceea ce este mult mai bine decât să aruncăm un calculator la guni și să construim altul și mai puternic.

Propuneri

Acest proiecte reprezintă un accesoriu pentru o casă inteligentă. Acest proiect poate fi folosit să controlăm o casă întreagă. Ca și control putem avea luminile, ușile, reglarea temperaturi. Alte funcționalități pot fi adăugate prin adăugarea de camere video și prelucrarea imaginilor primite de la camere. Putem realiza recunoaștere facială, această idee poate fi extinsă până în momentul unde pe baza analizei faciale computerul să ne spună dacă avem nevoie să vizităm un doctor. Proiectul poate fi extins în multe alte moduri deoarece poate funcționa ca un sistem de control pentru orice dispozitiv inteligent.

BIBLIOGRAFIE

Badea G.A. Programare orientată pe obliecte I/Note curs/Petroșani,

2017

Egri A. Inteligenta artificiala/Note curs/ Petrosani, 2018

Egri A. Inteligența Articificală și Sisteme Inteligente, Editura

Focus, Petroșani 2018

Egri A. Realitatea Virtuală și Prelucrarea Imaginilor, Editura

Focus, Petroșani

Leba M. Limbaje de programare II/Note curs/Petroșani 2016

Pătrășcoiu N. Senzori și traductoare/Note de curs/ Petroșani,

2014

Pătrășcoiu N. Sisteme de achiziție și prelucrare a datelor,

Editura Didactică și Pedagogică, București,

2004

Pop E., Leba M. Microcontrollere și automate programabile/Note

de curs/ Petroșani, 2014

Sîrb V. C. si Egri A. Aplicații software inteligente. Editura Focus, Petroșani,

2014

Sîrb V.C. Proiectarea Aplicațiilor Multimedia

Sîrb V.C. Sisteme I/O/Note curs/Petroșani, 2018

Sîrb V.C. Sisteme Multimedia/Note Curs/Petroșani,2018

*** https://en.wikipedia.org/wiki/Arduino

*** http://www.roroid.ro/programarea-in-c/