Cornice per foto OSD Face Aware: 11 passaggi (con immagini)

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:00

Questo Instructables mostra come creare una cornice per foto con l'On Screen Display (OSD) che riconosce il volto.

L'OSD può mostrare l'ora, il meteo o altre informazioni Internet desiderate.

Passaggio 1: perché la cornice per foto OSD?

Ho 2 progetti di orologi fotografici su Instructables prima:

www.instructables.com/id/ESP32-Photo-Clock…

www.instructables.com/id/Arduino-BiJin-ToK…

Entrambi recuperano una foto con le bellezze e un tabellone orario da Internet ogni minuto e visualizzano sul display LCD.

Mostrare bellezze va bene, ma mi sono tutte sconosciute. Che ne dici di utilizzare le foto preferite personali e aggiungere l'ora corrente e ulteriori informazioni istantanee su di essa?

Questo progetto sta esplorando come realizzarlo.

Passaggio 2: perché Face Aware?

Controlliamo prima come aggiungere informazioni istantanee OSD a una foto:

1. Seleziona a caso una foto da una cartella specifica
2. Recupera tempo
3. Recupera informazioni istantanee da Internet
4. disegna tempo e informazioni istantanee sulla foto

I passaggi 1-3 sono diretti; Anche il passaggio 4 sembra semplice, ma determinare dove disegnare il testo non è così facile.

Se la dimensione del testo è troppo piccola, è difficile da leggere a una distanza ragionevole; Se la dimensione del testo è troppo grande, molto probabilmente copre gli oggetti fotografici. Soprattutto se si tratta di foto ritratto, il testo coperto i volti non è preferito.

Poiché la posizione dei volti per ogni foto non è la stessa, per evitare i volti coperti dall'OSD è necessario prima un processo di rilevamento dei volti. Quindi possiamo trovare un'area senza volto per disegnare il testo.

Passaggio 3: progettazione a 2 livelli

Il processo di rilevamento del volto richiede una certa potenza di elaborazione, al contrario, la cornice digitale può essere molto leggera. Quindi l'ho diviso in 2 livelli:

server

Il motore di foto con riconoscimento del volto è un server di app Node.js. Per ogni richiesta HTTP, sarà:

1. Seleziona a caso una foto dalla cartella delle foto
2. Riconoscimento facciale
3. determinare nessuna faccia o l'area minima delle facce
4. Nel frattempo, recupera il meteo o altre informazioni utili istantanee da Internet ogni determinato periodo
5. Disegna tempo e informazioni istantanee sulla foto
6. Restituisci la foto con OSD in formato JPEG come risposta

Cliente

Il client può essere un browser Web, un'applet o un dispositivo IoT.

Per esempio. un boasrd di sviluppo ESP32 con un LCD da 2-4 pollici è molto adatto per essere posizionato sul desktop come una piccola cornice per foto.

Passaggio 4: configurazione del server foto Opzione 1: immagine Docker

Per comodità, ho pre-costruito un'immagine Docker per il server dell'app OSD Node.js con foto sensibili al volto.

Se non hai ancora configurato Docker, segui la guida introduttiva di Docker:

www.docker.com/get-started

Quindi esegui il seguente comando: (sostituisci /path/to/photo con il tuo percorso fotografico)

docker run -p 8080:8080 -v /path/to/photo:/app/photo moononournation/face-aware-photo-osd:1.0.1

Provalo navigando su

Potresti scoprire che l'ora di visualizzazione non è nel tuo fuso orario:

docker run -p 8080:8080 -e TZ=Asia/Hong_Kong -v /path/to/photo:/app/photo moononournation/face-aware-photo-osd:1.0.1

Se vivi a Hong Kong come me, puoi aggiungere le informazioni meteo di Hong Kong:

docker run -p 8080:8080 -e TZ=Asia/Hong_Kong -e OSD=HK_Weather -v /path/to/photo:/app/photo moononournation/face-aware-photo-osd:1.0.1

Se desideri sviluppare le tue informazioni OSD:

mkdir -p ~/git

cd ~/git git clone https://github.com/moononournation/face-aware-photo-osd.git docker run -it -p 8080:8080 -e TZ=Asia/Hong_Kong -e OSD=HK_Weather -e DEBUG= Y -v /path/to/photo:/app/photo -v ~/git/face-aware-photo-osd/app.js:/app/app.js moononournation/face-aware-photo-osd:1.0. 1

