Mukha ang Frame ng Larawan ng OSD sa Mukha: 11 Mga Hakbang (na may Mga Larawan)

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:10

Ipinapakita ng Mga Tagubilin na ito kung paano gumawa ng isang frame ng larawan na may kamalayan sa mukha Sa Screen Display (OSD).

Maaaring magpakita ang OSD ng oras, panahon o iba pang impormasyon sa internet na gusto mo.

Hakbang 1: Bakit ang OSD Photo Frame?

Mayroon akong 2 mga proyekto sa orasan ng larawan sa Instructables bago:

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

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

Parehong nakuha ang isang larawan na may mga magagandang at isang time board mula sa Internet bawat minuto at ipinapakita sa LCD.

Ang pagpapakita ng mga kagandahan ay mabuti, ngunit lahat sila ay hindi ako kilala. Paano ang tungkol sa paggamit ng personal na mga paboritong larawan at magdagdag ng kasalukuyang oras at karagdagang impormasyon dito?

Ang proyektong ito ay tuklasin kung paano ito gagawin.

Hakbang 2: Bakit Nababatid sa Mukha?

Suriin natin kung paano magdagdag ng instant na impormasyon OSD sa isang larawan muna:

1. Random pumili ng isang larawan mula sa isang tukoy na folder
2. Kunin ang oras
3. Kunin ang instant na impormasyon mula sa Internet
4. gumuhit ng oras at instant na impormasyon sa larawan

Ang Hakbang 1-3 ay tuwid na pasulong; Ang Hakbang 4 ay mukhang simple din, ngunit matukoy kung saan iguhit ang teksto ay hindi ganoon kadali.

Kung ang laki ng teksto ay masyadong maliit, mahirap basahin sa isang makatwirang distansya; Kung masyadong malaki ang laki ng teksto, malamang na takpan nito ang mga object ng larawan. Lalo na kung ito ay larawan ng larawan, ang teksto na natatakpan ng mga mukha ay hindi ginusto.

Dahil hindi pareho ang posisyon ng mga mukha para sa bawat larawan, upang maiwasan ang mga sakop na OSD na mukha kailangan muna namin ang proseso ng pagtuklas ng mukha. Pagkatapos ay makakahanap tayo ng isang walang mukha na lugar upang iguhit ang teksto.

Hakbang 3: Disenyo ng 2-tier

Ang proseso ng pagtuklas ng mukha ay nangangailangan ng ilang kapangyarihan sa pagpoproseso, sa kaibahan, ang frame ng larawan ay maaaring maging napakagaan na timbang. Kaya't hinati ko ito sa 2-tier:

Server

Ang engine ng larawan na may kamalayan sa mukha ay isang Node.js app server. Para sa bawat kahilingan sa HTTP, ito ay:

1. Pumili ng larawan mula sa folder ng larawan nang sapalaran
2. Pagtuklas ng mukha
3. matukoy walang mukha o hindi gaanong mukha ang lugar
4. Sa pansamantalang oras, kunin ang panahon o iba pang kapaki-pakinabang na instant na impormasyon mula sa Internet bawat tiyak na panahon
5. Gumuhit ng oras at instant na impormasyon sa larawan
6. Ibalik ang larawan gamit ang OSD sa format na JPEG bilang tugon sa

Kliyente

Ang client ay maaaring isang web browser, isang applet o isang IoT device.

Hal. isang ESP32 dev boasrd na may isang 2-4 pulgada LCD ay lubos na akma para sa paglalagay sa desktop bilang isang maliit na frame ng larawan.

Hakbang 4: Pag-setup ng Photo Server Opsyon 1: Docker Image

Para sa kaginhawaan, paunang naitayo ko ang isang imahe ng Docker para sa mukha ng OSD Node.js server ng app na may kamalayan.

Kung sakaling hindi ka pa naka-set up ng Docker, mangyaring sundin ang gabay sa Docker Magsimula:

www.docker.com/get-started

Pagkatapos ay patakbuhin ang sumusunod na utos: (palitan / landas / sa / larawan sa iyong sariling landas ng larawan)

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

Subukan ito sa pamamagitan ng pag-browse sa https:// localhost: 8080 /

Maaari mong makita na ang oras ng pagpapakita ay wala sa iyong time zone:

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

Kung nakatira ka sa Hong Kong tulad ko, maaari kang magdagdag ng impormasyon sa panahon ng Hong Kong:

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

Kung nais mong bumuo ng iyong sariling impormasyon sa 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 -cious-photo-osd / app.js: /app/app.js moononournation / face -cious-photo-osd: 1.0. 1

