PixelOLED Studio Web

Editor de bitmaps e animações pixel a pixel para displays OLED monocromáticos (SSD1306). 100% HTML5 + CSS + JavaScript puro — sem build, sem dependências, sem backend. Abra o index.html e pronto.

Gera código pronto para ESP32 (e Arduino em geral) usando Adafruit_GFX + Adafruit_SSD1306.

Inspirado no conceito do PixelOLED Studio (app desktop em Python/Tkinter), reimplementado do zero como app web com edição, conversão de imagens e exportação totalmente funcionais.

Interface em Português, English ou Español (seletor no topo, ao lado de "Novo" — detecta o idioma do navegador automaticamente) e tema claro/escuro (segue o sistema por padrão).

Editor vetorial

Lápis, borracha, linha, retângulo, círculo, triângulo, texto e mídia (imagem/vídeo/GIF) criam elementos editáveis — não pixels fixos. Tudo continua ajustável depois de desenhado: mover, girar, redimensionar, mudar preenchimento/raio de borda.

Duas ferramentas de seleção, lado a lado no topo da barra:

Ferramenta	Uso
Cursor	Clique e edite direto: mover + girar. Rápido, sem risco de distorcer.
Transformar	Clique seleciona a layer inteira; duplo clique isola o elemento com todas as alças (mover, girar, redimensionar — Shift trava proporção).

Texto com fontes pixelizadas

Nove fontes pixel escolhidas a dedo (Press Start 2P, Doto, DotGothic16, Handjet, Pixelify Sans, Jersey 10, Tiny5, Bytesized, Micro 5) — mini caixas com preview "Aa" já renderizado na própria fonte, clique para trocar (inclusive enquanto edita um texto já existente). A última fonte usada fica salva como padrão para o próximo texto.

Layers

Painel flutuante (arraste ou minimize) com a lista de layers. Cada uma tem ícone de olho (mostrar/ocultar) e cadeado (travar edição), e nome editável.

Animação por quadros

Barra inferior (minimizável) com miniaturas dos quadros: quantidade ilimitada, duração individual em ms (presets de 33 a 1000ms + "aplicar a todos"), reordenar/duplicar/excluir. Ghost mostra o quadro anterior semitransparente como guia. Dar play roda a animação (ou só o quadro atual) numa telinha de preview flutuante, independente da edição.

Conversão de imagem, vídeo e GIF

Importe pelo ícone de mídia na barra lateral — a imagem entra como elemento editável (mover/redimensionar/girar) e o dither pode ser reajustado a qualquer momento. Opções: ajuste (conter/cobrir/esticar), estilo de dither (Floyd–Steinberg, Ordenado/Bayer 4×4 ou limiar simples), tamanho do pixel do dither, inversão, brilho e contraste.

• GIFs animados (Chrome/Edge): todos os quadros são decodificados e convertidos de uma vez, com as mesmas configurações de dither.
• Vídeo: escolha o FPS de extração (não precisa ser o do vídeo original — menos quadros, animação mais leve) e, opcionalmente, recorte o trecho a usar (início/fim em segundos, sem gerar nenhum arquivo novo). Uma estimativa de quantos quadros isso vai gerar aparece antes mesmo de extrair.
• Prévia animada: depois de decodificar/extrair vários quadros, um botão de play mostra como a animação (já com dither) vai ficar, no FPS escolhido, antes de aplicar.

Exportação para ESP32/Arduino

• .ino completo (Wire + Adafruit_GFX + Adafruit_SSD1306, setup()/loop() prontos, estático ou animado)
• .h só com os arrays de bitmap (PROGMEM)
• .xbm e .png (quadro atual ou spritesheet)
• .gif animado — fundo na cor do app ou transparente
• .json do projeto, para continuar editando depois
• Importação de bytes (array C 0x..) já usado em outro projeto
• Empacotamento horizontal (Adafruit_GFX, padrão) ou vertical (páginas SSD1306 / U8g2)

Tudo roda no navegador — nada é enviado a servidor algum.

Como usar

1. Abra index.html direto no navegador, ou
2. Sirva com um servidor estático:

   python3 -m http.server 8080

Fluxo básico

1. Tela → escolha a resolução (128×64, 128×32 ou customizada) — normalmente só uma vez.
2. Desenhe com as ferramentas da barra lateral, ou importe uma imagem/vídeo/GIF pelo ícone de mídia.
3. Cursor para mover/girar rápido, Transformar para controle fino.
4. Organize em Layers.
5. Para animações, use a barra Quadros e dê play para conferir.
6. Exportar código… → escolha o formato, ajuste endereço I²C / pinos, baixe.
7. Abra na Arduino IDE, instale Adafruit GFX + Adafruit SSD1306, compile.

Ligação do display (ESP32 + SSD1306 I²C)

Display	ESP32 (padrão)
VCC	3V3
GND	GND
SDA	GPIO 21
SCL	GPIO 22

Endereço I²C mais comum: 0x3C (alguns módulos usam 0x3D). Pinos e endereço são configuráveis na tela de exportação.

Formato dos bitmaps

• Horizontal (Adafruit_GFX): cada linha ocupa ceil(largura/8) bytes; MSB = pixel mais à esquerda. Formato de display.drawBitmap(x, y, bitmap, w, h, cor).
• Vertical (páginas SSD1306): tela dividida em páginas de 8 linhas; cada byte é uma coluna de 8 pixels, LSB no topo. Para quem escreve direto no buffer (ex. U8g2 full buffer).

Compatibilidade

Layout desktop, mas funciona bem no iPad: desenho via Pointer Events (Apple Pencil + rejeição de palma nativa do Safari), zoom por pinça de dois dedos no canvas. No PC/trackpad, Ctrl+scroll faz o mesmo. Importação de todos os quadros de um GIF (e de vídeo) depende da API ImageDecoder/decodificação via <video> (Chrome/Edge); em outros navegadores só o primeiro quadro do GIF é importado.

Estrutura do projeto

├── index.html   # estrutura da interface
├── style.css    # tema visual pixel-art (claro/escuro), fonte Doto
├── app.js       # toda a lógica: desenho, animação, conversão de mídia, tradução e exportação
├── LICENSE      # MIT
└── README.md

Tecnologia

HTML5, CSS3 e JavaScript (ES6+) nativos — sem frameworks, sem build, sem dependências externas além das fontes do Google Fonts usadas no visual pixel-art. <canvas> para edição/renderização, FileReader/Blob/URL.createObjectURL para importar/exportar localmente, encoder GIF89a próprio para a exportação animada.

Licença

MIT — livre para usar, copiar, modificar e distribuir, inclusive em projetos comerciais, desde que o aviso de copyright original seja mantido. Sem garantias.