Visão geral do editor

Esta página é a referência completa da interface do editor do Lopaka. Cada seção principal tem um guia dedicado vinculado a partir dos títulos abaixo. Use esta página para se orientar e encontrar o caminho para os detalhes.

Layout

O editor combina uma árvore de camadas do projeto, um espaço de trabalho e um painel de código:

┌──────────┬──────────────────────────┬─────────────┐
│          │        Top bar           │             │
│  Layers  ├──────────────────────────┤  Inspector  │
│  panel   │        Screens + tools   │    panel    │
│          ├──────────────────────────┴─────────────┤
│          │  Code panel          │  Code settings  │
└──────────┴──────────────────────┴─────────────────┘

Região	Finalidade
Painel de camadas	Telas, camadas e grupos expansíveis, redimensionável
Barra superior	Detalhes e ações do projeto
Tela de desenho	As telas e a arte do projeto
Painel do inspetor	Propriedades da camada selecionada
Painel de código	Abas de código da tela, redimensionável
Configurações de código	Alternadores e downloads da saída de código

Redimensionar os painéis

O painel de Camadas e o painel de código são redimensionáveis. Arraste a alça de redimensionamento na borda de um painel para alterar o tamanho dele.

Barra superior

A barra superior contém Detalhes do projeto e Ações. As ferramentas de desenho ficam acima do espaço de trabalho, com controles de zoom à sua direita.

Detalhes do projeto

Mostra informações sobre o projeto e a tela atuais.

• Navegação estrutural — Nome do projeto › Nome da tela. Os dois rótulos são truncados se forem longos.
• Distintivo da plataforma — mostra a plataforma ativa (por exemplo, tft-espi). Exibição somente leitura; a plataforma é escolhida quando o projeto é criado e não pode ser alterada depois.
• Distintivo do tamanho do display — mostra a resolução configurada do display (por exemplo, 128×64).
• Configurações (ícone de engrenagem) — abre a janela de Configurações do projeto.
• Projeto público — um rótulo verde exibido quando o projeto fica visível para todos os usuários na Galeria.

A zona de detalhes do projeto só é exibida quando você está conectado ou visualizando no modo somente leitura.

Barra de ferramentas

A barra de ferramentas acima do espaço de trabalho contém o botão Selecionar e as ferramentas de desenho da plataforma ativa.

Selecionar (nenhuma ferramenta ativa)

Clique no ícone do cursor ou pressione Escape para voltar ao modo de seleção. No modo de seleção, o cursor é o ponteiro padrão; clicar em uma camada na tela de desenho a seleciona. Clicar em um espaço vazio desmarca todas as camadas.

Ferramentas de desenho

As ferramentas não compatíveis com a plataforma ativa ficam ocultas. As seguintes ferramentas existem na base de código:

Ferramenta	Como usar
Imagem	Abre o assistente de imagens: envie uma imagem, GIF ou vídeo; escolha entre pacotes de ícones integrados; cole um array de bytes bruto; ou adicione uma animação em plataformas compatíveis
Pintar	Desenho à mão livre em nível de pixel em uma camada de bitmap; o clique direito apaga; segure Shift para desenhar linhas retas
Texto	Clicar ativa a ferramenta; uma camada de texto é posicionada no centro da tela automaticamente, selecionada, e o campo de texto do inspetor recebe o foco
Retângulo	Clique e arraste para definir cantos opostos
Círculo	Clique e arraste a partir do centro; o raio acompanha o arraste
Elipse	Clique e arraste para definir a caixa delimitadora
Linha	Clique e arraste do ponto inicial ao ponto final
Triângulo	Vários cliques em três pontos: clique em cada vértice, clique duas vezes ou Escape para concluir
Polígono	Vários cliques: posicione quantos vértices quiser, clique duas vezes ou Escape para concluir; clique duas vezes em um polígono existente para editar os vértices
Arco	Somente TFT_eSPI; adiciona um arco centralizado com raio, ângulos, largura, cores e suavização de bordas editáveis

Somente LVGL

