Atualização de março: crie gráficos para ESPHome!

Muita gente perguntou sobre o ESPHome — é um sistema que permite transformar microcontroladores comuns em dispositivos de casa inteligente. Como sempre no Lopaka: você pede, a gente entrega!

Plataforma ESPHome

Adicionei suporte à biblioteca de display padrão, incluindo geração de código lambda, declarações de imagens e fontes.

O ESPHome tem seu próprio arquivo de configuração YAML único, que pode ser difícil de gerenciar. Agora, pelo menos você pode criar gráficos bonitos para os seus projetos.

• adicionadas algumas fontes populares do Google Fonts
• Se você tiver camadas pintadas ou ícones, vai precisar baixar manualmente os arquivos de imagem e colocá-los no diretório esphome
• Confira as Configurações de código para opções adicionais que você pode querer ativar

Cor de fundo personalizada

Alguns usuários relataram usar displays exóticos como LCD ou E-paper, e é útil pré-visualizar o design o mais próximo possível do display real. Por isso adicionamos uma configuração de Projeto para a cor de fundo.

• Vale para todas as telas do projeto
• não afeta a geração de código
• você pode precisar escrever manualmente um código para preencher a tela com a cor desejada

Modo de desenho livre

Tenho a sensação de que o Lopaka não é só sobre geração de código — ele também pode ser um editor de pixel art vetorial! No Modo de desenho livre, todas as fontes, cores e ferramentas de desenho estão incluídas. Experimente!

Watchy — Relógio E-Paper open source

Você já ouviu falar dele? É um dispositivo vestível totalmente open source baseado no ESP32. https://watchy.sqfmi.com/

A melhor parte é que você pode criar gráficos para ele com o Lopaka! Escolha "AdafruitGFX Mono", defina a resolução para 200x200px, e você está pronto!! Aqui está o exemplo: https://lopaka.app/gallery/6403/13327

Projetando um display ESPHome, passo a passo

Aqui está o fluxo de um projeto vazio até um dispositivo com firmware instalado:

1. Crie um projeto, escolha ESPHome e defina o tamanho da tela para a resolução do seu display.
2. Desenhe o layout. Dê um nome claro a cada camada, já que os nomes das camadas viram comentários e nomes de variáveis na saída.
3. Em Configurações de código, ative Incluir fontes para texto, Declarar imagens para ícones e gráficos pintados, e Declarar variáveis se a tela mostrar dados de sensores ao vivo.
4. Desative Função wrapper se você colar em um bloco lambda: existente, para que só as chamadas de desenho it.* sejam copiadas.
5. Copie o código para o seu YAML. Coloque os blocos font: e image: na raiz do arquivo, não dentro do lambda.
6. Baixe os recursos de imagem em Configurações de código → Imagens e coloque-os na pasta images/ ao lado do seu YAML.

O ESPHome carrega fontes do Google Fonts quando compila o firmware, então não há arquivos de fonte para gerenciar. O guia do ESPHome cobre cada passo em detalhes, com solução de problemas para erros comuns de YAML. Para um exemplo completo, veja o tutorial de dashboard de casa inteligente com ESP32.

Mais sobre e-paper

Projetos e-paper como o Watchy também podem usar GxEPD2, que oferece suporte a paletas e-paper com preto, branco, cinza, vermelho e outras cores. Leia como outros makers projetaram interfaces e-paper em WeatherPaper e Cineink.