Como colocar imagem em display com Image2display

O modo tradicional de colocar imagem em display é bem chato:

• Baixar uma imagem
• Editar para acertar o tamanho
• Editar para cor, grayscale ou preto e branco
• Fazer upload para um site que converta a imagem para array de bytes.
• Copiar o array de bytes para uma variável no programa

O pior é quando uma conversão não fica adequada e toca repetir o processo. Se estiver pensando em usar mais de uma imagem, trabalho repetido. Foi um problema que me apareceu, relacionado a uma interface para uma fábrica de sutiã que estou fazendo automação. Bem, graças ao meu problema, seus problemas acabaram!

Colocar imagem em display com Image2display

Com orgulho e prazer, apresento um modesto trabalho de desenvolvimento, cujo programa fiz em Qt. Quando iniciei o desenvolvimento, meu propósito era testar algumas coisas diferentes, que talvez até entrem em outra versão do programa. Daí, por não ter compromisso com um programa final, implementei todos os métodos na MainWindow mesmo. Por essa razão, peço que não julguem a implementação do ponto de vista de padrões.

Falando agora do programa (esse da imagem mais abaixo), o tempo de preparação da imagem caiu consideravelmente em relação ao processo habitual feito por makers que utilizam recursos online.

Já adianto que sim, a interface mudará bastante e por várias vezes. Eu comecei fazendo para implementar simplesmente RGB565 e acabei me empolgando, por isso não está fluida, mas o Ricardo do Amaral já fez um "UX" em cima do projeto, logo mais implemento.

Modo de utilização do programa

Colocar imagem em display de forma prática? Ok!

No vídeo mostro claramente a utilização do programa. A distribuição na janela não foi à toa, mas faltou "um toque" para destacar o seguinte princípio: O programa na versão atual é uma suite de 4 módulos. Para utilizá-lo adequadamente, deve-se seguir no sentido horário, partindo da seleção da origem da imagem. Em alguns pontos a interface é interativa, então componentes que não podem ser utilizados em dado momento são desabilitados na janela.

Rodapé do Image2Display

No rodapé tem um singelo wizard, somente para orientações iniciais de cada etapa, as quais descrevo no próximo tópico.

"Por que não colocou em abas? Ou menus?" - Se você estiver no módulo 2 e decidir "dar um zoom" na área recortada, dá pra fazer. Claro, isso vai custar resolução por razões bem simples. Mas se estiver no módulo 3 e resolver fazer reposicionamento, basta clicar no item XY no módulo 2. Tudo tende a ser rápido, com poucos cliques e sem perder o foco. Vejamos agora cada módulo:

1 - Seleção de imagem

Os únicos widgets da janela disponíveis no primeiro momento são os seletores de origem. Ao clicar sobre um deles, libera-se então o botão Load. Ao clicar sobre ele, será aberto o gerenciador de arquivos para carregar uma imagem armazenada localmente - ou, abrir-se-á uma caixa para a entrada da URL da imagem. No caso da URL, a imagem será carregada diretamente para a memória, nem precisará salvá-la no HD/SSD.

O item proporcional resize dimensiona a imagem sem deformá-la. Isto é, se você colocar uma imagem de 200x200 e desejar que ela seja de 150x100, ela será redimensionada mantendo as proporções. Nesse caso, ela se ficaria 100x100 e essas dimensões poderão ser acompanhadas no visualizador do módulo 2. Tanto a imagem como as dimensões reais são visíveis no módulo 2. - Mas você precisa de uma imagem de 150x100, certo? - Ok, então dimensione o 100 até que o menor lado atinja o tamanho desejado. Em uma imagem quadrada é óbvio que a escolha seria 150x150. Agora vamos tirar a diferença; clique em Overwrite original size para confirmar a primeira operação.

2 - Visualizador com aparador de imagem

Quando a imagem estiver disponível, ela é carregada no visualizador à direita. Se você já sobrescreveu a imagem original seguindo o modo de operação do módulo 1), agora é hora de tirar a diferença. No rodapé do módulo 2 tem os ajustes de Height e Width. Basta ajustar o Height em 50 pixels, digitando na caixa ou clicando no botão ao lado do número. Ainda não clique no botão Apply antes de ler o próximo parágrafo.

Concluiu o ajuste, mas perdeu uma parte da imagem que queria que fosse mostrada? Sem problemas. Use o Y do módulo 2 para deslocar a imagem para cima ou para baixo, assim como o X para deslocar para esquerda e direita. Ao finalizar, transfira a imagem para o módulo 3, clicando em Apply.

3 - Seletor de conversão

Como vimos, o módulo 1 e o módulo 2 são módulos de edição, para ter a imagem com o formato desejado. Não tem Ctrl+Z, se fizer algo por distração e passar por um passo irreversível, recarregue a imagem e comece novamente. Nunca, em momento algum, uma imagem do HD/SSD será modificada; apenas uma cópia é carregada para a memória e tudo o que acontece no programa é apenas no programa. Isso significa que o programa é totalmente seguro, já que trabalha unicamente na memória.

