Yüze Duyarlı OSD Fotoğraf Çerçevesi: 11 Adım (Resimlerle)

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:17

Bu Talimatlar, Yüz tanımalı Ekran Görüntüsü (OSD) ile nasıl fotoğraf çerçevesi yapılacağını gösterir.

OSD, istediğiniz saati, hava durumunu veya diğer internet bilgilerini gösterebilir.

Adım 1: Neden OSD Fotoğraf Çerçevesi?

Daha önce Instructables'ta 2 fotoğraf saati projem var:

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

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

Her ikisi de her dakika internetten güzelliklerle dolu bir fotoğraf ve bir zaman çizelgesi alır ve LCD'de görüntülenir.

Güzellikleri sergilemek güzel ama hepsi bana yabancı. Kişisel favori fotoğrafları kullanmaya ve bunun üzerine mevcut saati ve daha fazla anlık bilgiyi eklemeye ne dersiniz?

Bu proje nasıl yapılacağını araştırıyor.

Adım 2: Neden Yüz Farkındalığı?

Önce bir fotoğrafa anlık bilgi OSD'sinin nasıl ekleneceğini kontrol edelim:

1. Belirli bir klasörden rastgele bir fotoğraf seçin
2. alma zamanı
3. İnternetten anında bilgi alın
4. fotoğrafın üzerine zaman ve anlık bilgi çizin

Adım 1-3 düz ileridir; 4. Adım da basit görünüyor, ancak metnin nereye çizileceğini belirlemek o kadar kolay değil.

Metin boyutu çok küçükse, makul bir mesafeden okunması zordur; Metin boyutu çok büyükse, büyük olasılıkla fotoğraf nesnelerini kaplar. Özellikle portre fotoğraf ise, yüzleri kaplayan yazı tercih edilmez.

Her fotoğraf için yüzlerin konumu aynı olmadığından, OSD kaplı yüzlerden kaçınmak için önce bir yüz algılama işlemine ihtiyacımız var. Sonra metni çizmek için yüzsüz bir alan bulabiliriz.

Adım 3: 2 katmanlı Tasarım

Yüz algılama işlemi biraz işlem gücü gerektirir, aksine fotoğraf çerçevesi çok hafif olabilir. Bu yüzden onu 2 katmana ayırdım:

sunucu

Yüz tanımalı fotoğraf motoru, bir Node.js uygulama sunucusudur. Her HTTP isteği için:

1. Fotoğraf klasöründen rastgele bir fotoğraf seçin
2. Yüz tanıma
3. yüz yok veya en az yüz alanı belirleme
4. Bu arada, belirli bir periyotta İnternet'ten hava durumu veya diğer yararlı anlık bilgileri alın
5. Fotoğraf üzerine zaman ve anlık bilgi çizin
6. Fotoğrafı OSD ile HTTP yanıtı olarak JPEG formatında döndür

Müşteri

İstemci bir web tarayıcısı, bir uygulama veya bir IoT cihazı olabilir.

Örneğin. 2-4 inç LCD'ye sahip bir ESP32 geliştirme panosu, masaüstüne küçük bir fotoğraf çerçevesi olarak yerleştirmek için çok uygundur.

Adım 4: Fotoğraf Sunucusu Kurulumu Seçenek 1: Docker Image

Kolaylık sağlamak için, yüze duyarlı fotoğraf OSD Node.js uygulama sunucusu için önceden bir Docker görüntüsü oluşturdum.

Henüz Docker'ı kurmadıysanız, lütfen Docker Başlangıç kılavuzunu izleyin:

www.docker.com/get-started

Ardından aşağıdaki komutu çalıştırın: (/path/to/photo yerine kendi fotoğraf yolunuzla değiştirin)

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

localhost:8080/ adresine göz atarak test edin.

Gösterilen saatin sizin saat diliminizde olmadığını görebilirsiniz:

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

Benim gibi Hong Kong'da yaşıyorsanız, Hong Kong hava durumu bilgilerini ekleyebilirsiniz:

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

Kendi OSD bilgilerinizi geliştirmek isterseniz:

mkdir -p ~/git

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

Kendi OSD bilgilerinizi özelleştirmek için app.js'deki update_osd() işlevini değiştirin. Geliştirmeden sonra, DEBUG=Y ortamını docker komutundan kaldırmanız yeterlidir.

Adım 5: Fotoğraf Sunucusu Kurulumu Seçenek 2: Kaynaktan Oluştur

