Gesichtserkennungs-OSD-Bilderrahmen - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:15

Dieses Instructables zeigt, wie man einen Bilderrahmen mit gesichtsbewusstem On Screen Display (OSD) macht.

Das OSD kann Zeit, Wetter oder andere gewünschte Internetinformationen anzeigen.

Schritt 1: Warum OSD-Bilderrahmen?

Ich habe 2 Fotouhrprojekte bei Instructables vor:

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

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

Beide rufen im Minutentakt ein Foto mit Schönheiten und eine Zeittafel aus dem Internet ab und zeigen es auf dem LCD an.

Schönheiten zu zeigen ist gut, aber sie sind mir alle fremd. Wie wäre es, persönliche Lieblingsfotos zu verwenden und die aktuelle Uhrzeit und weitere Sofortinformationen dazu hinzuzufügen?

Dieses Projekt untersucht, wie man es macht.

Schritt 2: Warum Face Aware?

Sehen wir uns zuerst an, wie Sie einem Foto sofortiges Informations-OSD hinzufügen:

1. Wählen Sie zufällig ein Foto aus einem bestimmten Ordner
2. Uhrzeit abrufen
3. Sofortige Informationen aus dem Internet abrufen
4. Zeichnen Sie Zeit und sofortige Informationen auf dem Foto

Schritt 1-3 ist geradeaus; Schritt 4 sieht auch einfach aus, aber zu bestimmen, wo der Text gezeichnet werden soll, ist nicht so einfach.

Wenn die Textgröße zu klein ist, ist es in einem vernünftigen Abstand schwer zu lesen; Wenn die Textgröße zu groß ist, bedeckt sie höchstwahrscheinlich die Fotoobjekte. Besonders wenn es sich um Porträtfotos handelt, wird Text, der die Gesichter bedeckt, nicht bevorzugt.

Da die Position der Gesichter für jedes Foto nicht gleich ist, benötigen wir zuerst einen Gesichtserkennungsprozess, um OSD-verdeckte Gesichter zu vermeiden. Dann können wir einen No-Face-Bereich finden, um den Text zu zeichnen.

Schritt 3: 2-stufiges Design

Die Gesichtserkennung erfordert eine gewisse Rechenleistung, im Gegensatz dazu kann der Bilderrahmen sehr leicht sein. Also habe ich es in 2 Ebenen aufgeteilt:

Server

Die gesichtssensitive Foto-Engine ist ein Node.js-App-Server. Für jede HTTP-Anfrage wird Folgendes ausgeführt:

1. Wählen Sie zufällig ein Foto aus dem Fotoordner aus
2. Gesichtserkennung
3. Bestimmen Sie kein Gesicht oder einen Bereich mit der geringsten Fläche
4. Rufen Sie in der Zwischenzeit zu bestimmten Zeiten das Wetter oder andere nützliche Sofortinformationen aus dem Internet ab
5. Zeichne Zeit und sofortige Informationen auf das Foto
6. Geben Sie das Foto mit OSD im JPEG-Format als HTTP-Antwort zurück

Klient

Der Client kann ein Webbrowser, ein Applet oder ein IoT-Gerät sein.

Z. B. ein ESP32-Entwicklerboard mit einem 2-4 Zoll LCD ist sehr gut geeignet, um als winziger Bilderrahmen auf dem Desktop platziert zu werden.

Schritt 4: Fotoserver einrichten Option 1: Docker Image

Der Einfachheit halber habe ich ein Docker-Image für den gesichtsbewussten Foto-OSD-Node.js-App-Server vorgefertigt.

Falls Sie Docker noch nicht eingerichtet haben, folgen Sie bitte der Docker-Erste Schritte-Anleitung:

www.docker.com/get-started

Führen Sie dann den folgenden Befehl aus: (Ersetzen Sie /path/to/photo durch Ihren eigenen Fotopfad)

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

Testen Sie es, indem Sie zu https://localhost:8080/ navigieren.

Möglicherweise stellen Sie fest, dass die angezeigte Zeit nicht in Ihrer Zeitzone liegt:

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

Wenn Sie wie ich in Hongkong leben, können Sie Wetterinformationen für Hongkong hinzufügen:

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

Wenn Sie Ihre eigenen OSD-Informationen entwickeln möchten:

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

Ändern Sie die Funktion update_osd() in app.js, um Ihre eigenen OSD-Informationen anzupassen. Entfernen Sie nach der Entwicklung einfach die DEBUG=Y-Umgebung aus dem Docker-Befehl.

Schritt 5: Fotoserver einrichten Option 2: Aus Quelle erstellen

Wenn Sie mit Node.js vertraut sind, können Sie den App-Server aus der Quelle erstellen.