Modifica la funzione update_osd() in app.js per personalizzare le tue informazioni OSD. Dopo lo sviluppo, rimuovi semplicemente l'ambiente DEBUG=Y dal comando docker.

Passaggio 5: configurazione del server fotografico Opzione 2: Crea da sorgente

Se hai familiarità con Node.js, puoi creare il server dell'app dal codice sorgente.

Ottieni la fonte:

git clone

Installa i pacchetti:

cd face-aware-photo-osd

installazione npm

Crea una cartella di foto e copia le tue foto nella cartella.

Esegui il server dell'applicazione:

nodo app.js

Passaggio 6: Opzione client 1: Browser Web

Naviga semplicemente su

La pagina è programmata per caricare automaticamente un'immagine delle dimensioni della pagina adatta ogni minuto.

P. S. Se navighi da un'altra macchina che non esegue il server dell'app, ricorda di cambiare localhost con il nome host o l'indirizzo IP del server dell'app.

Passaggio 7: Opzione client 2: ESP32 + LCD

Un client per cornici fotografiche può essere semplice come una scheda di sviluppo ESP32 e un LCD.

Ecco l'hardware necessario:

Scheda di sviluppo ESP32

Qualsiasi scheda di sviluppo ESP32 dovrebbe andare bene, questa volta sto usando una scheda chiamata MH-ET LIVE.

Display LCD

Qualsiasi display LCD supportato da Arduino_GFX, potresti trovare il display attualmente supportato su GitHub readme:

github.com/moononournation/Arduino_GFX

Cavo del ponticello

Alcuni ponticelli dipendono dalla scheda di sviluppo e dalla disposizione dei pin dell'LCD. Nella maggior parte dei casi sono sufficienti 6-9 cavi di collegamento da femmina a femmina.

Supporto LCD

Alcuni supporti aiutano lo schermo LCD a stare dritto, questa volta sto usando un supporto per carte.

Passaggio 8: gruppo ESP32 + LCD

È preferibile l'ESP32 con intestazione pin sul lato superiore. Se l'intestazione del pin nella parte inferiore, è sufficiente capovolgere la scheda;>

Collegare ESP32 e LCD con cavi di collegamento, quindi adattarlo al supporto.

Ecco il riepilogo della connessione di esempio:

ESP32 -> LCD

Vcc -> Vcc GND -> GND GPIO 5 -> CS GPIO 27 -> DC (se disponibile) GPIO 33 -> RST GPIO 18 -> SCK GPIO 19 -> MISO (opzionale) GPIO 22 -> LED (se disponibile) GPIO 23 -> MOSI / SDA

Passaggio 9: ESP32 + Software LCD

Arduino IDE

Scarica e installa Arduino IDE se non lo sei ancora fatto:

www.arduino.cc/en/main/software

Supporto ESP32

Segui le istruzioni di installazione per aggiungere il supporto ESP32 se non lo hai ancora fatto:

github.com/espressif/arduino-esp32

Libreria Arduino_GFX

Scarica le ultime librerie Arduino_GFX: (premi "Clone or Download" -> "Download ZIP")

github.com/moononournation/Arduino_GFX

Importa librerie in Arduino IDE. (Menu "Sketch" dell'IDE Arduino -> "Includi libreria" -> "Aggiungi libreria. ZIP" -> seleziona il file ZIP scaricato)

Compila e carica

1. Apri Arduino IDE
2. Apri il codice di esempio ESP32PhotoFrame ("File" -> "Esempio" -> "Libreria GFX per Arduino" -> "WiFiPhotoFrame")
3. Inserisci le impostazioni dell'AP WiFi in SSID_NAME e SSID_PASSWORD
4. Sostituisci il nome host del tuo server o l'IP e la porta in HTTP_HOST e
5. Premi il pulsante "Carica" dell'IDE Arduino
6. Se trovi che l'orientamento non è corretto, cambia il valore di "rotazione" (0-3) nel nuovo codice di classe

Passaggio 10: goditi la foto

È ora di mettere la cornice per foto IoT sul desktop e divertiti!

Passaggio 11: cosa c'è dopo?

• Aggiungi le tue informazioni istantanee
• Ottimizza le dimensioni della foto sorgente per una migliore precisione di rilevamento del volto
• Attività automatica per inserire le foto più recenti nella cartella delle foto del server
• Scatta più foto;>