This shows you the differences between two versions of the page.
|
ss:laboratoare:02 [2025/03/18 18:25] jan.vaduva [Exemple de imagini pentru procesare] |
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 | + | |
| - | ===== Exemple de imagini pentru procesare ===== | + | ===== Recomandări ===== |
| - | Puteti folosi ca si exemplu pentru inregistrarea si procesare urmatoarele imagini. | + | |
| - | Obiectul este cel de a extrage textul din imaginile sau PDF-ul atasat. | + | |
| - | <hidden> | + | Pentru parcurgerea acestui laborator, vă sugerăm următoarele: |
| - | Din imaginea atasata putem extrage informatie despre persoana, profesia, locul de munca, avizul medical si tipul controlului de medicina muncii. | + | |
| - | {{ :ss:laboratoare:medicina_muncii.jpeg?nolink&250 | Imagine raport medicina muncii}} | + | |
| - | Pentru a simplifica partea de procesare pe partea de web se pot extrage aceste informatii din fisierul PDF atasat ca alternativa. | + | * **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: | ||
| - | {{ :ss:laboratoare:vaduva_jan_alexandru.pdf | PDF raport medicina muncii}} | + | ^Setare ^Opțiune ^ |
| - | </hidden> | + | |Device |Pixel 6 | |
| + | |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 | | ||
| - | ===== Cerințe tehnologice ===== | + | <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: |
| - | * **Backend**: Python (Flask/Django/FastAPI) sau Node.js (Express) | + | <file ini advancedFeatures.ini> |
| - | * **Frontend**: React/Vue/Angular pentru interfața utilizatorului | + | Vulkan = off |
| - | * **Bază de date**: PostgreSQL/MySQL/MongoDB pentru stocarea imaginilor și metadatelor | + | GLDirectMem = on |
| - | * **MQTT Broker**: Eclipse Mosquitto/HiveMQ pentru recepția imaginilor | + | </file> |
| - | * **Cloud Storage**: AWS S3/MinIO sau filesystem local pentru imaginile salvate | + | </note> |
| - | * **Procesare imagini**: OpenCV/Pillow pentru filtrare, redimensionare și analiză | + | |
| - | ===== Funcționalități ===== | + | <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> |
| - | ==== 1. Recepția și salvarea imaginilor transmise prin MQTT ==== | + | ===== Testare locală cu broker MQTT ===== |
| - | * Subscriere la topic-ul MQTT pe care dispozitivele trimit imagini | + | |
| - | * Decodificarea și salvarea imaginilor într-un director local sau cloud storage | + | |
| - | * Stocarea metadatelor imaginii în baza de date (timp, dispozitiv sursă, parametri cameră) | + | |
| - | ==== 2. Autentificare și gestionare utilizatori ==== | + | ==== 1. Instalare broker MQTT ==== |
| - | * Înregistrare și autentificare utilizatori cu roluri diferite (admin, operator, vizualizator) | + | |
| - | * Protejarea endpoint-urilor API cu JWT/OAuth | + | |
| - | ==== 3. Vizualizarea și gestionarea dispozitivelor conectate ==== | + | Asigurați-vă că aveți instalat un broker MQTT, de exemplu [[https://mosquitto.org/download/|Mosquitto]] |
| - | * 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 ==== | + | ==== 2. Fișier de configurare ==== |
| - | * 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 ==== | + | 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: |
| - | * 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 ==== | + | <file bash mqtt.conf> |
| - | * Trimiterea unei versiuni noi de firmware către dispozitive | + | listener 1883 |
| - | * Monitorizarea stării update-ului (success/fail/log-uri) | + | allow_anonymous true |
| + | </file> | ||
| - | ===== Evaluare ===== | + | ==== 3. Pornirea brokerului MQTT ==== |
| - | * 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 ===== | + | Într-un terminal rulați următoarele comenzi: |
| - | * [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] | + | |
| + | <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]] | ||