Porta-retratos OSD sensível ao rosto: 11 etapas (com imagens)

2025 Autor: John Day | [email protected]. Última modificação: 2025-01-23 15:03

Este manual de instruções mostra como fazer uma moldura de foto com exibição na tela (OSD) com reconhecimento de rosto.

O OSD pode mostrar a hora, previsão do tempo ou outras informações da Internet que você deseja.

Etapa 1: Por que o OSD Photo Frame?

Eu tenho 2 projetos de relógios de fotos na Instructables antes de:

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

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

Ambos recuperam uma foto com belezas e um quadro do tempo da Internet a cada minuto e exibem no LCD.

Exibir belezas é bom, mas todas elas são estranhas para mim. Que tal usar fotos pessoais favoritas e adicionar a hora atual e mais informações instantâneas sobre elas?

Este projeto está explorando como fazer isso.

Etapa 2: Por que o Face Aware?

Vamos verificar como adicionar OSD de informações instantâneas a uma foto primeiro:

1. Selecione aleatoriamente uma foto de uma pasta específica
2. Tempo de recuperação
3. Recupere informações instantâneas da Internet
4. desenhe o tempo e as informações instantâneas na foto

O passo 1-3 é direto; O passo 4 também parece simples, mas determinar onde desenhar o texto não é tão fácil.

Se o tamanho do texto for muito pequeno, é difícil ler a uma distância razoável; Se o tamanho do texto for muito grande, provavelmente cobrirá os objetos da foto. Especialmente se for uma foto de retrato, o texto que cobre os rostos não é preferido.

Uma vez que a posição dos rostos para cada foto não é a mesma, para evitar rostos cobertos pelo OSD, precisamos primeiro de um processo de detecção de rosto. Então, podemos encontrar uma área sem rosto para desenhar o texto.

Etapa 3: Design de 2 camadas

O processo de detecção de rosto requer algum poder de processamento, em contraste, o porta-retratos pode ser muito leve. Então, eu divido em 2 camadas:

Servidor

O mecanismo de foto com reconhecimento de rosto é um servidor de aplicativos Node.js. Para cada solicitação HTTP, ele irá:

1. Selecione uma foto da pasta de fotos aleatoriamente
2. Detecção de rosto
3. determinar nenhuma área de rosto ou menos faces
4. Nesse meio tempo, recupere o clima ou outras informações instantâneas úteis da Internet a cada certo período
5. Desenhe o tempo e as informações instantâneas na foto
6. Retorne a foto com OSD em formato JPEG como resposta

Cliente

O cliente pode ser um navegador da web, um miniaplicativo ou um dispositivo IoT.

Por exemplo. um ESP32 dev com um LCD de 2 a 4 polegadas é muito adequado para ser colocado na área de trabalho como uma pequena moldura de foto.

Etapa 4: configurar a opção 1 do servidor de fotos: imagem do Docker

Por conveniência, eu pré-construí uma imagem Docker para o servidor de aplicativo Node.js OSD com reconhecimento de rosto.

Caso você ainda não tenha configurado o Docker, siga o guia de primeiros passos do Docker:

www.docker.com/get-started

Em seguida, execute o seguinte comando: (substitua / caminho / para / foto em seu próprio caminho de foto)

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

Teste-o navegando para https:// localhost: 8080 /

Você pode descobrir que a hora de exibição não está no seu fuso horário:

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 você mora em Hong Kong como eu, pode adicionar informações sobre o clima de 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 você gostaria de desenvolver suas próprias informações de 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

Modifique a função update_osd () em app.js para customizar suas próprias informações OSD. Após o desenvolvimento, simplesmente remova o ambiente DEBUG = Y do comando docker.

Etapa 5: Configurar opção 2 do servidor de fotos: construir a partir da fonte

Se você está familiarizado com Node.js, pode construir o servidor de aplicativos a partir da fonte.

Obtenha a fonte:

git clone

Instale os pacotes:

cd face-aware-photo-osd

npm install

Crie uma pasta de fotos e copie suas próprias fotos para a pasta.

Execute o servidor de aplicativos:

node app.js

Etapa 6: Opção 1 do cliente: navegador da web

Basta navegar para https:// localhost: 8080 /

A página tem um script de carregamento automático de uma imagem de tamanho de página ajustada a cada minuto.

P. S. Se você navegar em outra máquina que não esteja executando o servidor de aplicativos, lembre-se de alterar localhost para o nome de host ou endereço IP do servidor de aplicativos.

Etapa 7: Opção 2 do cliente: ESP32 + LCD

Um cliente de moldura de foto pode ser tão simples quanto uma placa de desenvolvimento ESP32 e um LCD.

Aqui estão os hardwares necessários:

ESP32 Dev Board

Qualquer placa de desenvolvimento ESP32 deve estar ok, desta vez estou usando uma placa chamada MH-ET LIVE.

Tela de LCD

Qualquer LCD compatível com Arduino_GFX, você pode encontrar a exibição atualmente compatível no leiame do GitHub:

github.com/moononournation/Arduino_GFX

Jumper Wire

Alguns cabos de ligação dependem da placa de desenvolvimento e do layout dos pinos do LCD. Na maioria dos casos, 6-9 fios de jumper fêmea para fêmea são suficientes.

Suporte LCD

Alguns suportes ajudam o LCD a ficar reto, desta vez estou usando um suporte de porta-cartões.

Etapa 8: Conjunto ESP32 + LCD

O ESP32 com cabeçote de pino no lado superior é o preferido. Se o cabeçalho do pino estiver na parte inferior, simplesmente coloque a placa de cabeça para baixo;>

Conecte o ESP32 e o LCD com fios de jumper e, em seguida, instale-o no suporte.

Aqui está o exemplo de resumo de conexão:

ESP32 -> LCD

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

Etapa 9: Software ESP32 + LCD

IDE Arduino

Baixe e instale o Arduino IDE se ainda não o fez:

www.arduino.cc/en/main/software

Suporte ESP32

Siga as instruções de instalação para adicionar suporte ESP32 se você ainda não o fez:

github.com/espressif/arduino-esp32

Biblioteca Arduino_GFX

Baixe as bibliotecas Arduino_GFX mais recentes: (pressione "Clonar ou Baixar" -> "Baixar o ZIP")

github.com/moononournation/Arduino_GFX

Importe bibliotecas no Arduino IDE. (Menu "Sketch" do IDE do Arduino -> "Incluir Biblioteca" -> "Adicionar Biblioteca. ZIP" -> selecione o arquivo ZIP baixado)

Compilar e fazer upload

1. Abra o IDE Arduino
2. Abra o código de amostra ESP32PhotoFrame ("Arquivo" -> "Exemplo" -> "Biblioteca GFX para Arduino" -> "WiFiPhotoFrame")
3. Preencha suas configurações de WiFi AP em SSID_NAME e SSID_PASSWORD
4. Substitua o nome de host do servidor ou IP e porta em HTTP_HOST e
5. Pressione o botão "Upload" do IDE do Arduino
6. Se você achar que a orientação não está correta, altere o valor de "rotação" (0-3) no novo código de classe

Etapa 10: Aproveite a foto

É hora de colocar a moldura de foto IoT em sua área de trabalho e divirta-se!

Etapa 11: o que vem a seguir?

• Adicione suas próprias informações instantâneas
• Ajuste o tamanho da foto de origem para melhor precisão de detecção de rosto
• Tarefa automática para colocar as fotos mais recentes na pasta de fotos do servidor
• Tire mais fotos;>