Ferramenta	Como usar
Área de texto	O mesmo que Texto, mas produz uma camada de texto de várias linhas
Painel	Desenha um widget de contêiner de painel
Botão	Desenha um widget de botão
Caixa de seleção	Desenha um widget de caixa de seleção
Interruptor	Desenha um widget de interruptor
Controle deslizante	Desenha um widget de controle deslizante
Arco LVGL	Adiciona um widget de arco LVGL com valor e trilha

Ferramentas de arco

A TFT_eSPI e a LVGL usam ferramentas de arco separadas porque seus modelos de desenho são diferentes. O Arco na TFT_eSPI é uma primitiva de desenho controlada por raio, ângulos inicial e final, largura, cor de primeiro plano, cor de fundo e um alternador Suave. Ângulos inicial e final iguais produzem um círculo completo.

O Arco LVGL cria um widget com largura, altura, rotação, ângulos inicial e final, valor, cor do indicador e cor da trilha. O valor é limitado a 0–100. Cada ferramenta de arco é exibida apenas em sua plataforma compatível.

Assistente de importação de imagens

Consulte o guia completo Importando imagens para todos os modos de importação, controles do editor e fluxos passo a passo.

Dica: você também pode arrastar um arquivo PNG ou BMP diretamente para a tela de desenho para pular o assistente por completo — a imagem é importada com as configurações padrão.

Controles do pincel de pintura

Quando a ferramenta Pintar está ativa, controles extras aparecem na barra de ferramentas:

• Menu suspenso de padrão — escolha Quadrado, Xadrez, Linhas horizontais, Linhas verticais ou Círculo. A pré-visualização é atualizada antes de você desenhar, e os padrões se alinham à grade da tela entre traços separados.
• Alternador do modo borracha — faz a pintura normal apagar pixels. O clique direito também apaga, e os dois caminhos de borracha usam o padrão de pincel selecionado.
• Alternador do modo de cor — alterne entre os modos de pincel Monocromático (1 bit) e RGB.
• Seletor de cor do pincel — visível no modo RGB; define a cor atual da pintura.
• Recortar — aparece para camadas de pintura grandes o suficiente para recortar. O modo de recorte mostra alças laranja e escurece a área fora do recorte; arraste a região ou as alças e então aplique ou cancele. Escape sai do modo de recorte antes de sair da ferramenta Pintar, e os recortes aplicados podem ser desfeitos.

Escala

Um controle de escala à direita do espaço de trabalho ajusta o zoom da tela de desenho. O mesmo zoom pode ser alterado com Ctrl + / Ctrl - ou rolando a roda do mouse enquanto segura Ctrl/Cmd.

Ações

Ações em nível de projeto, visíveis quando conectado ou visualizando no modo somente leitura.

• Estrela — favorita o projeto. O botão mostra a quantidade atual de estrelas.
• Copiar — cria uma cópia do projeto na sua própria conta e a abre imediatamente. Exige acesso.
• Compartilhar — menu suspenso com as seguintes opções:
  • Copiar o link público — copia um URL direto da galeria para a área de transferência. Desativado se o projeto ou a tela atual for privado.
  • Apresentação — abre uma apresentação em tela cheia de todas as telas do projeto.
  • Salvar como — Arquivo de texto exporta a aba de código aberta, incluindo o código personalizado. Imagem PNG e Imagem BMP exportam a tela selecionada, ou a tela da aba de código se nenhuma tela estiver selecionada.

Tela de desenho

O espaço de trabalho mostra as telas do projeto juntas na escala selecionada. Cada tela pré-visualiza a arte para o display de destino.

Grade

Clique em Grade à direita do espaço de trabalho para alternar entre uma grade de 1 pixel, uma grade de 10 pixels e nenhuma grade. A grade padrão de 1 pixel aparece com zoom de 300% ou mais; a grade de 10 pixels aparece com 30% ou mais. A grade é apenas visual e não tem comportamento de encaixe.

Interações com o mouse

