IHM com ESP32 e display ILI9341

Com esse artigo encerro a série sobre esse display, com um breve vídeo ao final para poder mostrar todos os recursos implementados nessa IHM com ESP32 e display ILI9341. Vamos à introdução.

O que é IHM ou HMI ?

Já em português, IHM é o acrônimo de "Interface Homem-Máquina". Imediatamente ao citar o termo, o primeiro pensamento que costuma vir à mente é um display interativo para usar na indústria. Mas IHM não é um dispositivo necessariamente industrial, também não precisa ser um Nextion ou outro similar.

Uma interface homem-máquina pode ser, por exemplo, seu smartphone. Normalmente um termo um pouco mais apropriado seria IHC ou, "Interface Homem-Computador". Mas se considerarmos que o IHM necessita atuar sobre o "mundo físico", então o smartphone pode ser utilizado como IHM tendo um simples aplicativo para interação por MQTT , por exemplo - e recomendaria o MQTT Dashboard.

Uma IHM com ESP32 e display ILI9341 atualmente é possível, e relativamente fácil de desenvolver, graças à biblioteca LVGL, da qual escrevi uma série de artigos precedentes a este, assim como fiz alguns vídeos que estão disponíveis em nosso canal Dobitaobytebrasil no Youtube.

Uma das vantagens de se utilizar uma IHM é a simplificação do processo de implementação em relação ao hardware. Botoeiras, potenciômetros e jumpers podem ser substituídos facilmente, dando lugar a uma tela elegante, com uma ampla variedade de recursos, limitados unicamente pelo recurso da MCU que operará o display. Mas como muitas IHM têm processamento dedicado, do mesmo modo podemos fazê-lo com um ARM, como o BluePill, que é extremamente barato, ou mesmo um ESP32, desabilitando WiFi e Bluetooth, que normalmente não fazem parte (ou não deveriam fazer parte) da integração.

IHM com ESP32 e display ILI9341 no ColorMixer

Mas a surpresa certamente virá ao ver o vídeo. É impressionante a quantidade de recursos que adicionei ao sistema para gerir pelo display, ainda assim ocupando 70.9% da flash e 24.9% da memória RAM, incluindo o código completo de controle da interface, código de conversão de cores, controle do dispositivo I2C, 4 tasks de controle das bombas peristálticas, servidor socket TCP para receber cores do color picker (cujo socket roda em outra task), informações do sistema, sistema de arquivos com SPIFFS e diversos callbacks.

Criei a interface com planejamento mínimo do que queria ter disposto nela, então implementei mais recursos, e em nenhum momento planejei o código, que por conta disso pode ser refatorado, melhorando ainda mais os números relacionados à memória flash e RAM.

Características da interface do Color Mixer 2.0

Vou descrever brevemente as telas do projeto, mas ver o vídeo de apresentação será fundamental para apreciar os efeitos que a biblioteca LVGL oferece, além de ver os widgets em funcionamento.

Login

A primeira tela é a de login, feita pensando em deixar o misturador de cores em um ambiente acessível a crianças, para evitar que curiosos acionem o sistema.

A tela de login já foi apresentada nesse outro artigo, mas aqui incrementei com as letras de A à F, aumentando significativamente a força da senha, mas mantive a limitação de 6 dígitos. Um botão de logoff está disponível na camada superior, estando sobre as abas de todos os recursos, permitindo o bloqueio de tela a qualquer momento. A janela principal apresenta 3 abas, sendo a primeira a aba de cor, que inclui 4 outras abas. O botão de logoff na verdade tem o papel de fazer o reset. Se o login estiver habilitado, então será necessário entrar com a senha para acessar novamente a interface. Em contrapartida, se o padrão não tiver sido salvo, perder-se-á a amostra selecionada.

Color

Fundamentalmente o ColorMixer mistura cores C, M, Y, K. Sendo assim, a primeira tela após o login contém 3 abas, abrindo primeiramente a aba Color, com o padrão CMYK, permitindo operação direta nesse modo e, com isso, já atendendo ao requisitos funcionais da versão anterior. As cores são selecionadas por sliders. À direita dos sliders tem uma barrinha vertical que dá a amostra da cor selecionada ao ser clicada. Abaixo dos sliders tem o volume de tinta a extrair e o botão iniciar. No rodapé da aba Color temos os nomes das abas relacionadas às funcionalidades de cores. Se um volume não for definido e Start for acionado, um message box é exibido indicando a ausência do parâmetro.

Seguido da aba CMYK temos a aba RGB, para quem quiser selecionar a cor a partir desse padrão - lembrando que a cor resultante deve ser uma aproximação da cor extraída, considerando as limitações de mistura descritas nesse artigo do misturador de cores CMYK com ESP32, assim como as limitações impostas pelo padrão RGB565, descrito no artigo de como converter RGB888 para RGB565. Ou seja, a mistura mais fiel é a CMYK, considerando que esteja no gamut, cuja certeza advém de um programa como Photoshop, Gimp, Krita ou outro que ofereça seleção de cores apontando o gamut. Depois é só inserir os valores, e ainda que a amostra visual no display não esteja fiel, é relativamente mais confiável.