Baguhin ang pag-andar ng update_osd () sa app.js upang maiangkop ang paggawa ng iyong sariling impormasyon sa OSD. Pagkatapos ng pag-unlad, alisin lamang ang DEBUG = Y na kapaligiran mula sa utos ng docker.

Hakbang 5: Pag-setup ng Larawan Server Opsyon 2: Bumuo Mula sa Pinagmulan

Kung pamilyar ka sa Node.js, maaari mong buuin ang server ng app mula sa mapagkukunan.

Kunin ang mapagkukunan:

git clone

I-install ang mga pakete:

cd mukha-kamalayan-larawan-osd

i-install

Lumikha ng folder ng larawan at kopyahin ang iyong sariling mga larawan sa folder.

Patakbuhin ang server ng app:

node app.js

Hakbang 6: Pagpipilian sa Client 1: Web Browser

Simpleng browser sa https:// localhost: 8080 /

Ang pahina ay na-script na awtomatikong mag-load ng sukat na sukat ng imahe ng imahe bawat minuto.

P. S. Kung nagba-browse ka mula sa ibang machine na hindi tumatakbo ang app server, tandaan na baguhin ang localhost sa hostname ng app server o IP address.

Hakbang 7: Opsyon ng Client 2: ESP32 + LCD

Ang isang client ng frame ng larawan ay maaaring maging kasing simple ng isang ESP32 dev board at isang LCD.

Narito ang kinakailangang hardware:

ESP32 Dev Board

Ang anumang ESP32 dev board ay dapat na ok, sa oras na ito ay gumagamit ako ng isang board na tinatawag na MH-ET LIVE.

LCD Display

Anumang sinusuportahan ng LCD ng Arduino_GFX, maaari mong makita ang kasalukuyang sinusuportahang pagpapakita sa GitHub readme:

github.com/moononournation/Arduino_GFX

Jumper Wire

Ang ilang mga Jumper Wires, nakasalalay sa dev board at LCD pin layout. Sa karamihan ng mga kaso ay sapat na ang 6-9 babaeng hanggang babaeng jumper wires.

LCD Stand

Ang ilang suporta ay makakatulong sa LCD na nakatayo nang tuwid, sa oras na ito ay gumagamit ako ng stand ng may hawak ng card.

Hakbang 8: ESP32 + LCD Assembly

Ang ESP32 na may pin header sa itaas na bahagi ay ginustong. Kung ang pin header sa ibabang bahagi, ilagay lamang ang board ng baligtad;>

Ikonekta ang ESP32 at LCD na may mga wire ng jumper, pagkatapos ay magkasya ito sa stand.

Narito ang sample na buod ng koneksyon:

ESP32 -> LCD

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

Hakbang 9: ESP32 + LCD Software

Arduino IDE

I-download at i-install ang Arduino IDE kung hindi mo pa ito nagagawa:

www.arduino.cc/en/main/software

Suporta ng ESP32

Sundin ang Mga Tagubilin sa Pag-install upang magdagdag ng suporta sa ESP32 kung hindi mo pa ito nagagawa:

github.com/espressif/arduino-esp32

Arduino_GFX Library

Mag-download ng pinakabagong mga aklatan ng Arduino_GFX: (pindutin ang "I-clone o I-download" -> "I-download ang ZIP")

github.com/moononournation/Arduino_GFX

Mag-import ng mga aklatan sa Arduino IDE. (Arduino IDE "Sketch" Menu -> "Isama ang Library" -> "Idagdag. ZIP Library" -> piliin ang na-download na ZIP file)

Magtipon at Mag-upload

1. Buksan ang Arduino IDE
2. Buksan ang sample code ng ESP32PhotoFrame ("File" -> "Halimbawa" -> "GFX Library for Arduino" -> "WiFiPhotoFrame")
3. Punan ang iyong mga setting ng WiFi AP sa SSID_NAME at SSID_PASSWORD
4. Palitan ang hostname ng server o IP at port sa HTTP_HOST at
5. Pindutin ang pindutan ng "Mag-upload" ng Arduino IDE
6. Kung nakita mong hindi tama ang oryentasyon, baguhin ang halagang "pag-ikot" (0-3) sa bagong code ng klase

Hakbang 10: Masiyahan sa Larawan

Panahon na upang ilagay ang frame ng larawan ng IoT sa iyong desktop at mag-enjoy!

Hakbang 11: Ano ang Susunod?

• Idagdag ang iyong sariling instant na impormasyon
• Pinuhin ang laki ng pinagmulan ng larawan para sa mas mahusay na kawastuhan ng pagtuklas ng mukha
• Awtomatikong gawain upang ilagay ang pinakabagong mga larawan sa folder ng larawan ng server
• Kumuha ng maraming larawan;>