Differences

This shows you the differences between two versions of the page.

Link to this comparison view

pm:prj2025:fstancu:viky_andreea.ilie [2025/05/28 08:04]
viky_andreea.ilie [Software Design]
pm:prj2025:fstancu:viky_andreea.ilie [2025/05/30 19:16] (current)
viky_andreea.ilie [Software Design]
Line 2: Line 2:
 ===== Introducere ===== ===== Introducere =====
  
-Proiectul ​meu constă într-machetă de casă inteligentă (smart house)care integrează o serie de funcționalități moderne menite să imite controlul automatizat al unei locuințe reale.+Proiectul ​"Smart House" implementează un sistem de control și monitorizare a casei inteligente bazat pe un microcontroler ESP32. Sistemul oferă o interfață web accesibilă dintr-un browser, permițând utilizatorilor autentificați să controleze diverse dispozitive ​(luminiușa de garaj) și să vizualizeze date de la senzori (temperatură și umiditate). Comunicația între client (browser) șserver (ESP32) se realizează prin HTTP, cu datele de stare și control transmise adesea în format text simplu sau JSON. 
    
 Utilizatorul va putea interacționa cu macheta prin intermediul unei aplicații, având posibilitatea să: Utilizatorul va putea interacționa cu macheta prin intermediul unei aplicații, având posibilitatea să:
Line 10: Line 11:
 - deschidă sau închidă ușa de la garaj, - deschidă sau închidă ușa de la garaj,
  
-primească notificări ​de tip alarmă în cazul în care este detectată mișcare în locuință în timp ce luminile sunt stinse.+contine un senzor ​de temperatura si umiditate.
  
 Ideea proiectului a pornit de la dorința de a ilustra modul în care tehnologia poate fi integrată într-un mediu domestic pentru a spori confortul, securitatea și eficiența energetică. Ideea proiectului a pornit de la dorința de a ilustra modul în care tehnologia poate fi integrată într-un mediu domestic pentru a spori confortul, securitatea și eficiența energetică.
Line 17: Line 18:
 ===== Descriere generală ===== ===== Descriere generală =====
  
-Locuința va fi formată din opt camere, dintre care una va fi destinată garajului. În fiecare cameră, cu excepția garajului, va fi instalat câte un LED care poate fi aprins sau stins direct din aplicația ​mobilă, oferind un control inteligent al iluminatului.+Locuința va fi formată din opt camere, dintre care una va fi destinată garajului. În fiecare cameră, cu excepția garajului, va fi instalat câte un LED care poate fi aprins sau stins direct din aplicația ​web, oferind un control inteligent al iluminatului.
  
 Ușa garajului va putea fi controlată tot prin aplicație, fiind acționată de un servomotor, ceea ce permite deschiderea și închiderea acesteia de la distanță, în mod automatizat. Ușa garajului va putea fi controlată tot prin aplicație, fiind acționată de un servomotor, ceea ce permite deschiderea și închiderea acesteia de la distanță, în mod automatizat.
  
-Pentru un plus de siguranțădacă LED-ul ​de pe hol este stins iar senzorul detectează mișcare, se va declanșa automat ​alertă pe telefon, însoțită de activarea buzzerului. Astfel, sistemul oferă nu doar confort, ci și un nivel crescut de securitate pentru întreaga locuință. +In aplicatia web, de asemenea, se va afla si sectiune in care vei putea vedea umiditatea si temperatura din casa.
 {{:​pm:​prj2025:​fstancu:​diagramabloc.drawio.png?​400|}} {{:​pm:​prj2025:​fstancu:​diagramabloc.drawio.png?​400|}}
  
Line 48: Line 48:
  
 ===== Software Design ===== ===== Software Design =====