Interação	Efeito
Clicar em uma área vazia	Desmarcar todas as camadas
Clicar em uma camada	Selecionar essa camada
Shift + clique	Adicionar ou remover uma camada da seleção
Clicar e arrastar em área vazia	Desenhar um retângulo de seleção com elástico
Clicar e arrastar camada selecionada	Mover a camada
Clicar e arrastar alça de redimensionamento	Redimensionar a camada selecionada
Segurar Shift ao redimensionar	Restringir à proporção original
Segurar Alt ao redimensionar	Redimensionar a partir do centro
Clicar em uma camada agrupada	Seleciona todas as camadas do grupo
Clicar duas vezes em camada agrupada	Seleciona somente essa camada individual
Shift + clique em camada agrupada	Adiciona todos os membros do grupo à seleção
Clique duplo em Polígono / Triângulo	Entrar no modo de edição de vértices
Clique direito (ferramenta Pintar)	Apagar pixels
Ctrl/Cmd + roda do mouse	Aumentar / reduzir o zoom, centrado no cursor
Roda do mouse (sem modificador)	Deslocar a tela de desenho
Arrastar com o botão do meio	Deslocar a tela de desenho

Soltar imagens

Você pode arrastar um arquivo PNG ou BMP diretamente para a tela de desenho. A imagem é importada imediatamente usando as configurações padrão e posicionada como uma camada de bitmap (Pintura).

Lista de telas

As telas aparecem como entradas expansíveis na árvore de Camadas à esquerda, com suas camadas e grupos aninhados abaixo.

Adicionar telas

Clique em Adicionar tela no cabeçalho de Camadas para adicionar uma nova tela. O nome é gerado automaticamente como Screen N com o próximo número disponível.

Navegar entre telas

Clique em uma linha de tela na árvore de Camadas para selecionar e focar essa tela. Use sua seta de expansão para mostrar ou ocultar suas camadas.

Reordenar telas

Arraste uma linha de tela para uma nova posição. A ordem é salva imediatamente.

Renomear uma tela

Clique duas vezes no título acima de uma tela no espaço de trabalho para editá-lo em linha.

Menu contextual (clique direito)

Clique com o botão direito no título acima de uma tela para abrir seu menu contextual:

Ação	Descrição
Duplicar	Cria uma cópia da tela e a anexa à lista.
Publicar	Torna uma tela privada visível na Galeria.
Tornar privado	Oculta a tela da Galeria.
Excluir	Remove a tela. Exige um segundo clique para confirmar.

Lista de camadas

A árvore de Camadas lista as telas, camadas e grupos do projeto. Expanda uma tela para ver suas camadas em ordem de renderização (topo da lista = topo da pilha = desenhado por último).

Ações da lista de camadas

Ação	Como
Selecionar uma camada	Clique em sua linha
Selecionar um intervalo	Clique em uma camada e então Shift + clique em outra
Alternar a seleção	Ctrl/Cmd + clique em uma camada
Selecionar tudo	Ctrl A
Reordenar	Arraste e solte uma linha em uma nova posição
Reordenar com o teclado	Selecione uma camada e então Ctrl ↑ / Ctrl ↓
Mostrar / ocultar	Clique no ícone de olho ao passar o cursor
Travar / destravar	Clique no ícone de cadeado ao passar o cursor
Excluir	Selecione e então Delete ou o botão Excluir no Inspetor

Grupos

As camadas podem ser agrupadas. Um grupo aparece como uma entrada recolhível na lista de camadas. Clique no cabeçalho do grupo para selecionar todas as camadas membros de uma vez. Ctrl/Cmd + clique no cabeçalho de um grupo alterna todos os membros desse grupo na seleção atual. Clique na seta de expansão para mostrar ou ocultar as camadas membros dentro da linha do grupo; a seleção por intervalo ainda inclui camadas dentro de grupos recolhidos.

Ação	Atalho
Agrupar camadas selecionadas	Ctrl G
Desagrupar	Ctrl Shift G
Renomear grupo	Clique duplo no nome do grupo no Inspetor

Você pode arrastar camadas individuais para dentro e para fora de grupos soltando-as dentro ou fora do contêiner do grupo na lista.

Inspetor