Node.js hakkında bilginiz varsa uygulama sunucusunu kaynaktan oluşturabilirsiniz.

Kaynağı alın:

git klon

Paketleri yükleyin:

cd yüz-farkında-foto-osd

npm kurulumu

Fotoğraf klasörü oluşturun ve kendi fotoğraflarınızı klasöre kopyalayın.

Uygulama sunucusunu çalıştırın:

düğüm uygulaması.js

Adım 6: İstemci Seçeneği 1: Web Tarayıcısı

Basitçe tarayıcıyı https://localhost:8080/ konumuna getirin

Sayfa, her dakika otomatik olarak sığacak bir sayfa boyutunda resim yüklenir.

not Uygulama sunucusunu çalıştırmayan başka bir makineden göz atıyorsanız, localhost'u uygulama sunucusu ana bilgisayar adı veya IP adresi olarak değiştirmeyi unutmayın.

Adım 7: İstemci Seçeneği 2: ESP32 + LCD

Bir fotoğraf çerçevesi istemcisi, bir ESP32 geliştirme kartı ve bir LCD kadar basit olabilir.

İşte gerekli donanımlar:

ESP32 Geliştirme Kartı

Herhangi bir ESP32 dev panosu iyi olmalı, bu sefer MH-ET LIVE adlı bir pano kullanıyorum.

LCD ekran

Arduino_GFX destekli herhangi bir LCD, şu anda desteklenen ekranı GitHub benioku sayfasında bulabilirsiniz:

github.com/moononournation/Arduino_GFX

Jumper Tel

Bazı Jumper Telleri, geliştirme kartına ve LCD pin düzenine bağlıdır. Çoğu durumda 6-9 dişiden dişiye jumper telleri yeterlidir.

LCD Standı

Bazı destekler LCD'nin düz durmasına yardımcı oluyor, bu sefer bir kart tutucu standı kullanıyorum.

Adım 8: ESP32 + LCD Montajı

Üst tarafta pin başlıklı ESP32 tercih edilir. Pim başlığı alt taraftaysa, kartı baş aşağı koymanız yeterlidir;>

ESP32 ve LCD'yi atlama kablolarıyla bağlayın, ardından standa takın.

İşte örnek bağlantı özeti:

ESP32 -> LCD

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

9. Adım: ESP32 + LCD Yazılımı

Arduino IDE'si

Henüz yapmadıysanız Arduino IDE'yi indirin ve yükleyin:

www.arduino.cc/en/main/software

ESP32 Desteği

Henüz yapmadıysanız, ESP32 desteği eklemek için Kurulum Talimatlarını izleyin:

github.com/espressif/arduino-esp32

Arduino_GFX Kitaplığı

En son Arduino_GFX kitaplıklarını indirin: ("Klonla veya İndir" -> "ZIP İndir"e basın)

github.com/moononournation/Arduino_GFX

Arduino IDE'deki kütüphaneleri içe aktarın. (Arduino IDE "Sketch" Menüsü -> "Kitaplığı Dahil Et" -> ". ZIP Kitaplığı Ekle" -> indirilen ZIP dosyasını seçin)

Derle ve Yükle

1. Arduino IDE'yi açın
2. ESP32PhotoFrame örnek kodunu açın ("Dosya" -> "Örnek" -> "Arduino için GFX Kitaplığı" -> "WiFiPhotoFrame")
3. WiFi AP ayarlarınızı SSID_NAME ve SSID_PASSWORD olarak doldurun
4. Sunucu ana bilgisayar adınızı veya IP'nizi ve bağlantı noktasını HTTP_HOST ve HTTP_PORT'ta değiştirin
5. Arduino IDE "Yükle" düğmesine basın
6. Yönlendirmenin doğru olmadığını fark ederseniz, yeni sınıf kodunda "döndürme" değerini (0-3) değiştirin.

Adım 10: Fotoğrafın Keyfini Çıkarın

IoT fotoğraf çerçevesini masaüstünüze koymanın ve keyfini çıkarmanın zamanı geldi!

Adım 11: Sırada Ne Var?

• Kendi anlık bilgilerinizi ekleyin
• Daha iyi yüz algılama doğruluğu için kaynak fotoğraf boyutunda ince ayar yapın
• En son fotoğrafları sunucu fotoğraf klasörüne koymak için otomatik görev
• Daha fazla fotoğraf çekin;>