Geração de código

O Lopaka gera código-fonte específico da plataforma a partir do seu design visual em tempo real. Esta página explica como esse código é produzido, como colocá-lo no seu projeto e como fazer o caminho inverso — importar código existente de volta para o Lopaka para reconstruir camadas.

Geração

Como a saída é construída

O painel de código mostra a tela selecionada em suas abas de código. Toda vez que essa tela muda, o Lopaka reconstrói seu bloco de código gerado. A saída depende de quatro coisas:

1. Plataforma — cada plataforma tem seu próprio modelo de código e sintaxe.
2. Camadas — somente camadas visíveis e sem sobreposição aparecem na saída, na ordem de empilhamento.
3. Título da tela — vira o nome da função wrapper (consulte abaixo).
4. Configurações de código — alternadores que controlam quais seções são incluídas.

Título da tela e a função wrapper

O título da tela (editável com um clique duplo no título acima da tela) vira o nome da função wrapper gerada. O Lopaka o converte em um identificador C++ válido automaticamente:

Título da tela	Função gerada
Main Screen	void drawMain_Screen(void)
gauge display	void drawgauge_display(void)
123 Alert	void draw_123_Alert(void)
Status/Bar	void drawStatus_Bar(void)

Regras: espaços e caracteres especiais viram sublinhados; nomes que começam com um dígito ganham um sublinhado inicial; palavras reservadas do C++ ganham um sublinhado final.

Se você desativar Função wrapper nas Configurações de código, as chamadas de desenho simples são emitidas sem nenhuma função envolvente. Isso é útil ao colar diretamente em um callback existente.

Nomes de camadas e nomes de variáveis

Os nomes das camadas aparecem em dois lugares na saída:

• Comentários — quando Comentários está ativado, cada chamada de desenho é precedida por // nome da camada.
• Nomes de variáveis — quando Declarar variáveis está ativado, as variáveis de propriedade são nomeadas {layerName}_{property} (por exemplo, label_x, label_color).

Nomeie suas camadas com clareza antes de ativar as variáveis — os nomes vão direto para os identificadores do código.

Camadas ocultas

Camadas desativadas com o ícone de olho no painel de camadas são excluídas da geração de código por completo. Use isso para manter formas em andamento ou camadas de referência no projeto sem incluí-las na saída.

Configurações de código

O painel de Configurações de código (canto inferior direito do editor) controla quais seções são emitidas. Nem todas as configurações estão disponíveis em todas as plataformas.

Configuração	O que ela faz
Função wrapper	Envolve todas as chamadas de desenho em void draw{ScreenTitle}(void) { ... }
Comentários	Emite um comentário // nome da camada antes de cada chamada de desenho
Incluir fontes	Adiciona declarações de fontes ou diretivas #include para as fontes usadas no design
Declarar imagens	Adiciona declarações de arrays de imagens para camadas de bitmap e de ícone
Incluir arquivos de imagem	Mantém os pixels das imagens fora do código-fonte gerado e referencia os arquivos de recursos baixados
Declarar variáveis	Extrai propriedades marcadas das camadas para declarações de variáveis tipadas (consulte abaixo)
Limpar/preencher o display	Adiciona uma chamada para limpar a tela no topo da função
Auxiliares de animação	Adiciona auxiliares de reprodução e dados de quadros externos para camadas de animação
PROGMEM	Marca arrays de imagens e fontes com a classe de armazenamento PROGMEM do Arduino

As configurações são salvas por plataforma no seu navegador, então projetos em plataformas diferentes mantêm sua própria configuração.

Para a saída específica de animações, incluindo auxiliares de reprodução e dados de quadros para download, consulte Animações.

Auxiliares de polígonos

As camadas de polígono são emitidas por meio de funções auxiliares geradas. O nome do auxiliar é derivado do nome da camada e convertido em um identificador de código válido, e então o fluxo principal de desenho chama esse auxiliar.

Primeiro plano e fundo do texto

Algumas plataformas coloridas permitem que camadas de texto usem uma cor de fundo, que é incluída no código de desenho de texto gerado.