- 
-1. Prezentare Generală 
-Proiectul "Smart House Dashboard"​ implementează un sistem de control și monitorizare a casei inteligente bazat pe un microcontroler ESP32. Sistemul oferă o interfață web accesibilă dintr-un browser, permițând utilizatorilor autentificați să controleze diverse dispozitive (lumini, ușa de garaj) și să vizualizeze date de la senzori (temperatură și umiditate). Comunicația între client (browser) și server (ESP32) se realizează prin HTTP, cu datele de stare și control transmise adesea în format text simplu sau JSON. 
  
 **Mediu de Dezvoltare și Tehnologii** **Mediu de Dezvoltare și Tehnologii**
Line 112: Line 109:
 Gestionarea paginilor negăsite (handleNotFound). Gestionarea paginilor negăsite (handleNotFound).
 Pornește serverul web. Pornește serverul web.
 +
 Bucla Principală (loop()): Bucla Principală (loop()):
 Apelează continuu server.handleClient() pentru a procesa cererile HTTP primite, doar dacă ESP32 este conectat la Wi-Fi. Apelează continuu server.handleClient() pentru a procesa cererile HTTP primite, doar dacă ESP32 este conectat la Wi-Fi.
 +
 Managementul Autentificării:​ Managementul Autentificării:​
 Variabila isAuthenticated urmărește starea autentificării. Variabila isAuthenticated urmărește starea autentificării.
Line 126: Line 125:
 processToggleRequest(pin,​ stateVariable,​ ledName): Funcție centralizată pentru comutarea stării unui LED. Include logică de debounce (toggleDebounceDelay) pentru a preveni comutări multiple la cereri rapide. Actualizează pinul GPIO și variabila de stare. Trimite noua stare ("​ON"​ sau "​OFF"​) ca răspuns. processToggleRequest(pin,​ stateVariable,​ ledName): Funcție centralizată pentru comutarea stării unui LED. Include logică de debounce (toggleDebounceDelay) pentru a preveni comutări multiple la cereri rapide. Actualizează pinul GPIO și variabila de stare. Trimite noua stare ("​ON"​ sau "​OFF"​) ca răspuns.
 Handler-e specifice (ex: handleToggleBedroom1,​ handleStateBedroom1):​ Apelează processToggleRequest sau returnează starea curentă. Handler-e specifice (ex: handleToggleBedroom1,​ handleStateBedroom1):​ Apelează processToggleRequest sau returnează starea curentă.
 +
 Ușa Garajului: Ușa Garajului:
 garageServo:​ Obiect Servo pentru controlul motorului. garageServo:​ Obiect Servo pentru controlul motorului.
 isGarageDoorOpen:​ Variabilă booleană pentru starea ușii. isGarageDoorOpen:​ Variabilă booleană pentru starea ușii.
-handleOpenGarageDoor(),​ handleCloseGarageDoor():​ Apelează garageServo.write() cu poziția corespunzătoare. Implementează debounce (garageDoorDebounceDelay). La deschidere, aprinde automat lumina din garaj dacă era stinsă. Returnează un obiect JSON cu doorStatus și garageLightStatus. +handleOpenGarageDoor(),​ handleCloseGarageDoor():​ Apelează garageServo.write() cu poziția corespunzătoare. Implementează debounce (garageDoorDebounceDelay). La deschidere, aprinde automat lumina din garaj dacă era stinsă. Returnează un obiect JSON cu doorStatus și garageLightStatus. handleGarageDoorState():​ Returnează starea curentă a ușii și a luminii din garaj în format JSON. 
-handleGarageDoorState():​ Returnează starea curentă a ușii și a luminii din garaj în format JSON.+
 Citirea Senzorilor (handleDHTData()):​ Citirea Senzorilor (handleDHTData()):​
 Citește temperatura și umiditatea de la senzorul DHT22. Citește temperatura și umiditatea de la senzorul DHT22.
 Returnează datele într-un obiect JSON. Include gestionarea erorilor (returnează null pentru valori dacă citirea eșuează). Returnează datele într-un obiect JSON. Include gestionarea erorilor (returnează null pentru valori dacă citirea eșuează).
