Marc fotogràfic OSD Face Aware: 11 passos (amb imatges)

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:11

Aquest manual d’instruccions mostra com es pot fer un marc de fotos amb visualització en pantalla (OSD) conscient de la cara.

L'OSD pot mostrar l'hora, el temps o qualsevol altra informació d'Internet que vulgueu.

Pas 1: per què el marc de fotos OSD?

Tinc 2 projectes de rellotges fotogràfics a Instructables abans:

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

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

Tots dos recuperen una foto amb belleses i un tauler horari d’Internet cada minut i es mostren a la pantalla LCD.

Mostrar belleses és bo, però totes són estranyes per a mi. Què hi ha de fer servir fotos preferides personals i afegir-hi l’hora actual i més informació instantània?

Aquest projecte està explorant com fer-ho.

Pas 2: per què Face Aware?

Comprovem primer com afegir informació instantània OSD a una foto:

1. Seleccioneu a l'atzar una foto d'una carpeta específica
2. Recupereu el temps
3. Recupereu informació instantània d'Internet
4. dibuixa temps i informació instantània a la foto

El pas 1-3 és directe; El pas 4 també es veu senzill, però determinar on dibuixar el text no és tan fàcil.

Si la mida del text és massa petita, és difícil de llegir a una distància raonable; Si la mida del text és massa gran, és probable que cobreixi els objectes de la foto. Sobretot si es tracta de fotografies retratades, no es prefereix el text que cobreixi les cares.

Com que la posició de les cares per a cada foto no és la mateixa, per evitar les cares cobertes amb OSD, necessitem primer un procés de detecció de cares. Aleshores podem trobar una àrea sense cara per dibuixar el text.

Pas 3: disseny de 2 nivells

El procés de detecció de rostres requereix una certa potència de processament, en canvi, el marc de fotos pot ser molt lleuger. Així que el vaig dividir en dos nivells:

Servidor

El motor de fotos conscients de la cara és un servidor d’aplicacions Node.js. Per a cada sol·licitud

1. Seleccioneu una foto de la carpeta de fotos a l'atzar
2. Detecció de cares
3. determinar cap àrea de cara o mínim de cares
4. Mentrestant, recupereu el temps o qualsevol altra informació útil instantània d’Internet cada cert període
5. Dibuixa informació de temps i informació instantània a la foto
6. Torneu la foto amb OSD en format JPEG com a resposta

Client

El client pot ser un navegador web, un applet o un dispositiu IoT.

Per exemple. un boasrd de desenvolupament ESP32 amb una pantalla LCD de 2 a 4 polzades és molt adequat per col·locar-lo a l'escriptori com a petit marc de fotos.

Pas 4: Configuració del servidor de fotos Opció 1: Docker Image

Per comoditat, he construït prèviament una imatge de Docker per al servidor d’aplicacions OSD Node.js de fotos sensibles a la cara.

En cas que encara no estigueu configurant Docker, seguiu la guia d'inici de Docker:

www.docker.com/get-started

A continuació, executeu l'ordre següent: (substituïu / path / to / photo al vostre propi camí de fotos)

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

Proveu-lo navegant a https:// localhost: 8080 /

És possible que trobeu que l'hora de visualització no es troba al vostre fus horari:

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

Si viviu a Hong Kong com jo, podeu afegir informació meteorològica a 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

Si voleu desenvolupar la vostra pròpia informació OSD:

mkdir -p ~ / git

cd ~ / git git clon 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

Modifiqueu la funció update_osd () a app.js per personalitzar la vostra informació OSD. Després del desenvolupament, simplement elimineu l'entorn DEBUG = Y de l'ordre docker.

Pas 5: configureu l'opció 2 del servidor de fotos: creeu des de l'origen

Si esteu familiaritzat amb Node.js, podeu crear el servidor d'aplicacions des de l'origen.

Obteniu la font:

git clone

Instal·leu paquets:

cd face-aware-photo-osd

