Differences
This shows you the differences between two versions of the page.
|
ss:laboratoare:02 [2025/02/25 17:59] jan.vaduva [Resurse suplimentare] |
ss:laboratoare:02 [2026/03/09 19:19] (current) ciprian.popescu0411 [Recomandări] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Laborator 2: Platformă web pentru gestionarea imaginilor ====== | + | ====== Laborator 2: Captură și transmisie de imagini prin aplicație mobilă ====== |
| - | ===== Obiective ===== | + | Î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. |
| - | * 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 ===== | + | ===== Recomandări ===== |
| - | * **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 ===== | + | Pentru parcurgerea acestui laborator, vă sugerăm următoarele: |
| - | ==== 1. Recepția și salvarea imaginilor transmise prin MQTT ==== | + | * **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]]. |
| - | * Subscriere la topic-ul MQTT pe care dispozitivele trimit imagini | + | * **Schelet de cod**: Pentru această materie vom utiliza scheletul oficial disponibil [[https://github.com/ResearchYou/ss-mobile|aici]]. |
| - | * Decodificarea și salvarea imaginilor într-un director local sau cloud storage | + | * **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: |
| - | * Stocarea metadatelor imaginii în baza de date (timp, dispozitiv sursă, parametri cameră) | + | |
| - | ==== 2. Autentificare și gestionare utilizatori ==== | + | ^Setare ^Opțiune ^ |
| - | * Înregistrare și autentificare utilizatori cu roluri diferite (admin, operator, vizualizator) | + | |Device |Pixel 6 | |
| - | * Protejarea endpoint-urilor API cu JWT/OAuth | + | |API |31 | |
| + | |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 | | ||
| - | ==== 3. Vizualizarea și gestionarea dispozitivelor conectate ==== | + | <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: |
| - | * Listarea dispozitivelor conectate și a ultimelor imagini primite | + | <file ini advancedFeatures.ini> |
| - | * Monitorizarea stării dispozitivelor (online/offline, parametri activi) | + | Vulkan = off |
| - | * Comenzi de control trimise către dispozitive (reglare parametri cameră, schimbare mod operare) | + | GLDirectMem = on |
| + | </file> | ||
| + | </note> | ||
| - | ==== 4. Procesarea imaginilor ==== | + | <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> |
| - | * 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 ==== | + | ===== Testare locală cu 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 ==== | + | ==== 1. Instalare broker MQTT ==== |
| - | * Trimiterea unei versiuni noi de firmware către dispozitive | + | |
| - | * Monitorizarea stării update-ului (success/fail/log-uri) | + | |
| - | ===== Evaluare ===== | + | Asigurați-vă că aveți instalat un broker MQTT, de exemplu [[https://mosquitto.org/download/|Mosquitto]] |
| - | * 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 ===== | + | ==== 2. Fișier de configurare ==== |
| - | * [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] | + | |
| + | 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: | ||
| + | <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]] | ||