-Servirea Fișierelor Statice (readFile(),​ handleCSS(),​ handleJS(), handleRoot(),​ handleLoginHTML()):​ + 
-Funcția readFile() este utilizată pentru a citi conținutul fișierelor (index.html,​ login.html, style.css, script.js) din LittleFS. +**Interfața Web (Frontend)** 
-Handler-ele corespunzătoare trimit conținutul fișierelor cu tipul MIME corect. + 
-5.2. Interfața Web (Frontend) +login.html:
-login.html ​(Implicit, nu este furnizat, dar dedus):+
 Un formular HTML simplu cu câmpuri pentru "​username"​ și "​password"​ și un buton de submit. Un formular HTML simplu cu câmpuri pentru "​username"​ și "​password"​ și un buton de submit.
 La submit, trimite o cerere POST către /login pe serverul ESP32. La submit, trimite o cerere POST către /login pe serverul ESP32.
 +
 index.html (Pagina Principală):​ index.html (Pagina Principală):​
 Structura: Definește layout-ul general al dashboard-ului. Structura: Definește layout-ul general al dashboard-ului.
 Buton de Logout. Buton de Logout.
-Secțiune "Light Controls":​ O grilă cu controale de tip "​switch"​ (checkbox-uri stilizate) și afișaje de stare pentru fiecare lumină (Bedroom 1 & 2, Kitchen, Garage, Living Room, Hallway, Bathroom, Office). 
-Secțiune "​Garage Door Control":​ Butoane "Open Door" și "Close Door", și un afișaj pentru starea ușii. 
-Secțiune "DHT22 Sensor Readings":​ Afișaje pentru Temperatură și Umiditate. 
 Legături: Include fișierul style.css pentru stilizare și script.js pentru funcționalitate. Legături: Include fișierul style.css pentru stilizare și script.js pentru funcționalitate.
 +
 Identificatori:​ Elementele interactive și de afișare au ID-uri unice (ex: toggleBedroom1,​ stateBedroom1,​ garageDoorStatusText,​ temperatureValue) pentru a fi manipulate de JavaScript. Identificatori:​ Elementele interactive și de afișare au ID-uri unice (ex: toggleBedroom1,​ stateBedroom1,​ garageDoorStatusText,​ temperatureValue) pentru a fi manipulate de JavaScript.
-style.css ​(Fișier de Stiluri):+ 
 +style.css:
 Definește aspectul vizual al paginii index.html. Definește aspectul vizual al paginii index.html.
 Stilizează containerele principale, secțiunile,​ butoanele, textul. Stilizează containerele principale, secțiunile,​ butoanele, textul.
 Implementează stilurile pentru switch-urile customizate (slider-ul ON/OFF pentru lumini). Implementează stilurile pentru switch-urile customizate (slider-ul ON/OFF pentru lumini).
 Utilizează Flexbox pentru aranjarea elementelor. Utilizează Flexbox pentru aranjarea elementelor.
-Asigură un design curat și responsiv (prin max-width).+
 script.js (Logica Client-Side):​ script.js (Logica Client-Side):​
 Inițializare (DOMContentLoaded):​ Așteaptă ca întregul DOM să fie încărcat înainte de a executa codul. Inițializare (DOMContentLoaded):​ Așteaptă ca întregul DOM să fie încărcat înainte de a executa codul.
 Referințe Elemente DOM: Obține referințe la elementele HTML relevante folosind document.getElementById(). Referințe Elemente DOM: Obține referințe la elementele HTML relevante folosind document.getElementById().
