Tag: VGA

Categorias
Atualizações

Milton #9

Primeira integração: teclado PS/2, conexão bluetooth, sinal VGA e rede wi-fi

Tudo junto pela primeira vez: NodeMCU (sinal VGA e wi-fi), Arduino Nano (teclado PS/2 e bluetooth). Ignorando o ruído gerado pelas protoboards, temos algo que começa a lembrar um computador pessoal e que estaria abaixo dos R$ 30 de custo com peças aliexpressificadas.

Funciona e parece fazer sentido. A foto acima não mostra, mas há espaço para a saída TVOut no esquema com a adição de mais duas conexões. Ainda estou testando programas armazenados na memória do Arduino, sem RTOS ou outra camada de abstração que permita outros usos. Também está ausente do esquema o visor LCD de 1.3 polegadas que estará embutido na carcaça do dispositivo para realizar as configurações iniciais e exibir o estado (rede, bateria etc).

Teste de teclado no aplicativo, via bluetooth

E se o usuário não tiver teclado PS/2 disponível? Comecei a explorar aplicativos para Android que poderiam interagir com Milton via bluetooth (módulos HC-06 e HM-10). O app terá opções de operar como teclado, mouse e joystick (afinal, computador sem jogos é não é computador).

Esboço inicial do aplicativo no AppInventor

Para facilitar, criei o esboço do aplicativo no AppInventor (versão offline) e pretendo mantê-lo assim. Os estudantes poderão modificar os blocos do aplicativo acordo com seus interesses.

Categorias
Atualizações

Milton #6

Como nos jogos 8bit e demais programas gráficos oldskool, pensei em aproveitar as imagens desenhadas em milton:p como padrões (tiles) que podem ser combinados em telas mais complexas. Este tipo de estratégia foi utilizada, dentre outras razões, para economizar memória de armazenamento e processamento em computadores e consoles antigos. Com 5 ou 6 padrões modulares (16×16, 32×32 etc.) é possível produzir telas interessantes.

Blue Falcon
Blue Falcon: editor de telas do jogo Contra (Nintendo NES)

O editor milton:u importa imagens desenhadas em milton:p como padrões e permite construir telas. Desenvolvi o segundo editor sobre o primeiro, com duas diferenças:

  1. As cores foram substituídas por “carimbos” das imagens importadas (16×16 pixels);
  2. Os arquivos exportados são compostos das informações sobre a disposição dos padrões e de seus dados. Dessa forma, a importação de uma tela via cabeçalho (.h) ou arquivo texto oferecerá todas as informações necessárias para a exibição da imagem. 
Tela de milton:u com imagens importadas de milton:p

O formato de arquivo é tão simples quanto o que utilizei em milton:p. A identificação MILTONUI seguida do título e quantidade de imagens utilizadas na tela. Em seguida, os índices indicam o número do padrão que deve ser exibido em cada bloco da tela. As informações seguintes referem-se às imagens dos índices.

MILTONUI uiteste 2
2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2
2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2
2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2
2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2
2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2
2,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,2
2,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,2
2,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,2
2,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,2
2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2
2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2
2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2
2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2
2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2
2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2
MILTONPIX 16 16 pincel 0
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
0,15,15,15,15,15,15,15,15,15,15,15,15,15,15,0
0,15,15,14,14,14,14,14,14,14,14,14,14,15,15,0
0,15,14,14,14,14,14,14,14,14,12,14,14,14,15,0
0,15,14,14,14,14,14,14,14,12,4,4,14,14,15,0
0,15,14,14,14,14,14,14,12,4,4,4,3,14,15,0
0,15,14,14,14,14,14,12,4,4,4,3,14,14,15,0
0,15,14,14,14,14,12,4,4,4,3,14,14,14,15,0
0,15,14,14,14,12,4,4,4,3,14,14,14,14,15,0
0,15,14,14,6,4,4,4,3,14,14,14,14,14,15,0
0,15,14,6,7,7,4,3,14,14,14,14,14,14,15,0
0,15,14,6,7,7,7,14,14,14,14,14,14,14,15,0
0,15,14,3,3,3,3,3,3,3,3,3,3,3,15,0
0,15,15,14,14,14,14,14,14,14,14,14,14,15,15,0
0,15,15,15,15,15,15,15,15,15,15,15,15,15,15,0
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
MILTONPIX 16 16 borracha 0
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
0,15,15,15,15,15,15,15,15,15,15,15,15,15,15,0
0,15,15,14,14,14,14,14,14,14,14,14,14,15,15,0
0,15,14,14,14,14,14,14,14,4,14,14,14,14,15,0
0,15,14,14,14,14,14,14,4,4,4,14,14,14,15,0
0,15,14,14,14,14,14,4,4,4,4,4,14,14,15,0
0,15,14,14,14,14,4,4,4,4,4,4,3,14,15,0
0,15,14,14,14,1,4,4,4,4,4,3,14,14,15,0
0,15,14,14,6,6,1,4,4,4,3,14,14,14,15,0
0,15,14,6,6,6,6,1,4,3,14,14,14,14,15,0
0,15,14,1,6,6,6,6,1,14,14,14,14,14,15,0
0,15,14,14,1,6,6,1,14,14,14,14,14,14,15,0
0,15,14,14,14,1,1,14,14,14,14,14,14,14,15,0
0,15,15,14,14,14,14,14,14,14,14,14,14,15,15,0
0,15,15,15,15,15,15,15,15,15,15,15,15,15,15,0
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