Variáveis

As variáveis permitem substituir propriedades de camadas escritas diretamente por identificadores nomeados que você pode atualizar em tempo de execução sem tocar na lógica de desenho.

Para marcar uma propriedade como variável:

1. Selecione uma camada.
2. No Inspetor, clique no alternador de variável (o ícone de hexágono) ao lado de uma propriedade compatível, como x, y, text ou color.
3. Ative Declarar variáveis nas Configurações de código.

O valor da propriedade é extraído para o topo do código gerado como uma declaração tipada:

// Declared at the top when "Declare variables" is on
int label_x = 10;
int label_y = 20;
const char* label_text = "Hello";

// Draw call references the variables
display.setCursor(label_x, label_y);
display.print(label_text);

Os nomes das variáveis são derivados do nome da camada e do nome da propriedade. Renomear a camada altera todos os nomes de suas variáveis — faça isso antes de compartilhar ou registrar o código.

Nem todas as propriedades oferecem suporte a variáveis. Posição, tamanho, cor e conteúdo de texto oferecem na maioria das plataformas. Propriedades como o tamanho da fonte são fixas e não podem ser marcadas como variáveis.

Exportação

Copiar do painel de código

Selecione a aba de código da tela e clique em Copiar para copiar sua saída completa, incluindo seu código personalizado antes e depois da seção gerada. Somente a seção gerada é somente leitura; as seções ao redor são editáveis. Consulte Modelo de código editável. Você também pode selecionar o texto manualmente com Ctrl A e Ctrl C.

Baixar como arquivo

Você pode baixar o conteúdo da aba de código aberta como um arquivo .txt, incluindo qualquer código personalizado antes e depois da seção gerada.

Para baixar: abra o menu Compartilhar na barra superior e escolha Salvar como → Arquivo de texto.

Baixar fontes e imagens

Quando seu design usa fontes personalizadas ou camadas de imagem, o Lopaka pode exportar esses recursos separadamente para que você possa incluí-los no seu projeto junto com o código gerado.

No painel de Configurações de código, uma seção Fontes lista todos os arquivos de fonte referenciados pelo design. Uma seção Imagens lista uma entrada por imagem única no design. Clique no ícone de download ao lado de cada entrada para salvar o recurso.

• Os arquivos de fonte são baixados no formato exigido pela plataforma ativa (.h para plataformas baseadas em GFX e U8g2).
• Para a U8g2, Renderizar somente os glifos usados limita cada fonte baixada aos caracteres usados por camadas de texto e de área de texto que a referenciam. Deixe desmarcado para exportar todos os glifos BDF. Fontes usadas por texto de variável em tempo de execução são sempre exportadas por completo.
• Os arquivos de imagem são baixados no formato que a plataforma ativa compila, nomeados a partir do símbolo que o código gerado usa. Imagens que compartilham pixels idênticos aparecem uma vez e são desenhadas a partir desse único recurso.

Plataforma	Arquivo de recurso de imagem
Adafruit GFX (colorido e mono), Arduino GFX, TFT_eSPI, GxEPD2, Inkplate	Cabeçalho C com bytes XBM ou pixels RGB565 — image_<Name>_bits.h ou image_<Name>_pixels.h
U8g2 (Arduino e ESP-IDF)	Cabeçalho C — image_<Name>_bits.h
Flipper Zero	Cabeçalho C independente com arrays uint8_t e sem cabeçalhos Arduino — image_<Name>_bits.h
LVGL (v9)	Código-fonte C com o descritor image_<Name>_dsc e seu mapa de pixels — <Name>.c
CircuitPython	Bitmap carregado por displayio.OnDiskBitmap — image_<Name>_bits.bmp
MicroPython	Bitmap portátil — image_<Name>_bits.pbm
ESPHome	PNG referenciado pelo YAML gerado como images/<Name>.png