-Gestionare Autentificare (handleUnauthorized()):​ Funcție helper care verifică dacă răspunsul de la server este 401 (Unauthorized). Dacă da, redirecționează utilizatorul către /​login.html. + 
-Controlul Luminilor:​ +**Flow-ul aplicatiei** 
-updateSpecificLightUI(lightId,​ state): Actualizează textul de stare (ON/OFF) și starea vizuală a checkbox-ului pentru o lumină specifică. +
-setupLightControl(light):​ Pentru fiecare lumină definită în array-ul lights: +
-Realizează o cerere fetch către /​state<​LightId>​ pentru a obține starea inițială și actualizează UI-ul. +
-Adaugă un event listener (change) pe checkbox-ul de comutare. La modificare, trimite o cerere fetch către /​toggle<​LightId>​ și actualizează UI-ul cu noua stare primită. +
-Include gestionarea erorilor și a răspunsurilor neautorizate. +
-Controlul Ușii de Garaj: +
-fetchGarageDoorState():​ Realizează o cerere fetch către /​garageDoorState pentru a obține starea inițială a ușii și a luminii din garaj, actualizând UI-ul. +
-handleGarageDoorActionResponse(data):​ Actualizează UI-ul (starea ușii și a luminii din garaj) pe baza răspunsului JSON de la server după o acțiune de deschidere/​închidere. +
-Event listener-e pe butoanele "Open Door" și "Close Door": La click, trimit cereri fetch POST către /​openGarageDoor sau /​closeGarageDoor și procesează răspunsul. +
-Afișare Date Senzor DHT22: +
-fetchDHTData():​ Realizează o cerere fetch către /dhtdata. Actualizează elementele span pentru temperatură și umiditate cu datele primite (formatate la o zecimală) sau afișează "​N/​A"​ / "​Error"​ în caz de probleme. +
-Datele senzorului sunt actualizate la încărcarea paginii și apoi periodic la fiecare 5 secunde folosind setInterval(fetchDHTData,​ 5000). +
-Logout: +
-Event listener pe butonul "​Logout":​ La click, trimite o cerere fetch POST către /logout. Dacă reușește, redirecționează către /​login.html. +
-Comunicare Asincronă: Toate interacțiunile cu serverul ESP32 sunt realizate asincron folosind API-ul fetch, permițând interfeței să rămână responsivă. +
-6. Fluxuri de Date Principale+
 Autentificare:​ Autentificare:​
 Utilizator accesează / -> Server ESP32 verifică isAuthenticated. Dacă e false, redirect la /​login.html. Utilizator accesează / -> Server ESP32 verifică isAuthenticated. Dacă e false, redirect la /​login.html.
Line 181: Line 165:
 Server ESP32 (handleLogin) validează. Dacă OK, isAuthenticated = true, redirect la /. Server ESP32 (handleLogin) validează. Dacă OK, isAuthenticated = true, redirect la /.
 Browser încarcă /index.html și script.js. Browser încarcă /index.html și script.js.
 +
 Comutare Lumină: Comutare Lumină:
 Utilizator apasă un switch în index.html. Utilizator apasă un switch în index.html.
-script.js ​(event listener) ​trimite GET la /​toggle<​LightName>​.+script.js trimite GET la /​toggle<​LightName>​.
 Server ESP32 (handleToggle<​LightName>​ -> processToggleRequest) comută LED-ul, actualizează starea internă, aplică debounce. Server ESP32 (handleToggle<​LightName>​ -> processToggleRequest) comută LED-ul, actualizează starea internă, aplică debounce.
 Server ESP32 răspunde cu noua stare ("​ON"​ / "​OFF"​). Server ESP32 răspunde cu noua stare ("​ON"​ / "​OFF"​).
 script.js (updateSpecificLightUI) actualizează UI-ul. script.js (updateSpecificLightUI) actualizează UI-ul.
 +
 Deschidere Ușă Garaj: Deschidere Ușă Garaj:
 Utilizator apasă "Open Door" în index.html. Utilizator apasă "Open Door" în index.html.
-script.js ​(event listener) ​trimite POST la /​openGarageDoor.+script.js trimite POST la /​openGarageDoor.
 Server ESP32 (handleOpenGarageDoor) mișcă servomotorul,​ aprinde lumina garajului (dacă e cazul), actualizează stările interne, aplică debounce. Server ESP32 (handleOpenGarageDoor) mișcă servomotorul,​ aprinde lumina garajului (dacă e cazul), actualizează stările interne, aplică debounce.
 Server ESP32 răspunde cu JSON { "​doorStatus":​ "​OPEN",​ "​garageLightStatus":​ "​ON/​OFF"​ }. Server ESP32 răspunde cu JSON { "​doorStatus":​ "​OPEN",​ "​garageLightStatus":​ "​ON/​OFF"​ }.
 script.js (handleGarageDoorActionResponse) actualizează UI-ul. script.js (handleGarageDoorActionResponse) actualizează UI-ul.
 +
 Afișare Date Senzor: Afișare Date Senzor:
 script.js (la încărcare și setInterval) trimite GET la /dhtdata. script.js (la încărcare și setInterval) trimite GET la /dhtdata.