Instal·lació de npm

Crea una carpeta de fotos i copia les teves pròpies fotos a la carpeta.

Executa el servidor d'aplicacions:

node app.js

Pas 6: Opció 1 del client: navegador web

Simplement navegueu a https:// localhost: 8080 /

La pàgina es carrega automàticament amb una imatge de mida de pàgina adequada cada minut.

P. S. Si navegueu des d'una altra màquina que no executa el servidor d'aplicacions, recordeu que heu de canviar localhost pel nom d'amfitrió del servidor d'aplicacions o l'adreça IP.

Pas 7: Opció 2 del client: ESP32 + LCD

Un client de marcs de fotos pot ser tan senzill com una placa de desenvolupament ESP32 i una pantalla LCD.

Aquí teniu el maquinari necessari:

ESP32 Dev Board

Qualsevol placa de desenvolupament ESP32 hauria d’estar bé, aquesta vegada estic fent servir una placa anomenada MH-ET LIVE.

Pantalla LCD

Qualsevol LCD compatible amb Arduino_GFX, és possible que trobeu la pantalla compatible actualment a GitHub readme:

github.com/moononournation/Arduino_GFX

Jumper Wire

Alguns cables de pont, depenen del disseny de la placa de desenvolupament i dels pins LCD. En la majoria dels casos, n’hi ha prou amb 6-9 cables de pont femení a femení.

Suport LCD

Algunes ajudes ajuden el LCD a estar dret, aquesta vegada estic fent servir un suport per a targetes.

Pas 8: muntatge LCD ESP32 +

Es prefereix l’ESP32 amb capçalera de pins a la part superior. Si la capçalera del pin del costat inferior, simplement poseu el tauler cap per avall;>

Connecteu ESP32 i LCD amb cables de pont i, a continuació, encaixeu-los al suport.

Aquí teniu el resum de connexió de mostra:

ESP32 -> LCD

Vcc -> Vcc GND -> GND GPIO 5 -> CS GPIO 27 -> CC (si està disponible) GPIO 33 -> RST GPIO 18 -> SCK GPIO 19 -> MISO (opcional) GPIO 22 -> LED (si està disponible) GPIO 23 -> MOSI / SDA

Pas 9: programari LCD ESP32 +

IDE Arduino

Descarregueu i instal·leu Arduino IDE si encara no ho feu:

www.arduino.cc/ca/main/software

Suport ESP32

Seguiu les instruccions d'instal·lació per afegir suport ESP32 si encara no ho feu:

github.com/espressif/arduino-esp32

Biblioteca Arduino_GFX

Descarregueu les darreres biblioteques Arduino_GFX: (premeu "Clona o descarrega" -> "Descarrega ZIP")

github.com/moononournation/Arduino_GFX

Importeu biblioteques a Arduino IDE. (Arduino IDE "Sketch" Menu -> "Include Library" -> "Add. ZIP Library" -> select ZIP downloaded file)

Compila i penja

1. Obriu Arduino IDE
2. Obriu el codi de mostra ESP32PhotoFrame ("Fitxer" -> "Exemple" -> "Biblioteca GFX per a Arduino" -> "WiFiPhotoFrame")
3. Empleneu la configuració de l'aplicació WiFi a SSID_NAME i SSID_PASSWORD
4. Substituïu el nom d'amfitrió del servidor o l'IP i el port per HTTP_HOST i
5. Premeu el botó Arduino IDE "Puja"
6. Si l'orientació no és correcta, canvieu el valor de "rotació" (0-3) al codi de classe nou

Pas 10: gaudiu de la foto

És hora de posar el marc de fotos IoT a l’escriptori i gaudir-ne!

Pas 11: què passa?

• Afegiu la vostra pròpia informació instantània
• Afineu la mida de la foto d'origen per obtenir una precisió millor de la cara
• Tasca automàtica per posar les darreres fotos a la carpeta de fotos del servidor
• Feu més fotos;>