O painel do inspetor fica no lado direito. Seu conteúdo muda dependendo do estado da seleção. Use Ocultar o inspetor ou Mostrar o inspetor à direita do espaço de trabalho para alterná-lo; a escolha é lembrada neste navegador.

Resumo de atalhos

Quando nada está selecionado, o inspetor mostra uma referência de atalhos de teclado. Esse é um lembrete rápido; a lista completa está na referência de Atalhos de teclado.

Uma camada selecionada

O inspetor mostra:

• Ícone + nome da camada — passe o cursor para revelar o ícone de edição e então clique nele para renomear em linha.
• Botões de alinhamento — seis botões que posicionam a camada em relação às bordas e ao centro do display:

Botão	Uma camada	Várias camadas
Alinhar à esquerda	Mover para a borda esquerda do display	Alinhar todas as bordas esquerdas à camada mais à esquerda
Alinhar os centros horizontais	Centralizar horizontalmente no display	Alinhar todos os centros horizontais ao centro compartilhado
Alinhar à direita	Mover para a borda direita do display	Alinhar todas as bordas direitas à camada mais à direita
Alinhar ao topo	Mover para a borda superior do display	Alinhar todas as bordas superiores à camada mais alta
Alinhar os centros verticais	Centralizar verticalmente no display	Alinhar todos os centros verticais ao centro compartilhado
Alinhar à base	Mover para a borda inferior do display	Alinhar todas as bordas inferiores à camada mais baixa

Com várias camadas selecionadas, o alinhamento é relativo à caixa delimitadora de todas as camadas selecionadas, não ao display. Cada camada se move para corresponder à borda ou ao centro correspondente desses limites combinados.

• Campos de propriedades — todas as propriedades editáveis do tipo de camada selecionada. Campos comuns:

Campo	Tipo	Camadas
X, Y	Número	Todas as camadas posicionáveis
W, H	Número	Todas as camadas com tamanho
X1, Y1, X2, Y2	Número	Linha
Raio / RX / RY	Número	Círculo, Elipse
Raio / Início / Fim / Largura	Número	Arco
Rotação / Início / Fim / Valor	Número	Arco LVGL
Preenchimento	Booleano	Retângulo, Círculo, Elipse, Triângulo
Invertido (XOR)	Booleano	A maioria das camadas de formas
Cor / Preenchimento / Fundo / Borda	Cor	Dependente da plataforma; o fundo do texto fica oculto ou é ignorado em plataformas sem suporte
Fonte	Seletor de fonte	Texto, Área de texto, Botão, Caixa de seleção
Texto	Texto	Texto, Área de texto, Botão, Caixa de seleção
Marcado	Booleano	Caixa de seleção
Sobreposição	Booleano	Escurece a camada e a pula na geração de código
Transparência	Booleano	Imagens RGB com pixels transparentes; os mantém translúcidos em vez do fundo da tela

Para camadas de texto em U8g2, Flipper, CircuitPython e LVGL, o inspetor também mostra botões de rotação para 0°, 90°, 180° e 270°. A rotação é no sentido horário, mantém o centro dos limites da camada fixo e é preservada em projetos salvos e no código gerado. Os botões ficam ocultos em plataformas sem suporte nativo à rotação de texto.

• Alternador de variável (pequeno interruptor ao lado de campos numéricos e de cor) — marca uma propriedade como variável em vez de um literal no código gerado.
• Ações — botões de operações de imagem disponíveis em camadas de bitmap (Pintura):
  • Espelhar horizontalmente — espelha o bitmap ao longo do eixo vertical.
  • Espelhar verticalmente — espelha o bitmap ao longo do eixo horizontal.
  • Girar no sentido horário — gira o bitmap 90° para a direita.
  • Inverter as cores — inverte cada pixel do bitmap.
• Mesclar em bitmap — renderiza todas as camadas selecionadas em uma única camada de bitmap (Pintura). As camadas de origem são removidas e substituídas por uma imagem plana do tamanho do display inteiro. Camadas XOR/invertidas são compostas corretamente durante a mesclagem.
• Excluir — remove a(s) camada(s) selecionada(s).