Line 198: Line 185:
 Server ESP32 răspunde cu JSON { "​temperature":​ T, "​humidity":​ H }. Server ESP32 răspunde cu JSON { "​temperature":​ T, "​humidity":​ H }.
 script.js actualizează valorile în UI. script.js actualizează valorile în UI.
-7. Concluzii și Puncte Cheie+ 
 +**Concluzii și Puncte Cheie** 
 Modularitate:​ Codul este împărțit logic în backend (ESP32) și frontend (HTML/​CSS/​JS). În cadrul backend-ului,​ funcțiile handler sunt dedicate pentru fiecare rută/​acțiune. Modularitate:​ Codul este împărțit logic în backend (ESP32) și frontend (HTML/​CSS/​JS). În cadrul backend-ului,​ funcțiile handler sunt dedicate pentru fiecare rută/​acțiune.
 +
 Securitate: Implementează o autentificare simplă bazată pe username/​parolă pentru a proteja accesul la funcționalitățile de control. Credențialele sunt stocate extern în credentials.hpp. Securitate: Implementează o autentificare simplă bazată pe username/​parolă pentru a proteja accesul la funcționalitățile de control. Credențialele sunt stocate extern în credentials.hpp.
 +
 Interfață Utilizator: Oferă o interfață web intuitivă pentru control și monitorizare,​ cu actualizări dinamice fără reîncărcarea paginii. Interfață Utilizator: Oferă o interfață web intuitivă pentru control și monitorizare,​ cu actualizări dinamice fără reîncărcarea paginii.
-Eficiență:​ Utilizarea LittleFS pentru stocarea fișierelor web și ArduinoJson pentru serializarea datelor contribuie la o utilizare eficientă a resurselor ESP32. 
-Debounce: Mecanismele de debounce previn acționări multiple nedorite și protejează componentele hardware (ex: servomotorul). 
-Feedback Utilizator: Interfața web reflectă starea curentă a dispozitivelor și senzorilor, oferind feedback imediat utilizatorului. 
  
-===== Rezultate Obţinute ===== +Debounce: Mecanismele de debounce previn acționări multiple nedorite și protejează componentele hardware.
- +
-Care au fost rezultatele obţinute în urma realizării proiectului vostru. +
- +
-===== Concluzii =====+
  
 +https://​github.com/​Vikyyz/​ProiectPM/​tree/​main
  
 ===== Jurnal ===== ===== Jurnal =====
Line 222: Line 207:
 ===== Bibliografie/​Resurse ===== ===== Bibliografie/​Resurse =====
  
-<​note>​ 
-Listă cu documente, datasheet-uri,​ resurse Internet folosite, eventual grupate pe **Resurse Software** şi **Resurse Hardware**. 
-</​note>​ 
  
-<​html><​a class="​media mediafile mf_pdf"​ href="?​do=export_pdf">​Export to PDF</a></html>+https://​hackaday.com/​2017/​01/​20/​cheating-at-5v-ws2812-control-to-use-a-3-3v-data-line/​ 
 + 
 +https://​www.amazon.com/​Development-Bluetooth-Microcontroller-ESP-WROOM-32-Consumption/​dp/B0BM5RNMZM
  
 +https://​daumemo.com/​lm317-voltage-regulator-calculator-voltage-source/​
pm/prj2025/fstancu/viky_andreea.ilie.1748408683.txt.gz · Last modified: 2025/05/28 08:04 by viky_andreea.ilie
CC Attribution-Share Alike 3.0 Unported
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0