Com Incluir arquivos de imagem ativado (e Declarar imagens ativado), o código-fonte gerado referencia esses arquivos em vez de carregar os pixels: a saída em C e C++ troca os arrays em linha por #include "<symbol>.h", e o MicroPython carrega o arquivo .pbm na inicialização. Os bytes dos recursos são exatamente o que os arrays em linha contêm, então qualquer um dos fluxos desenha o mesmo resultado. Com Declarar imagens desativado, o código-fonte referencia apenas os símbolos das imagens e não carrega dados de pixels; os downloads permanecem disponíveis.

Atenção

Sempre baixe e coloque os recursos de fontes e imagens ao lado do seu arquivo .ino ou YAML antes de gravar. Para a U8g2, coloque os arquivos .h baixados ao lado do código-fonte gerado da tela. Para o ESPHome, coloque os arquivos PNG na pasta images/ que o YAML referencia.

Importação

O Lopaka pode analisar código-fonte de plataforma existente e reconstruir camadas a partir dele. Isso é útil para continuar de onde uma exportação anterior parou ou para trazer um sketch existente para o editor visual.

Atenção

A importação de código é um recurso experimental. Nem toda a sintaxe é compatível. O analisador reconstrói o que consegue a partir de uma análise de melhor esforço do código — revise o resultado e verifique os avisos exibidos após a importação.

Como importar

Selecione a aba de código da tela de destino e clique no botão Importar à esquerda de Copiar para selecionar um arquivo de origem. O botão está disponível em plataformas que oferecem suporte à importação de código.

As camadas importadas são anexadas à tela dessa aba. As camadas existentes não são removidas. Se você quiser começar do zero, remova primeiro as camadas dessa tela.

O que é reconstruído

O analisador remove comentários, extrai macros #define e declarações de variáveis, e então procura chamadas de funções de desenho e as mapeia de volta para tipos de camada.

Construção analisada	Reconstruída como
drawLine / line	Camada de linha
drawRect / fillRect	Camada de retângulo
drawCircle / fillCircle	Camada de círculo
drawPixel	Camada de ponto
print / drawString	Camada de texto
drawBitmap / drawXBitmap	Camada de imagem / pintura
Declarações de arrays de imagens	Dados de bitmap, vinculados às camadas
Referências de fontes	Fonte atribuída às camadas de texto

Os valores de variáveis referenciados nos argumentos das funções são resolvidos de volta para seus valores declarados, então drawRect(x, y, 40, 20, WHITE) em que x = 10 e y = 5 cria um retângulo em (10, 5) com tamanho 40 × 20.

Limitações conhecidas

• Os nomes das camadas não são restaurados. As camadas importadas recebem nomes genéricos. Renomeie-as manualmente se você planejar usar variáveis.
• Somente chamadas padrão de bibliotecas são analisadas. Funções auxiliares personalizadas, ramificações #ifdef e macros de pré-processador além de #define são ignoradas.
• O estado das variáveis não é restaurado. Mesmo que uma propriedade fosse originalmente uma variável, ela é importada como um valor fixo. Reative o alternador de variável por camada manualmente, se necessário.
• Ambiguidade de cores. Para plataformas monocromáticas, o analisador distingue as cores 0/1. Para plataformas RGB, ele espera constantes hexadecimais (0xRRGGBB, 0xRRRR) ou constantes nomeadas como WHITE, BLACK. Definições de cores fora do padrão podem não ser reconhecidas.
• Nenhuma detecção de configurações. O analisador não detecta quais Configurações de código estavam ativas quando o código foi gerado. Verifique o painel de configurações após a importação.

Avisos

Após a importação, todas as construções que o analisador não conseguiu resolver são exibidas em uma mensagem de aviso do editor. Avisos comuns:

• Array de bitmap não encontrado — o código referencia uma imagem por nome, mas nenhuma declaração de array correspondente estava no código importado. A camada de imagem é criada como um espaço reservado.
• Fonte não reconhecida — o nome da fonte no código não corresponde a nenhuma fonte disponível. A camada de texto é criada, mas a fonte volta ao padrão da plataforma.
• Variável não resolvida — uma variável referenciada em uma chamada de desenho não tinha uma declaração correspondente. O argumento é importado como zero.

Corrija os avisos antes de tratar o design importado como a verdade absoluta.