Várias camadas selecionadas

O inspetor mostra a quantidade de camadas selecionadas, botões de alinhamento (para distribuir em relação umas às outras), o botão Mesclar em bitmap e o botão Excluir.

Se todas as camadas selecionadas pertencerem ao mesmo grupo, o nome do grupo é exibido e pode ser renomeado em linha.

Código

O painel de código fica na parte inferior do editor. Para projetos com várias telas, selecione a aba de uma tela para ver seu código-fonte gerado em tempo real.

O painel usa destaque de sintaxe para a linguagem da plataforma ativa (C, C++, YAML etc.).

• Botão Copiar — copia o código gerado completo para a área de transferência, incluindo qualquer prefixo e sufixo personalizados que você tenha escrito (consulte abaixo).
• Botão Importar — importa um arquivo de origem para a tela da aba de código aberta em plataformas compatíveis. Funciona melhor com código que o próprio Lopaka gerou.

Modelo de código editável

O painel de código é dividido em três zonas separadas por comentários marcadores:

// [BEGIN lopaka generated]
  … generated draw calls …
// [END lopaka generated]

A zona de prefixo (acima do marcador BEGIN) e a zona de sufixo (abaixo do marcador END) são totalmente editáveis. Digite ali qualquer código de que você precise — diretivas #include, declarações de variáveis, uma função setup() ou qualquer outra coisa que seu sketch exija. A seção gerada no meio é somente leitura e é atualizada automaticamente conforme você edita as camadas.

Seu prefixo e sufixo são salvos localmente no seu navegador por tela e restaurados ao recarregar a página. Alternar as abas de código carrega o modelo que pertence a cada tela.

Configurações de código

O painel de configurações de código fica à direita do painel de código. Ele controla como o código-fonte é gerado.

Alternadores de saída

Os alternadores disponíveis dependem da plataforma. Os comuns são:

Configuração	Efeito
Função wrapper	Envolve todas as chamadas de desenho em uma função nomeada
Comentários	Emite um comentário // nome da camada antes de cada chamada de desenho
Incluir fontes	Emite #include ou declarações de fontes
Declarar imagens	Emite declarações de arrays de bitmap
Declarar variáveis	Extrai propriedades mutáveis das camadas para variáveis C tipadas
Limpar/preencher o display	Coloca uma chamada para limpar a tela no topo da função
Declarar como PROGMEM	Somente U8g2 — coloca arrays de bitmap na memória flash

Seletor de sintaxe

Em plataformas com mais de um modelo de código, um menu suspenso Sintaxe aparece acima dos alternadores:

Plataforma	Opções
U8g2	Arduino (Cpp), ESP-IDF (C)
AdafruitGFX Color, AdafruitGFX Mono, ArduinoGFX, TFT_eSPI	Arduino (C++), ESP-IDF (C++)

A opção Arduino é o padrão. As opções ESP-IDF emitem código que você pode colocar em um componente ESP-IDF: os arrays são declarados sem PROGMEM, e nenhum setup() / loop() (ou app_main()) é gerado, então você chama as funções de desenho geradas a partir da sua própria tarefa. Outras plataformas têm um único modelo e não exibem menu suspenso.

Downloads de fontes e imagens

Quando fontes ou imagens bitmap são referenciadas por camadas, links de download aparecem na parte inferior do painel de configurações de código. Clique em um link de fonte para baixar o arquivo .h ou .bdf. Clique em um link de imagem para baixar o bitmap como um arquivo .bmp ou .h, dependendo da plataforma.

Salvamento automático

O editor salva seu trabalho automaticamente enquanto você desenha. As alterações são persistidas na nuvem a cada segundo após a última edição. Não há um botão de salvamento manual; fechar a aba ou sair da página é seguro depois que a tela de desenho para de mudar.

Modo somente leitura / galeria

Ao abrir um projeto que não é seu (galeria ou link compartilhado), o editor é renderizado no modo somente leitura. As ferramentas ficam ocultas, o inspetor é somente visualização e o código pode ser copiado, mas não importado. A lista de camadas ainda é navegável.