Importando imagens

O Lopaka permite trazer imagens, GIFs e vídeos para o design da sua tela embarcada e os converte para o formato que sua plataforma precisa — seja um bitmap XBMP de 1 bit para um OLED monocromático ou um array RGB565 para um TFT colorido.

Há duas maneiras de iniciar uma importação:

• Clique na ferramenta Imagem na barra de ferramentas para abrir o Assistente de importação.
• Arraste um arquivo PNG ou BMP diretamente para a tela de desenho para pular o assistente e importar com as configurações padrão.

O Assistente de importação

O assistente abre como uma janela modal. Pressione Escape ou clique fora dele para cancelar a qualquer momento.

Etapa 1 — Escolha uma origem

Escolha um modo de importação. A disponibilidade depende da plataforma ativa.

Pacotes de ícones

Navegue pela biblioteca integrada de ícones monocromáticos agrupados por conjunto (setas, símbolos de interface, clima etc.). Uma seção Projeto atual no topo mostra imagens que você já importou nesta sessão — clique em qualquer uma delas para reutilizar sem enviar de novo.

Use a busca para filtrar pacotes de ícones e imagens do projeto atual por nome do ícone.

Clique em um ícone para posicioná-lo na tela de desenho imediatamente. O assistente fecha e a camada é adicionada.

Quando usar: você precisa de um ícone de interface padrão — bateria, Wi-Fi, setas, marcas de seleção — e não quer preparar um arquivo de imagem.

Enviar arquivo

Arraste um ou mais arquivos para a zona de soltura ou clique em Procurar arquivos para escolhê-los no seu sistema de arquivos. Os formatos aceitos incluem imagens raster, GIF, vídeo MP4/MOV com H.264 e vídeo WebM com VP8, VP9 ou AV1.

• Vários arquivos — todos os arquivos entram na fila. Você pode pré-visualizar cada um, mas as configurações se aplicam a todas as imagens de uma vez.
• Arquivos GIF — cada quadro é extraído como uma imagem separada automaticamente.
• Arquivos de vídeo — carregue um vídeo por vez. A importação de vídeo está disponível em plataformas que oferecem suporte a animações.

Quando usar: você tem um logotipo, ícone ou foto personalizados que quer exibir na tela.

Inserir array de bytes

Cole um array de bytes XBMP bruto diretamente — do tipo geralmente produzido por ferramentas de conversão de imagens ou encontrado em firmware existente. Insira a Largura e a Altura do bitmap, ative Trocar os bytes se a ordem dos bytes não corresponder à pré-visualização e observe a pré-visualização ao vivo ser atualizada enquanto você digita. Exemplo de entrada:

0xFF, 0x81, 0x81, 0x81, 0xFF

Quando usar: você está migrando de um código de firmware existente que já tem arrays de bitmap ou recebeu um bitmap de uma ferramenta que exporta dados de bytes brutos.

Animação

Use para adicionar uma animação de quadros integrada em vez de converter um arquivo de imagem. Consulte Animações para o fluxo completo e o comportamento do código gerado.

Etapa 2 — Ajuste no editor de imagens

Depois de enviar os arquivos, o assistente avança para o editor de imagens. O editor tem aparência e comportamento diferentes dependendo de você ter enviado um arquivo ou vários.

Uma única imagem

Quando você envia exatamente um arquivo, o editor completo é exibido:

• Nome é editável — defina agora o nome da variável C (por exemplo, wifi_icon → const uint8_t wifi_icon[]).
• Os controles de Dimensões são exibidos — redimensione e a área de recorte é atualizada de acordo.
• A Área de recorte está ativa — arraste o retângulo azul para selecionar apenas parte da imagem.

Tudo o que você definir é aplicado a essa imagem quando você clica em Importar.

Várias imagens

Quando você envia mais de um arquivo — ou envia um GIF — o editor muda para o modo de várias imagens:

• Uma faixa de miniaturas aparece à esquerda. Clique em qualquer miniatura para pré-visualizá-la no editor.
• Cada miniatura tem uma caixa de seleção. Todas as imagens começam marcadas. Desmarque qualquer uma para excluí-la da importação.
• Selecionar tudo — aparece no cabeçalho da faixa quando pelo menos uma imagem está desmarcada. Clique para restaurar a seleção completa.
• Nome não é editável — ele é derivado do nome do arquivo automaticamente. Renomeie as camadas no inspetor depois de importar, se necessário.
• Dimensões e recorte não são exibidos. Cada imagem é ajustada automaticamente ao tamanho do display no momento da importação, de forma independente.
• Todas as outras configurações — reamostragem, brilho, contraste, pontilhamento, inverter — se aplicam a cada imagem selecionada quando você clica em Importar.

Arquivos GIF

Um GIF é tratado como várias imagens. Cada quadro é extraído automaticamente e aparece como uma entrada separada na faixa de miniaturas, nomeado basename_frame_1, basename_frame_2 e assim por diante. Um GIF de um único quadro mantém apenas o nome base.

Isso significa que você pode importar um ícone animado como uma sequência de camadas de bitmap — uma por quadro — pronto para percorrer no seu firmware.

Arquivos de vídeo

