Differences
This shows you the differences between two versions of the page.
|
ss:laboratoare:02 [2025/02/25 17:54] jan.vaduva |
ss:laboratoare:02 [2026/03/09 19:19] (current) ciprian.popescu0411 [Recomandări] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ===== Laboratorul 02. ===== | + | ====== Laborator 2: Captură și transmisie de imagini prin aplicație mobilă ====== |
| - | ====== Laborator 2: Dezvoltarea unei platforme web pentru procesarea și gestionarea imaginilor ====== | + | În laboratorul trecut ne-am familiarizat cu aplicația web (serverul) care primește imaginile trimise prin MQTT. În cadrul acestui laborator ne vom axa pe clientul mobil responsabil de transmiterea imaginilor. |
| - | ===== Obiective ===== | + | ===== Recomandări ===== |
| - | * Crearea unei platforme web care primește, procesează și salvează imaginile transmise prin MQTT de platforma hardware/mobila | + | |
| - | * Implementarea unui sistem de autentificare și autorizare pentru utilizatori | + | |
| - | * Gestionarea dispozitivelor hardware/mobile conectate (vizualizare, actualizare firmware, configurare) | + | |
| - | * Controlul parametrilor camerei și al modului de funcționare prin interfață web | + | |
| - | * Implementarea operațiunilor de procesare a imaginilor (redimensionare, filtrare, analiză de bază) | + | |
| - | * Vizualizarea și descărcarea imaginilor procesate | + | |
| - | * Implementarea mecanismului de actualizare OTA pentru dispozitivele hardware | + | |
| - | ===== Cerințe tehnologice ===== | + | Pentru parcurgerea acestui laborator, vă sugerăm următoarele: |
| - | * **Backend**: Python (Flask/Django/FastAPI) sau Node.js (Express) | + | |
| - | * **Frontend**: React/Vue/Angular pentru interfața utilizatorului | + | |
| - | * **Bază de date**: PostgreSQL/MySQL/MongoDB pentru stocarea imaginilor și metadatelor | + | |
| - | * **MQTT Broker**: Eclipse Mosquitto/HiveMQ pentru recepția imaginilor | + | |
| - | * **Cloud Storage**: AWS S3/MinIO sau filesystem local pentru imaginile salvate | + | |
| - | * **Procesare imagini**: OpenCV/Pillow pentru filtrare, redimensionare și analiză | + | |
| - | ===== Funcționalități ===== | + | * **Mediu de dezvoltare**: Utilizați Android Studio ca mediu de dezvoltare. Acesta include un emulator (mașină virtuală), util dacă nu aveți la dispoziție un dispozitiv Android fizic. Cea mai simplă metodă de instalare și gestionare este prin [[https://www.jetbrains.com/toolbox-app/|JetBrains Toolbox]]. |
| + | * **Schelet de cod**: Pentru această materie vom utiliza scheletul oficial disponibil [[https://github.com/ResearchYou/ss-mobile|aici]]. | ||
| + | * **Mașină virtuală**: În cazul în care nu dispuneți de un dispozitiv cu Android, puteți folosi emulatorul din Android Studio cu următoarea configurație: | ||
| - | ==== 1. Recepția și salvarea imaginilor transmise prin MQTT ==== | + | ^Setare ^Opțiune ^ |
| - | * Subscriere la topic-ul MQTT pe care dispozitivele trimit imagini | + | |Device |Pixel 6 | |
| - | * Decodificarea și salvarea imaginilor într-un director local sau cloud storage | + | |API |31 | |
| - | * Stocarea metadatelor imaginii în baza de date (timp, dispozitiv sursă, parametri cameră) | + | |System image |Google APIs Intel x86_64 Atom System Image | |
| + | |Camera rear |VirtualScene | | ||
| + | |Default boot |Cold | | ||
| + | |Internal storage |6 GB | | ||
| + | |Expanded storage |None | | ||
| + | |CPU cores |4 | | ||
| + | |Graphics acceleration |Automatic | | ||
| + | |RAM |4 GB | | ||
| + | |VM heap size |512 MB | | ||
| - | ==== 2. Autentificare și gestionare utilizatori ==== | + | <note warning>Este posibil ca emulatorul de Android să dea SEGFAULT pe sistemele de operare Linux din cauza driverelor grafice Vulkan, astfel este necesară crearea unui fișier de inițializare denumit ''advancedFeatures.ini'' în directorul ''~/.android'' cu următorul conținut: |
| - | * Înregistrare și autentificare utilizatori cu roluri diferite (admin, operator, vizualizator) | + | <file ini advancedFeatures.ini> |
| - | * Protejarea endpoint-urilor API cu JWT/OAuth | + | Vulkan = off |
| + | GLDirectMem = on | ||
| + | </file> | ||
| + | </note> | ||
| - | ==== 3. Vizualizarea și gestionarea dispozitivelor conectate ==== | + | <note important>În situația în care nu ați parcurs [[ss:laboratoare:01|primul laborator]], puteți testa funcționalitatea acestui schelet prin rularea locală a unui broker MQTT și utilizarea unui client care să recepționeze imaginile.</note> |
| - | * Listarea dispozitivelor conectate și a ultimelor imagini primite | + | |
| - | * Monitorizarea stării dispozitivelor (online/offline, parametri activi) | + | |
| - | * Comenzi de control trimise către dispozitive (reglare parametri cameră, schimbare mod operare) | + | |
| - | ==== 4. Procesarea imaginilor ==== | + | ===== Testare locală cu broker MQTT ===== |
| - | * Redimensionare automată pentru optimizare | + | |
| - | * Aplicare de filtre de bază (contrast, luminozitate, grayscale) | + | |
| - | * Analiză simplă a imaginii (detecție muchii, histograma culorilor) | + | |
| - | ==== 5. Descărcarea și vizualizarea imaginilor ==== | + | ==== 1. Instalare broker MQTT ==== |
| - | * Galerie cu imagini sortate după dispozitiv și timp | + | |
| - | * Opțiune de descărcare a imaginilor brute sau procesate | + | |
| - | ==== 6. Actualizare firmware OTA pentru dispozitivele hardware/mobile ==== | + | Asigurați-vă că aveți instalat un broker MQTT, de exemplu [[https://mosquitto.org/download/|Mosquitto]] |
| - | * Trimiterea unei versiuni noi de firmware către dispozitive | + | |
| - | * Monitorizarea stării update-ului (success/fail/log-uri) | + | |
| - | ===== Evaluare ===== | + | ==== 2. Fișier de configurare ==== |
| - | * Implementarea sistemului de recepție și salvare imagini (20%) | + | |
| - | * Autentificare și gestionare utilizatori (15%) | + | |
| - | * Monitorizare și control dispozitive hardware (20%) | + | |
| - | * Procesare și optimizare imagini (20%) | + | |
| - | * Vizualizare și descărcare imagini (15%) | + | |
| - | * Implementarea OTA (opțional) | + | |
| - | ===== Resurse suplimentare ===== | + | Creați în root-ul scheletului de laborator un director de test, iar în interiorul acestuia definiți un fișier de configurare cu următorul conținut: |
| - | * [https://flask.palletsprojects.com Flask Documentation] / [https://fastapi.tiangolo.com FastAPI Documentation] | + | |
| - | * [https://mqtt.org MQTT Protocol Overview] | + | |
| - | * [https://opencv.org OpenCV Image Processing] | + | |
| - | * [https://react.dev React Documentation] | + | |
| + | <file bash mqtt.conf> | ||
| + | listener 1883 | ||
| + | allow_anonymous true | ||
| + | </file> | ||
| + | ==== 3. Pornirea brokerului MQTT ==== | ||
| + | |||
| + | Într-un terminal rulați următoarele comenzi: | ||
| + | |||
| + | <code bash> | ||
| + | sudo systemctl stop mosquitto.service | ||
| + | mosquitto -c mqtt.conf -v | ||
| + | </code> | ||
| + | |||
| + | ==== 4. Creare environment virtual Python ==== | ||
| + | |||
| + | Un good practice în Python este să folosim virtual environment-uri, astfel rulați într-un terminal: | ||
| + | |||
| + | <code bash> | ||
| + | python -m venv .mqtt_env | ||
| + | source .mqtt_env/bin/activate | ||
| + | pip install paho-mqtt | ||
| + | </code> | ||
| + | |||
| + | ==== 5. Client MQTT simplu în Python ==== | ||
| + | |||
| + | Creați și rulați un client simplu MQTT care face automat subscribe la topicul ''ssproject/images'' și salvează imaginile primite într-un director separat. | ||
| + | |||
| + | <file python mqtt_client.py> | ||
| + | import paho.mqtt.client as mqtt | ||
| + | from paho.mqtt.enums import CallbackAPIVersion | ||
| + | import os | ||
| + | import time | ||
| + | |||
| + | BROKER = "127.0.0.1" | ||
| + | PORT = 1883 | ||
| + | TOPIC = "ssproject/images" | ||
| + | OUTPUT_DIR = "received_images" | ||
| + | |||
| + | if not os.path.exists(OUTPUT_DIR): | ||
| + | os.makedirs(OUTPUT_DIR) | ||
| + | |||
| + | def on_connect(client, userdata, flags, reason_code, properties): | ||
| + | print(f"Connected (reason code: {reason_code})") | ||
| + | client.subscribe(TOPIC) | ||
| + | |||
| + | def on_message(client, userdata, msg): | ||
| + | timestamp = int(time.time() * 1000) | ||
| + | filename = f"{OUTPUT_DIR}/image_{timestamp}.jpg" | ||
| + | |||
| + | try: | ||
| + | with open(filename, "wb") as f: | ||
| + | f.write(msg.payload) | ||
| + | print(f"Image saved: {filename} ({len(msg.payload)} bytes)") | ||
| + | except Exception as e: | ||
| + | print(f"Error saving image: {e}") | ||
| + | |||
| + | client = mqtt.Client(callback_api_version=CallbackAPIVersion.VERSION2) | ||
| + | client.on_connect = on_connect | ||
| + | client.on_message = on_message | ||
| + | |||
| + | print(f"Connecting to {BROKER}...") | ||
| + | client.connect(BROKER, PORT, 60) | ||
| + | print("Exit with Ctrl+C") | ||
| + | |||
| + | print("Waiting for images...") | ||
| + | client.loop_forever() | ||
| + | </file> | ||
| + | |||
| + | ===== Structura scheletului de laborator ===== | ||
| + | |||
| + | Mai jos este prezentată structura simplificată a scheletului aplicației Android, evidențiind componentele ce vor fi analizate și modificate pe parcursul semestrului: | ||
| + | |||
| + | <code> | ||
| + | ss-mobile | ||
| + | └── app | ||
| + | ├── src | ||
| + | │ ├── main | ||
| + | │ │ ├── java/ro/pub/cs/systems/ssproject | ||
| + | │ │ │ ├── mqtt # Logică comunicație MQTT | ||
| + | │ │ │ ├── ui # Activități și interfață utilizator | ||
| + | │ │ │ └── utils # Clase utilitare | ||
| + | │ │ ├── res/layout # Fișiere XML pentru UI | ||
| + | │ │ └── AndroidManifest.xml # Configurație aplicație | ||
| + | │ ├── test # Unit Tests (logică pură) | ||
| + | │ └── androidTest # Instrumented Tests | ||
| + | └── build.gradle.kts # Configurații de build | ||
| + | </code> | ||
| + | |||
| + | ==== Descriere componente ==== | ||
| + | |||
| + | * **''mqtt/''** – Conține implementarea clientului MQTT (folosind Paho) și constantele pentru topice. | ||
| + | * **''ui/''** – Conține codul pentru ecranele aplicației. | ||
| + | * ''MainActivity'' – captură și trimitere imagini. | ||
| + | * ''SetupActivity'' – setări de conexiune. | ||
| + | * **''utils/''** – Include: | ||
| + | * ''ImageUtils'' – procesare formate imagine (YUV → NV21, rotație) | ||
| + | * ''PermissionHandler'' – gestionare permisiuni | ||
| + | * **''test/''** – Conține teste unitare care rulează direct pe JVM și sunt folosite pentru a testa logica ce nu depinde de framework-ul Android. | ||
| + | * **''androidTest/''** – Teste instrumentate (rulează pe dispozitiv/emulator), folosite pentru a testa componente ce depind de contextul Android. | ||
| + | |||
| + | ===== Cerințe ===== | ||
| + | |||
| + | - Descărcați scheletul de laborator de [[https://github.com/ResearchYou/ss-mobile|aici]] | ||
| + | - Importați-l în Android Studio. | ||
| + | - Analizați structura și înțelegeți funcționarea aplicației. | ||
| + | - Rulați aplicația pe un dispozitiv Android. | ||
| + | - Testați conexiunea cu brokerul MQTT. | ||
| + | |||
| + | **Livrabil:** Directorul ''received_photos'' populat cu imaginile capturate din aplicația mobilă | ||
| + | ===== Resurse ===== | ||
| + | * Documentație MQTT: [[https://mqtt.org/]] | ||
| + | * Implementarea MQTT pe Android: [[https://github.com/eclipse/paho.mqtt.android]] | ||
| + | * [[https://wiki.sei.cmu.edu/confluence/display/android/Android+Secure+Coding+Standard|Android Secure Coding Standard]] | ||