Na aba HSVtemos a seleção de cores por Hue, Saturation e Value. Deu um trabalhão criar a conversão de cores HSV para RGB e vice-versa, para posteriormente converter em CMYK, mas não está funcionando adequadamente, apenas coletando a amostra.

Ainda no menu HSV incluí a opção de entrar com os valores em 3 inputbox, com uma amostra de tamanho mais generoso, já que havia espaço sobrando nessa aba.

Na aba Save (que não parece ser o melhor nome, mas ainda não consegui pensar em algo melhor) temos um interessante conjunto de recursos. No topo da aba há um widget do tipo roller, contendo arquivos que podem ser criados a partir do padrão selecionado. Isto é, se eu tirei uma amostra de cor que se repetirá, não será necessário digitar os valores novamente, basta ir a essa aba e clicar no ícone de arquivo e a amostra será salva no sistema de arquivos do ESP32, numerado automaticamente. Também não importa se a amostra foi feita a partir do RGB, CMYK ou HSV. A amostra será salva em CMYK. Para carregar posteriormente, basta selecionar no roller ou através das setas UP/DOWN logo abaixo do roler, e clicar no ícone de download. A amostra à direita do roller carregará a cor, daí basta selecionar o volume de tinta para extração e clicar em Start. O número máximo de amostras a salvar está limitado a 5, que é o número máximo de arquivos que a aplicação está salvado no momento. Porém, se existirem os arquivos de setup, o número de padrões possíveis cai para 2. Clicando em Start sem selecionar um volume para extração, um msgbox também se abre dizendo para selecionar o volume para extração. Em suma, a interface assiste a operação. Para excluir um arquivo, clique no ícone de tesoura.

A conversão de cores é feita a partir da biblioteca EasyColor, disponível no gerenciador de bibliotecas do Arduino e desenvolvida por mim.

Os relés são acionados por um PCF8574, por isso criei também a biblioteca EasyPCF8574, que assim como a EasyColor, está disponível no gerenciador de bibliotecas do Arduino. Como migrei o código, a biblioteca para o PCF está inclusa, mas não implementada.

Se tem interesse em escrever bibliotecas para Arduino e disponibilizá-la oficialmente, leia o artigo Como criar uma biblioteca para Arduino.

System

Na aba System incluí as funções que achei fundamentais para não ser necessário ficar trocando de firmware para atualizações. Ela também possui duas abas, sendo a Info e a Setup.

Info

Nessa aba temos informações do WiFi, para adicionar ao color picker ou outro programa que queira fazer para interagir com o ColorMixer. O WiFi opera em modo AP por padrão. O modo é exibido nessa aba, assim como o IP e credenciais (de forma explícita).

Outra informação importante é o socket aberto para recepção de amostra por WiFi, caso deseje usar um color picker, como o descrito nesse artigo do ColorPicker com ESP32 Heltec Stick, da CurtoCircuito. Recomendo demais esse ESP32, ele é apaixonante! Nesse artigo também discorro sobre o melhor (IMHO) pack de bateria para ESP32, da Saravati.

Adicionei um gerenciador de arquivos para visualização do conteúdo e para fazer a exclusão deles. É bom manter o sistema de arquivos organizado, hum?

Setup

Em Setup adicionei diversos recursos:

• Troca das credenciais do WiFi (falta implementar).
• Calibração da extração (pode ser necessário, conforme a viscosidade do material a ser extraído (falta implementar)).
• Ativa/Desativa socket TCP (para segurança, caso não deseje usar o color picker. De qualquer modo, o start é só na tela).
• Mudança de senha de login (falta implementar).
• Ativa/Desativa WiFi (só é necessário se for utilizar o color picker).
• Desabilitar tela de login.
• Configuração do modo AP/STA (falta implementar).

É meio chato ver que falta implementar alguns recursos, mas preciso fazer outras tarefas e até agora já são 2280 linhas, já tenho mais do que preciso implementado, e com isso já consigo também mostrar a flexibilidade da biblioteca LVGL.

About

Nessa tela descrevo minha autoria, o hardware e as bibliotecas em uso na IHM com ESP32, além do nome do projeto, "ColorMixer 2.0".

Código fonte

O código está disponível para quem desejar, mas não serve como referência de "como programar" (porque não foi planejado), mas é uma ótima referência para quem quiser implementar os widgets do LVGL. Siga para o repositório no github e deixe uma estrela por lá!

Vídeo

O vídeo de apresentação da IHM com ESP32 estará na playlist LVGL em nosso canal Dobitaobytebrasil no Youtube, confira e apaixone-se. E se não for pedir demais, por favor, inscreva-se no canal. Não faço vídeos com frequência, mas atualmente tenho dedicado um esforço considerável para publicar artigos de maior qualidade, me ajude incentivando o canal com sua inscrição!

Revisão: Ricardo Amaral de Andrade

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

Também estamos no Instagram.