Atualização de abril: variáveis, camadas ocultas e muito mais
Acabamos de lançar um lote de recursos novos que vocês vinham pedindo, além de algumas correções importantes para deixar tudo mais suave. Agora você pode usar variáveis para qualquer propriedade de camada, ocultar ou mostrar camadas e aproveitar títulos de camada mais inteligentes — tudo pensado para dar mais controle e uma saída mais limpa.
Variáveis para propriedades de camadas Agora você pode declarar variáveis para coisas como posição, tamanho, cor e texto. É só ativar “Declarar variáveis”, e essas propriedades vão ser extraídas como variáveis no topo do seu código. Os nomes das variáveis são baseados nos títulos das camadas — então dê bons nomes a elas.
Ocultar/Mostrar camadas O novo ícone de olho na lista de camadas permite alternar a visibilidade. Camadas ocultas não vão aparecer na saída de jeito nenhum.
Títulos de camada inteligentes para texto Por padrão, o conteúdo de uma camada de texto vira o título dela. Mas, se você renomear o título, ele tem prioridade na lista, mantendo tudo limpo.
🔧 Correções
- Cantos arredondados agora são renderizados com precisão de pixel perfeita
- Aspas duplas em camadas de texto agora são escapadas corretamente
- O ESPHome agora tem uma lógica de variáveis e nomenclatura de imagens melhor
Conte para mim o que você achou — e obrigado, como sempre, por fazer parte dessa jornada!
O fato é que o Lopaka só existe graças ao seu apoio.
Se você gosta do que eu faço, há muitas opções para apoiar o desenvolvimento do Lopaka:
- Divulgue para seus amigos e colegas
- Envie seu feedback e pedidos de recursos: https://airtable.com/apps27BkejrUF0DWT/pagP4FNoUcmtwGsAW/form
- Compre uma assinatura Plus https://lopaka.app/price
- Torne-se um patrocinador ❤️ https://buymeacoffee.com/milin
Como usar variáveis na prática
Variáveis transformam um mockup estático em uma tela que seu firmware pode atualizar. Um exemplo típico é uma leitura de temperatura: você projeta o layout uma vez e depois muda o texto e a cor em tempo de execução sem tocar no código de desenho.
- Selecione uma camada, como uma camada de texto mostrando
23°C. - No Inspetor, clique no alternador de variável ao lado da propriedade que você quer controlar, como
text,x,youcolor. - Ative Declarar variáveis nas Configurações de código.
O Lopaka move esses valores para o topo do código gerado como declarações tipadas, e as chamadas de desenho os referenciam:
const char* temp_text = "23°C";
int temp_x = 10;
display.setCursor(temp_x, 20);
display.print(temp_text);Os nomes das variáveis vêm do nome da camada e da propriedade, por exemplo temp_text. Renomeie as camadas antes de copiar o código para o seu projeto, porque renomear uma camada depois muda os nomes das variáveis dela.
Camadas ocultas e sobreposições
Camadas ocultas são úteis para manter estados alternativos na mesma tela, como um ícone de erro ou um aviso de bateria fraca, sem exportá-los. Para imagens de referência que você usa como base para desenhar por cima, use a opção Sobreposição: a camada fica esmaecida na tela de desenho e fora do código.
Veja Geração de código para a lista completa de opções, e o guia do ESPHome para usar variáveis com dados de sensores.