O seletor de conversão tem características muito exclusivas, vou tentar explicar o conceito.

RGB565

Uma imagem colorida no computador é normalmente RGB24 ou ARGB32. O ARGB32 tem um canal alpha, relacionado à transparência. O tradicional RGB24 tem esse nome porque são 3 pixels de 8 bits, por isso é chamado também de RGB888. Os 8 bits comportam 256 valores, indo de 0 à 255 (ou em hexa, 0x0 à 0xFF).

No RGB16 temos 16 bits apenas - ou, 2 bytes. O problema é que ele não é uniforme; ele é conhecido também como RGB565, sendo 5 bits para R, 6 bits para G e 5 bits para B. Daí pegamos esses displays para usar com microcontroladores e acabamos indo para sites que convertem o RGB888 para RGB565. Muitos nem se dão conta disso, mesmo vendo um array do tipo const uint8_t variavel[] PROGMEM = { 0xfe1a, 0x... - Percebeu que temos apenas 2 bytes por vírgula? Pois é. E esse é o propósito da conversão para RGB565, para displays como o ILI9341 e afins.

Grayscale

A escala de cinzas é bem mais simples. Apenas 1 byte é utilizado, de modo que podemos ter preto em 0 e branco em 255. Porém se pegarmos RGB e colocarmos o mesmo valor em cada um dos pixels, teremos sempre cinza, mais claro ou mais escuro, dependendo da variação (ex: 100,100,100 para mais escuro e 200,200,200 para mais claro). O grayscale é ideal para displays como os e-ink, que conseguem exibir imagens bonitas em tons de cinza. No vídeo mostro uma imagem em um display e-ink "enorme", mas que exibe 16 tons de cinza. A grande questão é que 16 tons são 4 bits por canal, dando um pouco mais de trabalho pra programar o método de conversão. A propósito, uma vez convertido para cinza, não tem mais volta, a não ser recarregar a imagem.

Black and White

Esses displays OLED i2c e SPI que utilizamos com Arduino e afins, são monocromáticos; o pixel acende ou apaga, e só. O array dele só tem o ou 255, por isso é semelhante ao Grayscale. Após convertido para Grayscale ou Black and White, não tem mais como voltar para o colorido, a não ser recarregando a imagem. Como eu faço um "jogo" com o grayscale para fazer a conversão monocromática, se voltar ao passo 2 para fazer cropping, deve aparecer o grayscale durante o posicionamento. Clique em Apply novamente e mesmo que o Black and White esteja já selecionado, clique novamente. Isso fará a releitura.

Às vezes queremos inverter os pixels ligados com os desligados. Nesse caso o que fazemos é inverter as cores em um programa de edição. Bom, não mais. Clique na caixa Invert BW e clique no botão Black White.

4 - Viewer (array or sketch)

Apesar do nome estar lá, não estou gerando sketch ainda nessa versão porque quero desenvolver mais módulos para outros tipos de operação. Mas ao clicar em qualquer conversão, além de converter a imagem no visualizador, também é gerada a variável com o array de bytes. Daí você pode clicar em Copy, que fará automaticamente a seleção de tudo e copiará para a área de transferência. Daí é só usar Ctrl+V em um arquivo de header ou diretamente no início do seu sketch.

Download do Image2Display

Operando em cada um dos módulos conforme explicado, nada de anormal deve acontecer. Mas se você dimensionar a imagem no módulo 1 "sem" clicar no botão para finalizar a operação, quando for para o módulo 2, a imagem retornará ao tamanho original, porque ela não foi modificada. Por isso, inicie as operações lendo o Wizard do rodapé até se acostumar com o programa. Não confunda erro de operação com bug!

Removi o programa que estava disponível para download porque estava funcional, mas como fiz na base da "prova de conceito", a interface estava ruim. Reimplementei praticamente tudo já, e estou finalizando a implementação de coisas muito, muito legais! Em breve sai um novo artigo, link para download e vídeo.

A versão que está lá já está defasada, mas serve para experimentar. Hoje concluí a conversão para grayscale de 4 bits, mas cada vez que mexo em algo, aumenta a lista de coisas a implementar ou melhorar. Bem, assim que saem versões de programas.

No próximo artigo vamos ver alguns detalhes, iniciando com o T5 da LilyGo. O vídeo sai logo mais, mas primeiro preciso estar com todos os displays rodando imagens para fazer o vídeo. Assim que separar todo o material, já gravo e edito.

Ainda faltam testes, não se decepcione se algo não funcionar adequadamente.

Vídeo

O vídeo deve sair tão logo a nova interface do programa esteja finalizada. Inscreva-se no canal DobitaobyteBrasil no Youtube!

Inscreva-se no nosso canal Manual do Maker no YouTube.

Também estamos no Instagram.