Holen Sie sich die Quelle:

git-Klon

Pakete installieren:

cd gesichtsbewusstes-foto-osd

npm installieren

Erstellen Sie einen Fotoordner und kopieren Sie Ihre eigenen Fotos in den Ordner.

App-Server ausführen:

Knoten app.js

Schritt 6: Client-Option 1: Webbrowser

Browser einfach zu

Die Seite ist skriptgesteuert und lädt jede Minute ein angepasstes Bild in Seitengröße.

PS Wenn Sie von einem anderen Computer aus surfen, auf dem der App-Server nicht ausgeführt wird, denken Sie daran, localhost in den Hostnamen oder die IP-Adresse des App-Servers zu ändern.

Schritt 7: Client-Option 2: ESP32 + LCD

Ein Bilderrahmen-Client kann so einfach sein wie ein ESP32-Entwicklungsboard und ein LCD.

Hier die benötigte Hardware:

ESP32-Entwicklungsboard

Jedes ESP32-Entwicklungsboard sollte in Ordnung sein, diesmal verwende ich ein Board namens MH-ET LIVE.

LCD Bildschirm

Alle von Arduino_GFX unterstützten LCDs finden Sie derzeit in der GitHub-Readme-Datei:

github.com/moononournation/Arduino_GFX

Überbrückungsdraht

Einige Jumperdrähte hängen vom Layout der Entwicklungsplatine und der LCD-Pins ab. In den meisten Fällen reichen 6-9 Steckbrücken von Buchse zu Buchse aus.

LCD-Ständer

Etwas Unterstützung hilft dem LCD, gerade zu stehen, diesmal verwende ich einen Kartenhalterständer.

Schritt 8: ESP32 + LCD-Baugruppe

Der ESP32 mit Stiftleiste auf der Oberseite wird bevorzugt. Wenn die Stiftleiste unten ist, einfach die Platine auf den Kopf stellen;>

Verbinden Sie ESP32 und LCD mit Überbrückungsdrähten und befestigen Sie es dann am Ständer.

Hier ist die Beispielverbindungszusammenfassung:

ESP32 -> LCD

Vcc -> Vcc GND -> GND GPIO 5 -> CS GPIO 27 -> DC (falls vorhanden) GPIO 33 -> RST GPIO 18 -> SCK GPIO 19 -> MISO (optional) GPIO 22 -> LED (falls vorhanden) GPIO 23 -> MOSI / SDA

Schritt 9: ESP32 + LCD-Software

Arduino-IDE

Laden Sie die Arduino IDE herunter und installieren Sie sie, wenn Sie dies noch nicht tun:

www.arduino.cc/en/main/software

ESP32-Unterstützung

Befolgen Sie die Installationsanweisungen, um ESP32-Unterstützung hinzuzufügen, wenn Sie dies noch nicht tun:

github.com/espressif/arduino-esp32

Arduino_GFX-Bibliothek

Laden Sie die neuesten Arduino_GFX-Bibliotheken herunter: (drücken Sie "Clone or Download" -> "Download ZIP")

github.com/moononournation/Arduino_GFX

Importieren Sie Bibliotheken in die Arduino-IDE. (Arduino IDE "Skizze"-Menü -> "Bibliothek einschließen" -> ". ZIP-Bibliothek hinzufügen" -> heruntergeladene ZIP-Datei auswählen)

Kompilieren & Hochladen

1. Öffnen Sie die Arduino-IDE
2. Öffnen Sie den ESP32PhotoFrame-Beispielcode ("Datei" -> "Beispiel" -> "GFX-Bibliothek für Arduino" -> "WiFiPhotoFrame")
3. Geben Sie Ihre WLAN-AP-Einstellungen in SSID_NAME und SSID_PASSWORD ein
4. Ersetzen Sie Ihren Server-Hostnamen oder Ihre IP und Ihren Port in HTTP_HOST und
5. Drücken Sie die Arduino IDE-Schaltfläche "Hochladen"
6. Wenn Sie feststellen, dass die Ausrichtung nicht korrekt ist, ändern Sie den Wert "Rotation" (0-3) im neuen Klassencode

Schritt 10: Foto genießen

Es ist Zeit, den IoT-Fotorahmen auf Ihren Desktop zu legen und zu genießen!

Schritt 11: Was kommt als nächstes?

• Fügen Sie Ihre eigenen Sofortinformationen hinzu
• Optimieren Sie die Größe des Quellfotos für eine bessere Genauigkeit der Gesichtserkennung
• Automatische Aufgabe zum Ablegen der neuesten Fotos in den Fotoordner des Servers
• Mach mehr Fotos;>