Um vídeo mostra até 10 quadros de pré-visualização distribuídos ao longo de sua linha do tempo. Use essas pré-visualizações para ajustar as mesmas configurações de redimensionamento, recorte, brilho, contraste, inverter, reamostragem e pontilhamento usadas para imagens. As pré-visualizações apenas alternam a visualização do editor; elas não são selecionáveis individualmente.

Defina os Quadros por segundo de saída de 1 a 60 e revise a duração resultante, a quantidade de quadros, as dimensões processadas e o tamanho monocromático estimado. As importações de vídeo são limitadas a 1.000 quadros de saída e 5 MiB. Reduza o FPS ou as dimensões dos quadros quando qualquer um dos limites for ultrapassado.

Clique em Importar para processar os quadros configurados e abri-los como uma única animação no Editor de animações. O vídeo é decodificado na ordem da linha do tempo e não cria um recurso de imagem separado nem uma camada da tela de desenho para cada quadro.

Zoom

Arraste o controle deslizante de zoom para ampliar a pré-visualização (0,5× a 10×). Clique duas vezes no controle para redefinir para 1×. Isso não afeta a imagem exportada — é apenas um auxílio de pré-visualização.

Modo de cor

Visível em plataformas que oferecem suporte a monocromático e colorido (por exemplo, TFT_eSPI). Alterne entre:

• Monocromático — XBMP de 1 bit, muito compacto. Cada pixel está aceso ou apagado. A imagem passa por pontilhamento ou limiar para preto e branco.
• RGB — RGB565, 2 bytes por pixel. Preserva a cor. Use para displays coloridos.

Plataformas que oferecem suporte a apenas um modo travam o alternador automaticamente.

Dimensões

Defina a largura e a altura de destino. Editar um valor dimensiona o outro proporcionalmente.

• Redefinir — restaura as dimensões originais da imagem.
• Ajustar à tela — dimensiona a imagem para caber no tamanho atual do display, preservando a proporção.

Área de recorte

Um retângulo de seleção azul se sobrepõe à pré-visualização. Somente a área dentro dele é importada.

• Arraste o centro do retângulo para reposicioná-lo.
• Arraste qualquer canto para redimensioná-lo.
• Edite os campos X / Y / W / H diretamente para um controle preciso.

Quando usar o recorte: você tem uma imagem grande e precisa apenas de uma região específica — por exemplo, um ícone da barra de status dentro de uma captura de tela inteira ou um único glifo de uma folha de sprites.

Tamanho em bytes

A leitura Tamanho em bytes abaixo da pré-visualização é atualizada ao vivo para mostrar quanta RAM o bitmap recortado usará:

• Monocromático: 1 bit por pixel, empacotado em bytes.
• RGB: 2 bytes por pixel (RGB565).

Reamostragem

Controla o algoritmo usado quando a imagem é reduzida às dimensões de destino:

Modo	Quando usar
Alta qualidade	Melhor padrão, especialmente ao reduzir fotos ou arte detalhada
Bilinear	Redimensionamento suave e mais rápido para imagens em geral
Mais próximo	Arte em pixels e ícones em que as bordas duras devem ficar nítidas

Alta qualidade é selecionado por padrão.

Brilho e contraste

Desloque o brilho de −100 % a +100 % e o contraste de −100 % a +100 %. Clique duas vezes em qualquer controle para redefinir para 0.

Quando usar: uma fotografia parece desbotada depois da conversão para monocromático — aumente o contraste para deixar os pixels escuros mais escuros e os claros mais claros. Se um logotipo tiver um fundo claro que vaza para o bitmap, aumente o contraste ou diminua o brilho para empurrá-lo para o branco.

Escala de cinza primeiro

Converte a imagem para escala de cinza antes do limiar ou do pontilhamento. Ative isso quando sua imagem de origem for colorida e a conversão automática estiver produzindo um resultado inesperado — por exemplo, um logotipo vermelho sobre fundo branco em que o vermelho e o branco acabam com brilho percebido semelhante.

Pontilhamento (somente monocromático)

Escolha como os tons são convertidos para preto e branco:

Modo	Quando usar
Floyd-Steinberg	Fotos detalhadas e gradientes suaves
Atkinson	Um pontilhamento mais leve e de alto contraste, bom para displays pequenos
Bayer 8x8	Um padrão regular de pixels com textura previsível
Sem pontilhamento	Arte de linhas limpa, logotipos e preenchimentos sólidos

Ajuste o brilho e o contraste para controlar quais pixels caem de cada lado da conversão para preto e branco.

Inverter a paleta (somente monocromático)

Troca preto e branco antes da etapa de pontilhamento. Use quando sua imagem de origem tiver um símbolo branco sobre fundo preto, mas o display a renderizar invertida, ou quando o limiar automático estiver tratando a cor errada como primeiro plano.

Inverter o resultado

Inverte o bitmap final depois de todo o processamento. Use quando a imagem parecer correta na pré-visualização, mas for renderizada invertida no display físico — por exemplo, em displays em que a cor de fundo é branca, mas o padrão é preto.

Depois de importar

Cada imagem importada vira uma camada de pintura (bitmap) na tela de desenho. O nome da camada corresponde ao nome da variável usada no código gerado. As animações viram camadas de animação.

Você pode continuar editando o bitmap com a ferramenta Pintar — desenhe ou apague pixels individuais diretamente.