Outra vantagem do editor de telas é a possibilidade de controlar a quantidade de memória disponível para construir aplicações. Planejei empregar memórias externas EEPROM para armazenar elementos básicos da interface gráfica, deixando os arquivos criados por usuários no cartão microSD. Este caminho permitiria atualizações do “firmware” de Milton sem comprometer os documentos dos usuários.

Servido web do dispositivo (NodeMCU).

As duas ferramentas rodam satisfatoriamente no servidor web do dispositivo, ocupando pouco mais de 600kb.

Categorias
Atualizações

Milton #5

Por volta de 1993 (13-14 anos de idade), descobri a demoscene. Foi um período de muita criatividade em função das inúmeras limitações impostas pelo hardware e software da época. O pouco intercâmbio com outros programadores resultava de mensagens trocadas por meio de BBS, fanzines e outros tipos de documento (basicamente .txts) que acompanhavam os demos.

Se você precisasse de algum programa que não existia na sua máquina ou rede de contatos, as alternativas eram: 1) desenvolva o seu; 2) encontre relatos de alguém que desenvolveu e tente replicar.

A partir do envolvimento com a scene desenvolvi editores de fontes, de imagens, renderizadores 3D, compressores de arquivos e outros tipos de utilidades para colocar demos VGA (320x200x256 cores) no mundo (downloads aqui, experimente por sua conta e risco).

A Face (1998): logotipo desenhado pelo Zeh Fernando, poesia da Yuri Hayashi, música do Flávio Mônaco, códigos e demais gráficos feitos por mim (em C). O conjunto não deveria exceder 100kb, segundo regras da competição.

Durante a graduação em Design e início da carreira docente, continuei explorando essas possibilidades dentro e fora de sala de aula. Em 2004 desenvolvi um editor na web para ensinar desenho tipográfico aos meus alunos do curso de Publicidade da Estácio (artigo).

Editor de fontes xType (2004), encarnação acadêmica de projeto da scene.

As limitações impostas pelo hardware que estou utilizando são semelhantes – capacidade de processamento limitada, baixa resolução, pouca memória e paleta de cores reduzida – de forma que parece fazer sentido construir ferramentas específicas para este conjunto de restrições.

No post anterior comentei que a ESPVGAx2 acompanha ferramentas para conversão de imagens. Utilizei o formato gerado pela biblioteca para prototipar o editor de imagens bitmap que roda no navegador. Uma vez que haverá servidor web dentro do dispositivo, considerei mais fácil começar pela versão HTML do editor e depois programar aquela que utilizará as outras saídas gráficas (TV ou monitor VGA).

Sendo assim, qualquer usuário criador de conteúdo para Milton poderá acessar as aplicações internas do dispositivo via Wi-fi e navegador web por meio de outros dispositivos. Caso tais dispositivos não existam, a opção será utilizar a versão gráfica das aplicações.

Primeira versão do editor (HTML/CSS/JS).

A primeira tentativa tinha sérios problemas de performance em função do uso de divs como base da interação para pintar os pixels. A segunda versão foi implementada em HML5 Canvas para melhorar o desempenho. Também implementei a execução de scripts em Lua (com Lua.vm.js) para facilitar a geração e transformação das imagens – espelhamento, rotação, inversão etc. podem ser programadas.

Versão aprimorada com HTML5 Canvas.

A opção por Lua foi natural: principal linguagem utilizada em scripts de jogos, super simples de usar e aprender. Implementei diversas transformações muito rapidamente, com o interpretador completo tendo pouco mais de 500kb comprimido.

A existência do editor facilita a construção de todas as interfaces e realização de teste na geração dos sinais VGA. No caso da saída gráfica para TV (mono), bastará reconfigurar o editor para trabalhar com 1 bit.

Ícone da ferramenta de desenho recursivamente desenhada nela mesma 🙂

O editor exporta formato texto para edição futura, além do arquivo cabeçalho para inclusão no código fonte (.h) e imagens PNG. A estrutura do arquivo é muito simples: identificador MILTONPIX seguido de dois inteiros para largura e altura, nome da imagem e índice da cor transparente (que não será exibida, útil para sprites). Nas linhas seguintes cada número representa a cor do pixel na coluna atual. A geração e interpretação destes arquivos é trivial.

MILTONPIX 16 16 pincel 0
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
0,15,15,15,15,15,15,15,15,15,15,15,15,15,15,0
0,15,15,14,14,14,14,14,14,14,14,14,14,15,15,0
0,15,14,14,14,14,14,14,14,14,12,14,14,14,15,0
0,15,14,14,14,14,14,14,14,12,4,4,14,14,15,0
0,15,14,14,14,14,14,14,12,4,4,4,3,14,15,0
0,15,14,14,14,14,14,12,4,4,4,3,14,14,15,0
0,15,14,14,14,14,12,4,4,4,3,14,14,14,15,0
0,15,14,14,14,12,4,4,4,3,14,14,14,14,15,0
0,15,14,14,6,4,4,4,3,14,14,14,14,14,15,0
0,15,14,6,7,7,4,3,14,14,14,14,14,14,15,0
0,15,14,6,7,7,7,14,14,14,14,14,14,14,15,0
0,15,14,3,3,3,3,3,3,3,3,3,3,3,15,0
0,15,15,14,14,14,14,14,14,14,14,14,14,15,15,0
0,15,15,15,15,15,15,15,15,15,15,15,15,15,15,0
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

Para facilitar a nomeação das aplicações de Milton, resolvi batizar tudo de milton:x, onde x é a primeira letra relacionada à finalidade do programa. Este foi milton:p. Faltam os editores de interfaces com o usuário (u), editor de fontes (f) e de aplicativos (a).

Categorias
Atualizações

Milton #4

Milton, 1bit
Milton, 1bit

Com pouquíssimo esforço, consegui migrar montagem e programação para a versão 16 cores (4bit) da biblioteca ESPVGAx2.

Milton, 4bit
Milton, 4bit

A despeito do trabalho de conversão das imagens para a paleta fixa, o resultado é animador. Fiz testes com capturas de imagens de jogos de consoles e computadores 8bit, confirmando o potencial da biblioteca.

Cybernoid (ZX Spectrum, 1988)
Cybernoid (ZX Spectrum, 1988)

Trabalhar com 16 cores em tempos de milhões não será simples. A paleta “de fábrica” é bastante limitada e exigirá o mesmo tipo de maestria de desenho pixel a pixel dos jogos e demos dos anos 1980-90.

Exibição do jogo Cybernoid utilizando a biblioteca ESPVGAx2
Exibição do jogo Cybernoid utilizando a biblioteca ESPVGAx2

A biblioteca acompanha ferramentas de conversão de imagens e fontes para cabeçalhos da linguagem C (.h) que podem ser incluídos nos códigos compilados na IDE do Arduino. Para as imagens, foi fornecida a paleta no formato Adobe Color Palette (.acp), que uma vez importado no Adobe Photoshop, converte as imagens em cores indexadas e organizadas de acordo com o espectro da ESPVGAx2.

Paleta de cores sugerida para ESPVGAx2
Paleta de cores sugerida para ESPVGAx2

Eis que surgem dois problemas:

  1. Não uso Adobe Photoshop, sofro com Gimp. A paleta fornecida não pode ser importada.
  2. Não poderei incluir editores de imagens pesados como Gimp ou Photoshop nos dispositivos Milton. Usuários precisarão criar suas próprias imagens de maneira simples e compatível com o dispositivo.
Categorias
Atualizações

Milton #3

A biblioteca ESPVGAx de Sandro Maffiodo é um feito. Com conexões muito simples e alguns resistores é possível gerar sinal VGA em duas cores. A plataforma destino é a Esp8266, que tenho na encarnação NodeMCU, com programação direto na IDE do Arduino.

Conexões para saída VGA (1bit)
Conexões para saída VGA (1bit)

O número reduzido de cores tornaria a plataforma menos atraente e o próprio Sandro Maffiodo produziu outra versão com até 16 cores. Nos testes não foi possível explorar os limites de processamento do Esp8266 na geração do sinal, especialmente quando outras rotinas estão em execução. Segundo o autor do projeto, não é possível acessar o Wi-fi ou realizar comunicação serial durante o redesenho do vídeo.

Geração de sinal branco (fundo azul)
Geração de sinal VGA – primeiro plano branco, fundo azul

Manipular literalmente bits para gerar o sinal VGA é uma arte. Tem gente que constrói placas de vídeo caseiras bitbangueando as cores. E há pessoas geniais, como Ben Eater.

Por enquanto ficarei na versão light da solução 🙂